cozy-ui 66.0.0 → 66.2.1

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [66.2.1](https://github.com/cozy/cozy-ui/compare/v66.2.0...v66.2.1) (2022-05-05)
+
+
+### Bug Fixes
+
+* IconButton propagates ref ([0aba625](https://github.com/cozy/cozy-ui/commit/0aba625))
+
+# [66.2.0](https://github.com/cozy/cozy-ui/compare/v66.1.0...v66.2.0) (2022-05-03)
+
+
+### Bug Fixes
+
+* Small size for IconButton ([63b6f70](https://github.com/cozy/cozy-ui/commit/63b6f70))
+
+
+### Features
+
+* Add CircleButton ([bd2692a](https://github.com/cozy/cozy-ui/commit/bd2692a))
+
+# [66.1.0](https://github.com/cozy/cozy-ui/compare/v66.0.0...v66.1.0) (2022-05-03)
+
+
+### Features
+
+* Add large size on IconButton ([2a58a7a](https://github.com/cozy/cozy-ui/commit/2a58a7a))
+
 # [66.0.0](https://github.com/cozy/cozy-ui/compare/v65.1.3...v66.0.0) (2022-05-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "66.0.0",
+  "version": "66.2.1",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -29,11 +29,9 @@
     "build:doc:react": "styleguidist build --config docs/styleguide.config.js",
     "build": "env BABEL_ENV=transpilation babel --extensions .ts,.tsx,.js,.jsx react/ --out-dir transpiled/react --verbose",
     "clean:doc:kss": "rm -rf build/styleguide",
-    "commitmsg": "commitlint -e $GIT_PARAMS",
     "deploy:doc": "git-directory-deploy --directory build/ --branch gh-pages",
     "makeSvgr": "scripts/generate-svgr-icon.sh",
     "lint": "npm-run-all 'lint:*'",
-    "lint:commit": "git merge-base HEAD master && commitlint --from=$(git merge-base HEAD master) --to=HEAD || true",
     "lint:js": "eslint 'react/**/*.jsx' 'react/**/*.js' 'react/**/*.ts' 'docs/styleguide.config.js'",
     "lint:stylus": "stylint stylus --config .stylintrc",
     "lint:md": "remark . -o -S",
@@ -49,6 +47,7 @@
     "jest": "yarn test:jest",
     "screenshots": "node scripts/screenshots.js --screenshot-dir ./screenshots --styleguide-url file://$(pwd)/build/react --kss-dir ./build/styleguide",
     "test": "yarn test:jest",
+    "test:update:expl": "yarn test react/examples.spec.jsx -u",
     "screenshots:server": "nodemon ./scripts/pixelmatch-server/server.js -e js,hbs",
     "test:jest": "jest",
     "postbuild": "postcss transpiled/react/stylesheet.css --replace",
@@ -87,8 +86,6 @@
     "babel-plugin-inline-json-import": "0.3.2",
     "babel-preset-cozy-app": "2.0.2",
     "browserslist-config-cozy": "0.4.0",
-    "commitlint": "7.6.1",
-    "commitlint-config-cozy": "0.6.0",
     "copyfiles": "2.4.1",
     "cozy-client": "28.2.0",
     "cozy-device-helper": "2.0.0",
@@ -110,7 +107,6 @@
     "git-directory-deploy": "1.5.1",
     "handlebars": "^4.7.6",
     "http-server": "0.13.0",
-    "husky": "0.14.3",
     "identity-obj-proxy": "3.0.0",
     "jest-canvas-mock": "2.3.1",
     "jest-cli": "^26.6.3",

package/react/CircleButton/Readme.md

@@ -0,0 +1,120 @@
+```jsx
+import CircleButton from 'cozy-ui/transpiled/react/CircleButton'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import HeartIcon from 'cozy-ui/transpiled/react/Icons/Heart'
+import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
+
+// <-- only useful for the documentation
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+const columns = [{ title: 'default', disabled: false }, { title: 'disabled', disabled: true }]
+const initialVariants = [{ default: true, active: false }]
+// -->
+
+;
+
+<Variants initialVariants={initialVariants} radio={true} screenshotAllVariants>
+  {variant => (
+    <Grid container>
+      {columns.map(column =>
+        <Grid item xs={12} sm={6} className="u-mb-1" key={JSON.stringify(column)}>
+          <Stack spacing="s">
+            <Typography>{Object.values(column)[0]}</Typography>
+            <CircleButton
+              label="Button"
+              disabled={Object.values(column)[1]}
+              variant={Object.keys(variant).find(key => variant[key])}
+            >
+              <Icon icon={HeartIcon} />
+            </CircleButton>
+            <CircleButton
+              label="Long label button"
+              disabled={Object.values(column)[1]}
+              variant={Object.keys(variant).find(key => variant[key])}
+            >
+              <Icon icon={HeartIcon} />
+            </CircleButton>
+            <CircleButton
+              disabled={Object.values(column)[1]}
+              variant={Object.keys(variant).find(key => variant[key])}
+            >
+              <Icon icon={PeopleIcon} />
+            </CircleButton>
+          </Stack>
+        </Grid>
+      )}
+    </Grid>
+  )}
+</Variants>
+```
+
+### Use case
+
+Can be used in a responsive container to distribute the elements.
+
+```jsx
+import CircleButton from 'cozy-ui/transpiled/react/CircleButton'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import HeartIcon from 'cozy-ui/transpiled/react/Icons/Heart'
+import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
+
+// <-- only useful for the documentation
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+const initialVariants = [{ fullWidth: false }]
+const styles = {
+  display: 'flex',
+  justifyContent: 'center',
+  flexWrap: 'wrap'
+}
+// -->
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <div style={styles}>
+      <CircleButton
+        label="Label"
+        fullWidth={variant.fullWidth}
+      >
+        <Icon icon={HeartIcon} />
+      </CircleButton>
+      <CircleButton
+        label="Very long long label"
+        fullWidth={variant.fullWidth}
+      >
+        <Icon icon={HeartIcon} />
+      </CircleButton>
+      <CircleButton
+        label="Label"
+        fullWidth={variant.fullWidth}
+      >
+        <Icon icon={HeartIcon} />
+      </CircleButton>
+      <CircleButton
+        label="Label"
+        fullWidth={variant.fullWidth}
+      >
+        <Icon icon={HeartIcon} />
+      </CircleButton>
+      <CircleButton
+        label="Very long long label"
+        fullWidth={variant.fullWidth}
+      >
+        <Icon icon={HeartIcon} />
+      </CircleButton>
+      <CircleButton
+        label="Label"
+        fullWidth={variant.fullWidth}
+      >
+        <Icon icon={HeartIcon} />
+      </CircleButton>
+    </div>
+  )}
+</Variants>
+```

package/react/CircleButton/helpers.js

@@ -0,0 +1,16 @@
+export const makeTypoColor = ({ theme, active, disabled }) => {
+  if (disabled) {
+    return theme.palette.text.disabled
+  }
+  if (active) {
+    return theme.palette.primary.main
+  }
+  return theme.palette.text.primary
+}
+
+export const makeButtonShadow = ({ theme, active, disabled }) => {
+  if (disabled || !active) {
+    return `inset 0 0 0 1px ${theme.palette.border.main}`
+  }
+  return `none`
+}

package/react/CircleButton/helpers.spec.js

@@ -0,0 +1,61 @@
+import { makeTypoColor, makeButtonShadow } from './helpers'
+
+const theme = {
+  palette: {
+    primary: { main: 'white' },
+    text: { disabled: 'lightGrey', primary: 'grey' },
+    border: { main: 'paleGrey' }
+  }
+}
+
+describe('makeTypoColor', () => {
+  it('should be correct color by default', () => {
+    const res = makeTypoColor({ theme, active: false, disabled: false })
+
+    expect(res).toBe('grey')
+  })
+
+  it('should be correct color when disabled', () => {
+    const res = makeTypoColor({ theme, active: false, disabled: true })
+
+    expect(res).toBe('lightGrey')
+  })
+
+  it('should be correct color when active', () => {
+    const res = makeTypoColor({ theme, active: true, disabled: false })
+
+    expect(res).toBe('white')
+  })
+
+  it('should be correct color when active disabled', () => {
+    const res = makeTypoColor({ theme, active: true, disabled: true })
+
+    expect(res).toBe('lightGrey')
+  })
+})
+
+describe('makeButtonShadow', () => {
+  it('should be correct color by default', () => {
+    const res = makeButtonShadow({ theme, active: false, disabled: false })
+
+    expect(res).toBe('inset 0 0 0 1px paleGrey')
+  })
+
+  it('should be correct color when disabled', () => {
+    const res = makeButtonShadow({ theme, active: false, disabled: true })
+
+    expect(res).toBe('inset 0 0 0 1px paleGrey')
+  })
+
+  it('should be none when active', () => {
+    const res = makeButtonShadow({ theme, active: true, disabled: false })
+
+    expect(res).toBe('none')
+  })
+
+  it('should be correct color when active disabled', () => {
+    const res = makeButtonShadow({ theme, active: true, disabled: true })
+
+    expect(res).toBe('inset 0 0 0 1px paleGrey')
+  })
+})

package/react/CircleButton/index.jsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { makeStyles } from '@material-ui/core/styles'
+
+import Box from '../Box'
+import IconButton from '../IconButton'
+import Typography from '../Typography'
+import { makeTypoColor, makeButtonShadow } from './helpers'
+
+const useStyles = makeStyles(theme => ({
+  iconButton: {
+    margin: '0 auto',
+    boxShadow: ({ active, disabled }) =>
+      makeButtonShadow({ theme, active, disabled }),
+    backgroundColor: ({ active }) =>
+      active ? theme.palette.primary.main : 'transparent',
+    color: ({ active }) =>
+      active ? theme.palette.primary.contrastText : theme.palette.text.icon,
+    '&:hover': {
+      backgroundColor: ({ active }) =>
+        active ? theme.palette.primary.dark : theme.palette.action.hover
+    }
+  },
+  typography: {
+    marginTop: '0.25rem',
+    color: ({ active, disabled }) => makeTypoColor({ theme, active, disabled })
+  }
+}))
+
+const CircleButton = ({
+  className,
+  label,
+  variant = 'default',
+  disabled,
+  fullWidth = false,
+  children,
+  ...props
+}) => {
+  const styles = useStyles({ active: variant === 'active', disabled })
+
+  return (
+    <Box
+      className={className}
+      display="inline-flex"
+      flexDirection="column"
+      flexGrow={fullWidth ? 1 : undefined}
+      minWidth="64px"
+      flexBasis="64px"
+      padding="8px 0 4px 0"
+    >
+      <IconButton
+        className={styles.iconButton}
+        size="large"
+        disabled={disabled}
+        {...props}
+      >
+        {children}
+      </IconButton>
+      {label && (
+        <Typography
+          component="div"
+          className={styles.typography}
+          variant="caption"
+          align="center"
+          noWrap
+        >
+          {label}
+        </Typography>
+      )}
+    </Box>
+  )
+}
+
+CircleButton.propTypes = {
+  className: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  variant: PropTypes.oneOf(['default', 'active']),
+  disabled: PropTypes.bool,
+  fullWidth: PropTypes.bool
+}
+
+export default CircleButton

package/react/IconButton/Readme.md

@@ -1,30 +1,58 @@
 A component suitable to be used when an Icon should be used as a button.
-Provides hover, active styles + accessible size (48px).
+Provides hover, active styles + accessible size.
 
 ```jsx
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 
+// <-- only useful for the documentation
 import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
-import LeftIcon from 'cozy-ui/transpiled/react/Icons/Left'
 import RestoreIcon from 'cozy-ui/transpiled/react/Icons/Restore'
-import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
 import CrossIcon from 'cozy-ui/transpiled/react/Icons/Cross'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+const columns = [{ title: 'default', disabled: false }, { title: 'disabled', disabled: true }]
+const initialVariants = [{ small: false, medium: true, large: false }]
+// -->
 
 ;
 
-<>
-  <IconButton>
-    <Icon icon={TrashIcon} />
-  </IconButton>
-  <IconButton disabled>
-    <Icon icon={TrashIcon} />
-  </IconButton>
-  <IconButton color="primary">
-    <Icon icon={RestoreIcon} />
-  </IconButton>
-  <IconButton color="secondary">
-    <Icon icon={CrossIcon} />
-  </IconButton>
-</>
+<Variants initialVariants={initialVariants} radio screenshotAllVariants>
+  {variant => (
+    <Grid container>
+      {columns.map(column =>
+        <Grid item xs={12} sm={6} className="u-mb-1" key={JSON.stringify(column)}>
+          <Stack spacing="s">
+            <Typography>{Object.values(column)[0]}</Typography>
+            <p>
+              <IconButton
+                disabled={Object.values(column)[1]}
+                size={Object.keys(variant).find(key => variant[key])}
+              >
+                <Icon icon={TrashIcon}/>
+              </IconButton>
+              <IconButton
+                color="primary"
+                disabled={Object.values(column)[1]}
+                size={Object.keys(variant).find(key => variant[key])}
+              >
+                <Icon icon={RestoreIcon} />
+              </IconButton>
+              <IconButton
+                color="secondary"
+                disabled={Object.values(column)[1]}
+                size={Object.keys(variant).find(key => variant[key])}
+              >
+                <Icon icon={CrossIcon}/>
+              </IconButton>
+            </p>
+          </Stack>
+        </Grid>
+      )}
+    </Grid>
+  )}
+</Variants>
 ```

package/react/IconButton/index.jsx

@@ -1,3 +1,22 @@
-import IconButton from '@material-ui/core/IconButton'
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+import MuiIconButton from '@material-ui/core/IconButton'
 
-export default IconButton
+const IconButton = (
+  { size = 'medium', className, children, ...props },
+  ref
+) => {
+  return (
+    <MuiIconButton ref={ref} className={cx(className, size)} {...props}>
+      {children}
+    </MuiIconButton>
+  )
+}
+
+IconButton.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium', 'large'])
+}
+
+export default forwardRef(IconButton)

package/react/MuiCozyTheme/makeOverrides.js

@@ -666,6 +666,15 @@ const makeOverrides = theme => ({
   MuiIconButton: {
     root: {
       color: theme.palette.text.secondary,
+      '&.small': {
+        padding: 3
+      },
+      '&.medium': {
+        padding: 12
+      },
+      '&.large': {
+        padding: 16
+      },
       '&.dialogIconButton': {
         backgroundColor: theme.palette.background.paper,
         '&:hover': {

package/react/__snapshots__/examples.spec.jsx.snap

@@ -7329,7 +7329,28 @@ exports[`Icon should render examples: Icon 6`] = `
 </div>"
 `;
 
-exports[`IconButton should render examples: IconButton 1`] = `"<div><button class=\\"MuiButtonBase-root MuiIconButton-root\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiIconButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><g fill-rule=\\"evenodd\\"><path d=\\"M4.5 1H2.007C1.45 1 1 1.448 1 2v1h14V2c0-.556-.45-1-1.007-1H11.5L11 0H5l-.5 1zM2 4h12v9.991A2.01 2.01 0 0111.991 16H4.01A2.01 2.01 0 012 13.991V4z\\"></path><path d=\\"M4.5 1H2.007C1.45 1 1 1.448 1 2v1h14V2c0-.556-.45-1-1.007-1H11.5L11 0H5l-.5 1zM2 4h12v9.991A2.01 2.01 0 0111.991 16H4.01A2.01 2.01 0 012 13.991V4z\\"></path></g></svg></span></button><button class=\\"MuiButtonBase-root MuiIconButton-root Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiIconButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><g fill-rule=\\"evenodd\\"><path d=\\"M4.5 1H2.007C1.45 1 1 1.448 1 2v1h14V2c0-.556-.45-1-1.007-1H11.5L11 0H5l-.5 1zM2 4h12v9.991A2.01 2.01 0 0111.991 16H4.01A2.01 2.01 0 012 13.991V4z\\"></path><path d=\\"M4.5 1H2.007C1.45 1 1 1.448 1 2v1h14V2c0-.556-.45-1-1.007-1H11.5L11 0H5l-.5 1zM2 4h12v9.991A2.01 2.01 0 0111.991 16H4.01A2.01 2.01 0 012 13.991V4z\\"></path></g></svg></span></button><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiIconButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><g fill-rule=\\"evenodd\\"><path d=\\"M1 15h8c4.052 0 7-2.948 7-7s-2.948-7-7-7-7 2.948-7 7a1 1 0 102 0c0-2.948 2.052-5 5-5s5 2.052 5 5-2.052 5-5 5H1a1 1 0 000 2z\\"></path><path d=\\"M1.832 4.445a1 1 0 00-1.664 1.11l2 3a1 1 0 001.387.277l3-2a1 1 0 00-1.11-1.664L3.277 6.613 1.832 4.445z\\"></path></g></svg></span></button><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiIconButton-label\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M10.586 12L.293 1.707A1 1 0 011.707.293L12 10.586 22.293.293a1 1 0 011.414 1.414L13.414 12l10.293 10.293a1 1 0 01-1.414 1.414L12 13.414 1.707 23.707a1 1 0 01-1.414-1.414L10.586 12z\\"></path></svg></span></button></div>"`;
+exports[`IconButton should render examples: IconButton 1`] = `
+"<div>
+  <div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
+    <h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5>
+    <div class=\\"MuiFormGroup-root MuiFormGroup-row\\" role=\\"radiogroup\\" aria-label=\\"radio\\"><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" name=\\"variantRadioSelector\\" type=\\"radio\\" value=\\"small\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"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\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">SMALL</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" name=\\"variantRadioSelector\\" type=\\"radio\\" value=\\"medium\\" checked=\\"\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"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\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">MEDIUM</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" name=\\"variantRadioSelector\\" type=\\"radio\\" value=\\"large\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"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\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">LARGE</span></label></div>
+  </div>
+  <div class=\\"MuiGrid-root MuiGrid-container\\">
+    <div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6\\">
+      <div class=\\"styles__Stack--s___22WMg\\">
+        <p class=\\"MuiTypography-root MuiTypography-body1\\">default</p>
+        <p><button class=\\"MuiButtonBase-root MuiIconButton-root medium\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiIconButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><g fill-rule=\\"evenodd\\"><path d=\\"M4.5 1H2.007C1.45 1 1 1.448 1 2v1h14V2c0-.556-.45-1-1.007-1H11.5L11 0H5l-.5 1zM2 4h12v9.991A2.01 2.01 0 0111.991 16H4.01A2.01 2.01 0 012 13.991V4z\\"></path><path d=\\"M4.5 1H2.007C1.45 1 1 1.448 1 2v1h14V2c0-.556-.45-1-1.007-1H11.5L11 0H5l-.5 1zM2 4h12v9.991A2.01 2.01 0 0111.991 16H4.01A2.01 2.01 0 012 13.991V4z\\"></path></g></svg></span></button><button class=\\"MuiButtonBase-root MuiIconButton-root medium MuiIconButton-colorPrimary\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiIconButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><g fill-rule=\\"evenodd\\"><path d=\\"M1 15h8c4.052 0 7-2.948 7-7s-2.948-7-7-7-7 2.948-7 7a1 1 0 102 0c0-2.948 2.052-5 5-5s5 2.052 5 5-2.052 5-5 5H1a1 1 0 000 2z\\"></path><path d=\\"M1.832 4.445a1 1 0 00-1.664 1.11l2 3a1 1 0 001.387.277l3-2a1 1 0 00-1.11-1.664L3.277 6.613 1.832 4.445z\\"></path></g></svg></span></button><button class=\\"MuiButtonBase-root MuiIconButton-root medium MuiIconButton-colorSecondary\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiIconButton-label\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M10.586 12L.293 1.707A1 1 0 011.707.293L12 10.586 22.293.293a1 1 0 011.414 1.414L13.414 12l10.293 10.293a1 1 0 01-1.414 1.414L12 13.414 1.707 23.707a1 1 0 01-1.414-1.414L10.586 12z\\"></path></svg></span></button></p>
+      </div>
+    </div>
+    <div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6\\">
+      <div class=\\"styles__Stack--s___22WMg\\">
+        <p class=\\"MuiTypography-root MuiTypography-body1\\">disabled</p>
+        <p><button class=\\"MuiButtonBase-root MuiIconButton-root medium Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiIconButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><g fill-rule=\\"evenodd\\"><path d=\\"M4.5 1H2.007C1.45 1 1 1.448 1 2v1h14V2c0-.556-.45-1-1.007-1H11.5L11 0H5l-.5 1zM2 4h12v9.991A2.01 2.01 0 0111.991 16H4.01A2.01 2.01 0 012 13.991V4z\\"></path><path d=\\"M4.5 1H2.007C1.45 1 1 1.448 1 2v1h14V2c0-.556-.45-1-1.007-1H11.5L11 0H5l-.5 1zM2 4h12v9.991A2.01 2.01 0 0111.991 16H4.01A2.01 2.01 0 012 13.991V4z\\"></path></g></svg></span></button><button class=\\"MuiButtonBase-root MuiIconButton-root medium MuiIconButton-colorPrimary Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiIconButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><g fill-rule=\\"evenodd\\"><path d=\\"M1 15h8c4.052 0 7-2.948 7-7s-2.948-7-7-7-7 2.948-7 7a1 1 0 102 0c0-2.948 2.052-5 5-5s5 2.052 5 5-2.052 5-5 5H1a1 1 0 000 2z\\"></path><path d=\\"M1.832 4.445a1 1 0 00-1.664 1.11l2 3a1 1 0 001.387.277l3-2a1 1 0 00-1.11-1.664L3.277 6.613 1.832 4.445z\\"></path></g></svg></span></button><button class=\\"MuiButtonBase-root MuiIconButton-root medium MuiIconButton-colorSecondary Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiIconButton-label\\"><svg viewBox=\\"0 0 24 24\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M10.586 12L.293 1.707A1 1 0 011.707.293L12 10.586 22.293.293a1 1 0 011.414 1.414L13.414 12l10.293 10.293a1 1 0 01-1.414 1.414L12 13.414 1.707 23.707a1 1 0 01-1.414-1.414L10.586 12z\\"></path></svg></span></button></p>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
 
 exports[`IconStack should render examples: IconStack 1`] = `
 "<div>
@@ -7433,7 +7454,7 @@ exports[`InfosCarrousel should render examples: InfosCarrousel 1`] = `
           </div>
         </div>
       </div>
-      <div class=\\"styles__InfosCarrousel-navigation___3s_hu\\"><button class=\\"MuiButtonBase-root MuiIconButton-root Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiIconButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M10.707 2.707a.999.999 0 10-1.414-1.414l-6 6a.999.999 0 000 1.414l6 6a.999.999 0 101.414-1.414L5.414 8l5.293-5.293z\\"></path></svg></span></button><span class=\\"styles__InfosCarrousel-separator___AvH5m\\"></span><button class=\\"MuiButtonBase-root MuiIconButton-root\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiIconButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M12.707 7.293l-6-6a.999.999 0 10-1.414 1.414L10.586 8l-5.293 5.293a.999.999 0 101.414 1.414l6-6a.999.999 0 000-1.414\\"></path></svg></span></button></div>
+      <div class=\\"styles__InfosCarrousel-navigation___3s_hu\\"><button class=\\"MuiButtonBase-root MuiIconButton-root medium Mui-disabled Mui-disabled\\" tabindex=\\"-1\\" type=\\"button\\" disabled=\\"\\"><span class=\\"MuiIconButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M10.707 2.707a.999.999 0 10-1.414-1.414l-6 6a.999.999 0 000 1.414l6 6a.999.999 0 101.414-1.414L5.414 8l5.293-5.293z\\"></path></svg></span></button><span class=\\"styles__InfosCarrousel-separator___AvH5m\\"></span><button class=\\"MuiButtonBase-root MuiIconButton-root medium\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiIconButton-label\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M12.707 7.293l-6-6a.999.999 0 10-1.414 1.414L10.586 8l-5.293 5.293a.999.999 0 101.414 1.414l6-6a.999.999 0 000-1.414\\"></path></svg></span></button></div>
     </div>
   </div>
 </div>"

package/react/index.js

@@ -105,3 +105,4 @@ export { default as FilePicker } from './FilePicker'
 export { default as Chips } from './Chips'
 export { default as PieChart } from './PieChart'
 export { default as DropdownText } from './DropdownText'
+export { default as CircleButton } from './CircleButton'

package/transpiled/react/CircleButton/helpers.js

@@ -0,0 +1,26 @@
+export var makeTypoColor = function makeTypoColor(_ref) {
+  var theme = _ref.theme,
+      active = _ref.active,
+      disabled = _ref.disabled;
+
+  if (disabled) {
+    return theme.palette.text.disabled;
+  }
+
+  if (active) {
+    return theme.palette.primary.main;
+  }
+
+  return theme.palette.text.primary;
+};
+export var makeButtonShadow = function makeButtonShadow(_ref2) {
+  var theme = _ref2.theme,
+      active = _ref2.active,
+      disabled = _ref2.disabled;
+
+  if (disabled || !active) {
+    return "inset 0 0 0 1px ".concat(theme.palette.border.main);
+  }
+
+  return "none";
+};

package/transpiled/react/CircleButton/index.js

@@ -0,0 +1,97 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "label", "variant", "disabled", "fullWidth", "children"];
+import React from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import Box from "cozy-ui/transpiled/react/Box";
+import IconButton from "cozy-ui/transpiled/react/IconButton";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import { makeTypoColor, makeButtonShadow } from "cozy-ui/transpiled/react/CircleButton/helpers";
+var useStyles = makeStyles(function (theme) {
+  return {
+    iconButton: {
+      margin: '0 auto',
+      boxShadow: function boxShadow(_ref) {
+        var active = _ref.active,
+            disabled = _ref.disabled;
+        return makeButtonShadow({
+          theme: theme,
+          active: active,
+          disabled: disabled
+        });
+      },
+      backgroundColor: function backgroundColor(_ref2) {
+        var active = _ref2.active;
+        return active ? theme.palette.primary.main : 'transparent';
+      },
+      color: function color(_ref3) {
+        var active = _ref3.active;
+        return active ? theme.palette.primary.contrastText : theme.palette.text.icon;
+      },
+      '&:hover': {
+        backgroundColor: function backgroundColor(_ref4) {
+          var active = _ref4.active;
+          return active ? theme.palette.primary.dark : theme.palette.action.hover;
+        }
+      }
+    },
+    typography: {
+      marginTop: '0.25rem',
+      color: function color(_ref5) {
+        var active = _ref5.active,
+            disabled = _ref5.disabled;
+        return makeTypoColor({
+          theme: theme,
+          active: active,
+          disabled: disabled
+        });
+      }
+    }
+  };
+});
+
+var CircleButton = function CircleButton(_ref6) {
+  var className = _ref6.className,
+      label = _ref6.label,
+      _ref6$variant = _ref6.variant,
+      variant = _ref6$variant === void 0 ? 'default' : _ref6$variant,
+      disabled = _ref6.disabled,
+      _ref6$fullWidth = _ref6.fullWidth,
+      fullWidth = _ref6$fullWidth === void 0 ? false : _ref6$fullWidth,
+      children = _ref6.children,
+      props = _objectWithoutProperties(_ref6, _excluded);
+
+  var styles = useStyles({
+    active: variant === 'active',
+    disabled: disabled
+  });
+  return /*#__PURE__*/React.createElement(Box, {
+    className: className,
+    display: "inline-flex",
+    flexDirection: "column",
+    flexGrow: fullWidth ? 1 : undefined,
+    minWidth: "64px",
+    flexBasis: "64px",
+    padding: "8px 0 4px 0"
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    className: styles.iconButton,
+    size: "large",
+    disabled: disabled
+  }, props), children), label && /*#__PURE__*/React.createElement(Typography, {
+    component: "div",
+    className: styles.typography,
+    variant: "caption",
+    align: "center",
+    noWrap: true
+  }, label));
+};
+
+CircleButton.propTypes = {
+  className: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  variant: PropTypes.oneOf(['default', 'active']),
+  disabled: PropTypes.bool,
+  fullWidth: PropTypes.bool
+};
+export default CircleButton;

package/transpiled/react/IconButton/index.js

@@ -1,2 +1,26 @@
-import IconButton from '@material-ui/core/IconButton';
-export default IconButton;
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["size", "className", "children"];
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import MuiIconButton from '@material-ui/core/IconButton';
+
+var IconButton = function IconButton(_ref, ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size,
+      className = _ref.className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(MuiIconButton, _extends({
+    ref: ref,
+    className: cx(className, size)
+  }, props), children);
+};
+
+IconButton.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium', 'large'])
+};
+export default /*#__PURE__*/forwardRef(IconButton);

package/transpiled/react/MuiCozyTheme/makeOverrides.js

@@ -606,6 +606,15 @@ var makeOverrides = function makeOverrides(theme) {
     MuiIconButton: {
       root: {
         color: theme.palette.text.secondary,
+        '&.small': {
+          padding: 3
+        },
+        '&.medium': {
+          padding: 12
+        },
+        '&.large': {
+          padding: 16
+        },
         '&.dialogIconButton': {
           backgroundColor: theme.palette.background.paper,
           '&:hover': {

package/transpiled/react/index.js

@@ -82,4 +82,5 @@ export { default as BottomSheet, BottomSheetItem } from './BottomSheet';
 export { default as FilePicker } from './FilePicker';
 export { default as Chips } from './Chips';
 export { default as PieChart } from './PieChart';
-export { default as DropdownText } from './DropdownText';
+export { default as DropdownText } from './DropdownText';
+export { default as CircleButton } from './CircleButton';