@design-system-rte/angular 0.4.4 → 0.5.0

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

@@ -1,40 +0,0 @@
-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

@@ -1,200 +0,0 @@
-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

@@ -1,12 +0,0 @@
-<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

@@ -1,36 +0,0 @@
-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

@@ -1,197 +0,0 @@
-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

@@ -1,6 +0,0 @@
-<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

@@ -1,108 +0,0 @@
-@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

@@ -1,61 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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);
-}