@design-system-rte/angular 0.1.1-rc1

package/src/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/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/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/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/tsconfig.app.json

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

package/tsconfig.json

@@ -0,0 +1,32 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

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": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}