cozy-ui 60.2.0 → 60.3.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# [60.3.0](https://github.com/cozy/cozy-ui/compare/v60.2.0...v60.3.0) (2022-01-19)
+
+
+### Features
+
+* Add new icons radio-checked and radio-unchecked ([d441d6c](https://github.com/cozy/cozy-ui/commit/d441d6c))
+* Add new Radios button ([13cf089](https://github.com/cozy/cozy-ui/commit/13cf089))
+* Deprecates old Radio component ([b5785b4](https://github.com/cozy/cozy-ui/commit/b5785b4))
+
 # [60.2.0](https://github.com/cozy/cozy-ui/compare/v60.1.0...v60.2.0) (2022-01-19)
 
 

package/assets/icons/ui/radio-checked.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 16A8 8 0 108 0a8 8 0 000 16zm0-6a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
+</svg>

package/assets/icons/ui/radio-unchecked.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zm0 14A6 6 0 108 2a6 6 0 000 12z" clip-rule="evenodd"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "60.2.0",
+  "version": "60.3.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Icon/Readme.md

@@ -182,6 +182,8 @@ import PlusSmall from 'cozy-ui/transpiled/react/Icons/PlusSmall'
 import Previous from 'cozy-ui/transpiled/react/Icons/Previous'
 import Printer from 'cozy-ui/transpiled/react/Icons/Printer'
 import Qualify from 'cozy-ui/transpiled/react/Icons/Qualify'
+import RadioChecked from 'cozy-ui/transpiled/react/Icons/RadioChecked'
+import RadioUnchecked from 'cozy-ui/transpiled/react/Icons/RadioUnchecked'
 import Rename from 'cozy-ui/transpiled/react/Icons/Rename'
 import Repare from 'cozy-ui/transpiled/react/Icons/Repare'
 import Reply from 'cozy-ui/transpiled/react/Icons/Reply'
@@ -388,6 +390,8 @@ const icons = [
   Previous,
   Printer,
   Qualify,
+  RadioChecked,
+  RadioUnchecked,
   Rename,
   Repare,
   Reply,
@@ -694,7 +698,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
-const availableIcons = ['album-add','album-remove','album','answer','apple','archive','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check','checkbox','circle-filled','clock','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','cozy-laugh','cozy-text','credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','heart','help','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock','logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online','openwith','palette','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway','sync-cozy','sync','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check','checkbox','circle-filled','clock','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','cozy-laugh','cozy-text','credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','heart','help','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock','logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online','openwith','palette','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway','sync-cozy','sync','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
 ;
 <div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
   <Sprite />

package/react/Icon/icons-sprite.js

@@ -465,6 +465,10 @@ module.exports = `<svg><defs>
     <path fill-rule="evenodd" d="M13 12v3c0 .552-.456 1-.995 1h-8.01A.995.995 0 0 1 3 15v-3H1c-.552 0-1-.438-1-1.003V6.003A1 1 0 0 1 1 5h14c.552 0 1 .438 1 1.003v4.994A1 1 0 0 1 15 12h-2zM3 1.01C3 .451 3.456 0 3.995 0h8.01c.55 0 .995.443.995 1.01V4H3V1.01zM5 10v4h6v-4H5zm9-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
 </symbol><symbol id="qualify" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M2 2h8.002a2 2 0 0 1 1.414.586l4 4a2 2 0 0 1 0 2.828l-4 4a2 2 0 0 1-1.414.586H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"/>
+</symbol><symbol id="radio-checked" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 16A8 8 0 108 0a8 8 0 000 16zm0-6a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
+</symbol><symbol id="radio-unchecked" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zm0 14A6 6 0 108 2a6 6 0 000 12z" clip-rule="evenodd"/>
 </symbol><symbol id="rename" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="M201.5,99.5 L192,109.025391 L192,112 L195.03772,112 L204.5,102.5 L201.5,99.5 Z M206.912154,96.9121541 C206.132243,96.1322429 204.869144,96.1308556 204.089264,96.9107361 L203,98 L206.030762,101 L207.092271,99.9252663 C207.869738,99.1381134 207.863777,97.8637772 207.087846,97.0878459 L206.912154,96.9121541 Z M199,110 L204.997071,110 C205.550973,110 206,110.443865 206,111 C206,111.552285 205.553689,112 205.002455,112 L197,112 L199,110 Z" transform="translate(-192 -96)"/>
 </symbol><symbol id="repare" viewBox="0 0 16 16">

package/react/Icons/RadioChecked.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/radio-checked.svg` to regenerate;
+import React from 'react'
+
+function SvgRadioChecked(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        d="M8 16A8 8 0 108 0a8 8 0 000 16zm0-6a2 2 0 100-4 2 2 0 000 4z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+export default SvgRadioChecked

package/react/Icons/RadioUnchecked.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/radio-unchecked.svg` to regenerate;
+import React from 'react'
+
+function SvgRadioUnchecked(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        d="M8 0a8 8 0 100 16A8 8 0 008 0zm0 14A6 6 0 108 2a6 6 0 000 12z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+export default SvgRadioUnchecked

package/react/MuiCozyTheme/makeOverrides.js

@@ -629,6 +629,35 @@ const makeOverrides = theme => ({
         minWidth: '.375rem'
       }
     }
+  },
+  MuiRadio: {
+    root: {
+      padding: '12px',
+      '&.Mui-disabled svg': {
+        borderRadius: '50%',
+        backgroundColor: theme.palette.background.default,
+        fill: theme.palette.border.disabled
+      },
+      '&:not(.Mui-checked) svg': {
+        fill: theme.palette.border.main
+      }
+    },
+    colorPrimary: {
+      '&.Mui-checked svg': {
+        fill: theme.palette.primary.main
+      },
+      '&.Mui-disabled&.Mui-checked svg': {
+        fill: theme.palette.text.disabled
+      }
+    },
+    colorSecondary: {
+      '&.Mui-checked svg': {
+        fill: theme.palette.error.main
+      },
+      '&.Mui-disabled&.Mui-checked svg': {
+        fill: theme.palette.text.disabled
+      }
+    }
   }
 })
 

package/react/Radio/index.jsx

@@ -4,6 +4,13 @@ import PropTypes from 'prop-types'
 import styles from './styles.styl'
 import { useRadioGroup } from '@material-ui/core/RadioGroup'
 
+import createDepreciationLogger from '../helpers/createDepreciationLogger'
+
+const logRadioDepecrated = createDepreciationLogger()
+
+/**
+ * @deprecated Please use [Radios](#/Radios)
+ */
 const Radio = props => {
   const {
     className,
@@ -18,6 +25,9 @@ const Radio = props => {
     checked: checkedProp,
     ...restProps
   } = props
+  logRadioDepecrated(
+    'The Radio component is deprecated, please use `<Radios />` instead. You can replace `<Radio value="" label="" />` by `<FormControlLabel value="" label="" control={<Radios />} />`. See documentation for more details.'
+  )
   const radioGroup = useRadioGroup()
 
   let checked = checkedProp

package/react/Radios/Readme.md

@@ -0,0 +1,133 @@
+### Radios
+
+```jsx
+import Radio from 'cozy-ui/transpiled/react/Radios'
+import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
+import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
+import Variants from 'cozy-ui/docs/components/Variants'
+const Box = ({ children }) => {
+  return <div style={{ height: '3rem', width: '3rem', border: '2px dashed #CCC', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+    { children }
+  </div>
+}
+
+initialState = { radioValue: 'item1' }
+
+const initialVariants = [
+  { checked: false, disabled: false, secondary: false }
+]
+
+const handleChange = event => {
+  setState({ radioValue: event.target.value  })
+}
+
+const bboxStyle = { border: '1px solid red' }
+
+;
+
+<>
+  <RadioGroup
+    aria-label="radio"
+    name="radioName"
+    value={state.radioValue.toString()}
+    onChange={handleChange}
+  >
+    <FormControlLabel
+      value="item1"
+      label="This is a radio button"
+      control={
+        <Radio />
+      }
+    />
+    <FormControlLabel
+      value="item2"
+      label="This is an intent radio button"
+      control={
+        <Radio color="secondary" />
+      }
+    />
+    <FormControlLabel
+      value="item3"
+      label="This is a disabled radio button"
+      control={
+        <Radio disabled />
+      }
+    />
+    <FormControlLabel
+      value="item4"
+      label="This is a checked disabled radio button"
+      control={
+        <Radio checked disabled />
+      }
+    />
+    <FormControlLabel
+      value="item5"
+      label="This is a edge start radio button"
+      control={
+        <Radio edge="start" />
+      }
+    />
+    <FormControlLabel
+      value="item6"
+      label="This is a edge end radio button"
+      control={
+        <Radio edge="end" />
+      }
+    />
+  </RadioGroup>
+
+  {isTesting() && (
+    <Variants initialVariants={initialVariants} screenshotAllVariants>
+      {variant => (
+        <Radio
+          color={variant.secondary ? 'secondary' : 'primary'}
+          checked={variant.checked}
+          disabled={variant.disabled}
+        />
+      )}
+    </Variants>
+  )}
+</>
+```
+
+### Radios position
+
+By default Radio are centered. It's possible to move the radio inside a container with `edge` property.
+
+```jsx
+import Radio from 'cozy-ui/transpiled/react/Radios'
+import RadioGroup from 'cozy-ui/transpiled/react/RadioGroup'
+import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
+import Variants from 'cozy-ui/docs/components/Variants'
+const Box = ({ children }) => {
+  return <div style={{ height: '3rem', width: '3rem', border: '2px dashed #CCC', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+    { children }
+  </div>
+}
+
+initialState = { radioValue: 'item1' }
+
+const initialVariants = [
+  { checked: false, disabled: false, secondary: false }
+]
+
+const handleChange = event => {
+  setState({ radioValue: event.target.value  })
+}
+
+const bboxStyle = { border: '1px solid red' }
+
+;
+
+<>
+  <Box>
+    <Radio edge={false} style={bboxStyle} />
+  </Box>
+  <Box>
+    <Radio edge="start" style={bboxStyle} />
+  </Box>
+  <Box>
+    <Radio edge="end" style={bboxStyle} />
+  </Box>
+</>
+```

package/react/Radios/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import MuiRadio from '@material-ui/core/Radio'
+
+import Icon from '../Icon'
+import RadioCheckedIcon from '../Icons/RadioChecked'
+import RadioUncheckedIcon from '../Icons/RadioUnchecked'
+
+const Radios = props => {
+  return (
+    <MuiRadio
+      {...props}
+      icon={<Icon icon={RadioUncheckedIcon} />}
+      checkedIcon={<Icon icon={RadioCheckedIcon} />}
+    />
+  )
+}
+
+Radios.defaultProps = {
+  color: 'primary'
+}
+
+export default Radios