From 80678f43b165e5ac9294b505a714c5ff3a653e01 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 9 Feb 2024 13:40:28 -0800
Subject: [PATCH] [storybook] Improve default story to show off more
 styles/states

+ fix nested caret alignment
---
 src/components/side_nav/side_nav.stories.tsx  | 84 +++++++++++++++----
 .../side_nav/side_nav_item.styles.ts          |  1 +
 2 files changed, 67 insertions(+), 18 deletions(-)

diff --git a/src/components/side_nav/side_nav.stories.tsx b/src/components/side_nav/side_nav.stories.tsx
index 50effd3989b2..e16371946b7c 100644
--- a/src/components/side_nav/side_nav.stories.tsx
+++ b/src/components/side_nav/side_nav.stories.tsx
@@ -43,43 +43,91 @@ type Story = StoryObj<EuiSideNavProps>;
 
 const sharedSideNavItems = [
   {
-    name: 'Has nested children',
-    id: 'normal_children',
+    name: 'Root item with carets',
+    id: 'root_1',
     items: [
       {
-        name: 'Child 1',
-        id: 'child_1',
+        name: 'Trunk 1',
+        id: 'trunk_1',
         items: [
           {
-            name: 'Selected item',
-            id: 'selected_item',
+            name: 'Emphasized branch',
+            id: 'emphasized_branch',
+            icon: <EuiIcon type="faceHappy" />,
+            emphasize: true,
+            items: [
+              {
+                name: 'Yet another branch',
+                id: 'branch_1',
+                onClick: () => {},
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: 'Root item without carets',
+    id: 'root_2',
+    items: [
+      {
+        name: 'Trunk 2',
+        id: 'trunk_2',
+        onClick: () => {}, // Causes the caret to not render
+        items: [
+          {
+            name: 'Branch 2',
+            id: 'branch_2',
             onClick: () => {},
-            isSelected: true,
-            items: [],
+            items: [
+              {
+                name: 'All parents are open because this branch is selected',
+                id: 'selected_branch',
+                onClick: () => {},
+                isSelected: true,
+                truncate: false,
+              },
+            ],
           },
         ],
       },
     ],
   },
   {
-    name: 'Has forceOpen: true',
-    id: 'force_open',
-    forceOpen: true,
+    name: 'Root item with forced open children',
+    id: 'root_3',
     items: [
       {
-        name: 'Child 3',
-        id: 'child_3',
+        name: 'Trunk 3',
+        id: 'trunk_3',
+        onClick: () => {},
+        forceOpen: true,
+        items: [
+          {
+            name: 'Disabled branch',
+            id: 'disabled_branch',
+            href: '#',
+            disabled: true,
+            icon: <EuiIcon type="faceSad" />,
+          },
+        ],
       },
     ],
   },
   {
-    name: 'Children only without link',
-    id: 'children_only',
-    onClick: undefined,
+    name: 'Root item with icon and truncation',
+    icon: <EuiIcon type="logoElastic" />,
+    id: 'root_4',
     items: [
       {
-        name: 'Child 4',
-        id: 'child_4',
+        name: 'Very very long text, truncated by default',
+        id: 'truncated',
+      },
+      {
+        name: 'Very very long text, truncate set to false',
+        id: 'truncateFalse',
+        truncate: false,
       },
     ],
   },
diff --git a/src/components/side_nav/side_nav_item.styles.ts b/src/components/side_nav/side_nav_item.styles.ts
index 423fe2825441..8083a4869f4a 100644
--- a/src/components/side_nav/side_nav_item.styles.ts
+++ b/src/components/side_nav/side_nav_item.styles.ts
@@ -75,6 +75,7 @@ export const euiSideNavItemStyles = (euiThemeContext: UseEuiTheme) => {
         ${logicalCSS('margin-left', euiTheme.size.l)}
       `,
       trunk: css`
+        ${logicalCSS('width', '100%')} /* Needed for trunks with carets */
         ${logicalCSS('margin-left', euiTheme.size.s)}
       `,
       branch: css`