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

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design-system-rte/angular",
-  "version": "0.1.1-rc3",
+  "version": "0.1.1-rc4",
   "peerDependencies": {
     "@angular/common": "^17.3.0",
     "@angular/core": "^17.3.0"
@@ -8,18 +8,5 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
-  "module": "fesm2022/design-system-rte-angular.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/design-system-rte-angular.mjs",
-      "esm": "./esm2022/design-system-rte-angular.mjs",
-      "default": "./fesm2022/design-system-rte-angular.mjs"
-    }
-  }
-}
+  "sideEffects": false
+}

package/src/lib/components/button/button.component.html

@@ -0,0 +1,7 @@
+<button
+    class="rte-button {{ variant() }} size-{{ size() }}"
+    [disabled]="disabled()"
+    (click)="onClick($event)"
+>
+    <span class="rte-button-label">{{ label() }}</span>
+</button>

package/src/lib/components/button/button.component.scss

@@ -0,0 +1,156 @@
+@use '@design-system-rte/core/tokens/main.scss' as *;
+
+.rte-button {
+    align-items: center;
+    cursor: pointer;
+    display: inline-flex;
+    flex-shrink: 0;
+    justify-content: center;
+
+    &:focus-visible {
+        outline: 1px solid var(--border-brand-focused);
+        outline-offset: 4px;
+    }
+
+    &.size-s {
+        @include typography-button-s;
+        height: 24px;
+        border-radius: $radius-s;
+        padding: $positive-spacing_050 $positive-spacing_100;
+
+        .rte-button-label {
+            margin: 0 $positive-spacing_050;
+        }
+    }
+
+    &.size-m {
+        @include typography-button-m;
+        height: 32px;
+        border-radius: $radius-s;
+        padding: $positive-spacing_050 $positive-spacing_150;
+
+        .rte-button-label {
+            margin: 0 $positive-spacing_075;
+        }
+    }
+
+    &.size-l {
+        @include typography-button-l;
+        height: 40px;
+        border-radius: $radius-m;
+        padding: $positive-spacing_050 $positive-spacing_200;
+
+        .rte-button-label {
+            margin: 0 $positive-spacing_100;
+        }
+    }
+
+    &.filled {
+        border: var(--border-brand-default);
+        color: var(--content-primary-inverse);
+        background: var(--background-brand-default);
+
+        &:hover {
+            background: var(--background-brand-hover);
+            border: var(--background-brand-hover);
+        }
+
+        &:active {
+            background: var(--background-brand-pressed);
+        }
+
+        &:disabled {
+            background: var(--background-disabled);
+            border: solid  1px var(--border-disabled);
+            color: var(--content-disabled);
+            box-shadow: none;
+            cursor: default;
+        }
+    };
+
+    &.outlined {
+        background: var(--background-default);
+        border: solid 1px var(--border-brand-default);
+        color: var(--content-brand-default);
+
+        &:hover {
+            background: var(--background-brand-inverse-hover);
+            border: solid 1px var(--border-brand-default);
+        }
+
+        &:active {
+            border: var(--background-brand-inverse);
+            background: var(--background-brand-inverse-pressed);
+        }
+
+        &:disabled {
+            background: var(--background-disabled);
+            border: solid 1px var(--border-disabled);
+            color: var(--content-disabled);
+            cursor: default;
+        }
+    };
+
+    &.text {
+        background: transparent;
+        border: none;
+        color: var(--content-brand-default);
+
+        &:hover {
+            background: var(--background-brand-inverse-hover);
+        }
+
+        &:active {
+            background: var(--background-brand-inverse-pressed);
+        }
+
+        &:disabled {
+            background: var(--background-disabled);
+            color: var(--content-disabled);
+            cursor: default;
+        }
+    };
+
+    &.transparent {
+        background: transparent;
+        border: none;
+        color: var(--content-brand-default);
+
+        &:hover {
+            color: var(--content-brand-hover);
+        }
+
+        &:active {
+            color: var(--content-brand-pressed);
+        }
+
+        &:disabled {
+            color: var(--content-disabled);
+            box-shadow: none;
+            cursor: default;
+        }
+    };
+    
+    &.danger {
+        background: var(--background-danger-default);
+        border: none;
+        color: var(--content-primary-inverse);
+        border-radius: $radius-m;
+
+        &:hover {
+            background: var(--background-danger-hover);
+        }
+
+        &:active {
+            background: var(--background-danger-pressed);
+        }
+        
+        &:disabled {
+            background: var(--background-disabled);
+            border: var(--border-disabled);
+            color: var(--content-disabled);
+            box-shadow: none;
+            cursor: default;
+        }
+    }
+}

package/src/lib/components/button/button.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { fn, userEvent, within, expect } from '@storybook/test';
+import { ENTER_KEY, SPACE_KEY, TAB_KEY } from '@design-system-rte/core/constants/keyboard.constants'; 
+
+import { ButtonComponent } from './button.component';
+
+
+const meta: Meta<ButtonComponent>= {
+  title: 'Button',
+  component: ButtonComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['filled', 'outlined', 'text', 'transparent', 'danger'],
+    },
+    size: {
+      control: 'select',
+      options: ['s', 'm', 'l'],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+  args: { click: fn() },
+};
+
+export default meta;
+type Story = StoryObj<ButtonComponent>;
+
+const mockFn = fn();
+
+export const Default: Story = {
+
+  args: {
+    variant: 'filled',
+    label: 'Button',
+    click: mockFn,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+    expect(mockFn).toHaveBeenCalled();
+    button.blur();
+  },
+};
+
+export const Sizing: Story = {
+
+  render: (args) => ({
+    props: args,
+    template: `
+    <div style="display: flex; gap: 8px;">
+        <rte-button
+          size="s"
+          label="Small"
+          variant="filled"
+          data-testid="small-button"
+          />
+        <rte-button
+          size="m"
+          label="Medium"
+          variant="filled"
+          data-testid="medium-button"
+          />
+          <rte-button
+          size="l"
+          label="Large"
+          variant="filled"
+          data-testid="large-button"
+          />
+    </div>
+    `,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const smallButton = canvas.getByTestId('small-button').getElementsByTagName('button')[0];
+    const mediumButton = canvas.getByTestId('medium-button').getElementsByTagName('button')[0];
+    const largeButton = canvas.getByTestId('large-button').getElementsByTagName('button')[0];
+
+    expect(smallButton.clientHeight).toBe(24);
+    expect(mediumButton.clientHeight).toBe(32);
+    expect(largeButton.clientHeight).toBe(40);
+  },
+};
+
+export const KeyboardInteraction: Story = {
+  args: {
+    ...Default.args,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+    await userEvent.keyboard(`{Tab}`);
+    expect(button).toHaveFocus();
+    await userEvent.keyboard(`{Enter}}`);
+    await userEvent.keyboard(`{ }`);
+    expect(mockFn).toHaveBeenCalledTimes(2);
+    button.blur();
+  },
+};

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

@@ -0,0 +1,25 @@
+import { Component, input, output } from '@angular/core';
+import { ButtonSize, ButtonVariant } from '@design-system-rte/core/components/button/button.interface';
+
+@Component({
+  selector: 'rte-button',
+  standalone: true,
+  imports: [],
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.scss'
+})
+export class ButtonComponent {
+
+  label = input('');
+  variant = input<ButtonVariant>('filled');
+  size = input<ButtonSize>('m');
+  disabled = input(false);
+
+  click = output<void>();
+
+  onClick(event: MouseEvent | KeyboardEvent): void {
+    event.stopPropagation();
+    this.click.emit();
+  }
+
+}

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