matcha-components 1.0.6 → 1.0.7

package/src/foundation/typography/line-height.mdx

@@ -0,0 +1,52 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Typography / Line-height" />
+
+### Line-height
+
+O line-height é usado para controlar a altura da linha em um bloco de texto,
+afetando o espaço entre as linhas de texto.
+
+#### Pixels
+
+Os tamanhos em pixels dessas classes são sempre múltiplos de **2**, sendo o
+mínimo **2** e o máximo **72**.
+
+    <div class="h-256 w-100-p overflow-y-scroll">
+        <table class="w-100-p">
+            <thead>
+                <tr>
+                    <th>Classe</th>
+                    <th>Propriedade</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 36 }, (_, index) => {
+                const fontSizeValue = (index + 1)* 2;
+                return (
+                    <tr key={`lh-${fontSizeValue}`}>
+                        <td>lh-{fontSizeValue}</td>
+                        <td>line-height: {fontSizeValue}px;</td>
+                    </tr>
+                );
+                })}
+            </tbody>
+        </table>
+    </div>
+
+    <div class="h-24"></div>
+
+    <p class="h5 mb-8 font-size-16 mt-4">Exemplos</p>
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <div class="matcha-card background-bg d-flex-row gap-8">
+            <p class="fs-16 lh-20 background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam id arcu porttitor, congue sem ac, posuere lorem. </p>
+            <p class="fs-16 lh-32 background-surface p-8 border-radius-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, consectetur adipiscing elit. Sed tortor massa, finibus at nunc vel, varius tincidunt tortor. Etiam id arcu porttitor, congue sem ac, posuere lorem. </p>
+        </div>
+        <div>
+            ```html
+            <p class="fs-16 lh-20">line-height: 20px</p>
+            <p class="fs-16 lh-32">line-height: 32px</p>
+            ```
+        </div>
+    </div>

package/src/foundation/typography/message-box.mdx

@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Typography / Message Boxes" />
+
+### Message Boxes
+
+Um message box é geralmente usado para exibição de mensagens.
+
+    <p class="h5 mb-8 font-size-16 mt-4">Classes</p>
+
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <div class="matcha-card background-bg d-flex-column gap-16">
+            <div class="message-box error w-200">
+                <p>Message box error</p>
+            </div>
+            <div class="message-box warning w-200">
+                <p>Message box warning</p>
+            </div>
+            <div class="message-box success w-200">
+                <p>Message box success</p>
+            </div>
+            <div class="message-box info w-200">
+                <p>Message box info</p>
+            </div>
+        </div>
+        <div>
+            ```html
+            <div class="message-box error w-200">
+                <p>Message box error</p>
+            </div>
+            <div class="message-box warning w-200">
+                <p>Message box warning</p>
+            </div>
+            <div class="message-box success w-200">
+                <p>Message box success</p>
+            </div>
+            <div class="message-box info w-200">
+                <p>Message box info</p>
+            </div>
+            ```
+        </div>
+    </div>

package/src/foundation/typography/text-align.mdx

@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Typography / Text-align" />
+
+### Text-align
+
+O text-align controla o alinhamento horizontal do texto dentro de um elemento.
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <div class="matcha-card background-bg">
+            <p class="text-center">text-center</p>
+            <p class="text-right">text-right</p>
+            <p class="text-left">text-left</p>
+        </div>
+        <div>
+            ```html
+            <p class="text-center">text-align: center</p>
+            <p class="text-right">text-align: right</p>
+            <p class="text-left">text-align: left</p>
+            ```
+        </div>
+    </div>

package/src/foundation/typography/text-styles.mdx

