From d686b3e40af54a6a755307c7d3a709ed2819ec16 Mon Sep 17 00:00:00 2001
From: edlu77 <eddd.lu@gmail.com>
Date: Thu, 15 Aug 2024 17:24:27 -0400
Subject: [PATCH 1/8] Create menu component

---
 libs/design-system/menu/ng-package.json        |  5 +++++
 libs/design-system/menu/src/index.ts           |  1 +
 .../menu/src/lib/menu.component.html           |  1 +
 .../menu/src/lib/menu.component.scss           |  3 +++
 .../menu/src/lib/menu.component.stories.ts     | 18 ++++++++++++++++++
 .../menu/src/lib/menu.component.ts             | 12 ++++++++++++
 tsconfig.base.json                             |  3 +++
 7 files changed, 43 insertions(+)
 create mode 100644 libs/design-system/menu/ng-package.json
 create mode 100644 libs/design-system/menu/src/index.ts
 create mode 100644 libs/design-system/menu/src/lib/menu.component.html
 create mode 100644 libs/design-system/menu/src/lib/menu.component.scss
 create mode 100644 libs/design-system/menu/src/lib/menu.component.stories.ts
 create mode 100644 libs/design-system/menu/src/lib/menu.component.ts

diff --git a/libs/design-system/menu/ng-package.json b/libs/design-system/menu/ng-package.json
new file mode 100644
index 000000000..c781f0df4
--- /dev/null
+++ b/libs/design-system/menu/ng-package.json
@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}
diff --git a/libs/design-system/menu/src/index.ts b/libs/design-system/menu/src/index.ts
new file mode 100644
index 000000000..eba493818
--- /dev/null
+++ b/libs/design-system/menu/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/menu.component';
diff --git a/libs/design-system/menu/src/lib/menu.component.html b/libs/design-system/menu/src/lib/menu.component.html
new file mode 100644
index 000000000..136889fdd
--- /dev/null
+++ b/libs/design-system/menu/src/lib/menu.component.html
@@ -0,0 +1 @@
+<p>menu works!</p>
diff --git a/libs/design-system/menu/src/lib/menu.component.scss b/libs/design-system/menu/src/lib/menu.component.scss
new file mode 100644
index 000000000..5d4e87f30
--- /dev/null
+++ b/libs/design-system/menu/src/lib/menu.component.scss
@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}
diff --git a/libs/design-system/menu/src/lib/menu.component.stories.ts b/libs/design-system/menu/src/lib/menu.component.stories.ts
new file mode 100644
index 000000000..91b59d7d0
--- /dev/null
+++ b/libs/design-system/menu/src/lib/menu.component.stories.ts
@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { MenuComponent } from './menu.component';
+
+const meta: Meta = {
+  component: MenuComponent,
+  title: 'MenuComponent',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/Design-System-Components?node-id=619-1552',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<MenuComponent>;
+
+export const Primary: Story = {};
diff --git a/libs/design-system/menu/src/lib/menu.component.ts b/libs/design-system/menu/src/lib/menu.component.ts
new file mode 100644
index 000000000..79f04d2be
--- /dev/null
+++ b/libs/design-system/menu/src/lib/menu.component.ts
@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'hra-menu',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './menu.component.html',
+  styleUrl: './menu.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MenuComponent {}
diff --git a/tsconfig.base.json b/tsconfig.base.json
index e6aba0672..fb252f403 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -74,6 +74,9 @@
       "@hra-ui/design-system/icon-button": [
         "libs/design-system/icon-button/src/index.ts"
       ],
+      "@hra-ui/design-system/menu": [
+        "libs/design-system/menu/src/index.ts"
+      ],
       "@hra-ui/design-system/nav-header": [
         "libs/design-system/nav-header/src/index.ts"
       ],

From cfb2a83557d9fcce32e5b649bfe2f3578e882d2a Mon Sep 17 00:00:00 2001
From: edlu77 <eddd.lu@gmail.com>
Date: Thu, 15 Aug 2024 19:42:19 -0400
Subject: [PATCH 2/8] Add menu content

---
 .../menu/src/lib/menu.component.html          | 55 ++++++++++++++++++-
 .../menu/src/lib/menu.component.stories.ts    | 10 +++-
 .../menu/src/lib/menu.component.ts            |  7 ++-
 3 files changed, 68 insertions(+), 4 deletions(-)

diff --git a/libs/design-system/menu/src/lib/menu.component.html b/libs/design-system/menu/src/lib/menu.component.html
index 136889fdd..49c2b5811 100644
--- a/libs/design-system/menu/src/lib/menu.component.html
+++ b/libs/design-system/menu/src/lib/menu.component.html
@@ -1 +1,54 @@
-<p>menu works!</p>
+<button
+  mat-icon-button
+  [matMenuTriggerFor]="options"
+  hraIconButtonSize="medium"
+  aria-label="Example icon-button with a menu"
+>
+  <mat-icon>more_vert</mat-icon>
+</button>
+
+<mat-menu #options="matMenu">
+  <button mat-menu-item [matMenuTriggerFor]="downloads">
+    <mat-icon>download</mat-icon>
+    Downloads
+  </button>
+  <button mat-menu-item>
+    <mat-icon>fullscreen</mat-icon>
+    Full Screen
+  </button>
+  <button mat-menu-item>
+    <mat-icon>visibility_off</mat-icon>
+    Hide Cell Links
+  </button>
+  <button mat-menu-item>
+    <mat-icon>code</mat-icon>
+    Embed App
+  </button>
+  <button mat-menu-item>
+    <mat-icon>info</mat-icon>
+    Help
+  </button>
+</mat-menu>
+
+<mat-menu #downloads="matMenu">
+  <button mat-menu-item>
+    <mat-icon>download</mat-icon>
+    Cells CSV
+  </button>
+  <button mat-menu-item>
+    <mat-icon>download</mat-icon>
+    Cell Links CSV
+  </button>
+  <button mat-menu-item>
+    <mat-icon>download</mat-icon>
+    Cells & Cell Links ZIP
+  </button>
+  <button mat-menu-item>
+    <mat-icon>download</mat-icon>
+    Color Map CSV
+  </button>
+  <button mat-menu-item>
+    <mat-icon>info</mat-icon>
+    <span>Help</span>
+  </button>
+</mat-menu>
diff --git a/libs/design-system/menu/src/lib/menu.component.stories.ts b/libs/design-system/menu/src/lib/menu.component.stories.ts
index 91b59d7d0..126df7bd0 100644
--- a/libs/design-system/menu/src/lib/menu.component.stories.ts
+++ b/libs/design-system/menu/src/lib/menu.component.stories.ts
@@ -1,4 +1,7 @@
-import { Meta, StoryObj } from '@storybook/angular';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideDesignSystem } from '@hra-ui/design-system';
+import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
+
 import { MenuComponent } from './menu.component';
 
 const meta: Meta = {
@@ -10,6 +13,11 @@ const meta: Meta = {
       url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/Design-System-Components?node-id=619-1552',
     },
   },
