cozy-ui 119.0.3 → 119.2.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [119.2.0](https://github.com/cozy/cozy-ui/compare/v119.1.0...v119.2.0) (2025-03-12)
+
+
+### Features
+
+* **Switch:** Adjust style component ([4e89011](https://github.com/cozy/cozy-ui/commit/4e89011))
+
+# [119.1.0](https://github.com/cozy/cozy-ui/compare/v119.0.3...v119.1.0) (2025-03-12)
+
+
+### Features
+
+* Adjust cloud, company and from-user icons ([32dd9a2](https://github.com/cozy/cozy-ui/commit/32dd9a2))
+
 ## [119.0.3](https://github.com/cozy/cozy-ui/compare/v119.0.2...v119.0.3) (2025-03-11)
 
 

package/assets/icons/twake/cloud_twake.svg

@@ -0,0 +1 @@
+<svg width="16" height="11" viewBox="0 0 16 11" xmlns="http://www.w3.org/2000/svg"><path d="M8 1.333a3.669 3.669 0 0 1 3.593 2.954l.2 1 1.02.073c1.04.067 1.854.94 1.854 1.973 0 1.1-.9 2-2 2H4a2.666 2.666 0 0 1-2.667-2.666A2.649 2.649 0 0 1 3.707 4.02l.713-.073.333-.634A3.646 3.646 0 0 1 8 1.333ZM8 0a4.997 4.997 0 0 0-4.433 2.693A3.996 3.996 0 0 0 0 6.667c0 2.206 1.793 4 4 4h8.667A3.335 3.335 0 0 0 16 7.333a3.317 3.317 0 0 0-3.1-3.306A4.993 4.993 0 0 0 8 0Z"/></svg>

package/assets/icons/twake/company_twake.svg

@@ -1 +1 @@
-<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path d="M10 4V0H0v18h20V4H10ZM4 16H2v-2h2v2Zm0-4H2v-2h2v2Zm0-4H2V6h2v2Zm0-4H2V2h2v2Zm4 12H6v-2h2v2Zm0-4H6v-2h2v2Zm0-4H6V6h2v2Zm0-4H6V2h2v2Zm10 12h-8v-2h2v-2h-2v-2h2V8h-2V6h8v10Zm-2-8h-2v2h2V8Zm0 4h-2v2h2v-2Z"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M12.444 7.111V0H3.556v3.556H0V16h7.111v-3.556H8.89V16H16V7.111h-3.556Zm-8.888 7.111H1.778v-1.778h1.778v1.778Zm0-3.555H1.778V8.889h1.778v1.778Zm0-3.556H1.778V5.333h1.778v1.778Zm3.555 3.556H5.333V8.889h1.778v1.778Zm0-3.556H5.333V5.333h1.778v1.778Zm0-3.555H5.333V1.778h1.778v1.778Zm3.556 7.11H8.889V8.89h1.778v1.778Zm0-3.555H8.889V5.333h1.778v1.778Zm0-3.555H8.889V1.778h1.778v1.778Zm3.555 10.666h-1.778v-1.778h1.778v1.778Zm0-3.555h-1.778V8.889h1.778v1.778Z"/></svg>

package/assets/icons/twake/from-user_twake.svg

@@ -1 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8Zm5.088 11.864C11.944 10.472 9.168 10 8 10c-1.168 0-3.944.472-5.088 1.864A6.36 6.36 0 0 1 1.6 8c0-3.528 2.872-6.4 6.4-6.4 3.528 0 6.4 2.872 6.4 6.4a6.36 6.36 0 0 1-1.312 3.864ZM5.2 6c0-1.552 1.248-2.8 2.8-2.8 1.552 0 2.8 1.248 2.8 2.8 0 1.552-1.248 2.8-2.8 2.8A2.793 2.793 0 0 1 5.2 6Z"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8ZM4.28 13.2A6.353 6.353 0 0 1 8 12c1.392 0 2.672.448 3.72 1.2A6.353 6.353 0 0 1 8 14.4a6.353 6.353 0 0 1-3.72-1.2Zm8.632-1.104a7.957 7.957 0 0 0-9.824 0A6.365 6.365 0 0 1 1.6 8c0-3.536 2.864-6.4 6.4-6.4 3.536 0 6.4 2.864 6.4 6.4 0 1.56-.56 2.984-1.488 4.096Z"/><path d="M8 3.2A2.803 2.803 0 0 0 5.2 6c0 1.544 1.256 2.8 2.8 2.8 1.544 0 2.8-1.256 2.8-2.8 0-1.544-1.256-2.8-2.8-2.8Zm0 4c-.664 0-1.2-.536-1.2-1.2 0-.664.536-1.2 1.2-1.2.664 0 1.2.536 1.2 1.2 0 .664-.536 1.2-1.2 1.2Z"/></svg>

package/package.json

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

package/react/Icons/Cloud.jsx

@@ -1,7 +1,11 @@
 // Automatically created, please run `scripts/generate-svg-icon.sh assets/icons/ui/cloud.svg` to regenerate;
 import React from 'react'
 
+import SvgCloudTwake from './Cloud_twake'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
 function SvgCloud(props) {
+  if (isTwakeTheme()) return SvgCloudTwake(props)
   return (
     <svg viewBox="0 0 16 16" {...props}>
       <defs>

package/react/Icons/Cloud_twake.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/cloud_twake.svg` to regenerate;
+import React from 'react'
+
+function SvgCloudTwake(props) {
+  return (
+    <svg viewBox="0 0 16 11" {...props}>
+      <path d="M8 1.333a3.669 3.669 0 013.593 2.954l.2 1 1.02.073c1.04.067 1.854.94 1.854 1.973 0 1.1-.9 2-2 2H4a2.666 2.666 0 01-2.667-2.666A2.649 2.649 0 013.707 4.02l.713-.073.333-.634A3.646 3.646 0 018 1.333zM8 0a4.997 4.997 0 00-4.433 2.693A3.996 3.996 0 000 6.667c0 2.206 1.793 4 4 4h8.667A3.335 3.335 0 0016 7.333a3.317 3.317 0 00-3.1-3.306A4.993 4.993 0 008 0z" />
+    </svg>
+  )
+}
+
+export default SvgCloudTwake

package/react/Icons/Company_twake.jsx

@@ -3,8 +3,8 @@ import React from 'react'
 
 function SvgCompanyTwake(props) {
   return (
-    <svg viewBox="0 0 20 18" {...props}>
-      <path d="M10 4V0H0v18h20V4H10zM4 16H2v-2h2v2zm0-4H2v-2h2v2zm0-4H2V6h2v2zm0-4H2V2h2v2zm4 12H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V6h2v2zm0-4H6V2h2v2zm10 12h-8v-2h2v-2h-2v-2h2V8h-2V6h8v10zm-2-8h-2v2h2V8zm0 4h-2v2h2v-2z" />
+    <svg viewBox="0 0 16 16" {...props}>
+      <path d="M12.444 7.111V0H3.556v3.556H0V16h7.111v-3.556H8.89V16H16V7.111h-3.556zm-8.888 7.111H1.778v-1.778h1.778v1.778zm0-3.555H1.778V8.889h1.778v1.778zm0-3.556H1.778V5.333h1.778v1.778zm3.555 3.556H5.333V8.889h1.778v1.778zm0-3.556H5.333V5.333h1.778v1.778zm0-3.555H5.333V1.778h1.778v1.778zm3.556 7.11H8.889V8.89h1.778v1.778zm0-3.555H8.889V5.333h1.778v1.778zm0-3.555H8.889V1.778h1.778v1.778zm3.555 10.666h-1.778v-1.778h1.778v1.778zm0-3.555h-1.778V8.889h1.778v1.778z" />
     </svg>
   )
 }

package/react/Icons/FromUser_twake.jsx

@@ -4,11 +4,8 @@ import React from 'react'
 function SvgFromUserTwake(props) {
   return (
     <svg viewBox="0 0 16 16" {...props}>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8zm5.088 11.864C11.944 10.472 9.168 10 8 10c-1.168 0-3.944.472-5.088 1.864A6.36 6.36 0 011.6 8c0-3.528 2.872-6.4 6.4-6.4 3.528 0 6.4 2.872 6.4 6.4a6.36 6.36 0 01-1.312 3.864zM5.2 6c0-1.552 1.248-2.8 2.8-2.8 1.552 0 2.8 1.248 2.8 2.8 0 1.552-1.248 2.8-2.8 2.8A2.793 2.793 0 015.2 6z"
-      />
+      <path d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8 8-3.584 8-8-3.584-8-8-8zM4.28 13.2A6.353 6.353 0 018 12c1.392 0 2.672.448 3.72 1.2A6.353 6.353 0 018 14.4a6.353 6.353 0 01-3.72-1.2zm8.632-1.104a7.957 7.957 0 00-9.824 0A6.365 6.365 0 011.6 8c0-3.536 2.864-6.4 6.4-6.4 3.536 0 6.4 2.864 6.4 6.4 0 1.56-.56 2.984-1.488 4.096z" />
+      <path d="M8 3.2A2.803 2.803 0 005.2 6c0 1.544 1.256 2.8 2.8 2.8 1.544 0 2.8-1.256 2.8-2.8 0-1.544-1.256-2.8-2.8-2.8zm0 4c-.664 0-1.2-.536-1.2-1.2 0-.664.536-1.2 1.2-1.2.664 0 1.2.536 1.2 1.2 0 .664-.536 1.2-1.2 1.2z" />
     </svg>
   )
 }

package/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.js

@@ -10,6 +10,60 @@ export const makeLightNormalTwakeOverrides = theme => {
         padding: 8
       }
     },
+    MuiSwitch: {
+      root: {
+        width: 50,
+        height: 40,
+        padding: '6px 1px'
+      },
+      switchBase: {
+        padding: 5,
+        top: 5,
+        color: theme.palette.text.icon,
+        '& .cozySwitchThumb': {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: 20,
+          height: 20,
+          borderRadius: '50%',
+          boxShadow: theme.shadows[1],
+          backgroundColor: theme.palette.common.white
+        }
+      },
+      track: {
+        width: 44,
+        height: '100%',
+        borderRadius: 100
+      },
+      thumb: {
+        width: 20,
+        height: 20
+      },
+      colorPrimary: {
+        '&$disabled + $track': {
+          opacity: 1,
+          backgroundColor: theme.palette.action.disabledBackground
+        }
+      },
+      colorSecondary: {
+        '&$checked': {
+          color: theme.palette.success.main
+        },
+        '&$disabled + $track': {
+          opacity: 1,
+          backgroundColor: theme.palette.action.disabledBackground
+        }
+      },
+      disabled: {
+        '&$checked + $track': {
+          backgroundColor: theme.palette.action.disabledBackground
+        },
+        '& .cozySwitchThumb': {
+          backgroundColor: theme.palette.background.default
+        }
+      }
+    },
     MuiButton: {
       root: {
         borderRadius: 100,

package/react/Switch/Readme.md

@@ -1,14 +1,13 @@
 Used to present a binary choice to the user.
 
-Uses [Material UI's Switch](https://material-ui.com/components/switches/).
-
 ```jsx
 import { useState, useCallback } from 'react'
-import { Media, Img } from 'cozy-ui/transpiled/react/deprecated/Media'
 import Switch from 'cozy-ui/transpiled/react/Switch'
 import Typography from "cozy-ui/transpiled/react/Typography"
 import Stack from "cozy-ui/transpiled/react/Stack"
-import Box from '@material-ui/core/Box'
+import Box from 'cozy-ui/transpiled/react/Box'
+import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
+import FormControlLabel from 'cozy-ui/transpiled/react/FormControlLabel'
 
 initialState = {
   switch0: true,
@@ -22,26 +21,54 @@ const StateSwitch = ({ id, color }) => {
   return <Switch
     color={color}
     checked={checked}
+    {...(isTwakeTheme() && { icon: CheckIcon })}
     onChange={handleClick}
   />
 }
 
-const Switches = () => {
-  return <Stack spacing='xs'>
-    {['primary', 'secondary', 'default'].map((color, i) => {
-      return (
-        <Box display='flex' alignItems='center' key={i}>
-          <Typography variant='body1' display="inline">
-            { color }
-          </Typography>
-          <StateSwitch id={i} color={color} />
-        </Box>
-      )
-    })}
-  </Stack>
-}
-
 ;
 
-<Switches />
+<Stack spacing='xs'>
+  {['primary', 'secondary', 'default'].map((color, i) => {
+    return (
+      <Box display='flex' alignItems='center' key={i}>
+        <Typography variant='body1' display="inline">{ color }</Typography>
+        <StateSwitch id={i} color={color} />
+      </Box>
+    )
+  })}
+  <FormControlLabel control={<Switch color="primary" />} label="With label" />
+  <FormControlLabel control={<Switch color="primary" checked />} label="With label" />
+  <br />
+  <FormControlLabel control={<Switch color="primary" disabled />} label="Primary, disabled with label" />
+  <FormControlLabel control={<Switch color="primary" checked disabled />} label="Primary, checked - disabled with label" />
+  <br />
+  <FormControlLabel
+    label="Primary, disabled with label"
+    control={
+      <Switch
+        color="primary"
+        {...(isTwakeTheme() && { icon: CheckIcon })}
+        disabled
+      />
+    }
+  />
+  <FormControlLabel
+    label="Primary, checked - disabled with label"
+    control={
+      <Switch
+        color="primary"
+        {...(isTwakeTheme() && { icon: CheckIcon })}
+        checked
+        disabled
+      />
+    }
+  />
+  <br />
+  <FormControlLabel control={<Switch color="secondary" disabled />} label="Secondary, checked with label" />
+  <FormControlLabel control={<Switch color="secondary" checked disabled />} label="Secondary, checked - disabled with label" />
+  <br />
+  <FormControlLabel control={<Switch disabled />} label="Default, checked with label" />
+  <FormControlLabel control={<Switch checked disabled />} label="Default, checked - disabled with label" />
+</Stack>
 ```

package/react/Switch/index.jsx

@@ -1,3 +1,22 @@
-import Switch from '@material-ui/core/Switch'
+import MuiSwitch from '@material-ui/core/Switch'
+import React from 'react'
+
+import Icon from '../Icon'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
+
+const Switch = ({ icon, ...props }) => {
+  const _icon = (
+    <span className="cozySwitchThumb">
+      {!!icon && <Icon icon={icon} size={14} />}
+    </span>
+  )
+
+  return (
+    <MuiSwitch
+      {...props}
+      {...(isTwakeTheme() && { icon: _icon, checkedIcon: _icon })}
+    />
+  )
+}
 
 export default Switch