@@ -0,0 +1,88 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Fundamentos / Typography / Text Styles" />
+
+### Text styles
+
+Estilização de trechos específicos de um texto.
+
+    <div class="matcha-card background-surface d-flex-column gap-16">
+        <div class="matcha-card background-bg">
+            <p>Exemplo de um <span class="text-super">texto</span> estilizado</p>
+            <p>Exemplo de um <span class="text-sub">texto</span> estilizado</p>
+            <p>Exemplo de um <span class="text-capitalize">texto</span> estilizado</p>
+            <p>Exemplo de um <span class="text-uppercase">texto</span> estilizado</p>
+            <p>Exemplo de um <span class="text-lowercase">TEXTO</span> estilizado</p>
+        </div>
+        <div>
+            ```html
+            <p>Exemplo de um <span class="text-super">texto</span> estilizado</p>
+            <p>Exemplo de um <span class="text-sub">texto</span> estilizado</p>
+            <p>Exemplo de um <span class="text-capitalize">texto</span> estilizado</p>
+            <p>Exemplo de um <span class="text-uppercase">texto</span> estilizado</p>
+            <p>Exemplo de um <span class="text-lowercase">TEXTO</span> estilizado</p>
+            ```
+        </div>
+    </div>
+
+<div class="h-24"></div>
+
+### Para quebra de palavras
+
+<div class="h-24"></div>
+
+<div class="matcha-card background-surface d-flex-column gap-16">
+  <div class="matcha-card background-bg gap-16">
+    <p class="word-break w-124 background-surface border-radius-6">
+      Palavra palavra palavra palavra palavra palavra
+    </p>
+    <p class="word-break-all w-124 background-surface border-radius-6">
+      Palavra palavra palavra palavra palavra palavra
+    </p>
+  </div>
+  <div>
+    ```html
+    <p class="word-break w-124">
+      Palavra palavra palavra palavra palavra palavra
+    </p>
+    <p class="word-break-all w-124">
+      Palavra palavra palavra palavra palavra palavra
+    </p>
+    ```
+  </div>
+</div>
+
+<div class="h-24"></div>
+
+### Outras estilizações
+
+<div class="h-24"></div>
+
+<div class="matcha-card background-surface d-flex-column gap-16">
+  <div class="matcha-card background-bg">
+    <p class="text-truncate w-64">
+      Sed tortortia massa, finibus at nunc vel, consectetur
+    </p>
+    <p class="text-nowrap background-surface-alpha-inverse border-radius-6 w-64">
+      Sed tortortia massa, finibus at nunc vel, consectetur
+    </p>
+    <p class="text-boxed">
+      Sed tortortia massa, finibus at nunc vel, consectetur
+    </p>
+    <p class="text-strike">
+      Sed tortortia massa, finibus at nunc vel, consectetur
+    </p>
+    <p class="text-none">
+      Sed tortortia massa, finibus at nunc vel, consectetur
+    </p>
+  </div>
+  <div>
+    ```html
+    <p class="text-truncate w-64"></p>
+    <p class="text-nowrap background-surface w-64"></p>
+    <p class="text-boxed"></p>
+    <p class="text-strike"></p>
+    <p class="text-none"></p>
+    ```
+  </div>
+</div>

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

@@ -6,7 +6,7 @@ import * as ComponentStories from "./autocomplete.stories";
 
 # Autocomplete
 
-> _autocomplete_ é uma entrada de texto normal aprimorada por um painel de opções sugeridas.
+> _autocomplete_ "ESCREVER DEFINIÇÃO DO ATÔMICO"
 
 ---
 

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

@@ -1,9 +1,4 @@
-import {
-    applicationConfig,
-    Meta,
-    moduleMetadata,
-    StoryObj,
-} from '@storybook/angular';
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 import { NgFor, AsyncPipe } from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -13,30 +8,19 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { autocompleteArgtypes } from './autocomplete.argtypes';
-import { MatchaAutocompleteDirective } from './autocomplete.directive';
-import { MatchaAutocompleteOverviewDirective } from './autocomplete-overview.directive';
+import { AutocompleteAutoActiveFirstOptionExample } from './example/autocomplete-auto-active-first-option-example';
+import { AutocompleteOverviewExample } from './example/autocomplete-overview-example';
+import { MatchaAutocompleteModule } from './autocomplete.module';
 
 export default {
     title: 'Atoms / Autocomplete',
+    component: AutocompleteOverviewExample,
     decorators: [
         applicationConfig({
             providers: [provideAnimations()],
         }),
         moduleMetadata({
-            imports: [
-                CommonModule,
-                FormsModule,
-                MatFormFieldModule,
-                MatInputModule,
-                MatAutocompleteModule,
-                ReactiveFormsModule,
-                NgFor,
-                AsyncPipe,
-            ],
-            declarations: [
-                MatchaAutocompleteDirective,
-                MatchaAutocompleteOverviewDirective,
-            ],
+            imports: [CommonModule, FormsModule, MatFormFieldModule, MatInputModule, MatAutocompleteModule, ReactiveFormsModule, NgFor, AsyncPipe, MatchaAutocompleteModule],
         }),
     ],
     // tags: ['autodocs'],
@@ -58,9 +42,7 @@ export default {
 
 function _filter(value: string): string[] {
     const filterValue = value.toLowerCase();
-    return options.filter((option) =>
-        option.toLowerCase().includes(filterValue)
-    );
+    return options.filter((option) => option.toLowerCase().includes(filterValue));
 }
 
 const myControl = new FormControl();
@@ -111,3 +93,12 @@ export const AutocompleteDefault: StoryObj = {
     }),
     name: 'Autocomplete Default',
 };
