cozy-ui 118.0.0 → 119.0.1

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

@@ -0,0 +1,188 @@
+import merge from 'lodash/merge'
+
+import { alpha, darken } from '../../../styles'
+import { makeLightNormalOverrides } from '../makeLightNormalOverrides'
+
+export const makeLightNormalTwakeOverrides = theme => {
+  const makeOverridesForTwakeTheme = theme => ({
+    MuiCheckbox: {
+      root: {
+        padding: 8
+      }
+    },
+    MuiButton: {
+      root: {
+        borderRadius: 100,
+        padding: '10px 24px',
+        '&.ghost': {
+          border: 0,
+          '&:hover': {
+            border: 0
+          }
+        }
+      },
+      sizeSmall: {
+        height: '2.25rem',
+        padding: '10px 16px',
+        '&$text': {
+          padding: '8px 16px'
+        }
+      },
+      sizeLarge: {
+        padding: '14px 32px'
+      },
+      text: {
+        padding: '10px 8px'
+      },
+      outlined: {
+        '&:not($disabled)': {
+          '&.ghost': {
+            backgroundColor: theme.palette.background.default,
+            '&:hover': {
+              backgroundColor: darken(theme.palette.background.default, 0.05),
+              '@media (hover: none)': {
+                backgroundColor: darken(theme.palette.background.default, 0.05)
+              }
+            }
+          },
+          '&.customColor': {
+            '&-primary': {
+              color: theme.palette.primary.main,
+              borderColor: theme.palette.primary.main,
+              '&:hover': {
+                backgroundColor: alpha(
+                  theme.palette.primary.main,
+                  theme.palette.action.hoverOpacity
+                )
+              },
+              '&.ghost': {
+                color: theme.palette.text.primary,
+                borderColor: theme.palette.background.default
+              }
+            }
+          }
+        }
+      }
+    },
+    MuiIconButton: {
+      root: {
+        '&.small': {
+          padding: 8
+        },
+        '&.xlarge': {
+          padding: 20
+        }
+      }
+    },
+    MuiTooltip: {
+      tooltip: {
+        backgroundColor: alpha(theme.palette.grey[800], 0.9),
+        borderRadius: '4px',
+        padding: '8px 12px'
+      }
+    },
+    MuiFab: {
+      root: {
+        borderRadius: 28,
+        width: 96,
+        height: 96
+      },
+      primary: {
+        color: theme.palette.primary.dark,
+        backgroundColor: theme.palette.primary.light,
+        '&:hover': {
+          backgroundColor: darken(theme.palette.primary.light, 0.05),
+          '@media (hover: none)': {
+            backgroundColor: theme.palette.primary.light
+          }
+        }
+      },
+      extended: {
+        borderRadius: 16,
+        '&$sizeSmall': {
+          borderRadius: 16,
+          height: 42,
+          minWidth: 42
+        },
+        '&$sizeMedium': {
+          borderRadius: 16
+        }
+      },
+      sizeSmall: {
+        borderRadius: 12
+      },
+      sizeMedium: {
+        borderRadius: 16,
+        width: 56,
+        height: 56
+      }
+    },
+    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,
+              height: 16
+            }
+          },
+          '&-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: {
+        backgroundColor: theme.palette.background.paper,
+        color: theme.palette.text.secondary
+      }
+    }
+  })
+
+  const twakeOverrides = merge(
+    makeLightNormalOverrides(theme),
+    makeOverridesForTwakeTheme(theme)
+  )
+
+  return twakeOverrides
+}

package/react/SearchBar/index.jsx

@@ -8,11 +8,13 @@ import ButtonBase from '../ButtonBase'
 import Icon from '../Icon'
 import { iconPropType } from '../Icon'
 import IconButton from '../IconButton'
+import CrossIcon from '../Icons/Cross'
 import CrossCircleIcon from '../Icons/CrossCircle'
 import MagnifierIcon from '../Icons/Magnifier'
 import InputBase from '../InputBase'
 import Paper from '../Paper'
 import Typography from '../Typography'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
 import { useI18n, useExtendI18n } from '../providers/I18n'
 import { makeStyles } from '../styles'
 
