From 3792d102dd834258533199dae98e2c16835ed9e1 Mon Sep 17 00:00:00 2001
From: doubleface <christophe@cozycloud.cc>
Date: Fri, 15 Oct 2021 09:26:25 +0200
Subject: [PATCH] fix: Display shortcut letter as upper case in SquareAppIcon

---
 react/SquareAppIcon/SquareAppIcon.spec.js     |  5 +++
 .../__snapshots__/SquareAppIcon.spec.js.snap  | 44 +++++++++++++++++++
 react/SquareAppIcon/index.jsx                 |  2 +-
 3 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/react/SquareAppIcon/SquareAppIcon.spec.js b/react/SquareAppIcon/SquareAppIcon.spec.js
index 37c070f5d6..bc841f982f 100644
--- a/react/SquareAppIcon/SquareAppIcon.spec.js
+++ b/react/SquareAppIcon/SquareAppIcon.spec.js
@@ -61,4 +61,9 @@ describe('SquareAppIcon component', () => {
     const root = render(<Wrapper variant="add" />)
     expect(root.getByTestId('square-app-icon')).toMatchSnapshot()
   })
+
+  it('should render correctly an app in shortcut state', () => {
+    const root = render(<Wrapper variant="shortcut" name="shortcut" />)
+    expect(root.getByTestId('square-app-icon')).toMatchSnapshot()
+  })
 })
diff --git a/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap b/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap
index 652973bcd9..11e41567ac 100644
--- a/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap
+++ b/react/SquareAppIcon/__snapshots__/SquareAppIcon.spec.js.snap
@@ -293,3 +293,47 @@ exports[`SquareAppIcon component should render correctly an app in maintenance s
   </h6>
 </div>
 `;
+
+exports[`SquareAppIcon component should render correctly an app in shortcut state 1`] = `
+<div
+  data-testid="square-app-icon"
+>
+  <span
+    class="MuiBadge-root"
+  >
+    <span
+      class="MuiBadge-root styles__SquareAppIcon-wrapper___2SEuM"
+      style="background-color: rgb(61, 166, 126);"
+    >
+      <h2
+        class="MuiTypography-root makeStyles-letter-23 MuiTypography-h2 MuiTypography-alignCenter"
+      >
+        S
+      </h2>
+      <span
+        class="MuiBadge-badge badgeSizeMedium MuiBadge-anchorOriginTopRightRectangle"
+      />
+    </span>
+    <span
+      class="MuiBadge-badge Component-qualifier-24 MuiBadge-anchorOriginBottomRightRectangle"
+    >
+      <svg
+        class="styles__icon___23x3R"
+        height="10"
+        viewBox="0 0 16 16"
+        width="10"
+      >
+        <path
+          d="M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </span>
+  </span>
+  <h6
+    class="MuiTypography-root makeStyles-name-22 MuiTypography-h6 MuiTypography-noWrap MuiTypography-alignCenter"
+  >
+    shortcut
+  </h6>
+</div>
+`;
diff --git a/react/SquareAppIcon/index.jsx b/react/SquareAppIcon/index.jsx
index d98c636537..44f465d2d1 100644
--- a/react/SquareAppIcon/index.jsx
+++ b/react/SquareAppIcon/index.jsx
@@ -73,7 +73,7 @@ export const SquareAppIcon = ({ app, name, variant }) => {
         >
           {variant === 'shortcut' ? (
             <Typography className={classes.letter} variant="h2" align="center">
-              {letter}
+              {letter.toUpperCase()}
             </Typography>
           ) : (
             <div className={styles['SquareAppIcon-icon-container']}>