matcha-components 1.0.6 → 1.0.8

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

@@ -0,0 +1,79 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatButtonModule } from '@angular/material/button';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { badgeArgtypes } from './badge.argtypes';
+
+export default {
+    title: 'Atoms / Badge',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatIconModule, MatBadgeModule, MatButtonModule, NgIf, JsonPipe, NgFor, AsyncPipe],
+        }),
+    ],
+    args: {
+        matBadgeColor: 'primary',
+    },
+    argTypes: badgeArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+let hidden = false;
+function toggleBadgeVisibility() {
+    hidden = !hidden;
+}
+
+export const BadgeOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <div class="d-flex-column w-500 gap-16">
+            <div class="d-flex">
+                <div matBadge="4" matBadgeOverlap="false" class="demo-section">Text with a badge</div>
+            </div>
+            <div class="d-flex">
+                <div matBadge="1" matBadgeSize="large" class="demo-section">Text with large badge</div>
+            </div>
+            <div class="d-flex">
+                <div class="demo-section">
+                    Button with a badge on the left
+                    <button mat-raised-button [color]="color"
+                        matBadge="8" matBadgePosition="before" matBadgeColor="accent">
+                        Action
+                    </button>
+                </div>
+            </div>
+            <div class="d-flex">
+                <div class="demo-section">
+                    Button toggles badge visibility
+                    <button mat-raised-button matBadge="7" [matBadgeHidden]="hidden" (click)="toggleBadgeVisibility()">
+                        Hide
+                    </button>
+                </div>
+            </div>
+            <div class="d-flex">
+                <div class="demo-section">
+                Icon with a badge
+                <span class="i-matcha-home" matBadge="15" matBadgeColor="warn"></span>
+                    <!-- 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>
+        `,
+    }),
+    name: ' Badge Overview',
+};

package/src/lib/matcha-bottom-sheet/bottom-sheet-overview-example-sheet.html

@@ -0,0 +1,21 @@
+<mat-nav-list>
+    <a href="https://keep.google.com/" mat-list-item (click)="openLink($event)">
+        <span matListItemTitle>Google Keep</span>
+        <span matLine>Add to a note</span>
+    </a>
+
+    <a href="https://docs.google.com/" mat-list-item (click)="openLink($event)">
+        <span matListItemTitle>Google Docs</span>
+        <span matLine>Embed in a document</span>
+    </a>
+
+    <a href="https://plus.google.com/" mat-list-item (click)="openLink($event)">
+        <span matListItemTitle>Google Plus</span>
+        <span matLine>Share with your friends</span>
+    </a>
+
+    <a href="https://hangouts.google.com/" mat-list-item (click)="openLink($event)">
+        <span matListItemTitle>Google Hangouts</span>
+        <span matLine>Show to your coworkers</span>
+    </a>
+</mat-nav-list>

package/src/lib/matcha-bottom-sheet/bottom-sheet-overview-example.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { MatBottomSheet, MatBottomSheetModule, MatBottomSheetRef } from '@angular/material/bottom-sheet';
+import { MatListModule } from '@angular/material/list';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+    selector: 'bottom-sheet-overview-example',
+    template: `<p>You have received a file called "cat-picture.jpeg".</p>
+        <button mat-raised-button (click)="openBottomSheet()">Open file</button>`,
+    standalone: true,
+    imports: [MatButtonModule, MatBottomSheetModule],
+})
+export class BottomSheetOverviewExample {
+    constructor(private _bottomSheet: MatBottomSheet) {}
+
+    openBottomSheet(): void {
+        this._bottomSheet.open(BottomSheetOverviewExampleSheet);
+    }
+}
+
+@Component({
+    selector: 'bottom-sheet-overview-example-sheet',
+    templateUrl: 'bottom-sheet-overview-example-sheet.html',
+    standalone: true,
+    imports: [MatListModule],
+})
+export class BottomSheetOverviewExampleSheet {
+    constructor(private _bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>) {}
+
+    openLink(event: MouseEvent): void {
+        this._bottomSheetRef.dismiss();
+        event.preventDefault();
+    }
+}

package/src/lib/matcha-bottom-sheet/bottom-sheet-overview-example.html

@@ -0,0 +1,2 @@
+<p>You have received a file called "cat-picture.jpeg".</p>
+<button mat-raised-button (click)="openBottomSheet()">Open file</button>

package/src/lib/matcha-bottom-sheet/bottom-sheet.argtypes.ts

@@ -0,0 +1,117 @@
+export const bottomSheetArgtypes = {
+    ariaLabel: {
+        description: 'Aria label to assign to the bottom sheet element.',
+        control: 'text',
+        defaultValue: null,
+        table: {
+            type: { summary: 'string | null' },
+        },
+    },
+    ariaModal: {
+        description: 'Whether this is a modal bottom sheet. Used to set the aria-modal attribute.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    autoFocus: {
+        description: 'Where the bottom sheet should focus on open.',
+        control: 'select',
+        options: ['auto', 'first-tabbable', 'manual', 'none'],
+        defaultValue: 'auto',
+        table: {
+            type: { summary: 'AutoFocusTarget | string | boolean' },
+        },
+    },
+    backdropClass: {
+        description: 'Custom class for the backdrop.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    closeOnNavigation: {
+        description: 'Whether the bottom sheet should close when the user goes backwards/forwards in history.',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    data: {
+        description: 'Data being injected into the child component.',
+        control: 'object',
+        defaultValue: null,
+        table: {
+            type: { summary: 'D | null' },
+        },
+    },
+    direction: {
+        description: 'Text layout direction for the bottom sheet.',
+        control: 'select',
+        options: ['ltr', 'rtl'],
+        defaultValue: 'ltr',
+        table: {
+            type: { summary: 'Direction' },
+        },
+    },
+    disableClose: {
+        description: 'Whether the user can use escape or clicking outside to close the bottom sheet.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    hasBackdrop: {
+        description: 'Whether the bottom sheet has a backdrop.',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    panelClass: {
+        description: 'Extra CSS classes to be added to the bottom sheet container.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string | string[]' },
+        },
+    },
+    restoreFocus: {
+        description: "Whether the bottom sheet should restore focus to the previously-focused element, after it's closed.",
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    scrollStrategy: {
+        description: 'Scroll strategy to be used for the bottom sheet.',
+        control: 'text',
+        defaultValue: 'reposition',
+        table: {
+            type: { summary: 'ScrollStrategy' },
+        },
+    },
+    viewContainerRef: {
+        description: 'The view container to place the overlay for the bottom sheet into.',
+        control: 'object',
+        defaultValue: null,
+        table: {
+            type: { summary: 'ViewContainerRef' },
+        },
+    },
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+};

package/src/lib/matcha-bottom-sheet/bottom-sheet.mdx

@@ -0,0 +1,69 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./bottom-sheet.stories";
+
+<Meta title="Atoms / BottomSheet / Documentação" />
+
+# BottomSheet
+
+> _bottomSheet_ "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">BottomSheet overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.BottomSheetOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <div matBottomSheet="4" matBottomSheetOverlap="false" class="demo-section">Text with a badge</div>
+
+                <div matBottomSheet="1" matBottomSheetSize="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"
+                    matBottomSheet="8" matBottomSheetPosition="before" matBottomSheetColor="accent">
+                    Action
+                </button>
+                </div>
+
+                <div class="demo-section">
+                    Button toggles badge visibility
+                    <button mat-raised-button matBottomSheet="7" [matBottomSheetHidden]="hidden" (click)="toggleBottomSheetVisibility()">
+                        Hide
+                    </button>
+                </div>
+
+                <div class="demo-section">
+                Icon with a badge
+                <mat-icon matBottomSheet="15" matBottomSheetColor="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 {MatBottomSheetModule} from '@angular/material/bottom-sheet';`
+
+[Official documentation](https://https://material.angular.io/components/bottom-sheet/overview)
+
+<br />

package/src/lib/matcha-bottom-sheet/bottom-sheet.module.ts

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

package/src/lib/matcha-bottom-sheet/bottom-sheet.stories.ts

@@ -0,0 +1,39 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatButtonModule } from '@angular/material/button';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { bottomSheetArgtypes } from './bottom-sheet.argtypes';
+import { BottomSheetOverviewExample } from './bottom-sheet-overview-example.component';
+import { MatchaBottomSheetModule } from './bottom-sheet.module';
+
+export default {
+    title: 'Atoms / BottomSheet',
+    component: BottomSheetOverviewExample,
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatIconModule, MatButtonModule, MatchaBottomSheetModule, NgIf, JsonPipe, MatListModule, NgFor, AsyncPipe],
+            declarations: [],
+        }),
+    ],
+    args: {},
+    argTypes: bottomSheetArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const BottomSheetOverview: StoryObj<BottomSheetOverviewExample> = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+    }),
+    name: 'BottomSheet Overview',
+};

