From 58b0b307589729d613d00bd9812b531e362faecc Mon Sep 17 00:00:00 2001 From: GoOz <gooz@foojin.com> Date: Thu, 4 Jul 2019 12:05:15 +0200 Subject: [PATCH 01/20] feat: Add overflow utils --- stylus/cozy-ui/build.styl | 21 +++++++++++++++++++-- stylus/utilities/overflow.styl | 25 +++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 2 deletions(-) create mode 100644 stylus/utilities/overflow.styl diff --git a/stylus/cozy-ui/build.styl b/stylus/cozy-ui/build.styl index 5a35b236d7..9eeac903ac 100644 --- a/stylus/cozy-ui/build.styl +++ b/stylus/cozy-ui/build.styl @@ -1848,7 +1848,7 @@ Display an chip that represents complex identity Markup: <div class="{{modifier_class}}" style="display: inline-block; width: 10rem; height: 2rem; border: 1px solid black;"></div> - Weight: 14 + Weight: 15 Styleguide utilities.opacity */ @@ -1868,5 +1868,22 @@ Display an chip that represents complex identity Styleguide utilities.effects - Weight: 15 + Weight: 16 +*/ + +/* + Overflow + + Tells a container how its exceeding content behaves + + Markup: <div style="border:1px solid silver;" class="u-mb-2 u-p-half u-w-5 u-h-4 {{modifier_class}}">Non habitant lobortis hac maecenas eleifend donec parturient, lacinia aenean ac varius mattis purus scelerisque, congue montes dapibus tempor semper proin. Ullamcorper malesuada proin nec accumsan fermentum ac suspendisse posuere, lectus tristique tortor lorem faucibus primis sodales.</div> + + .u-ov-visible - Sets a visible overflow + .u-ov-hidden - Sets an hidden overflow + .u-ov-scroll - Sets a scroll overflow + .u-ov-auto - Sets an auto overflow + + Weight: 17 + + Styleguide utilities.overflow */ diff --git a/stylus/utilities/overflow.styl b/stylus/utilities/overflow.styl new file mode 100644 index 0000000000..b5e4c3c5d0 --- /dev/null +++ b/stylus/utilities/overflow.styl @@ -0,0 +1,25 @@ +/*------------------------------------*\ + Overflow utilities +\*------------------------------------*/ + +overflow-visible() + overflow visible + +overflow-hidden() + overflow hidden + +overflow-scroll() + overflow scroll + +overflow-auto() + overflow auto + +// Global classes +global('.u-ov-visible', overflow-visible, mixin) + +global('.u-ov-hidden', overflow-hidden, mixin) + +global('.u-ov-scroll', overflow-scroll, mixin) + +global('.u-ov-auto', overflow-auto, mixin) + From 8b0cde25dda5d43e220b3461514d1601814d5762 Mon Sep 17 00:00:00 2001 From: Quentin Valmori <quentin.valmori@gmail.com> Date: Mon, 8 Jul 2019 17:57:08 +0200 Subject: [PATCH 02/20] fix(label): Remove required for htmlFor It seems that `for` is not mandatory in the HTML Spec. In some case, we use the label without any input. --- react/Label/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/Label/index.jsx b/react/Label/index.jsx index 82691f77a0..06c6f249e8 100644 --- a/react/Label/index.jsx +++ b/react/Label/index.jsx @@ -24,7 +24,7 @@ const Label = props => { Label.propTypes = { children: PropTypes.node.isRequired, - htmlFor: PropTypes.string.isRequired, + htmlFor: PropTypes.string, className: PropTypes.string, error: PropTypes.bool, block: PropTypes.bool From 650de1eb179de4c754de38d9fce604c299d86dd6 Mon Sep 17 00:00:00 2001 From: GoOz <gooz@foojin.com> Date: Thu, 4 Jul 2019 18:04:12 +0200 Subject: [PATCH 03/20] feat: Add InputGroup component --- docs/styleguide.config.js | 1 + react/InputGroup/Readme.md | 89 ++++++++++++++++++++++ react/InputGroup/index.jsx | 57 ++++++++++++++ react/InputGroup/styles.styl | 22 ++++++ react/SelectBox/SelectBox.jsx | 19 +++-- react/__snapshots__/examples.spec.jsx.snap | 32 ++++---- react/index.js | 1 + react/testFromStyleguidist.js | 3 + stylus/components/forms.styl | 43 +++++++++++ 9 files changed, 246 insertions(+), 21 deletions(-) create mode 100644 react/InputGroup/Readme.md create mode 100644 react/InputGroup/index.jsx create mode 100644 react/InputGroup/styles.styl diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js index ce1a595518..40d569df6c 100644 --- a/docs/styleguide.config.js +++ b/docs/styleguide.config.js @@ -29,6 +29,7 @@ module.exports = { '../react/Checkbox/index.jsx', '../react/Field/index.jsx', '../react/Input/index.jsx', + '../react/InputGroup/index.jsx', '../react/Label/index.jsx', '../react/Radio/index.jsx', '../react/SelectBox/SelectBox.jsx', diff --git a/react/InputGroup/Readme.md b/react/InputGroup/Readme.md new file mode 100644 index 0000000000..0e29b03ea8 --- /dev/null +++ b/react/InputGroup/Readme.md @@ -0,0 +1,89 @@ +### InputGroup with an appended text + +``` +const { Bold } = require('../Text'); +const Input = require('../Input').default; +<form> + <div> + <InputGroup append={<Bold className="u-pr-1">text</Bold>}> + <Input placeholder="Placeholder" /> + </InputGroup> + </div> +</form> +``` + +### InputGroup with a prepended text + +``` +const { Bold } = require('../Text'); +const Input = require('../Input').default; +<form> + <div> + <InputGroup prepend={<Bold className="u-pl-1">text</Bold>}> + <Input placeholder="Placeholder" /> + </InputGroup> + </div> +</form> +``` + +### InputGroup with an appended input + +You will need to set a width to the side component, with a utility class for example. + +``` +const Input = require('../Input').default; +<form> + <div> + <InputGroup append={<Input placeholder="@domain.tld" className="u-w-4"/>}> + <Input placeholder="Email" /> + </InputGroup> + </div> +</form> +``` + +### InputGroup with an appended select + +You will need to set a width to the side component, with a utility class for example. + +``` +const SelectBox = require('../SelectBox').default; +const options = [ + { value: 'cozy.io', label: '.cozy.io' }, + { value: 'cozycloud.cc', label: '.cozycloud.cc' } +]; +<form> + <div> + <InputGroup append={<SelectBox inset options={options} className="u-w-4" />}> + <Input placeholder="URL" /> + </InputGroup> + </div> +</form> +``` + +### Full width InputGroup with an appended text + +``` +const { Bold } = require('../Text'); +const Input = require('../Input').default; +<form> + <div> + <InputGroup fullwidth append={<Bold className="u-pr-1">text</Bold>}> + <Input placeholder="Placeholder" /> + </InputGroup> + </div> +</form> +``` + +### Errored InputGroup with an appended text + +``` +const { Bold } = require('../Text'); +const Input = require('../Input').default; +<form> + <div> + <InputGroup error append={<Bold className="u-pr-1">text</Bold>}> + <Input placeholder="Placeholder" /> + </InputGroup> + </div> +</form> +``` diff --git a/react/InputGroup/index.jsx b/react/InputGroup/index.jsx new file mode 100644 index 0000000000..a4d144f082 --- /dev/null +++ b/react/InputGroup/index.jsx @@ -0,0 +1,57 @@ +import React, { Component } from 'react' +import cx from 'classnames' +import PropTypes from 'prop-types' +import styles from './styles.styl' + +class InputGroup extends Component { + constructor(props) { + super(props) + this.handleFocus = this.handleFocus.bind(this) + this.handleBlur = this.handleBlur.bind(this) + this.state = { + focused: false + } + } + + handleFocus() { + this.setState({ focused: true }) + } + + handleBlur() { + this.setState({ focused: false }) + } + + render() { + const { children, prepend, append, error, fullwidth } = this.props + const { focused } = this.state + return ( + <div + className={cx(styles['c-inputgroup'], { + [styles['c-inputgroup--error']]: error, + [styles['c-inputgroup--fullwidth']]: fullwidth, + [styles['c-inputgroup--focus']]: focused + })} + > + {prepend && ( + <div className={styles['c-inputgroup-side']}>{prepend}</div> + )} + <div className={styles['c-inputgroup-main']}>{children}</div> + {append && <div className={styles['c-inputgroup-side']}>{append}</div>} + </div> + ) + } +} + +InputGroup.propTypes = { + prepend: PropTypes.object, + append: PropTypes.object, + error: PropTypes.bool, + fullwidth: PropTypes.bool +} + +InputGroup.defaultProps = { + error: false, + fullwidth: false +} + +export default InputGroup diff --git a/react/InputGroup/styles.styl b/react/InputGroup/styles.styl new file mode 100644 index 0000000000..97c36a5e44 --- /dev/null +++ b/react/InputGroup/styles.styl @@ -0,0 +1,22 @@ +@require '../../stylus/components/forms' + +.c-inputgroup + @extend $inputgroup + + input + @extend $inputgroup-input + +.c-inputgroup--focus + @extend $inputgroup--focus + +.c-inputgroup--error + @extend $inputgroup--error + +.c-inputgroup--fullwidth + @extend $inputgroup--fullwidth + +.c-inputgroup-main + @extend $inputgroup-main + +.c-inputgroup-side + @extend $inputgroup-side diff --git a/react/SelectBox/SelectBox.jsx b/react/SelectBox/SelectBox.jsx index bc7d0e2726..45b59d785f 100644 --- a/react/SelectBox/SelectBox.jsx +++ b/react/SelectBox/SelectBox.jsx @@ -7,7 +7,7 @@ import { isIOSApp } from 'cozy-device-helper' import styles from './styles.styl' import Icon from '../Icon' -import { dodgerBlue, silver, coolGrey } from '../palette' +import { dodgerBlue, silver, coolGrey, paleGrey } from '../palette' import withBreakpoints from '../helpers/withBreakpoints' const heights = { @@ -16,17 +16,24 @@ const heights = { large: '3rem' } +const borderStyle = (props, state) => { + if (props.inset) { + return '.125rem solid white' + } + return `.0625rem solid ${state.isFocused ? dodgerBlue : silver}` +} + const customStyles = props => ({ control: (base, state) => ({ ...base, // The gray background color is managed via the select--disabled // class applied below backgroundColor: props.disabled ? 'transparent' : 'white', - border: state.isFocused - ? `.0625rem solid ${dodgerBlue}` - : `.0625rem solid ${silver}`, + border: borderStyle(props, state), ':hover': { - borderColor: coolGrey + borderColor: props.inset ? 'white' : coolGrey, + backgroundColor: props.inset ? paleGrey : 'white', + cursor: 'pointer' }, borderRadius: '.1875rem', boxShadow: 'unset', @@ -335,6 +342,7 @@ SelectBox.propTypes = { components: PropTypes.object, disabled: PropTypes.bool, fullwidth: PropTypes.bool, + inset: PropTypes.bool, name: PropTypes.string, inputRef: PropTypes.func, size: PropTypes.oneOf(['tiny', 'medium', 'large']), @@ -344,6 +352,7 @@ SelectBox.propTypes = { SelectBox.defaultProps = { components: {}, fullwidth: false, + inset: false, size: 'large', styles: {} } diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap index e3bfdcd123..2b1fe87c42 100644 --- a/react/__snapshots__/examples.spec.jsx.snap +++ b/react/__snapshots__/examples.spec.jsx.snap @@ -415,7 +415,7 @@ exports[`Field should render examples: Field 5`] = ` <form> <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'am a SelectBox</label> <div class=\\"css-10nd86i styles__select--autowidth___16AEp\\" id=\\"\\"> - <div class=\\"css-2zgoaw\\"> + <div class=\\"css-zdlybx\\"> <div class=\\"css-1phseng\\"> <div class=\\"css-1492t68\\">Select ...</div> <div class=\\"css-1g6gooi\\"> @@ -434,7 +434,7 @@ exports[`Field should render examples: Field 5`] = ` </div> <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'am a SelectBox with a value</label> <div class=\\"css-10nd86i styles__select--autowidth___16AEp\\" id=\\"\\"> - <div class=\\"css-2zgoaw\\"> + <div class=\\"css-zdlybx\\"> <div class=\\"css-1phseng\\"> <div class=\\"css-xp4uvy\\">Choice 2</div> <div class=\\"css-1g6gooi\\"> @@ -3158,7 +3158,7 @@ exports[`SelectBox should render examples: SelectBox 1`] = ` "<div> <div style=\\"background: whitesmoke; padding: .5em;\\"> <div class=\\"css-10nd86i styles__select--autowidth___16AEp\\"> - <div class=\\"css-2zgoaw\\"> + <div class=\\"css-zdlybx\\"> <div class=\\"css-1phseng\\"> <div class=\\"css-1492t68\\">Select...</div> <div class=\\"css-1g6gooi\\"> @@ -3181,7 +3181,7 @@ exports[`SelectBox should render examples: SelectBox 1`] = ` exports[`SelectBox should render examples: SelectBox 2`] = ` "<div> <div class=\\"css-10nd86i styles__select--autowidth___16AEp\\"> - <div class=\\"css-2zgoaw\\"> + <div class=\\"css-zdlybx\\"> <div class=\\"css-1phseng\\"> <div class=\\"css-1492t68\\">Select...</div> <div class=\\"css-1g6gooi\\"> @@ -3209,7 +3209,7 @@ exports[`SelectBox should render examples: SelectBox 3`] = ` "<div> <div style=\\"height: 12rem; padding: .5rem; overflow: auto;\\">Container height: 12rem. <button>Change container height</button> <div class=\\"css-10nd86i styles__select--autowidth___16AEp\\"> - <div class=\\"css-2zgoaw\\"> + <div class=\\"css-zdlybx\\"> <div class=\\"css-1phseng\\"> <div class=\\"css-1492t68\\">Select...</div> <div class=\\"css-1g6gooi\\"> @@ -3232,7 +3232,7 @@ exports[`SelectBox should render examples: SelectBox 3`] = ` exports[`SelectBox should render examples: SelectBox 4`] = ` "<div> <div class=\\"css-1sontr1 styles__select--autowidth___16AEp styles__select--disabled___1W3en\\"> - <div class=\\"css-adwy96\\"> + <div class=\\"css-htdvti\\"> <div class=\\"css-1phseng\\"> <div class=\\"css-1492t68\\">Select...</div> <div class=\\"css-1g6gooi\\"> @@ -3254,7 +3254,7 @@ exports[`SelectBox should render examples: SelectBox 4`] = ` exports[`SelectBox should render examples: SelectBox 5`] = ` "<div> <div class=\\"css-10nd86i styles__select--fullwidth___2l_xM\\"> - <div class=\\"css-2zgoaw\\"> + <div class=\\"css-zdlybx\\"> <div class=\\"css-1phseng\\"> <div class=\\"css-1492t68\\">Select...</div> <div class=\\"css-1g6gooi\\"> @@ -3277,7 +3277,7 @@ exports[`SelectBox should render examples: SelectBox 6`] = ` "<div> <div> <div class=\\"css-1sontr1 styles__select--autowidth___16AEp styles__select--disabled___1W3en\\"> - <div class=\\"css-adwy96\\"> + <div class=\\"css-htdvti\\"> <div class=\\"css-1phseng\\"> <div class=\\"css-1492t68\\">Select...</div> <div class=\\"css-1g6gooi\\"> @@ -3302,7 +3302,7 @@ exports[`SelectBox should render examples: SelectBox 7`] = ` <div> <div class=\\"u-mb-1\\"> <div class=\\"css-10nd86i styles__select--autowidth___16AEp\\"> - <div class=\\"css-1rg8gyn\\"> + <div class=\\"css-1enqz0q\\"> <div class=\\"css-1phseng\\"> <div class=\\"css-xp4uvy\\">I am a tiny SelectBox</div> <div class=\\"css-1g6gooi\\"> @@ -3321,7 +3321,7 @@ exports[`SelectBox should render examples: SelectBox 7`] = ` </div> <div class=\\"u-mb-1\\"> <div class=\\"css-10nd86i styles__select--autowidth___16AEp\\"> - <div class=\\"css-15w89vh\\"> + <div class=\\"css-s52rxs\\"> <div class=\\"css-1phseng\\"> <div class=\\"css-xp4uvy\\">I am a medium SelectBox</div> <div class=\\"css-1g6gooi\\"> @@ -3340,7 +3340,7 @@ exports[`SelectBox should render examples: SelectBox 7`] = ` </div> <div class=\\"u-mb-1\\"> <div class=\\"css-10nd86i styles__select--autowidth___16AEp\\"> - <div class=\\"css-2zgoaw\\"> + <div class=\\"css-zdlybx\\"> <div class=\\"css-1phseng\\"> <div class=\\"css-xp4uvy\\">I am a large SelectBox</div> <div class=\\"css-1g6gooi\\"> @@ -3388,7 +3388,7 @@ exports[`SelectBox should render examples: SelectBox 8`] = ` exports[`SelectBox should render examples: SelectBox 9`] = ` "<div> <div class=\\"css-10nd86i styles__select--autowidth___16AEp\\"> - <div class=\\"css-2zgoaw\\"> + <div class=\\"css-zdlybx\\"> <div class=\\"css-1phseng\\"> <div class=\\"css-1492t68\\">Select...</div> <div class=\\"css-1g6gooi\\"> @@ -3410,7 +3410,7 @@ exports[`SelectBox should render examples: SelectBox 9`] = ` exports[`SelectBox should render examples: SelectBox 10`] = ` "<div> <div class=\\"css-10nd86i styles__select--autowidth___16AEp\\"> - <div class=\\"css-2zgoaw\\"> + <div class=\\"css-zdlybx\\"> <div class=\\"css-1phseng\\"> <div class=\\"css-1492t68\\">Select...</div> <div class=\\"css-1g6gooi\\"> @@ -3432,7 +3432,7 @@ exports[`SelectBox should render examples: SelectBox 10`] = ` exports[`SelectBox should render examples: SelectBox 11`] = ` "<div> <div class=\\"css-10nd86i styles__select--autowidth___16AEp\\"> - <div class=\\"css-2zgoaw\\"> + <div class=\\"css-zdlybx\\"> <div class=\\"css-1phseng\\"> <div class=\\"css-1492t68\\">Select...</div> <div class=\\"css-1g6gooi\\"> @@ -3492,7 +3492,7 @@ exports[`SelectBox should render examples: SelectBox 11`] = ` exports[`SelectBox should render examples: SelectBox 12`] = ` "<div> <div class=\\"css-10nd86i styles__select--autowidth___16AEp\\"> - <div class=\\"css-2zgoaw\\"> + <div class=\\"css-zdlybx\\"> <div class=\\"css-1phseng needsclick\\"> <div class=\\"css-1492t68\\">Select...</div> <div class=\\"css-1g6gooi\\"> @@ -3514,7 +3514,7 @@ exports[`SelectBox should render examples: SelectBox 12`] = ` exports[`SelectBox should render examples: SelectBox 13`] = ` "<div> <div class=\\"css-10nd86i styles__select--autowidth___16AEp\\"> - <div class=\\"css-2zgoaw needsclick cz__control\\"> + <div class=\\"css-zdlybx needsclick cz__control\\"> <div class=\\"css-1phseng needsclick cz__value-container\\"> <div class=\\"css-1492t68 needsclick cz__placeholder\\">Select...</div> <div class=\\"css-1g6gooi\\"> diff --git a/react/index.js b/react/index.js index 46ee479b41..63474ca784 100644 --- a/react/index.js +++ b/react/index.js @@ -76,3 +76,4 @@ export { default as FileInput } from './FileInput' export { default as Card } from './Card' export { default as InlineCard } from './InlineCard' export { default as PercentageLine } from './PercentageLine' +export { default as InputGroup } from './InputGroup' diff --git a/react/testFromStyleguidist.js b/react/testFromStyleguidist.js index e72ad8b1c9..43d42c27f5 100644 --- a/react/testFromStyleguidist.js +++ b/react/testFromStyleguidist.js @@ -33,6 +33,7 @@ import I18n from './I18n' import Icon from './Icon' import Infos from './Infos' import Input from './Input' +import InputGroup from './InputGroup' import IntentHeader from './IntentHeader' import IntentIframe from './IntentIframe' import IntentModal from './IntentModal' @@ -90,6 +91,7 @@ const testFromStyleguidist = (name, markdown, require) => { 'Icon', 'Infos', 'Input', + 'InputGroup', 'IntentHeader', 'IntentIframe', 'IntentModal', @@ -141,6 +143,7 @@ const testFromStyleguidist = (name, markdown, require) => { Icon, Infos, Input, + InputGroup, IntentHeader, IntentIframe, IntentModal, diff --git a/stylus/components/forms.styl b/stylus/components/forms.styl index a3a38978b2..ade0c858bf 100644 --- a/stylus/components/forms.styl +++ b/stylus/components/forms.styl @@ -467,6 +467,49 @@ $field-inline flex-direction column margin-left 0 +$inputgroup + display inline-flex + flex-direction row + align-items stretch + width 100% + max-width rem(512) + border rem(1) solid var(--silver) + border-radius rem(2) + &:hover + border rem(1) solid var(--coolGrey) + +$inputgroup--focus + & + &:hover + border-color var(--dodgerBlue) + +$inputgroup--error + border-color var(--pomegranate) + +$inputgroup--fullwidth + max-width none + +$inputgroup-main + flex 1 1 auto + +$inputgroup-input + @extend $input-text + border 0 + padding-right rem(8) + &:hover + &:focus + position relative + z-index 1 + border 0 + outline 0 + +$inputgroup-side + display flex + flex-direction column + justify-content center + flex 0 1 auto + max-width rem(140) + $double-field width 100% From e628e09c9ed6a4a10358765fd65096f706baf856 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gre=CC=81gory=20Le=20Garec?= <gregory.legarec@gmail.com> Date: Mon, 8 Jul 2019 17:19:16 +0200 Subject: [PATCH 04/20] feat(Field): Remove Field label top-margin BREAKING CHANGE: Label element in Field component are losing their margin-top. --- react/Field/styles.styl | 2 +- stylus/components/forms.styl | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/react/Field/styles.styl b/react/Field/styles.styl index 9243c33f39..3251fae398 100644 --- a/react/Field/styles.styl +++ b/react/Field/styles.styl @@ -9,7 +9,7 @@ .o-side position absolute - top 1.5rem + top 0.5rem left 0 width 100% max-width rem(512) diff --git a/stylus/components/forms.styl b/stylus/components/forms.styl index a3a38978b2..901c9212f2 100644 --- a/stylus/components/forms.styl +++ b/stylus/components/forms.styl @@ -238,7 +238,6 @@ $label $label--block display block - margin-top rem(16) padding rem(8) 0 $input--disabled From fbe076719257a29b27b421bd0d0478dd4a3e492c Mon Sep 17 00:00:00 2001 From: GoOz <gooz@foojin.com> Date: Wed, 10 Jul 2019 10:36:02 +0200 Subject: [PATCH 05/20] feat: Add different sizes to Circle component Fixes: #784 --- react/Avatar/Readme.md | 10 +++---- react/Avatar/styles.styl | 12 ++++---- react/Circle/Readme.md | 21 ++++++++++++++ react/Circle/index.jsx | 2 +- react/Circle/styles.styl | 13 +++++++-- react/__snapshots__/examples.spec.jsx.snap | 10 +++---- stylus/components/avatar.styl | 32 ---------------------- stylus/components/circle.styl | 28 +++++++++++++++---- 8 files changed, 73 insertions(+), 55 deletions(-) diff --git a/react/Avatar/Readme.md b/react/Avatar/Readme.md index 65f6375f02..eef2bcaeba 100644 --- a/react/Avatar/Readme.md +++ b/react/Avatar/Readme.md @@ -22,27 +22,27 @@ Show an avatar with initials ### Available sizes: xsmall, small, medium (default), large, xlarge ``` <div> - <div> + <div class="u-flex"> <Avatar size="xsmall" /> <Avatar text="CD" size="xsmall" /> <Avatar image="https://cozy.io/fr/images/cozy-logo_white.png" size="xsmall" /> </div> - <div> + <div class="u-flex"> <Avatar size="small" /> <Avatar text="CD" size="small" /> <Avatar image="https://cozy.io/fr/images/cozy-logo_white.png" size="small" /> </div> - <div> + <div class="u-flex"> <Avatar size="medium" /> <Avatar text="CD" size="medium" /> <Avatar image="https://cozy.io/fr/images/cozy-logo_white.png" size="medium" /> </div> - <div> + <div class="u-flex"> <Avatar size="large" /> <Avatar text="CD" size="large" /> <Avatar image="https://cozy.io/fr/images/cozy-logo_white.png" size="large" /> </div> - <div> + <div class="u-flex"> <Avatar size="xlarge" /> <Avatar text="CD" size="xlarge" /> <Avatar image="https://cozy.io/fr/images/cozy-logo_white.png" size="xlarge" /> diff --git a/react/Avatar/styles.styl b/react/Avatar/styles.styl index 1e29695333..efeb4ee56a 100644 --- a/react/Avatar/styles.styl +++ b/react/Avatar/styles.styl @@ -1,22 +1,24 @@ @require '../../stylus/components/avatar' +@require '../../stylus/components/circle' .c-avatar + @extend $circle @extend $avatar .c-avatar--xsmall - @extend $avatar--xsmall + @extend $circle--xsmall .c-avatar--small - @extend $avatar--small + @extend $circle--small .c-avatar--large - @extend $avatar--large + @extend $circle--large .c-avatar--xlarge - @extend $avatar--xlarge + @extend $circle--xlarge .c-avatar-initials - @extend $avatar-initials + @extend $circle-text .c-avatar-image @extend $avatar-image diff --git a/react/Circle/Readme.md b/react/Circle/Readme.md index 236f4020d2..6eeadd3a85 100644 --- a/react/Circle/Readme.md +++ b/react/Circle/Readme.md @@ -9,3 +9,24 @@ Displays a simple circle with some text inside of it. </Circle> </div> ``` + +### Available sizes: xsmall, small, medium (default), large, xlarge +``` +<div> + <div> + <Circle size="xsmall">Yo</Circle> + </div> + <div> + <Circle size="small">Yo</Circle> + </div> + <div> + <Circle size="medium">Yo</Circle> + </div> + <div> + <Circle size="large">Yo</Circle> + </div> + <div> + <Circle size="xlarge">Yo</Circle> + </div> +</div> +``` diff --git a/react/Circle/index.jsx b/react/Circle/index.jsx index 6ce4c2d31f..c3eb0aeb4b 100644 --- a/react/Circle/index.jsx +++ b/react/Circle/index.jsx @@ -22,7 +22,7 @@ const Circle = ({ children, backgroundColor, size, className }) => { Circle.propTypes = { backgroundColor: PropTypes.string, - size: PropTypes.oneOf(['medium']), + size: PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']), className: PropTypes.string } diff --git a/react/Circle/styles.styl b/react/Circle/styles.styl index d78c5ae8d1..961d1fb73a 100644 --- a/react/Circle/styles.styl +++ b/react/Circle/styles.styl @@ -3,8 +3,17 @@ .c-circle @extend $circle -.c-circle--medium - @extend $circle--medium +.c-circle--xsmall + @extend $circle--xsmall + +.c-circle--small + @extend $circle--small + +.c-circle--large + @extend $circle--large + +.c-circle--xlarge + @extend $circle--xlarge .c-circle-text @extend $circle-text diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap index 2b1fe87c42..1aafb750a8 100644 --- a/react/__snapshots__/examples.spec.jsx.snap +++ b/react/__snapshots__/examples.spec.jsx.snap @@ -41,35 +41,35 @@ exports[`Avatar should render examples: Avatar 3`] = ` exports[`Avatar should render examples: Avatar 4`] = ` "<div> <div> - <div> + <div class=\\"u-flex\\"> <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--xsmall___3H2Io\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"> <use xlink:href=\\"#people\\"></use> </svg></div> <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--xsmall___3H2Io\\" style=\\"color: white;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div> <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--xsmall___3H2Io\\"><img src=\\"https://cozy.io/fr/images/cozy-logo_white.png\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div> </div> - <div> + <div class=\\"u-flex\\"> <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--small___1Y_Pv\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"> <use xlink:href=\\"#people\\"></use> </svg></div> <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--small___1Y_Pv\\" style=\\"color: white;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div> <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--small___1Y_Pv\\"><img src=\\"https://cozy.io/fr/images/cozy-logo_white.png\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div> </div> - <div> + <div class=\\"u-flex\\"> <div class=\\"styles__c-avatar___PpDI-\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"> <use xlink:href=\\"#people\\"></use> </svg></div> <div class=\\"styles__c-avatar___PpDI-\\" style=\\"color: white;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div> <div class=\\"styles__c-avatar___PpDI-\\"><img src=\\"https://cozy.io/fr/images/cozy-logo_white.png\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div> </div> - <div> + <div class=\\"u-flex\\"> <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--large___1Z_HZ\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"> <use xlink:href=\\"#people\\"></use> </svg></div> <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--large___1Z_HZ\\" style=\\"color: white;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span></div> <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--large___1Z_HZ\\"><img src=\\"https://cozy.io/fr/images/cozy-logo_white.png\\" class=\\"styles__c-avatar-image___3yJnb\\" alt=\\"\\"></div> </div> - <div> + <div class=\\"u-flex\\"> <div class=\\"styles__c-avatar___PpDI- styles__c-avatar--xlarge___3Qe0b\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"> <use xlink:href=\\"#people\\"></use> </svg></div> diff --git a/stylus/components/avatar.styl b/stylus/components/avatar.styl index 6e5c52df8a..f9c69a83a1 100644 --- a/stylus/components/avatar.styl +++ b/stylus/components/avatar.styl @@ -1,44 +1,12 @@ @require '../tools/mixins' $avatar - display inline-flex - align-items center - justify-content center - border-radius 50% - overflow hidden - width rem(40) - height rem(40) background-color var(--paleGrey) color var(--silver) - font-size rem(18) svg width 50% height 50% -$avatar--xsmall - width rem(16) - height rem(16) - font-size rem(7) - -$avatar--small - width rem(32) - height rem(32) - font-size rem(14) - -$avatar--large - width rem(48) - height rem(48) - font-size rem(21) - -$avatar--xlarge - width rem(64) - height rem(64) - font-size rem(27) - -$avatar-initials - font-weight bold - line-height 1 - $avatar-image width 100% diff --git a/stylus/components/circle.styl b/stylus/components/circle.styl index 23a6e46d30..93bedd7c60 100644 --- a/stylus/components/circle.styl +++ b/stylus/components/circle.styl @@ -6,13 +6,31 @@ $circle justify-content center border-radius 50% overflow hidden - color white - background-color var(--dodgerBlue) - -$circle--medium width rem(40) height rem(40) - font-size rem(20) + background-color var(--dodgerBlue) + color white + font-size rem(18) + +$circle--xsmall + width rem(16) + height rem(16) + font-size rem(7) + +$circle--small + width rem(32) + height rem(32) + font-size rem(14) + +$circle--large + width rem(48) + height rem(48) + font-size rem(21) + +$circle--xlarge + width rem(64) + height rem(64) + font-size rem(27) $circle-text font-weight bold From 16e125fde741511a02b5bd52499e3e962d1571fb Mon Sep 17 00:00:00 2001 From: GoOz <gooz@foojin.com> Date: Wed, 10 Jul 2019 15:37:35 +0200 Subject: [PATCH 06/20] chore: Remove useless split script --- stylus/scripts/split.js | 13 ------------- stylus/tools/mixins.styl | 1 - 2 files changed, 14 deletions(-) delete mode 100644 stylus/scripts/split.js diff --git a/stylus/scripts/split.js b/stylus/scripts/split.js deleted file mode 100644 index 7ee062ed1a..0000000000 --- a/stylus/scripts/split.js +++ /dev/null @@ -1,13 +0,0 @@ -'use strict' - -var plugin = function () { - return function (style) { - return style.define('split', function (delimiter, node) { - var nodename = node.toString().replace(/'/g, '') - delimiter = delimiter.toString().replace(/'/g, '') - return nodename.split(delimiter) - }) - } -} - -module.exports = plugin diff --git a/stylus/tools/mixins.styl b/stylus/tools/mixins.styl index 88081ccd7d..e49bf0626d 100644 --- a/stylus/tools/mixins.styl +++ b/stylus/tools/mixins.styl @@ -21,7 +21,6 @@ Styleguide Tools.mixins */ // @stylint off -use('../scripts/split.js') use('../scripts/deprecate.js') // @stylint on From 1f0fa94027917206b2f6649832b4ddf5bbbca6fe Mon Sep 17 00:00:00 2001 From: GoOz <gooz@foojin.com> Date: Wed, 10 Jul 2019 15:44:05 +0200 Subject: [PATCH 07/20] chore: Remove json from palette.styl --- stylus/settings/palette.styl | 1 - 1 file changed, 1 deletion(-) diff --git a/stylus/settings/palette.styl b/stylus/settings/palette.styl index 1862412cc2..ca7c9784b6 100644 --- a/stylus/settings/palette.styl +++ b/stylus/settings/palette.styl @@ -1,4 +1,3 @@ -json('palette.json') // @stylint off /*------------------------------------*\ Palette From 56d067f7f5e369b194ee9c59ad81b94c0c082656 Mon Sep 17 00:00:00 2001 From: GoOz <gooz@foojin.com> Date: Wed, 10 Jul 2019 15:49:37 +0200 Subject: [PATCH 08/20] chore: Rename KSS build task for clarity --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 7b18280121..ad30df5365 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "build:css:all": "yarn build:css && yarn build:css:utils", "build:css": "env CSSMODULES=false stylus -c --include stylus -o dist/cozy-ui.min.css stylus/cozy-ui/build.styl --use ./node_modules/autoprefixer-stylus --with \"{ browsers: ['last 2 versions'] }\"", "build:css:utils": "env CSSMODULES=false stylus -c --include stylus -o dist/cozy-ui.utils.min.css stylus/cozy-ui/utils.styl --use ./node_modules/autoprefixer-stylus --with \"{ browsers: ['last 2 versions'] }\"", - "build:css:app": "env CSSMODULES=false stylus -c --include stylus -o build/styleguide/app.css stylus/cozy-ui/build.styl --use ./node_modules/autoprefixer-stylus --with \"{ browsers: ['last 2 versions'] }\"", + "build:css:kss": "env CSSMODULES=false stylus -c --include stylus -o build/styleguide/app.css stylus/cozy-ui/build.styl --use ./node_modules/autoprefixer-stylus --with \"{ browsers: ['last 2 versions'] }\"", "build:doc": "npm-run-all 'build:doc:*'", "build:doc:config": "copyfiles -u 1 docs/*.md docs/_config.yml build", "build:doc:kss": "kss --destination build/styleguide --title 'Cozy-UI Styleguide' --source stylus --builder node_modules/michelangelo/kss_styleguide/custom-template --homepage styleguide.md --css app.css", @@ -32,8 +32,8 @@ "palette": "scripts/make-palette.sh", "prebuild:css": "mkdir -p dist/ && stylus -C node_modules/normalize.css/normalize.css node_modules/normalize.css/normalize.styl", "prebuild:css:utils": "mkdir -p dist/", - "prebuild:css:app": "mkdir -p build/styleguide && stylus -C node_modules/normalize.css/normalize.css node_modules/normalize.css/normalize.styl", - "prebuild:doc:kss": "run-s clean:doc:kss build:css:app", + "prebuild:css:kss": "mkdir -p build/styleguide && stylus -C node_modules/normalize.css/normalize.css node_modules/normalize.css/normalize.styl", + "prebuild:doc:kss": "run-s clean:doc:kss build:css:kss", "prepare": "yarn release", "prepush": "[[ $(git rev-parse --abbrev-ref HEAD) != 'gh-pages' ]] && yarn lint || true", "release": "npm-run-all --parallel sprite palette && yarn transpile", From 768c03a1a92dcbfbc2c738186ce73127f22c3a35 Mon Sep 17 00:00:00 2001 From: Yannick Lohse <contact@yannick-lohse.fr> Date: Wed, 10 Jul 2019 16:17:29 +0200 Subject: [PATCH 09/20] fix: Don't crash when TARGET is missing --- react/AppLinker/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/AppLinker/index.jsx b/react/AppLinker/index.jsx index 36bfb7ba1f..b34d87eeb1 100644 --- a/react/AppLinker/index.jsx +++ b/react/AppLinker/index.jsx @@ -33,7 +33,7 @@ export class AppLinker extends React.Component { } componentDidMount() { - if (__TARGET__ === 'mobile') { + if (typeof __TARGET__ !== 'undefined' && __TARGET__ === 'mobile') { this.checkAppAvailability() } } From 7f62923984f79d5451feb5427539e0a17babd1c9 Mon Sep 17 00:00:00 2001 From: GoOz <gooz@foojin.com> Date: Wed, 10 Jul 2019 17:49:28 +0200 Subject: [PATCH 10/20] chore: Extract typography utilities --- react/Text/index.jsx | 15 ++++++------- react/Text/styles.styl | 22 ------------------- stylus/cozy-ui/build.styl | 1 - stylus/{generic => utilities}/typography.styl | 22 ++++++------------- 4 files changed, 14 insertions(+), 46 deletions(-) delete mode 100644 react/Text/styles.styl rename stylus/{generic => utilities}/typography.styl (79%) diff --git a/react/Text/index.jsx b/react/Text/index.jsx index b55eb23d2e..17ba90dfa6 100644 --- a/react/Text/index.jsx +++ b/react/Text/index.jsx @@ -1,7 +1,6 @@ import React from 'react' import cx from 'classnames' import PropTypes from 'prop-types' -import styles from './styles.styl' export const BaseText = props => { const { className, children, tag, ellipsis, ...restProps } = props @@ -22,25 +21,25 @@ export const BaseText = props => { } export const Text = ({ className, ...restProps }) => ( - <BaseText className={cx(styles['u-text'], className)} {...restProps} /> + <BaseText className={cx('u-text', className)} {...restProps} /> ) export const MainTitle = ({ className, ...restProps }) => ( - <BaseText className={cx(styles['u-title-h1'], className)} {...restProps} /> + <BaseText className={cx('u-title-h1', className)} {...restProps} /> ) export const Title = ({ className, ...restProps }) => ( - <BaseText className={cx(styles['u-title-h2'], className)} {...restProps} /> + <BaseText className={cx('u-title-h2', className)} {...restProps} /> ) export const SubTitle = ({ className, ...restProps }) => ( - <BaseText className={cx(styles['u-title-h3'], className)} {...restProps} /> + <BaseText className={cx('u-title-h3', className)} {...restProps} /> ) export const Bold = ({ className, ...restProps }) => ( - <BaseText className={cx(styles['u-title-h4'], className)} {...restProps} /> + <BaseText className={cx('u-title-h4', className)} {...restProps} /> ) export const Uppercase = ({ className, ...restProps }) => ( - <BaseText className={cx(styles['u-uppercase'], className)} {...restProps} /> + <BaseText className={cx('u-uppercase', className)} {...restProps} /> ) export const Caption = ({ className, ...restProps }) => ( - <BaseText className={cx(styles['u-caption'], className)} {...restProps} /> + <BaseText className={cx('u-caption', className)} {...restProps} /> ) // Props diff --git a/react/Text/styles.styl b/react/Text/styles.styl deleted file mode 100644 index 547a17f999..0000000000 --- a/react/Text/styles.styl +++ /dev/null @@ -1,22 +0,0 @@ -@require '../../stylus/generic/typography' - -.u-title-h1 - @extend $title-h1 - -.u-title-h2 - @extend $title-h2 - -.u-title-h3 - @extend $title-h3 - -.u-title-h4 - @extend $title-h4 - -.u-text - @extend $text - -.u-uppercase - @extend $uppercase - -.u-caption - @extend $caption diff --git a/stylus/cozy-ui/build.styl b/stylus/cozy-ui/build.styl index 9eeac903ac..96b33e0ab8 100644 --- a/stylus/cozy-ui/build.styl +++ b/stylus/cozy-ui/build.styl @@ -959,7 +959,6 @@ Display an chip that represents complex identity Styleguide utilities.typography */ -@require '../../react/Text/styles.styl' .wizard @extend $wizard diff --git a/stylus/generic/typography.styl b/stylus/utilities/typography.styl similarity index 79% rename from stylus/generic/typography.styl rename to stylus/utilities/typography.styl index 06da43045a..3fa857c790 100644 --- a/stylus/generic/typography.styl +++ b/stylus/utilities/typography.styl @@ -56,18 +56,10 @@ $caption $uppercase text-transform uppercase -/*------------------------------------*\ - Link -\*------------------------------------*/ -$link - &:link - color var(--dodgerBlue) - text-decoration none - - &:visited - &:active - &:hover - &:focus - color var(--scienceBlue) - -global('.u-link', $link) +global('.u-title-h1', $title-h1) +global('.u-title-h2', $title-h2) +global('.u-title-h3', $title-h3) +global('.u-title-h4', $title-h4) +global('.u-text', $text) +global('.u-uppercase', $uppercase) +global('.u-caption', $caption) From e73811c7dfd9bd434b8c85bc662056b44829c68b Mon Sep 17 00:00:00 2001 From: GoOz <gooz@foojin.com> Date: Wed, 10 Jul 2019 17:54:11 +0200 Subject: [PATCH 11/20] chore: Add link utilities --- stylus/cozy-ui/build.styl | 14 ++++++++++++++ stylus/utilities/text.styl | 12 ++++++++++++ 2 files changed, 26 insertions(+) diff --git a/stylus/cozy-ui/build.styl b/stylus/cozy-ui/build.styl index 96b33e0ab8..be53bd0fbc 100644 --- a/stylus/cozy-ui/build.styl +++ b/stylus/cozy-ui/build.styl @@ -941,6 +941,20 @@ Display an chip that represents complex identity Styleguide utilities.text.midellipsis */ +/* + Link + + Style for a simple link + + Markup: <a href="#" class="{{modifier_class}}">Link</a> + + .u-link - Link style + + Weight: 12 + + Styleguide utilities.text.link +*/ + /* Typography diff --git a/stylus/utilities/text.styl b/stylus/utilities/text.styl index a3adf724b7..938cea5f03 100644 --- a/stylus/utilities/text.styl +++ b/stylus/utilities/text.styl @@ -51,6 +51,17 @@ $midellipsis > :first-child text-overflow '[...]' +$link + &:link + color var(--dodgerBlue) + text-decoration none + + &:visited + &:active + &:hover + &:focus + color var(--scienceBlue) + // @stylint off lh-tiny() line-height 1!important @@ -163,3 +174,4 @@ global('.u-warn', $warn) global('.u-breakword', $breakword) global('.u-ellipsis', $ellipsis) global('.u-midellipsis', $midellipsis) +global('.u-link', $link) From 2cc37e18e3271462d9c322620bc1043fc5a9545f Mon Sep 17 00:00:00 2001 From: GoOz <gooz@foojin.com> Date: Wed, 10 Jul 2019 17:57:19 +0200 Subject: [PATCH 12/20] chore: Remove unecessary style from UI build for React --- stylus/cozy-ui/index.styl | 4 ---- 1 file changed, 4 deletions(-) diff --git a/stylus/cozy-ui/index.styl b/stylus/cozy-ui/index.styl index 34f5f2dbf6..6ad049e767 100644 --- a/stylus/cozy-ui/index.styl +++ b/stylus/cozy-ui/index.styl @@ -1,7 +1,3 @@ -@require '../settings/*' -@require '../tools/*' @require '../generic/*' @require '../elements/*' -@require '../objects/*' -@require '../components/*' @require '../utilities/*' From 3c81131628dd39058b658edb5eda56463829bafc Mon Sep 17 00:00:00 2001 From: GoOz <gooz@foojin.com> Date: Wed, 10 Jul 2019 18:00:50 +0200 Subject: [PATCH 13/20] chore: Update tests --- react/__snapshots__/examples.spec.jsx.snap | 46 +++++++++++----------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap index 2b1fe87c42..f99feb6cd7 100644 --- a/react/__snapshots__/examples.spec.jsx.snap +++ b/react/__snapshots__/examples.spec.jsx.snap @@ -14,7 +14,7 @@ exports[`ActionMenu should render examples: ActionMenu 2`] = ` exports[`AppTitle should render examples: AppTitle 1`] = ` "<div> - <h1 class=\\"styles__u-title-h1___fimho styles__c-apptitle___eqV9l\\">Drive</h1> + <h1 class=\\"u-title-h1 styles__c-apptitle___eqV9l\\">Drive</h1> </div>" `; @@ -297,8 +297,8 @@ exports[`ButtonAction should render examples: ButtonAction 3`] = ` exports[`Card should render examples: Card 1`] = ` "<div> <div class=\\"styles__c-card___YgP7B\\"> - <div class=\\"styles__u-title-h3___1ZGqN u-mb-1\\">This is a card</div> - <div class=\\"styles__u-text___2UfQa u-mb-1\\">This is some card content. Content can be small or huge.</div><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--center___16_Xh u-ml-0\\"><span><span>Demo button</span></span></button> + <div class=\\"u-title-h3 u-mb-1\\">This is a card</div> + <div class=\\"u-text u-mb-1\\">This is some card content. Content can be small or huge.</div><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--center___16_Xh u-ml-0\\"><span><span>Demo button</span></span></button> </div> </div>" `; @@ -306,15 +306,15 @@ exports[`Card should render examples: Card 1`] = ` exports[`Card should render examples: Card 2`] = ` "<div> <div class=\\"styles__c-card___YgP7B styles__c-card--inset___2pofc\\"> - <div class=\\"styles__u-text___2UfQa\\">This is some card content. Content can be small or huge. Also, it has margins.</div> + <div class=\\"u-text\\">This is some card content. Content can be small or huge. Also, it has margins.</div> </div> </div>" `; exports[`Card should render examples: Card 3`] = ` "<div><a class=\\"styles__c-card___YgP7B\\" href=\\"https://cozy.io\\" target=\\"_blank\\"> - <div class=\\"styles__u-title-h3___1ZGqN\\">Visit cozy.io</div> - <div class=\\"styles__u-text___2UfQa\\">To learn more about us</div> + <div class=\\"u-title-h3\\">Visit cozy.io</div> + <div class=\\"u-text\\">To learn more about us</div> </a></div>" `; @@ -356,7 +356,7 @@ exports[`Empty should render examples: Empty 1`] = ` <div class=\\"styles__c-empty___3w5oV\\"><svg class=\\"styles__c-empty-img___2GC4d styles__icon___23x3R\\" width=\\"100%\\" height=\\"100%\\"> <use xlink:href=\\"#cozy\\"></use> </svg> - <h2 class=\\"styles__u-title-h1___fimho styles__c-empty-title___2HduE\\">This list is empty</h2> + <h2 class=\\"u-title-h1 styles__c-empty-title___2HduE\\">This list is empty</h2> <p class=\\"styles__c-empty-text___3HnvR\\">Try adding some content to this list</p> <div class=\\"styles__c-empty-text___3HnvR\\"></div> </div> @@ -370,7 +370,7 @@ exports[`Empty should render examples: Empty 2`] = ` <div class=\\"styles__c-empty___3w5oV\\" id=\\"empty\\"><svg class=\\"styles__c-empty-img___2GC4d styles__icon___23x3R\\" width=\\"100%\\" height=\\"100%\\"> <use xlink:href=\\"#cozy\\"></use> </svg> - <h2 class=\\"styles__u-title-h1___fimho styles__c-empty-title___2HduE\\">An error occured</h2> + <h2 class=\\"u-title-h1 styles__c-empty-title___2HduE\\">An error occured</h2> <p class=\\"styles__c-empty-text___3HnvR\\">It's maybe nothing, just refresh to be sure</p> <div class=\\"styles__c-empty-text___3HnvR\\"><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--center___16_Xh\\"><span><span>Try refreshing</span></span></button></div> </div> @@ -3022,7 +3022,7 @@ exports[`Infos should render examples: Infos 1`] = ` <div> <div class=\\"u-flex u-flex-column u-maw-6 u-mih-2 u-bdrs-4 u-ph-1 u-pt-1 u-bg-paleGrey u-ta-left\\"> <div class=\\"u-flex u-w-100 u-mb-1\\"> - <div class=\\"styles__u-text___2UfQa u-ta-left\\">My small persistent information! </div> + <div class=\\"u-text u-ta-left\\">My small persistent information! </div> </div> </div> <div style=\\"height: 10px;\\"></div> @@ -3030,16 +3030,16 @@ exports[`Infos should render examples: Infos 1`] = ` <div class=\\"u-flex u-w-100 u-mb-1\\"><svg class=\\"styles__infos--icon___2XWQm u-w-1 u-h-1 u-flex-shrink-0 styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"> <use xlink:href=\\"#info\\"></use> </svg> - <div class=\\"styles__u-text___2UfQa u-ta-left u-pl-half\\">My small persistent information, with an icon. And lot of text ? Again and again...</div> + <div class=\\"u-text u-ta-left u-pl-half\\">My small persistent information, with an icon. And lot of text ? Again and again...</div> </div> </div> <div style=\\"height: 10px;\\"></div> <div class=\\"u-flex u-flex-column u-maw-6 u-mih-2 u-bdrs-4 u-ph-1 u-pt-1 u-bg-paleGrey u-ta-left u-bg-chablis\\"> - <div class=\\"styles__u-title-h3___1ZGqN u-mb-1 u-pomegranate\\">Infos breaking news</div> + <div class=\\"u-title-h3 u-mb-1 u-pomegranate\\">Infos breaking news</div> <div class=\\"u-flex u-w-100 u-mb-1\\"><svg class=\\"styles__infos--icon___2XWQm u-w-1 u-h-1 u-flex-shrink-0 styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"> <use xlink:href=\\"#warning\\"></use> </svg> - <div class=\\"styles__u-text___2UfQa u-ta-left u-pl-half\\">My small persistent information, with an icon. And lot of text ? Again and again...</div> + <div class=\\"u-text u-ta-left u-pl-half\\">My small persistent information, with an icon. And lot of text ? Again and again...</div> </div> <div class=\\"u-flex-shrink-0 u-mb-1\\"><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--danger___17T_C styles__c-btn--center___16_Xh\\"><span>A CTA button</span></button></div> </div> @@ -3076,7 +3076,7 @@ exports[`Label should render examples: Label 3`] = ` exports[`ListItemText should render examples: ListItemText 1`] = ` "<div> <div class=\\"styles__c-list-text___3kc3E\\"> - <div class=\\"u-ellipsis styles__u-text___2UfQa\\">I'm a list item text</div> + <div class=\\"u-ellipsis u-text\\">I'm a list item text</div> </div> </div>" `; @@ -3084,8 +3084,8 @@ exports[`ListItemText should render examples: ListItemText 1`] = ` exports[`ListItemText should render examples: ListItemText 2`] = ` "<div> <div class=\\"styles__c-list-text___3kc3E\\"> - <div class=\\"u-ellipsis styles__u-text___2UfQa\\">I'm a primary text</div> - <div class=\\"u-ellipsis styles__u-caption___1VRxy\\">I'm a secondary text</div> + <div class=\\"u-ellipsis u-text\\">I'm a primary text</div> + <div class=\\"u-ellipsis u-caption\\">I'm a secondary text</div> </div> </div>" `; @@ -3093,7 +3093,7 @@ exports[`ListItemText should render examples: ListItemText 2`] = ` exports[`ListItemText should render examples: ListItemText 3`] = ` "<div> <div class=\\"styles__c-list-text___3kc3E\\"> - <div class=\\"styles__u-text___2UfQa\\">I'm a primary text</div><a class=\\"styles__u-caption___1VRxy\\" href=\\"http://cozy.io\\"> + <div class=\\"u-text\\">I'm a primary text</div><a class=\\"u-caption\\" href=\\"http://cozy.io\\"> <div class=\\"u-midellipsis\\"><span>Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815 – 27 November 1852) was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognis</span><span>e that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is often regarded as the first to recognise the full potential of a \\"computing machine\\" and the first computer programmer.</span></div> </a> </div> @@ -3622,43 +3622,43 @@ exports[`Spinner should render examples: Spinner 5`] = ` exports[`Text should render examples: Text 1`] = ` "<div> - <div class=\\"styles__u-text___2UfQa\\">This a standard text</div> + <div class=\\"u-text\\">This a standard text</div> </div>" `; exports[`Text should render examples: Text 2`] = ` "<div> - <div class=\\"styles__u-title-h1___fimho\\">This a main title text</div> + <div class=\\"u-title-h1\\">This a main title text</div> </div>" `; exports[`Text should render examples: Text 3`] = ` "<div> - <div class=\\"styles__u-title-h2___2cES6\\">This a title text</div> + <div class=\\"u-title-h2\\">This a title text</div> </div>" `; exports[`Text should render examples: Text 4`] = ` "<div> - <div class=\\"styles__u-title-h3___1ZGqN\\">This a subtitle text</div> + <div class=\\"u-title-h3\\">This a subtitle text</div> </div>" `; exports[`Text should render examples: Text 5`] = ` "<div> - <div class=\\"styles__u-title-h4___1lGMy\\">This a bold text</div> + <div class=\\"u-title-h4\\">This a bold text</div> </div>" `; exports[`Text should render examples: Text 6`] = ` "<div> - <div class=\\"styles__u-uppercase___aobU-\\">This is an uppercase text</div> + <div class=\\"u-uppercase\\">This is an uppercase text</div> </div>" `; exports[`Text should render examples: Text 7`] = ` "<div> - <div class=\\"styles__u-caption___1VRxy\\">This a note text</div> + <div class=\\"u-caption\\">This a note text</div> </div>" `; From 1a74e44323d7e43330266febe44aa36d66cacaf7 Mon Sep 17 00:00:00 2001 From: Cyrille Perois <cperois@outlook.com> Date: Thu, 11 Jul 2019 15:23:17 +0200 Subject: [PATCH 14/20] fix(wizard): Align badge right edge with logo right edge --- stylus/components/wizard.styl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stylus/components/wizard.styl b/stylus/components/wizard.styl index e748d4ed4a..452d1589d1 100644 --- a/stylus/components/wizard.styl +++ b/stylus/components/wizard.styl @@ -176,7 +176,7 @@ $wizard-logo-badge justify-content center position absolute bottom rem(6) - right rem(16) + right rem(-6) width rem(32) height rem(32) border .125rem solid white From c9d3c16d0c2e080cfcff73470ae621045ff5c75a Mon Sep 17 00:00:00 2001 From: Cyrille Perois <cperois@outlook.com> Date: Thu, 11 Jul 2019 15:44:39 +0200 Subject: [PATCH 15/20] fix(wizard): Properly align the back arrow with the title --- stylus/components/wizard.styl | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/stylus/components/wizard.styl b/stylus/components/wizard.styl index 452d1589d1..9f15d7901f 100644 --- a/stylus/components/wizard.styl +++ b/stylus/components/wizard.styl @@ -101,11 +101,12 @@ $wizard-header flex-direction column box-sizing border-box max-width rem(544) - margin rem(16) auto rem(8) + margin rem(16) 0 rem(8) padding 0 rem(16) + position relative +small-device() - margin rem(16) auto 0 + margin rem(16) 0 0 $wizard-header--dual margin-bottom rem(32) @@ -241,12 +242,16 @@ $wizard-desc--footer $wizard-header-fixed position fixed - top rem(14) - left 0 + top rem(8) + left rem(16) display inline-flex align-items center $wizard-previous + position absolute + top 50% + left 0 + transform translateY(-50%) margin 0 padding rem(10) rem(16) color var(--coolGrey) From 922d369da5a2b8f367cfbf8d64119e262476f4a3 Mon Sep 17 00:00:00 2001 From: Cyrille Perois <cperois@outlook.com> Date: Thu, 11 Jul 2019 17:33:42 +0200 Subject: [PATCH 16/20] feat(wizard): Logo badge placement is height agnostic By not forcing a specific height on the logo container, we can position the badge at the right place no matter what the image height is --- stylus/components/wizard.styl | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/stylus/components/wizard.styl b/stylus/components/wizard.styl index 9f15d7901f..9fa4e734bd 100644 --- a/stylus/components/wizard.styl +++ b/stylus/components/wizard.styl @@ -166,17 +166,17 @@ $wizard-logo position relative margin 0 auto width rem(120) - height rem(120) $wizard-logo-img width 100% + vertical-align center $wizard-logo-badge display flex align-items center justify-content center position absolute - bottom rem(6) + bottom rem(-6) right rem(-6) width rem(32) height rem(32) From a09cd768b9286f43ce2f023db3a913a06b6e3e12 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Fri, 12 Jul 2019 11:15:09 +0200 Subject: [PATCH 17/20] chore(deps): update dependency lodash to v4.17.13 [security] (#1103) --- package.json | 2 +- yarn.lock | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index ad30df5365..a379f7fd23 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,7 @@ "jest-cli": "24.8.0", "kss": "3.0.0-beta.25", "kss-webpack-plugin": "1.3.1", - "lodash": "4.17.11", + "lodash": "4.17.13", "michelangelo": "https://github.com/cozy/michelangelo.git", "mini-css-extract-plugin": "0.6.0", "nodemon": "1.19.1", diff --git a/yarn.lock b/yarn.lock index ba00316d43..c9095810a0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8495,6 +8495,11 @@ lodash@4.17.11, lodash@^4.14.2, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11 resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d" integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg== +lodash@4.17.13: + version "4.17.13" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.13.tgz#0bdc3a6adc873d2f4e0c4bac285df91b64fc7b93" + integrity sha512-vm3/XWXfWtRua0FkUyEHBZy8kCPjErNBT9fJx8Zvs+U6zjqPbTUOpkaoum3O5uiA8sm+yNMHXfYkTUHFoMxFNA== + log-symbols@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a" From fe3e3751a5147e2e103df0ff6e6137236033c8e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gre=CC=81gory=20Le=20Garec?= <gregory.legarec@gmail.com> Date: Tue, 16 Jul 2019 11:49:07 +0200 Subject: [PATCH 18/20] =?UTF-8?q?chore:=20Update=20code=20owners=20?= =?UTF-8?q?=F0=9F=93=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CODEOWNERS | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/CODEOWNERS b/CODEOWNERS index 490f094ef0..7109b507ad 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -1,10 +1,2 @@ # General code owners -* @GoOz @ptbrowne @y-lohse - -# GoOz is responsible for CSS/Stylus files -*.css @GoOz -*.styl @GoOz - -# cpatchane and ptbrowne for React components -*.js @cpatchane @ptbrowne @y-lohse -*.jsx @cpatchane @ptbrowne @y-lohse +* @ptbrowne @y-lohse From 895b8e4453fe9ce261404ea5e49fa2bfee47b8b8 Mon Sep 17 00:00:00 2001 From: Quentin Valmori <quentin.valmori@gmail.com> Date: Tue, 16 Jul 2019 13:20:39 +0200 Subject: [PATCH 19/20] fix: Do not use __TARGET__ on a lib --- package.json | 1 - react/AppLinker/Readme.md | 1 - react/AppLinker/index.jsx | 4 +--- react/AppLinker/index.spec.jsx | 2 +- 4 files changed, 2 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index a379f7fd23..6cb046635f 100644 --- a/package.json +++ b/package.json @@ -181,7 +181,6 @@ }, "globals": { "__ALLOW_HTTP__": false, - "__TARGET__": "browser", "cozy": {} }, "testURL": "http://localhost/", diff --git a/react/AppLinker/Readme.md b/react/AppLinker/Readme.md index 22ff7fd2d4..811c48fc37 100644 --- a/react/AppLinker/Readme.md +++ b/react/AppLinker/Readme.md @@ -15,7 +15,6 @@ As it uses the render props pattern, it is flexible and can be used to build com anchor. ``` -window.__TARGET__ = 'web'; <AppLinker slug='banks' href='http://dalailama-banks.mycozy.cloud'>{ ({ onClick, href, name }) => ( diff --git a/react/AppLinker/index.jsx b/react/AppLinker/index.jsx index b34d87eeb1..a6eae90d88 100644 --- a/react/AppLinker/index.jsx +++ b/react/AppLinker/index.jsx @@ -1,5 +1,3 @@ -/* global __TARGET__ */ - import React from 'react' import PropTypes from 'prop-types' import { @@ -33,7 +31,7 @@ export class AppLinker extends React.Component { } componentDidMount() { - if (typeof __TARGET__ !== 'undefined' && __TARGET__ === 'mobile') { + if (isMobileApp()) { this.checkAppAvailability() } } diff --git a/react/AppLinker/index.spec.jsx b/react/AppLinker/index.spec.jsx index 7d5e090fc7..f04b8c11c2 100644 --- a/react/AppLinker/index.spec.jsx +++ b/react/AppLinker/index.spec.jsx @@ -57,7 +57,7 @@ describe('app icon', () => { let spyConsoleError, openNativeFromNativeSpy, appSwitchMock beforeEach(() => { - global.__TARGET__ = 'browser' + isMobileApp.mockReturnValue(false) spyConsoleError = jest.spyOn(console, 'error') spyConsoleError.mockImplementation(message => { if (message.lastIndexOf('Warning: Failed prop type:') === 0) { From b586afbc5f381aa86c1226a0697386940d924cdd Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 18 Jul 2019 11:42:09 +0200 Subject: [PATCH 20/20] chore(deps): update babel monorepo to v7.5.5 (#1107) --- package.json | 4 +-- yarn.lock | 99 +++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 72 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index 6cb046635f..7e89c901bb 100644 --- a/package.json +++ b/package.json @@ -54,8 +54,8 @@ "*.css" ], "devDependencies": { - "@babel/cli": "7.4.4", - "@babel/core": "7.4.5", + "@babel/cli": "7.5.5", + "@babel/core": "7.5.5", "@material-ui/core": "3.9.3", "@semantic-release/changelog": "2.1.2", "@semantic-release/git": "5.0.0", diff --git a/yarn.lock b/yarn.lock index c9095810a0..febd018229 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,16 +2,16 @@ # yarn lockfile v1 -"@babel/cli@7.4.4": - version "7.4.4" - resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.4.4.tgz#5454bb7112f29026a4069d8e6f0e1794e651966c" - integrity sha512-XGr5YjQSjgTa6OzQZY57FAJsdeVSAKR/u/KA5exWIz66IKtv/zXtHy+fIZcMry/EgYegwuHE7vzGnrFhjdIAsQ== +"@babel/cli@7.5.5": + version "7.5.5" + resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.5.5.tgz#bdb6d9169e93e241a08f5f7b0265195bf38ef5ec" + integrity sha512-UHI+7pHv/tk9g6WXQKYz+kmXTI77YtuY3vqC59KIqcoWEjsJJSG6rAxKaLsgj3LDyadsPrCB929gVOKM6Hui0w== dependencies: commander "^2.8.1" convert-source-map "^1.1.0" fs-readdir-recursive "^1.1.0" glob "^7.0.0" - lodash "^4.17.11" + lodash "^4.17.13" mkdirp "^0.5.1" output-file-sync "^2.0.0" slash "^2.0.0" @@ -33,6 +33,13 @@ dependencies: "@babel/highlight" "^7.0.0" +"@babel/code-frame@^7.5.5": + version "7.5.5" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d" + integrity sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw== + dependencies: + "@babel/highlight" "^7.0.0" + "@babel/core@7.2.2": version "7.2.2" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.2.2.tgz#07adba6dde27bb5ad8d8672f15fde3e08184a687" @@ -53,22 +60,22 @@ semver "^5.4.1" source-map "^0.5.0" -"@babel/core@7.4.5": - version "7.4.5" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.4.5.tgz#081f97e8ffca65a9b4b0fdc7e274e703f000c06a" - integrity sha512-OvjIh6aqXtlsA8ujtGKfC7LYWksYSX8yQcM8Ay3LuvVeQ63lcOKgoZWVqcpFwkd29aYU9rVx7jxhfhiEDV9MZA== +"@babel/core@7.5.5": + version "7.5.5" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.5.5.tgz#17b2686ef0d6bc58f963dddd68ab669755582c30" + integrity sha512-i4qoSr2KTtce0DmkuuQBV4AuQgGPUcPXMr9L5MyYAtk06z068lQ10a4O009fe5OB/DfNV+h+qqT7ddNV8UnRjg== dependencies: - "@babel/code-frame" "^7.0.0" - "@babel/generator" "^7.4.4" - "@babel/helpers" "^7.4.4" - "@babel/parser" "^7.4.5" + "@babel/code-frame" "^7.5.5" + "@babel/generator" "^7.5.5" + "@babel/helpers" "^7.5.5" + "@babel/parser" "^7.5.5" "@babel/template" "^7.4.4" - "@babel/traverse" "^7.4.5" - "@babel/types" "^7.4.4" + "@babel/traverse" "^7.5.5" + "@babel/types" "^7.5.5" convert-source-map "^1.1.0" debug "^4.1.0" json5 "^2.1.0" - lodash "^4.17.11" + lodash "^4.17.13" resolve "^1.3.2" semver "^5.4.1" source-map "^0.5.0" @@ -115,6 +122,17 @@ source-map "^0.5.0" trim-right "^1.0.1" +"@babel/generator@^7.5.5": + version "7.5.5" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.5.5.tgz#873a7f936a3c89491b43536d12245b626664e3cf" + integrity sha512-ETI/4vyTSxTzGnU2c49XHv2zhExkv9JHLTwDAFz85kmcwuShvYG2H08FwgIguQf4JC75CBnXAUM5PqeF4fj0nQ== + dependencies: + "@babel/types" "^7.5.5" + jsesc "^2.5.1" + lodash "^4.17.13" + source-map "^0.5.0" + trim-right "^1.0.1" + "@babel/helper-annotate-as-pure@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32" @@ -322,6 +340,15 @@ "@babel/traverse" "^7.4.4" "@babel/types" "^7.4.4" +"@babel/helpers@^7.5.5": + version "7.5.5" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.5.5.tgz#63908d2a73942229d1e6685bc2a0e730dde3b75e" + integrity sha512-nRq2BUhxZFnfEn/ciJuhklHvFOqjJUD5wpx+1bxUF2axL9C+v4DE/dmp5sT2dKnpOs4orZWzpAZqlCy8QqE/7g== + dependencies: + "@babel/template" "^7.4.4" + "@babel/traverse" "^7.5.5" + "@babel/types" "^7.5.5" + "@babel/highlight@7.0.0-beta.44": version "7.0.0-beta.44" resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.44.tgz#18c94ce543916a80553edcdcf681890b200747d5" @@ -345,10 +372,10 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.4.tgz#5977129431b8fe33471730d255ce8654ae1250b6" integrity sha512-5pCS4mOsL+ANsFZGdvNLybx4wtqAZJ0MJjMHxvzI3bvIsz6sQvzW8XX92EYIkiPtIvcfG3Aj+Ir5VNyjnZhP7w== -"@babel/parser@^7.4.5": - version "7.4.5" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.5.tgz#04af8d5d5a2b044a2a1bffacc1e5e6673544e872" - integrity sha512-9mUqkL1FF5T7f0WDFfAoDdiMVPWsdD1gZYzSnaXsxUCUqzuch/8of9G3VUSNiZmMBoRxT3neyVsqeiL/ZPcjew== +"@babel/parser@^7.5.5": + version "7.5.5" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.5.5.tgz#02f077ac8817d3df4a832ef59de67565e71cca4b" + integrity sha512-E5BN68cqR7dhKan1SfqgPGhQ178bkVKpXTPEXnFJBrEt8/DKRZlybmy+IgYLTeN7tp1R5Ccmbm2rBk17sHYU3g== "@babel/plugin-proposal-async-generator-functions@^7.2.0": version "7.2.0" @@ -926,20 +953,20 @@ globals "^11.1.0" lodash "^4.17.11" -"@babel/traverse@^7.4.5": - version "7.4.5" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.4.5.tgz#4e92d1728fd2f1897dafdd321efbff92156c3216" - integrity sha512-Vc+qjynwkjRmIFGxy0KYoPj4FdVDxLej89kMHFsWScq999uX+pwcX4v9mWRjW0KcAYTPAuVQl2LKP1wEVLsp+A== +"@babel/traverse@^7.5.5": + version "7.5.5" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.5.5.tgz#f664f8f368ed32988cd648da9f72d5ca70f165bb" + integrity sha512-MqB0782whsfffYfSjH4TM+LMjrJnhCNEDMDIjeTpl+ASaUvxcjoiVCo/sM1GhS1pHOXYfWVCYneLjMckuUxDaQ== dependencies: - "@babel/code-frame" "^7.0.0" - "@babel/generator" "^7.4.4" + "@babel/code-frame" "^7.5.5" + "@babel/generator" "^7.5.5" "@babel/helper-function-name" "^7.1.0" "@babel/helper-split-export-declaration" "^7.4.4" - "@babel/parser" "^7.4.5" - "@babel/types" "^7.4.4" + "@babel/parser" "^7.5.5" + "@babel/types" "^7.5.5" debug "^4.1.0" globals "^11.1.0" - lodash "^4.17.11" + lodash "^4.17.13" "@babel/types@7.0.0-beta.44": version "7.0.0-beta.44" @@ -959,6 +986,15 @@ lodash "^4.17.11" to-fast-properties "^2.0.0" +"@babel/types@^7.5.5": + version "7.5.5" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.5.5.tgz#97b9f728e182785909aa4ab56264f090a028d18a" + integrity sha512-s63F9nJioLqOlW3UkyMd+BYhXt44YuaFm/VV0VwuteqjYwRrObkU7ra9pY4wAJR3oXi8hJrMcrcJdO/HH33vtw== + dependencies: + esutils "^2.0.2" + lodash "^4.17.13" + to-fast-properties "^2.0.0" + "@cnakazawa/watch@^1.0.3": version "1.0.3" resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef" @@ -8500,6 +8536,11 @@ lodash@4.17.13: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.13.tgz#0bdc3a6adc873d2f4e0c4bac285df91b64fc7b93" integrity sha512-vm3/XWXfWtRua0FkUyEHBZy8kCPjErNBT9fJx8Zvs+U6zjqPbTUOpkaoum3O5uiA8sm+yNMHXfYkTUHFoMxFNA== +lodash@^4.17.13: + version "4.17.14" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.14.tgz#9ce487ae66c96254fe20b599f21b6816028078ba" + integrity sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw== + log-symbols@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"