feat(SquareAppIcon): Hide shortcut badges for a more app like feel

By default, the badges are displayed for the shortcut variant, but in some cases you want to be able to hide them so that they look more like applications
cozy · Nov 18, 2024 · 49d8438 · 49d8438
1 parent 2b3d0ea
commit 49d8438
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 15 deletions.
diff --git a/react/SquareAppIcon/Readme.md b/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>
 </>

diff --git a/react/SquareAppIcon/index.jsx b/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}