@design-system-rte/angular 0.1.1-rc3 → 0.1.1-rc4

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

@@ -0,0 +1,61 @@
+import { Meta, StoryObj } from '@storybook/angular';
+import { fn, userEvent, within, expect } from '@storybook/test';
+
+import { LinkComponent } from './link.component';
+
+const meta: Meta<LinkComponent> = {
+    title: 'Link',
+    component: LinkComponent,
+    tags: ['autodocs'],
+    argTypes: {
+        subtle: {
+            control: 'boolean',
+        },
+        externalLink: {
+            control: 'boolean',
+        },
+    },
+};
+export default meta;
+type Story = StoryObj<LinkComponent>;
+
+export const Default: Story = {
+    args: {
+        label: 'Link',
+        href: '#',
+    },
+};
+
+export const SubtleLink: Story = {
+    args: {
+        ...Default.args,
+        subtle: true,
+    },
+}
+
+export const SubtleLinkExternal: Story = {
+    args: {
+        ...SubtleLink.args,
+        externalLink: true,
+    },
+}
+
+export const ExternalLink: Story = {
+    args: {
+        ...Default.args,
+        externalLink: true,
+    },
+};
+
+export const KeyboardInteraction: Story = {
+    args: {
+        ...Default.args,
+        href: '#',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const link = canvas.getByRole('link');
+        await userEvent.tab();
+        expect(link).toHaveFocus();
+    }
+};

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

@@ -0,0 +1,19 @@
+import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'rte-link',
+    standalone: true,
+    imports: [CommonModule],
+    templateUrl: './link.component.html',
+    styleUrl: './link.component.scss'
+})
+
+export class LinkComponent {
+
+    label = input('');
+    href = input<string>('#');
+    subtle = input<boolean>(false);
+    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"
+            [id]="label()"
+            [value]="label()"
+            [size]="labelSize"
+            [name]="groupName()"
+            class="rte-radio-button"
+            [ngClass]="{'error': error(), 'read-only': readOnly()}"
+            [disabled]="disabled()"
+        />
+        <label 
+            *ngIf="showLabel()" 
+            [for]="label()" 
+            class="rte-radio-button-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,140 @@
+@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);
+        }
+
+        //TODO: Modify brute variable to use tokens
+        
+        &:hover {
+            transition: box-shadow 0.15s ease-in-out;
+            box-shadow: 0 0 0 8px rgba(200, 22, 64, 0.2);
+
+            &:checked {
+                box-shadow: 0 0 0 8px rgba(200, 22, 64, 0.2);
+            }
+        }
+    }
+
+    &.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 {
+        outline: none;
+
+        &::after {
+            opacity: $opacity-100;
+        }
+    }
+
+    &:checked {
+        border: $width-xs solid var(--content-brand-default);
+    }
+
+    &:checked::before {
+        opacity: $opacity-100;
+    }
+
+    //TODO: Modify brute variable to use tokens
+
+    &:hover {
+        transition: box-shadow 0.15s ease-in-out;
+        box-shadow: 0 0 0 8px var(--background-hover);
+
+        &:checked {
+            box-shadow: 0 0 0 8px rgba(34, 80, 130, 0.2);
+        }
+    }
+
+    &: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,75 @@
+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,23 @@
+import { Component,computed,input } from "@angular/core";
+import { labelSize } from "@design-system-rte/core/components/radio-button/radio-button.constants";
+import { CommonModule } from "@angular/common";
+
+@Component({
+  selector: 'rte-radio-button',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './radio-button.component.html',
+  styleUrl: './radio-button.component.scss',
+})
+
+export class RadioButtonComponent {
+    label = input('');
+    groupName = input('');
+    showLabel = input(true);
+    disabled = input(false);
+    error = input(false);
+    readOnly = input(false);
+    labelSize = labelSize;
+
+    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,124 @@
+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,30 @@
+import { Component, computed, input } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { RadioButtonComponent } from "../radio-button/radio-button.component";
+
+@Component({
+  selector: 'rte-radio-button-group',
+  standalone: true,
+  imports: [CommonModule, RadioButtonComponent],
+  templateUrl: './radio-button-group.component.html',
+  styleUrls: ['./radio-button-group.component.scss'],
+})
+
+export class RadioButtonGroupComponent {
+    groupName = input('');
+    items = input<string[]>([]);
+    direction = input('horizontal');
+    showItemsLabel = input(true);
+    groupTitle = input('');
+    showGroupTitle = input(false);
+    groupHelpText = input('');
+    showHelpText = input(false);
+    errorMessage = input('');
+    error = input(false);
+    disabled = input(false);
+    readOnly = input(false);
+
+    isDisplayed = computed(() => !(this.disabled() && this.error()));
+
+}
+

package/src/public-api.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of lib
+ */
+
+export * from './lib/components/button/button.component';

package/tsconfig.lib.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/esm2022/design-system-rte-angular.mjs

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './public-api';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVzaWduLXN5c3RlbS1ydGUtYW5ndWxhci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2xpYi9zcmMvZGVzaWduLXN5c3RlbS1ydGUtYW5ndWxhci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpYy1hcGknO1xuIl19