@design-system-rte/angular 0.2.1 → 0.4.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @design-system-rte/angular
+
+## 0.4.1
+
+### Patch Changes
+
+- d6dd2fb: test changesets for Angular

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@design-system-rte/angular",
-  "version": "0.2.1",
+  "version": "0.4.1",
   "description": "Angular components for the Design System RTE",
+  "publishConfig": {
+    "access": "public"
+  },
   "peerDependencies": {
-    "@angular/common": "^17.3.0",
-    "@angular/core": "^17.3.0"
+    "@angular/common": "^17.3.12",
+    "@angular/core": "^17.3.12"
   },
   "dependencies": {
-    "@design-system-rte/core": "^0.3.0",
+    "@design-system-rte/core": "^0.6.0",
     "tslib": "^2.3.0"
   },
   "sideEffects": false
-}
+}

package/src/lib/components/button/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-button {
     align-items: center;
@@ -61,35 +61,33 @@
 
         &:disabled {
             background: var(--background-disabled);
-            border: solid  1px var(--border-disabled);
+            border: solid $width-xs var(--border-disabled);
             color: var(--content-disabled);
             box-shadow: none;
             cursor: default;
         }
-    };
+    }
 
     &.secondary {
         background: var(--background-default);
-        border: solid 1px var(--border-brand-default);
+        border: solid $width-xs var(--border-brand-default);
         color: var(--content-brand-default);
 
         &:hover {
             background: var(--background-brand-inverse-hover);
-            border: solid 1px var(--border-brand-default);
         }
 
         &:active {
-            border: var(--background-brand-inverse);
             background: var(--background-brand-inverse-pressed);
         }
 
         &:disabled {
             background: var(--background-disabled);
-            border: solid 1px var(--border-disabled);
+            border: solid $width-xs var(--border-disabled);
             color: var(--content-disabled);
             cursor: default;
         }
-    };
+    }
 
     &.text {
         background: transparent;
@@ -109,7 +107,7 @@
             color: var(--content-disabled);
             cursor: default;
         }
-    };
+    }
 
     &.transparent {
         background: transparent;
@@ -121,7 +119,7 @@
         }
 
         &:active {
-            color: var(--content-brand-pressed);
+            color: var(--content-brand-press);
         }
 
         &:disabled {
@@ -129,8 +127,8 @@
             box-shadow: none;
             cursor: default;
         }
