From 1f74af90dcc52e20ce7b0383169077dc42ef247c Mon Sep 17 00:00:00 2001
From: JF-Cozy <julien.ficheux@cozycloud.cc>
Date: Fri, 24 Jun 2022 16:00:17 +0200
Subject: [PATCH] feat(Alert): Add new Alert and AlertTitle components

---
 docs/styleguide.config.js           |   2 +
 package.json                        |   2 +
 react/Alert/Readme.md               |  89 ++++++++++++++++++++++++
 react/Alert/index.jsx               | 103 ++++++++++++++++++++++++++++
 react/AlertTitle/Readme.md          |   1 +
 react/AlertTitle/index.jsx          |   3 +
 react/MuiCozyTheme/makeOverrides.js |  68 +++++++++++++++++-
 react/examples.spec.jsx             |   1 +
 react/index.js                      |   2 +
 yarn.lock                           |  20 ++++++
 10 files changed, 290 insertions(+), 1 deletion(-)
 create mode 100644 react/Alert/Readme.md
 create mode 100644 react/Alert/index.jsx
 create mode 100644 react/AlertTitle/Readme.md
 create mode 100644 react/AlertTitle/index.jsx

diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js
index eab63e42db..70f09deee0 100644
--- a/docs/styleguide.config.js
+++ b/docs/styleguide.config.js
@@ -136,6 +136,8 @@ module.exports = {
     {
       name: 'Special',
       components: () => [
+        '../react/Alert/index.jsx',
+        '../react/AlertTitle/index.jsx',
         '../react/Alerter/index.jsx',
         '../react/AppIcon/index.jsx',
         '../react/AppTile/index.jsx',
diff --git a/package.json b/package.json
index 5f2a07149b..7342e451fa 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "@babel/helper-regex": "7.10.5",
     "@cozy/codemods": "^1.9.0",
     "@material-ui/core": "4.12.3",
+    "@material-ui/lab": "4.0.0-alpha.61",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "7.0.18",
     "@semantic-release/npm": "9.0.1",
@@ -173,6 +174,7 @@
   },
   "peerDependencies": {
     "@material-ui/core": ">=4.12",
+    "@material-ui/lab": ">=4.0.0-alpha.61",
     "cozy-client": ">=28.1.0",
     "cozy-device-helper": "^2.0.0",
     "cozy-doctypes": "^1.69.0",
diff --git a/react/Alert/Readme.md b/react/Alert/Readme.md
new file mode 100644
index 0000000000..2fdd7b5ab0
--- /dev/null
+++ b/react/Alert/Readme.md
@@ -0,0 +1,89 @@
+```jsx
+import Alert from 'cozy-ui/transpiled/react/Alert'
+import AlertTitle from 'cozy-ui/transpiled/react/AlertTitle'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import Variants from 'cozy-ui/docs/components/Variants'
+import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
+import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
+
+const initialVariants = [{
+  longText: false,
+  title: false,
+  block: false,
+  color: false,
+  icon: false,
+  square: false,
+  actionOne: false,
+  actionTwo: false,
+  close: false
+}]
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <Alert
+      color={variant.color && "#EFA82D"}
+      block={variant.block}
+      square={variant.square}
+      icon={variant.icon && <Icon icon={DeviceLaptopIcon} color="var(--errorColor)" size={32} />}
+      action={(variant.actionOne || variant.actionTwo) ?
+        <>
+          {variant.actionOne &&
+            <Button variant="text" size="small" label="Download" startIcon={<Icon icon={DownloadIcon} />} />
+          }
+          {variant.actionTwo &&
+            <Button variant="text" size="small" label="No, thanks!" />
+          }
+        </>
+        : undefined
+      }
+      onClose={variant.close ? () => {} : undefined}
+    >
+      {variant.title && <AlertTitle>This is the title</AlertTitle>}
+      {variant.longText
+        ? content.ada.short
+        : "Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times."
+      }
+    </Alert>
+  )}
+</Variants>
+```
+
+### Colors
+
+```jsx
+import Alert from 'cozy-ui/transpiled/react/Alert'
+import AlertTitle from 'cozy-ui/transpiled/react/AlertTitle'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+const colors = ['primary', 'secondary','success', 'error', 'warning', 'info']
+const initialVariants = [{ title: true, block: false }]
+
+const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? undefined : color
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <>
+      {colors.map(color =>
+        <div className="u-mb-1" key={color}>
+          <Alert
+            severity={color}
+            block={variant.block}
+            action={
+              <Button variant="text" size="small" color={makeButtonColor(color)} label="ACTION" />
+            }
+          >
+            {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>}
+            This is a {color} alert
+          </Alert>
+        </div>
+      )}
+    </>
+  )}
+</Variants>
+```
diff --git a/react/Alert/index.jsx b/react/Alert/index.jsx
new file mode 100644
index 0000000000..3215f28b93
--- /dev/null
+++ b/react/Alert/index.jsx
@@ -0,0 +1,103 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+import MuiAlert from '@material-ui/lab/Alert'
+import { makeStyles } from '@material-ui/core/styles'
+
+import Icon from '../Icon'
+import CheckCircleIcon from '../Icons/CheckCircle'
+import WarningIcon from '../Icons/Warning'
+import WarningCircleIcon from '../Icons/WarningCircle'
+import InfoIcon from '../Icons/Info'
+
+const DEFAULT_ICON_SIZE = 16
+
+const defaultIconMapping = {
+  success: <Icon icon={CheckCircleIcon} />,
+  warning: <Icon icon={WarningIcon} />,
+  error: <Icon icon={WarningCircleIcon} />,
+  info: <Icon icon={InfoIcon} />
+}
+
+const useStyles = makeStyles({
+  message: {
+    maxWidth: ({ block, iconSize }) =>
+      block && `calc(100% - ${iconSize + 16}px)`
+  }
+})
+
+const Alert = forwardRef(
+  (
+    {
+      className,
+      icon,
+      severity,
+      block,
+      color,
+      square,
+      action,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const madeSeverity = ['primary', 'secondary'].includes(severity)
+      ? 'success'
+      : severity
+
+    const madeIcon =
+      icon ||
+      (['primary', 'secondary'].includes(severity) && (
+        <Icon icon={InfoIcon} />
+      )) ||
+      undefined
+
+    const iconSize = icon?.props?.size || DEFAULT_ICON_SIZE
+    const styles = useStyles({ iconSize, block })
+
+    return (
+      <MuiAlert
+        ref={ref}
+        style={{ backgroundColor: color, borderRadius: square && 0 }}
+        className={cx(
+          className,
+          `cozyAlert-${severity}`,
+          { block },
+          { action: Boolean(action) }
+        )}
+        classes={styles}
+        severity={madeSeverity}
+        iconMapping={defaultIconMapping}
+        icon={madeIcon}
+        action={action}
+        {...props}
+      >
+        {children}
+      </MuiAlert>
+    )
+  }
+)
+
+Alert.propTypes = {
+  className: PropTypes.string,
+  icon: PropTypes.element,
+  severity: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'success',
+    'error',
+    'warning',
+    'info'
+  ]),
+  block: PropTypes.bool,
+  color: PropTypes.string,
+  square: PropTypes.bool
+}
+
+Alert.defaultProps = {
+  severity: 'primary',
+  block: false,
+  square: false
+}
+
+export default Alert
diff --git a/react/AlertTitle/Readme.md b/react/AlertTitle/Readme.md
new file mode 100644
index 0000000000..574b99839a
--- /dev/null
+++ b/react/AlertTitle/Readme.md
@@ -0,0 +1 @@
+Re-export of @material-ui. See [the official API](https://v4.mui.com/api/alert-title/).
diff --git a/react/AlertTitle/index.jsx b/react/AlertTitle/index.jsx
new file mode 100644
index 0000000000..7063c91dc6
--- /dev/null
+++ b/react/AlertTitle/index.jsx
@@ -0,0 +1,3 @@
+import MuiAlertTitle from '@material-ui/lab/AlertTitle'
+
+export default MuiAlertTitle
diff --git a/react/MuiCozyTheme/makeOverrides.js b/react/MuiCozyTheme/makeOverrides.js
index daf31bdcef..de9071bc1a 100644
--- a/react/MuiCozyTheme/makeOverrides.js
+++ b/react/MuiCozyTheme/makeOverrides.js
@@ -1,4 +1,4 @@
-import { alpha } from '@material-ui/core/styles'
+import { alpha, lighten, darken } from '@material-ui/core/styles'
 
 const SWITCH_BAR_WIDTH = 25
 
@@ -9,6 +9,32 @@ export const makeThemeOverrides = theme => {
   return createOverrides(theme)
 }
 
+const makeAlertColor = (theme, color) => {
+  const themeColorByColor = {
+    primary: theme.palette[color].main,
+    secondary: theme.palette.text.primary
+  }
+
+  // same approach as Mui, see https://github.com/mui/material-ui/blob/v4.x/packages/material-ui-lab/src/Alert/Alert.js#L28
+  return {
+    color: darken(themeColorByColor[color], 0.6),
+    backgroundColor: lighten(themeColorByColor[color], 0.9),
+    '& $icon': {
+      color: themeColorByColor[color]
+    }
+  }
+}
+
+const makeAlertInvertedColor = (theme, color) => {
+  return {
+    color: theme.palette.primary.main,
+    backgroundColor: theme.palette.background.default,
+    '& $icon': {
+      color: theme.palette[color].main
+    }
+  }
+}
+
 const makeChipStyleByColor = (theme, color) => ({
   color: theme.palette.text[color] || theme.palette[color].main,
   borderColor:
@@ -822,6 +848,32 @@ const makeOverrides = theme => ({
         '&-info': makeChipStyleByColor(theme, 'info')
       }
     }
+  },
+  MuiAlert: {
+    root: {
+      padding: '9px 16px',
+      '&.action': {
+        '&:not(.block)': {
+          padding: '15px 16px'
+        }
+      },
+      '&.cozyAlert': {
+        '&-primary': makeAlertColor(theme, 'primary'),
+        '&-secondary': makeAlertColor(theme, 'secondary')
+      },
+      '& $icon': {
+        paddingTop: '9px'
+      },
+      '&.block': {
+        flexWrap: 'wrap',
+        '& $action': {
+          display: 'block',
+          width: '100%',
+          paddingLeft: 0,
+          textAlign: 'right'
+        }
+      }
+    }
   }
 })
 
@@ -883,6 +935,20 @@ const makeInvertedOverrides = invertedTheme => {
           color: invertedTheme.palette.error.main
         }
       }
+    },
+    MuiAlert: {
+      ...makeOverrides(invertedTheme).MuiAlert,
+      root: {
+        ...makeOverrides(invertedTheme).MuiAlert.root,
+        '&.cozyAlert': {
+          '&-primary': makeAlertInvertedColor(invertedTheme, 'primary'),
+          '&-secondary': makeAlertInvertedColor(invertedTheme, 'primary'),
+          '&-success': makeAlertInvertedColor(invertedTheme, 'success'),
+          '&-error': makeAlertInvertedColor(invertedTheme, 'error'),
+          '&-warning': makeAlertInvertedColor(invertedTheme, 'warning'),
+          '&-info': makeAlertInvertedColor(invertedTheme, 'info')
+        }
+      }
     }
   }
 