+
+export const AutocompleteAutoActiveFirstOptionOverview: StoryObj<AutocompleteOverviewExample> = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+    }),
+    name: 'Active First Option',
+};

package/src/lib/matcha-autocomplete/example/autocomplete-auto-active-first-option-example.css

@@ -0,0 +1,9 @@
+.example-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+  }
+
+  .example-full-width {
+    width: 100%;
+  }

package/src/lib/matcha-autocomplete/example/autocomplete-auto-active-first-option-example.html

@@ -0,0 +1,9 @@
+<form class="example-form">
+    <mat-form-field class="example-full-width" appearance="outline" [color]="color">
+        <mat-label>Number</mat-label>
+        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto" />
+        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+            <mat-option *ngFor="let option of filteredOptions | async" [value]="option"> {{option}} </mat-option>
+        </mat-autocomplete>
+    </mat-form-field>
+</form>

package/src/lib/matcha-autocomplete/example/autocomplete-auto-active-first-option-example.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+import { NgFor, AsyncPipe } from '@angular/common';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+/**
+ * @title Highlight the first autocomplete option
+ */
+@Component({
+    selector: 'autocomplete-auto-active-first-option-example',
+    templateUrl: 'autocomplete-auto-active-first-option-example.html',
+    styleUrls: ['autocomplete-auto-active-first-option-example.css'],
+    standalone: true,
+    imports: [FormsModule, MatFormFieldModule, MatInputModule, MatAutocompleteModule, ReactiveFormsModule, NgFor, AsyncPipe],
+})
+export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
+    myControl = new FormControl('');
+    options: string[] = ['One', 'Two', 'Three'];
+    filteredOptions!: Observable<string[]>;
+
+    ngOnInit() {
+        this.filteredOptions = this.myControl.valueChanges.pipe(
+            startWith(''),
+            map((value) => this._filter(value || ''))
+        );
+    }
+
+    private _filter(value: string): string[] {
+        const filterValue = value.toLowerCase();
+
+        return this.options.filter((option) => option.toLowerCase().includes(filterValue));
+    }
+}

package/src/lib/matcha-autocomplete/example/autocomplete-overview-example.css

@@ -0,0 +1,19 @@
+.example-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+  }
+
+  .example-full-width {
+    width: 100%;
+  }
+
+  .example-option-img {
+    vertical-align: middle;
+    margin-right: 8px;
+  }
+
+  [dir='rtl'] .example-option-img {
+    margin-right: 0;
+    margin-left: 8px;
+  }

package/src/lib/matcha-autocomplete/example/autocomplete-overview-example.html

