cozy-ui 70.2.2 → 70.3.0

package/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,71 @@ 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 {
+    '&-standard': {
+      color: darken(themeColorByColor[color], 0.6),
+      backgroundColor: lighten(themeColorByColor[color], 0.9),
+      '& $icon': {
+        color: themeColorByColor[color]
+      },
+      '& $action': {
+        '& button[title="Close"]': {
+          color: theme.palette.text.secondary
+        }
+      }
+    },
+    '&-outlined': {
+      color: darken(themeColorByColor[color], 0.6),
+      border: `1px solid ${themeColorByColor[color]}`,
+      '& $icon': {
+        color: themeColorByColor[color]
+      }
+    },
+    '&-filled': {
+      backgroundColor:
+        color === 'secondary'
+          ? theme.palette.grey[600]
+          : themeColorByColor[color]
+    }
+  }
+}
+
+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
+      }
+    }
+  }
+}
+
 const makeChipStyleByColor = (theme, color) => ({
   color: theme.palette.text[color] || theme.palette[color].main,
   borderColor:
@@ -822,6 +887,47 @@ const makeOverrides = theme => ({
         '&-info': makeChipStyleByColor(theme, 'info')
       }
     }
+  },
+  MuiAlert: {
+    root: {
+      padding: '8px 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'
+        }
+      }
+    },
+    message: {
+      display: 'flex',
+      alignItems: 'center',
+      flexWrap: 'wrap'
+    },
+    action: {
+      marginRight: '-6px'
+    }
+  },
+  MuiAlertTitle: {
+    root: {
+      width: '100%',
+      fontWeight: 'bold'
+    }
+  },
+  MuiSnackbarContent: {
+    root: {
+      padding: '4px 12px',
+      backgroundColor: theme.palette.grey[600]
+    }
   }
 })
 
@@ -883,6 +989,27 @@ 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, 'secondary'),
+          '&-success': makeAlertInvertedColor(invertedTheme, 'success'),
+          '&-error': makeAlertInvertedColor(invertedTheme, 'error'),
+          '&-warning': makeAlertInvertedColor(invertedTheme, 'warning'),
+          '&-info': makeAlertInvertedColor(invertedTheme, 'info')
+        }
+      }
+    },
+    MuiSnackbarContent: {
+      ...makeOverrides(invertedTheme).MuiSnackbarContent,
+      root: {
+        ...makeOverrides(invertedTheme).MuiSnackbarContent.root,
+        backgroundColor: invertedTheme.palette.grey[200]
+      }
     }
   }
 

package/react/Snackbar/Readme.md

@@ -1 +1,81 @@
-Re-export of @material-ui. See [the official API](https://v4.mui.com/api/snackbar/).
+```jsx
+import Snackbar from 'cozy-ui/transpiled/react/Snackbar'
+import Alert from 'cozy-ui/transpiled/react/Alert'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import CrossIcon from 'cozy-ui/transpiled/react/Icons/Cross'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import InfoIcon from 'cozy-ui/transpiled/react/Icons/Info'
+
+initialState = { open: false }
+
+const handleToggle = () => {setState(state => ({ open: !state.open }))}
+
+;
+
+<>
+  <Button
+    variant="ghost"
+    size="small"
+    label="Open snackbar"
+    onClick={handleToggle}
+  />
+  <Snackbar
+    open={state.open}
+    message="This is a simple snackbar."
+    action={
+      <>
+        <Button variant="text" color="error" size="small" label="UNDO" onClick={handleToggle} />
+        <IconButton aria-label="close" color="inherit" onClick={handleToggle}>
+          <Icon icon={CrossIcon} size={14} />
+        </IconButton>
+      </>
+    }
+    onClose={handleToggle}
+  />
+</>
+```
+
+### With `Alert` inside the `Snackbar`
+
+```jsx
+import Snackbar from 'cozy-ui/transpiled/react/Snackbar'
+import Alert from 'cozy-ui/transpiled/react/Alert'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+initialState = { open: isTesting() }
+
+const handleToggle = () => {setState(state => ({ open: !state.open }))}
+
+const colors = ['primary', 'secondary', 'success', 'error', 'warning', 'info']
+const initialVariants = [{ primary: true, secondary: true, success: false, error: false, warning: false, info: false }]
+
+;
+
+<>
+  <Variants initialVariants={initialVariants} radio>
+    {variant => (
+      <>
+        <Snackbar open={state.open} onClose={handleToggle}>
+          <Alert
+            variant="filled"
+            elevation={6}
+            severity={Object.keys(variant).find(key => variant[key])}
+            onClose={handleToggle}
+          >
+            This is a {Object.keys(variant).find(key => variant[key])} message!
+          </Alert>
+        </Snackbar>
+      </>
+    )}
+  </Variants>
+  <Button
+    variant="ghost"
+    size="small"
+    label="Open snackbar"
+    onClick={handleToggle}
+  />
+</>
+```

package/react/Snackbar/index.js

@@ -1,3 +1,21 @@
+import React, { forwardRef } from 'react'
 import MuiSnackbar from '@material-ui/core/Snackbar'
 
-export default MuiSnackbar
+const Snackbar = forwardRef(({ children, ...props }, ref) => {
+  return (
+    <MuiSnackbar ref={ref} {...props}>
+      {children}
+    </MuiSnackbar>
+  )
+})
+
+Snackbar.displayName = 'Snackbar'
+
+Snackbar.defaultProps = {
+  anchorOrigin: {
+    vertical: 'top',
+    horizontal: 'center'
+  }
+}
+
+export default Snackbar