diff --git a/react/examples.spec.jsx b/react/examples.spec.jsx
index 7fbcb2d09a..c4842ead3a 100644
--- a/react/examples.spec.jsx
+++ b/react/examples.spec.jsx
@@ -24,6 +24,7 @@ const testComponent = (ComponentName, options) => {
 }
 
 // Please keep the list sorted
+testComponent('Alert')
 testComponent('AppTitle')
 testComponent('Avatar')
 testComponent('Badge')
diff --git a/react/index.js b/react/index.js
index 09f123b630..aef76422b9 100644
--- a/react/index.js
+++ b/react/index.js
@@ -106,3 +106,5 @@ export { default as Chips } from './Chips'
 export { default as PieChart } from './PieChart'
 export { default as DropdownText } from './DropdownText'
 export { default as CircleButton } from './CircleButton'
+export { default as Alert } from './Alert'
+export { default as AlertTitle } from './AlertTitle'
diff --git a/yarn.lock b/yarn.lock
index 3daa5956cf..3ec61cd6eb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1855,6 +1855,17 @@
     react-is "^16.8.0 || ^17.0.0"
     react-transition-group "^4.4.0"
 
+"@material-ui/lab@4.0.0-alpha.61":
+  version "4.0.0-alpha.61"
+  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.61.tgz#9bf8eb389c0c26c15e40933cc114d4ad85e3d978"
+  integrity sha512-rSzm+XKiNUjKegj8bzt5+pygZeckNLOr+IjykH8sYdVk7dE9y2ZuUSofiMV2bJk3qU+JHwexmw+q0RyNZB9ugg==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.11.3"
+    clsx "^1.0.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
 "@material-ui/styles@^4.11.4":
   version "4.11.4"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d"
@@ -1901,6 +1912,15 @@
     prop-types "^15.7.2"
     react-is "^16.8.0 || ^17.0.0"
 
+"@material-ui/utils@^4.11.3":
+  version "4.11.3"
+  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.3.tgz#232bd86c4ea81dab714f21edad70b7fdf0253942"
+  integrity sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0 || ^17.0.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"