cozy-ui 121.2.0 → 121.4.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# [121.4.0](https://github.com/cozy/cozy-ui/compare/v121.3.0...v121.4.0) (2025-03-24)
+
+
+### Features
+
+* Add DesktopDownload icon ([97766b5](https://github.com/cozy/cozy-ui/commit/97766b5))
+* Adjust PhoneDownload Icon ([8bd5753](https://github.com/cozy/cozy-ui/commit/8bd5753))
+* **Banner:** Add possibility to hide bottom divider ([cc5a2c8](https://github.com/cozy/cozy-ui/commit/cc5a2c8))
+
+# [121.3.0](https://github.com/cozy/cozy-ui/compare/v121.2.0...v121.3.0) (2025-03-20)
+
+
+### Features
+
+* Add Workplace icon ([d48aa3f](https://github.com/cozy/cozy-ui/commit/d48aa3f))
+* Adjust LinearProgress style ([4b4c160](https://github.com/cozy/cozy-ui/commit/4b4c160))
+* **Buttons:** Add auto height for multiline purpose ([88a3181](https://github.com/cozy/cozy-ui/commit/88a3181))
+
 # [121.2.0](https://github.com/cozy/cozy-ui/compare/v121.1.2...v121.2.0) (2025-03-20)
 
 

package/assets/icons/twake/illus/twake_workplace.svg

@@ -0,0 +1 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x=".498" y=".495" width="21.51" height="21.51" rx="6.563" fill="#fff"/><rect x=".498" y=".495" width="21.51" height="21.51" rx="6.563" fill="url(#paint0_linear_1573_14803)"/><rect x=".498" y=".495" width="21.51" height="21.51" rx="6.563" fill="url(#paint1_linear_1573_14803)"/><rect x=".498" y=".495" width="21.51" height="21.51" rx="6.563" fill="url(#paint2_linear_1573_14803)"/><path d="M11.281 3.7c.008.006.017.01.027.012l.014.002a.405.405 0 0 1 .156.05c.015.007.03.016.044.024l1.068.605 1.25.707.906.512.056.032a.487.487 0 0 1 .229.363l.002.1v3.145a.489.489 0 0 1-.71.401c-.017-.008-.034-.018-.05-.027l-1.606-.909-1.138-.642-.056-.032a.542.542 0 0 0-.178-.051h-.058a.462.462 0 0 0-.213.053c-.02.01-.038.021-.056.032l-1.215.696-1.458.835a3.52 3.52 0 0 1-.063.036.533.533 0 0 1-.176.058l-.07.002a.433.433 0 0 1-.195-.046.48.48 0 0 1-.283-.433V6.05a.483.483 0 0 1 .224-.404l.05-.029.86-.493 1.021-.585 1.033-.59.256-.147.056-.032a.553.553 0 0 1 .107-.044.53.53 0 0 1 .071-.013.048.048 0 0 0 .025-.012l.07-.002ZM3.767 12.474a.036.036 0 0 0 .026-.032.487.487 0 0 1 .27-.389l.652-.376 1.455-.84.566-.326.063-.036a.49.49 0 0 1 .702.418v3.209a.49.49 0 0 0 .213.394c.022.015.045.028.068.04l.62.348 1.278.714.792.442.062.035c.11.064.188.168.22.29a.463.463 0 0 1 .013.192.476.476 0 0 1-.224.35c-.02.013-.042.024-.063.036L8.411 18.08l-.704.386c-.019.01-.036.022-.057.031a.494.494 0 0 1-.48-.016l-.217-.127-2.877-1.692c-.019-.01-.036-.02-.055-.033a.487.487 0 0 1-.219-.306c-.005-.02-.007-.043-.01-.064a.028.028 0 0 0-.018-.02.04.04 0 0 0-.007-.003v-3.763ZM14.974 18.577a.078.078 0 0 0-.017-.012.533.533 0 0 0-.055-.016.47.47 0 0 1-.127-.049l-.069-.04-1.063-.613-1.573-.907-.05-.03a.477.477 0 0 1-.224-.4.477.477 0 0 1 .27-.448l.896-.514 1.21-.692.566-.325.074-.043a.487.487 0 0 0 .227-.35 1.02 1.02 0 0 0 .006-.115v-3.092c0-.024 0-.04.002-.058a.481.481 0 0 1 .356-.43.471.471 0 0 1 .113-.019.492.492 0 0 1 .285.084l.722.415 1.268.733.665.383.062.036c.085.051.151.127.19.218a.15.15 0 0 1 .015.048.083.083 0 0 0 .016.032v3.964a.032.032 0 0 0-.015.023.178.178 0 0 1-.017.055.48.48 0 0 1-.18.208.67.67 0 0 1-.062.035l-.978.56-2.18 1.25c-.018.012-.035.023-.055.032a.468.468 0 0 1-.127.05.389.389 0 0 0-.048.013.03.03 0 0 0-.016.014h-.087Z" fill="#fff"/><defs><linearGradient id="paint0_linear_1573_14803" x1="22.008" y1="13.042" x2=".498" y2="13.042" gradientUnits="userSpaceOnUse"><stop offset=".13" stop-color="#A033FF"/><stop offset=".61" stop-color="#0094FF"/><stop offset="1" stop-color="#4FB500"/></linearGradient><linearGradient id="paint1_linear_1573_14803" x1="10.356" y1="7.217" x2="3.634" y2="20.66" gradientUnits="userSpaceOnUse"><stop stop-color="#FFD600" stop-opacity="0"/><stop offset=".563" stop-color="#FFC700"/></linearGradient><linearGradient id="paint2_linear_1573_14803" x1="12.149" y1="13.042" x2="19.767" y2="21.109" gradientUnits="userSpaceOnUse"><stop offset=".03" stop-color="#FF3B30" stop-opacity="0"/><stop offset=".843" stop-color="#E73B2D"/></linearGradient></defs></svg>

package/assets/icons/twake/phone-download_twake.svg

@@ -1 +1 @@
-<svg width="14" height="16" viewBox="0 0 14 16" xmlns="http://www.w3.org/2000/svg"><path d="M13.177 5.647H9.412V0H3.765v5.647H0l6.588 6.588 6.589-6.588ZM5.647 7.53V1.882H7.53V7.53h1.102L6.588 9.572 4.546 7.529h1.101ZM0 14.118h13.177V16H0v-1.882Z"/></svg>
+<svg width="14" height="17" viewBox="0 0 14 17" xmlns="http://www.w3.org/2000/svg"><path d="M9.182 12.586H1.909V3.859H7V2.404H1.91v-.727H7V.229L1.91.222C1.11.222.454.877.454 1.677v13.09c0 .8.654 1.455 1.454 1.455h7.273c.8 0 1.454-.654 1.454-1.454V11.13H9.182v1.455Zm0 2.182H1.909v-.728h7.273v.728Z"/><path d="m9.91 9.677 3.636-3.637-1.026-1.025-1.884 1.876V1.677H9.182V6.89L7.298 5.015 6.273 6.04l3.636 3.637Z"/></svg>

package/assets/icons/ui/desktop-download.svg

@@ -0,0 +1 @@
+<svg width="16" height="15" viewBox="0 0 16 15" xmlns="http://www.w3.org/2000/svg"><path d="M14.4 11.2H1.6V1.6H8V0H1.6C.712 0 0 .712 0 1.6v9.6c0 .88.712 1.6 1.6 1.6h3.2v1.6h6.4v-1.6h3.2c.88 0 1.6-.72 1.6-1.6V8.8h-1.6v2.4Z"/><path d="m12 8.8 4-4-1.128-1.128L12.8 5.736V0h-1.6v5.736L9.128 3.672 8 4.8l4 4Z"/></svg>

package/package.json

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

package/react/Banner/Readme.md

@@ -22,6 +22,7 @@ const initialVariants = [{
   buttonOne: true,
   buttonTwo: true,
   inline: true,
+  noDivider: false,
   backgroundColor: true,
   disableIconStyles: false
 }]
@@ -39,6 +40,7 @@ const initialVariants = [{
       buttonOne={variant.buttonOne && buttonOne}
       buttonTwo={variant.buttonTwo && buttonTwo}
       inline={variant.inline}
+      noDivider={variant.noDivider}
       disableIconStyles={variant.disableIconStyles}
     />
   )}

package/react/Banner/index.jsx

@@ -19,6 +19,7 @@ const Banner = ({
   buttonOne,
   buttonTwo,
   inline,
+  noDivider,
   disableIconStyles
 }) => {
   const position = {
@@ -76,7 +77,7 @@ const Banner = ({
           </Grid>
         </div>
       </Paper>
-      <Divider />
+      {!noDivider && <Divider />}
     </>
   )
 }
@@ -94,6 +95,8 @@ Banner.propTypes = {
   buttonTwo: PropTypes.node,
   /** Show banner on one line (only desktop) */
   inline: PropTypes.bool,
+  /** Disables the bottom divider */
+  noDivider: PropTypes.bool,
   /** Disables the styles of the wrapper around the icon */
   disableIconWrapper: PropTypes.bool
 }

package/react/Buttons/Readme.md

@@ -125,14 +125,14 @@ const iconPositions = ['startIcon', 'endIcon']
         {variants.map(variant =>
           <div key={variant}>
             <Button
-              className="u-miw-auto u-w-2 u-h-2 u-bdrs-circle"
+              className="u-miw-auto u-mih-auto u-w-2 u-h-2 u-bdrs-circle"
               classes={{ label: "u-flex u-w-auto" }}
               size={isTwakeTheme() ? "small" : "medium"}
               label={<Icon icon={StopIcon} size={12} />}
               variant={variant}
             />
             <Button
-              className="u-ml-1 u-miw-auto u-w-2 u-h-2 u-bdrs-circle"
+              className="u-ml-1 u-miw-auto u-mih-auto u-w-2 u-h-2 u-bdrs-circle"
               classes={{ label: "u-flex u-w-auto" }}
               label={<Icon icon={StopIcon} size={12} />}
               size={isTwakeTheme() ? "small" : "medium"}
@@ -271,3 +271,38 @@ const colors = ['default', 'inherit', 'primary', 'secondary', 'success', 'error'
   )}
 </Grid>
 ```
+
+### Auto height
+
+```jsx
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Grid from 'cozy-ui/transpiled/react/Grid'
+import Paper from 'cozy-ui/transpiled/react/Paper'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+const buttonVariants = ['primary', 'secondary', 'ghost', 'text']
+const sizes = ['small', 'medium', 'large']
+const initialVariants = [{ autoHeight: false }]
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => (
+    <Grid container>
+      {sizes.map(size =>
+        <Grid item xs={12} sm={4} className="u-mb-1" key={size}>
+          <Stack spacing="s">
+            <div>{size}</div>
+            {buttonVariants.map(buttonVariant =>
+              <div key={buttonVariant + size} className="u-w-4">
+                <Button label={`${buttonVariant} with long label`} variant={buttonVariant} size={size} height={variant.autoHeight ? 'auto' : 'default'} />
+              </div>
+            )}
+          </Stack>
+        </Grid>
+      )}
+    </Grid>
+  )}
+</Variants>
+```

package/react/Buttons/index.jsx

@@ -10,7 +10,17 @@ const CUSTOM_COLORS = ['success', 'error', 'warning', 'info']
 
 const DefaultButton = forwardRef(
   (
-    { variant, className, color, label, busy, disabled, endIcon, ...props },
+    {
+      variant,
+      className,
+      color,
+      label,
+      busy,
+      disabled,
+      height,
+      endIcon,
+      ...props
+    },
     ref
   ) => {
     const customColor = CUSTOM_COLORS.includes(color) ? color : 'primary'
@@ -24,6 +34,7 @@ const DefaultButton = forwardRef(
         ref={ref}
         className={cx(
           { [`customColor-${customColor}`]: customColor },
+          { [`customSize-${height}`]: height },
           className
         )}
         color={_color}
@@ -103,11 +114,13 @@ Buttons.propTypes = {
     'error',
     'warning',
     'info'
-  ])
+  ]),
+  height: PropTypes.oneOf(['default', 'auto'])
 }
 
 Buttons.defaultProps = {
-  variant: 'primary'
+  variant: 'primary',
+  height: 'default'
 }
 
 export default Buttons

package/react/Icon/Readme.md

@@ -142,6 +142,7 @@ import Dash from 'cozy-ui/transpiled/react/Icons/Dash'
 import Dashboard from 'cozy-ui/transpiled/react/Icons/Dashboard'
 import DataControl from 'cozy-ui/transpiled/react/Icons/DataControl'
 import Debit from 'cozy-ui/transpiled/react/Icons/Debit'
+import DesktopDownload from 'cozy-ui/transpiled/react/Icons/DesktopDownload'
 import Devices from 'cozy-ui/transpiled/react/Icons/Devices'
 import Dots from 'cozy-ui/transpiled/react/Icons/Dots'
 import Down from 'cozy-ui/transpiled/react/Icons/Down'
@@ -412,6 +413,7 @@ const icons = [
   Dashboard,
   DataControl,
   Debit,
+  DesktopDownload,
   Devices,
   Dots,
   Down,
@@ -720,6 +722,7 @@ import ShareGrey08Icon from 'cozy-ui/transpiled/react/Icons/ShareGrey08'
 import StoreIcon from 'cozy-ui/transpiled/react/Icons/Store'
 import TopSelectIcon from 'cozy-ui/transpiled/react/Icons/TopSelect'
 import TrashDuotoneIcon from 'cozy-ui/transpiled/react/Icons/TrashDuotone'
+import TwakeWorkplace from 'cozy-ui/transpiled/react/Icons/TwakeWorkplace'
 
 const icons = [
   AccountIcon,
@@ -768,7 +771,8 @@ const icons = [
   ShareGrey08Icon,
   StoreIcon,
   TopSelectIcon,
-  TrashDuotoneIcon
+  TrashDuotoneIcon,
+  ...(isTwakeTheme() ? [TwakeWorkplace] : []),
 ]
 
 const wrapperStyle = {
@@ -938,7 +942,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-check','bank','banking-add','banking','bell','benefit','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','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud-plus-outlined','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-outline','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','face-id','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-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','moped','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','number','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', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','select-all','server','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','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','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud-plus-outlined','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-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','desktop-download','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','face-id','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-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','merge','moped','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','number','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', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','select-all','server','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
 ;
 <div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
   <Sprite />

package/react/Icons/DesktopDownload.jsx

@@ -0,0 +1,13 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/desktop-download.svg` to regenerate;
+import React from 'react'
+
+function SvgDesktopDownload(props) {
+  return (
+    <svg viewBox="0 0 16 15" {...props}>
+      <path d="M14.4 11.2H1.6V1.6H8V0H1.6C.712 0 0 .712 0 1.6v9.6c0 .88.712 1.6 1.6 1.6h3.2v1.6h6.4v-1.6h3.2c.88 0 1.6-.72 1.6-1.6V8.8h-1.6v2.4z" />
+      <path d="M12 8.8l4-4-1.128-1.128L12.8 5.736V0h-1.6v5.736L9.128 3.672 8 4.8l4 4z" />
+    </svg>
+  )
+}
+
+export default SvgDesktopDownload

package/react/Icons/PhoneDownload_twake.jsx

@@ -3,8 +3,9 @@ import React from 'react'
 
 function SvgPhoneDownloadTwake(props) {
   return (
-    <svg viewBox="0 0 14 16" {...props}>
-      <path d="M13.177 5.647H9.412V0H3.765v5.647H0l6.588 6.588 6.589-6.588zM5.647 7.53V1.882H7.53V7.53h1.102L6.588 9.572 4.546 7.529h1.101zM0 14.118h13.177V16H0v-1.882z" />
+    <svg viewBox="0 0 14 17" {...props}>
+      <path d="M9.182 12.586H1.909V3.859H7V2.404H1.91v-.727H7V.229L1.91.222C1.11.222.454.877.454 1.677v13.09c0 .8.654 1.455 1.454 1.455h7.273c.8 0 1.454-.654 1.454-1.454V11.13H9.182v1.455zm0 2.182H1.909v-.728h7.273v.728z" />
+      <path d="M9.91 9.677l3.636-3.637-1.026-1.025-1.884 1.876V1.677H9.182V6.89L7.298 5.015 6.273 6.04l3.636 3.637z" />
     </svg>
   )
 }

package/react/Icons/TwakeWorkplace.jsx

@@ -0,0 +1,83 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/twake/illus/workplace_twake.svg` to regenerate;
+import React from 'react'
+
+function SvgTwakeWorkplace(props) {
+  return (
+    <svg viewBox="0 0 22 22" fill="none" {...props}>
+      <rect
+        x={0.498}
+        y={0.495}
+        width={21.51}
+        height={21.51}
+        rx={6.563}
+        fill="#fff"
+      />
+      <rect
+        x={0.498}
+        y={0.495}
+        width={21.51}
+        height={21.51}
+        rx={6.563}
+        fill="url(#workplace_twake_svg__paint0_linear_1573_14803)"
+      />
+      <rect
+        x={0.498}
+        y={0.495}
+        width={21.51}
+        height={21.51}
+        rx={6.563}
+        fill="url(#workplace_twake_svg__paint1_linear_1573_14803)"
+      />
+      <rect
+        x={0.498}
+        y={0.495}
+        width={21.51}
+        height={21.51}
+        rx={6.563}
+        fill="url(#workplace_twake_svg__paint2_linear_1573_14803)"
+      />
+      <path
+        d="M11.281 3.7c.008.006.017.01.027.012l.014.002a.405.405 0 01.156.05c.015.007.03.016.044.024l1.068.605 1.25.707.906.512.056.032a.487.487 0 01.229.363l.002.1v3.145a.489.489 0 01-.71.401c-.017-.008-.034-.018-.05-.027l-1.606-.909-1.138-.642-.056-.032a.542.542 0 00-.178-.051h-.058a.462.462 0 00-.213.053c-.02.01-.038.021-.056.032l-1.215.696-1.458.835a3.52 3.52 0 01-.063.036.533.533 0 01-.176.058l-.07.002a.433.433 0 01-.195-.046.48.48 0 01-.283-.433V6.05a.483.483 0 01.224-.404l.05-.029.86-.493 1.021-.585 1.033-.59.256-.147.056-.032a.553.553 0 01.107-.044.53.53 0 01.071-.013.048.048 0 00.025-.012l.07-.002zm-7.514 8.774a.036.036 0 00.026-.032.487.487 0 01.27-.389l.652-.376 1.455-.84.566-.326.063-.036a.49.49 0 01.702.418v3.209a.49.49 0 00.213.394.671.671 0 00.068.04l.62.348 1.278.714.792.442.062.035c.11.064.188.168.22.29a.463.463 0 01.013.192.476.476 0 01-.224.35c-.02.013-.042.024-.063.036L8.411 18.08l-.704.386c-.019.01-.036.022-.057.031a.494.494 0 01-.48-.016l-.217-.127-2.877-1.692a.533.533 0 01-.055-.033.487.487 0 01-.219-.306c-.005-.02-.007-.043-.01-.064a.028.028 0 00-.018-.02.04.04 0 00-.007-.003v-3.763zm11.207 6.103a.078.078 0 00-.017-.012.533.533 0 00-.055-.016.47.47 0 01-.127-.049l-.069-.04-1.063-.613-1.573-.907-.05-.03a.477.477 0 01-.224-.4.477.477 0 01.27-.448l.896-.514 1.21-.692.566-.325.074-.043a.487.487 0 00.227-.35 1.02 1.02 0 00.006-.115v-3.092c0-.024 0-.04.002-.058a.481.481 0 01.356-.43.471.471 0 01.113-.019.492.492 0 01.285.084l.722.415 1.268.733.665.383.062.036a.469.469 0 01.19.218.15.15 0 01.015.048.083.083 0 00.016.032v3.964a.032.032 0 00-.015.023.178.178 0 01-.017.055.48.48 0 01-.18.208.67.67 0 01-.062.035l-.978.56-2.18 1.25a.376.376 0 01-.055.032.468.468 0 01-.127.05.389.389 0 00-.048.013.03.03 0 00-.016.014h-.087z"
+        fill="#fff"
+      />
+      <defs>
+        <linearGradient
+          id="workplace_twake_svg__paint0_linear_1573_14803"
+          x1={22.008}
+          y1={13.042}
+          x2={0.498}
+          y2={13.042}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset={0.13} stopColor="#A033FF" />
+          <stop offset={0.61} stopColor="#0094FF" />
+          <stop offset={1} stopColor="#4FB500" />
+        </linearGradient>
+        <linearGradient
+          id="workplace_twake_svg__paint1_linear_1573_14803"
+          x1={10.356}
+          y1={7.217}
+          x2={3.634}
+          y2={20.66}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#FFD600" stopOpacity={0} />
+          <stop offset={0.563} stopColor="#FFC700" />
+        </linearGradient>
+        <linearGradient
+          id="workplace_twake_svg__paint2_linear_1573_14803"
+          x1={12.149}
+          y1={13.042}
+          x2={19.767}
+          y2={21.109}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset={0.03} stopColor="#FF3B30" stopOpacity={0} />
+          <stop offset={0.843} stopColor="#E73B2D" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default SvgTwakeWorkplace

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -160,9 +160,16 @@ export const makeLightNormalOverrides = theme => ({
   MuiButton: {
     root: {
       borderRadius: 2,
-      height: '2.5rem',
       lineHeight: 'normal',
       padding: '0 1rem',
+      '&.customSize': {
+        '&-default': {
+          height: '2.5rem'
+        },
+        '&-auto': {
+          minHeight: '2.5rem'
+        }
+      },
       '&.ghost': {
         borderStyle: 'dashed !important', // important needed to override disable state
         '&:hover': {
@@ -171,15 +178,29 @@ export const makeLightNormalOverrides = theme => ({
       }
     },
     sizeSmall: {
-      height: '2rem',
       padding: '0 0.75rem',
+      '&.customSize': {
+        '&-default': {
+          height: '2rem'
+        },
+        '&-auto': {
+          minHeight: '2rem'
+        }
+      },
       '&$text': {
         padding: '8px 6px'
       }
     },
     sizeLarge: {
-      height: '3rem',
       padding: '0 1.25rem',
+      '&.customSize': {
+        '&-default': {
+          height: '3rem'
+        },
+        '&-auto': {
+          minHeight: '3rem'
+        }
+      },
       '&$text': {
         padding: '14px 10px'
       }

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

@@ -64,6 +64,14 @@ export const makeLightNormalTwakeOverrides = theme => {
         }
       }
     },
+    MuiLinearProgress: {
+      root: {
+        height: 3
+      },
+      colorPrimary: {
+        backgroundColor: theme.palette.divider
+      }
+    },
     MuiButton: {
       root: {
         borderRadius: 100,
@@ -76,8 +84,15 @@ export const makeLightNormalTwakeOverrides = theme => {
         }
       },
       sizeSmall: {
-        height: '2.25rem',
         padding: '10px 16px',
+        '&.customSize': {
+          '&-default': {
+            height: '2.25rem'
+          },
+          '&-auto': {
+            minHeight: '2.25rem'
+          }
+        },
         '&$text': {
           padding: '8px 16px'
         }

package/transpiled/react/Banner/index.js

@@ -24,6 +24,7 @@ var Banner = function Banner(_ref) {
       buttonOne = _ref.buttonOne,
       buttonTwo = _ref.buttonTwo,
       inline = _ref.inline,
+      noDivider = _ref.noDivider,
       disableIconStyles = _ref.disableIconStyles;
   var position = {
     row: [8, 4],
@@ -67,7 +68,7 @@ var Banner = function Banner(_ref) {
   }, /*#__PURE__*/React.createElement(Grid, {
     item: true,
     className: styles['c-banner-buttons']
-  }, buttonOne && buttonOne, buttonTwo && buttonTwo))))), /*#__PURE__*/React.createElement(Divider, null));
+  }, buttonOne && buttonOne, buttonTwo && buttonTwo))))), !noDivider && /*#__PURE__*/React.createElement(Divider, null));
 };
 
 Banner.propTypes = {
@@ -89,6 +90,9 @@ Banner.propTypes = {
   /** Show banner on one line (only desktop) */
   inline: PropTypes.bool,
 
+  /** Disables the bottom divider */
+  noDivider: PropTypes.bool,
+
   /** Disables the styles of the wrapper around the icon */
   disableIconWrapper: PropTypes.bool
 };

package/transpiled/react/Buttons/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["variant", "className", "color", "label", "busy", "disabled", "endIcon"],
+var _excluded = ["variant", "className", "color", "label", "busy", "disabled", "height", "endIcon"],
     _excluded2 = ["variant", "className"];
 import MuiButton from '@material-ui/core/Button';
 import cx from 'classnames';
@@ -17,6 +17,7 @@ var DefaultButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
       label = _ref.label,
       busy = _ref.busy,
       disabled = _ref.disabled,
+      height = _ref.height,
       endIcon = _ref.endIcon,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -27,7 +28,7 @@ var DefaultButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(MuiButton, _extends({}, props, {
     variant: variant,
     ref: ref,
-    className: cx(_defineProperty({}, "customColor-".concat(customColor), customColor), className),
+    className: cx(_defineProperty({}, "customColor-".concat(customColor), customColor), _defineProperty({}, "customSize-".concat(height), height), className),
     color: _color,
     disabled: disabled || busy,
     endIcon: busy ? /*#__PURE__*/React.createElement(Icon, {
@@ -93,9 +94,11 @@ var Buttons = /*#__PURE__*/forwardRef(function (_ref2, ref) {
 Buttons.displayName = 'Buttons';
 Buttons.propTypes = {
   variant: PropTypes.oneOf(['primary', 'secondary', 'ghost', 'text']),
-  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'success', 'error', 'warning', 'info'])
+  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'success', 'error', 'warning', 'info']),
+  height: PropTypes.oneOf(['default', 'auto'])
 };
 Buttons.defaultProps = {
-  variant: 'primary'
+  variant: 'primary',
+  height: 'default'
 };
 export default Buttons;