Merge pull request #1508 from cozy/switches

feat: Add Switch from Material UI

docs/styleguide.config.js

@@ -49,7 +49,7 @@ module.exports = {
         '../react/SelectBox/SelectBox.jsx',
         '../react/Stepper/index.jsx',
         '../react/Textarea/index.jsx',
-        '../react/Toggle/index.jsx'
+        '../react/MuiCozyTheme/Switch'
       ]
     },
     {

react/ContactsListModal/AddContactButton.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { withClient, models, queryConnect } from 'cozy-client'
+import { withClient, models, queryConnect, Q } from 'cozy-client'
 import AppLinker from '../AppLinker'
 import { ButtonLink } from '../Button'
 import compose from 'lodash/flowRight'
@@ -55,7 +55,7 @@ const AddContactButton = compose(
   withClient,
   queryConnect({
     apps: {
-      query: client => client.all('io.cozy.apps'),
+      query: () => Q('io.cozy.apps'),
       as: 'apps'
     }
   })

react/ContactsListModal/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { withClient, fetchPolicies, queryConnect } from 'cozy-client'
+import { Q, withClient, fetchPolicies, queryConnect } from 'cozy-client'
 import ContactsList from '../ContactsList'
 import Modal, { ModalHeader, ModalDescription } from '../Modal'
 import Spinner from '../Spinner'
@@ -135,7 +135,7 @@ export default compose(
   withBreakpoints(),
   queryConnect({
     contacts: {
-      query: client => client.all('io.cozy.contacts').UNSAFE_noLimit(),
+      query: () => Q('io.cozy.contacts').UNSAFE_noLimit(),
       as: 'contacts',
       fetchPolicy: olderThan30s
     }

react/MuiCozyTheme/Switch/Readme.md

@@ -0,0 +1,60 @@
+Used to present a binary choice to the user.
+
+Uses [Material UI's Switch](https://material-ui.com/components/switches/).
+
+```
+import MuiCozyTheme from '..'
+import CozyTheme from '../../CozyTheme'
+import Button from '@material-ui/core/Button'
+import { Title, Text } from '../../Text'
+import Stack from '../../Stack'
+import { Media, Img } from '../../Media'
+import Switch from '.'
+
+initialState = {
+  switch1: false,
+  switch2: false,
+  switch3: true
+}
+
+const handleClick1 = ev => setState({ switch1: ev.target.checked })
+const handleClick2 = ev => setState({ switch2: ev.target.checked })
+const handleClick3 = ev => setState({ switch3: ev.target.checked });
+
+const Aligned = ({ children }) => {
+  return <Media>
+    <Img>{ children[0] }</Img>
+    <Img>{ children[1] }</Img>
+  </Media>
+} 
+
+const Switches = () => {
+  return <>
+    <Aligned>
+      <Text>Primary</Text>
+      <Switch color="primary" checked={state.switch3}  onClick={handleClick3} />
+    </Aligned>
+    <Aligned>
+      <Text>Secondary</Text>
+      <Switch color="secondary" checked={state.switch3} onClick={handleClick3} />
+    </Aligned>
+    <Aligned>
+      <Text>Disabled</Text>
+      <Switch color="secondary" checked={state.switch2} disabled onClick={handleClick2} />
+    </Aligned>
+  </>
+}
+
+<MuiCozyTheme>
+  <Stack spacing='m'>
+    <Title className='u-mt-1'>Normal theme</Title>
+    <div>
+      <Switches />
+    </div>
+    <Title className='u-mt-1'>Inverted theme</Title>
+    <CozyTheme className='u-p-1' variant='inverted'>
+      <Switches />
+    </CozyTheme>
+  </Stack>
+</MuiCozyTheme>
+```

react/MuiCozyTheme/Switch/index.jsx

@@ -0,0 +1,3 @@
+import Switch from '@material-ui/core/Switch'
+
+export default Switch

react/MuiCozyTheme/theme.js

@@ -1,6 +1,8 @@
+import merge from 'lodash/merge'
 import { createMuiTheme } from '@material-ui/core/styles'
 import { getCssVariableValue } from '../utils/color'
 import isTesting from '../../helpers/isTesting'
+
 const defaultValues = {
   borderRadius: 6,
   dialog: {
@@ -13,6 +15,10 @@ const defaultValues = {
   }
 }
 
+const SWITCH_BAR_WIDTH = 25
+const SWITCH_BAR_HEIGHT = 12
+const SWITCH_BUTTON_WIDTH = 46
+
 export const normalTheme = createMuiTheme({
   typography: {
     useNextVariants: true,
@@ -320,6 +326,52 @@ normalTheme.overrides = {
         marginLeft: `-${defaultValues.dialog.md.padding}px`
       }
     }
+  },
+  MuiSwitch: {
+    root: {
+      width: SWITCH_BUTTON_WIDTH,
+      '& input': {
+        width: '150%',
+        height: '150%',
+        left: '-25%',
+        top: '-25%'
+      }
+    },
+    switchBase: {
+      width: SWITCH_BUTTON_WIDTH,
+      transform: 'translateX(-7px)'
+    },
+    checked: {
+      '& + $bar': {
+        opacity: 1
+      },
+      transform: 'translateX(7px)'
+    },
+    icon: {
+      width: 16,
+      height: 16
+    },
+    bar: {
+      width: SWITCH_BAR_WIDTH,
+      height: 12,
+      marginTop: -(SWITCH_BAR_HEIGHT / 2),
+      marginLeft: -(SWITCH_BAR_WIDTH / 2),
+      backgroundColor: 'var(--silver)',
+      opacity: 1
+    },
+    colorPrimary: {
+      '&$checked': {
+        color: getCssVariableValue('primaryContrastTextColor')
+      }
+    },
+    colorSecondary: {
+      '&$checked': {
+        '& + $bar': {
+          backgroundColor: getCssVariableValue('validColor')
+        },
+        color: getCssVariableValue('primaryContrastTextColor')
+      }
+    }
   }
 }
 
@@ -338,8 +390,7 @@ export const invertedTheme = {
   }
 }
 
-invertedTheme.overrides = {
-  ...normalTheme.overrides,
+invertedTheme.overrides = merge({}, normalTheme.overrides, {
   MuiOutlinedInput: {
     root: {
       boxSizing: 'border-box',
@@ -363,8 +414,26 @@ invertedTheme.overrides = {
     root: {
       color: invertedTheme.palette.text.primary
     }
+  },
+  MuiSwitch: {
+    switchBase: {
+      color: getCssVariableValue('primaryContrastTextColor')
+    },
+    colorPrimary: {
+      '& + $bar': {
+        backgroundColor: getCssVariableValue('primaryContrastTextColor')
+      },
+
+      '&$checked': {
+        '& + $bar': {
+          border:
+            '1px solid ' + getCssVariableValue('primaryContrastTextColor'),
+          boxSizing: 'border-box'
+        }
+      }
+    }
   }
-}
+})
 
 const themes = {
   normal: normalTheme,

react/Toggle/index.jsx

@@ -4,11 +4,24 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
 class Toggle extends Component {
+  componentDidMount() {
+    console.warn(`The Toggle component is deprecated, please use the Switch component:
+
+    const handleToggle = toggled => {}
+
+    - import Toggle from 'cozy-ui/transpiled/react/Toggle'
+    + import Switch from 'cozy-ui/transpiled/react/MuiCozyTheme'
+
+    - <Toggle onToggle={handleToggle} />
+    + <Switch onClick={ ev => handleToggle(ev.target.checked) } />`)
+  }
+
   onChange(e) {
     if (this.props.onToggle) {
       this.props.onToggle(e.target.checked)
     }
   }
+
   render() {
     const { id, checked = false, disabled = false } = this.props
     return (

react/__snapshots__/examples.spec.jsx.snap

@@ -5552,6 +5552,55 @@ exports[`Menu should render examples: Menu 4`] = `
 </div>"
 `;
 
+exports[`MuiCozyTheme/Switch should render examples: MuiCozyTheme/Switch 1`] = `
+"<div>
+  <div class=\\"styles__Stack--m___1tSpV\\">
+    <div class=\\"u-title-h2 u-mt-1\\">Normal theme</div>
+    <div>
+      <div class=\\"styles__media___cSJMp\\">
+        <div class=\\"styles__img___3SHpG\\">
+          <div class=\\"u-text\\">Primary</div>
+        </div>
+        <div class=\\"styles__img___3SHpG\\"><span class=\\"MuiSwitch-root-55\\"><span class=\\"MuiButtonBase-root-74 MuiIconButton-root-68 MuiPrivateSwitchBase-root-64 MuiSwitch-switchBase-58 MuiSwitch-colorPrimary-60 MuiPrivateSwitchBase-checked-65 MuiSwitch-checked-59\\"><span class=\\"MuiIconButton-label-73\\"><span class=\\"MuiSwitch-icon-56 MuiSwitch-iconChecked-57\\"></span><input class=\\"MuiPrivateSwitchBase-input-67\\" type=\\"checkbox\\" value=\\"\\" checked=\\"\\"></span><span class=\\"MuiTouchRipple-root-99\\"></span></span><span class=\\"MuiSwitch-bar-63\\"></span></span></div>
+      </div>
+      <div class=\\"styles__media___cSJMp\\">
+        <div class=\\"styles__img___3SHpG\\">
+          <div class=\\"u-text\\">Secondary</div>
+        </div>
+        <div class=\\"styles__img___3SHpG\\"><span class=\\"MuiSwitch-root-55\\"><span class=\\"MuiButtonBase-root-74 MuiIconButton-root-68 MuiPrivateSwitchBase-root-64 MuiSwitch-switchBase-58 MuiSwitch-colorSecondary-61 MuiPrivateSwitchBase-checked-65 MuiSwitch-checked-59\\"><span class=\\"MuiIconButton-label-73\\"><span class=\\"MuiSwitch-icon-56 MuiSwitch-iconChecked-57\\"></span><input class=\\"MuiPrivateSwitchBase-input-67\\" type=\\"checkbox\\" value=\\"\\" checked=\\"\\"></span><span class=\\"MuiTouchRipple-root-99\\"></span></span><span class=\\"MuiSwitch-bar-63\\"></span></span></div>
+      </div>
+      <div class=\\"styles__media___cSJMp\\">
+        <div class=\\"styles__img___3SHpG\\">
+          <div class=\\"u-text\\">Disabled</div>
+        </div>
+        <div class=\\"styles__img___3SHpG\\"><span class=\\"MuiSwitch-root-55\\"><span class=\\"MuiButtonBase-root-74 MuiButtonBase-disabled-75 MuiIconButton-root-68 MuiIconButton-disabled-72 MuiPrivateSwitchBase-root-64 MuiSwitch-switchBase-58 MuiSwitch-colorSecondary-61 MuiPrivateSwitchBase-disabled-66 MuiSwitch-disabled-62\\" tabindex=\\"-1\\"><span class=\\"MuiIconButton-label-73\\"><span class=\\"MuiSwitch-icon-56\\"></span><input class=\\"MuiPrivateSwitchBase-input-67\\" disabled=\\"\\" type=\\"checkbox\\" value=\\"\\"></span></span><span class=\\"MuiSwitch-bar-63\\"></span></span></div>
+      </div>
+    </div>
+    <div class=\\"u-title-h2 u-mt-1\\">Inverted theme</div>
+    <div class=\\"u-p-1 styles__CozyTheme--inverted___1ygHa\\">
+      <div class=\\"styles__media___cSJMp\\">
+        <div class=\\"styles__img___3SHpG\\">
+          <div class=\\"u-text\\">Primary</div>
+        </div>
+        <div class=\\"styles__img___3SHpG\\"><span class=\\"MuiSwitch-root-77\\"><span class=\\"MuiButtonBase-root-96 MuiIconButton-root-90 MuiPrivateSwitchBase-root-86 MuiSwitch-switchBase-80 MuiSwitch-colorPrimary-82 MuiPrivateSwitchBase-checked-87 MuiSwitch-checked-81\\"><span class=\\"MuiIconButton-label-95\\"><span class=\\"MuiSwitch-icon-78 MuiSwitch-iconChecked-79\\"></span><input class=\\"MuiPrivateSwitchBase-input-89\\" type=\\"checkbox\\" value=\\"\\" checked=\\"\\"></span><span class=\\"MuiTouchRipple-root-106\\"></span></span><span class=\\"MuiSwitch-bar-85\\"></span></span></div>
+      </div>
+      <div class=\\"styles__media___cSJMp\\">
+        <div class=\\"styles__img___3SHpG\\">
+          <div class=\\"u-text\\">Secondary</div>
+        </div>
+        <div class=\\"styles__img___3SHpG\\"><span class=\\"MuiSwitch-root-77\\"><span class=\\"MuiButtonBase-root-96 MuiIconButton-root-90 MuiPrivateSwitchBase-root-86 MuiSwitch-switchBase-80 MuiSwitch-colorSecondary-83 MuiPrivateSwitchBase-checked-87 MuiSwitch-checked-81\\"><span class=\\"MuiIconButton-label-95\\"><span class=\\"MuiSwitch-icon-78 MuiSwitch-iconChecked-79\\"></span><input class=\\"MuiPrivateSwitchBase-input-89\\" type=\\"checkbox\\" value=\\"\\" checked=\\"\\"></span><span class=\\"MuiTouchRipple-root-106\\"></span></span><span class=\\"MuiSwitch-bar-85\\"></span></span></div>
+      </div>
+      <div class=\\"styles__media___cSJMp\\">
+        <div class=\\"styles__img___3SHpG\\">
+          <div class=\\"u-text\\">Disabled</div>
+        </div>
+        <div class=\\"styles__img___3SHpG\\"><span class=\\"MuiSwitch-root-77\\"><span class=\\"MuiButtonBase-root-96 MuiButtonBase-disabled-97 MuiIconButton-root-90 MuiIconButton-disabled-94 MuiPrivateSwitchBase-root-86 MuiSwitch-switchBase-80 MuiSwitch-colorSecondary-83 MuiPrivateSwitchBase-disabled-88 MuiSwitch-disabled-84\\" tabindex=\\"-1\\"><span class=\\"MuiIconButton-label-95\\"><span class=\\"MuiSwitch-icon-78\\"></span><input class=\\"MuiPrivateSwitchBase-input-89\\" disabled=\\"\\" type=\\"checkbox\\" value=\\"\\"></span></span><span class=\\"MuiSwitch-bar-85\\"></span></span></div>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
 exports[`NarrowContent should render examples: NarrowContent 1`] = `
 "<div>
   <div class=\\"styles__NarrowContent___Zq8oI\\">
@@ -6264,20 +6313,6 @@ exports[`ThresholdBar should render examples: ThresholdBar 1`] = `
   </div><br></div>"
 `;
 
-exports[`Toggle should render examples: Toggle 1`] = `"<div><span class=\\"styles__toggle___3zVsE\\"><input type=\\"checkbox\\" id=\\"simple-toggle\\" class=\\"styles__checkbox___3ko96\\"><label for=\\"simple-toggle\\" class=\\"styles__label___3jY1f\\"></label></span></div>"`;
-
-exports[`Toggle should render examples: Toggle 2`] = `"<div><span class=\\"styles__toggle___3zVsE\\"><input type=\\"checkbox\\" id=\\"toggle\\" class=\\"styles__checkbox___3ko96\\" checked=\\"\\"><label for=\\"toggle\\" class=\\"styles__label___3jY1f\\"></label></span></div>"`;
-
-exports[`Toggle should render examples: Toggle 3`] = `"<div><span class=\\"styles__toggle___3zVsE\\"><input type=\\"checkbox\\" id=\\"toggle\\" class=\\"styles__checkbox___3ko96\\"><label for=\\"toggle\\" class=\\"styles__label___3jY1f\\"></label></span></div>"`;
-
-exports[`Toggle should render examples: Toggle 4`] = `"<div><span class=\\"styles__toggle___3zVsE\\"><input type=\\"checkbox\\" id=\\"toggle\\" class=\\"styles__checkbox___3ko96\\"><label for=\\"toggle\\" class=\\"styles__label___3jY1f\\"></label></span></div>"`;
-
-exports[`Toggle should render examples: Toggle 5`] = `
-"<div>
-  <div><label for=\\"0\\" style=\\"margin-right: 15px; color: gray;\\">Toggle is controlled and off</label><span class=\\"styles__toggle___3zVsE\\"><input type=\\"checkbox\\" id=\\"0\\" class=\\"styles__checkbox___3ko96\\"><label for=\\"0\\" class=\\"styles__label___3jY1f\\"></label></span></div>
-</div>"
-`;
-
 exports[`UnorderedList should render examples: UnorderedList 1`] = `
 "<div>
   <ul class=\\"styles__UnorderedList___2uFFY styles__Stack--m___1tSpV\\">
@@ -6287,3 +6322,23 @@ exports[`UnorderedList should render examples: UnorderedList 1`] = `
   </ul>
 </div>"
 `;
+
+exports[`Wizard should render examples: Wizard 1`] = `
+"<div><button>Show wizard</button><br>
+  <div class=\\"styles__wizard___m6AMR\\">
+    <div class=\\"styles__wizard-wrapper___38V4s\\">
+      <header class=\\"styles__wizard-header___2_r05\\"><button type=\\"button\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--subtle___OknKf styles__c-btn--narrow___27FHD styles__c-btn--center___16_Xh styles__wizard-previous___2StGt\\" title=\\"Previous\\"><span><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use xlink:href=\\"#previous\\"></use></svg><span class=\\"u-visuallyhidden\\">Previous</span></span></button>
+        <h1 class=\\"u-title-h1 styles__wizard-title___11Dzr\\">Connect to your Cozy</h1>
+      </header>
+      <div class=\\"styles__wizard-main___ObvId\\">
+        <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">Login</label><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"[email protected]\\" value=\\"\\"></div>
+        <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">Password</label><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" value=\\"\\"></div>
+        <p class=\\"styles__wizard-errors___1ufSE u-error\\">There is an error</p>
+      </div>
+      <footer class=\\"styles__wizard-footer___-ZrgM u-pb-2\\"><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--large___2gatN styles__c-btn--center___16_Xh styles__wizard-next___38lPl\\"><span><span>Next step</span><svg class=\\"styles__icon___23x3R\\" style=\\"fill: white;\\" width=\\"16\\" height=\\"16\\">
+            <use xlink:href=\\"#next\\"></use>
+          </svg></span></button><button type=\\"button\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--text___2Vp-2 styles__c-btn--large___2gatN styles__c-btn--subtle___OknKf styles__c-btn--center___16_Xh\\"><span><span>Register an account</span></span></button></footer>
+    </div>
+  </div>
+</div>"
+`;