+  decorators: [
+    applicationConfig({
+      providers: [provideAnimations(), provideDesignSystem()],
+    }),
+  ],
 };
 
 export default meta;
diff --git a/libs/design-system/menu/src/lib/menu.component.ts b/libs/design-system/menu/src/lib/menu.component.ts
index 79f04d2be..9ac657a9d 100644
--- a/libs/design-system/menu/src/lib/menu.component.ts
+++ b/libs/design-system/menu/src/lib/menu.component.ts
@@ -1,10 +1,13 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { IconButtonSizeDirective } from '@hra-ui/design-system/icon-button';
 
 @Component({
   selector: 'hra-menu',
   standalone: true,
-  imports: [CommonModule],
+  imports: [MatButtonModule, MatMenuModule, MatIconModule, IconButtonSizeDirective],
   templateUrl: './menu.component.html',
   styleUrl: './menu.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

From bc1299a8bf05a4ef6d4ceb9a5781ac9e3c1a7b37 Mon Sep 17 00:00:00 2001
From: edlu77 <eddd.lu@gmail.com>
Date: Thu, 15 Aug 2024 20:30:05 -0400
Subject: [PATCH 3/8] Add styles

---
 libs/design-system/menu/src/lib/menu.component.html | 4 ++--
 libs/design-system/menu/src/lib/menu.component.scss | 6 ++++--
 libs/design-system/menu/src/lib/menu.component.ts   | 3 ++-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/libs/design-system/menu/src/lib/menu.component.html b/libs/design-system/menu/src/lib/menu.component.html
index 49c2b5811..70782fcf6 100644
--- a/libs/design-system/menu/src/lib/menu.component.html
+++ b/libs/design-system/menu/src/lib/menu.component.html
@@ -7,7 +7,7 @@
   <mat-icon>more_vert</mat-icon>
 </button>
 
-<mat-menu #options="matMenu">
+<mat-menu #options="matMenu" class="hra-menu">
   <button mat-menu-item [matMenuTriggerFor]="downloads">
     <mat-icon>download</mat-icon>
     Downloads
@@ -30,7 +30,7 @@
   </button>
 </mat-menu>
 
-<mat-menu #downloads="matMenu">
+<mat-menu #downloads="matMenu" class="hra-menu">
   <button mat-menu-item>
     <mat-icon>download</mat-icon>
     Cells CSV
diff --git a/libs/design-system/menu/src/lib/menu.component.scss b/libs/design-system/menu/src/lib/menu.component.scss
index 5d4e87f30..4abdce74a 100644
--- a/libs/design-system/menu/src/lib/menu.component.scss
+++ b/libs/design-system/menu/src/lib/menu.component.scss
@@ -1,3 +1,5 @@
-:host {
-  display: block;
+.hra-menu {
+  --mat-menu-container-color: white;
+  --mat-menu-container-shape: 0.5rem;
+  --mat-app-elevation-shadow-level-2: 0rem 0.3125rem 1rem 0rem rgb(from var(--sys-secondary) r g b / 0.16);
 }
diff --git a/libs/design-system/menu/src/lib/menu.component.ts b/libs/design-system/menu/src/lib/menu.component.ts
index 9ac657a9d..bbd81b293 100644
--- a/libs/design-system/menu/src/lib/menu.component.ts
+++ b/libs/design-system/menu/src/lib/menu.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
@@ -10,6 +10,7 @@ import { IconButtonSizeDirective } from '@hra-ui/design-system/icon-button';
   imports: [MatButtonModule, MatMenuModule, MatIconModule, IconButtonSizeDirective],
   templateUrl: './menu.component.html',
   styleUrl: './menu.component.scss',
+  encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MenuComponent {}

From 81970be627e6c107f4499852085775570de4537f Mon Sep 17 00:00:00 2001
From: edlu77 <eddd.lu@gmail.com>
Date: Fri, 16 Aug 2024 16:55:20 -0400
Subject: [PATCH 4/8] Style improvements

---
 .../menu/src/lib/menu.component.html          | 75 +++++++--------
 .../menu/src/lib/menu.component.scss          | 91 ++++++++++++++++++-
 .../menu/src/lib/menu.component.stories.ts    | 57 +++++++++++-
 .../menu/src/lib/menu.component.ts            | 25 ++++-
 4 files changed, 198 insertions(+), 50 deletions(-)

diff --git a/libs/design-system/menu/src/lib/menu.component.html b/libs/design-system/menu/src/lib/menu.component.html
index 70782fcf6..1fb11c84c 100644
--- a/libs/design-system/menu/src/lib/menu.component.html
+++ b/libs/design-system/menu/src/lib/menu.component.html
@@ -1,54 +1,41 @@
 <button
   mat-icon-button
   [matMenuTriggerFor]="options"
-  hraIconButtonSize="medium"
-  aria-label="Example icon-button with a menu"
+  [hraIconButtonSize]="size()"
+  aria-label="Icon to open nested menu"
 >
   <mat-icon>more_vert</mat-icon>
 </button>
 
-<mat-menu #options="matMenu" class="hra-menu">
-  <button mat-menu-item [matMenuTriggerFor]="downloads">
-    <mat-icon>download</mat-icon>
-    Downloads
-  </button>
-  <button mat-menu-item>
-    <mat-icon>fullscreen</mat-icon>
-    Full Screen
-  </button>
-  <button mat-menu-item>
-    <mat-icon>visibility_off</mat-icon>
-    Hide Cell Links
-  </button>
-  <button mat-menu-item>
-    <mat-icon>code</mat-icon>
-    Embed App
-  </button>
-  <button mat-menu-item>
-    <mat-icon>info</mat-icon>
-    Help
-  </button>
+<mat-menu #options="matMenu" [class]="'hra-nested-menu ' + size()">
+  @for (option of menuOptions(); track option) {
+    @if (option.expandedOptions) {
+      <button
+        mat-menu-item
+        [matMenuTriggerFor]="submenu"
+        (mouseover)="setSubmenuOptions(option.expandedOptions)"
+        class="expanded"
+        matRipple
+        matRippleColor="#201E3D14"
+      >
+        <mat-icon>{{ option.icon }}</mat-icon>
+        <span>{{ option.title }}</span>
+        <mat-icon class="expand-arrow">arrow_right</mat-icon>
+      </button>
+    } @else {
+      <button mat-menu-item>
+        <mat-icon>{{ option.icon }}</mat-icon>
+        <span>{{ option.title }}</span>
+      </button>
+    }
+  }
 </mat-menu>
 
-<mat-menu #downloads="matMenu" class="hra-menu">
-  <button mat-menu-item>
-    <mat-icon>download</mat-icon>
-    Cells CSV
-  </button>
-  <button mat-menu-item>
-    <mat-icon>download</mat-icon>
-    Cell Links CSV
-  </button>
-  <button mat-menu-item>
-    <mat-icon>download</mat-icon>
-    Cells & Cell Links ZIP
-  </button>
-  <button mat-menu-item>
-    <mat-icon>download</mat-icon>
-    Color Map CSV
-  </button>
-  <button mat-menu-item>
-    <mat-icon>info</mat-icon>
-    <span>Help</span>
-  </button>
+<mat-menu #submenu="matMenu" [class]="'hra-nested-menu ' + size()">
+  @for (suboption of suboptions; track suboption) {
+    <button mat-menu-item>
+      <mat-icon>{{ suboption.icon }}</mat-icon>
+      <span>{{ suboption.title }}</span>
+    </button>
+  }
 </mat-menu>
diff --git a/libs/design-system/menu/src/lib/menu.component.scss b/libs/design-system/menu/src/lib/menu.component.scss
index 4abdce74a..643b7f22c 100644
--- a/libs/design-system/menu/src/lib/menu.component.scss
+++ b/libs/design-system/menu/src/lib/menu.component.scss
@@ -1,5 +1,94 @@
-.hra-menu {
+.hra-nested-menu {
   --mat-menu-container-color: white;
   --mat-menu-container-shape: 0.5rem;
   --mat-app-elevation-shadow-level-2: 0rem 0.3125rem 1rem 0rem rgb(from var(--sys-secondary) r g b / 0.16);
+  --mat-menu-item-with-icon-leading-spacing: 1rem;
+  --mat-menu-item-with-icon-trailing-spacing: 1rem;
+  --mat-menu-item-label-text-color: #464954;
+  --mat-menu-item-icon-color: #464954;
+  --mat-menu-item-hover-state-layer-color: rgb(from var(--sys-secondary) r g b / 0.04);
+  --mat-menu-item-focus-state-layer-color: rgb(from var(--sys-secondary) r g b / 0.04);
+
+  button {
+    min-width: 12rem;
+  }
+
+  .expand-arrow {
+    --mat-menu-item-spacing: 1rem;
+    position: absolute;
+    right: 0;
+  }
+
+  .mat-mdc-menu-submenu-icon {
+    display: none;
+  }
+
+  .mat-mdc-menu-item-highlighted {
+    border: 1px solid rgb(from var(--sys-secondary) r g b / 0.32);
+    border-left: none;
+    border-right: none;
+  }
+
+  &.small {
+    --mat-menu-item-label-text-tracking: var(--sys-label-small-tracking);
+    --mat-menu-item-label-text-weight: var(--sys-label-small-weight);
+    --mat-menu-item-label-text-size: var(--sys-label-small-size);
+    --mat-menu-item-label-text-line-height: var(--sys-label-small-line-height);
+    --mat-menu-item-spacing: 0.5rem;
+    --mat-menu-item-icon-size: 1.25rem;
+
+    mat-icon {
+      font-size: 1.25rem;
+    }
+
+    .mat-mdc-menu-content {
+      padding: 0.25rem 0;
+    }
+
+    button {
+      min-height: 2.5rem;
+
+      &.expanded {
+        min-width: 10.5rem;
+      }
+    }
+  }
+
+  &.medium {
+    --mat-menu-item-label-text-tracking: var(--sys-label-medium-tracking);
+    --mat-menu-item-label-text-weight: var(--sys-label-medium-weight);
+    --mat-menu-item-label-text-size: var(--sys-label-medium-size);
+    --mat-menu-item-label-text-line-height: var(--sys-label-medium-line-height);
+
+    .mat-mdc-menu-content {
+      padding: 0.5rem 0;
+    }
+
+    button {
+      min-height: 3rem;
+
+      &.expanded {
+        min-width: 12.25rem;
+      }
+    }
+  }
+
+  &.large {
+    --mat-menu-item-label-text-tracking: var(--sys-label-large-tracking);
+    --mat-menu-item-label-text-weight: var(--sys-label-large-weight);
+    --mat-menu-item-label-text-size: var(--sys-label-large-size);
+    --mat-menu-item-label-text-line-height: var(--sys-label-large-line-height);
+
+    .mat-mdc-menu-content {
+      padding: 0.75rem 0;
+    }
+
+    button {
+      min-height: 3.5rem;
+
+      &.expanded {
+        min-width: 12.75rem;
+      }
+    }
+  }
 }
diff --git a/libs/design-system/menu/src/lib/menu.component.stories.ts b/libs/design-system/menu/src/lib/menu.component.stories.ts
index 126df7bd0..b4e37305e 100644
--- a/libs/design-system/menu/src/lib/menu.component.stories.ts
+++ b/libs/design-system/menu/src/lib/menu.component.stories.ts
@@ -2,7 +2,52 @@ import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideDesignSystem } from '@hra-ui/design-system';
 import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
 
-import { MenuComponent } from './menu.component';
+import { MenuComponent, MenuOption } from './menu.component';
+
+const exampleOptions: MenuOption[] = [
+  {
+    title: 'Downloads',
+    icon: 'download',
+    expandedOptions: [
+      {
+        title: 'Cells CSV',
+        icon: 'download',
+      },
+      {
+        title: 'Cell Links CSV',
+        icon: 'download',
+      },
+      {
+        title: 'Cells & Cell Links ZIP',
+        icon: 'download',
+      },
+      {
+        title: 'Color Map CSV',
+        icon: 'download',
+      },
+      {
+        title: 'Help',
+        icon: 'info',
+      },
+    ],
+  },
+  {
+    title: 'Full Screen',
+    icon: 'fullscreen',
+  },
+  {
+    title: 'Hide Cell Links',
+    icon: 'visibility_off',
+  },
+  {
+    title: 'Embed App',
+    icon: 'code',
+  },
+  {
+    title: 'Help',
+    icon: 'info',
+  },
+];
 
 const meta: Meta = {
   component: MenuComponent,
@@ -18,6 +63,16 @@ const meta: Meta = {
       providers: [provideAnimations(), provideDesignSystem()],
     }),
   ],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+    },
+  },
+  args: {
+    size: 'medium',
+    menuOptions: exampleOptions,
+  },
 };
 
 export default meta;
