feat(PointerAlert): Add this new component based on Alert

Basically an Alert with a pointing arrow

docs/styleguide.config.js

@@ -97,6 +97,7 @@ module.exports = {
         '../react/Paper',
         '../react/PasswordField',
         '../react/PieChart',
+        '../react/PointerAlert',
         '../react/Progress',
         '../react/ProgressionBanner',
         '../react/RadioGroup',

react/PointerAlert/Readme.md

@@ -0,0 +1,143 @@
+Displays a Alert with an Arrow pointing to a direction (top, right, bottom, left). It is essentially based on Alert so it inherits its props and defaultProps.
+
+### Basic usage
+
+```bash
+import PointerAlert from 'cozy-ui/transpiled/react/PointerAlert'
+
+<PointerAlert direction="bottom" severity="primary">
+  Your PointerAlert content
+</PointerAlert>
+```
+
+### Demo
+
+```jsx
+import PointerAlert from 'cozy-ui/transpiled/react/PointerAlert'
+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: true,
+  color: false,
+  largeIcon: false,
+  noIcon: false,
+  square: false,
+  actionOne: true,
+  actionTwo: false,
+  close: false
+}]
+
+const directions = ['top', 'bottom', 'left', 'right']
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <>
+      {directions.map(direction =>
+        <div className="u-mb-1" key={direction}>
+            <PointerAlert
+              direction={direction}
+              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."
+              }
+            </PointerAlert>
+        </div>
+      )}
+    </>
+  )}
+</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 Typography from 'cozy-ui/transpiled/react/Typography'
+
+const colors = ['primary', 'secondary','success', 'error', 'warning', 'info']
+
+const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? undefined : color
+
+;
+
+<>
+  {colors.map(color =>
+    <div className="u-mb-1" key={color}>
+      <PointerAlert
+        severity={color}
+        action={<Button variant="text" size="small" color={makeButtonColor(color)} label="ACTION" />}
+      >
+        <AlertTitle>{color}</AlertTitle>
+        This is a {color} alert
+      </PointerAlert>
+    </div>
+  )}
+
+  <hr />
+  <Typography variant="h4" paragraph>Filled variant</Typography>
+
+  {colors.map(color =>
+    <div className="u-mb-1" key={color}>
+      <PointerAlert
+        variant="filled"
+        severity={color}
+        action={
+          <Button
+            variant='text'
+            style={{ color: `var(--${color}ContrastTextColor)` }}
+            size="small"
+            label="ACTION"
+          />}
+      >
+        <AlertTitle>{color}</AlertTitle>
+        This is a {color} alert
+      </PointerAlert>
+    </div>
+  )}
+
+  <hr />
+  <Typography variant="h4" paragraph>Outlined variant</Typography>
+
+  {colors.map(color =>
+    <div className="u-mb-1" key={color}>
+      <PointerAlert
+        variant="outlined"
+        severity={color}
+        action={<Button variant="text" size="small" color={makeButtonColor(color)} label="ACTION" />}
+      >
+        <AlertTitle>{color.toUpperCase()}</AlertTitle>
+        This is a {color} alert
+      </PointerAlert>
+    </div>
+  )}
+</>
+```

react/PointerAlert/index.jsx

@@ -0,0 +1,93 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+
+import { makeStyles } from '../styles'
+import { makeAlertBackgroundColor } from '../MuiCozyTheme/helpers'
+import { AlertPropTypes, AlertDefaultProps } from '../Alert'
+
+import Alert from '../Alert'
+
+const useStyles = makeStyles(theme => ({
+  top: {
+    // create the arrow
+    borderLeft: '0.75rem solid transparent',
+    borderRight: '0.75rem solid transparent',
+    borderBottom: ({ variant, severity }) =>
+      `0.75rem solid ${makeAlertBackgroundColor({ theme, severity })[variant]}`,
+    // position the arrow
+    position: 'absolute',
+    top: '-0.75rem',
+    left: '50%',
+    marginLeft: '-0.75rem'
+  },
+  bottom: {
+    // create the arrow
+    borderLeft: '0.75rem solid transparent',
+    borderRight: '0.75rem solid transparent',
+    borderTop: ({ variant, severity }) =>
+      `0.75rem solid ${makeAlertBackgroundColor({ theme, severity })[variant]}`,
+    // position the arrow
+    position: 'absolute',
+    bottom: '-0.75rem',
+    left: '50%',
+    marginLeft: '-0.75rem'
+  },
+  left: {
+    // create the arrow
+    borderTop: '0.75rem solid transparent',
+    borderBottom: '0.75rem solid transparent',
+    borderRight: ({ variant, severity }) =>
+      `0.75rem solid ${makeAlertBackgroundColor({ theme, severity })[variant]}`,
+    // position the arrow
+    position: 'absolute',
+    left: '-0.75rem',
+    top: '50%',
+    marginTop: '-0.75rem'
+  },
+  right: {
+    // create the arrow
+    borderTop: '0.75rem solid transparent',
+    borderBottom: '0.75rem solid transparent',
+    borderLeft: ({ variant, severity }) =>
+      `0.75rem solid ${makeAlertBackgroundColor({ theme, severity })[variant]}`,
+    // position the arrow
+    position: 'absolute',
+    right: '-0.75rem',
+    top: '50%',
+    marginTop: '-0.75rem'
+  }
+}))
+
+const PointerAlert = forwardRef(
+  ({ className, severity, children, variant, direction, ...props }, ref) => {
+    const styles = useStyles({ variant, severity })
+
+    return (
+      <Alert
+        ref={ref}
+        className={cx(className, 'u-pos-relative')}
+        variant={variant}
+        severity={severity}
+        {...props}
+      >
+        {children}
+        <span className={styles[direction]}></span>
+      </Alert>
+    )
+  }
+)
+
+PointerAlert.displayName = 'PointerAlert'
+
+PointerAlert.propTypes = {
+  ...AlertPropTypes,
+  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
+}
+
+PointerAlert.defaultProps = {
+  ...AlertDefaultProps,
+  direction: 'bottom'
+}
+
+export default PointerAlert

react/index.js

@@ -113,6 +113,7 @@ export { default as DropdownText } from './DropdownText'
 export { default as CircleButton } from './CircleButton'
 export { default as Alert } from './Alert'
 export { default as AlertTitle } from './AlertTitle'
+export { default as PointerAlert } from './PointerAlert'
 export { default as Tabs } from './Tabs'
 export { default as Tab } from './Tab'
 export { default as CircularChart } from './CircularChart'