cozy-ui 97.0.0 → 97.2.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [97.2.0](https://github.com/cozy/cozy-ui/compare/v97.1.0...v97.2.0) (2023-11-29)
+
+
+### Bug Fixes
+
+* **PointerAlert:** Reserve space for arrow ([3d7e4b4](https://github.com/cozy/cozy-ui/commit/3d7e4b4))
+
+
+### Features
+
+* **PointerAlert:** Make arrow position customisable ([2ed2cac](https://github.com/cozy/cozy-ui/commit/2ed2cac))
+
+# [97.1.0](https://github.com/cozy/cozy-ui/compare/v97.0.0...v97.1.0) (2023-11-28)
+
+
+### Bug Fixes
+
+* **Alert:** Adjust colors ([29a3b80](https://github.com/cozy/cozy-ui/commit/29a3b80))
+
+
+### Features
+
+* **MuiPalette:** Add `theme.palette.background.contrastOpacity` ([a09926b](https://github.com/cozy/cozy-ui/commit/a09926b))
+* **PointerAlert:** Add this new component based on Alert ([9d73f68](https://github.com/cozy/cozy-ui/commit/9d73f68))
+
 # [97.0.0](https://github.com/cozy/cozy-ui/compare/v96.2.0...v97.0.0) (2023-11-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "97.0.0",
+  "version": "97.2.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Alert/Readme.md

@@ -17,6 +17,7 @@ const initialVariants = [{
   square: false,
   actionOne: false,
   actionTwo: false,
+  filled: false,
   close: false
 }]
 
@@ -26,6 +27,7 @@ const initialVariants = [{
   {variant => (
     <Alert
       color={variant.color ? "#EFA82D" : undefined}
+      variant={variant.filled ? 'filled' : undefined}
       block={variant.block}
       square={variant.square}
       icon={variant.noIcon ? false : variant.largeIcon ? <Icon icon={DeviceLaptopIcon} color="var(--errorColor)" size={32} /> : undefined}
@@ -81,7 +83,7 @@ const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? unde
             )}
             onClose={variant.close ? () => {} : undefined}
           >
-            {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>}
+            {variant.title && <AlertTitle>{color}</AlertTitle>}
             This is a {color} alert
           </Alert>
         </div>
@@ -97,11 +99,16 @@ const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? unde
             severity={color}
             block={variant.block}
             action={variant.close ? undefined : (
-              <Button variant="primary" size="small" color={makeButtonColor(color)} label="ACTION" />
+              <Button
+                variant='text'
+                style={{ color: `var(--${color}ContrastTextColor)` }}
+                size="small"
+                label="ACTION"
+              />
             )}
             onClose={variant.close ? () => {} : undefined}
           >
-            {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>}
+            {variant.title && <AlertTitle>{color}</AlertTitle>}
             This is a {color} alert
           </Alert>
         </div>
@@ -121,7 +128,7 @@ const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? unde
             )}
             onClose={variant.close ? () => {} : undefined}
           >
-            {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>}
+            {variant.title && <AlertTitle>{color}</AlertTitle>}
             This is a {color} alert
           </Alert>
         </div>

package/react/Alert/index.jsx

@@ -57,6 +57,7 @@ const Alert = forwardRef(
     },
     ref
   ) => {
+    // as primary and secondary doesn't exist on Mui Alert, we force success severity for those
     const madeSeverity = ['primary', 'secondary'].includes(severity)
       ? 'success'
       : severity
@@ -70,7 +71,7 @@ const Alert = forwardRef(
         style={{ backgroundColor: color, borderRadius: square && 0 }}
         className={cx(
           className,
-          `cozyAlert-${severity}-${variant}`,
+          `cozyStyles-${severity}-${variant}`,
           { block },
           { action: Boolean(action) }
         )}
@@ -90,7 +91,7 @@ const Alert = forwardRef(
 
 Alert.displayName = 'Alert'
 
-Alert.propTypes = {
+export const AlertPropTypes = {
   className: PropTypes.string,
   icon: PropTypes.oneOfType([PropTypes.element, PropTypes.bool]),
   severity: PropTypes.oneOf([
@@ -107,11 +108,15 @@ Alert.propTypes = {
   variant: PropTypes.oneOf(['standard', 'outlined', 'filled'])
 }
 
-Alert.defaultProps = {
+export const AlertDefaultProps = {
   severity: 'primary',
   block: false,
   square: false,
   variant: 'standard'
 }
 
+Alert.propTypes = AlertPropTypes
+
+Alert.defaultProps = AlertDefaultProps
+
 export default Alert

package/react/MuiCozyTheme/helpers.js

@@ -1,18 +1,25 @@
-import { alpha, lighten, darken } from '../styles'
+import { alpha } from '../styles'
 
-export const makeAlertColor = (theme, color) => {
-  const themeColorByColor = {
-    primary: theme.palette[color].main,
-    secondary: theme.palette.text.primary
-  }
+export const makeAlertBackgroundColor = ({ theme, severity }) => ({
+  standard: alpha(
+    theme.palette[severity].main,
+    theme.palette.background.contrastOpacity
+  ),
+  outlined: theme.palette[severity].main,
+  filled: theme.palette[severity].main
+})
 
+export const makeAlertColor = (theme, severity) => {
   // same approach as Mui, see https://github.com/mui/material-ui/blob/v4.x/packages/material-ui-lab/src/Alert/Alert.js#L28
   return {
     '&-standard': {
-      color: darken(themeColorByColor[color], 0.6),
-      backgroundColor: lighten(themeColorByColor[color], 0.9),
+      color: theme.palette.text.primary,
+      backgroundColor: makeAlertBackgroundColor({ theme, severity }).standard,
       '& $icon': {
-        color: themeColorByColor[color]
+        color:
+          severity === 'secondary'
+            ? theme.palette.text.primary
+            : theme.palette[severity].main
       },
       '& $action': {
         '& button[title="Close"]': {
@@ -21,45 +28,24 @@ export const makeAlertColor = (theme, color) => {
       }
     },
     '&-outlined': {
-      color: darken(themeColorByColor[color], 0.6),
-      border: `1px solid ${themeColorByColor[color]}`,
+      color: theme.palette.text.primary,
+      border: `1px solid ${
+        makeAlertBackgroundColor({ theme, severity }).outlined
+      }`,
       '& $icon': {
-        color: themeColorByColor[color]
+        color:
+          severity === 'secondary'
+            ? theme.palette.text.primary
+            : theme.palette[severity].main
       }
     },
     '&-filled': {
-      backgroundColor:
-        color === 'secondary'
-          ? theme.palette.grey[600]
-          : themeColorByColor[color]
-    }
-  }
-}
-
-export const makeAlertInvertedColor = (theme, color) => {
-  return {
-    '&-standard': {
-      color: theme.palette.primary.main,
-      backgroundColor: theme.palette.background.default,
-      '& $icon': {
-        color: theme.palette[color].main
-      }
-    },
-    '&-outlined': {
-      color: theme.palette.primary.main,
-      border: `1px solid ${theme.palette.primary.main}`,
-      '& $icon': {
-        color: theme.palette[color].main
-      }
-    },
-    '&-filled': {
-      color: theme.palette[color].contrastText,
-      backgroundColor:
-        color === 'secondary'
-          ? theme.palette.grey[200]
-          : theme.palette[color].main,
-      '& $icon': {
-        color: theme.palette[color].contrastText
+      color: theme.palette[severity].contrastText,
+      backgroundColor: makeAlertBackgroundColor({ theme, severity }).filled,
+      '& $action': {
+        '& button[title="Close"]': {
+          color: theme.palette[severity].contrastText
+        }
       }
     }
   }

package/react/MuiCozyTheme/makeInvertedOverrides.js

@@ -1,6 +1,5 @@
 import merge from 'lodash/merge'
 
-import { makeAlertInvertedColor } from './helpers'
 import { makeOverrides } from './makeOverrides'
 
 export const makeInvertedOverrides = invertedTheme => {
@@ -28,18 +27,6 @@ export const makeInvertedOverrides = invertedTheme => {
         backgroundColor: 'rgba(255,255,255,0.2)'
       }
     },
-    MuiAlert: {
-      root: {
-        '&.cozyAlert': {
-          '&-primary': makeAlertInvertedColor(invertedTheme, 'primary'),
-          '&-secondary': makeAlertInvertedColor(invertedTheme, 'secondary'),
-          '&-success': makeAlertInvertedColor(invertedTheme, 'success'),
-          '&-error': makeAlertInvertedColor(invertedTheme, 'error'),
-          '&-warning': makeAlertInvertedColor(invertedTheme, 'warning'),
-          '&-info': makeAlertInvertedColor(invertedTheme, 'info')
-        }
-      }
-    },
     MuiSnackbarContent: {
       root: {
         backgroundColor: invertedTheme.palette.grey[200]

package/react/MuiCozyTheme/makeOverrides.js

@@ -760,9 +760,13 @@ export const makeOverrides = theme => ({
   MuiAlert: {
     root: {
       padding: '8px 16px',
-      '&.cozyAlert': {
+      '&.cozyStyles': {
         '&-primary': makeAlertColor(theme, 'primary'),
-        '&-secondary': makeAlertColor(theme, 'secondary')
+        '&-secondary': makeAlertColor(theme, 'secondary'),
+        '&-success': makeAlertColor(theme, 'success'),
+        '&-error': makeAlertColor(theme, 'error'),
+        '&-warning': makeAlertColor(theme, 'warning'),
+        '&-info': makeAlertColor(theme, 'info')
       },
       '& $icon': {
         paddingTop: '9px'

package/react/MuiCozyTheme/makePalette.js

@@ -124,6 +124,7 @@ export const makePalette = type => {
       default: getCssValue('defaultBackgroundColor'),
       paper: getCssValue('paperBackgroundColor'),
       contrast: getCssValue('contrastBackgroundColor'),
+      contrastOpacity: type === 'dark' ? 0.24 : 0.12,
       selected: '#F5FAFF' // deprecated, should be removed. Use action.selected instead
     }
   }

package/react/PointerAlert/Readme.md

@@ -0,0 +1,164 @@
+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 TextField from 'cozy-ui/transpiled/react/TextField'
+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']
+
+const initialState = {
+  position: '50%'
+}
+const handleChangePosition = el => {
+  setState({ position: el.target.value })
+}
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <>
+      <div>
+        <TextField
+          className="u-mb-1-half"
+          type="string"
+          margin="dense"
+          label="position"
+          variant="outlined"
+          helperText="Arrow position"
+          onChange={handleChangePosition}
+          value={state.position}
+        />
+      </div>
+      {directions.map(direction =>
+        <div className="u-mb-half" key={direction}>
+            <PointerAlert
+              direction={direction}
+              position={state.position}
+              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-half" 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-half" 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-half" 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>
+  )}
+</>
+```

package/react/PointerAlert/index.jsx

@@ -0,0 +1,114 @@
+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 => ({
+  topArrow: {
+    // 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: ({ position }) => position,
+    marginLeft: '-0.75rem'
+  },
+  bottomArrow: {
+    // 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: ({ position }) => position,
+    marginLeft: '-0.75rem'
+  },
+  leftArrow: {
+    // 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: ({ position }) => position,
+    marginTop: '-0.75rem'
+  },
+  rightArrow: {
+    // 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: ({ position }) => position,
+    marginTop: '-0.75rem'
+  },
+  topAlert: {
+    marginTop: '0.75rem'
+  },
+  bottomAlert: {
+    marginBottom: '0.75rem'
+  },
+  leftAlert: {
+    marginLeft: '0.75rem'
+  },
+  rightAlert: {
+    marginRight: '0.75rem'
+  }
+}))
+
+const PointerAlert = forwardRef(
+  (
+    { className, variant, severity, children, direction, position, ...props },
+    ref
+  ) => {
+    const styles = useStyles({ variant, severity, position })
+
+    return (
+      <Alert
+        ref={ref}
+        className={cx(className, styles[`${direction}Alert`], 'u-pos-relative')}
+        variant={variant}
+        severity={severity}
+        {...props}
+      >
+        {children}
+        <span className={styles[`${direction}Arrow`]}></span>
+      </Alert>
+    )
+  }
+)
+
+PointerAlert.displayName = 'PointerAlert'
+
+PointerAlert.propTypes = {
+  ...AlertPropTypes,
+  /** Direction of the arrow.*/
+  direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  /** Position of the arrow. Can be any length or percentage value like "100px" or "30%".
+   * If you want to position the arrow on the edge, you need to pay attention to the arrow width.
+   * For example, "calc(0% + 0.75rem)" will position the arrow at the starting edge. */
+  position: PropTypes.string
+}
+
+PointerAlert.defaultProps = {
+  ...AlertDefaultProps,
+  direction: 'bottom',
+  position: '50%'
+}
+
+export default PointerAlert