From abf309fd6dfec3606f9bb24dbe118c3ed396bdb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niklas=20Ramstr=C3=B6m?= <niklasra@axis.com>
Date: Wed, 12 Jun 2024 16:55:04 +0200
Subject: [PATCH] feat(topbar): add new look for application drawer trigger
 button when triggerGroupShortName is set

---
 .../topbar/src/application-drawer.styles.ts   | 18 ++++++++++++++++++
 components/topbar/src/application-drawer.tsx  | 19 +++++++++++++++++--
 .../topbar/src/application-drawer.types.ts    |  8 +++++++-
 examples/src/components/top-bar.tsx           |  2 ++
 4 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/components/topbar/src/application-drawer.styles.ts b/components/topbar/src/application-drawer.styles.ts
index 1a8d6503..805bdd37 100644
--- a/components/topbar/src/application-drawer.styles.ts
+++ b/components/topbar/src/application-drawer.styles.ts
@@ -1,5 +1,7 @@
 import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
 
+const triggerSpacingWithGroup = tokens.spacingHorizontalS;
+
 export const useApplicationDrawrStyles = makeStyles({
   drawer: {
     ...shorthands.borderRight(0),
@@ -48,6 +50,10 @@ export const useApplicationDrawrStyles = makeStyles({
     ...shorthands.gap(tokens.spacingHorizontalS),
     ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalM),
   },
+  drawerTriggerApplicationWithGroup: {
+    ...shorthands.gap(triggerSpacingWithGroup),
+    ...shorthands.padding(tokens.spacingVerticalXS, triggerSpacingWithGroup),
+  },
   drawerTriggerApplicationIcon: {
     display: "flex",
     color: tokens.colorNeutralForeground2,
@@ -61,6 +67,18 @@ export const useApplicationDrawrStyles = makeStyles({
   drawerTriggerApplicationText: {
     color: tokens.colorNeutralForeground2,
   },
+  drawerTriggerTextWithGroup: {
+    marginLeft: triggerSpacingWithGroup,
+    color: tokens.colorNeutralForeground2,
+  },
+  triggerDividerWithGroup: {
+    ...shorthands.border("0.5px", "solid", tokens.colorNeutralForeground2),
+    ...shorthands.borderRadius("1px"),
+    height: "12px",
+    boxSizing: "border-box",
+    marginTop: "1px",
+    marginLeft: triggerSpacingWithGroup,
+  },
   applicationGroupTitle: {
     display: "flex",
     alignItems: "center",
diff --git a/components/topbar/src/application-drawer.tsx b/components/topbar/src/application-drawer.tsx
index d66ba724..d01e19bb 100644
--- a/components/topbar/src/application-drawer.tsx
+++ b/components/topbar/src/application-drawer.tsx
@@ -49,10 +49,25 @@ const DrawerTrigger = (
         onMouseLeave={() => setHover(false)}
       >
         {<ApplicationAreaIcon applicationArea={applicationArea} />}
-        <Divider vertical style={{ padding: "0 0 0 12px" }}></Divider>
+        {currentSelection?.triggerGroupShortName
+          ? (
+            <>
+              <Body1Strong className={styles.drawerTriggerTextWithGroup}>
+                {currentSelection?.triggerGroupShortName}
+              </Body1Strong>
+              <div className={styles.triggerDividerWithGroup}></div>
+            </>
+          )
+          : <Divider vertical style={{ padding: "0 0 0 12px" }}></Divider>}
         {currentSelection
           ? (
-            <div className={styles.drawerTriggerApplication}>
+            <div
+              className={mergeClasses(
+                styles.drawerTriggerApplication,
+                currentSelection?.triggerGroupShortName
+                  && styles.drawerTriggerApplicationWithGroup
+              )}
+            >
               <div
                 className={mergeClasses(
                   styles.drawerTriggerApplicationIcon,
diff --git a/components/topbar/src/application-drawer.types.ts b/components/topbar/src/application-drawer.types.ts
index 53fb8321..e140401b 100644
--- a/components/topbar/src/application-drawer.types.ts
+++ b/components/topbar/src/application-drawer.types.ts
@@ -12,11 +12,17 @@ export type SingleApplicationDrawerContent = {
   icon: JSX.Element;
   /** Label to show in opened drawer. */
   label: string;
-  /** Label to show in drawer trigger button when drawer is closed.
+  /**
+   * @deprecated
+   *  Label to show in drawer trigger button when drawer is closed.
    *  If not set, label will be used.
    *  Unused for content with children.
    */
   triggerLabel?: string;
+  /**
+   * Group label to show before triggerLabel
+   */
+  triggerGroupShortName?: string;
 };
 
 export type ApplicationDrawerProps = {
diff --git a/examples/src/components/top-bar.tsx b/examples/src/components/top-bar.tsx
index a274ca5f..bb3eb3fd 100644
--- a/examples/src/components/top-bar.tsx
+++ b/examples/src/components/top-bar.tsx
@@ -85,6 +85,7 @@ export const Navbar = () => {
           icon: <FishIcon />,
           label: "Fisk",
           id: "fisk",
+          triggerGroupShortName: "FISH",
         },
         {
           icon: <CatIcon />,
@@ -98,6 +99,7 @@ export const Navbar = () => {
       label: "Add",
       triggerLabel: "ADD trigger",
       id: "add",
+      triggerGroupShortName: "ADD",
     },
   ];