cozy-ui 113.2.0 → 113.3.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [113.3.0](https://github.com/cozy/cozy-ui/compare/v113.2.0...v113.3.0) (2024-11-18)
+
+
+### Features
+
+* **SquareAppIcon:** Hide shortcut badges for a more app like feel ([49d8438](https://github.com/cozy/cozy-ui/commit/49d8438))
+
 # [113.2.0](https://github.com/cozy/cozy-ui/compare/v113.1.0...v113.2.0) (2024-11-14)
 
 

package/package.json

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

package/react/SquareAppIcon/Readme.md

@@ -14,12 +14,14 @@ const { variant } = useCozyTheme()
 const app = { name: "Test App", slug: "testapp", type: "app" }
 const [isLoading, setLoading] = React.useState(false)
 const [isError, setIsError] = React.useState(false)
+const [isShortcutBadgeHide, setShortcutBadgeHide] = React.useState(false)
 
 ;
 
 <>
   <Button className="u-mb-1 u-mr-1" label="Toggle Loading" onClick={() => setLoading(!isLoading)} />
-  <Button className="u-mb-1" label="Toggle Loading Error" onClick={() => setIsError(!isError)} />
+  <Button className="u-mb-1 u-mr-1" label="Toggle Loading Error" onClick={() => setIsError(!isError)} />
+  <Button className="u-mb-1" label="Hide shortcut badge" onClick={() => setShortcutBadgeHide(!isShortcutBadgeHide)} />
 
   <Grid container spacing={1} style={{ background: variant === 'inverted' ? `center / cover no-repeat url(${cloudWallpaper})` : 'white' }}
   >
@@ -39,7 +41,7 @@ const [isError, setIsError] = React.useState(false)
       <SquareAppIcon app="testapp" name="No Account long name very very very very long" variant="ghost" />
     </Grid>
     <Grid item>
-      <SquareAppIcon name="Shortcut" variant="shortcut" />
+      <SquareAppIcon name="Shortcut" variant="shortcut" hideShortcutBadge={isShortcutBadgeHide} />
     </Grid>
     <Grid item>
       <SquareAppIcon IconContent={<Icon icon={CozyIcon} size="48" />} name="Loading" variant={isLoading ? 'loading' : 'default'} />
@@ -58,7 +60,7 @@ const [isError, setIsError] = React.useState(false)
               width={32}
               height={32}
               alt={"Shortcut"}
-            />}/>
+            />} hideShortcutBadge={isShortcutBadgeHide} />
     </Grid>
     <Grid item>
       <SquareAppIcon name="Custom Icon" IconContent={<Icon icon={CozyIcon} size="48" />} />
@@ -103,40 +105,78 @@ const { variant } = useCozyTheme()
 const app = { name: "Test App", slug: "testapp", type: "app" }
 const [isLoading, setLoading] = React.useState(false)
 const [isError, setIsError] = React.useState(false)
+const [isShortcutBadgeHide, setShortcutBadgeHide] = React.useState(false)
 
 ;
 
 <>
   <Button className="u-mb-1 u-mr-1" label="Toggle Loading" onClick={() => setLoading(!isLoading)} />
-  <Button className="u-mb-1" label="Toggle Loading Error" onClick={() => setIsError(!isError)} />
+  <Button className="u-mb-1 u-mr-1" label="Toggle Loading Error" onClick={() => setIsError(!isError)} />
+    <Button className="u-mb-1" label="Hide shortcut badge" onClick={() => setShortcutBadgeHide(!isShortcutBadgeHide)} />
 
   <Grid container spacing={4}>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Weather Wiz" description="Get real-time weather updates and forecasts" />
+      <SquareAppIcon
+        display="detailed"
+        name="Weather Wiz"
+        description="Get real-time weather updates and forecasts" />
     </Grid>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Meal Planner" description="Plan your meals with nutrition tracking" variant="maintenance" />
+      <SquareAppIcon
+        display="detailed"
+        name="Meal Planner"
+        description="Plan your meals with nutrition tracking"
+        variant="maintenance" />
     </Grid>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Travel Tracker" description="Explore and document your travel adventures" variant="error" />
+      <SquareAppIcon
+        display="detailed"
+        name="Travel Tracker"
+        description="Explore and document your travel adventures"
+        variant="error" />
     </Grid>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Fitness Friend" variant="add" />
+      <SquareAppIcon
+        display="detailed"
+        name="Fitness Friend"
+        variant="add" />
     </Grid>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Mindful Moments" description="Guided meditations for daily mindfulness" variant="ghost" />
+      <SquareAppIcon
+        display="detailed"
+        name="Mindful Moments"
+        description="Guided meditations for daily mindfulness"
+        variant="ghost" />
     </Grid>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Study Space" description="Organize your study schedule and resources" variant="shortcut" />
+      <SquareAppIcon
+        display="detailed"
+        name="Study Space"
+        description="Organize your study schedule and resources"
+        variant="shortcut"
+        hideShortcutBadge={isShortcutBadgeHide} />
     </Grid>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Quick Notes" IconContent={<Icon icon={CozyIcon} size="48" />} variant={isLoading ? 'loading' : 'default'} />
+      <SquareAppIcon
+        display="detailed"
+        name="Quick Notes"
+        IconContent={<Icon icon={CozyIcon} size="48" />}
+        variant={isLoading ? 'loading' : 'default'} />
     </Grid>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Daily Budget" description="Manage your daily expenses and budgets" IconContent={<Icon icon={CozyIcon} size="48" />} variant={isError ? 'error' : 'loading'} />
+      <SquareAppIcon
+        display="detailed"
+        name="Daily Budget"
+        description="Manage your daily expenses and budgets"
+        IconContent={<Icon icon={CozyIcon} size="48" />}
+        variant={isError ? 'error' : 'loading'} />
     </Grid>
     <Grid item xs={4}>
-      <SquareAppIcon display="detailed" name="Event Planner" description="Plan and schedule your events effectively" IconContent={<Icon icon={CozyIcon} size="48" />} />
+      <SquareAppIcon
+        display="detailed"
+        name="Event Planner"
+        description="Plan and schedule your events effectively"
+        IconContent={<Icon icon={CozyIcon} size="48" />} />
     </Grid>
   </Grid>
 </>

package/react/SquareAppIcon/index.jsx

@@ -100,6 +100,7 @@ export const SquareAppIcon = ({
   variant,
   IconContent,
   description,
+  hideShortcutBadge = false,
   ...appIconProps
 }) => {
   const { variant: themeVariant } = useCozyTheme()
@@ -139,11 +140,13 @@ export const SquareAppIcon = ({
       <CozyTheme variant={squareTheme}>
         <InfosBadge
           badgeContent={
-            variant === 'shortcut' ? <Icon size="10" icon={iconOut} /> : null
+            variant === 'shortcut' && !hideShortcutBadge ? (
+              <Icon size="10" icon={iconOut} />
+            ) : null
           }
           className={cx({ ['u-mr-1']: display === 'detailed' })}
           overlap="rectangular"
-          invisible={variant !== 'shortcut'}
+          invisible={variant !== 'shortcut' || hideShortcutBadge}
         >
           <SquareAppIconSpinner
             variant={variant}

package/transpiled/react/SquareAppIcon/index.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["display", "name", "variant", "IconContent", "description"];
+var _excluded = ["display", "name", "variant", "IconContent", "description", "hideShortcutBadge"];
 import cx from 'classnames';
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
@@ -115,6 +115,8 @@ export var SquareAppIcon = function SquareAppIcon(_ref2) {
       variant = _ref2.variant,
       IconContent = _ref2.IconContent,
       description = _ref2.description,
+      _ref2$hideShortcutBad = _ref2.hideShortcutBadge,
+      hideShortcutBadge = _ref2$hideShortcutBad === void 0 ? false : _ref2$hideShortcutBad,
       appIconProps = _objectWithoutProperties(_ref2, _excluded);
 
   var _useCozyTheme = useCozyTheme(),
@@ -147,13 +149,13 @@ export var SquareAppIcon = function SquareAppIcon(_ref2) {
   }, /*#__PURE__*/React.createElement(CozyTheme, {
     variant: squareTheme
   }, /*#__PURE__*/React.createElement(InfosBadge, {
-    badgeContent: variant === 'shortcut' ? /*#__PURE__*/React.createElement(Icon, {
+    badgeContent: variant === 'shortcut' && !hideShortcutBadge ? /*#__PURE__*/React.createElement(Icon, {
       size: "10",
       icon: iconOut
     }) : null,
     className: cx(_defineProperty({}, 'u-mr-1', display === 'detailed')),
     overlap: "rectangular",
-    invisible: variant !== 'shortcut'
+    invisible: variant !== 'shortcut' || hideShortcutBadge
   }, /*#__PURE__*/React.createElement(SquareAppIconSpinner, {
     variant: variant,
     animationState: animationState