@@ -0,0 +1,17 @@
+<form class="example-form">
+    <mat-form-field class="example-full-width" appearance="outline" [color]="color">
+        <mat-label>State</mat-label>
+        <input matInput aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl" />
+        <mat-autocomplete #auto="matAutocomplete">
+            <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
+                <img alt="" class="example-option-img" [src]="state.flag" height="25" />
+                <span>{{state.name}}</span> |
+                <small>Population: {{state.population}}</small>
+            </mat-option>
+        </mat-autocomplete>
+    </mat-form-field>
+
+    <br />
+
+    <mat-slide-toggle [checked]="stateCtrl.disabled" (change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()"> Disable Input? </mat-slide-toggle>
+</form>

package/src/lib/matcha-autocomplete/example/autocomplete-overview-example.ts

@@ -0,0 +1,70 @@
+import { Component } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { NgFor, AsyncPipe } from '@angular/common';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+export interface State {
+    flag: string;
+    name: string;
+    population: string;
+}
+
+/**
+ * @title Autocomplete overview
+ */
+@Component({
+    selector: 'autocomplete-overview-example',
+    templateUrl: 'autocomplete-overview-example.html',
+    styleUrls: ['autocomplete-overview-example.css'],
+    standalone: true,
+    imports: [FormsModule, MatFormFieldModule, MatInputModule, MatAutocompleteModule, ReactiveFormsModule, NgFor, MatSlideToggleModule, AsyncPipe],
+})
+export class AutocompleteOverviewExample {
+    stateCtrl = new FormControl('');
+    filteredStates: Observable<State[]>;
+
+    states: State[] = [
+        {
+            name: 'Arkansas',
+            population: '2.978M',
+            // https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
+            flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg',
+        },
+        {
+            name: 'California',
+            population: '39.14M',
+            // https://commons.wikimedia.org/wiki/File:Flag_of_California.svg
+            flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg',
+        },
+        {
+            name: 'Florida',
+            population: '20.27M',
+            // https://commons.wikimedia.org/wiki/File:Flag_of_Florida.svg
+            flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg',
+        },
+        {
+            name: 'Texas',
+            population: '27.47M',
+            // https://commons.wikimedia.org/wiki/File:Flag_of_Texas.svg
+            flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg',
+        },
+    ];
+
+    constructor() {
+        this.filteredStates = this.stateCtrl.valueChanges.pipe(
+            startWith(''),
+            map((state) => (state ? this._filterStates(state) : this.states.slice()))
+        );
+    }
+
+    private _filterStates(value: string): State[] {
+        const filterValue = value.toLowerCase();
+
+        return this.states.filter((state) => state.name.toLowerCase().includes(filterValue));
+    }
+}

package/src/lib/matcha-badge/badge.argtypes.ts

@@ -0,0 +1,77 @@
+export const badgeArgtypes = {
+    matBadgeColor: {
+        description: 'The color of the badge. Can be primary, accent, or warn.',
+        control: 'select',
+        options: ['primary', 'accent', 'warn'],
+        defaultValue: 'primary',
+        table: {
+            type: { summary: 'ThemePalette' },
+        },
+    },
+    matBadge: {
+        description: 'The content for the badge',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string | number | undefined | null' },
+        },
+    },
+    matBadgeDescription: {
+        description: 'Message used to describe the decorated element via aria-describedby',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    matBadgeDisabled: {
+        description: 'Whether the component is disabled.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    matBadgeHidden: {
+        description: 'Whether the badge is hidden.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    matBadgeOverlap: {
+        description: 'Whether the badge should overlap its contents or not',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    matBadgePosition: {
+        description: 'Position the badge should reside. Accepts any combination of "above"|"below" and "before"|"after"',
+        control: 'text',
+        defaultValue: 'above after',
+        table: {
+            type: { summary: 'MatBadgePosition' },
+        },
+    },
+    matBadgeSize: {
+        description: 'Size of the badge. Can be "small", "medium", or "large".',
+        control: 'select',
+        options: ['small', 'medium', 'large'],
+        defaultValue: 'medium',
+        table: {
+            type: { summary: 'MatBadgeSize' },
+        },
+    },
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+};

package/src/lib/matcha-badge/badge.directive.ts

@@ -0,0 +1,11 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[matcha-badge]',
+})
+export class MatchaBadgeDirective {
+    constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {
+        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
+        this._renderer.addClass(this._elementRef.nativeElement, 'matcha-badge');
+    }
+}

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

@@ -0,0 +1,69 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./badge.stories";
+
+<Meta title="Atoms / Badge / Documentação" />
+
+# Badge
+
+> _badge_ "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">Badge overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.BadgeOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <div matBadge="4" matBadgeOverlap="false" class="demo-section">Text with a badge</div>
+
+                <div matBadge="1" matBadgeSize="large" class="demo-section">Text with large badge</div>
+
+                <div class="demo-section">
+                Button with a badge on the left
+                <button mat-raised-button color="primary"
+                    matBadge="8" matBadgePosition="before" matBadgeColor="accent">
+                    Action
+                </button>
+                </div>
+
+                <div class="demo-section">
+                    Button toggles badge visibility
+                    <button mat-raised-button matBadge="7" [matBadgeHidden]="hidden" (click)="toggleBadgeVisibility()">
+                        Hide
+                    </button>
+                </div>
+
+                <div class="demo-section">
+                Icon with a badge
+                <mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>
+                    <!-- Include text description of the icon's meaning for screen-readers -->
+                    <span class="cdk-visually-hidden">
+                    Example with a home icon with overlaid badge showing the number 15
+                    </span>
+                </div>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatBadgeModule} from '@angular/material/badge';`
+
+[Official documentation](https://https://material.angular.io/components/badge/overview)
+
+<br />

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

@@ -1,14 +1,9 @@
 import { NgModule } from '@angular/core';
-import { MatchaBadgeDirective } from './matcha-badge.directive';
+import { MatchaBadgeDirective } from './badge.directive';
 
 @NgModule({
-    declarations: [
-        MatchaBadgeDirective
-    ],
-    imports: [
-    ],
-    exports: [
-        MatchaBadgeDirective
-    ]
+    declarations: [MatchaBadgeDirective],
+    imports: [],
+    exports: [MatchaBadgeDirective],
 })
-export class MatchaBadgeModule { }
+export class MatchaBadgeModule {}