@design-system-rte/angular 0.2.2 → 0.4.1

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

@@ -0,0 +1,24 @@
+    <div *ngIf="isDisplayed()" class="rte-radio-button-container">
+        <input
+            type="radio"
+            class="rte-radio-button"
+            [id]="label()"
+            [value]="label()"
+            [size]="labelSize"
+            [name]="groupName()"
+            [ngClass]="{'error': error(), 'read-only': readOnly()}"
+            [disabled]="disabled()"
+        />
+        <label 
+            *ngIf="showLabel()" 
+            class="rte-radio-button-label" 
+            [for]="label()"
+            [ngClass]="{
+                'error': error(),
+                'read-only': readOnly(),
+                'disabled': disabled()
+            }"
+        >
+            {{ label() }}
+        </label>
+    </div>

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

@@ -0,0 +1,135 @@
+@use '@design-system-rte/core/design-tokens/main.scss' as *;
+
+
+.rte-radio-button-container {
+    display: flex;
+    padding-right: $positive-spacing_050;
+    align-items: center;
+    gap: $positive-spacing_150;
+}
+
+.rte-radio-button {
+    appearance: none;
+    display: flex;
+    width: 16px;
+    height: 16px;
+    padding: $positive-spacing_0;
+    justify-content: center;
+    align-items: center;
+    border-radius: $radius-pill;
+    border: $width-xs solid var(--content-tertiary);
+    background: var(--background-default);
+    position: relative;
+    cursor: pointer;
+    transition: box-shadow 0.3s ease-in-out;
+    margin: 0;
+
+    &::before {
+        content: '';
+        width: 10px;
+        height: 10px;
+        border-radius: $radius-pill;
+        background: var(--content-brand-default);
+        opacity: $opacity-0;
+    }
+
+    &::after {
+        content: '';
+        width: calc(100% + 8px);
+        height: calc(100% + 8px);
+        border-radius: $radius-s;
+        border: $width-xs solid var(--content-primary);
+        position: absolute;
+        z-index: -1;
+        opacity: $opacity-0;
+    }
+
+    &.error {
+        border: $width-xs solid var(--content-danger);
+        transition: box-shadow 0.3s ease-in-out;
+
+        &:checked {
+            border: $width-xs solid var(--content-danger);
+        }
+
+        &::before {
+            background: var(--content-danger);
+        }
+
+        &:hover {
+            transition: box-shadow 0.15s ease-in-out;
+            @include hover-box-shadow(var(--background-hover-opacity-50));
+
+            &:checked {
+                @include hover-box-shadow(var(--background-danger-hover-opacity-20));
+            }
+        }
+    }
+
+    &.read-only {
+        pointer-events: none;
+        cursor: default;
+
+        &::before {
+            background: var(--content-tertiary);
+        }
+
+        &:checked {
+            border: $width-xs solid var(--content-tertiary);
+        }
+
+        &.error {
+            border: $width-xs solid var(--content-danger);
+        }
+    }
+
+    &:focus-visible {
+        outline: none;
+
+        &::after {
+            opacity: $opacity-100;
+        }
+    }
+
+    &:checked {
+        border: $width-xs solid var(--content-brand-default);
+    }
+
+    &:checked::before {
+        opacity: $opacity-100;
+    }
+
+    &:hover {
+        @include hover-box-shadow(var(--background-hover-opacity-50));
+
+        &:checked {
+            @include hover-box-shadow(var(--background-brand-hover-opacity-20));
+        }
+    }
+
+    &:disabled {
+        pointer-events: none;
+        background: var(--background-disabled);
+        border: $width-xs solid var(--content-disabled);
+        cursor: not-allowed;
+
+        &::before {
+            background: var(--content-disabled);
+        }
+    }
+}
+
+.rte-radio-button-label {
+    @include typography-radio-button-l;
+
+    &.read-only {
+        pointer-events: none;
+        cursor: default;
+        color: var(--content-tertiary);
+    }
+
+    &.disabled {
+        pointer-events: none;
+        color: var(--content-disabled);
+    }
+}

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

