@design-system-rte/angular 0.2.2 → 0.4.1

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

@@ -0,0 +1,288 @@
+@use '@design-system-rte/core/design-tokens/main.scss' as *;
+
+.split-button-container {
+    display: inline-flex;
+    padding: $positive-spacing_0;
+    align-items: center;
+    gap: $positive-spacing_0;
+    align-self: stretch;
+
+    &.size-s {
+        height: 24px;
+
+        &.compact-spacing {
+            height: 20px;
+        }
+    }
+
+    &.size-m {
+        height: 32px;
+
+        &.compact-spacing {
+            height: 24px;
+        }
+    }
+
+    &.size-l {
+        height: 40px;
+
+        &.compact-spacing {
+            height: 28px;
+        }
+    }
+
+    &.secondary {
+        .split-button-left {
+            border-top: 1px solid var(--border-brand-default);
+            border-bottom: 1px solid var(--border-brand-default);
+            border-left: 1px solid var(--border-brand-default);
+            background-color: var(--background-default);
+            color: var(--content-brand-default);
+
+            &:hover {
+                cursor: pointer;
+                background-color: var(--background-brand-inverse-hover);
+            }
+
+            &:active {
+                background-color: var(--background-brand-inverse-pressed);
+            }
+
+            &:disabled {
+                background-color: var(--background-disabled);
+                color: var(--content-disabled);
+                border-top: 1px solid var(--border-disabled);
+                border-bottom: 1px solid var(--border-disabled);
+                border-left: 1px solid var(--border-disabled);
+                cursor: not-allowed;
+            }
+        }
+
+        .split-button-divider {
+            background-color: var(--border-brand-default);
+        }
+
+        .split-button-right-container {
+            .split-button-right {
+                border-top: 1px solid var(--border-brand-default);
+                border-bottom: 1px solid var(--border-brand-default);
+                border-right: 1px solid var(--border-brand-default);
+                background-color: var(--background-default);
+                color: var(--content-brand-default);
+
+                &:hover {
+                    cursor: pointer;
+                    background-color: var(--background-brand-inverse-hover);
+                }
+
+                &:active {
+                    background-color: var(--background-brand-inverse-pressed);
+                }
+
+                &:disabled {
+                    background-color: var(--background-disabled);
+                    color: var(--content-disabled);
+                    border-top: 1px solid var(--border-disabled);
+                    border-bottom: 1px solid var(--border-disabled);
+                    border-right: 1px solid var(--border-disabled);
+                    cursor: not-allowed;
+                }
+            }
+        }
+    }
+
+    .split-button-left {
+        display: flex;
+        border: none;
+        padding: $positive-spacing_0 $positive-spacing_100;
+        align-items: center;
+        gap: $positive-spacing_0;
+        align-self: stretch;
+        border-radius: $radius-s $radius-none $radius-none $radius-s;
+        border-color: var(--border-brand-default);
+        background-color: var(--background-brand-default);
+        color: var(--content-primary-inverse);
+
+        .split-button-label {
+            margin: 0;
+
+            &.size-s {
+                @include typography-split-button-s;
+            }
+
+            &.size-m {
+                @include typography-split-button-m;
+            }
+
+            &.size-l {
+                @include typography-split-button-l;
+            }
+        }
+
+        &:hover {
+            cursor: pointer;
+            background-color: var(--background-brand-hover);
+        }
+
+        &:active {
+            background-color: var(--background-brand-pressed);
+        }
+
+        &:disabled {
+            background-color: var(--background-disabled);
+            color: var(--content-disabled);
+            border-top: 1px solid var(--border-disabled);
+            border-bottom: 1px solid var(--border-disabled);
+            border-left: 1px solid var(--border-disabled);
+            cursor: not-allowed;
+        }
+
+        &:focus {
+            outline: none;
+            position: relative;
+            z-index: 1;
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: -8px;
+                left: -8px;
+                bottom: -8px;
+                right: -1px;
+                border: 1px solid var(--border-brand-focused);
+                pointer-events: none;
+                border-radius: $radius-s;
+                z-index: 2;
+            }
+        }
+    }
+
+    .split-button-divider {
+        width: 1px;
+        height: 100%;
+        background-color: var(--content-primary-inverse);
+
+        &.disabled {
+            background-color: var(--border-disabled);
+        }
+    }
+
+    .split-button-right-container {
+        display: flex;
+        position: relative;
+        padding: $positive-spacing_0;
+        align-items: center;
+        justify-content: center;
+        gap: $positive-spacing_0;
+        align-self: stretch;
+
+        &.size-s {
+            width: 24px;
+        }
+
+        &.size-m {
+            width: 34px;
+        }
+
+        &.size-l {
+            width: 44px;
+        }
+
+        .split-button-right {
+            display: flex;
+            border: none;
+            padding: $positive-spacing_075 $positive-spacing_200;
+            align-items: center;
+            justify-content: center;
+            align-self: stretch;
+
+            border-radius: $radius-none $radius-s $radius-s $radius-none;
+            border-color: var(--border-brand-default);
+            background-color: var(--background-brand-default);
+
+            color: var(--content-primary-inverse);
+
+            &:hover {
+                cursor: pointer;
+                background-color: var(--background-brand-hover);
+            }
+
+            &:active {
+                background-color: var(--background-brand-pressed);
+            }
+
+            &:disabled {
+                background-color: var(--background-disabled);
+                color: var(--content-disabled);
+                border-top: 1px solid var(--border-disabled);
+                border-bottom: 1px solid var(--border-disabled);
+                border-right: 1px solid var(--border-disabled);
+                cursor: not-allowed;
+            }
+
+            &:focus {
+                outline: none;
+                position: relative;
+                z-index: 1;
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: -8px;
+                    left: -1px;
+                    bottom: -8px;
+                    right: -8px;
+                    border: 1px solid var(--border-brand-focused);
+                    pointer-events: none;
+                    border-radius: $radius-s;
+                    z-index: 2;
+                }
+            }
+
+            .split-button-right-icon-container {
+                pointer-events: none;
+            }
+        }
+
+        .split-button-dropdown {
+            position: absolute;
+
+            &.position-bottom-start {
+                top: 100%;
+                left: 0;
+            }
+
+            &.position-bottom-end {
+                top: 100%;
+                right: 0;
+            }
+
+            &.position-top-start {
+                bottom: 100%;
+                left: 0;
+            }
+
+            &.position-top-end {
+                bottom: 100%;
+                right: 0;
+            }
+        }
+    }
+}
+
+.animation-slide-from-top {
+    animation: slide-from-top 0.2s ease-in-out;
+}
+
+@keyframes slide-from-top {
+    from {
+        transform: translateY(-10px);
+        pointer-events: none;
+        opacity: 0;
+    }
+
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}

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

