cozy-ui 121.0.0 → 121.1.1

package/react/Avatar/Readme.md

@@ -8,24 +8,41 @@ import { supportedColors } from 'cozy-ui/transpiled/react/Avatar/helpers'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import LinkIcon from "cozy-ui/transpiled/react/Icons/Link"
 import cozyLogo from '../../docs/cozy-logo_white_128.png'
+import Variants from 'cozy-ui/docs/components/Variants'
 
 const sizes = ['xs', 's', 'm', 'l', 'xl']
+const initialVariants = [{ disabled: false }]
 
 ;
 
-sizes.map(size => (
-  <AvatarGroup className="u-mb-half" key={size} max={5} size={size}>
-    <Avatar size={size} color={supportedColors[0]}>AB</Avatar>
-    <Avatar size={size} color={supportedColors[1]}>BC</Avatar>
-    <Avatar size={size} color={supportedColors[2]}><Icon icon={LinkIcon} /></Avatar>
-    <Avatar size={size} src={cozyLogo} />
-    <Avatar size={size} color={supportedColors[4]}>EF</Avatar>
-    <Avatar size={size} color={supportedColors[5]}>FG</Avatar>
-  </AvatarGroup>
-))
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    sizes.map(size => (
+      <div className="u-mb-half u-flex u-flex-items-center" key={size}>
+        <AvatarGroup style={{ zIndex: 2 }} max={4} size={size}>
+          <Avatar size={size} color={supportedColors[0]} disabled={variant.disabled}>AB</Avatar>
+          <Avatar size={size} color={supportedColors[1]} disabled={variant.disabled}>BC</Avatar>
+          <Avatar size={size} src={cozyLogo} disabled={variant.disabled} />
+          <Avatar size={size} color={supportedColors[4]} disabled={variant.disabled}>EF</Avatar>
+          <Avatar size={size} color={supportedColors[5]} disabled={variant.disabled}>FG</Avatar>
+        </AvatarGroup>
+        <Avatar
+          style={{ marginLeft: `-${spacingByAvatarSize[size]}px`, zIndex: 1 }}
+          size={size} color={supportedColors[2]}
+          color="none"
+          border
+          innerBorder
+          disabled={variant.disabled}
+        >
+          <Icon icon={LinkIcon} />
+        </Avatar>
+      </div>
+    ))
+  )}
+</Variants>
 ```
 
-### Mui
+### Solo
 
 ```jsx
 import cozyLogo from '../../docs/cozy-logo_white_128.png'
@@ -40,7 +57,7 @@ import Variants from 'cozy-ui/docs/components/Variants'
 
 const sizes = ['xs', 's', 'm', 'l', 'xl']
 
-const initialVariants = [{ disabled: false }]
+const initialVariants = [{ disabled: false, border: false, innerBorder: false }]
 
 ;
 
@@ -51,20 +68,23 @@ const initialVariants = [{ disabled: false }]
         <div key={color} className="u-flex u-flex-items-center u-mb-half" style={{ gap: '0.5rem' }}>
           {sizes.map(size => (
             <React.Fragment key={size}>
-              <Avatar size={size} color={color} disabled={variant.disabled} />
-              <Avatar size={size} color={color} disabled={variant.disabled}>AB</Avatar>
-              <Avatar size={size} color={color} disabled={variant.disabled}><Icon icon={LinkIcon} /></Avatar>
+              <Avatar size={size} color={color} disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder} />
+              <Avatar size={size} color={color} disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder}>AB</Avatar>
+              <Avatar size={size} color={color} disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder}><Icon icon={LinkIcon} /></Avatar>
             </React.Fragment>
           ))}
         </div>
       ))}
       <div className="u-flex u-flex-items-center u-mb-half" style={{ gap: '0.5rem' }}>
-        {sizes.map(size => (
-          <React.Fragment key={size}>
-            <Avatar size={size} src={cozyLogo} disabled={variant.disabled} />
-            <Avatar size={size} disabled={variant.disabled} />
-          </React.Fragment>
-        ))}
+        <Avatar src={cozyLogo} disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder} />
+        <Avatar color="none" src={cozyLogo} disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder} />
+        <Avatar color="sunrise" src={cozyLogo} disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder} />
+        <Avatar disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder} />
+        <Avatar color="none" disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder} />
+        <Avatar color="sunrise" disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder} />
+        <Avatar disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder}>AB</Avatar>
+        <Avatar color="none" disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder}>BC</Avatar>
+        <Avatar color="sunrise" disabled={variant.disabled} border={variant.border} innerBorder={variant.innerBorder}>CD</Avatar>
       </div>
     </>
   )}

