cozy-ui 70.2.1 → 70.2.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [70.2.2](https://github.com/cozy/cozy-ui/compare/v70.2.1...v70.2.2) (2022-07-26)
+
+
+### Bug Fixes
+
+* Shortcut with IconContent ([a83c320](https://github.com/cozy/cozy-ui/commit/a83c320))
+
 ## [70.2.1](https://github.com/cozy/cozy-ui/compare/v70.2.0...v70.2.1) (2022-07-25)
 
 

package/package.json

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

package/react/SquareAppIcon/Readme.md

@@ -35,6 +35,19 @@ const app = { name: "Test App", slug: "testapp", type: "app" }
   <Grid item>
     <SquareAppIcon name="Shortcut" variant="shortcut" />
   </Grid>
+  <Grid item>
+    <SquareAppIcon name="Shortcut" variant="shortcut" IconContent={<img
+            src={`data:image/svg+xml;base64,${window.btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <g fill="none" fill-rule="evenodd" transform="translate(0 2)">
+    <rect width="32" height="26" y="2" fill="#B2D3FF" rx="2"/>
+    <path fill="#197BFF" d="M0,0.990777969 C0,0.443586406 0.449948758,0 1.00684547,0 L12.9931545,0 C13.5492199,0 14.3125,0.3125 14.7107565,0.71075654 L15.2892435,1.28924346 C15.6817835,1.68178346 16.4446309,2 17.0008717,2 L30.0059397,2 C31.1072288,2 32,2.89470506 32,4 L32,4 L17.0008717,4 C16.4481055,4 15.6875,4.3125 15.2892435,4.71075654 L14.7107565,5.28924346 C14.3182165,5.68178346 13.5500512,6 12.9931545,6 L1.00684547,6 C0.450780073,6 0,5.54902482 0,5.00922203 L0,0.990777969 Z"/>
+  </g>
+</svg>`)}`}
+            width={32}
+            height={32}
+            alt={"Shortcut"}
+          />}/>
+  </Grid>
   <Grid item>
     <SquareAppIcon name="Custom Icon" IconContent={<Icon icon={CozyIcon} size="48" />} />
   </Grid>

package/react/SquareAppIcon/SquareAppIcon.spec.js

@@ -69,6 +69,17 @@ describe('SquareAppIcon component', () => {
     expect(root.getByTestId('square-app-icon')).toMatchSnapshot()
   })
 
+  it('should display icon-content an app with icon content in shortcut state', () => {
+    const { queryByTestId } = render(
+      <Wrapper
+        variant="shortcut"
+        name="shortcut"
+        IconContent={<Icon data-testid="icon-content" icon={CozyIcon} />}
+      />
+    )
+    expect(queryByTestId('icon-content')).toBeTruthy()
+  })
+
   it('should render correctly an app with custom content', () => {
     const root = render(
       <Wrapper name="custom icon" IconContent={<Icon icon={CozyIcon} />} />

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

@@ -358,14 +358,14 @@ exports[`SquareAppIcon component should render correctly an app in shortcut stat
 
 exports[`SquareAppIcon component should render correctly an app with custom content 1`] = `
 <div
-  class="makeStyles-tileWrapper-53"
+  class="makeStyles-tileWrapper-59"
   data-testid="square-app-icon"
 >
   <span
     class="MuiBadge-root"
   >
     <span
-      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-51"
+      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM makeStyles-shadow-57"
     >
       <div
         class="styles__SquareAppIcon-icon-container___39MRl"
@@ -388,11 +388,11 @@ exports[`SquareAppIcon component should render correctly an app with custom cont
       />
     </span>
     <span
-      class="MuiBadge-badge Component-qualifier-54 MuiBadge-anchorOriginBottomRightRectangular MuiBadge-invisible"
+      class="MuiBadge-badge Component-qualifier-60 MuiBadge-anchorOriginBottomRightRectangular MuiBadge-invisible"
     />
   </span>
   <h6
-    class="MuiTypography-root makeStyles-name-49 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
+    class="MuiTypography-root makeStyles-name-55 u-spacellipsis MuiTypography-h6 MuiTypography-colorTextPrimary MuiTypography-alignCenter"
   >
     custom icon
   </h6>

package/react/SquareAppIcon/index.jsx

@@ -109,12 +109,12 @@ export const SquareAppIcon = ({
           size="large"
           overlap="rectangular"
           style={
-            variant === 'shortcut'
+            variant === 'shortcut' && !IconContent
               ? { backgroundColor: nameToColor(name) }
               : null
           }
         >
-          {variant === 'shortcut' ? (
+          {variant === 'shortcut' && !IconContent ? (
             <Typography className={classes.letter} variant="h2" align="center">
               {letter.toUpperCase()}
             </Typography>

package/transpiled/react/SquareAppIcon/index.js

@@ -105,10 +105,10 @@ export var SquareAppIcon = function SquareAppIcon(_ref) {
     withBorder: false,
     size: "large",
     overlap: "rectangular",
-    style: variant === 'shortcut' ? {
+    style: variant === 'shortcut' && !IconContent ? {
       backgroundColor: nameToColor(name)
     } : null
-  }, variant === 'shortcut' ? /*#__PURE__*/React.createElement(Typography, {
+  }, variant === 'shortcut' && !IconContent ? /*#__PURE__*/React.createElement(Typography, {
     className: classes.letter,
     variant: "h2",
     align: "center"