@design-system-rte/angular 0.2.2 → 0.4.2

package/src/lib/components/icon-button/icon-button.component.ts

@@ -0,0 +1,40 @@
+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
+import { ButtonType } from "@design-system-rte/core/components/button/button.interface";
+import { ButtonSize, ButtonVariant } from "@design-system-rte/core/components/button/common/common-button";
+import { buttonIconSize } from "@design-system-rte/core/components/button/common/common-button.constants";
+
+import { isValidIconName } from "../icon/icon-map";
+import { IconComponent } from "../icon/icon.component";
+import { RegularIconIdKey, TogglableIconIdKey } from "../icon/icon.service";
+
+@Component({
+  selector: "rte-icon-button",
+  imports: [CommonModule, IconComponent],
+  standalone: true,
+  templateUrl: "./icon-button.component.html",
+  styleUrl: "./icon-button.component.scss",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class IconButtonComponent {
+  readonly disabled = input<boolean>(false);
+  readonly name = input.required<RegularIconIdKey | TogglableIconIdKey>();
+  readonly size = input<ButtonSize>("m");
+  readonly variant = input<ButtonVariant>("primary");
+  readonly type = input<ButtonType>("button");
+  readonly appearance = input<"outlined" | "filled">("outlined");
+  readonly compactSpacing = input<boolean>(false);
+  readonly ariaLabel = input<string | undefined>(undefined);
+  readonly ariaLabelledBy = input<string | undefined>(undefined);
+
+  readonly buttonIconSize = computed(() => buttonIconSize[this.size()]);
+
+  readonly isValidIconName = computed(() => isValidIconName(this.name()));
+
+  readonly click = output<MouseEvent | KeyboardEvent>();
+
+  onClick(event: MouseEvent | KeyboardEvent): void {
+    event.stopPropagation();
+    this.click.emit(event);
+  }
+}

package/src/lib/components/icon-button/icon-button.stories.ts

@@ -0,0 +1,200 @@
+import { ENTER_KEY, SPACE_KEY, TAB_KEY } from "@design-system-rte/core/constants/keyboard.constants";
+import { Meta, StoryObj } from "@storybook/angular";
+import { fn, userEvent, within, expect } from "@storybook/test";
+
+import { regularIcons as RegularIconsList, togglableIcons as TogglableIconsList } from "../icon/icon-map";
+
+import { IconButtonComponent } from "./icon-button.component";
+
+const RegularIconIds = Object.keys(RegularIconsList);
+const TogglableIconIds = Object.keys(TogglableIconsList);
+
+const meta = {
+  title: "IconButton",
+  component: IconButtonComponent,
+  tags: ["autodocs"],
+  argTypes: {
+    name: {
+      control: "select",
+      options: [...RegularIconIds, ...TogglableIconIds].sort((a, b) => a.localeCompare(b)),
+      description: "Nom de l’icône à afficher",
+      defaultValue: "check",
+    },
+    variant: {
+      control: "select",
+      options: ["primary", "secondary", "text", "transparent", "danger"],
+    },
+    appearance: {
+      control: "select",
+      options: ["outlined", "filled"],
+      description: "Apparence de l’icône (pour les icônes togglables)",
+      defaultValue: "outlined",
+    },
+    size: {
+      control: "select",
+      options: ["s", "m", "l"],
+    },
+    compactSpacing: {
+      control: "boolean",
+      description: "Utiliser un espacement compact",
+    },
+    disabled: {
+      control: "boolean",
+    },
+  },
+} satisfies Meta<IconButtonComponent>;
+
+export default meta;
+
+type Story = StoryObj<IconButtonComponent>;
+
+const mockFn = fn();
+
+export const Default: Story = {
+  args: {
+    name: "settings",
+    size: "m",
+    appearance: "outlined",
+    disabled: false,
+    compactSpacing: false,
+    variant: "primary",
+    ariaLabel: "icon button aria label",
+    click: mockFn,
+  },
+
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const iconButton = canvas.getByRole("button");
+    await userEvent.click(iconButton);
+    expect(mockFn).toHaveBeenCalled();
+    iconButton.blur();
+  },
+};
+
+export const Sizing: Story = {
+  args: {
+    ...Default.args,
+    compactSpacing: false,
+  },
+  render: (args) => ({
+    props: { ...args },
+    template: `
+    <div style="display: flex; gap: 8px">
+      <rte-icon-button 
+        size="s" 
+        name=${args.name} 
+        data-testid="small-icon-button" 
+        [compactSpacing]="${args.compactSpacing}" 
+        [disabled]="${args.disabled}"
+        [appearance]="${args.appearance}"
+        [ariaLabel]="'Small Icon Button'"
+        [type]="'${args.type}'"
+        [variant]="'${args.variant}'"
+      />
+      <rte-icon-button 
+        name=${args.name} 
+        data-testid="medium-icon-button" 
+        [compactSpacing]="${args.compactSpacing}" 
+        [disabled]="${args.disabled}"
+        [appearance]="${args.appearance}"
+        [ariaLabel]="'Small Icon Button'"
+        [type]="'${args.type}'"
+        [variant]="'${args.variant}'"
+      />
+      <rte-icon-button 
+        size="l" 
+        name=${args.name} 
+        data-testid="large-icon-button" 
+        [compactSpacing]="${args.compactSpacing}" 
+        [disabled]="${args.disabled}"
+        [appearance]="${args.appearance}"
+        [ariaLabel]="'Small Icon Button'"
+        [type]="'${args.type}'"
+        [variant]="'${args.variant}'"
+      />
+    </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const smallIconButton = canvas.getByTestId("small-icon-button").getElementsByTagName("button")[0];
+    const mediumIconButton = canvas.getByTestId("medium-icon-button").getElementsByTagName("button")[0];
+    const largeIconButton = canvas.getByTestId("large-icon-button").getElementsByTagName("button")[0];
+
+    expect(smallIconButton.clientHeight).toBe(24);
+    expect(mediumIconButton.clientHeight).toBe(32);
+    expect(largeIconButton.clientHeight).toBe(40);
+  },
+};
+
+export const CompactSizing: Story = {
+  args: {
+    ...Default.args,
+    compactSpacing: true,
+  },
+  render: (args) => ({
+    props: { ...args },
+    template: `
+    <div style="display: flex; gap: 8px">
+      <rte-icon-button 
+        size="s" 
+        name=${args.name} 
+        data-testid="small-icon-button" 
+        [compactSpacing]="${args.compactSpacing}" 
+        [disabled]="${args.disabled}"
+        [appearance]="${args.appearance}"
+        [ariaLabel]="'Small Icon Button'"
+        [type]="'${args.type}'"
+        [variant]="'${args.variant}'"
+      />
+      <rte-icon-button 
+        name=${args.name} 
+        data-testid="medium-icon-button" 
+        [compactSpacing]="${args.compactSpacing}" 
+        [disabled]="${args.disabled}"
+        [appearance]="${args.appearance}"
+        [ariaLabel]="'Small Icon Button'"
+        [type]="'${args.type}'"
+        [variant]="'${args.variant}'"
+      />
+      <rte-icon-button 
+        size="l" 
+        name=${args.name} 
+        data-testid="large-icon-button" 
+        [compactSpacing]="${args.compactSpacing}" 
+        [disabled]="${args.disabled}"
+        [appearance]="${args.appearance}"
+        [ariaLabel]="'Small Icon Button'"
+        [type]="'${args.type}'"
+        [variant]="'${args.variant}'"
+      />
+    </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const smallIconButton = canvas.getByTestId("small-icon-button").getElementsByTagName("button")[0];
+    const mediumIconButton = canvas.getByTestId("medium-icon-button").getElementsByTagName("button")[0];
+    const largeIconButton = canvas.getByTestId("large-icon-button").getElementsByTagName("button")[0];
+
+    expect(smallIconButton.clientHeight).toBe(16);
+    expect(mediumIconButton.clientHeight).toBe(20);
+    expect(largeIconButton.clientHeight).toBe(24);
+  },
+};
+
+export const KeyboardInteraction: Story = {
+  args: {
+    ...Default.args,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+    await userEvent.keyboard(TAB_KEY);
+    expect(button).toHaveFocus();
+    await userEvent.keyboard(ENTER_KEY);
+    await userEvent.keyboard(SPACE_KEY);
+    expect(mockFn).toHaveBeenCalledTimes(2);
+    button.blur();
+  },
+};

package/src/lib/components/icon-button-toggle/icon-button-toggle.component.html

@@ -0,0 +1,12 @@
+<rte-icon-button 
+  [size]="size()" 
+  [name]="name()" 
+  [compactSpacing]="compactSpacing()"
+  [disabled]="disabled()"
+  [ariaLabel]="ariaLabel()"
+  [ariaLabelledBy]="ariaLabelledBy()"
+  [type]="type()"
+  [variant]="variant()"
+  [appearance]="selected() ? 'filled' : 'outlined'"
+  (click)="onClick($event)"
+/>

package/src/lib/components/icon-button-toggle/icon-button-toggle.component.ts

@@ -0,0 +1,36 @@
+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
+import { ButtonType } from "@design-system-rte/core/components/button/button.interface";
+import { ButtonSize, ButtonVariant } from "@design-system-rte/core/components/button/common/common-button";
+import { buttonIconSize } from "@design-system-rte/core/components/button/common/common-button.constants";
+
+import { RegularIconIdKey, TogglableIconIdKey } from "../icon/icon.service";
+import { IconButtonComponent } from "../icon-button/icon-button.component";
+
+@Component({
+  selector: "rte-icon-button-toggle",
+  imports: [CommonModule, IconButtonComponent],
+  standalone: true,
+  templateUrl: "./icon-button-toggle.component.html",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class IconButtonToggleComponent {
+  readonly disabled = input<boolean>(false);
+  readonly name = input.required<RegularIconIdKey | TogglableIconIdKey>();
+  readonly size = input<ButtonSize>("m");
+  readonly variant = input<ButtonVariant>("primary");
+  readonly type = input<ButtonType>("button");
+  readonly compactSpacing = input<boolean>(false);
+  readonly ariaLabel = input<string | undefined>(undefined);
+  readonly ariaLabelledBy = input<string | undefined>(undefined);
+  readonly selected = input<boolean>(false);
+
+  readonly click = output<void>();
+
+  onClick(event: MouseEvent | KeyboardEvent): void {
+    event.stopPropagation();
+    this.click.emit();
+  }
+
+  readonly buttonIconSize = computed(() => buttonIconSize[this.size()]);
+}

package/src/lib/components/icon-button-toggle/icon-button-toggle.stories.ts

@@ -0,0 +1,197 @@
+import { ENTER_KEY, SPACE_KEY } from "@design-system-rte/core/constants/keyboard.constants";
+import { Meta, StoryObj } from "@storybook/angular";
+import { fn, userEvent, within, expect } from "@storybook/test";
+
+import { togglableIcons as TogglableIconsList } from "../icon/icon-map";
+
+import { IconButtonToggleComponent } from "./icon-button-toggle.component";
+
+const TogglableIconIds = Object.keys(TogglableIconsList);
+
+const meta = {
+  title: "IconButtonToggle",
+  component: IconButtonToggleComponent,
+  tags: ["autodocs"],
+  argTypes: {
+    name: {
+      control: "select",
+      options: [...TogglableIconIds].sort((a, b) => a.localeCompare(b)),
+      description: "Nom de l’icône à afficher",
+      defaultValue: "check",
+    },
+    variant: {
+      control: "select",
+      options: ["primary", "secondary", "text", "transparent", "danger"],
+    },
+    size: {
+      control: "select",
+      options: ["s", "m", "l"],
+    },
+    compactSpacing: {
+      control: "boolean",
+      description: "Utiliser un espacement compact",
+    },
+    disabled: {
+      control: "boolean",
+    },
+    selected: {
+      control: "boolean",
+      description: "Indique si l'icône est sélectionnée",
+    },
+  },
+} satisfies Meta<IconButtonToggleComponent>;
+
+export default meta;
+
+type Story = StoryObj<IconButtonToggleComponent>;
+
+const mockFn = fn();
+
+export const Default: Story = {
+  args: {
+    name: "settings",
+    size: "m",
+    disabled: false,
+    compactSpacing: false,
+    variant: "primary",
+    ariaLabel: "icon button aria label",
+    click: mockFn,
+    selected: false,
+  },
+
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const iconButton = canvas.getByRole("button");
+    await userEvent.click(iconButton);
+    expect(mockFn).toHaveBeenCalled();
+    iconButton.blur();
+  },
+};
+
+export const Sizing: Story = {
+  args: {
+    ...Default.args,
+    compactSpacing: false,
+  },
+  render: (args) => ({
+    props: { ...args },
+    template: `
+    <div style="display: flex; gap: 8px">
+      <rte-icon-button-toggle 
+        size="s" 
+        name=${args.name} 
+        data-testid="small-icon-button" 
+        [compactSpacing]="${args.compactSpacing}" 
+        [disabled]="${args.disabled}"
+        [selected]="${args.selected}"
+        [ariaLabel]="'Small Icon Button'"
+        [type]="'${args.type}'"
+        [variant]="'${args.variant}'"
+      />
+      <rte-icon-button-toggle
+        name=${args.name} 
+        data-testid="medium-icon-button" 
+        [compactSpacing]="${args.compactSpacing}" 
+        [disabled]="${args.disabled}"
+        [selected]="${args.selected}"
+        [ariaLabel]="'Small Icon Button'"
+        [type]="'${args.type}'"
+        [variant]="'${args.variant}'"
+      />
+      <rte-icon-button-toggle 
+        size="l" 
+        name=${args.name} 
+        data-testid="large-icon-button" 
+        [compactSpacing]="${args.compactSpacing}" 
+        [disabled]="${args.disabled}"
+        [selected]="${args.selected}"
+        [ariaLabel]="'Small Icon Button'"
+        [type]="'${args.type}'"
+        [variant]="'${args.variant}'"
+      />
+    </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const smallIconButton = canvas.getByTestId("small-icon-button").getElementsByTagName("button")[0];
+    const mediumIconButton = canvas.getByTestId("medium-icon-button").getElementsByTagName("button")[0];
+    const largeIconButton = canvas.getByTestId("large-icon-button").getElementsByTagName("button")[0];
+
+    expect(smallIconButton.clientHeight).toBe(24);
+    expect(mediumIconButton.clientHeight).toBe(32);
+    expect(largeIconButton.clientHeight).toBe(40);
+  },
+};
+
+export const CompactSizing: Story = {
+  args: {
+    ...Default.args,
+    compactSpacing: true,
+  },
+  render: (args) => ({
+    props: { ...args },
+    template: `
+    <div style="display: flex; gap: 8px">
+      <rte-icon-button-toggle 
+        size="s" 
+        name=${args.name} 
+        data-testid="small-icon-button" 
+        [compactSpacing]="${args.compactSpacing}" 
+        [disabled]="${args.disabled}"
+        [selected]="${args.selected}"
+        [ariaLabel]="'Small Icon Button'"
+        [type]="'${args.type}'"
+        [variant]="'${args.variant}'"
+      />
+      <rte-icon-button-toggle 
+        name=${args.name} 
+        data-testid="medium-icon-button" 
+        [compactSpacing]="${args.compactSpacing}" 
+        [disabled]="${args.disabled}"
+        [selected]="${args.selected}"
+        [ariaLabel]="'Small Icon Button'"
+        [type]="'${args.type}'"
+        [variant]="'${args.variant}'"
+      />
+      <rte-icon-button-toggle 
+        size="l" 
+        name=${args.name} 
+        data-testid="large-icon-button" 
+        [compactSpacing]="${args.compactSpacing}" 
+        [disabled]="${args.disabled}"
+        [selected]="${args.selected}"
+        [ariaLabel]="'Small Icon Button'"
+        [type]="'${args.type}'"
+        [variant]="'${args.variant}'"
+      />
+    </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const smallIconButton = canvas.getByTestId("small-icon-button").getElementsByTagName("button")[0];
+    const mediumIconButton = canvas.getByTestId("medium-icon-button").getElementsByTagName("button")[0];
+    const largeIconButton = canvas.getByTestId("large-icon-button").getElementsByTagName("button")[0];
+
+    expect(smallIconButton.clientHeight).toBe(16);
+    expect(mediumIconButton.clientHeight).toBe(20);
+    expect(largeIconButton.clientHeight).toBe(24);
+  },
+};
+
+export const KeyboardInteraction: Story = {
+  args: {
+    ...Default.args,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+    await userEvent.tab();
+    expect(button).toHaveFocus();
+    await userEvent.keyboard(ENTER_KEY);
+    await userEvent.keyboard(SPACE_KEY);
+    expect(mockFn).toHaveBeenCalledTimes(2);
+    button.blur();
+  },
+};

package/src/lib/components/link/link.component.html

@@ -0,0 +1,6 @@
+<a href="{{ href() }}" class="rte-link" role="link" [ngClass]="{'subtle': subtle()}">
+    <span class="rte-link-label">
+        {{ label() }}
+    </span>
+    <rte-icon *ngIf="externalLink()" name="external-link" [size]="12"></rte-icon>
+</a>

package/src/lib/components/link/link.component.scss

@@ -0,0 +1,108 @@
+@use '@design-system-rte/core/design-tokens/main.scss' as *;
+
+.rte-link {
+
+    @include typography-link-m;
+    align-items: center;
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+
+    &:visited {
+
+        color: var(--content-link-visited);
+        text-decoration: underline;
+
+        &:hover {
+            color: var(--content-link-visited-hover);
+            text-decoration: none;
+        }
+
+        &:active {
+            color: var(--content-link-visited-press);
+            text-decoration: underline;
+        }
+
+        &:focus-visible {
+            color: var(--content-link-visited);
+            text-decoration: underline;
+            outline: 1px solid var(--border-brand-focused);
+            outline-offset: $radius-s;
+            border-radius: $radius-s;
+        }
+    }
+
+    &:not(:visited) {
+
+        color: var(--content-link-default);
+
+        &:hover {
+            color: var(--content-link-hover);
+            text-decoration: none;
+        }
+
+        &:active {
+            color: var(--content-link-press);
+            text-decoration: underline;
+        }
+
+        &:focus-visible {
+            color: var(--content-link-default);
+            text-decoration: underline;
+            outline: 1px solid var(--border-brand-focused);
+            outline-offset: $radius-s;
+            border-radius: $radius-s;
+        }
+    }
+
+    &.subtle {
+
+        &:visited {
+
+            color: var(--content-primary);
+            text-decoration: none;
+
+            &:hover {
+                color: var(--content-link-secondary);
+                text-decoration: underline;
+            }
+
+            &:active {
+                color: var(--content-link-primary);
+                text-decoration: none;
+            }
+
+            &:focus-visible {
+                color: var(--content-link-primary);
+                text-decoration: none;
+                outline: 1px solid var(--border-brand-focused);
+                outline-offset: $radius-s;
+                border-radius: $radius-s;
+            }
+        }
+
+        &:not(:visited) {
+
+            color: var(--content-primary);
+            text-decoration: none;
+
+            &:hover {
+                color: var(--content-secondary);
+                text-decoration: underline;
+            }
+
+            &:active {
+                color: var(--content-primary);
+                text-decoration: none;
+            }
+
+            &:focus-visible {
+                color: var(--content-primary);
+                text-decoration: none;
+                outline: 1px solid var(--border-brand-focused);
+                outline-offset: $radius-s;
+                border-radius: $radius-s;
+            }
+        }
+    }
+}

package/src/lib/components/link/link.component.stories.ts

@@ -0,0 +1,61 @@
+import { Meta, StoryObj } from "@storybook/angular";
+import { userEvent, within, expect } from "@storybook/test";
+
+import { LinkComponent } from "./link.component";
+
+const meta: Meta<LinkComponent> = {
+  title: "Link",
+  component: LinkComponent,
+  tags: ["autodocs"],
+  argTypes: {
+    subtle: {
+      control: "boolean",
+    },
+    externalLink: {
+      control: "boolean",
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<LinkComponent>;
+
+export const Default: Story = {
+  args: {
+    label: "Link",
+    href: "#",
+  },
+};
+
+export const SubtleLink: Story = {
+  args: {
+    ...Default.args,
+    subtle: true,
+  },
+};
+
+export const SubtleLinkExternal: Story = {
+  args: {
+    ...SubtleLink.args,
+    externalLink: true,
+  },
+};
+
+export const ExternalLink: Story = {
+  args: {
+    ...Default.args,
+    externalLink: true,
+  },
+};
+
+export const KeyboardInteraction: Story = {
+  args: {
+    ...Default.args,
+    href: "#",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const link = canvas.getByRole("link");
+    await userEvent.tab();
+    expect(link).toHaveFocus();
+  },
+};

package/src/lib/components/link/link.component.ts

@@ -0,0 +1,18 @@
+import { CommonModule } from "@angular/common";
+import { Component, input } from "@angular/core";
+
+import { IconComponent } from "../icon/icon.component";
+
+@Component({
+  selector: "rte-link",
+  imports: [CommonModule, IconComponent],
+  standalone: true,
+  templateUrl: "./link.component.html",
+  styleUrl: "./link.component.scss",
+})
+export class LinkComponent {
+  readonly label = input("");
+  readonly href = input<string>("#");
+  readonly subtle = input<boolean>(false);
+  readonly externalLink = input<boolean>(false);
+}