@@ -0,0 +1,227 @@
+import { DOWN_KEY } from "@design-system-rte/core/constants/keyboard.constants";
+import { Meta, StoryObj } from "@storybook/angular";
+import { expect, userEvent, waitFor, within } from "@storybook/test";
+
+import { SplitButtonComponent } from "./split-button.component";
+
+const mockChildren = `
+  <div style="display: flex; flex-direction: column; gap: 8px; min-width: 120px">
+    <button
+      style="
+        padding: 8px 16px;
+        border: none;
+        border-radius: 4px;
+        background: #2563eb;
+        color: #fff;
+        font-weight: 500;
+        font-size: 15px;
+        cursor: pointer;
+      "
+    >
+      Action 1
+    </button>
+    <button
+      style="
+        padding: 8px 16px;
+        border: none;
+        border-radius: 4px;
+        background: #64748b;
+        color: #fff;
+        font-weight: 500;
+        font-size: 15px;
+        cursor: pointer;
+      "
+    >
+      Action 2
+    </button>
+  </div>
+`;
+
+function generateSplitButtonElement(props: Record<string, string> = {}): string {
+  const defaultProps = {
+    appearance: "appearance",
+    label: "label",
+    position: "position",
+    disabled: "disabled",
+    ariaLabelRight: "ariaLabelRight",
+    ...props,
+  };
+
+  const attributes = Object.entries(defaultProps)
+    .map(([key, value]) => `[${key}]="${value}"`)
+    .join("\n");
+
+  return `
+    <rte-split-button
+      ${attributes}
+    >
+      ${mockChildren}
+    </rte-split-button>`;
+}
+
+const meta: Meta<SplitButtonComponent> = {
+  title: "SplitButton",
+  component: SplitButtonComponent,
+  tags: ["autodocs"],
+  argTypes: {
+    appearance: {
+      control: "select",
+      options: ["primary", "secondary"],
+    },
+    size: {
+      control: "select",
+      options: ["s", "m", "l"],
+    },
+    compactSpacing: {
+      control: "boolean",
+    },
+    selected: {
+      control: "boolean",
+    },
+    position: {
+      control: "select",
+      options: ["bottom-start", "bottom-end", "top-start", "top-end"],
+    },
+    disabled: {
+      control: "boolean",
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<SplitButtonComponent>;
+
+export const Default: Story = {
+  args: {
+    appearance: "primary",
+    label: "Button Label",
+    compactSpacing: false,
+    position: "bottom-start",
+    disabled: false,
+    ariaLabelRight: "Open menu",
+  },
+  render: (args) => ({
+    props: args,
+    template: `
+      ${generateSplitButtonElement()}
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByTestId("Main action button");
+    await userEvent.click(button);
+  },
+};
+
+export const Appearance: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="display: flex; gap: 16px">
+        ${generateSplitButtonElement({ appearance: "'primary'" })}
+        ${generateSplitButtonElement({ appearance: "'secondary'" })}
+      </div>
+    `,
+  }),
+  args: {
+    ...Default.args,
+  },
+};
+
+export const Size: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="display: flex; gap: 16px">
+        ${generateSplitButtonElement({ size: "'s'" })}
+        ${generateSplitButtonElement({ size: "'m'" })}
+        ${generateSplitButtonElement({ size: "'l'" })}
+      </div>
+    `,
+  }),
+  args: {
+    ...Default.args,
+  },
+};
+
+export const CompactSpacing: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="display: flex; gap: 16px">
+        ${generateSplitButtonElement({
+          size: "'s'",
+          compactSpacing: "true",
+          icon: "icon",
+        })}
+        ${generateSplitButtonElement({
+          size: "'m'",
+          compactSpacing: "true",
+          icon: "icon",
+        })}
+        ${generateSplitButtonElement({
+          size: "'l'",
+          compactSpacing: "true",
+          icon: "icon",
+        })}
+      </div>
+    `,
+  }),
+  args: {
+    ...Default.args,
+  },
+};
+
+export const Position: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div style="display: flex; justify-content: center; align-items: center; min-height: 600px">
+        <div style="display: grid; grid-template-columns: 2fr 2fr; gap: 24px">
+          ${generateSplitButtonElement({
+            position: "'top-end'",
+            compactSpacing: "compactSpacing",
+            selected: "selected",
+            icon: "icon",
+          })}
+          ${generateSplitButtonElement({
+            position: "'top-start'",
+            compactSpacing: "compactSpacing",
+            selected: "selected",
+            icon: "icon",
+          })}
+          ${generateSplitButtonElement({
+            position: "'bottom-end'",
+            compactSpacing: "compactSpacing",
+            selected: "selected",
+            icon: "icon",
+          })}
+          ${generateSplitButtonElement({
+            position: "'bottom-start'",
+            compactSpacing: "compactSpacing",
+            selected: "selected",
+            icon: "icon",
+          })}
+        </div>
+      </div>
+    `,
+  }),
+  args: {
+    ...Default.args,
+  },
+};
+
+export const KeyboardInteraction: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByTestId("Menu button");
+    const menuContainer = canvas.getByTestId("Menu container");
+    await userEvent.tab();
+    await userEvent.tab();
+    expect(document.activeElement).toBe(button);
+    await userEvent.keyboard(DOWN_KEY);
+    await waitFor(() => expect(menuContainer).toBeVisible());
+  },
+  args: {
+    ...Default.args,
+  },
+};

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

@@ -0,0 +1,55 @@
+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component, computed, input, signal } from "@angular/core";
+import {
+  splitButtonLeftIconSize,
+  splitButtonRightIconSize,
+} from "@design-system-rte/core/components/split-button/split-button.constants";
+import {
+  SplitButtonAppearance,
+  SplitButtonPosition,
+  SplitButtonSize,
+} from "@design-system-rte/core/components/split-button/split-button.interface";
+
+import { IconComponent } from "../icon/icon.component";
+import { RegularIconIdKey, TogglableIconIdKey } from "../icon/icon.service";
+
+@Component({
+  selector: "rte-split-button",
+  imports: [CommonModule, IconComponent],
+  standalone: true,
+  templateUrl: "./split-button.component.html",
+  styleUrl: "./split-button.component.scss",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SplitButtonComponent {
+  readonly appearance = input<SplitButtonAppearance>("primary");
+  readonly size = input<SplitButtonSize>("m");
+  readonly label = input.required<string>();
+  readonly compactSpacing = input(false);
+  readonly selected = input(false);
+  readonly position = input<SplitButtonPosition>("bottom-start");
+  readonly icon = input<RegularIconIdKey | TogglableIconIdKey>();
+  readonly disabled = input(false);
+  readonly ariaLabelRight = input<string>();
+
+  readonly splitButtonLeftIconSize = computed(() => splitButtonLeftIconSize[this.size()]);
+  readonly splitButtonRightIconSize = computed(() => splitButtonRightIconSize[this.size()]);
+
+  readonly isOpen = signal(false);
+
+  handleKeyDownOnRightButton(event: KeyboardEvent): void {
+    this.handleKeyDown(event, "ArrowDown", () => this.isOpen.set(true));
+    this.handleKeyDown(event, "Escape", () => this.isOpen.set(false));
+  }
+
+  handleKeyDownOnMenu(event: KeyboardEvent): void {
+    this.handleKeyDown(event, "Escape", () => this.isOpen.set(false));
+  }
+
+  private handleKeyDown(event: KeyboardEvent, key: string, callback: () => void): void {
+    if (event.key === key) {
+      event.preventDefault();
+      callback();
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+<div
+    class="tooltip {{position()}} {{alignment()}}"
+    role="tooltip"
+    [ngClass]="{'arrow': arrow()}"
+>
+    <span class="tooltip-label"> {{label()}} </span>
+</div>

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

@@ -0,0 +1,116 @@
+@use '@design-system-rte/core/design-tokens/main.scss' as *;
+
+$max-width: 160px;
+$max-height: 40px;
+
+:host {
+    position: absolute;
+    max-width: $max-width;
+    max-height: $max-height;
+
+    transition: opacity 150ms ease-out;
+
+    &:not(:hover) {
+        transition: opacity 100ms ease-in;
+    }
+}
+
+.tooltip {
+    @include typography-tooltip-label;
+    color: var(--content-primary-inverse);
+    position: absolute;
+    text-align: center;
+    z-index: 1;
+    max-width: $max-width;
+    max-height: $max-height;
+    width: fit-content;
+    padding-block: $positive-spacing_050;
+    padding-inline: $positive-spacing_200;
+    border-radius: $radius-s;
+    background: var(--background-inverse);
+
+    &.top {
+        transform: translateX(-50%);
+
+        &::after {
+            top: 100%;
+            left: 50%;
+            margin-left: -5px;
+            border-color: var(--background-inverse) transparent transparent transparent;
+        }
+
+        &.start::after {
+            left: 25%;
+        }
+
+        &.end::after {
+            left: 75%;
+        }
+    }
+
+    &.bottom {
+        transform: translateX(-50%);
+
+        &::after {
+            bottom: 100%;
+            left: 50%;
+            margin-left: -5px;
+            border-color: transparent transparent var(--background-inverse) transparent;
+        }
+
+        &.start::after {
+            left: 25%;
+        }
+
+        &.end::after {
+            left: 75%;
+        }
+    }
+
+    &.left {
+        transform: translateY(-50%);
+
+        &::after {
+            top: 50%;
+            left: 100%;
+            margin-top: -5px;
+            border-color: transparent transparent transparent var(--background-inverse);
+        }
+
+        &.start::after {
+            top: 25%;
+        }
+
+        &.end::after {
+            top: 75%;
+        }
+    }
+
+    &.right {
+        transform: translateY(-50%);
+
+        &::after {
+            top: 50%;
+            right: 100%;
+            margin-top: -5px;
+            border-color: transparent var(--background-inverse) transparent transparent;
+        }
+
+        &.start::after {
+            top: 25%;
+        }
+
+        &.end::after {
+            top: 75%;
+        }
+    }
+
+    &.arrow {
+        &::after {
+            content: '';
+            position: absolute;
+            border-width: 5px;
+            border-style: solid;
+        }
+    }
+}

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

@@ -0,0 +1,16 @@
+import { CommonModule } from "@angular/common";
+import { Component, input } from "@angular/core";
+
+@Component({
+  selector: "rte-tooltip",
+  imports: [CommonModule],
+  standalone: true,
+  templateUrl: "./tooltip.component.html",
+  styleUrl: "./tooltip.component.scss",
+})
+export class TooltipComponent {
+  readonly label = input.required<string>();
+  readonly position = input<string>("auto");
+  readonly alignment = input<string>("center");
+  readonly arrow = input<boolean>(true);
+}