@design-system-rte/angular 0.1.1-rc1

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

@@ -0,0 +1,37 @@
+import { Directive, HostBinding, input } from '@angular/core';
+
+@Directive({
+  selector: '[dsCol]',
+  standalone: true
+})
+export class ColDirective {
+
+    xxs = input<number>()
+    xs = input<number>()
+    s = input<number>()
+    m = input<number>()
+    l = input<number>()
+    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/components/grid/grid.directive.stories.ts

@@ -0,0 +1,149 @@
+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 { GridDirective } from './grid.directive';
+import { ColDirective } from './col/col.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/components/grid/grid.directive.ts

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

package/src/components/link/link.component.html

@@ -0,0 +1,5 @@
+<a class="rte-link" [ngClass]="{'subtle': subtle()}" href="{{ href() }}" role="link">
+    <span class="rte-link-label">
+        {{ label() }}
+    </span>
+</a>

package/src/components/link/link.component.scss

@@ -0,0 +1,108 @@
+@use '@design-system-rte/core/tokens/main.scss' as *;
+
+.rte-link {
+
+    @include typography-link-m;
+    align-items: center;
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+
+        &:visited {
+
+            color: var(--content-link-visited);
+            text-decoration: underline;
+
+            &:hover {
+                color: var(--content-link-visited-hover);
+                text-decoration: none;
+            }
+
+            &:active {
+                color: var(--content-link-visited-press);
+                text-decoration: underline;
+            }
+
+            &:focus-visible {
+                color: var(--content-link-visited);
+                text-decoration: underline;
+                outline: 1px solid var(--border-brand-focused);
+                outline-offset: $radius-s;
+                border-radius: $radius-s;
+            }
+        }
+
+        &:not(:visited) {
+
+            color: var(--content-link-default);
+
+            &:hover {
+                color: var(--content-link-hover);
+                text-decoration: none;
+            }
+
+            &:active {
+                color: var(--content-link-press);
+                text-decoration: underline;
+            }
+
+            &:focus-visible {
+                color: var(--content-link-default);
+                text-decoration: underline;
+                outline: 1px solid var(--border-brand-focused);
+                outline-offset: $radius-s;
+                border-radius: $radius-s;
+            }
+        }
+
+    &.subtle{
+
+        &:visited {
+
+            color: var(--content-primary);
+            text-decoration: none;
+
+            &:hover {
+                color: var(--content-link-secondary);
+                text-decoration: underline;
+            }
+
+            &:active {
+                color: var(--content-link-primary);
+                text-decoration: none;
+            }
+
+            &:focus-visible {
+                color: var(--content-link-primary);
+                text-decoration: none;
+                outline: 1px solid var(--border-brand-focused);
+                outline-offset: $radius-s;
+                border-radius: $radius-s;
+            }
+        }
+
+        &:not(:visited) {
+
+            color: var(--content-primary);
+            text-decoration: none;
+
+            &:hover {
+                color: var(--content-secondary);
+                text-decoration: underline;
+            }
+
+            &:active {
+                color: var(--content-primary);
+                text-decoration: none;
+            }
+
+            &:focus-visible {
+                color: var(--content-primary);
+                text-decoration: none;
+                outline: 1px solid var(--border-brand-focused);
+                outline-offset: $radius-s;
+                border-radius: $radius-s;
+            }
+        }
+    }
+}

package/src/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/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/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/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/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/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()));
+}