matcha-components 1.0.8 → 1.0.15

package/src/lib/matcha-forms/form-field.stories.ts

@@ -1,341 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
-import { formFieldArgtypes } from './form-field-argtype';
-import { MatchaFormFieldDirective } from './form-field.directive';
-import { MatSelectModule } from '@angular/material/select';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
-import { userEvent, within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-
-export default {
-    title: 'Atoms / Forms',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [BrowserAnimationsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatIconModule, MatButtonModule, ReactiveFormsModule, FormsModule],
-            declarations: [MatchaFormFieldDirective],
-        }),
-    ],
-    args: {
-        appearance: 'outline',
-        color: 'accent',
-    },
-    argTypes: formFieldArgtypes,
-    parameters: {
-        actions: { argTypesRegex: '^on.*' },
-        controls: { expanded: true },
-    },
-} as Meta;
-
-export const WithBasicUsage: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-            <mat-form-field matchaFormField id="email" appearance="outline" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-                <mat-label>email</mat-label>
-                <input type="text" matInput>
-            </mat-form-field>
-
-            <mat-form-field matchaFormField id="password" appearance="outline" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-                <mat-label>Password</mat-label>
-                <input type="text" matInput>
-            </mat-form-field>
-        `,
-    }),
-    // Added an example of how to use the play function
-    // For more information, see https://storybook.js.org/docs/angular/writing-tests/interaction-testing
-    // See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
-
-        // 👇 Simulate interactions with the component
-        await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
-        await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
-        await userEvent.click(canvas.getByRole('button'));
-        // 👇 Assert DOM structure
-        await expect(canvas.getByText('Everything is perfect. Your account is ready and we should probably get you started!'));
-    },
-    name: 'basic usage',
-    parameters: {
-        controls: {
-            exclude: ['alignHint'],
-        },
-    },
-};
-
-export const WithStateFilled: StoryObj = {
-    render: (args) => ({
-        props: {
-            args,
-            appearance: 'outline',
-        },
-        template: `
-            <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-                <mat-label>Password</mat-label>
-                <input type="text" matInput [ngModel]="'admin'">
-            </mat-form-field>
-        `,
-    }),
-    name: 'with state (filled)',
-    parameters: {
-        controls: {
-            exclude: ['alignHint'],
-        },
-    },
-};
-
-export const WithStateDisabled: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-            appearance: 'outline',
-        },
-        template: `
-      <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-          <mat-label>Password</mat-label>
-          <input type="text" matInput disabled>
-      </mat-form-field>
-    `,
-    }),
-    name: 'with state (disabled)',
-    parameters: {
-        controls: {
-            exclude: ['alignHint'],
-        },
-    },
-};
-
-export const WithStateFocused: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-            appearance: 'outline',
-        },
-        template: `
-      <mat-form-field matchaFormField class="mat-focused" [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-          <mat-label>Password 1</mat-label>
-          <input type="text" matInput [ngModel]="'admin'">
-      </mat-form-field>
-    `,
-    }),
-    name: 'with state (focused)',
-    parameters: {
-        controls: {
-            exclude: ['alignHint'],
-        },
-    },
-};
-
-export const WithStateHover: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-            appearance: 'outline',
-        },
-        template: `
-      <mat-form-field matchaFormField class="mat-focused" [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-          <mat-label>Password</mat-label>
-          <input type="text" matInput>
-      </mat-form-field>
-    `,
-    }),
-    name: 'with state (hover)',
-    parameters: {
-        controls: {
-            exclude: ['alignHint'],
-        },
-        pseudo: {
-            hover: true,
-        },
-    },
-};
-
-export const WithAppearanceOutline: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-            appearance: 'outline',
-        },
-        template: `
-      <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-          <mat-label>Password</mat-label>
-          <input type="text" matInput>
-      </mat-form-field>
-    `,
-    }),
-    name: 'with appearance (outline)',
-    parameters: {
-        controls: {
-            exclude: ['alignHint'],
-        },
-    },
-};
-
-export const WithStartHint: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-      <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-          <mat-label>Password</mat-label>
-          <input type="text" matInput>
-          <mat-hint align="start">at least 8 characters</mat-hint>
-      </mat-form-field>
-    `,
-    }),
-    name: 'with hint (start)',
-};
-
-export const WithEndHint: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-      <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-          <mat-label>Contributions</mat-label>
-          <mat-select>
-              <mat-option>Components</mat-option>
-              <mat-option>Use cases</mat-option>
-          </mat-select>
-          <mat-hint align="end">Choose an option ^</mat-hint>
-      </mat-form-field>
-    `,
-    }),
-    name: 'with hint (end)',
-};
-
-export const WithDoubleHints: StoryObj = {
-    render: (args) => ({
-        props: args,
-        template: `
-      <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-          <mat-label>Username</mat-label>
-          <input type="text" matInput #input [attr.maxlength]="10">
-          <mat-hint align="start">Max 10 characters</mat-hint>
-          <mat-hint align="end">{{input.value.length || 0}}/10</mat-hint>
-      </mat-form-field>
-    `,
-    }),
-    name: 'with hint (double)',
-};
-
-export const WithPrefix: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-            hide: true,
-        },
-        template: `
-      <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-          <mat-label>Password</mat-label>
-          <input matInput [type]="hide ? 'password' : 'text'">
-          <span class="i-matcha-action_key"></span>
-      </mat-form-field>
-    `,
-    }),
-    name: 'with prefix',
-    parameters: {
-        controls: {
-            exclude: ['alignHint'],
-        },
-    },
-};
-
-export const WithSuffix: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-            hide: true,
-        },
-        template: `
-        <div class="d-flex-column max-w-600 gap-16">
-            <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-                <mat-label>Password</mat-label>
-                <input matInput [type]="hide ? 'password' : 'text'">
-                <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
-                <span class="{{hide ? 'i-matcha-visibility-on' : 'i-matcha-visibility-off'}}"></span>
-                </button>
-            </mat-form-field>
-
-            <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-                <mat-label>Name</mat-label>
-                <input matInput #suffix_hint maxlength="50">
-                <span matSuffix class="small pr-8">{{ suffix_hint.value?.length || 0}}/50</span>
-            </mat-form-field>
-        </div>
-        `,
-    }),
-    name: 'with suffix',
-    parameters: {
-        controls: {
-            exclude: ['alignHint'],
-        },
-    },
-};
-
-export const WithPrefixAndSuffix: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-            hide: true,
-        },
-        template: `
-      <style>
-      .example-right-align {
-          text-align: right;
-      }
-
-      input.example-right-align::-webkit-outer-spin-button,
-      input.example-right-align::-webkit-inner-spin-button {
-          display: none;
-      }
-
-      input.example-right-align {
-          -moz-appearance: textfield;
-      }
-      </style>
-      <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-          <mat-label>Amount</mat-label>
-          <input matInput type="number" class="example-right-align" placeholder="0">
-          <span matPrefix>$&nbsp;</span>
-          <span matSuffix>.00</span>
-    </mat-form-field>
-    `,
-    }),
-    name: 'with prefix and suffix',
-    parameters: {
-        controls: {
-            exclude: ['alignHint'],
-        },
-    },
-};
-
-const control = new FormControl('', Validators.required);
-control.markAsTouched();
-
-export const WithErrorMessage: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-            control: control,
-        },
-        template: `
-        <mat-form-field matchaFormField [appearance]="appearance" [color]="color" [floatLabel]="floatLabel" [hideRequiredMarker]="hideRequiredMarker" [hintLabel]="hintLabel">
-            <mat-label>Password</mat-label>
-            <input type="text" matInput [formControl]="control">
-            <mat-error *ngIf="control.hasError('required')">This field is required</mat-error>
-        </mat-form-field>
-        `,
-    }),
-    name: 'with error message',
-    parameters: {
-        controls: {
-            exclude: ['alignHint'],
-        },
-    },
-};

package/src/lib/matcha-forms/forms.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaFormFieldDirective } from './form-field.directive';
-
-@NgModule({
-    declarations: [MatchaFormFieldDirective],
-    imports: [CommonModule],
-    exports: [MatchaFormFieldDirective],
-})
-export class MatchaFormsModule {}

package/src/lib/matcha-headers/headers.argtype.ts

@@ -1,14 +0,0 @@
-export const headersArgtypes = {
-    bulletColor: {
-        description: 'The color theme for the bullet of the title.',
-        control: 'select',
-        defaultValue: 'surface',
-        table: {
-            defaultValue: { summary: 'accent' },
-        },
-        options: ['fg', 'accent', 'primary', 'warn', 'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', null],
-    },
-    label: {
-        control: 'text',
-    },
-};

package/src/lib/matcha-headers/headers.mdx

@@ -1,94 +0,0 @@
-import { Story } from "@storybook/blocks";
-import { Meta } from "@storybook/addon-docs";
-import * as ComponentStories from "./headers.stories";
-
-<Meta title="Atoms / Headers / Documentação" />
-
-# Title
-
-> _title_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
-
----
-
-### Modes
-
-<div class="d-flex-column gap-16">
-    <div class="d-flex-column">
-        <div class="matcha-card background-surface d-flex-column gap-16">
-            <span class="h5">Headers overview</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.HeadersOverview}/>
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <div class="d-flex-center-center gap-16">
-                    <matcha-headline bulletColor="accent">Headline Example</matcha-headline>
-                    <matcha-subhead bulletColor="accent">Subhead Example</matcha-subhead>
-                    <matcha-title bulletColor="accent">Title Example</matcha-title>
-                </div>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-    <div class="d-flex-column">
-        <div class="matcha-card background-surface d-flex-column gap-16">
-            <span class="h5">Headline overview</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.HeadlineOverview}/>
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <div class="d-flex-center-center">
-                    <matcha-headline bulletColor="accent">Headline Example</matcha-headline>
-                </div>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-    <div class="d-flex-column">
-        <div class="matcha-card background-surface d-flex-column gap-16">
-            <span class="h5">Subhead overview</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.SubheadOverview}/>
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <div class="d-flex-center-center">
-                    <matcha-subhead bulletColor="accent">Subhead Example</matcha-subhead>
-                </div>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-    <div class="d-flex-column">
-        <div class="matcha-card background-surface d-flex-column gap-16">
-            <span class="h5">Title overview</span>
-            <div class="matcha-card background-bg">
-                <Story of={ComponentStories.TitleOverview}/>
-            </div>
-
-            <div class="d-flex-column">
-
-                ```html
-                <div class="d-flex-center-center">
-                    <matcha-title bulletColor="accent">Title Example</matcha-title>
-                </div>
-                ```
-
-            </div>
-        </div>
-    </div>
-
-</div>

package/src/lib/matcha-headers/headers.module.ts

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatchaTitleComponent } from './title/title.component';
-import { MatchaHeadlineComponent } from './headine/headline.component';
-import { MatchaSubheadComponent } from './subhead/subhead.component';
-
-@NgModule({
-    declarations: [MatchaTitleComponent, MatchaHeadlineComponent, MatchaSubheadComponent],
-    imports: [CommonModule],
-    exports: [MatchaTitleComponent, MatchaHeadlineComponent, MatchaSubheadComponent],
-})
-export class MatchaHeadersModule {}

package/src/lib/matcha-headers/headers.stories.ts

@@ -1,88 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
-import { MatchaHeadersModule } from './headers.module';
-import { headersArgtypes } from './headers.argtype';
-import { CommonModule } from '@angular/common';
-import { provideAnimations } from '@angular/platform-browser/animations';
-
-export default {
-    title: 'Atoms / Headers',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-        moduleMetadata({
-            imports: [CommonModule, MatchaHeadersModule, NgIf, JsonPipe, NgFor, AsyncPipe],
-        }),
-    ],
-    args: {
-        label: 'Headline Example',
-        bulletColor: 'accent',
-    },
-    argTypes: headersArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-/** Este é o card principal */
-export const HeadersOverview: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="d-flex-column d-flex-center-center gap-24">
-            <matcha-headline [bulletColor]="bulletColor">{{label}}</matcha-headline>
-            <matcha-subhead [bulletColor]="bulletColor">{{label}}</matcha-subhead>
-            <matcha-title [bulletColor]="bulletColor">{{label}}</matcha-title>
-        </div>
-        `,
-    }),
-    name: 'Headers Overview',
-};
-
-/** Este é o card principal */
-export const HeadlineOverview: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="d-flex-center-center">
-            <matcha-headline [bulletColor]="bulletColor">{{label}}</matcha-headline>
-        </div>
-        `,
-    }),
-    name: 'Headline Overview',
-};
-
-/** Este é o card principal */
-export const SubheadOverview: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="d-flex-center-center">
-            <matcha-subhead [bulletColor]="bulletColor">{{label}}</matcha-subhead>
-        </div>
-        `,
-    }),
-    name: 'Subhead Overview',
-};
-
-/** Este é o card principal */
-export const TitleOverview: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="d-flex-center-center">
-            <matcha-title [bulletColor]="bulletColor">{{label}}</matcha-title>
-        </div>
-        `,
-    }),
-    name: 'Title Overview',
-};

package/src/lib/matcha-headers/headine/headline.component.html

@@ -1 +0,0 @@
-<h4 class="lh-16 d-flex d-flex-align-center m-0 h4"><span [class]="classes"></span><ng-content></ng-content></h4>

package/src/lib/matcha-headers/headine/headline.component.ts

@@ -1,20 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-    selector: 'matcha-headline',
-    templateUrl: './headline.component.html',
-    styleUrls: ['./headline.component.scss'],
-})
-export class MatchaHeadlineComponent {
-    @Input()
-    bulletColor: 'fg' | 'accent' | 'primary' | 'warn' | 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' = 'accent';
-
-    @Input()
-    loading: boolean = false;
-
-    public get classes(): string {
-        const bullet = this.bulletColor ? `background-${this.bulletColor} min-h-24 h-24 max-h-24 max-w-8 w-8 min-w-8 d-inline-block position-relative mr-8 border-radius-8` : '';
-        const activeClasses = `${bullet} ${this.loading ? 'loading' : ''}`;
-        return activeClasses;
-    }
-}

package/src/lib/matcha-headers/subhead/subhead.component.html

@@ -1 +0,0 @@
-<h5 class="lh-16 d-flex d-flex-align-center m-0 h5"><span [class]="classes"></span><ng-content></ng-content></h5>

package/src/lib/matcha-headers/subhead/subhead.component.ts

@@ -1,20 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-    selector: 'matcha-subhead',
-    templateUrl: './subhead.component.html',
-    styleUrls: ['./subhead.component.scss'],
-})
-export class MatchaSubheadComponent {
-    @Input()
-    bulletColor: 'fg' | 'accent' | 'primary' | 'warn' | 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' = 'accent';
-
-    @Input()
-    loading: boolean = false;
-
-    public get classes(): string {
-        const bullet = this.bulletColor ? `background-${this.bulletColor} min-h-20 h-20 max-h-20 max-w-8 w-8 min-w-8 d-inline-block position-relative mr-8 border-radius-8` : '';
-        const activeClasses = `${bullet} ${this.loading ? 'loading' : ''}`;
-        return activeClasses;
-    }
-}

package/src/lib/matcha-headers/title/title.component.html

@@ -1 +0,0 @@
-<h6 class="lh-24 d-flex d-flex-align-center m-0 h8"><span [class]="classes"></span><ng-content></ng-content></h6>

package/src/lib/matcha-headers/title/title.component.ts

@@ -1,20 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-    selector: 'matcha-title',
-    templateUrl: './title.component.html',
-    styleUrls: ['./title.component.scss'],
-})
-export class MatchaTitleComponent {
-    @Input()
-    bulletColor: 'fg' | 'accent' | 'primary' | 'warn' | 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' = 'accent';
-
-    @Input()
-    loading: boolean = false;
-
-    public get classes(): string {
-        const bullet = this.bulletColor ? `background-${this.bulletColor} min-h-16 h-16 max-h-16 max-w-8 w-8 min-w-8 d-inline-block position-relative mr-8 border-radius-8` : '';
-        const activeClasses = `${bullet} ${this.loading ? 'loading' : ''}`;
-        return activeClasses;
-    }
-}