cozy-ui 70.2.2 → 70.3.0

package/.bundlemonrc

@@ -12,8 +12,7 @@
   ],
   "groups": [
     {
-        "path": "transpiled/react/**",
-        "maxPercentIncrease": 0.5,
+        "path": "transpiled/react/**"
     },
 ],
   "reportOutput": ["github"]

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# [70.3.0](https://github.com/cozy/cozy-ui/compare/v70.2.4...v70.3.0) (2022-07-27)
+
+
+### Features
+
+* **Alert:** Add new Alert and AlertTitle components ([0e23359](https://github.com/cozy/cozy-ui/commit/0e23359))
+* **MUI:** Add material-ui/lab dep ([8fb878b](https://github.com/cozy/cozy-ui/commit/8fb878b))
+* **Snackbar:** Modify default behavior of Snackbar and add Alert expl ([20b89e4](https://github.com/cozy/cozy-ui/commit/20b89e4))
+
+## [70.2.4](https://github.com/cozy/cozy-ui/compare/v70.2.3...v70.2.4) (2022-07-26)
+
+
+### Bug Fixes
+
+* **BottomSheet:** Backdrop click behavior ([7fdb297](https://github.com/cozy/cozy-ui/commit/7fdb297))
+
+## [70.2.3](https://github.com/cozy/cozy-ui/compare/v70.2.2...v70.2.3) (2022-07-26)
+
+
+### Bug Fixes
+
+* **BottomSheet:** Remove bouncerSafer when clicking in backdrop ([93233dd](https://github.com/cozy/cozy-ui/commit/93233dd))
+* **CozyDialogs:** Close and Back button z-index ([a943399](https://github.com/cozy/cozy-ui/commit/a943399))
+
 ## [70.2.2](https://github.com/cozy/cozy-ui/compare/v70.2.1...v70.2.2) (2022-07-26)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "70.2.2",
+  "version": "70.3.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -148,6 +148,7 @@
   "dependencies": {
     "@babel/runtime": "^7.3.4",
     "@material-ui/core": "4.12.3",
+    "@material-ui/lab": "^4.0.0-alpha.61",
     "@popperjs/core": "^2.4.4",
     "bundlemon": "^1.3.2",
     "chart.js": "3.7.1",

package/react/Alert/Readme.md

@@ -0,0 +1,132 @@
+```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 Typography from 'cozy-ui/transpiled/react/Typography'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+const colors = ['primary', 'secondary','success', 'error', 'warning', 'info']
+const initialVariants = [{ title: true, block: false, close: 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={variant.close ? undefined : (
+              <Button variant="text" size="small" color={makeButtonColor(color)} label="ACTION" />
+            )}
+            onClose={variant.close ? () => {} : undefined}
+          >
+            {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>}
+            This is a {color} alert
+          </Alert>
+        </div>
+      )}
+
+      <hr />
+      <Typography variant="h4" paragraph>Filled variant</Typography>
+
+      {colors.map(color =>
+        <div className="u-mb-1" key={color}>
+          <Alert
+            variant="filled"
+            severity={color}
+            block={variant.block}
+            action={variant.close ? undefined : (
+              <Button variant="primary" size="small" color={makeButtonColor(color)} label="ACTION" />
+            )}
+            onClose={variant.close ? () => {} : undefined}
+          >
+            {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>}
+            This is a {color} alert
+          </Alert>
+        </div>
+      )}
+
+      <hr />
+      <Typography variant="h4" paragraph>Outlined variant</Typography>
+
+      {colors.map(color =>
+        <div className="u-mb-1" key={color}>
+          <Alert
+            variant="outlined"
+            severity={color}
+            block={variant.block}
+            action={variant.close ? undefined : (
+              <Button variant="text" size="small" color={makeButtonColor(color)} label="ACTION" />
+            )}
+            onClose={variant.close ? () => {} : undefined}
+          >
+            {variant.title && <AlertTitle>{color.toUpperCase()}</AlertTitle>}
+            This is a {color} alert
+          </Alert>
+        </div>
+      )}
+    </>
+  )}
+</Variants>
+```

package/react/Alert/index.jsx

@@ -0,0 +1,115 @@
+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.displayName = 'Alert'
+
+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

package/react/AlertTitle/Readme.md

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

package/react/AlertTitle/index.jsx

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

package/react/BottomSheet/BackdropOrFragment.jsx

@@ -2,10 +2,14 @@ import React, { Fragment } from 'react'
 
 import Backdrop from '../Backdrop'
 
-const BackdropOrFragment = ({ showBackdrop, children }) => {
+const BackdropOrFragment = ({ showBackdrop, onClick, children }) => {
   const Comp = showBackdrop ? Backdrop : Fragment
   const props = showBackdrop
-    ? { style: { zIndex: 'var(--zIndex-overlay)' }, open: showBackdrop }
+    ? {
+        style: { zIndex: 'var(--zIndex-overlay)' },
+        open: showBackdrop,
+        onClick
+      }
     : undefined
 
   return <Comp {...props}>{children}</Comp>

package/react/BottomSheet/BottomSheet.jsx

@@ -8,7 +8,6 @@ import { getFlagshipMetadata } from 'cozy-device-helper'
 
 import Stack from '../Stack'
 import Paper from '../Paper'
-import ClickAwayListener from '../ClickAwayListener'
 import BackdropOrFragment from './BackdropOrFragment'
 import {
   computeMaxHeight,
@@ -16,10 +15,10 @@ import {
   computeMinHeight,
   makeOverridenChildren,
   setTopPosition,
-  setBottomPosition
+  setBottomPosition,
+  minimizeAndClose
 } from './helpers'
-
-const ANIMATION_DURATION = 250
+import { ANIMATION_DURATION } from './constants'
 
 const createStyles = ({ squared, hasToolbarProps }) => ({
   root: {
@@ -53,7 +52,8 @@ const createStyles = ({ squared, hasToolbarProps }) => ({
     position: 'fixed',
     bottom: 0,
     left: 0,
-    backgroundColor: 'var(--paperBackgroundColor)'
+    backgroundColor: 'var(--paperBackgroundColor)',
+    zIndex: 'var(--zIndex-overlay)'
   },
   flagshipImmersive: {
     backgroundColor: 'var(--paperBackgroundColor)',
@@ -125,13 +125,6 @@ const BottomSheet = ({
     onClose && onClose()
   }, [onClose])
 
-  const handleMinimizeAndClose = () => {
-    if (backdrop) {
-      setCurrentIndex(0)
-      setTimeout(handleClose, ANIMATION_DURATION)
-    }
-  }
-
   const handleOnIndexChange = snapIndex => {
     const maxHeightSnapIndex = peekHeights.length - 1
 
@@ -212,56 +205,62 @@ const BottomSheet = ({
       {getFlagshipMetadata().immersive && (
         <span style={styles.flagshipImmersive} />
       )}
-      <BackdropOrFragment showBackdrop={showBackdrop}>
-        <MuiBottomSheet
-          peekHeights={peekHeights}
-          defaultHeight={initPos}
-          backdrop={false}
-          fullHeight={hasToolbarProps ? false : true}
-          currentIndex={currentIndex}
-          onIndexChange={handleOnIndexChange}
-          styles={{ root: styles.root }}
-          threshold={0}
-          // springConfig doc : https://docs.pmnd.rs/react-spring/common/configs
-          springConfig={{
-            tension: defaultBottomSheetSpringConfig.tension,
-            friction: defaultBottomSheetSpringConfig.friction,
-            clamp: defaultBottomSheetSpringConfig.clamp
-          }}
-          disabledClosing={!onClose}
-          hidden={isHidden}
-          snapPointSeekerMode="next"
-        >
-          <ClickAwayListener onClickAway={handleMinimizeAndClose}>
-            <span>
-              <div ref={innerContentRef}>
-                <Paper
-                  data-testid="bottomSheet-header"
-                  className="u-w-100 u-h-2-half u-pos-relative u-flex u-flex-items-center u-flex-justify-center"
-                  ref={headerRef}
-                  elevation={0}
-                  square
-                >
-                  <div style={styles.indicator} />
-                </Paper>
-                <Stack
-                  style={styles.stack}
-                  className="u-flex u-flex-column u-ov-hidden"
-                  spacing="s"
-                >
-                  {overriddenChildren}
-                </Stack>
-              </div>
-              <div style={{ height: backdrop ? 0 : bottomSpacerHeight }} />
-            </span>
-          </ClickAwayListener>
-        </MuiBottomSheet>
-        {!isBottomPosition && (
-          <Fade in timeout={ANIMATION_DURATION}>
-            <div style={styles.bounceSafer} />
-          </Fade>
-        )}
-      </BackdropOrFragment>
+      <BackdropOrFragment
+        showBackdrop={showBackdrop}
+        onClick={() =>
+          minimizeAndClose({
+            backdrop,
+            setCurrentIndex,
+            setIsTopPosition,
+            setIsBottomPosition,
+            handleClose
+          })
+        }
+      />
+      <MuiBottomSheet
+        peekHeights={peekHeights}
+        defaultHeight={initPos}
+        backdrop={false}
+        fullHeight={hasToolbarProps ? false : true}
+        currentIndex={currentIndex}
+        onIndexChange={handleOnIndexChange}
+        styles={{ root: styles.root }}
+        threshold={0}
+        // springConfig doc : https://docs.pmnd.rs/react-spring/common/configs
+        springConfig={{
+          tension: defaultBottomSheetSpringConfig.tension,
+          friction: defaultBottomSheetSpringConfig.friction,
+          clamp: defaultBottomSheetSpringConfig.clamp
+        }}
+        disabledClosing={!onClose}
+        hidden={isHidden}
+        snapPointSeekerMode="next"
+      >
+        <div ref={innerContentRef}>
+          <Paper
+            data-testid="bottomSheet-header"
+            className="u-w-100 u-h-2-half u-pos-relative u-flex u-flex-items-center u-flex-justify-center"
+            ref={headerRef}
+            elevation={0}
+            square
+          >
+            <div style={styles.indicator} />
+          </Paper>
+          <Stack
+            style={styles.stack}
+            className="u-flex u-flex-column u-ov-hidden"
+            spacing="s"
+          >
+            {overriddenChildren}
+          </Stack>
+        </div>
+        <div style={{ height: backdrop ? 0 : bottomSpacerHeight }} />
+      </MuiBottomSheet>
+      {!isBottomPosition && (
+        <Fade in timeout={ANIMATION_DURATION}>
+          <div style={styles.bounceSafer} />
+        </Fade>
+      )}
     </>
   )
 }

package/react/BottomSheet/constants.js

@@ -0,0 +1 @@
+export const ANIMATION_DURATION = 250

package/react/BottomSheet/helpers.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import { getFlagshipMetadata } from 'cozy-device-helper'
 
+import { ANIMATION_DURATION } from './constants'
+
 export const computeMaxHeight = toolbarProps => {
   const { ref, height } = toolbarProps
   let computedToolbarHeight = 1
@@ -94,3 +96,18 @@ export const setBottomPosition = ({
     setIsBottomPosition(false)
   }
 }
+
+export const minimizeAndClose = ({
+  backdrop,
+  setCurrentIndex,
+  setIsTopPosition,
+  setIsBottomPosition,
+  handleClose
+}) => {
+  if (backdrop) {
+    setCurrentIndex(0)
+    setIsTopPosition(false)
+    setIsBottomPosition(true)
+    setTimeout(handleClose, ANIMATION_DURATION)
+  }
+}

package/react/BottomSheet/helpers.spec.js

@@ -3,7 +3,8 @@ import {
   computeMediumHeight,
   computeMinHeight,
   setTopPosition,
-  setBottomPosition
+  setBottomPosition,
+  minimizeAndClose
 } from './helpers'
 
 jest.mock('cozy-device-helper', () => ({
@@ -233,3 +234,51 @@ describe('setBottomPosition', () => {
     })
   })
 })
+
+describe('minimizeAndClose', () => {
+  jest.useFakeTimers()
+
+  it('should not trigger function if no backdrop', () => {
+    const setCurrentIndex = jest.fn()
+    const setIsTopPosition = jest.fn()
+    const setIsBottomPosition = jest.fn()
+    const handleClose = jest.fn()
+
+    minimizeAndClose({
+      backdrop: false,
+      setCurrentIndex,
+      setIsTopPosition,
+      setIsBottomPosition,
+      handleClose
+    })
+
+    jest.runAllTimers()
+
+    expect(setCurrentIndex).not.toHaveBeenCalled()
+    expect(setIsTopPosition).not.toHaveBeenCalled()
+    expect(setIsBottomPosition).not.toHaveBeenCalled()
+    expect(handleClose).not.toHaveBeenCalled()
+  })
+
+  it('should trigger every function if backdrop is true', () => {
+    const setCurrentIndex = jest.fn()
+    const setIsTopPosition = jest.fn()
+    const setIsBottomPosition = jest.fn()
+    const handleClose = jest.fn()
+
+    minimizeAndClose({
+      backdrop: true,
+      setCurrentIndex,
+      setIsTopPosition,
+      setIsBottomPosition,
+      handleClose
+    })
+
+    jest.runAllTimers()
+
+    expect(setCurrentIndex).toHaveBeenCalledWith(0)
+    expect(setIsTopPosition).toHaveBeenCalledWith(false)
+    expect(setIsBottomPosition).toHaveBeenCalledWith(true)
+    expect(handleClose).toHaveBeenCalled()
+  })
+})

package/react/CozyDialogs/styles.styl

@@ -4,7 +4,7 @@
     position absolute
     top 1.15rem
     right 1.15rem
-    z-index var(--zIndex-modal) //needed for an iOS bug https://github.com/cozy/cozy-ui/pull/1790
+    z-index 1
     transform translateY(var(--flagship-top-height))
     +small-screen()
         top 0.25rem
@@ -14,7 +14,7 @@
     position absolute
     top 1.15rem
     left 1.15rem
-    z-index var(--zIndex-modal) //needed for an iOS bug https://github.com/cozy/cozy-ui/pull/1790
+    z-index 1
     +small-screen()
         top 0.25rem
         left 0.25rem