diff --git a/libs/design-system/menu/src/lib/menu.component.ts b/libs/design-system/menu/src/lib/menu.component.ts
index bbd81b293..7bdc4afd0 100644
--- a/libs/design-system/menu/src/lib/menu.component.ts
+++ b/libs/design-system/menu/src/lib/menu.component.ts
@@ -1,16 +1,33 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input, ViewEncapsulation } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatRippleModule } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
-import { IconButtonSizeDirective } from '@hra-ui/design-system/icon-button';
+import { IconButtonSize, IconButtonSizeDirective } from '@hra-ui/design-system/icon-button';
+
+export interface MenuOption {
+  title: string;
+  icon: string;
+  expandedOptions?: MenuOption[];
+}
 
 @Component({
   selector: 'hra-menu',
   standalone: true,
-  imports: [MatButtonModule, MatMenuModule, MatIconModule, IconButtonSizeDirective],
+  imports: [MatButtonModule, MatMenuModule, MatIconModule, MatRippleModule, IconButtonSizeDirective],
   templateUrl: './menu.component.html',
   styleUrl: './menu.component.scss',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MenuComponent {}
+export class MenuComponent {
+  readonly size = input<IconButtonSize>('medium');
+
+  readonly menuOptions = input<MenuOption[]>([]);
+
+  suboptions: MenuOption[] = [];
+
+  setSubmenuOptions(options: MenuOption[]) {
+    this.suboptions = options;
+  }
+}

From c203fe918fe61a9deb4b61a0aa808bcc901a7757 Mon Sep 17 00:00:00 2001
From: edlu77 <eddd.lu@gmail.com>
Date: Fri, 16 Aug 2024 17:03:05 -0400
Subject: [PATCH 5/8] Documentation

---
 .../menu/src/lib/menu.component.html          | 12 +++++------
 .../menu/src/lib/menu.component.stories.ts    | 20 +++++++++----------
 .../menu/src/lib/menu.component.ts            | 16 ++++++++++-----
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/libs/design-system/menu/src/lib/menu.component.html b/libs/design-system/menu/src/lib/menu.component.html
index 1fb11c84c..604a6a14e 100644
--- a/libs/design-system/menu/src/lib/menu.component.html
+++ b/libs/design-system/menu/src/lib/menu.component.html
@@ -11,21 +11,21 @@
   @for (option of menuOptions(); track option) {
     @if (option.expandedOptions) {
       <button
-        mat-menu-item
-        [matMenuTriggerFor]="submenu"
-        (mouseover)="setSubmenuOptions(option.expandedOptions)"
         class="expanded"
+        mat-menu-item
         matRipple
         matRippleColor="#201E3D14"
+        [matMenuTriggerFor]="submenu"
+        (mouseover)="suboptions = option.expandedOptions"
       >
         <mat-icon>{{ option.icon }}</mat-icon>
-        <span>{{ option.title }}</span>
+        <span>{{ option.name }}</span>
         <mat-icon class="expand-arrow">arrow_right</mat-icon>
       </button>
     } @else {
       <button mat-menu-item>
         <mat-icon>{{ option.icon }}</mat-icon>
-        <span>{{ option.title }}</span>
+        <span>{{ option.name }}</span>
       </button>
     }
   }
@@ -35,7 +35,7 @@
   @for (suboption of suboptions; track suboption) {
     <button mat-menu-item>
       <mat-icon>{{ suboption.icon }}</mat-icon>
-      <span>{{ suboption.title }}</span>
+      <span>{{ suboption.name }}</span>
     </button>
   }
 </mat-menu>
diff --git a/libs/design-system/menu/src/lib/menu.component.stories.ts b/libs/design-system/menu/src/lib/menu.component.stories.ts
index b4e37305e..1522b708a 100644
--- a/libs/design-system/menu/src/lib/menu.component.stories.ts
+++ b/libs/design-system/menu/src/lib/menu.component.stories.ts
@@ -6,45 +6,45 @@ import { MenuComponent, MenuOption } from './menu.component';
 
 const exampleOptions: MenuOption[] = [
   {
-    title: 'Downloads',
+    name: 'Downloads',
     icon: 'download',
     expandedOptions: [
       {
-        title: 'Cells CSV',
+        name: 'Cells CSV',
         icon: 'download',
       },
       {
-        title: 'Cell Links CSV',
+        name: 'Cell Links CSV',
         icon: 'download',
       },
       {
-        title: 'Cells & Cell Links ZIP',
+        name: 'Cells & Cell Links ZIP',
         icon: 'download',
       },
       {
-        title: 'Color Map CSV',
+        name: 'Color Map CSV',
         icon: 'download',
       },
       {
-        title: 'Help',
+        name: 'Help',
         icon: 'info',
       },
     ],
   },
   {
-    title: 'Full Screen',
+    name: 'Full Screen',
     icon: 'fullscreen',
   },
   {
-    title: 'Hide Cell Links',
+    name: 'Hide Cell Links',
     icon: 'visibility_off',
   },
   {
-    title: 'Embed App',
+    name: 'Embed App',
     icon: 'code',
   },
   {
-    title: 'Help',
+    name: 'Help',
     icon: 'info',
   },
 ];
diff --git a/libs/design-system/menu/src/lib/menu.component.ts b/libs/design-system/menu/src/lib/menu.component.ts
index 7bdc4afd0..a928eb5e0 100644
--- a/libs/design-system/menu/src/lib/menu.component.ts
+++ b/libs/design-system/menu/src/lib/menu.component.ts
@@ -5,12 +5,19 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { IconButtonSize, IconButtonSizeDirective } from '@hra-ui/design-system/icon-button';
 
+/** Menu option interface */
 export interface MenuOption {
-  title: string;
+  /** Name of option */
+  name: string;
+  /** Material icon name */
   icon: string;
+  /** Options to open in a second menu */
   expandedOptions?: MenuOption[];
 }
 
+/**
+ * Nested Angular Material menu component
+ */
 @Component({
   selector: 'hra-menu',
   standalone: true,
@@ -21,13 +28,12 @@ export interface MenuOption {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MenuComponent {
+  /** Menu size */
   readonly size = input<IconButtonSize>('medium');
 
+  /** List of menu options */
   readonly menuOptions = input<MenuOption[]>([]);
 
+  /** List of suboptions to display in the second menu */
   suboptions: MenuOption[] = [];
-
-  setSubmenuOptions(options: MenuOption[]) {
-    this.suboptions = options;
-  }
 }

From 399983852c2caf09f76e6e5352554dd036f35955 Mon Sep 17 00:00:00 2001
From: edlu77 <eddd.lu@gmail.com>
Date: Mon, 19 Aug 2024 11:18:08 -0400
Subject: [PATCH 6/8] Small change for small button icon line height

---
 libs/design-system/menu/src/lib/menu.component.html | 4 ++--
 libs/design-system/menu/src/lib/menu.component.scss | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/libs/design-system/menu/src/lib/menu.component.html b/libs/design-system/menu/src/lib/menu.component.html
index 604a6a14e..6fa777c8c 100644
--- a/libs/design-system/menu/src/lib/menu.component.html
+++ b/libs/design-system/menu/src/lib/menu.component.html
@@ -19,13 +19,13 @@
         (mouseover)="suboptions = option.expandedOptions"
       >
         <mat-icon>{{ option.icon }}</mat-icon>
-        <span>{{ option.name }}</span>
+        {{ option.name }}
         <mat-icon class="expand-arrow">arrow_right</mat-icon>
       </button>
     } @else {
       <button mat-menu-item>
         <mat-icon>{{ option.icon }}</mat-icon>
-        <span>{{ option.name }}</span>
+        {{ option.name }}
       </button>
     }
   }
diff --git a/libs/design-system/menu/src/lib/menu.component.scss b/libs/design-system/menu/src/lib/menu.component.scss
index 643b7f22c..4096f9e4e 100644
--- a/libs/design-system/menu/src/lib/menu.component.scss
+++ b/libs/design-system/menu/src/lib/menu.component.scss
@@ -30,15 +30,15 @@
   }
 
   &.small {
+    --mat-menu-item-icon-size: 1.25rem;
+    --mat-menu-item-spacing: 0.5rem;
     --mat-menu-item-label-text-tracking: var(--sys-label-small-tracking);
     --mat-menu-item-label-text-weight: var(--sys-label-small-weight);
     --mat-menu-item-label-text-size: var(--sys-label-small-size);
-    --mat-menu-item-label-text-line-height: var(--sys-label-small-line-height);
-    --mat-menu-item-spacing: 0.5rem;
-    --mat-menu-item-icon-size: 1.25rem;
+    --mat-menu-item-label-text-line-height: var(--mat-menu-item-icon-size);
 
     mat-icon {
-      font-size: 1.25rem;
+      font-size: var(--mat-menu-item-icon-size);
     }
 
     .mat-mdc-menu-content {

From 2cf3171cd36dad658da14694338f9107e2035057 Mon Sep 17 00:00:00 2001
From: edlu77 <eddd.lu@gmail.com>
Date: Mon, 26 Aug 2024 15:15:41 -0400
Subject: [PATCH 7/8] Refactor menu styles

---
 libs/design-system/menu/src/index.ts               |  3 ++-
 .../menu-demo.component.html}                      |  0
 .../menu-demo.component.stories.ts}                | 12 ++++++------
 .../menu-demo.component.ts}                        | 13 ++++++-------
 .../menu-styles.component.scss}                    |  0
 .../src/lib/menu-styles/menu-styles.component.ts   | 14 ++++++++++++++
 libs/design-system/menu/src/lib/providers.ts       | 11 +++++++++++
 libs/design-system/src/lib/providers.ts            |  4 ++++
 .../lib/table-demo/table-demo.component.stories.ts |  6 +++---
 9 files changed, 46 insertions(+), 17 deletions(-)
 rename libs/design-system/menu/src/lib/{menu.component.html => menu-demo/menu-demo.component.html} (100%)
 rename libs/design-system/menu/src/lib/{menu.component.stories.ts => menu-demo/menu-demo.component.stories.ts} (84%)
 rename libs/design-system/menu/src/lib/{menu.component.ts => menu-demo/menu-demo.component.ts} (80%)
 rename libs/design-system/menu/src/lib/{menu.component.scss => menu-styles/menu-styles.component.scss} (100%)
 create mode 100644 libs/design-system/menu/src/lib/menu-styles/menu-styles.component.ts
 create mode 100644 libs/design-system/menu/src/lib/providers.ts

