From c898f87e1149ea6da1c67e54d606aab4482323f1 Mon Sep 17 00:00:00 2001
From: Nana Mochihara <nana.mochihara@axis.com>
Date: Fri, 2 Feb 2024 13:31:24 +0100
Subject: [PATCH] feat(styles): add navigation style (#180)

Note: we need to use both this style and Tab style to create a
navigation component in each application. Also make sure that you use
"large" size TabList.
---
 styles/src/index.ts                        |  1 +
 styles/src/navigation/navigation.styles.ts | 36 ++++++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 styles/src/navigation/navigation.styles.ts

diff --git a/styles/src/index.ts b/styles/src/index.ts
index 7909b14d..4c3d395c 100644
--- a/styles/src/index.ts
+++ b/styles/src/index.ts
@@ -1,3 +1,4 @@
+export * from "./navigation/navigation.styles";
 export * from "./static/static.styles";
 export * from "./tab-list/tab-list.styles";
 export * from "./tab-list/tab.styles";
diff --git a/styles/src/navigation/navigation.styles.ts b/styles/src/navigation/navigation.styles.ts
new file mode 100644
index 00000000..076553a4
--- /dev/null
+++ b/styles/src/navigation/navigation.styles.ts
@@ -0,0 +1,36 @@
+import { makeStyles, shorthands, tokens } from "@fluentui/react-components";
+
+/**
+ * How to use:
+ * ```
+ * <div className={navStyles.container}>
+ *   <TabList
+ *     className={navStyles.tabList}
+ *     size="large"
+ *     vertical
+ *   >
+ *     <Tab />
+ *     <Tab />
+ *     <div className={navStyles.spacer}/>
+ *     <Tab />
+ *   </TabList>
+ * </div>
+ * ```
+ */
+export const useNavigationStyles = makeStyles({
+  container: {
+    ...shorthands.padding(
+      tokens.spacingVerticalXXL,
+      tokens.spacingHorizontalS,
+      tokens.spacingVerticalL
+    ),
+    backgroundColor: tokens.colorNeutralBackground4,
+  },
+  spacer: {
+    flexGrow: 1,
+  },
+  tabList: {
+    height: "100%",
+    rowGap: tokens.spacingVerticalXS,
+  },
+});