cozy-ui 57.3.1 → 57.5.2

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+## [57.5.2](https://github.com/cozy/cozy-ui/compare/v57.5.1...v57.5.2) (2021-11-02)
+
+
+### Bug Fixes
+
+* Use u-spacellipsis instead of u-ellipsis ([3a4a6c3](https://github.com/cozy/cozy-ui/commit/3a4a6c3))
+
+## [57.5.1](https://github.com/cozy/cozy-ui/compare/v57.5.0...v57.5.1) (2021-11-02)
+
+
+### Bug Fixes
+
+* Set correct argos batchCount ([8a6179d](https://github.com/cozy/cozy-ui/commit/8a6179d)), closes [cozy/cozy-ui#1917](https://github.com/cozy/cozy-ui/issues/1917)
+
+# [57.5.0](https://github.com/cozy/cozy-ui/compare/v57.4.0...v57.5.0) (2021-10-28)
+
+
+### Bug Fixes
+
+* SquareAppIcon error badge appearance ([b1c0275](https://github.com/cozy/cozy-ui/commit/b1c0275))
+* Various style updates after review ([2d6f829](https://github.com/cozy/cozy-ui/commit/2d6f829))
+
+
+### Features
+
+* Add shadows on SquareAppIcon text and icon background ([5008d63](https://github.com/cozy/cozy-ui/commit/5008d63))
+* Allow more width for the name ([12b280c](https://github.com/cozy/cozy-ui/commit/12b280c))
+* Allow two lines for the name ([64776ea](https://github.com/cozy/cozy-ui/commit/64776ea))
+
+# [57.4.0](https://github.com/cozy/cozy-ui/compare/v57.3.1...v57.4.0) (2021-10-19)
+
+
+### Features
+
+* Add piwik-react-router package ([e3bd229](https://github.com/cozy/cozy-ui/commit/e3bd229))
+
 ## [57.3.1](https://github.com/cozy/cozy-ui/compare/v57.3.0...v57.3.1) (2021-10-15)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "57.3.1",
+  "version": "57.5.2",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {
@@ -88,14 +88,14 @@
     "commitlint-config-cozy": "0.6.0",
     "copyfiles": "2.1.1",
     "cozy-client": "^18.1.2",
-    "cozy-device-helper": "1.10.0",
+    "cozy-device-helper": "1.12.0",
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",
     "cozy-sharing": "^3.10.0",
     "css-loader": "0.28.11",
     "cssnano": "4.1.11",
     "cssnano-preset-advanced": "4.0.7",
-    "enzyme": "3.9.0",
+    "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
     "eslint": "4.19.1",
@@ -104,7 +104,7 @@
     "focus-trap-react": "^6.0.0",
     "git-directory-deploy": "1.5.1",
     "handlebars": "^4.7.6",
-    "http-server": "0.11.1",
+    "http-server": "0.13.0",
     "husky": "0.14.3",
     "identity-obj-proxy": "3.0.0",
     "jest-cli": "^26.6.3",
@@ -116,6 +116,7 @@
     "mini-css-extract-plugin": "0.6.0",
     "nodemon": "1.19.4",
     "npm-run-all": "4.1.5",
+    "piwik-react-router": "0.12.1",
     "postcss-cli": "6.1.3",
     "postcss-loader": "2.1.6",
     "pretty": "2.0.0",
@@ -168,7 +169,7 @@
     "cozy-doctypes": "^1.69.0",
     "cozy-harvest-lib": "^6.7.3",
     "cozy-sharing": "^3.10.0",
-    "piwik-react-router": "^0.8.2",
+    "piwik-react-router": "0.12.1",
     "puppeteer": "^1.20.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

package/react/Icons/WarningCircle.jsx

@@ -6,7 +6,7 @@ function SvgWarningCircle(props) {
     <svg viewBox="0 0 16 16" {...props}>
       <path
         fillRule="evenodd"
-        d="M8 0a8 8 0 110 16A8 8 0 018 0zm0 9.75a1.25 1.25 0 100 2.5 1.25 1.25 0 000-2.5zM8 4a1 1 0 00-.993.883L7 5v3a1 1 0 001.993.117L9 8V5a1 1 0 00-1-1z"
+        d="M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM8 9.75C7.30964 9.75 6.75 10.3096 6.75 11C6.75 11.6904 7.30964 12.25 8 12.25C8.69036 12.25 9.25 11.6904 9.25 11C9.25 10.3096 8.69036 9.75 8 9.75ZM8 4C7.48716 4 7.06449 4.38604 7.00673 4.88338L7 5V8C7 8.55228 7.44772 9 8 9C8.51284 9 8.93551 8.61396 8.99327 8.11662L9 8V5C9 4.44772 8.55228 4 8 4Z"
       />
     </svg>
   )

package/react/MuiCozyTheme/makeOverrides.js

@@ -480,6 +480,18 @@ const makeOverrides = theme => ({
         fontSize: '.5rem'
       }
     },
+    anchorOriginTopRightRectangle: {
+      transform: 'scale(1) translate(37%, -37%)'
+    },
+    anchorOriginBottomRightRectangle: {
+      transform: 'scale(1) translate(37%, 37%)'
+    },
+    anchorOriginBottomLeftRectangle: {
+      transform: 'scale(1) translate(-37%, 37%)'
+    },
+    anchorOriginTopLeftRectangle: {
+      transform: 'scale(1) translate(-37%, -37%)'
+    },
     dot: {
       borderRadius: '100%',
       padding: 0,

package/react/MuiCozyTheme/makeTheme.js

@@ -25,6 +25,11 @@ const themesCommonConfig = {
   zIndex: {
     modal: getCssVariableValue('zIndex-modal')
   },
+  textShadows: [
+    'none',
+    '0px 2px 8px rgba(29, 33, 42, 0.16), 0px 0px 1px rgba(29, 33, 42, 0.48)'
+  ],
+  shadows: makeShadows(), // Shadow ar not linked to themes
   props: {
     MuiTabs: {
       textColor: 'primary',
@@ -51,8 +56,7 @@ export const makeTheme = type => {
   const theme = createMuiTheme({
     ...themesCommonConfig,
     typography: makeTypography(palette),
-    palette,
-    shadows: makeShadows()
+    palette
   })
   const overrides = makeThemeOverrides(theme)
 

package/react/SquareAppIcon/Readme.md

@@ -12,7 +12,7 @@ const theme = useCozyTheme()
 ;
 
 
-<Grid container spacing={3} style={{ background: `center / cover no-repeat url(${cloudWallpaper})` }}
+<Grid container spacing={1} style={{ background: `center / cover no-repeat url(${cloudWallpaper})` }}
 >
   <Grid item>
     <SquareAppIcon app="testapp" name="Normal" />
@@ -27,7 +27,7 @@ const theme = useCozyTheme()
     <SquareAppIcon name="Add" variant="add" />
   </Grid>
   <Grid item>
-    <SquareAppIcon app="testapp" name="NoAccount" variant="ghost" />
+    <SquareAppIcon app="testapp" name="No Account long name very very very very long" variant="ghost" />
   </Grid>
   <Grid item>
     <SquareAppIcon name="Shortcut" variant="shortcut" />

package/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap

@@ -2,13 +2,14 @@
 
 exports[`SquareAppIcon component should render an app correctly with the app name 1`] = `
 <div
+  class="makeStyles-tileWrapper-11"
   data-testid="square-app-icon"
 >
   <span
     class="MuiBadge-root"
   >
     <span
-      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM"
+      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-9"
     >
       <div
         class="styles__SquareAppIcon-icon-container___39MRl"
@@ -26,15 +27,15 @@ exports[`SquareAppIcon component should render an app correctly with the app nam
         </svg>
       </div>
       <span
-        class="MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightRectangle"
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle"
       />
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-6 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
+      class="MuiBadge-badge Component-qualifier-12 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-4 MuiTypography-h6 MuiTypography-noWrap MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-7 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     Test
   </h6>
@@ -43,13 +44,14 @@ exports[`SquareAppIcon component should render an app correctly with the app nam
 
 exports[`SquareAppIcon component should render an app correctly with the given name 1`] = `
 <div
+  class="makeStyles-tileWrapper-5"
   data-testid="square-app-icon"
 >
   <span
     class="MuiBadge-root"
   >
     <span
-      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM"
+      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-3"
     >
       <div
         class="styles__SquareAppIcon-icon-container___39MRl"
@@ -67,15 +69,15 @@ exports[`SquareAppIcon component should render an app correctly with the given n
         </svg>
       </div>
       <span
-        class="MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightRectangle"
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle"
       />
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-3 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
+      class="MuiBadge-badge Component-qualifier-6 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-1 MuiTypography-h6 MuiTypography-noWrap MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-1 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     modified
   </h6>
@@ -84,13 +86,14 @@ exports[`SquareAppIcon component should render an app correctly with the given n
 
 exports[`SquareAppIcon component should render an app with the app slug if no name prop and app is a string 1`] = `
 <div
+  class="makeStyles-tileWrapper-17"
   data-testid="square-app-icon"
 >
   <span
     class="MuiBadge-root"
   >
     <span
-      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM"
+      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-15"
     >
       <div
         class="styles__SquareAppIcon-icon-container___39MRl"
@@ -108,15 +111,15 @@ exports[`SquareAppIcon component should render an app with the app slug if no na
         </svg>
       </div>
       <span
-        class="MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightRectangle"
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle"
       />
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-9 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
+      class="MuiBadge-badge Component-qualifier-18 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-7 MuiTypography-h6 MuiTypography-noWrap MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-13 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     testslug
   </h6>
@@ -125,6 +128,7 @@ exports[`SquareAppIcon component should render an app with the app slug if no na
 
 exports[`SquareAppIcon component should render correctly an app in add state 1`] = `
 <div
+  class="makeStyles-tileWrapper-41"
   data-testid="square-app-icon"
 >
   <span
@@ -156,28 +160,29 @@ exports[`SquareAppIcon component should render correctly an app in add state 1`]
         </svg>
       </div>
       <span
-        class="MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightRectangle"
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle"
       />
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-21 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
+      class="MuiBadge-badge Component-qualifier-42 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-19 MuiTypography-h6 MuiTypography-noWrap MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-37 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   />
 </div>
 `;
 
 exports[`SquareAppIcon component should render correctly an app in error state 1`] = `
 <div
+  class="makeStyles-tileWrapper-35"
   data-testid="square-app-icon"
 >
   <span
     class="MuiBadge-root"
   >
     <span
-      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM"
+      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-33"
     >
       <div
         class="styles__SquareAppIcon-icon-container___39MRl"
@@ -195,17 +200,27 @@ exports[`SquareAppIcon component should render correctly an app in error state 1
         </svg>
       </div>
       <span
-        class="MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightRectangle MuiBadge-colorError"
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle MuiBadge-colorError"
       >
-        !
+        <svg
+          class="makeStyles-errorIcon-34 styles__icon___23x3R"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM8 9.75C7.30964 9.75 6.75 10.3096 6.75 11C6.75 11.6904 7.30964 12.25 8 12.25C8.69036 12.25 9.25 11.6904 9.25 11C9.25 10.3096 8.69036 9.75 8 9.75ZM8 4C7.48716 4 7.06449 4.38604 7.00673 4.88338L7 5V8C7 8.55228 7.44772 9 8 9C8.51284 9 8.93551 8.61396 8.99327 8.11662L9 8V5C9 4.44772 8.55228 4 8 4Z"
+            fill-rule="evenodd"
+          />
+        </svg>
       </span>
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-18 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
+      class="MuiBadge-badge Component-qualifier-36 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-16 MuiTypography-h6 MuiTypography-noWrap MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-31 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     Test
   </h6>
@@ -214,6 +229,7 @@ exports[`SquareAppIcon component should render correctly an app in error state 1
 
 exports[`SquareAppIcon component should render correctly an app in ghost state 1`] = `
 <div
+  class="makeStyles-tileWrapper-29"
   data-testid="square-app-icon"
 >
   <span
@@ -238,15 +254,15 @@ exports[`SquareAppIcon component should render correctly an app in ghost state 1
         </svg>
       </div>
       <span
-        class="MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightRectangle"
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle"
       />
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-15 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
+      class="MuiBadge-badge Component-qualifier-30 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-13 MuiTypography-h6 MuiTypography-noWrap MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-25 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     Test
   </h6>
@@ -255,13 +271,14 @@ exports[`SquareAppIcon component should render correctly an app in ghost state 1
 
 exports[`SquareAppIcon component should render correctly an app in maintenance state 1`] = `
 <div
+  class="makeStyles-tileWrapper-23"
   data-testid="square-app-icon"
 >
   <span
     class="MuiBadge-root"
   >
     <span
-      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM styles__SquareAppIcon-wrapper-maintenance___2ne2n"
+      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM styles__SquareAppIcon-wrapper-maintenance___2ne2n makeStyles-shadow-21"
     >
       <div
         class="styles__SquareAppIcon-icon-container___39MRl"
@@ -279,15 +296,15 @@ exports[`SquareAppIcon component should render correctly an app in maintenance s
         </svg>
       </div>
       <span
-        class="MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightRectangle"
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle"
       />
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-12 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
+      class="MuiBadge-badge Component-qualifier-24 MuiBadge-anchorOriginBottomRightRectangle MuiBadge-invisible"
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-10 MuiTypography-h6 MuiTypography-noWrap MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-19 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     Test
   </h6>
@@ -296,26 +313,27 @@ exports[`SquareAppIcon component should render correctly an app in maintenance s
 
 exports[`SquareAppIcon component should render correctly an app in shortcut state 1`] = `
 <div
+  class="makeStyles-tileWrapper-47"
   data-testid="square-app-icon"
 >
   <span
     class="MuiBadge-root"
   >
     <span
-      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM"
+      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-45"
       style="background-color: rgb(61, 166, 126);"
     >
       <h2
-        class="MuiTypography-root makeStyles-letter-23 MuiTypography-h2 MuiTypography-alignCenter"
+        class="MuiTypography-root makeStyles-letter-44 MuiTypography-h2 MuiTypography-alignCenter"
       >
         S
       </h2>
       <span
-        class="MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightRectangle"
+        class="MuiBadge-badge badgeSizeLarge MuiBadge-anchorOriginTopRightRectangle"
       />
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-24 MuiBadge-anchorOriginBottomRightRectangle"
+      class="MuiBadge-badge Component-qualifier-48 MuiBadge-anchorOriginBottomRightRectangle"
     >
       <svg
         class="styles__icon___23x3R"
@@ -331,7 +349,7 @@ exports[`SquareAppIcon component should render correctly an app in shortcut stat
     </span>
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-22 MuiTypography-h6 MuiTypography-noWrap MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-43 u-spacellipsis MuiTypography-h6 MuiTypography-alignCenter"
   >
     shortcut
   </h6>

package/react/SquareAppIcon/index.jsx

@@ -11,28 +11,53 @@ import Typography from '../Typography'
 import { AppDoctype } from '../proptypes'
 import Icon from '../Icon'
 import iconPlus from '../Icons/Plus'
+import iconWarning from '../Icons/WarningCircle'
 import iconOut from '../Icons/LinkOut'
 
-import { mobileIconSize, color } from './constants.json'
+import { color } from './constants.json'
 import styles from './styles.styl'
 
 const useStyles = makeStyles(theme => ({
   name: {
     color,
-    maxWidth: '4.25rem',
+    width: '5.5rem',
+    textAlign: 'center',
     fontSize: '0.875rem',
     lineHeight: '1.188rem',
-    marginTop: '0.5rem',
+    margin: '0.5rem 0.25rem 0 0.25rem',
+    textShadow: theme.textShadows[1],
+    lineClamp: '2',
+    boxOrient: 'vertical',
+    display: '-webkit-box',
+    height: '2.375rem',
     [theme.breakpoints.down('sm')]: {
-      maxWidth: mobileIconSize,
+      width: '3.75rem',
       fontSize: '0.6875rem',
       lineHeight: '1rem',
-      marginTop: '0.25rem'
+      margin: '0.25rem 0.25rem 0 0.25rem',
+      height: '2rem'
     }
   },
   letter: {
     color,
     margin: 'auto'
+  },
+  shadow: {
+    boxShadow: theme.shadows[2]
+  },
+  errorIcon: {
+    fill: 'var(--errorColor)',
+    backgroundColor: 'var(--primaryContrastTextColor)',
+    borderRadius: '1rem'
+  },
+  tileWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: '6rem',
+    [theme.breakpoints.down('sm')]: {
+      width: '4.25rem'
+    }
   }
 }))
 
@@ -42,7 +67,7 @@ export const SquareAppIcon = ({ app, name, variant }) => {
   const letter = appName[0] || ''
 
   return (
-    <div data-testid="square-app-icon">
+    <div data-testid="square-app-icon" className={cx(classes.tileWrapper)}>
       <InfosBadge
         badgeContent={
           variant === 'shortcut' ? <Icon size="10" icon={iconOut} /> : null
@@ -58,12 +83,24 @@ export const SquareAppIcon = ({ app, name, variant }) => {
               [`${styles['SquareAppIcon-wrapper-fx']}`]: [
                 'ghost',
                 'add'
-              ].includes(variant)
+              ].includes(variant),
+              [classes.shadow]: !['add', 'ghost'].includes(variant)
             }
           )}
-          badgeContent={variant === 'error' ? '!' : ''}
+          badgeContent={
+            variant === 'error' ? (
+              <Icon
+                size="16"
+                className={cx(classes.errorIcon)}
+                icon={iconWarning}
+              />
+            ) : (
+              ''
+            )
+          }
           color={variant === 'error' ? 'error' : undefined}
           withBorder={false}
+          size="large"
           overlap="rectangle"
           style={
             variant === 'shortcut'
@@ -86,7 +123,11 @@ export const SquareAppIcon = ({ app, name, variant }) => {
           )}
         </Badge>
       </InfosBadge>
-      <Typography className={classes.name} variant="h6" align="center" noWrap>
+      <Typography
+        className={cx(classes.name, 'u-spacellipsis')}
+        variant="h6"
+        align="center"
+      >
         {appName}
       </Typography>
     </div>

package/react/SquareAppIcon/styles.styl

@@ -9,7 +9,7 @@ $color = constants['color'] // hard-coded color, because the component is curren
 
 .SquareAppIcon-wrapper
     box-sizing border-box
-    background-color var(--defaultBackgroundColor)
+    background-color var(--paperBackgroundColor)
     border-radius rem(12)
     height $iconSize
     width $iconSize
@@ -39,7 +39,7 @@ $color = constants['color'] // hard-coded color, because the component is curren
 
 .SquareAppIcon-wrapper-ghost
     .SquareAppIcon-icon-container
-        mix-blend-mode overlay // need to apply backdrop-filter and mix blend-mode in a separated element to have the proper effect
+        mix-blend-mode screen // need to apply backdrop-filter and mix blend-mode in a separated element to have the proper effect
         svg, img
             filter saturate(0%)
 

package/react/__snapshots__/examples.spec.jsx.snap

@@ -3727,7 +3727,7 @@ exports[`Icon should render examples: Icon 1`] = `
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1\\">Warning</p>
     </div>
     <div class=\\"makeStyles-iconTile-16 u-ta-center u-mb-1\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
-        <path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 110 16A8 8 0 018 0zm0 9.75a1.25 1.25 0 100 2.5 1.25 1.25 0 000-2.5zM8 4a1 1 0 00-.993.883L7 5v3a1 1 0 001.993.117L9 8V5a1 1 0 00-1-1z\\"></path>
+        <path fill-rule=\\"evenodd\\" d=\\"M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM8 9.75C7.30964 9.75 6.75 10.3096 6.75 11C6.75 11.6904 7.30964 12.25 8 12.25C8.69036 12.25 9.25 11.6904 9.25 11C9.25 10.3096 8.69036 9.75 8 9.75ZM8 4C7.48716 4 7.06449 4.38604 7.00673 4.88338L7 5V8C7 8.55228 7.44772 9 8 9C8.51284 9 8.93551 8.61396 8.99327 8.11662L9 8V5C9 4.44772 8.55228 4 8 4Z\\"></path>
       </svg>
       <p class=\\"MuiTypography-root u-mt-half MuiTypography-body1\\">WarningCircle</p>
     </div>

package/scripts/screenshots/parser.js

@@ -19,7 +19,7 @@ const makeParser = () => {
   const parser = new ArgumentParser()
 
   parser.addArgument('--mode', {
-    choices: ['react', 'stack', 'kss'],
+    choices: ['react', 'kss'],
     defaultValue: 'react'
   })
   parser.addArgument('--screenshot-dir', {

package/scripts/screenshots.js

@@ -2,7 +2,6 @@
 
 const { prepareFS, prepareBrowser } = require('./screenshots/prepares')
 const screenshotReactStyleguide = require('./screenshots/screenshotReactStyleguide')
-const screenshotStackExamples = require('./screenshots/screenshotStackExamples')
 const screenshotKSSStyleguide = require('./screenshots/screenshotKSSStyleguide')
 const makeParser = require('./screenshots/parser')
 const { readConfig, parseViewportArgument } = require('./screenshots/helpers')
@@ -38,8 +37,6 @@ const main = async () => {
 
   if (args.mode == 'react') {
     await screenshotReactStyleguide(page, args, config)
-  } else if (args.mode == 'stack') {
-    await screenshotStackExamples(page, args)
   } else if (args.mode == 'kss') {
     await screenshotKSSStyleguide(page, args)
   }

package/transpiled/react/Icons/WarningCircle.js

@@ -7,7 +7,7 @@ function SvgWarningCircle(props) {
     viewBox: "0 0 16 16"
   }, props), React.createElement("path", {
     fillRule: "evenodd",
-    d: "M8 0a8 8 0 110 16A8 8 0 018 0zm0 9.75a1.25 1.25 0 100 2.5 1.25 1.25 0 000-2.5zM8 4a1 1 0 00-.993.883L7 5v3a1 1 0 001.993.117L9 8V5a1 1 0 00-1-1z"
+    d: "M8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0ZM8 9.75C7.30964 9.75 6.75 10.3096 6.75 11C6.75 11.6904 7.30964 12.25 8 12.25C8.69036 12.25 9.25 11.6904 9.25 11C9.25 10.3096 8.69036 9.75 8 9.75ZM8 4C7.48716 4 7.06449 4.38604 7.00673 4.88338L7 5V8C7 8.55228 7.44772 9 8 9C8.51284 9 8.93551 8.61396 8.99327 8.11662L9 8V5C9 4.44772 8.55228 4 8 4Z"
   }));
 }
 

package/transpiled/react/MuiCozyTheme/makeOverrides.js

@@ -457,6 +457,18 @@ var makeOverrides = function makeOverrides(theme) {
           fontSize: '.5rem'
         }
       },
+      anchorOriginTopRightRectangle: {
+        transform: 'scale(1) translate(37%, -37%)'
+      },
+      anchorOriginBottomRightRectangle: {
+        transform: 'scale(1) translate(37%, 37%)'
+      },
+      anchorOriginBottomLeftRectangle: {
+        transform: 'scale(1) translate(-37%, 37%)'
+      },
+      anchorOriginTopLeftRectangle: {
+        transform: 'scale(1) translate(-37%, -37%)'
+      },
       dot: {
         borderRadius: '100%',
         padding: 0,

package/transpiled/react/MuiCozyTheme/makeTheme.js

@@ -25,6 +25,9 @@ var themesCommonConfig = _objectSpread({
   zIndex: {
     modal: getCssVariableValue('zIndex-modal')
   },
+  textShadows: ['none', '0px 2px 8px rgba(29, 33, 42, 0.16), 0px 0px 1px rgba(29, 33, 42, 0.48)'],
+  shadows: makeShadows(),
+  // Shadow ar not linked to themes
   props: {
     MuiTabs: {
       textColor: 'primary',
@@ -57,8 +60,7 @@ export var makeTheme = function makeTheme(type) {
   var palette = makePalette(type);
   var theme = createMuiTheme(_objectSpread({}, themesCommonConfig, {
     typography: makeTypography(palette),
-    palette: palette,
-    shadows: makeShadows()
+    palette: palette
   }));
   var overrides = makeThemeOverrides(theme);
   return _objectSpread({}, theme, {