diff --git a/libs/design-system/menu/src/index.ts b/libs/design-system/menu/src/index.ts
index eba493818..8c5905366 100644
--- a/libs/design-system/menu/src/index.ts
+++ b/libs/design-system/menu/src/index.ts
@@ -1 +1,2 @@
-export * from './lib/menu.component';
+export * from './lib/menu-demo/menu-demo.component';
+export * from './lib/providers';
diff --git a/libs/design-system/menu/src/lib/menu.component.html b/libs/design-system/menu/src/lib/menu-demo/menu-demo.component.html
similarity index 100%
rename from libs/design-system/menu/src/lib/menu.component.html
rename to libs/design-system/menu/src/lib/menu-demo/menu-demo.component.html
diff --git a/libs/design-system/menu/src/lib/menu.component.stories.ts b/libs/design-system/menu/src/lib/menu-demo/menu-demo.component.stories.ts
similarity index 84%
rename from libs/design-system/menu/src/lib/menu.component.stories.ts
rename to libs/design-system/menu/src/lib/menu-demo/menu-demo.component.stories.ts
index 1522b708a..8d6525338 100644
--- a/libs/design-system/menu/src/lib/menu.component.stories.ts
+++ b/libs/design-system/menu/src/lib/menu-demo/menu-demo.component.stories.ts
@@ -2,9 +2,9 @@ import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideDesignSystem } from '@hra-ui/design-system';
 import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
 
