Navigation button

libs/design-system/buttons/navigation-category-toggle/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "lib": {
+    "cssUrl": "inline",
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": ["../../src/sass"]
+  }
+}

libs/design-system/buttons/navigation-category-toggle/src/index.ts

@@ -0,0 +1 @@
+export { NavigationCategoryToggle } from './lib/navigation-category-toggle';

libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.html

@@ -0,0 +1,18 @@
+<button
+  matButton
+  angTrackClick
+  class="ang-navigation-category-toggle-button"
+  target="_blank"
+  disableRipple
+  [angAnyLink]="link()"
+  (click)="toggled.set(!toggled())"
+>
+  <span class="ang-navigation-category-toggle-text"><ng-content /></span>
+  @if (!link()) {
+    <mat-icon
+      iconPositionEnd
+      class="ang-navigation-category-toggle-icon"
+      [fontIcon]="toggled() ? 'expand_less' : 'expand_more'"
+    />
+  }
+</button>

libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.scss

@@ -0,0 +1,46 @@
+@use '@angular/material' as mat;
+@use 'internal/token-utils';
+@use './tokens' as *;
+
+:host {
+  display: block;
+
+  @include mat.button-overrides(
+    (
+      text-container-height: 3rem,
+      text-label-text-color: token-utils.slot(label-color, $config),
+      text-icon-spacing: 0.125rem,
+      text-label-text-font: token-utils.slot(label-font, $config),
+      text-label-text-size: token-utils.slot(label-font-size, $config),
+      text-label-text-tracking: token-utils.slot(label-letter-spacing, $config),
+      text-label-text-weight: token-utils.slot(label-font-weight, $config),
+      text-with-icon-horizontal-padding: 0.75rem,
+      text-state-layer-color: transparent,
+    )
+  );
+
+  @include mat.icon-overrides(
+    (
+      color: token-utils.slot(icon-color, $config),
+    )
+  );
+
+  .ang-navigation-category-toggle-button {
+    &:focus-visible {
+      outline: solid 0.125rem token-utils.slot(focus-outline-color, $config);
+    }
+
+    .ang-navigation-category-toggle-text {
+      text-decoration: underline;
+      text-underline-offset: 0.25rem;
+      text-decoration-thickness: 0.125rem;
+      text-decoration-color: token-utils.slot(underline-color, $config);
+    }
+
+    .ang-navigation-category-toggle-icon {
+      height: 1.25rem;
+      width: 1.25rem;
+      font-size: 1.25rem;
+    }
+  }
+}

libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.spec.ts

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
+import { NavigationCategoryToggle } from './navigation-category-toggle';
+
+describe('NavigationCategoryToggle', () => {
+  async function setup(link: string | null = null) {
+    const user = userEvent.setup();
+    const rendered = await render(
+      `<ang-navigation-category-toggle [link]="link">Category</ang-navigation-category-toggle>`,
+      {
+        imports: [NavigationCategoryToggle],
+        componentProperties: {
+          link,
+        },
+      },
+    );
+
+    return {
+      user,
+      ...rendered,
+    };
+  }
+
+  it('toggles state when clicked', async () => {
+    const { user } = await setup();
+    const toggle = screen.getByText('Category').closest('.ang-navigation-category-toggle-button');
+
+    expect(toggle).toBeTruthy();
+
+    const icon = toggle?.querySelector('.ang-navigation-category-toggle-icon');
+
+    expect(icon).toHaveAttribute('data-mat-icon-name', 'expand_more');
+
+    await user.click(toggle as Element);
+    expect(icon).toHaveAttribute('data-mat-icon-name', 'expand_less');
+
+    await user.click(toggle as Element);
+    expect(icon).toHaveAttribute('data-mat-icon-name', 'expand_more');
+  });
+
+  it('hides the toggle icon when a link is provided', async () => {
+    await setup('/products');
+
+    const toggle = screen.getByRole('button', { name: 'Category' });
+
+    expect(toggle).toBeTruthy();
+    expect(toggle).toHaveAttribute('tabindex', '0');
+    expect(toggle).not.toHaveAttribute('href');
+    expect(toggle.querySelector('.ang-navigation-category-toggle-icon')).not.toBeInTheDocument();
+  });
+});

libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.stories.ts

@@ -0,0 +1,28 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { NavigationCategoryToggle } from './navigation-category-toggle';
+
+const meta: Meta<NavigationCategoryToggle> = {
+  component: NavigationCategoryToggle,
+  title: 'Design System/Buttons/Navigation Category Toggle',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/AtlasNG-Components?node-id=2101-11132',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `<ang-navigation-category-toggle [link]="link">Label</ang-navigation-category-toggle>`,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<NavigationCategoryToggle>;
+
+export const Default: Story = {};
+
+export const AsLink: Story = {
+  args: {
+    link: 'https://example.com',
+  },
+};

libs/design-system/buttons/navigation-category-toggle/src/lib/navigation-category-toggle.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, input, model } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { TrackClick } from '@atlasng/analytics';
+import { AnyLink, AnyLinkCommand } from '@atlasng/common';
+
+@Component({
+  selector: 'ang-navigation-category-toggle',
+  imports: [MatButtonModule, MatIconModule, AnyLink, TrackClick],
+  templateUrl: './navigation-category-toggle.html',
+  styleUrl: './navigation-category-toggle.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NavigationCategoryToggle {
+  /** The link to navigate to (hides toggle icon if provided) */
+  readonly link = input<AnyLinkCommand | null>(null);
+  /** Whether to show the toggle icon */
+  readonly toggled = model<boolean>(false);
+}

libs/design-system/buttons/navigation-category-toggle/src/lib/tokens.scss

@@ -0,0 +1,19 @@
+@use 'internal/token-utils';
+
+$config: (
+  namespace: 'navigation-category-toggle',
+  tokens: (
+    label-color: token-utils.sys-token(on-surface),
+    icon-color: token-utils.sys-token(on-surface-variant),
+    underline-color: token-utils.sys-token(primary),
+    focus-outline-color: token-utils.sys-token(on-surface),
+    label-font: token-utils.sys-token(title-medium-font),
+    label-font-size: token-utils.sys-token(title-medium-size),
+    label-letter-spacing: token-utils.sys-token(title-medium-tracking),
+    label-font-weight: token-utils.sys-token(title-medium-weight),
+  ),
+);
+
+@mixin overrides($overrides) {
+  @include token-utils.apply-overrides($overrides, $config);
+}

nx.json

@@ -316,7 +316,10 @@
       "preVersionCommand": "npx nx run-many -t build --projects=tag:library",
       "manifestRootsToUpdate": [
         "{projectRoot}",
-        { "path": "{workspaceRoot}/dist/{projectRoot}", "preserveLocalDependencyProtocols": false }
+        {
+          "path": "{workspaceRoot}/dist/{projectRoot}",
+          "preserveLocalDependencyProtocols": false
+        }
       ],
       "currentVersionResolver": "git-tag",
       "fallbackCurrentVersionResolver": "disk"

tsconfig.base.json

@@ -29,6 +29,9 @@
       "@atlasng/core": ["./libs/core/src/index.ts"],
       "@atlasng/design-system": ["./libs/design-system/src/index.ts"],
       "@atlasng/design-system/buttons/help": ["./libs/design-system/buttons/help/src/index.ts"],
+      "@atlasng/design-system/buttons/navigation-category-toggle": [
+        "./libs/design-system/buttons/navigation-category-toggle/src/index.ts"
+      ],
       "@atlasng/design-system/buttons/social-media": ["./libs/design-system/buttons/social-media/src/index.ts"],
       "@atlasng/design-system/indicators/end-of-results": [
         "./libs/design-system/indicators/end-of-results/src/index.ts"