package/react/Avatar/helpers.js

@@ -40,6 +40,17 @@ export const colorMapping = {
   pluviophile: 'linear-gradient(136deg, #A1D6F4 14.84%, #52CEC2 96.03%)',
   cornflower: 'linear-gradient(135deg, #86D9D3 0%, #1CCFB4 100%)',
   paleGreen: 'linear-gradient(135deg, #E2FA17 0%, #75D8CB 100%)',
-  moonBlue: 'linear-gradient(136deg, #6DCFFF 14.84%, #3D88F8 96.03%)',
-  undefined: ''
+  moonBlue: 'linear-gradient(136deg, #6DCFFF 14.84%, #3D88F8 96.03%)'
+}
+
+const colors = Object.values(supportedColors).filter(Boolean)
+
+const makeKey = (colors, name) =>
+  Array.from(name.toUpperCase())
+    .map(letter => letter.charCodeAt(0))
+    .reduce((sum, number) => sum + number, 0) % colors.length
+
+export const nameToColor = (name = '') => {
+  const key = makeKey(colors, name)
+  return colors[key]
 }

package/react/Avatar/index.jsx

@@ -3,7 +3,7 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { colorMapping } from './helpers'
+import { colorMapping, supportedColors, nameToColor } from './helpers'
 import { makeStyles } from '../styles'
 
 const useStyles = makeStyles(theme => ({
@@ -13,13 +13,34 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
-const Avatar = ({ className, color, size, disabled, ...props }) => {
-  const classes = useStyles({ color })
+const Avatar = ({
+  className,
+  color,
+  size,
+  border,
+  innerBorder,
+  disabled,
+  ...props
+}) => {
+  const defaultColor =
+    typeof props.children === 'string' ? nameToColor(props.children) : undefined
+  const classes = useStyles({
+    color:
+      color === 'none'
+        ? undefined
+        : supportedColors.includes(color)
+        ? color
+        : defaultColor
+  })
 
   return (
     <AvatarMui
       classes={classes}
-      className={cx(className, `size-${size}`, { disabled: !!disabled })}
+      className={cx(className, `size-${size}`, {
+        disabled: !!disabled,
+        border: !!border,
+        innerBorder: !!innerBorder
+      })}
       {...props}
     />
   )
@@ -31,7 +52,7 @@ Avatar.propTypes = {
     PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl']),
     PropTypes.number
   ]),
-  color: PropTypes.string,
+  color: PropTypes.oneOf([...supportedColors, 'none']),
   disabled: PropTypes.bool
 }
 

package/react/Buttons/Readme.md

@@ -19,6 +19,7 @@ const variants = ['primary', 'secondary', 'ghost', 'text']
 const propsArr = [{}, { disabled: true }, { busy: true }]
 
 ;
+
 <Grid container>
   {propsArr.map(props =>
     <Grid item xs={12} sm={4} className="u-mb-1" key={JSON.stringify(props)}>

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -72,6 +72,91 @@ export const makeLightNormalOverrides = theme => ({
       }
     }
   },
+  MuiToggleButtonGroup: {
+    groupedHorizontal: {
+      '&.rounded': {
+        marginRight: 12,
+        '&:last-child': {
+          marginRight: 0
+        },
+        '&:not(:first-child)': {
+          borderTopLeftRadius: 'inherit',
+          borderBottomLeftRadius: 'inherit',
+          marginLeft: 'inherit',
+          borderLeft: 'inherit'
+        },
+        '&:not(:last-child)': {
+          '&.rounded': {
+            borderTopRightRadius: 'inherit',
+            borderBottomRightRadius: 'inherit'
+          }
+        }
+      }
+    }
+  },
+  MuiToggleButton: {
+    root: {
+      borderRadius: 0,
+      color: theme.palette.text.secondary,
+      border: `1px solid ${theme.palette.border.main}`,
+      padding: 15,
+      '&$selected': {
+        color: theme.palette.text.primary,
+        backgroundColor: 'transparent',
+        '&:not($disabled)': {
+          '&.customColor': {
+            '&-primary': {
+              color: theme.palette.primary.main
+            }
+          }
+        }
+      },
+      '&$disabled': {
+        color: theme.palette.text.disabled
+      },
+      '&.rounded': {
+        border: 0,
+        borderRadius: theme.shape.borderRadius,
+        padding: '10px 12px',
+        '&$selected': {
+          backgroundColor: theme.palette.action.selected,
+          '&:not($disabled)': {
+            '&.customColor': {
+              '&-primary': {
+                color: theme.palette.text.primary,
+                backgroundColor: alpha(
+                  theme.palette.primary.main,
+                  theme.palette.action.selectedOpacity
+                ),
+                '&:hover': {
+                  textDecoration: 'none',
+                  backgroundColor: alpha(
+                    theme.palette.primary.main,
+                    theme.palette.action.activatedOpacity
+                  ),
+                  '@media (hover: none)': {
+                    backgroundColor: 'transparent'
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    sizeSmall: {
+      padding: 11,
+      '&.rounded': {
+        padding: '7px 10px'
+      }
+    },
+    sizeLarge: {
+      padding: 19,
+      '&.rounded': {
+        padding: 12
+      }
+    }
+  },
   MuiButton: {
     root: {
       borderRadius: 2,
@@ -616,6 +701,77 @@ export const makeLightNormalOverrides = theme => ({
       }
     }
   },
+  MuiAvatarGroup: {
+    avatar: {
+      border: `2px solid ${theme.palette.background.paper}`
+    }
+  },
+  MuiAvatar: {
+    root: {
+      fontWeight: 600,
+      '&.size': {
+        '&-xs': {
+          width: 16,
+          height: 16,
+          fontSize: 8,
+          '& svg': {
+            width: 8,
+            height: 8
+          }
+        },
+        '&-s': {
+          width: 24,
+          height: 24,
+          fontSize: 12,
+          '& svg': {
+            width: 12,
+            height: 12
+          }
+        },
+        '&-m': {
+          width: 32,
+          height: 32,
+          fontSize: 16,
+          '& svg': {
+            width: 16,
+            height: 16
+          }
+        },
+        '&-l': {
+          width: 48,
+          height: 48,
+          fontSize: 24,
+          '& svg': {
+            width: 24,
+            height: 24
+          }
+        },
+        '&-xl': {
+          width: 64,
+          height: 64,
+          fontSize: 32,
+          '& svg': {
+            width: 32,
+            height: 32
+          }
+        }
+      },
+      '&.disabled': {
+        color: theme.palette.primary.contrastText,
+        background: 'var(--silver)', // should be semantic but used legacy component color for now
+        '& img': {
+          filter: 'grayscale(1) brightness(2)',
+          opacity: 0.5
+        }
+      },
+      '&.border': {
+        border: `2px solid ${theme.palette.background.paper}`
+      },
+      '&.innerBorder': {
+        boxShadow: `inset 0px 0px 0px 1px ${theme.palette.border.main}`
+      }
+    }
+  },
   MuiCheckbox: {
     colorSecondary: {
       '&$checked': {

package/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.js

@@ -171,22 +171,23 @@ export const makeLightNormalTwakeOverrides = theme => {
         height: 56
       }
     },
+    MuiAvatarGroup: {
+      root: {
+        '& > div:last-child': {
+          boxShadow: `inset 0px 0px 0px 1px ${theme.palette.border.main}`
+        }
+      }
+    },
     MuiAvatar: {
       root: {
-        fontWeight: 600,
         '&.size': {
           '&-xs': {
-            width: 16,
-            height: 16,
-            fontSize: 8,
             '& svg': {
               width: 10,
               height: 10
             }
           },
           '&-s': {
-            width: 24,
-            height: 24,
             fontSize: 11,
             '& svg': {
               width: 16,
@@ -194,36 +195,23 @@ export const makeLightNormalTwakeOverrides = theme => {
             }
           },
           '&-m': {
-            width: 32,
-            height: 32,
-            fontSize: 16,
             '& svg': {
               width: 20,
               height: 20
             }
           },
           '&-l': {
-            width: 48,
-            height: 48,
-            fontSize: 24,
             '& svg': {
               width: 28,
               height: 28
             }
           },
           '&-xl': {
-            width: 64,
-            height: 64,
-            fontSize: 32,
             '& svg': {
               width: 36,
               height: 36
             }
           }
-        },
-        '&.disabled': {
-          color: theme.palette.primary.contrastText,
-          background: theme.palette.action.disabledBackground
         }
       },
       colorDefault: {

package/react/ToggleButton/Readme.md

@@ -0,0 +1,60 @@
+```jsx
+import { useState } from 'react'
+import ToggleButton from 'cozy-ui/transpiled/react/ToggleButton'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import HeartIcon from 'cozy-ui/transpiled/react/Icons/Heart'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Grid from 'cozy-ui/transpiled/react/Grid'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+initialVariants = [{ small: false, large: false }]
+const cols = ['default', 'default-disabled', 'primary', 'primary-disabled']
+const rows = ['square', 'rounded']
+
+const makeSize = variant => Object.keys(variant).filter(key => variant[key])[0]
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <Grid container>
+      {cols.map(col =>
+        <Grid item xs={12} sm={12 / cols.length} className="u-mb-1" key={JSON.stringify(col)}>
+          <Stack spacing="s">
+            <Typography variant="h5">{col}</Typography>
+            {rows.map(row =>
+              <div key={row + JSON.stringify(col)}>
+                <Typography gutterBottom>{row}</Typography>
+                <div style={{ display: "flex", gap: "0.5rem" }}>
+                  <ToggleButton
+                    value="list"
+                    aria-label="list"
+                    rounded={row.includes('rounded')}
+                    color={col.replace('-disabled','')}
+                    size={makeSize(variant)}
+                    disabled={col.includes('disabled')}
+                  >
+                    <Icon icon={HeartIcon} />
+                  </ToggleButton>
+                  <ToggleButton
+                    value="list"
+                    aria-label="list"
+                    rounded={row.includes('rounded')}
+                    color={col.replace('-disabled','')}
+                    selected
+                    size={makeSize(variant)}
+                    disabled={col.includes('disabled')}
+                  >
+                    <Icon icon={HeartIcon} />
+                  </ToggleButton>
+                </div>
+              </div>
+            )}
+          </Stack>
+        </Grid>
+      )}
+    </Grid>
+  )}
+</Variants>
+```

package/react/ToggleButton/index.js

@@ -1,3 +1,26 @@
-import ToggleButton from '@material-ui/lab/ToggleButton'
+import MuiToggleButton from '@material-ui/lab/ToggleButton'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React, { forwardRef } from 'react'
+
+const ToggleButton = forwardRef(
+  ({ className, rounded, color, ...props }, ref) => {
+    return (
+      <MuiToggleButton
+        ref={ref}
+        className={cx(className, { rounded }, `customColor-${color}`)}
+        {...props}
+      />
+    )
+  }
+)
+
+ToggleButton.displayName = 'ToggleButton'
+
+ToggleButton.propTypes = {
+  className: PropTypes.string,
+  rounded: PropTypes.bool,
+  color: PropTypes.string
+}
 
 export default ToggleButton

package/react/ToggleButtonGroup/Readme.md

@@ -1,28 +1,90 @@
 ```jsx
+import { useState } from 'react'
 import ToggleButton from 'cozy-ui/transpiled/react/ToggleButton'
 import ToggleButtonGroup from 'cozy-ui/transpiled/react/ToggleButtonGroup'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
-import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
+import ListIcon from 'cozy-ui/transpiled/react/Icons/List'
+import MosaicIcon from 'cozy-ui/transpiled/react/Icons/MosaicMin'
+import GroupListIcon from 'cozy-ui/transpiled/react/Icons/GroupList'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Grid from 'cozy-ui/transpiled/react/Grid'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Variants from 'cozy-ui/docs/components/Variants'
 
+initialVariants = [{ small: false, large: false, third: false }]
+const cols = ['default', 'default-disabled', 'primary', 'primary-disabled']
+const rows = ['square', 'rounded']
 
-initialState = { alignment: 'left' }
+const ToggleGroup = ({ row, col, variant }) => {
+  const [value, setValue] = useState('list')
+  const handleChange = (ev, newValue) => {
+    if (newValue !== null) {
+      setValue(newValue)
+    }
+  }
 
-const handleAlignment = (ev, value) => setState({ alignment: value })
+  const size = Object.keys(variant).filter(key => variant[key])[0]
+
+  return (
+    <ToggleButtonGroup
+      variant={row}
+      value={value}
+      aria-label="list display"
+      exclusive
+      size={size}
+      onChange={handleChange}
+    >
+      <ToggleButton
+        value="list"
+        aria-label="list"
+        rounded={row.includes('rounded')}
+        color={col.replace('-disabled','')}
+        disabled={col.includes('disabled')}
+      >
+        <Icon icon={ListIcon} />
+      </ToggleButton>
+      <ToggleButton
+        value="mosaic"
+        aria-label="mosaic"
+        rounded={row.includes('rounded')}
+        color={col.replace('-disabled','')}
+        disabled={col.includes('disabled')}
+      >
+        <Icon icon={MosaicIcon} />
+      </ToggleButton>
+      {variant.third && (
+        <ToggleButton
+          value="grouplist"
+          aria-label="grouplist"
+          rounded={row.includes('rounded')}
+          color={col.replace('-disabled','')}
+          disabled={col.includes('disabled')}
+        >
+          <Icon icon={GroupListIcon} />
+        </ToggleButton>
+      )}
+    </ToggleButtonGroup>
+  )
+}
 
 ;
 
-<ToggleButtonGroup
-  value={state.alignment}
-  exclusive
-  onChange={handleAlignment}
-  aria-label="text alignment"
->
-  <ToggleButton value="left" aria-label="left aligned">
-    <Icon icon={PeopleIcon} />
-  </ToggleButton>
-  <ToggleButton value="right" aria-label="right aligned">
-    <Icon icon={TrashIcon} />
-  </ToggleButton>
-</ToggleButtonGroup>
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <Grid container>
+      {cols.map(col =>
+        <Grid item xs={12} sm={12 / cols.length} className="u-mb-1" key={JSON.stringify(col)}>
+          <Stack spacing="s">
+            <Typography variant="h5">{col}</Typography>
+            {rows.map(row =>
+              <div key={row + JSON.stringify(col)}>
+                <ToggleGroup row={row} col={col} variant={variant} />
+              </div>
+            )}
+          </Stack>
+        </Grid>
+      )}
+    </Grid>
+  )}
+</Variants>
 ```

package/stylus/cozy-ui/build.styl

@@ -1370,6 +1370,8 @@ Display an chip that represents complex identity
     .u-bdrs-2 - 2nd step of border-radius (3px)
     .u-bdrs-3 - 3rd step of border-radius (4px)
     .u-bdrs-4 - 4th step of border-radius (8px)
+    .u-bdrs-5 - 4th step of border-radius (10px)
+    .u-bdrs-6 - 4th step of border-radius (12px)
     .u-bdrs-circle - Round element with border-radius (100%)
 
     Markup:

package/stylus/utilities/border.styl

@@ -16,6 +16,12 @@ bdrs-3()
 bdrs-4()
     border-radius rem(8) !important // @stylint ignore
 
+bdrs-5()
+    border-radius rem(10) !important // @stylint ignore
+
+bdrs-6()
+    border-radius rem(12) !important // @stylint ignore
+
 bdrs-circle()
     border-radius 100% !important // @stylint ignore
 
@@ -30,6 +36,8 @@ props = {
     'bdrs-2': 'bdrs-2',
     'bdrs-3': 'bdrs-3',
     'bdrs-4': 'bdrs-4',
+    'bdrs-5': 'bdrs-5',
+    'bdrs-6': 'bdrs-6',
     'bdrs-circle': 'bdrs-circle',
     'bdw-0': 'bdw-0',
     'bdw-1': 'bdw-1'

package/transpiled/react/Avatar/helpers.d.ts

@@ -30,5 +30,5 @@ export namespace colorMapping {
     const cornflower: string;
     const paleGreen: string;
     const moonBlue: string;
-    const undefined: string;
 }
+export function nameToColor(name?: string): string;

package/transpiled/react/Avatar/helpers.js

@@ -25,6 +25,20 @@ export var colorMapping = {
   pluviophile: 'linear-gradient(136deg, #A1D6F4 14.84%, #52CEC2 96.03%)',
   cornflower: 'linear-gradient(135deg, #86D9D3 0%, #1CCFB4 100%)',
   paleGreen: 'linear-gradient(135deg, #E2FA17 0%, #75D8CB 100%)',
-  moonBlue: 'linear-gradient(136deg, #6DCFFF 14.84%, #3D88F8 96.03%)',
-  undefined: ''
+  moonBlue: 'linear-gradient(136deg, #6DCFFF 14.84%, #3D88F8 96.03%)'
+};
+var colors = Object.values(supportedColors).filter(Boolean);
+
+var makeKey = function makeKey(colors, name) {
+  return Array.from(name.toUpperCase()).map(function (letter) {
+    return letter.charCodeAt(0);
+  }).reduce(function (sum, number) {
+    return sum + number;
+  }, 0) % colors.length;
+};
+
+export var nameToColor = function nameToColor() {
+  var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var key = makeKey(colors, name);
+  return colors[key];
 };