@design-system-rte/angular 0.2.0-rc2 → 0.2.1

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": [
+    "@design-system-rte/core"
+  ]
+}

package/package.json

@@ -1,27 +1,14 @@
 {
   "name": "@design-system-rte/angular",
-  "version": "0.2.0-rc2",
+  "version": "0.2.1",
   "description": "Angular components for the Design System RTE",
   "peerDependencies": {
     "@angular/common": "^17.3.0",
     "@angular/core": "^17.3.0"
   },
   "dependencies": {
-    "@design-system-rte/core": "^0.1.2-rc3",
+    "@design-system-rte/core": "^0.3.0",
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
-  "module": "fesm2022/design-system-rte-angular.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/design-system-rte-angular.mjs",
-      "esm": "./esm2022/design-system-rte-angular.mjs",
-      "default": "./fesm2022/design-system-rte-angular.mjs"
-    }
-  }
-}
+  "sideEffects": false
+}

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

@@ -0,0 +1,10 @@
+<button
+    class="rte-button {{ variant() }} size-{{ size() }}"
+    [attr.aria-label]="ariaLabel()"
+    [attr.aria-labelledby]="ariaLabelledBy()"
+    [attr.type]="buttonType()"
+    [disabled]="disabled()"
+    (click)="onClick($event)"
+>
+    <span class="rte-button-label">{{ label() }}</span>
+</button>

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

@@ -0,0 +1,156 @@
+@use '@design-system-rte/core/tokens/main.scss' as *;
+
+.rte-button {
+    align-items: center;
+    cursor: pointer;
+    display: inline-flex;
+    flex-shrink: 0;
+    justify-content: center;
+
+    &:focus-visible {
+        outline: 1px solid var(--border-brand-focused);
+        outline-offset: 4px;
+    }
+
+    &.size-s {
+        @include typography-button-s;
+        height: 24px;
+        border-radius: $radius-s;
+        padding: $positive-spacing_050 $positive-spacing_100;
+
+        .rte-button-label {
+            margin: 0 $positive-spacing_050;
+        }
+    }
+
+    &.size-m {
+        @include typography-button-m;
+        height: 32px;
+        border-radius: $radius-s;
+        padding: $positive-spacing_050 $positive-spacing_150;
+
+        .rte-button-label {
+            margin: 0 $positive-spacing_075;
+        }
+    }
+
+    &.size-l {
+        @include typography-button-l;
+        height: 40px;
+        border-radius: $radius-m;
+        padding: $positive-spacing_050 $positive-spacing_200;
+
+        .rte-button-label {
+            margin: 0 $positive-spacing_100;
+        }
+    }
+
+    &.primary {
+        border: var(--border-brand-default);
+        color: var(--content-primary-inverse);
+        background: var(--background-brand-default);
+
+        &:hover {
+            background: var(--background-brand-hover);
+            border: var(--background-brand-hover);
+        }
+
+        &:active {
+            background: var(--background-brand-pressed);
+        }
+
+        &:disabled {
+            background: var(--background-disabled);
+            border: solid  1px var(--border-disabled);
+            color: var(--content-disabled);
+            box-shadow: none;
+            cursor: default;
+        }
+    };
+
+    &.secondary {
+        background: var(--background-default);
+        border: solid 1px 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);
+            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-pressed);
+        }
+
+        &:disabled {
+            color: var(--content-disabled);
+            box-shadow: none;
+            cursor: default;
+        }
+    };
+    
+    &.danger {
+        background: var(--background-danger-default);
+        border: none;
+        color: var(--content-primary-inverse);
+        border-radius: $radius-m;
+
+        &:hover {
+            background: var(--background-danger-hover);
+        }
+
+        &:active {
+            background: var(--background-danger-pressed);
+        }
+        
+        &:disabled {
+            background: var(--background-disabled);
+            border: var(--border-disabled);
+            color: var(--content-disabled);
+            box-shadow: none;
+            cursor: default;
+        }
+    }
+}

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

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { ButtonComponent } from "./button.component";
+
+describe("ButtonComponent", () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,99 @@
+import { ENTER_KEY, TAB_KEY, SPACE_KEY } from "@design-system-rte/core/constants/keyboard.constants";
+import type { Meta, StoryObj } from "@storybook/angular";
+import { fn, userEvent, within, expect } from "@storybook/test";
+
+import { ButtonComponent } from "./button.component";
+
+const meta: Meta<ButtonComponent> = {
+  title: "Button",
+  component: ButtonComponent,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["primary", "secondary", "text", "transparent", "danger"],
+    },
+    size: {
+      control: "select",
+      options: ["s", "m", "l"],
+    },
+    disabled: {
+      control: "boolean",
+    },
+  },
+  args: { click: fn() },
+};
+
+export default meta;
+type Story = StoryObj<ButtonComponent>;
+
+const mockFn = fn();
+
+export const Default: Story = {
+  args: {
+    variant: "primary",
+    label: "Button",
+    click: mockFn,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+    await userEvent.click(button);
+    expect(mockFn).toHaveBeenCalled();
+    button.blur();
+  },
+};
+
+export const Sizing: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+    <div style="display: flex; gap: 8px;">
+        <rte-button
+          size="s"
+          label="Small"
+          variant="primary"
+          data-testid="small-button"
+          />
+        <rte-button
+          size="m"
+          label="Medium"
+          variant="primary"
+          data-testid="medium-button"
+          />
+          <rte-button
+          size="l"
+          label="Large"
+          variant="primary"
+          data-testid="large-button"
+          />
+    </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const smallButton = canvas.getByTestId("small-button").getElementsByTagName("button")[0];
+    const mediumButton = canvas.getByTestId("medium-button").getElementsByTagName("button")[0];
+    const largeButton = canvas.getByTestId("large-button").getElementsByTagName("button")[0];
+
+    expect(smallButton.clientHeight).toBe(24);
+    expect(mediumButton.clientHeight).toBe(32);
+    expect(largeButton.clientHeight).toBe(40);
+  },
+};
+
+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/button/button.component.ts