-import { MenuComponent, MenuOption } from './menu.component';
+import { MenuDemoComponent, MenuDemoOption } from './menu-demo.component';
 
-const exampleOptions: MenuOption[] = [
+const exampleOptions: MenuDemoOption[] = [
   {
     name: 'Downloads',
     icon: 'download',
@@ -49,9 +49,9 @@ const exampleOptions: MenuOption[] = [
   },
 ];
 
-const meta: Meta = {
-  component: MenuComponent,
-  title: 'MenuComponent',
+const meta: Meta<MenuDemoComponent> = {
+  component: MenuDemoComponent,
+  title: 'Menu',
   parameters: {
     design: {
       type: 'figma',
@@ -76,6 +76,6 @@ const meta: Meta = {
 };
 
 export default meta;
-type Story = StoryObj<MenuComponent>;
+type Story = StoryObj<MenuDemoComponent>;
 
 export const Primary: Story = {};
diff --git a/libs/design-system/menu/src/lib/menu.component.ts b/libs/design-system/menu/src/lib/menu-demo/menu-demo.component.ts
similarity index 80%
rename from libs/design-system/menu/src/lib/menu.component.ts
rename to libs/design-system/menu/src/lib/menu-demo/menu-demo.component.ts
index a928eb5e0..617298a03 100644
--- a/libs/design-system/menu/src/lib/menu.component.ts
+++ b/libs/design-system/menu/src/lib/menu-demo/menu-demo.component.ts
@@ -6,13 +6,13 @@ import { MatMenuModule } from '@angular/material/menu';
 import { IconButtonSize, IconButtonSizeDirective } from '@hra-ui/design-system/icon-button';
 
 /** Menu option interface */
-export interface MenuOption {
+export interface MenuDemoOption {
   /** Name of option */
   name: string;
   /** Material icon name */
   icon: string;
   /** Options to open in a second menu */
-  expandedOptions?: MenuOption[];
+  expandedOptions?: MenuDemoOption[];
 }
 
 /**
@@ -22,18 +22,17 @@ export interface MenuOption {
   selector: 'hra-menu',
   standalone: true,
   imports: [MatButtonModule, MatMenuModule, MatIconModule, MatRippleModule, IconButtonSizeDirective],
-  templateUrl: './menu.component.html',
-  styleUrl: './menu.component.scss',
+  templateUrl: './menu-demo.component.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MenuComponent {
+export class MenuDemoComponent {
   /** Menu size */
   readonly size = input<IconButtonSize>('medium');
 
   /** List of menu options */
-  readonly menuOptions = input<MenuOption[]>([]);
+  readonly menuOptions = input<MenuDemoOption[]>([]);
 
   /** List of suboptions to display in the second menu */
-  suboptions: MenuOption[] = [];
+  suboptions: MenuDemoOption[] = [];
 }
diff --git a/libs/design-system/menu/src/lib/menu.component.scss b/libs/design-system/menu/src/lib/menu-styles/menu-styles.component.scss
similarity index 100%
rename from libs/design-system/menu/src/lib/menu.component.scss
rename to libs/design-system/menu/src/lib/menu-styles/menu-styles.component.scss
diff --git a/libs/design-system/menu/src/lib/menu-styles/menu-styles.component.ts b/libs/design-system/menu/src/lib/menu-styles/menu-styles.component.ts
new file mode 100644
index 000000000..2caf2212d
--- /dev/null
+++ b/libs/design-system/menu/src/lib/menu-styles/menu-styles.component.ts
@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+
+/**
+ * Applies menu styles globally
+ */
+@Component({
+  selector: 'hra-menu-styles',
+  standalone: true,
+  template: '',
+  styleUrls: ['./menu-styles.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MenuStylesComponent {}
diff --git a/libs/design-system/menu/src/lib/providers.ts b/libs/design-system/menu/src/lib/providers.ts
new file mode 100644
index 000000000..931c6da71
--- /dev/null
+++ b/libs/design-system/menu/src/lib/providers.ts
@@ -0,0 +1,11 @@
+import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
+import { provideStyleComponents } from '@hra-ui/cdk/styling';
+
+import { MenuStylesComponent } from './menu-styles/menu-styles.component';
+
+/**
+ * Returns providers for menu
+ */
+export function provideMenu(): EnvironmentProviders {
+  return makeEnvironmentProviders([provideStyleComponents(MenuStylesComponent)]);
+}
diff --git a/libs/design-system/src/lib/providers.ts b/libs/design-system/src/lib/providers.ts
index 7781976e5..23f072e06 100644
--- a/libs/design-system/src/lib/providers.ts
+++ b/libs/design-system/src/lib/providers.ts
@@ -3,7 +3,9 @@ import { EnvironmentProviders, makeEnvironmentProviders } from '@angular/core';
 import { provideIcons } from '@hra-ui/cdk/icons';
 import { provideButtons } from '@hra-ui/design-system/button';
 import { provideIconButtons } from '@hra-ui/design-system/icon-button';
+import { provideMenu } from '@hra-ui/design-system/menu';
 import { provideScrolling } from '@hra-ui/design-system/scrolling';
+import { provideTable } from '@hra-ui/design-system/table';
 
 /**
  * Returns design system providers
@@ -19,5 +21,7 @@ export function provideDesignSystem(): EnvironmentProviders {
     provideButtons(),
     provideIconButtons(),
     provideScrolling(),
+    provideMenu(),
+    provideTable(),
   ]);
 }
diff --git a/libs/design-system/table/src/lib/table-demo/table-demo.component.stories.ts b/libs/design-system/table/src/lib/table-demo/table-demo.component.stories.ts
index ffa7c892e..9949b289e 100644
--- a/libs/design-system/table/src/lib/table-demo/table-demo.component.stories.ts
+++ b/libs/design-system/table/src/lib/table-demo/table-demo.component.stories.ts
@@ -1,9 +1,9 @@
 import { MatSortModule } from '@angular/material/sort';
 import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideDesignSystem } from '@hra-ui/design-system';
 import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
-import { provideTable } from '../providers';
-import { TableDemoData, TableDemoComponent } from './table-demo.component';
+import { TableDemoComponent, TableDemoData } from './table-demo.component';
 
 /** Example data */
 const exampleData: TableDemoData[] = [
@@ -23,7 +23,7 @@ const meta: Meta<TableDemoComponent> = {
   },
   decorators: [
     applicationConfig({
-      providers: [provideAnimations(), provideTable()],
+      providers: [provideAnimations(), provideDesignSystem()],
     }),
     moduleMetadata({
       imports: [MatSortModule, TableDemoComponent],

From 07c2d2381c1c320af01c6e8a6f8fc640c6b0dfe9 Mon Sep 17 00:00:00 2001
From: Daniel Bolin <axbolin@iu.edu>
Date: Tue, 27 Aug 2024 12:07:12 -0400
Subject: [PATCH 8/8] Update index.ts

Remove demo component export
---
 libs/design-system/menu/src/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/libs/design-system/menu/src/index.ts b/libs/design-system/menu/src/index.ts
index 8c5905366..e194182f8 100644
--- a/libs/design-system/menu/src/index.ts
+++ b/libs/design-system/menu/src/index.ts
@@ -1,2 +1 @@
-export * from './lib/menu-demo/menu-demo.component';
 export * from './lib/providers';