@design-system-rte/angular 0.2.1 → 0.4.1

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.scss

@@ -1,4 +1,4 @@
-@use '@design-system-rte/core/tokens/main.scss' as *;
+@use '@design-system-rte/core/design-tokens/main.scss' as *;
 
 .rte-link {
 
@@ -8,54 +8,54 @@
     display: inline-flex;
     justify-content: center;
 
-        &:visited {
+    &:visited {
 
-            color: var(--content-link-visited);
-            text-decoration: underline;
+        color: var(--content-link-visited);
+        text-decoration: underline;
 
-            &:hover {
-                color: var(--content-link-visited-hover);
-                text-decoration: none;
-            }
+        &:hover {
+            color: var(--content-link-visited-hover);
+            text-decoration: none;
+        }
 
-            &:active {
-                color: var(--content-link-visited-press);
-                text-decoration: underline;
-            }
+        &: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;
-            }
+        &: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) {
+    &:not(:visited) {
 
-            color: var(--content-link-default);
+        color: var(--content-link-default);
 
-            &:hover {
-                color: var(--content-link-hover);
-                text-decoration: none;
-            }
+        &:hover {
+            color: var(--content-link-hover);
+            text-decoration: none;
+        }
 
-            &:active {
-                color: var(--content-link-press);
-                text-decoration: underline;
-            }
+        &: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;
-            }
+        &: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{
+    &.subtle {
 
         &:visited {
 

package/src/lib/components/radio-button/radio-button.component.scss

@@ -1,4 +1,4 @@
-@use '@design-system-rte/core/tokens/main.scss' as *;
+@use '@design-system-rte/core/design-tokens/main.scss' as *;
 
 
 .rte-radio-button-container {
@@ -78,7 +78,7 @@
             border: $width-xs solid var(--content-tertiary);
         }
 
-        &.error{
+        &.error {
             border: $width-xs solid var(--content-danger);
         }
     }

package/src/lib/components/radio-button-group/radio-button-group.component.scss

@@ -1,4 +1,4 @@
-@use '@design-system-rte/core/tokens/main.scss' as *;
+@use '@design-system-rte/core/design-tokens/main.scss' as *;
 
 .radio-button-group-container {
     display: flex;
@@ -31,7 +31,7 @@
             margin: $positive-spacing_0;
             margin-top: $positive-spacing_050;
         }
-        
+
         &.error {
             .group-title {
                 color: var(--content-danger);
@@ -43,7 +43,7 @@
                 color: var(--content-tertiary);
             }
 
-            .error{
+            .error {
                 .group-title {
                     color: var(--content-danger);
                 }

package/src/lib/components/split-button/split-button.component.html

@@ -0,0 +1,56 @@
+<div 
+  class="split-button-container size-{{ size() }} {{appearance()}}"
+  [ngClass]="{'compact-spacing': compactSpacing()}"
+>
+  <button
+    class="split-button-left size-{{ size() }}"
+    data-testid="Main action button" 
+    type="button"
+    [disabled]="disabled()"
+  >
+    <rte-icon 
+      *ngIf="icon()"
+      [name]="icon()!"
+      [size]="splitButtonLeftIconSize()"
+    />
+    <p class="split-button-label size-{{ size() }}">
+      {{label()}}
+    </p>
+  </button>
+
+  <div 
+    class="split-button-divider"
+    [ngClass]="{'disabled': disabled()}"
+  ></div>
+
+  <div class="split-button-right-container">
+    <button
+      class="split-button-right size-{{ size() }}"
+      data-testid="Menu button"
+      type="button"
+      aria-haspopup="menu"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-label]="ariaLabelRight()"
+      [attr.data-selected]="selected()"
+      [disabled]="disabled()"
+      (click)="isOpen.set(true)"
+      (mouseenter)="isOpen.set(true)"
+      (mouseleave)="isOpen.set(false)"
+      (keydown)="handleKeyDownOnRightButton($event)"
+    >
+      <div class="split-button-right-icon-container">
+        <rte-icon name="arrow-chevron-down"[size]="splitButtonRightIconSize()"/>
+      </div>
+    </button>
+
+    <div
+      class="split-button-dropdown position-{{ position() }}"
+      role="menu"
+      data-testid="Menu container"
+      [style.visibility]="isOpen() ? 'visible' : 'hidden'"
+      (keydown)="handleKeyDownOnMenu($event)"
+    >
+      <ng-content/>
+    </div>
+  </div>
+</div>