@design-system-rte/angular 0.2.2 → 0.4.2

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

@@ -0,0 +1,126 @@
+import { Meta, StoryObj } from "@storybook/angular";
+import { userEvent, within, expect } from "@storybook/test";
+
+import { CheckboxComponent } from "./checkbox.component";
+
+const meta: Meta<CheckboxComponent> = {
+  title: "Checkbox",
+  component: CheckboxComponent,
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: "text",
+      defaultValue: "Label",
+    },
+    description: {
+      control: "text",
+      defaultValue: "Description",
+    },
+    showLabel: {
+      control: "boolean",
+      defaultValue: true,
+    },
+    disabled: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    indeterminate: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    errorMessage: {
+      control: "text",
+      defaultValue: "",
+    },
+    readOnly: {
+      control: "boolean",
+      defaultValue: false,
+    },
+    checked: {
+      control: "boolean",
+      defaultValue: false,
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<CheckboxComponent>;
+
+export const Default: Story = {
+  args: {
+    id: "my-checkbox",
+    label: "Label",
+    description: "Description",
+    disabled: false,
+    readOnly: false,
+    showLabel: true,
+    indeterminate: false,
+    errorMessage: "",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+    await userEvent.click(checkbox);
+    expect(checkbox).toBeChecked();
+    checkbox.blur();
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+    expect(checkbox).toBeDisabled();
+    await userEvent.click(checkbox);
+    expect(checkbox).not.toBeChecked();
+  },
+};
+
+export const Indeterminated: Story = {
+  args: {
+    ...Default.args,
+    indeterminate: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    ...Default.args,
+    readOnly: true,
+    checked: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+    await userEvent.keyboard(`{Tab}`);
+    expect(checkbox).toHaveFocus();
+    await userEvent.keyboard(`{ }`);
+    expect(checkbox).toBeChecked();
+    checkbox.blur();
+  },
+};
+
+export const Error: Story = {
+  args: {
+    ...Default.args,
+    errorMessage: "Error message",
+  },
+};
+
+export const KeyboardInteractions: Story = {
+  args: {
+    ...Default.args,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkbox = canvas.getByRole("checkbox");
+    await userEvent.keyboard(`{Tab}`);
+    expect(checkbox).toHaveFocus();
+    await userEvent.keyboard(`{ }`);
+    expect(checkbox).toBeChecked();
+    checkbox.blur();
+  },
+};

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

@@ -0,0 +1,34 @@
+import { CommonModule } from "@angular/common";
+import { Component, input } from "@angular/core";
+
+import { IconComponent } from "../icon/icon.component";
+
+@Component({
+  selector: "rte-checkbox",
+  imports: [CommonModule, IconComponent],
+  standalone: true,
+  templateUrl: "./checkbox.component.html",
+  styleUrl: "./checkbox.component.scss",
+})
+export class CheckboxComponent {
+  readonly id = input.required<string>();
+  readonly label = input.required<string>();
+  readonly value = input("");
+  readonly indeterminate = input(false);
+  readonly description = input("");
+  readonly showLabel = input(true);
+  readonly disabled = input(false);
+  readonly error = input(false);
+  readonly errorMessage = input("");
+  readonly readOnly = input(false);
+  readonly checked = input(false);
+  readonly groupName = input("");
+
+  onKeydown(event: KeyboardEvent) {
+    if (event.code === "Space") {
+      if (this.readOnly()) {
+        event.preventDefault();
+      }
+    }
+  }
+}

package/src/lib/components/checkbox-group/checkbox-group.component.html

@@ -0,0 +1,46 @@
+<div  
+  *ngIf="isDisplayed()"
+  class="checkbox-group-container">
+  <div
+    class="checkbox-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="checkbox-group" 
+    [ngClass]="{'horizontal': direction() === 'horizontal', 'vertical': direction() === 'vertical'}">
+    <ng-container 
+    *ngFor="let item of items(); let i = index">
+      <rte-checkbox
+      [id]="item + '-' + i"
+      [label]="item"
+      [groupName]="groupName()"
+      [showLabel]="showItemsLabel()"
+      [disabled]="disabled()"
+      [error]="error()"
+      [readOnly]="readOnly()"
+      />
+    </ng-container>
+  </div>
+</div>

package/src/lib/components/checkbox-group/checkbox-group.component.scss

@@ -0,0 +1,82 @@
+@use '@design-system-rte/core/design-tokens/main.scss' as *;
+
+.checkbox-group-container {
+    display: flex;
+    padding: $positive-spacing_0;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: $positive-spacing_100;
+
+    .checkbox-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);
+            }
+        }
+
+
+    }
+
+
+    .checkbox-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/checkbox-group/checkbox-group.component.stories.ts