package/src/lib/matcha-button/button-overview-example.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatButtonModule } from '@angular/material/button';
+import { MatchaButtonModule } from './button.module';
+import { MatchaIconModule } from '../matcha-icon/icon.module';
+
+/**
+ * @title Basic buttons
+ */
+@Component({
+    selector: 'button-overview-example',
+    templateUrl: 'button-overview-example.html',
+    styleUrls: ['button-overview-example.scss'],
+    standalone: true,
+    imports: [MatButtonModule, MatDividerModule, MatIconModule, MatchaButtonModule, MatchaIconModule],
+})
+export class ButtonOverviewExample {}

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

@@ -0,0 +1,118 @@
+<section>
+    <div class="example-label">Basic</div>
+    <div class="example-button-row">
+        <button matcha-button [size]="size" [pill]="pill" mat-button matcha-btn-xl>Basic</button>
+        <button matcha-button [size]="size" [pill]="pill" mat-button [color]="color">{{color}}</button>
+        <button matcha-button [size]="size" [pill]="pill" mat-button disabled>Disabled</button>
+        <a matcha-button [size]="size" [pill]="pill" mat-button href="https://www.google.com/" target="_blank">Link</a>
+    </div>
+</section>
+<mat-divider></mat-divider>
+<section>
+    <div class="example-label">Raised</div>
+    <div class="example-button-row">
+        <button matcha-button [size]="size" [pill]="pill" mat-raised-button>Basic</button>
+        <button matcha-button [size]="size" [pill]="pill" mat-raised-button [color]="color">{{color}}</button>
+        <button matcha-button [size]="size" [pill]="pill" mat-raised-button disabled>Disabled</button>
+        <a matcha-button [size]="size" [pill]="pill" mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
+    </div>
+</section>
+<mat-divider></mat-divider>
+<section>
+    <div class="example-label">Stroked</div>
+    <div class="example-button-row">
+        <button matcha-button [size]="size" [pill]="pill" mat-stroked-button>Basic</button>
+        <button matcha-button [size]="size" [pill]="pill" mat-stroked-button [color]="color">{{color}}</button>
+        <button matcha-button [size]="size" [pill]="pill" mat-stroked-button disabled>Disabled</button>
+        <a matcha-button [size]="size" [pill]="pill" mat-stroked-button href="https://www.google.com/" target="_blank">Link</a>
+    </div>
+</section>
+<mat-divider></mat-divider>
+<section>
+    <div class="example-label">Flat</div>
+    <div class="example-button-row">
+        <button matcha-button [size]="size" [pill]="pill" mat-flat-button>Basic</button>
+        <button matcha-button [size]="size" [pill]="pill" mat-flat-button [color]="color">{{color}}</button>
+        <button matcha-button [size]="size" [pill]="pill" mat-flat-button disabled>Disabled</button>
+        <a matcha-button [size]="size" [pill]="pill" mat-flat-button href="https://www.google.com/" target="_blank">Link</a>
+    </div>
+</section>
+<mat-divider></mat-divider>
+<section>
+    <div class="example-label">Icon</div>
+    <div class="example-button-row">
+        <div class="example-flex-container">
+            <button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
+                <matcha-icon [size]="size" icon="action_options"></matcha-icon>
+            </button>
+            <button mat-icon-button color="primary" aria-label="Example icon button with a home icon">
+                <matcha-icon [size]="size" icon="home"></matcha-icon>
+            </button>
+            <button mat-icon-button color="accent" aria-label="Example icon button with a menu icon">
+                <matcha-icon [size]="size" icon="menu"></matcha-icon>
+            </button>
+            <button mat-icon-button color="warn" aria-label="Example icon button with a heart icon">
+                <matcha-icon [size]="size" icon="favorite"></matcha-icon>
+            </button>
+            <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
+                <matcha-icon [size]="size" icon="smile"></matcha-icon>
+            </button>
+        </div>
+    </div>
+</section>
+<mat-divider></mat-divider>
+<section>
+    <div class="example-label">FAB</div>
+    <div class="example-button-row">
+        <div class="example-flex-container">
+            <div class="example-button-container">
+                <button mat-fab color="primary" aria-label="Example icon button with a delete icon">
+                    <matcha-icon [size]="size" icon="home"></matcha-icon>
+                </button>
+            </div>
+            <div class="example-button-container">
+                <button mat-fab color="accent" aria-label="Example icon button with a bookmark icon">
+                    <matcha-icon [size]="size" icon="menu"></matcha-icon>
+                </button>
+            </div>
+            <div class="example-button-container">
+                <button mat-fab color="warn" aria-label="Example icon button with a home icon">
+                    <matcha-icon [size]="size" icon="favorite"></matcha-icon>
+                </button>
+            </div>
+            <div class="example-button-container">
+                <button mat-fab disabled aria-label="Example icon button with a heart icon">
+                    <matcha-icon [size]="size" icon="smile"></matcha-icon>
+                </button>
+            </div>
+        </div>
+    </div>
+</section>
+<mat-divider></mat-divider>
+<section>
+    <div class="example-label">Mini FAB</div>
+    <div class="example-button-row">
+        <div class="example-flex-container">
+            <div class="example-button-container">
+                <button mat-mini-fab color="primary" aria-label="Example icon button with a menu icon">
+                    <matcha-icon [size]="size" icon="home"></matcha-icon>
+                </button>
+            </div>
+            <div class="example-button-container">
+                <button mat-mini-fab color="accent" aria-label="Example icon button with a plus one icon">
+                    <matcha-icon [size]="size" icon="menu"></matcha-icon>
+                </button>
+            </div>
+            <div class="example-button-container">
+                <button mat-mini-fab color="warn" aria-label="Example icon button with a filter list icon">
+                    <matcha-icon [size]="size" icon="favorite"></matcha-icon>
+                </button>
+            </div>
+            <div class="example-button-container">
+                <button mat-mini-fab disabled aria-label="Example icon button with a home icon">
+                    <matcha-icon [size]="size" icon="smile"></matcha-icon>
+                </button>
+            </div>
+        </div>
+    </div>
+</section>

