@design-system-rte/angular 0.2.1 → 0.2.2

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

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

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

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

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

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

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

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

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

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

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

@@ -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);
-}