@@ -0,0 +1,27 @@
+import { Component, input, output } from "@angular/core";
+import { ButtonSize, ButtonType, ButtonVariant } from "@design-system-rte/core/components/button/button.interface";
+
+@Component({
+  selector: "rte-button",
+  imports: [],
+  standalone: true,
+  templateUrl: "./button.component.html",
+  styleUrl: "./button.component.scss",
+})
+export class ButtonComponent {
+  readonly label = input("");
+  readonly variant = input<ButtonVariant>("primary");
+  readonly size = input<ButtonSize>("m");
+  readonly disabled = input(false);
+  readonly icon = input<string>("");
+  readonly ariaLabel = input<string>("");
+  readonly ariaLabelledBy = input<string>("");
+  readonly buttonType = input<ButtonType>("button");
+
+  readonly click = output<void>();
+
+  onClick(event: MouseEvent | KeyboardEvent): void {
+    event.stopPropagation();
+    this.click.emit();
+  }
+}

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

@@ -0,0 +1,31 @@
+    <div class="rte-checkbox-container">
+        <input
+            type="checkbox"
+            class="rte-checkbox"
+            [id]="id()"
+            [value]="value()"
+            [ngClass]="{'error': error(), 'read-only': readOnly()}"
+            [disabled]="disabled()"
+            [indeterminate]="indeterminate()"
+            [checked]="checked()"
+            (keydown)="onKeydown($event)"
+        />
+            <rte-icon class="rte-checkbox-icons rte-checkbox-icon-selected" name="check-small" [size]="16"/> 
+            <rte-icon class="rte-checkbox-icons rte-checkbox-icon-indeterminated" name="check-indeterminate" [size]="16" /> 
+        <div class="rte-checkbox-text-container">
+            <label 
+            *ngIf="showLabel()" 
+            class="rte-checkbox-label" 
+            [for]="id()"
+            [ngClass]="{
+                'error': error(),
+                'read-only': readOnly(),
+                'disabled': disabled()
+            }"
+            >
+                {{ label() }}
+            </label>
+            <p class="rte-checkbox-description">{{ description() }}</p>
+            <p *ngIf="error() && errorMessage()" class="rte-checkbox-error">{{ errorMessage() }}</p>
+        </div>
+    </div>

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

