@design-system-rte/angular 0.2.0 → 0.2.1

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

@@ -0,0 +1,18 @@
+import { CommonModule } from "@angular/common";
+import { Component, input } from "@angular/core";
+
+import { IconComponent } from "../icon/icon.component";
+
+@Component({
+  selector: "rte-link",
+  imports: [CommonModule, IconComponent],
+  standalone: true,
+  templateUrl: "./link.component.html",
+  styleUrl: "./link.component.scss",
+})
+export class LinkComponent {
+  readonly label = input("");
+  readonly href = input<string>("#");
+  readonly subtle = input<boolean>(false);
+  readonly externalLink = input<boolean>(false);
+}

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/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/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/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,118 @@
+@use '@design-system-rte/core/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);
+}