@design-system-rte/angular 0.4.3 → 0.4.5

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

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

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

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

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

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

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