matcha-components 1.0.5 → 1.0.7

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,20 @@
+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;
+    }
+}