cozy-ui 93.2.0 → 93.4.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [93.4.0](https://github.com/cozy/cozy-ui/compare/v93.3.0...v93.4.0) (2023-09-28)
+
+
+### Features
+
+* Add Alert provider ([ebccf42](https://github.com/cozy/cozy-ui/commit/ebccf42))
+
+# [93.3.0](https://github.com/cozy/cozy-ui/compare/v93.2.0...v93.3.0) (2023-09-28)
+
+
+### Features
+
+* **Icon:** Add LabelOutlined ([b0efd5a](https://github.com/cozy/cozy-ui/commit/b0efd5a))
+
 # [93.2.0](https://github.com/cozy/cozy-ui/compare/v93.1.1...v93.2.0) (2023-09-22)
 
 

package/assets/icons/ui/label-outlined.svg

@@ -0,0 +1 @@
+<svg width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.002 4.5H2v8h8.002l4-4-4-4Zm0-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8.002a2 2 0 0 0 1.414-.586l4-4a2 2 0 0 0 0-2.828l-4-4a2 2 0 0 0-1.414-.586Z"/></svg>

package/package.json

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

package/react/Icon/Readme.md

@@ -153,6 +153,7 @@ import Image from 'cozy-ui/transpiled/react/Icons/Image'
 import Info from 'cozy-ui/transpiled/react/Icons/Info'
 import InfoOutlined from 'cozy-ui/transpiled/react/Icons/InfoOutlined'
 import Key from 'cozy-ui/transpiled/react/Icons/Key'
+import LabelOutlined from 'cozy-ui/transpiled/react/Icons/LabelOutlined'
 import Laptop from 'cozy-ui/transpiled/react/Icons/Laptop'
 import Left from 'cozy-ui/transpiled/react/Icons/Left'
 import Lightbulb from 'cozy-ui/transpiled/react/Icons/Lightbulb'
@@ -391,6 +392,7 @@ const icons = [
   Info,
   InfoOutlined,
   Key,
+  LabelOutlined,
   Laptop,
   Left,
   Lightbulb,
@@ -883,7 +885,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
-const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','circle-filled','clock','clock-outline','cloud-happy','cloud','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','moped','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','refresh','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','select-all','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','stats','subway', 'swap', 'sync-cozy','sync','tag','target','team','telephone','to-the-cloud','top','train','tram','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle','work']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','circle-filled','clock','clock-outline','cloud-happy','cloud','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','key','label-outlined','laptop','left','lightbulb','link-out','link','list','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','moped','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','refresh','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','select-all','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','stats','subway', 'swap', 'sync-cozy','sync','tag','target','team','telephone','to-the-cloud','top','train','tram','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle','work']
 ;
 <div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
   <Sprite />

package/react/Icon/icons-sprite.js

@@ -426,7 +426,7 @@ animation: checkmark 0.5s ease-in-out 0.16s backwards
     <path fill-rule="evenodd" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-1A7 7 0 1 0 8 1a7 7 0 0 0 0 14zM7 4c0-.552.444-1 1-1 .552 0 1 .444 1 1 0 .552-.444 1-1 1-.552 0-1-.444-1-1zm1.001 2C8.553 6 9 6.444 9 7v4h1v2H7.999A.997.997 0 0 1 7 12V8H6V6h2.001z"/>
 </symbol><symbol id="info" viewBox="0 0 16 16"><use fill-rule="evenodd" xlink:href="#info"/></symbol><symbol id="key" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M9 9.584V10H7v2H5v2H3v2H0v-3l6.297-6.297A5 5 0 1 1 9 9.584zM11 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
-</symbol><symbol id="laptop" viewBox="0 0 16 16">
+</symbol><symbol id="label-outlined" viewBox="0 0 17 17"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.002 4.5H2v8h8.002l4-4-4-4Zm0-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8.002a2 2 0 0 0 1.414-.586l4-4a2 2 0 0 0 0-2.828l-4-4a2 2 0 0 0-1.414-.586Z"/></symbol><symbol id="laptop" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M3 4v5h10V4H3zm11.5 7h-13a.5.5 0 0 1-.5-.5V4c0-1.103.896-2 2-2h10c1.102 0 2 .897 2 2v6.5a.5.5 0 0 1-.5.5zm-4 1h5a.5.5 0 0 1 .5.5c0 .827-.674 1.5-1.5 1.5h-13C.673 14 0 13.327 0 12.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v.5h4v-.5a.5.5 0 0 1 .5-.5z"/>
 </symbol><symbol id="left" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="M10.70725,2.70725 C11.09825,2.31625 11.09825,1.68425 10.70725,1.29325 C10.31625,0.90225 9.68425,0.90225 9.29325,1.29325 L3.29325,7.29325 C2.90225,7.68425 2.90225,8.31625 3.29325,8.70725 L9.29325,14.70725 C9.68425,15.09825 10.31625,15.09825 10.70725,14.70725 C11.09825,14.31625 11.09825,13.68425 10.70725,13.29325 L5.41425,8.00025 L10.70725,2.70725 Z"/>

package/react/Icons/LabelOutlined.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/label-outlined.svg` to regenerate;
+import React from 'react'
+
+function SvgLabelOutlined(props) {
+  return (
+    <svg viewBox="0 0 17 17" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.002 4.5H2v8h8.002l4-4-4-4zm0-2H2a2 2 0 00-2 2v8a2 2 0 002 2h8.002a2 2 0 001.414-.586l4-4a2 2 0 000-2.828l-4-4a2 2 0 00-1.414-.586z"
+      />
+    </svg>
+  )
+}
+
+export default SvgLabelOutlined

package/react/Snackbar/Readme.md

@@ -55,7 +55,7 @@ initialState = { open: isTesting() }
 
 const handleToggle = () => {setState(state => ({ open: !state.open }))}
 
-const initialVariants = [{ primary: true, secondary: true, success: false, error: false, warning: false, info: false }]
+const initialVariants = [{ primary: true, secondary: false, success: false, error: false, warning: false, info: false }]
 
 ;
 

package/react/index.js

@@ -131,3 +131,4 @@ export { default as TimelineDot } from './TimelineDot'
 export { default as TimelineItem } from './TimelineItem'
 export { default as TimelineOppositeContent } from './TimelineOppositeContent'
 export { default as TimelineSeparator } from './TimelineSeparator'
+export { default as AlertProvider, useAlert } from './Alert'

package/react/providers/Alert/Readme.md

@@ -0,0 +1,28 @@
+```jsx
+import Variants from 'cozy-ui/docs/components/Variants'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
+import AlertProvider, { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+
+const initialVariants = [{ primary: true, secondary: false, success: false, error: false, warning: false, info: false }]
+
+const Component = ({ variant }) => {
+  const { showAlert } = useAlert()
+
+  return <Button label="show alert" onClick={() => showAlert('Alert message', variant)}/>
+}
+
+;
+
+<BreakpointsProvider>
+  <AlertProvider>
+    <Variants initialVariants={initialVariants} radio>
+      {variant => (
+        <>
+          <Component variant={Object.keys(variant).find(key => variant[key])} />
+        </>
+      )}
+    </Variants>
+  </AlertProvider>
+</BreakpointsProvider>
+```

package/react/providers/Alert/index.jsx

@@ -0,0 +1,51 @@
+import React, { createContext, useState, useContext, useMemo } from 'react'
+
+import Snackbar from '../../Snackbar'
+import Alert from '../../Alert'
+
+export const AlertContext = createContext()
+
+export const useAlert = () => {
+  const context = useContext(AlertContext)
+
+  if (!context) {
+    throw new Error('useAlert must be used within a AlertProvider')
+  }
+  return context
+}
+
+const defaultState = { message: '', severity: 'primary', open: false }
+const handleClose = (state, setState) => () => {
+  return setState({ ...state, open: false })
+}
+
+const AlertProvider = ({ children }) => {
+  const [state, setState] = useState(defaultState)
+
+  const value = useMemo(
+    () => ({
+      showAlert: (message, severity) => {
+        setState({ message, severity, open: true })
+      }
+    }),
+    []
+  )
+
+  return (
+    <AlertContext.Provider value={value}>
+      {children}
+      <Snackbar open={state.open} onClose={handleClose(state, setState)}>
+        <Alert
+          variant="filled"
+          elevation={6}
+          severity={state.severity}
+          onClose={handleClose(state, setState)}
+        >
+          {state.message}
+        </Alert>
+      </Snackbar>
+    </AlertContext.Provider>
+  )
+}
+
+export default React.memo(AlertProvider)