@@ -0,0 +1,170 @@
+@use '@design-system-rte/core/tokens/main.scss' as *;
+
+@mixin checked-indeterminate-style {
+  border: 1px solid var(--content-brand-default);
+  background: var(--background-brand-default);
+
+  &:hover {
+    &:not(:disabled):not(:active)::before {
+      opacity: $opacity-20;
+      background: var(--background-brand-default);
+    }
+  }
+
+  &:disabled {
+    border: 1px solid var(--content-disabled);
+    background: var(--background-disabled);
+
+    ~ .rte-checkbox-icons {
+      color: var(--content-disabled);    
+    }
+  }
+
+  &.error {
+    background: var(--background-danger-default);
+  }
+}
+
+.rte-checkbox-container {
+    display: flex;
+    gap: $positive-spacing-150;
+
+  .rte-checkbox {
+    appearance: none;
+    display: flex;
+    width: 16px;
+    height: 16px;
+    border-radius: $radius-xs;
+    border: 1px solid var(--content-tertiary);
+    opacity: $opacity-100;
+    background: var(--background-default);
+    align-items: center;
+    justify-content: center;
+    margin: $positive-spacing_050 0;
+
+    &::before {
+      content: '';
+      display: none;
+      position: absolute;
+      border-radius: $radius-pill;
+      background: var(--background-hover);
+      width: 32px;
+      height: 32px;
+      z-index: -1;
+    }
+
+    &:active::before {
+      opacity: $opacity-100;
+      transform: scale(0);
+      transition: transform 0s, opacity 0s;
+    }
+    
+    &:focus-visible {
+      outline: 1px solid var(--border-brand-focused);
+      outline-offset: 4px;
+    }
+
+    &:hover {
+      cursor: pointer;
+
+      &:not(:disabled)::before {
+        display: inline-block;
+      }
+      &:not(:disabled):not(:active)::before {
+        opacity: $opacity-50;
+        transition: transform 0.15s ease, opacity 0.3s ease;
+      }
+    }
+
+    &:disabled {
+      cursor: default;
+      border: 1px solid var(--content-disabled);
+      background: var(--background-disabled);
+
+      ~ .rte-checkbox-text-container {
+        label,
+        .rte-checkbox-description {
+          color: var(--content-disabled);
+        }
+      }
+    }
+
+    &:checked {
+      @include checked-indeterminate-style;
+
+      &:not(:indeterminate) {
+        ~ .rte-checkbox-icon-selected {
+          display: block;
+        }
+      }
+    }
+
+    &:indeterminate {
+      @include checked-indeterminate-style;
+
+      ~ .rte-checkbox-icon-indeterminated {
+        display: block;
+      }
+    }
+
+    &.read-only {
+      pointer-events: none;
+      cursor: default;
+      border: 1px solid var(--content-tertiary);
+      opacity: $opacity-100;
+      background: var(--background-disabled);
+
+      ~ .rte-checkbox-text-container {
+        label,
+        .checkbox-description {
+          color: var(--content-tertiary);
+        }
+      }
+      ~ .rte-checkbox-icons {
+          color: var(--content-tertiary);
+      }
+
+      &.error {
+        border: 1px solid var(--content-danger);
+        background: var(--background-disabled);
+      }
+    }
+
+    &.error {
+      border: 1px solid var(--content-danger);
+      background: var(--background-default);
+
+      &:hover {
+        &:not(:disabled):not(:active)::before {
+          opacity: $opacity-20;
+          background: var(--background-danger-hover);
+        }
+      }
+    }
+  }
+
+  .rte-checkbox-text-container {
+    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;
+      color: var(--content-danger);
+    }
+  }
+
+  .rte-checkbox-icons {
+    display: none;
+    z-index: 1;
+    pointer-events: none;
+    transform: translateY(4px);
+    position: absolute;
+    color: white;
+  }
+}

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

@@ -0,0 +1,126 @@
+import { Meta, StoryObj } from "@storybook/angular";
+import { userEvent, within, expect } from "@storybook/test";
+
+import { CheckboxComponent } from "./checkbox.component";
+
+const meta: Meta<CheckboxComponent> = {
+  title: "Checkbox",
+  component: CheckboxComponent,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: "text",
+      defaultValue: "Label",
+    },
+    description: {
+      control: "text",
+      defaultValue: "Description",
+    },
+    showLabel: {
+      control: "boolean",
+      defaultValue: true,
+    },
+    disabled: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    indeterminate: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    errorMessage: {
+      control: "text",
+      defaultValue: "",
+    },
+    readOnly: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    checked: {
+      control: "boolean",
+      defaultValue: false,
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<CheckboxComponent>;
+
+export const Default: Story = {
+  args: {
+    id: "my-checkbox",
+    label: "Label",
+    description: "Description",
+    disabled: false,
+    readOnly: false,
+    showLabel: true,
+    indeterminate: false,
+    errorMessage: "",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+    await userEvent.click(checkbox);
+    expect(checkbox).toBeChecked();
+    checkbox.blur();
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+    expect(checkbox).toBeDisabled();
+    await userEvent.click(checkbox);
+    expect(checkbox).not.toBeChecked();
+  },
+};
+
+export const Indeterminated: Story = {
+  args: {
+    ...Default.args,
+    indeterminate: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    ...Default.args,
+    readOnly: true,
+    checked: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+    await userEvent.keyboard(`{Tab}`);
+    expect(checkbox).toHaveFocus();
+    await userEvent.keyboard(`{ }`);
+    expect(checkbox).toBeChecked();
+    checkbox.blur();
+  },
+};
+
+export const Error: Story = {
+  args: {
+    ...Default.args,
+    errorMessage: "Error message",
+  },
+};
+
+export const KeyboardInteractions: Story = {
+  args: {
+    ...Default.args,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+    await userEvent.keyboard(`{Tab}`);
+    expect(checkbox).toHaveFocus();
+    await userEvent.keyboard(`{ }`);
+    expect(checkbox).toBeChecked();
+    checkbox.blur();
+  },
+};