Section header

libs/design-system/content-templates/section-header/ng-package.json

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

libs/design-system/content-templates/section-header/src/index.ts

@@ -0,0 +1 @@
+export { SectionHeader } from './lib/section-header';

libs/design-system/content-templates/section-header/src/lib/section-header.html

@@ -0,0 +1,15 @@
+@if (anchor()) {
+  <span class="ang-section-header-link-container">
+    <a mat-icon-button class="ang-section-header-link" aria-label="Link to this heading" [attr.href]="`#${anchor()}`">
+      <mat-icon class="ang-section-header-icon" fontIcon="link" />
+    </a>
+  </span>
+}
+
+<div class="ang-section-header-content">
+  <ng-content />
+</div>
+
+@if (underlined()) {
+  <mat-divider />
+}

libs/design-system/content-templates/section-header/src/lib/section-header.scss

@@ -0,0 +1,98 @@
+@use 'sass:map';
+@use 'internal/token-utils';
+
+$level-configs: (
+  1: (
+    font: var(token-utils.sys-token(display-medium)),
+    link-offset: 7px,
+    margin: 0.5rem,
+  ),
+  2: (
+    font: var(token-utils.sys-token(display-small)),
+    link-offset: 2px,
+    margin: 0.375rem,
+  ),
+  3: (
+    font: var(token-utils.sys-token(headline-large)),
+    link-offset: 0,
+    margin: 0.5rem,
+  ),
+  4: (
+    font: var(token-utils.sys-token(headline-medium)),
+    link-offset: -2px,
+    margin: 0.25rem,
+  ),
+  5: (
+    font: var(token-utils.sys-token(headline-small)),
+    link-offset: -5px,
+    margin: 0.25rem,
+  ),
+  6: (
+    font: var(token-utils.sys-token(title-large)),
+    link-offset: -6px,
+    margin: 0.25rem,
+  ),
+);
+
+$color-config: (
+  divider-color: var(token-utils.sys-token(outline)),
+  text-color: var(token-utils.sys-token(on-background)),
+);
+
+:host {
+  display: block;
+  margin: 0;
+
+  .ang-section-header-link-container {
+    display: inline-block;
+    vertical-align: top;
+    height: 0;
+    line-height: 1;
+
+    .ang-section-header-link {
+      position: relative;
+      margin-left: calc(-2.5rem - 5px);
+
+      .ang-section-header-icon {
+        visibility: hidden;
+      }
+
+      &:focus-visible .ang-section-header-icon {
+        visibility: visible;
+      }
+    }
+  }
+
+  .ang-section-header-content {
+    display: inline-block;
+    color: map.get($color-config, text-color);
+  }
+
+  &:hover .ang-section-header-link-container .ang-section-header-link .ang-section-header-icon {
+    visibility: visible;
+  }
+
+  mat-divider {
+    border-color: map.get($color-config, divider-color);
+  }
+
+  @media (max-width: 639.9999px) {
+    .ang-section-header-link-container {
+      display: none;
+    }
+  }
+
+  @each $level, $config in $level-configs {
+    &h#{$level} {
+      font: map.get($config, font);
+
+      .ang-section-header-link-container .ang-section-header-link {
+        top: map.get($config, link-offset);
+      }
+
+      mat-divider {
+        margin-top: map.get($config, margin);
+      }
+    }
+  }
+}

libs/design-system/content-templates/section-header/src/lib/section-header.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SectionHeader } from './section-header';
+
+describe('SectionHeader', () => {
+  let component: SectionHeader;
+  let fixture: ComponentFixture<SectionHeader>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SectionHeader],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SectionHeader);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/design-system/content-templates/section-header/src/lib/section-header.stories.ts

@@ -0,0 +1,61 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { SectionHeader } from './section-header';
+
+interface ExtraArgs {
+  level: number;
+  content: string;
+}
+
+function clampLevel(level: number): number {
+  level = Math.max(level, 1);
+  level = Math.min(level, 6);
+  return level;
+}
+
+const meta: Meta<SectionHeader & ExtraArgs> = {
+  component: SectionHeader,
+  title: 'Design System/Content Templates/Section Header',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/AtlasNG-Components?node-id=2355-1046',
+    },
+  },
+  args: {
+    level: 1,
+    anchor: 'anchor',
+    content: 'Content Text',
+  },
+  argTypes: {
+    level: {
+      control: { type: 'number', min: 1, max: 6 },
+      description: 'The heading level (1-6) to determine the appropriate HTML tag.',
+    },
+    content: {
+      control: 'text',
+      description: 'The text content of the section header.',
+    },
+    underlined: {
+      control: 'boolean',
+      description: 'Whether to display the underline.',
+    },
+  },
+  render: (args) => ({
+    props: args,
+    styles: ['[ang-section-header] { margin: 0 2rem; }'],
+    template: `<h${clampLevel(args.level)} ang-section-header anchor="${args.anchor}" underlined="${args.underlined}">
+        Heading ${clampLevel(args.level)} ${args.content}
+      </h${clampLevel(args.level)}>`,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<SectionHeader & ExtraArgs>;
+
+export const Default: Story = {};
+
+export const LongText: Story = {
+  args: {
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.',
+  },
+};

libs/design-system/content-templates/section-header/src/lib/section-header.ts

@@ -0,0 +1,22 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+  selector:
+    // eslint-disable-next-line @angular-eslint/component-selector
+    `h1[ang-section-header], h2[ang-section-header], h3[ang-section-header],
+    h4[ang-section-header], h5[ang-section-header], h6[ang-section-header]`,
+  imports: [MatDividerModule, MatIconModule, MatButtonModule],
+  templateUrl: './section-header.html',
+  styleUrl: './section-header.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SectionHeader {
+  /** Anchor for href */
+  readonly anchor = input<string>();
+
+  /** Whether to display the underline */
+  readonly underlined = input(true, { transform: booleanAttribute });
+}

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"