feat(Alert): Add new Alert and AlertTitle components

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

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",

react/Alert/Readme.md

@@ -0,0 +1,122 @@
+```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,
+  largeIcon: false,
+  noIcon: false,
+  square: false,
+  actionOne: false,
+  actionTwo: false,
+  close: false
+}]
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <Alert
+      color={variant.color ? "#EFA82D" : undefined}
+      block={variant.block}
+      square={variant.square}
+      icon={variant.noIcon ? false : variant.largeIcon ? <Icon icon={DeviceLaptopIcon} color="var(--errorColor)" size={32} /> : undefined}
+      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>
+      )}
+      <hr />
+      {colors.map(color =>
+        <div className="u-mb-1" key={color}>
+          <Alert
+            variant="filled"
+            severity={color}
+            block={variant.block}
+            action={
+              <Button variant="primary" size="small" color={makeButtonColor(color)} label="ACTION" />
+            }
+          >
+            {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>}
+            This is a {color} alert
+          </Alert>
+        </div>
+      )}
+      <hr />
+      {colors.map(color =>
+        <div className="u-mb-1" key={color}>
+          <Alert
+            variant="outlined"
+            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>
+```

react/Alert/index.jsx

@@ -0,0 +1,113 @@
+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 makeIcon = (icon, severity) => {
+  // used to remove icon
+  if (icon === false) {
+    return false
+  }
+
+  return (
+    icon ||
+    (['primary', 'secondary'].includes(severity) && <Icon icon={InfoIcon} />) ||
+    undefined
+  )
+}
+
+const useStyles = makeStyles({
+  message: {
+    maxWidth: ({ block, iconSize }) =>
+      block && `calc(100% - ${iconSize + 16}px)`
+  }
+})
+
+const Alert = forwardRef(
+  (
+    {
+      className,
+      icon,
+      severity,
+      block,
+      color,
+      square,
+      action,
+      variant,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const madeSeverity = ['primary', 'secondary'].includes(severity)
+      ? 'success'
+      : severity
+    const madeIcon = makeIcon(icon, severity)
+    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}-${variant}`,
+          { block },
+          { action: Boolean(action) }
+        )}
+        classes={styles}
+        variant={variant}
+        severity={madeSeverity}
+        iconMapping={defaultIconMapping}
+        icon={madeIcon}
+        action={action}
+        {...props}
+      >
+        {children}
+      </MuiAlert>
+    )
+  }
+)
+
+Alert.propTypes = {
+  className: PropTypes.string,
+  icon: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
+  severity: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'success',
+    'error',
+    'warning',
+    'info'
+  ]),
+  block: PropTypes.bool,
+  color: PropTypes.string,
+  square: PropTypes.bool,
+  variant: PropTypes.oneOf(['standard', 'outlined', 'filled'])
+}
+
+Alert.defaultProps = {
+  severity: 'primary',
+  block: false,
+  square: false,
+  variant: 'standard'
+}
+
+export default Alert

react/AlertTitle/Readme.md

@@ -0,0 +1 @@
+Re-export of @material-ui. See [the official API](https://v4.mui.com/api/alert-title/).

react/AlertTitle/index.jsx

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