@@ -0,0 +1,121 @@
+import { Meta, StoryObj } from "@storybook/angular";
+import { userEvent, within, expect } from "@storybook/test";
+
+import { CheckboxGroupComponent } from "./checkbox-group.component";
+
+const meta: Meta<CheckboxGroupComponent> = {
+  title: "CheckboxGroup",
+  component: CheckboxGroupComponent,
+  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: "Checkbox Group Title",
+    },
+    showGroupTitle: {
+      control: "boolean",
+      defaultValue: true,
+    },
+    groupHelpText: {
+      control: "text",
+      defaultValue: "This is a help text for the checkbox 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<CheckboxGroupComponent>;
+
+export const Default: Story = {
+  args: {
+    groupName: "group1",
+    items: ["Option 1", "Option 2", "Option 3"],
+    direction: "horizontal",
+    showItemsLabel: true,
+    groupTitle: "Checkbox Title",
+    showGroupTitle: true,
+    groupHelpText: "This is a help text for the checkbox 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/checkbox-group/checkbox-group.component.ts

@@ -0,0 +1,28 @@
+import { CommonModule } from "@angular/common";
+import { Component, computed, input } from "@angular/core";
+
+import { CheckboxComponent } from "../checkbox/checkbox.component";
+
+@Component({
+  selector: "rte-checkbox-group",
+  imports: [CommonModule, CheckboxComponent],
+  standalone: true,
+  templateUrl: "./checkbox-group.component.html",
+  styleUrl: "./checkbox-group.component.scss",
+})
+export class CheckboxGroupComponent {
+  readonly groupName = input.required<string>();
+  readonly items = input.required<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/grid/col/col.directive.ts

@@ -0,0 +1,35 @@
+import { Directive, HostBinding, input } from "@angular/core";
+
+@Directive({
+  selector: "[dsCol]",
+  standalone: true,
+})
+export class ColDirective {
+  readonly xxs = input<number>();
+  readonly xs = input<number>();
+  readonly s = input<number>();
+  readonly m = input<number>();
+  readonly l = input<number>();
+  readonly xl = input<number>();
+
+  @HostBinding("class")
+  get colClasses(): string {
+    return [
+      "col",
+      this.generateColumnClass("col-xxs", this.xxs()),
+      this.generateColumnClass("col-xs", this.xs()),
+      this.generateColumnClass("col-s", this.s()),
+      this.generateColumnClass("col-m", this.m()),
+      this.generateColumnClass("col-l", this.l()),
+      this.generateColumnClass("col-xl", this.xl()),
+    ]
+      .filter(Boolean)
+      .join(" ");
+  }
+
+  constructor() {}
+
+  private generateColumnClass(prefix: string, size?: number): string {
+    return size ? `${prefix}-${size}` : "";
+  }
+}

package/src/lib/components/grid/grid.directive.stories.ts

@@ -0,0 +1,150 @@
+import { CommonModule } from "@angular/common";
+import { GridType } from "@design-system-rte/core/components/grid/grid.interface";
+import { componentWrapperDecorator, moduleMetadata, type Meta, type StoryObj } from "@storybook/angular";
+
+import { ColDirective } from "./col/col.directive";
+import { GridDirective } from "./grid.directive";
+
+type GridStoriesArgs = GridDirective;
+
+const COLUMN_NUMBER = 12;
+
+const meta: Meta<GridStoriesArgs> = {
+  title: "Grid",
+  component: GridDirective,
+  tags: ["autodocs"],
+  argTypes: {
+    gridType: {
+      control: "select",
+      defaultValue: (args: GridStoriesArgs) => args.gridType,
+      options: ["fluid", "fixed-narrow", "fixed-wide"],
+      description: "The type of grid to use",
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, ColDirective],
+    }),
+    componentWrapperDecorator((story) => `<div class="sb-css-grid-container">${story}</div>`),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<GridStoriesArgs>;
+
+const defaultTemplate = (gridType: GridType) => {
+  return `
+        <div rte-grid 
+          [gridType]="'${gridType}'"
+          data-testid="grid"
+          >
+            <ng-container *ngFor="let item of items">
+              <div
+                dsCol
+                ></div>
+            </ng-container>
+          </div>
+    `;
+};
+
+export const Fluid: Story = {
+  args: {
+    gridType: "fluid",
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      items: Array.from(Array(COLUMN_NUMBER)).map((_, i) => i + 1),
+    },
+    template: defaultTemplate(args.gridType),
+  }),
+};
+
+export const FixedWide: Story = {
+  args: {
+    gridType: "fixed-wide",
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      items: Array.from(Array(COLUMN_NUMBER)).map((_, i) => i + 1),
+    },
+    template: defaultTemplate(args.gridType),
+  }),
+};
+
+export const FixedNarrow: Story = {
+  args: {
+    gridType: "fixed-narrow",
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+      items: Array.from(Array(COLUMN_NUMBER)).map((_, i) => i + 1),
+    },
+    template: defaultTemplate(args.gridType),
+  }),
+};
+
+export const ResponsiveColumns: Story = {
+  args: {
+    gridType: "fluid",
+  },
+  render: (args) => ({
+    template: `
+        <div rte-grid 
+          [gridType]="'${args.gridType}'"
+          data-testid="grid"
+        >
+          <div dsCol [xxs]=1 [xs]=1 [s]=3 [m]=4 [l]=4 [xl]=12>
+            <div>
+              <p>xxs : Span 1 de 2</p>
+              <p>xs : Span 1 de 6</p>
+              <p>s : Span 3 de 6</p>
+            </div>
+            <div>
+              <p>m : Span 4 de 12</p>
+              <p>l : Span 4 de 12</p>
+              <p>xl : Span 12 de 12</p>
+            </div>
+          </div>
+          <div dsCol [xxs]=1 [xs]=3 [s]=3 [m]=4 [l]=8 [xl]=12>
+                  <div>
+            <p>xxs : Span 1 de 2</p>
+            <p>xs : Span 3 de 6</p>
+            <p>s : Span 3 de 6</p>
+          </div>
+          <div>
+            <p>m : Span 4 de 12</p>
+            <p>l : Span 8 de 12</p>
+            <p>xl : Span 12 de 12</p>
+          </div>
+          </div>
+          <div dsCol [xxs]=2 [xs]=2 [s]=3 [m]=4 [l]=10 [xl]=12>
+            <div>
+              <p>xxs : Span 2 de 2</p>
+              <p>xs : Span 2 de 6</p>
+              <p>s : Span 3 de 6</p>
+            </div>
+            <div>
+              <p>m : Span 4 de 12</p>
+              <p>l : Span 10 de 12</p>
+              <p>xl : Span 12 de 12</p>
+            </div>
+            </div>
+          <div dsCol [xxs]=2 [xs]=6 [s]=6 [m]=4 [l]=12 [xl]=12>
+            <div>
+              <p>xxs : Span 2 de 2</p>
+              <p>xs : Span 6 de 6</p>
+              <p>s : Span 6 de 6</p>
+            </div>
+            <div>
+              <p>m : Span 4 de 12</p>
+              <p>l : Span 12 de 12</p>
+              <p>xl : Span 12 de 12</p>
+            </div>
+          </div>
+        </div>
+    `,
+  }),
+};

package/src/lib/components/grid/grid.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, HostBinding, input } from "@angular/core";
+import { GridType } from "@design-system-rte/core/components/grid/grid.interface";
+
+@Directive({
+  selector: "[rte-grid]",
+  standalone: true,
+})
+export class GridDirective {
+  readonly gridType = input<GridType>("fluid");
+
+  @HostBinding("class")
+  get hostClasses(): string {
+    return "grid";
+  }
+
+  @HostBinding("attr.data-gridtype")
+  get hostDataClasses(): string {
+    const variation = this.gridType();
+    return `${variation}`;
+  }
+  constructor() {}
+}