cozy-ui 66.1.0 → 66.2.2

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [66.2.2](https://github.com/cozy/cozy-ui/compare/v66.2.1...v66.2.2) (2022-05-09)
+
+
+### Bug Fixes
+
+* **IconButton:** Implementation of forwardRef ([a6405ba](https://github.com/cozy/cozy-ui/commit/a6405ba))
+
+## [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "66.1.0",
+  "version": "66.2.2",
   "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/index.jsx

@@ -1,15 +1,19 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
 import MuiIconButton from '@material-ui/core/IconButton'
 
-const IconButton = ({ size = 'medium', className, children, ...props }) => {
-  return (
-    <MuiIconButton className={cx(className, size)} {...props}>
-      {children}
-    </MuiIconButton>
-  )
-}
+const IconButton = forwardRef(
+  ({ size = 'medium', className, children, ...props }, ref) => {
+    return (
+      <MuiIconButton ref={ref} className={cx(className, size)} {...props}>
+        {children}
+      </MuiIconButton>
+    )
+  }
+)
+
+IconButton.displayName = 'IconButton'
 
 IconButton.propTypes = {
   className: PropTypes.string,

package/react/MuiCozyTheme/makeOverrides.js

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

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,12 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["size", "className", "children"];
-import React from 'react';
+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) {
+var IconButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       className = _ref.className,
@@ -14,10 +13,11 @@ var IconButton = function IconButton(_ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(MuiIconButton, _extends({
+    ref: ref,
     className: cx(className, size)
   }, props), children);
-};
-
+});
+IconButton.displayName = 'IconButton';
 IconButton.propTypes = {
   className: PropTypes.string,
   size: PropTypes.oneOf(['small', 'medium', 'large'])

package/transpiled/react/MuiCozyTheme/makeOverrides.js

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

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';