@design-system-rte/angular 0.2.1 → 0.2.2

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

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

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

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

@@ -1,82 +0,0 @@
-@use '@design-system-rte/core/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

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

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

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

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

@@ -1,22 +0,0 @@
-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() {}
-}