cozy-ui 121.0.0 → 121.1.0

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/MuiCozyTheme/overrides/makeDarkInvertedOverrides.d.ts

@@ -57,6 +57,85 @@ export function makeDarkInvertedOverrides(theme: any): {
             };
         };
     };
+    MuiToggleButtonGroup: {
+        groupedHorizontal: {
+            '&.rounded': {
+                marginRight: number;
+                '&:last-child': {
+                    marginRight: number;
+                };
+                '&:not(:first-child)': {
+                    borderTopLeftRadius: string;
+                    borderBottomLeftRadius: string;
+                    marginLeft: string;
+                    borderLeft: string;
+                };
+                '&:not(:last-child)': {
+                    '&.rounded': {
+                        borderTopRightRadius: string;
+                        borderBottomRightRadius: string;
+                    };
+                };
+            };
+        };
+    };
+    MuiToggleButton: {
+        root: {
+            borderRadius: number;
+            color: any;
+            border: string;
+            padding: number;
+            '&$selected': {
+                color: any;
+                backgroundColor: string;
+                '&:not($disabled)': {
+                    '&.customColor': {
+                        '&-primary': {
+                            color: any;
+                        };
+                    };
+                };
+            };
+            '&$disabled': {
+                color: any;
+            };
+            '&.rounded': {
+                border: number;
+                borderRadius: any;
+                padding: string;
+                '&$selected': {
+                    backgroundColor: any;
+                    '&:not($disabled)': {
+                        '&.customColor': {
+                            '&-primary': {
+                                color: any;
+                                backgroundColor: string;
+                                '&:hover': {
+                                    textDecoration: string;
+                                    backgroundColor: string;
+                                    '@media (hover: none)': {
+                                        backgroundColor: string;
+                                    };
+                                };
+                            };
+                        };
+                    };
+                };
+            };
+        };
+        sizeSmall: {
+            padding: number;
+            '&.rounded': {
+                padding: string;
+            };
+        };
+        sizeLarge: {
+            padding: number;
+            '&.rounded': {
+                padding: number;
+            };
+        };
+    };
     MuiButton: {
         root: {
             borderRadius: number;

package/transpiled/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.d.ts

@@ -57,6 +57,85 @@ export function makeDarkNormalOverrides(theme: any): {
             };
         };
     };
+    MuiToggleButtonGroup: {
+        groupedHorizontal: {
+            '&.rounded': {
+                marginRight: number;
+                '&:last-child': {
+                    marginRight: number;
+                };
+                '&:not(:first-child)': {
+                    borderTopLeftRadius: string;
+                    borderBottomLeftRadius: string;
+                    marginLeft: string;
+                    borderLeft: string;
+                };
+                '&:not(:last-child)': {
+                    '&.rounded': {
+                        borderTopRightRadius: string;
+                        borderBottomRightRadius: string;
+                    };
+                };
+            };
+        };
+    };
+    MuiToggleButton: {
+        root: {
+            borderRadius: number;
+            color: any;
+            border: string;
+            padding: number;
+            '&$selected': {
+                color: any;
+                backgroundColor: string;
+                '&:not($disabled)': {
+                    '&.customColor': {
+                        '&-primary': {
+                            color: any;
+                        };
+                    };
+                };
+            };
+            '&$disabled': {
+                color: any;
+            };
+            '&.rounded': {
+                border: number;
+                borderRadius: any;
+                padding: string;
+                '&$selected': {
+                    backgroundColor: any;
+                    '&:not($disabled)': {
+                        '&.customColor': {
+                            '&-primary': {
+                                color: any;
+                                backgroundColor: string;
+                                '&:hover': {
+                                    textDecoration: string;
+                                    backgroundColor: string;
+                                    '@media (hover: none)': {
+                                        backgroundColor: string;
+                                    };
+                                };
+                            };
+                        };
+                    };
+                };
+            };
+        };
+        sizeSmall: {
+            padding: number;
+            '&.rounded': {
+                padding: string;
+            };
+        };
+        sizeLarge: {
+            padding: number;
+            '&.rounded': {
+                padding: number;
+            };
+        };
+    };
     MuiButton: {
         root: {
             borderRadius: number;

package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts

@@ -57,6 +57,85 @@ export function makeLightInvertedOverrides(theme: any): {
             };
         };
     };