package/src/lib/matcha-button/button-overview-example.scss

@@ -0,0 +1,31 @@
+section {
+    display: table;
+}
+
+.example-label {
+    display: table-cell;
+    font-size: 14px;
+    margin-left: 8px;
+    min-width: 120px;
+}
+
+.example-button-row {
+    display: table-cell;
+    max-width: 600px;
+}
+
+.example-button-row .mat-mdc-button-base {
+    margin: 8px 8px 8px 0;
+}
+
+.example-flex-container {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.example-button-container {
+    display: flex;
+    justify-content: center;
+    width: 120px;
+}

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

@@ -0,0 +1,20 @@
+export const buttonArgtypes = {
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+    size: {
+        description: 'size of the button',
+        control: 'select',
+        defaultValue: 'md',
+        table: {
+            defaultValue: { summary: 'md' },
+        },
+        options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+};

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

@@ -0,0 +1,39 @@
+import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[matcha-button]',
+    standalone: false,
+})
+export class MatchaButtonDirective {
+    @Input('pill') pill: boolean = false;
+    @Input('size') size: string | null = null;
+
+    constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {}
+
+    ngOnInit() {
+        this._setConfig();
+    }
+
+    ngOnChanges() {
+        this._setConfig();
+        console.log(this.size);
+    }
+
+    private _setConfig() {
+        // Remove todas as classes relacionadas ao tamanho
+        ['xs', 'sm', 'md', 'lg', 'xl'].forEach((size) => {
+            this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-${size}`);
+        });
+
+        // Adicione a classe correspondente ao novo tamanho (se houver)
+        if (this.size) {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-${this.size}`);
+        }
+
+        if (this.pill) {
+            this._renderer.addClass(this._elementRef.nativeElement, `matcha-button-pill`);
+        } else {
+            this._renderer.removeClass(this._elementRef.nativeElement, `matcha-button-pill`);
+        }
+    }
+}