@@ -0,0 +1,76 @@
+import { Meta, StoryObj } from "@storybook/angular";
+import { userEvent, within, expect } from "@storybook/test";
+
+import { RadioButtonComponent } from "./radio-button.component";
+
+const meta: Meta<RadioButtonComponent> = {
+  title: "RadioButton",
+  component: RadioButtonComponent,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: "text",
+      defaultValue: "Radio Button",
+    },
+    groupName: {
+      control: "text",
+      defaultValue: "radio-group",
+    },
+    showLabel: {
+      control: "boolean",
+      defaultValue: true,
+    },
+    disabled: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    error: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    readOnly: {
+      control: "boolean",
+      defaultValue: false,
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<RadioButtonComponent>;
+
+export const Default: Story = {
+  args: {
+    label: "Radio Button",
+    groupName: "radio-group",
+    showLabel: true,
+    disabled: false,
+    error: false,
+    readOnly: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const radioButton = canvas.getByRole("radio");
+    await userEvent.click(radioButton);
+    expect(radioButton).toBeChecked();
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    ...Default.args,
+    error: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    ...Default.args,
+    readOnly: true,
+  },
+};

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

@@ -0,0 +1,22 @@
+import { CommonModule } from "@angular/common";
+import { Component, computed, input } from "@angular/core";
+import { labelSize } from "@design-system-rte/core/components/radio-button/radio-button.constants";
+
+@Component({
+  selector: "rte-radio-button",
+  imports: [CommonModule],
+  standalone: true,
+  templateUrl: "./radio-button.component.html",
+  styleUrl: "./radio-button.component.scss",
+})
+export class RadioButtonComponent {
+  readonly label = input("");
+  readonly groupName = input("");
+  readonly showLabel = input(true);
+  readonly disabled = input(false);
+  readonly error = input(false);
+  readonly readOnly = input(false);
+  labelSize = labelSize;
+
+  readonly isDisplayed = computed(() => !(this.disabled() && this.error()));
+}

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

@@ -0,0 +1,45 @@
+<div  
+    *ngIf="isDisplayed()"
+    class="radio-button-group-container">
+    <div
+        class="radio-button-group-header"
+        [ngClass]="{
+            'disabled': disabled(),
+            'error': error(),
+            'read-only': readOnly(),
+        }">
+        <h3
+            *ngIf="showGroupTitle()"
+            class="group-title"
+            >
+            {{ groupTitle() }}
+        </h3>
+        <p
+            *ngIf="showHelpText()"
+            class="group-help-text"
+            >
+            {{ groupHelpText() }}
+
+        </p>
+        <p
+            *ngIf="error()"
+            class="group-error-message"
+            >
+            {{ errorMessage() }}
+        </p>
+    </div>
+    <div class="radio-button-group" 
+        [ngClass]="{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}">
+        <ng-container 
+        *ngFor="let item of items()">
+            <rte-radio-button
+                [label]="item"
+                [groupName]="groupName()"
+                [showLabel]="showItemsLabel()"
+                [disabled]="disabled()"
+                [error]="error()"
+                [readOnly]="readOnly()"
+            />
+        </ng-container>
+    </div>
+</div>

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

@@ -0,0 +1,82 @@
+@use '@design-system-rte/core/design-tokens/main.scss' as *;
+
+.radio-button-group-container {
+    display: flex;
+    padding: $positive-spacing_0;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: $positive-spacing_100;
+
+    .radio-button-group-header {
+
+        .group-title {
+            @include typography-heading-s;
+            align-self: stretch;
+            margin: $positive-spacing_0;
+
+        }
+
+        .group-help-text {
+            @include typography-text-m;
+            color: var(--content-tertiary);
+            align-self: stretch;
+            margin: $positive-spacing_0;
+        }
+
+        .group-error-message {
+            @include typography-text-m-bold;
+            color: var(--content-danger);
+            align-self: stretch;
+            margin: $positive-spacing_0;
+            margin-top: $positive-spacing_050;
+        }
+
+        &.error {
+            .group-title {
+                color: var(--content-danger);
+            }
+        }
+
+        &.read-only {
+            .group-title {
+                color: var(--content-tertiary);
+            }
+
+            .error {
+                .group-title {
+                    color: var(--content-danger);
+                }
+            }
+        }
+
+        &.disabled {
+
+            pointer-events: none;
+
+            .group-title {
+                color: var(--content-disabled);
+            }
+
+            .group-help-text {
+                color: var(--content-disabled);
+            }
+        }
+
+
+    }
+
+
+    .radio-button-group {
+        display: flex;
+        flex-direction: row;
+        padding: $positive-spacing_0;
+        align-items: flex-start;
+        gap: $positive-spacing_300;
+
+        &.vertical {
+            flex-direction: column;
+            gap: $positive-spacing_100;
+        }
+    }
+}