+    MuiToggleButtonGroup: {
+        groupedHorizontal: {
+            '&.rounded': {
+                marginRight: number;
+                '&:last-child': {
+                    marginRight: number;
+                };
+                '&:not(:first-child)': {
+                    borderTopLeftRadius: string;
+                    borderBottomLeftRadius: string;
+                    marginLeft: string;
+                    borderLeft: string;
+                };
+                '&:not(:last-child)': {
+                    '&.rounded': {
+                        borderTopRightRadius: string;
+                        borderBottomRightRadius: string;
+                    };
+                };
+            };
+        };
+    };
+    MuiToggleButton: {
+        root: {
+            borderRadius: number;
+            color: any;
+            border: string;
+            padding: number;
+            '&$selected': {
+                color: any;
+                backgroundColor: string;
+                '&:not($disabled)': {
+                    '&.customColor': {
+                        '&-primary': {
+                            color: any;
+                        };
+                    };
+                };
+            };
+            '&$disabled': {
+                color: any;
+            };
+            '&.rounded': {
+                border: number;
+                borderRadius: any;
+                padding: string;
+                '&$selected': {
+                    backgroundColor: any;
+                    '&:not($disabled)': {
+                        '&.customColor': {
+                            '&-primary': {
+                                color: any;
+                                backgroundColor: string;
+                                '&:hover': {
+                                    textDecoration: string;
+                                    backgroundColor: string;
+                                    '@media (hover: none)': {
+                                        backgroundColor: string;
+                                    };
+                                };
+                            };
+                        };
+                    };
+                };
+            };
+        };
+        sizeSmall: {
+            padding: number;
+            '&.rounded': {
+                padding: string;
+            };
+        };
+        sizeLarge: {
+            padding: number;
+            '&.rounded': {
+                padding: number;
+            };
+        };
+    };
     MuiButton: {
         root: {
             borderRadius: number;

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.d.ts

@@ -57,6 +57,85 @@ export function makeLightNormalOverrides(theme: any): {
             };
         };
     };
+    MuiToggleButtonGroup: {
+        groupedHorizontal: {
+            '&.rounded': {
+                marginRight: number;
+                '&:last-child': {
+                    marginRight: number;
+                };
+                '&:not(:first-child)': {
+                    borderTopLeftRadius: string;
+                    borderBottomLeftRadius: string;
+                    marginLeft: string;
+                    borderLeft: string;
+                };
+                '&:not(:last-child)': {
+                    '&.rounded': {
+                        borderTopRightRadius: string;
+                        borderBottomRightRadius: string;
+                    };
+                };
+            };
+        };
+    };
+    MuiToggleButton: {
+        root: {
+            borderRadius: number;
+            color: any;
+            border: string;
+            padding: number;
+            '&$selected': {
+                color: any;
+                backgroundColor: string;
+                '&:not($disabled)': {
+                    '&.customColor': {
+                        '&-primary': {
+                            color: any;
+                        };
+                    };
+                };
+            };
+            '&$disabled': {
+                color: any;
+            };
+            '&.rounded': {
+                border: number;
+                borderRadius: any;
+                padding: string;
+                '&$selected': {
+                    backgroundColor: any;
+                    '&:not($disabled)': {
+                        '&.customColor': {
+                            '&-primary': {
+                                color: any;
+                                backgroundColor: string;
+                                '&:hover': {
+                                    textDecoration: string;
+                                    backgroundColor: string;
+                                    '@media (hover: none)': {
+                                        backgroundColor: string;
+                                    };
+                                };
+                            };
+                        };
+                    };
+                };
+            };
+        };
+        sizeSmall: {
+            padding: number;
+            '&.rounded': {
+                padding: string;
+            };
+        };
+        sizeLarge: {
+            padding: number;
+            '&.rounded': {
+                padding: number;
+            };
+        };
+    };
     MuiButton: {
         root: {
             borderRadius: number;

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

@@ -69,6 +69,85 @@ export var makeLightNormalOverrides = function 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 ".concat(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,