-    };
-    
+    }
+
     &.danger {
         background: var(--background-danger-default);
         border: none;
@@ -144,7 +142,7 @@
         &:active {
             background: var(--background-danger-pressed);
         }
-        
+
         &:disabled {
             background: var(--background-disabled);
             border: var(--border-disabled);

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

@@ -1,5 +1,6 @@
 import { Component, input, output } from "@angular/core";
-import { ButtonSize, ButtonType, ButtonVariant } from "@design-system-rte/core/components/button/button.interface";
+import { ButtonType } from "@design-system-rte/core/components/button/button.interface";
+import { ButtonSize, ButtonVariant } from "@design-system-rte/core/components/button/common/common-button";
 
 @Component({
   selector: "rte-button",

package/src/lib/components/checkbox/checkbox.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 *;
 
 @mixin checked-indeterminate-style {
   border: 1px solid var(--content-brand-default);
@@ -15,8 +15,8 @@
     border: 1px solid var(--content-disabled);
     background: var(--background-disabled);
 
-    ~ .rte-checkbox-icons {
-      color: var(--content-disabled);    
+    ~.rte-checkbox-icons {
+      color: var(--content-disabled);
     }
   }
 
@@ -26,8 +26,8 @@
 }
 
 .rte-checkbox-container {
-    display: flex;
-    gap: $positive-spacing-150;
+  display: flex;
+  gap: $positive-spacing-150;
 
   .rte-checkbox {
     appearance: none;
@@ -58,7 +58,7 @@
       transform: scale(0);
       transition: transform 0s, opacity 0s;
     }
-    
+
     &:focus-visible {
       outline: 1px solid var(--border-brand-focused);
       outline-offset: 4px;
@@ -70,6 +70,7 @@
       &:not(:disabled)::before {
         display: inline-block;
       }
+
       &:not(:disabled):not(:active)::before {
         opacity: $opacity-50;
         transition: transform 0.15s ease, opacity 0.3s ease;
@@ -81,7 +82,8 @@
       border: 1px solid var(--content-disabled);
       background: var(--background-disabled);
 
-      ~ .rte-checkbox-text-container {
+      ~.rte-checkbox-text-container {
+
         label,
         .rte-checkbox-description {
           color: var(--content-disabled);
@@ -93,7 +95,7 @@
       @include checked-indeterminate-style;
 
       &:not(:indeterminate) {
-        ~ .rte-checkbox-icon-selected {
+        ~.rte-checkbox-icon-selected {
           display: block;
         }
       }
@@ -102,7 +104,7 @@
     &:indeterminate {
       @include checked-indeterminate-style;
 
-      ~ .rte-checkbox-icon-indeterminated {
+      ~.rte-checkbox-icon-indeterminated {
         display: block;
       }
     }
@@ -114,14 +116,16 @@
       opacity: $opacity-100;
       background: var(--background-disabled);
 
-      ~ .rte-checkbox-text-container {
+      ~.rte-checkbox-text-container {
+
         label,
         .checkbox-description {
           color: var(--content-tertiary);
         }
       }
-      ~ .rte-checkbox-icons {
-          color: var(--content-tertiary);
+
+      ~.rte-checkbox-icons {
+        color: var(--content-tertiary);
       }
 
       &.error {
@@ -147,11 +151,13 @@
     label {
       @include typography-text-l;
     }
+
     .rte-checkbox-description {
       @include typography-text-s;
       margin: 0;
       color: var(--content-tertiary);
     }
+
     .rte-checkbox-error {
       @include typography-checkbox-error;
       margin: 0;

package/src/lib/components/checkbox-group/checkbox-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 *;
 
 .checkbox-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/icon/icon-map.ts

@@ -1,3 +1,5 @@
+import { isValidIconName as isValidIconNameShared } from "@design-system-rte/core/components/icon/icon-utils";
+
 export const togglableIcons = {
   "add-circle": ["add_circle_outlined", "add_circle_filled"],
   "admin-panel-settings": ["admin_panel_settings_outlined", "admin_panel_settings_filled"],
@@ -299,3 +301,5 @@ export const regularIcons = {
   "zoom-out": "zoom_out",
   "zoom-in": "zoom_in",
 };
+
+export const isValidIconName = (name: string): boolean => isValidIconNameShared(name, regularIcons, togglableIcons);

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

@@ -13,7 +13,7 @@ const meta = {
   argTypes: {
     name: {
       control: "select",
-      options: [...RegularIconIds, ...TogglableIconIds].sort(),
+      options: [...RegularIconIds, ...TogglableIconIds].sort((a, b) => a.localeCompare(b)),
       description: "Nom de l’icône à afficher",
       defaultValue: "check",
     },

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

@@ -0,0 +1,16 @@
+<button
+  *ngIf="isValidIconName"
+  class="rte-icon-button {{ variant() }} size-{{ size() }}"
+  [class.compact-spacing]="compactSpacing()"
+  [disabled]="disabled()"
+  [attr.aria-label]="ariaLabel()"
+  [attr.aria-labelledby]="ariaLabelledBy()"
+  [type]="type()"
+  (click)="onClick($event)"
+>
+  <rte-icon
+    [name]="name()"
+    [appearance]="appearance()"
+    [size]="buttonIconSize()"
+  />
+</button>

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

@@ -0,0 +1,165 @@
+@use '@design-system-rte/core/design-tokens/main.scss' as *;
+
+.rte-icon-button {
+    display: inline-flex;
+    cursor: pointer;
+    height: 24px;
+    align-items: center;
+    gap: $positive-spacing_0;
+    flex-shrink: 0;
+
+    &:focus-visible {
+        outline: none;
+        position: relative;
+
+        &::after {
+            content: '';
+            position: absolute;
+            inset: -4px;
+            border-radius: 6px;
+            pointer-events: none;
+            box-shadow: 0 0 0 1px var(--border-brand-focused);
+        }
+    }
+
+    &.size-s {
+        border-radius: $radius-s;
+        height: 24px;
+        padding: $positive-spacing_025 $positive-spacing_050;
+
+        &.compact-spacing {
+            height: 16px;
+        }
+    }
+
+    &.size-m {
+        border-radius: $radius-s;
+        height: 32px;
+        padding: $positive-spacing_050 $positive-spacing_075;
+
+        &.compact-spacing {
+            height: 20px;
+        }
+    }
+
+    &.size-l {
+        border-radius: $radius-m;
+        height: 40px;
+        padding: $positive-spacing_075 $positive-spacing_100;
+
+        &.compact-spacing {
+            height: 24px;
+        }
+    }
+
+    &.primary {
+        background: var(--background-brand-default);
+        border: var(--border-brand-default);
+        color: var(--content-primary-inverse);
+
+        &:hover {
+            background: var(--background-brand-hover);
+            border: var(--background-brand-hover);
+        }
+
+        &:active {
+            background: var(--background-brand-pressed);
+        }
+
+        &:disabled {
+            background: var(--background-disabled);
+            border: solid $width-xs var(--border-disabled);
+            box-shadow: none;
+            color: var(--content-disabled);
+            cursor: default;
+        }
+    }
+
+    &.secondary {
+        background: var(--background-default);
+        border: solid $width-xs var(--border-brand-default);
+        color: var(--content-brand-default);
+
+        &:hover {
+            background: var(--background-brand-inverse-hover);
+            border: solid $width-xs var(--border-brand-default);
+        }
+
+        &:active {
+            background: var(--background-brand-inverse-pressed);
+        }
+
+        &:disabled {
+            background: var(--background-disabled);
+            border: solid $width-xs var(--border-disabled);
+            color: var(--content-disabled);
+            cursor: default;
+        }
+    }
+
+    &.text {
+        background: transparent;
+        border: none;
+        color: var(--content-brand-default);
+
+        &:hover {
+            background: var(--background-brand-inverse-hover);
+        }
+
+        &:active {
+            background: var(--background-brand-inverse-pressed);
+        }
+
+        &:disabled {
+            background: var(--background-disabled);
+            color: var(--content-disabled);
+            cursor: default;
+        }
+    }
+
+    &.transparent {
+        background: transparent;
+        border: none;
+        color: var(--content-brand-default);
+
+        &:hover {
+            color: var(--content-brand-hover);
+        }
+
+        &:active {
+            color: var(--content-brand-press);
+        }
+
+        &:disabled {
+            box-shadow: none;
+            background-color: var(--background-disabled);
+            color: var(--content-disabled);
+            cursor: default;
+        }
+    }
+
+    &.danger {
+        background: var(--background-danger-default);
+        border: none;
+        color: var(--content-primary-inverse);
+
+        &:hover {
+            background: var(--background-danger-hover);
+        }
+
+        &:active {
+            background: var(--background-danger-pressed);
+        }
+
+        &:disabled {
+            background: var(--background-disabled);
+            border: solid $width-xs var(--border-disabled);
+            color: var(--content-disabled);
+            cursor: default;
+        }
+    }
+
+    &.compact-spacing {
+        padding: $positive-spacing_0;
+    }
+}

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();
+  },
+};