@design-system-rte/angular 0.1.1-rc7 → 0.1.1-rc8

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

@@ -1,149 +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 { 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

@@ -1,24 +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 {
-
-    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

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

@@ -1,108 +0,0 @@
-@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/lib/components/link/link.component.stories.ts

@@ -1,61 +0,0 @@
-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/lib/components/link/link.component.ts

@@ -1,19 +0,0 @@
-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/lib/components/radio-button/radio-button.component.html

@@ -1,24 +0,0 @@
-    <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/lib/components/radio-button/radio-button.component.scss

@@ -1,140 +0,0 @@
-@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/lib/components/radio-button/radio-button.component.stories.ts

@@ -1,75 +0,0 @@
-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/lib/components/radio-button/radio-button.component.ts

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

package/src/lib/components/radio-button-group/radio-button-group.component.html

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