@@ -42,6 +44,9 @@ const useStyles = makeStyles(theme => ({
     borderStyle: 'solid',
     borderWidth: 1,
     borderColor: 'transparent',
+    backgroundColor: isTwakeTheme()
+      ? theme.palette.background.default
+      : theme.palette.background.paper,
     '&:hover': {
       '&:not($disabled):not($focused)': {
         '& $focusHighlight': {
@@ -51,7 +56,9 @@ const useStyles = makeStyles(theme => ({
     }
   },
   flat: {
-    backgroundColor: theme.palette.background.contrast
+    backgroundColor: isTwakeTheme()
+      ? theme.palette.background.default
+      : theme.palette.background.contrast
   },
   inputBase: {
     flex: 1,
@@ -214,7 +221,7 @@ const SearchBar = forwardRef(
         )}
         {spreadValue && !disabledClear && (
           <IconButton size="medium" onClick={handleClear}>
-            <Icon icon={CrossCircleIcon} />
+            <Icon icon={isTwakeTheme() ? CrossIcon : CrossCircleIcon} />
           </IconButton>
         )}
         <span className={cx(classes.commonHighlight, classes.focusHighlight)} />

package/react/ShortcutTile/index.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { IOCozyFile } from 'cozy-client/types/types'
 
 import styles from '../AppTile/styles.styl'
-import { nameToColor } from '../Avatar/helpers'
+import { nameToColor } from '../legacy/Avatar/helpers'
 import { TileIcon } from '../Tile'
 import Typography from '../Typography'
 import { makeStyles } from '../styles'

package/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap

@@ -243,7 +243,7 @@ exports[`SquareAppIcon component should render correctly an app in error state 1
             width="16"
           >
             <path
-              d="M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM8 9.75C7.30964 9.75 6.75 10.3096 6.75 11C6.75 11.6904 7.30964 12.25 8 12.25C8.69036 12.25 9.25 11.6904 9.25 11C9.25 10.3096 8.69036 9.75 8 9.75ZM8 4C7.48716 4 7.06449 4.38604 7.00673 4.88338L7 5V8C7 8.55228 7.44772 9 8 9C8.51284 9 8.93551 8.61396 8.99327 8.11662L9 8V5C9 4.44772 8.55228 4 8 4Z"
+              d="M8 0a8 8 0 110 16A8 8 0 018 0zm0 9.75a1.25 1.25 0 100 2.5 1.25 1.25 0 000-2.5zM8 4a1 1 0 00-.993.883L7 5v3a1 1 0 001.993.117L9 8V5a1 1 0 00-1-1z"
               fill-rule="evenodd"
             />
           </svg>

package/react/SquareAppIcon/index.jsx

@@ -7,7 +7,6 @@ import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 
 import styles from './styles.styl'
 import AppIcon from '../AppIcon'
-import { nameToColor } from '../Avatar/helpers'
 import Badge from '../Badge'
 import Icon from '../Icon'
 import IconCheckAnimated from '../Icons/IconCheckAnimated'
@@ -18,6 +17,7 @@ import iconWarning from '../Icons/WarningCircle'
 import InfosBadge from '../InfosBadge'
 import Spinner from '../Spinner'
 import Typography from '../Typography'
+import { nameToColor } from '../legacy/Avatar/helpers'
 import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
 import { alpha, makeStyles } from '../styles'
 

package/react/ToggleButton/index.js

@@ -0,0 +1,3 @@
+import ToggleButton from '@material-ui/lab/ToggleButton'
+
+export default ToggleButton

package/react/ToggleButtonGroup/Readme.md

@@ -0,0 +1,28 @@
+```jsx
+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'
+
+
+initialState = { alignment: 'left' }
+
+const handleAlignment = (ev, value) => setState({ alignment: value })
+
+;
+
+<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>
+```

package/react/ToggleButtonGroup/index.js

@@ -0,0 +1,3 @@
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'
+
+export default ToggleButtonGroup

package/react/Tooltip/Readme.md

@@ -5,10 +5,12 @@ Read the original [Tooltip component](https://v4.mui.com/api/tooltip/)
 documentation for more information.
 
 ```jsx
-import Typography from 'cozy-ui/transpiled/react/Typography';
-import Icon from 'cozy-ui/transpiled/react/Icon';
-import CarbonCopyIcon from 'cozy-ui/transpiled/react/Icons/CarbonCopy';
-import Tooltip from 'cozy-ui/transpiled/react/Tooltip';
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import CarbonCopyIcon from 'cozy-ui/transpiled/react/Icons/CarbonCopy'
+import Tooltip from 'cozy-ui/transpiled/react/Tooltip'
+
+;
 
 <Tooltip
   {...(isTesting() && { open: true } )}

package/react/Typography/Readme.md

@@ -15,6 +15,7 @@ const variants = [
   'h4',
   'h5',
   'button',
+  'overline',
   'subtitle1',
   'subtitle2',
   'body1',

package/react/deprecated/Chip/Readme.md

@@ -5,7 +5,7 @@ Chips represent complex entities in small blocks, such as a contact.
 ```jsx
 import Chip from 'cozy-ui/transpiled/react/deprecated/Chip';
 import Icon from 'cozy-ui/transpiled/react/Icon';
-import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar';
 import FileIcon from "cozy-ui/transpiled/react/Icons/File";
 const ContactChip = ({ contact }) => (
   <Chip style={{ paddingLeft: '0.25rem' }}>

package/react/helpers/isTwakeTheme.js

@@ -0,0 +1,12 @@
+import flag from 'cozy-flags'
+
+export const isTwakeTheme = () => {
+  if (process.env.NODE_ENV === 'test') {
+    return false
+  }
+
+  return (
+    flag('ui.theme-twake.enabled') ||
+    localStorage.getItem('ui-theme-name') === 'Twake'
+  )
+}

package/react/legacy/Avatar/Readme.md

@@ -0,0 +1,52 @@
+#### Available sizes: xsmall, small, medium (default), large, xlarge
+
+The size can also be specifically defined using a number of pixels.
+
+```jsx
+import cozyLogo from '../../../docs/cozy-logo_white_128.png'
+import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
+import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+
+import LinkIcon from "cozy-ui/transpiled/react/Icons/Link"
+import WarningIcon from "cozy-ui/transpiled/react/Icons/Warning"
+import palette from 'cozy-ui/transpiled/react/palette'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+const getStyle = size => ({
+  styleOverlap: {
+    marginLeft: size === 'xsmall' ? '-0.5rem' : '-1rem'
+  },
+  custom: {
+    color: 'black', backgroundColor: palette.seafoamGreen
+    }
+})
+
+const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 24]
+
+const initialVariants = [
+  { disabled: false, ghost: false, overlap: false },
+]
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <>
+      {sizes.map((size, idx) => (
+        <React.Fragment key={size}>
+          {idx === sizes.length - 1 && <hr />}
+          <div className="u-flex u-mb-half">
+            <Avatar size={size} style={variant.overlap ? getStyle(size).styleOverlap : null} disabled={variant.disabled} ghost={variant.ghost} />
+            <Avatar size={size} style={variant.overlap ? getStyle(size).styleOverlap : null} text="CD" disabled={variant.disabled} ghost={variant.ghost} />
+            <Avatar size={size} style={variant.overlap ? getStyle(size).styleOverlap : null} image={cozyLogo} disabled={variant.disabled} ghost={variant.ghost} />
+            <Avatar size={size} style={variant.overlap ? getStyle(size).styleOverlap : null} icon={LinkIcon} disabled={variant.disabled} ghost={variant.ghost} />
+            <Avatar size={size} style={variant.overlap ? {...getStyle(size).styleOverlap, ...getStyle().custom} : getStyle().custom} text="CD" disabled={variant.disabled} ghost={variant.ghost} />
+            <Avatar size={size} style={variant.overlap ? getStyle(size).styleOverlap : null} icon={<Icon icon={WarningIcon} />} disabled={variant.disabled} ghost={variant.ghost} />
+          </div>
+        </React.Fragment>
+      ))}
+    </>
+  )}
+</Variants>
+```

package/react/legacy/Avatar/helpers.js

@@ -0,0 +1,35 @@
+import { colorMapping } from '../../Avatar/helpers'
+import { isTwakeTheme } from '../../helpers/isTwakeTheme'
+import palette from '../../palette'
+
+const makeKey = (colors, name) =>
+  Array.from(name.toUpperCase())
+    .map(letter => letter.charCodeAt(0))
+    .reduce((sum, number) => sum + number, 0) % colors.length
+
+const colors = [
+  palette['azure'],
+  palette['melon'],
+  palette['blazeOrange'],
+  palette['pomegranate'],
+  palette['mango'],
+  palette['pumpkinOrange'],
+  palette['darkPeriwinkle'],
+  palette['purpley'],
+  palette['lightishPurple'],
+  palette['weirdGreen'],
+  palette['puertoRico'],
+  palette['emerald'],
+  palette['seafoamGreen'],
+  palette['lavender'],
+  palette['brightSun'],
+  palette['fuchsia']
+]
+
+const twakeColors = Object.values(colorMapping).filter(Boolean)
+
+export const nameToColor = (name = '') => {
+  const _colors = isTwakeTheme() ? twakeColors : colors
+  const key = makeKey(_colors, name)
+  return _colors[key]
+}

package/react/legacy/Avatar/index.jsx

@@ -0,0 +1,82 @@
+import cx from 'classnames'
+import assign from 'lodash/assign'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { nameToColor } from './helpers'
+import styles from './styles.styl'
+import { createSizeStyle } from '../../Circle'
+import Icon, { iconPropType } from '../../Icon'
+import PeopleIcon from '../../Icons/People'
+import { isTwakeTheme } from '../../helpers/isTwakeTheme'
+
+const createBgColorStyle = ({ text, textId }) =>
+  text
+    ? isTwakeTheme()
+      ? { background: `${nameToColor(textId || text)}` }
+      : { backgroundColor: `${nameToColor(textId || text)}` }
+    : {}
+
+export const Avatar = ({
+  text,
+  textId,
+  image,
+  size,
+  className,
+  style,
+  disabled,
+  ghost,
+  icon
+}) => {
+  const sizeStyle = createSizeStyle(size)
+  const bgColorStyle = createBgColorStyle({ text, textId })
+  const avatarStyle = assign(bgColorStyle, sizeStyle, style)
+  const IconToRender = Icon.isProperIcon(icon) ? <Icon icon={icon} /> : icon
+  return (
+    <div
+      data-testid="Avatar" // used by a test in cozy-contacts
+      className={cx(
+        styles['c-avatar'],
+        text ? styles['c-avatar--text'] : '',
+        image ? styles['c-avatar--image'] : '',
+        disabled ? styles['c-avatar--disabled'] : '',
+        ghost ? styles['c-avatar--ghost'] : '',
+        className
+      )}
+      style={avatarStyle}
+    >
+      {image && <img src={image} className={styles['c-avatar-image']} alt="" />}
+      {!image && text && (
+        <span className={styles['c-avatar-initials']}>{text}</span>
+      )}
+      {!image && !text && IconToRender}
+    </div>
+  )
+}
+
+Avatar.propTypes = {
+  text: PropTypes.string,
+  image: PropTypes.string,
+  size: PropTypes.oneOfType([
+    PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
+    PropTypes.number
+  ]),
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  icon: PropTypes.oneOfType([PropTypes.node, iconPropType]),
+  ghost: PropTypes.bool,
+  style: PropTypes.object
+}
+
+Avatar.defaultProps = {
+  text: '',
+  image: '',
+  size: 'medium',
+  className: '',
+  disabled: false,
+  icon: PeopleIcon,
+  ghost: false,
+  style: {}
+}
+
+export default Avatar

package/react/{Avatar → legacy/Avatar}/styles.styl

@@ -1,5 +1,5 @@
-@require '../../stylus/components/avatar'
-@require '../../stylus/components/circle'
+@require '../../../stylus/components/avatar'
+@require '../../../stylus/components/circle'
 
 .c-avatar
     @extend $circle
@@ -14,6 +14,7 @@
 
     &:not(.c-avatar--image)
         background-color var(--silver) !important // to override inline style props
+        background var(--silver) !important // to override inline style props
 
     & .c-avatar-image
         filter grayscale(1)
@@ -21,6 +22,7 @@
 
 .c-avatar--ghost
     background-color transparent !important // to override inline style props
+    background transparent !important // to override inline style props
     border 1px dashed var(--borderGhostColor)
     color var(--secondaryTextColor)
 

package/react/providers/CozyTheme/DumbCozyTheme.jsx

@@ -15,6 +15,7 @@ const DumbCozyTheme = ({
 }) => {
   const uiThemeType = localStorage.getItem('ui-theme-type') // use only for cozy-ui documentation and argos screenshots
   const uiThemeVariant = localStorage.getItem('ui-theme-variant') // use only for cozy-ui documentation and argos screenshots
+  const uiThemeName = localStorage.getItem('ui-theme-name') || 'Cozy'
 
   const deviceThemeType = useMediaQuery('(prefers-color-scheme: dark)')
     ? 'dark'
@@ -40,7 +41,7 @@ const DumbCozyTheme = ({
       <MuiCozyTheme type={selfThemeType} variant={selfThemeVariant}>
         <div
           className={cx(className, {
-            [`CozyTheme--${selfThemeType}-${selfThemeVariant}`]:
+            [`${uiThemeName}Theme--${selfThemeType}-${selfThemeVariant}`]:
               Boolean(selfThemeVariant),
             'u-dc': ignoreItself
           })}

package/react/providers/CozyTheme/Readme.md

@@ -13,7 +13,7 @@ import BarButton from 'cozy-ui/transpiled/react/BarButton'
 import Paper from 'cozy-ui/transpiled/react/Paper'
 import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
 import Typography from 'cozy-ui/transpiled/react/Typography'
-import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar'
 import Figure from 'cozy-ui/transpiled/react/Figure'
 
 const props = [{}, { disabled: true}, { busy: true }]

package/react/utils/color.js

@@ -1,4 +1,8 @@
-const getThemeNodeClassName = (type, variant) => `CozyTheme--${type}-${variant}`
+const getThemeNodeClassName = (type, variant) => {
+  const uiTypeName = localStorage.getItem('ui-theme-name') || 'Cozy'
+
+  return `${uiTypeName}Theme--${type}-${variant}`
+}
 
 const getNodeWithThemeCssVars = (type, variant) => {
   const className = getThemeNodeClassName(type, variant)

package/scripts/generate-svgr-icon-twake.sh

@@ -0,0 +1,29 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+streamEditor=$([[ $(uname -s) == "Linux" ]] && echo sed || echo gsed)
+
+createSvgr()
+{
+  svgFileFullPath=$1
+  svgFilename=`basename $svgFileFullPath`
+  jsFilename=`echo $svgFilename | $streamEditor -E 's/^([a-z])/\U\1/g; s/-([a-z])/\U\1/g; s/svg$/jsx/g'`
+  jsFileFullPath="react/Icons/${jsFilename}"
+
+  echo $svgFileFullPath
+
+  node_modules/.bin/svgr $svgFileFullPath \
+    --no-dimensions \
+    --template scripts/svgr-template-twake.js > $jsFileFullPath
+  node_modules/.bin/eslint --fix $jsFileFullPath
+}
+
+if [ -d "$1" ]; then
+  for i in "$1"/*.svg
+  do
+    createSvgr $i
+  done
+else
+  createSvgr $1
+fi

package/scripts/svgr-template-twake.js

@@ -0,0 +1,47 @@
+function defaultTemplate(
+  { template },
+  opts,
+  { imports, interfaces, componentName, props, jsx, exports }
+) {
+  const plugins = ['jsx']
+  if (opts.typescript) {
+    plugins.push('typescript')
+  }
+  const typeScriptTpl = template.smart({ plugins, preserveComments: true })
+  const twakeFileName =
+    opts.state.filePath.replace(/^.*[\\/]/, '').split('.svg')[0] + '_twake'
+  const capTwakeFileName =
+    twakeFileName.charAt(0).toUpperCase() + twakeFileName.slice(1)
+  const TwakeComponentName = componentName.name + 'Twake'
+
+  const header = `// Automatically created, please run \`scripts/generate-svgr-icon.sh ${opts.state.filePath}\` to regenerate
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+import ${TwakeComponentName} from './${capTwakeFileName}'`
+
+  for (let imp of imports) {
+    if (imp.source.value !== 'react') {
+      continue
+    }
+    for (let specifier of imp.specifiers) {
+      if (
+        specifier.type === 'ImportNamespaceSpecifier' &&
+        specifier.local.name === 'React'
+      ) {
+        specifier.type = 'ImportDefaultSpecifier'
+      }
+    }
+  }
+
+  return typeScriptTpl.ast`${header}
+
+${imports}
+${interfaces}
+function ${componentName}(${props}) {
+  if (isTwakeTheme()) return ${TwakeComponentName}(${props})
+
+  return ${jsx};
+}
+${exports}
+  `
+}
+module.exports = defaultTemplate