package/src/lib/components/radio-button-group/radio-button-group.component.stories.ts

@@ -0,0 +1,121 @@
+import { Meta, StoryObj } from "@storybook/angular";
+import { userEvent, within, expect } from "@storybook/test";
+
+import { RadioButtonGroupComponent } from "./radio-button-group.component";
+
+const meta: Meta<RadioButtonGroupComponent> = {
+  title: "RadioButtonGroup",
+  component: RadioButtonGroupComponent,
+  tags: ["autodocs"],
+  argTypes: {
+    groupName: {
+      control: "text",
+      defaultValue: "group1",
+    },
+    items: {
+      control: "object",
+      defaultValue: ["Option 1", "Option 2", "Option 3"],
+    },
+    direction: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+      defaultValue: "horizontal",
+    },
+    showItemsLabel: {
+      control: "boolean",
+      defaultValue: true,
+    },
+    groupTitle: {
+      control: "text",
+      defaultValue: "Radio Button Group Title",
+    },
+    showGroupTitle: {
+      control: "boolean",
+      defaultValue: true,
+    },
+    groupHelpText: {
+      control: "text",
+      defaultValue: "This is a help text for the radio button group.",
+    },
+    showHelpText: {
+      control: "boolean",
+      defaultValue: true,
+    },
+    errorMessage: {
+      control: "text",
+      defaultValue: "This is an error message. Please select an option.",
+    },
+    error: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    disabled: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    readOnly: {
+      control: "boolean",
+      defaultValue: false,
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<RadioButtonGroupComponent>;
+
+export const Default: Story = {
+  args: {
+    groupName: "group1",
+    items: ["Option 1", "Option 2", "Option 3"],
+    direction: "horizontal",
+    showItemsLabel: true,
+    groupTitle: "Radio Button Group Title",
+    showGroupTitle: true,
+    groupHelpText: "This is a help text for the radio button group.",
+    showHelpText: true,
+    errorMessage: "This is an error message. Please select an option.",
+    error: false,
+    disabled: false,
+    readOnly: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const radioButton = canvas.getByLabelText("Option 1");
+    await userEvent.click(radioButton);
+    expect(radioButton).toBeChecked();
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    ...Default.args,
+    error: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    ...Default.args,
+    readOnly: true,
+  },
+};
+
+export const Vertical: Story = {
+  args: {
+    ...Default.args,
+    direction: "vertical",
+  },
+};
+
+export const Horizontal: Story = {
+  args: {
+    ...Default.args,
+    direction: "horizontal",
+  },
+};

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

@@ -0,0 +1,28 @@
+import { CommonModule } from "@angular/common";
+import { Component, computed, input } from "@angular/core";
+
+import { RadioButtonComponent } from "../radio-button/radio-button.component";
+
+@Component({
+  selector: "rte-radio-button-group",
+  imports: [CommonModule, RadioButtonComponent],
+  standalone: true,
+  templateUrl: "./radio-button-group.component.html",
+  styleUrl: "./radio-button-group.component.scss",
+})
+export class RadioButtonGroupComponent {
+  readonly groupName = input("");
+  readonly items = input<string[]>([]);
+  readonly direction = input("horizontal");
+  readonly showItemsLabel = input(true);
+  readonly groupTitle = input("");
+  readonly showGroupTitle = input(false);
+  readonly groupHelpText = input("");
+  readonly showHelpText = input(false);
+  readonly errorMessage = input("");
+  readonly error = input(false);
+  readonly disabled = input(false);
+  readonly readOnly = input(false);
+
+  readonly isDisplayed = computed(() => !(this.disabled() && this.error()));
+}

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>