matcha-components 1.0.6 → 1.0.7

package/src/lib/matcha-snackbar/snack-bar-overview-example.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+/**
+ * @title Basic snack-bar
+ */
+@Component({
+    selector: 'snack-bar-overview-example',
+    templateUrl: 'snack-bar-overview-example.html',
+    styleUrls: ['snack-bar-overview-example.css'],
+    standalone: true,
+    imports: [MatFormFieldModule, MatInputModule, MatButtonModule, MatSnackBarModule],
+})
+export class SnackBarOverviewExample {
+    constructor(private _snackBar: MatSnackBar) {}
+
+    openSnackBar(message: string, action: string) {
+        this._snackBar.open(message, action);
+    }
+}

package/src/lib/matcha-snackbar/snack-bar-overview-example.css

@@ -0,0 +1,3 @@
+mat-form-field {
+    margin-right: 12px;
+  }

package/src/lib/matcha-snackbar/snack-bar-overview-example.html

@@ -0,0 +1,11 @@
+<mat-form-field>
+    <mat-label>Message</mat-label>
+    <input matInput value="Disco party!" #message />
+</mat-form-field>
+
+<mat-form-field>
+    <mat-label>Action</mat-label>
+    <input matInput value="Dance" #action />
+</mat-form-field>
+
+<button mat-stroked-button (click)="openSnackBar(message.value, action.value)">Show snack-bar</button>

package/src/lib/matcha-snackbar/snack-bar.argtypes.ts

@@ -0,0 +1,11 @@
+export const snackBarArgtypes = {
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+};

package/src/lib/matcha-snackbar/snack-bar.directive.ts

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

package/src/lib/matcha-snackbar/snack-bar.mdx

@@ -0,0 +1,53 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./snack-bar.stories";
+
+<Meta title="Atoms / Snack Bar / Documentação" />
+
+# Snack Bar
+
+> _snack-bar_ "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">Snack Bar Basic</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.SnackBarOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <mat-form-field>
+                    <mat-label>Message</mat-label>
+                    <input matInput value="Disco party!" #message />
+                </mat-form-field>
+
+                <mat-form-field>
+                    <mat-label>Action</mat-label>
+                    <input matInput value="Dance" #action />
+                </mat-form-field>
+
+                <button mat-stroked-button (click)="openSnackBar(message.value, action.value)">Show snack-bar</button>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';`
+
+[Official documentation](https://https://material.angular.io/components/snack-bar/overview)
+
+<br />

package/src/lib/matcha-snackbar/snack-bar.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaSnackBarDirective } from './snack-bar.directive';
+
+@NgModule({
+    declarations: [MatchaSnackBarDirective],
+    imports: [CommonModule],
+    exports: [MatchaSnackBarDirective],
+})
+export class MatchaSnackBarModule {}

package/src/lib/matcha-snackbar/snack-bar.stories.ts

@@ -0,0 +1,34 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { snackBarArgtypes } from './snack-bar.argtypes';
+import { SnackBarOverviewExample } from './snack-bar-overview-example.component';
+import { MatchaSnackBarModule } from './snack-bar.module';
+
+export default {
+    title: 'Atoms / Snack Bar',
+    component: SnackBarOverviewExample,
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatchaSnackBarModule],
+        }),
+    ],
+    args: {},
+    argTypes: snackBarArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const SnackBarOverview: StoryObj<SnackBarOverviewExample> = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+    }),
+    name: 'Snack Bar Overview',
+};

package/src/lib/matcha-sort-header/example/sort-overview-example.component.ts

@@ -0,0 +1,67 @@
+import { Component } from '@angular/core';
+import { Sort, MatSortModule } from '@angular/material/sort';
+import { NgFor } from '@angular/common';
+
+export interface Dessert {
+    calories: number;
+    carbs: number;
+    fat: number;
+    name: string;
+    protein: number;
+}
+
+/**
+ * @title Sorting overview
+ */
+@Component({
+    selector: 'sort-overview-example',
+    templateUrl: 'sort-overview-example.html',
+    styleUrls: ['sort-overview-example.css'],
+    standalone: true,
+    imports: [MatSortModule, NgFor],
+})
+export class SortOverviewExample {
+    desserts: Dessert[] = [
+        { name: 'Frozen yogurt', calories: 159, fat: 6, carbs: 24, protein: 4 },
+        { name: 'Ice cream sandwich', calories: 237, fat: 9, carbs: 37, protein: 4 },
+        { name: 'Eclair', calories: 262, fat: 16, carbs: 24, protein: 6 },
+        { name: 'Cupcake', calories: 305, fat: 4, carbs: 67, protein: 4 },
+        { name: 'Gingerbread', calories: 356, fat: 16, carbs: 49, protein: 4 },
+    ];
+
+    sortedData: Dessert[];
+
+    constructor() {
+        this.sortedData = this.desserts.slice();
+    }
+
+    sortData(sort: Sort) {
+        const data = this.desserts.slice();
+        if (!sort.active || sort.direction === '') {
+            this.sortedData = data;
+            return;
+        }
+
+        this.sortedData = data.sort((a, b) => {
+            const isAsc = sort.direction === 'asc';
+            switch (sort.active) {
+                case 'name':
+                    return compare(a.name, b.name, isAsc);
+                case 'calories':
+                    return compare(a.calories, b.calories, isAsc);
+                case 'fat':
+                    return compare(a.fat, b.fat, isAsc);
+                case 'carbs':
+                    return compare(a.carbs, b.carbs, isAsc);
+                case 'protein':
+                    return compare(a.protein, b.protein, isAsc);
+                default:
+                    return 0;
+            }
+        });
+    }
+}
+
+function compare(a: number | string, b: number | string, isAsc: boolean) {
+    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+}

package/src/lib/matcha-sort-header/example/sort-overview-example.css

@@ -0,0 +1,3 @@
+.mat-sort-header-container {
+    align-items: center;
+  }

package/src/lib/matcha-sort-header/example/sort-overview-example.html

@@ -0,0 +1,21 @@
+<div class="table-container">
+    <div class="table-container-shadow">
+        <table matSort (matSortChange)="sortData($event)">
+            <tr>
+                <th class="par-m" mat-sort-header="name">Dessert (100g)</th>
+                <th class="par-m" mat-sort-header="calories">Calories</th>
+                <th class="par-m" mat-sort-header="fat">Fat (g)</th>
+                <th class="par-m" mat-sort-header="carbs">Carbs (g)</th>
+                <th class="par-m" mat-sort-header="protein">Protein (g)</th>
+            </tr>
+
+            <tr *ngFor="let dessert of sortedData">
+                <td class="par-m color-label">{{dessert.name}}</td>
+                <td class="par-m color-label">{{dessert.calories}}</td>
+                <td class="par-m color-label">{{dessert.fat}}</td>
+                <td class="par-m color-label">{{dessert.carbs}}</td>
+                <td class="par-m color-label">{{dessert.protein}}</td>
+            </tr>
+        </table>
+    </div>
+</div>

package/src/lib/matcha-sort-header/sort-header.argtypes.ts

@@ -0,0 +1,11 @@
+export const sortHeaderArgtypes = {
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+};

package/src/lib/matcha-sort-header/sort-header.mdx

@@ -0,0 +1,78 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./sort-header.stories";
+
+<Meta title="Atoms / Sort Header / Documentação" />
+
+# Sort Header
+
+> _table_ "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">Sort Header Overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.SortOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <div class="table-container">
+                    <div class="table-container-shadow">
+                        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+                            <!--- Note that these columns can be defined in any order.
+                                The actual rendered columns are set as a property on the row definition" -->
+
+                            <!-- Position Column -->
+                            <ng-container matColumnDef="position">
+                                <th class="par-m" mat-header-cell *matHeaderCellDef>No.</th>
+                                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.position }}</td>
+                            </ng-container>
+
+                            <!-- Name Column -->
+                            <ng-container matColumnDef="name">
+                                <th class="par-m" mat-header-cell *matHeaderCellDef>Name</th>
+                                <td class="par-m color-blue" mat-cell *matCellDef="let element">{{ element.name }}</td>
+                            </ng-container>
+
+                            <!-- Weight Column -->
+                            <ng-container matColumnDef="weight">
+                                <th class="par-m" mat-header-cell *matHeaderCellDef>Weight</th>
+                                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.weight }}</td>
+                            </ng-container>
+
+                            <!-- Symbol Column -->
+                            <ng-container matColumnDef="symbol">
+                                <th class="par-m" mat-header-cell *matHeaderCellDef>Symbol</th>
+                                <td class="par-m color-label" mat-cell *matCellDef="let element">{{ element.symbol }}</td>
+                            </ng-container>
+
+                            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+                        </table>
+                    </div>
+                </div>
+
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatSortModule} from '@angular/material/table';`
+
+[Official documentation](https://material.angular.io/components/sort/overview)
+
+<br />

package/src/lib/matcha-sort-header/sort-header.module.ts

@@ -1,12 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatchaSortHeaderDirective } from './matcha-sort-header.directive';
+import { MatchaSortHeaderDirective } from './sort-header.directive';
 
 @NgModule({
-  declarations: [MatchaSortHeaderDirective],
-  imports: [
-    CommonModule
-  ],
-  exports:[MatchaSortHeaderDirective]
+    declarations: [MatchaSortHeaderDirective],
+    imports: [CommonModule],
+    exports: [MatchaSortHeaderDirective],
 })
-export class MatchaSortHeaderModule { }
+export class MatchaSortHeaderModule {}

package/src/lib/matcha-sort-header/sort-header.stories.ts

@@ -0,0 +1,34 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { sortHeaderArgtypes } from './sort-header.argtypes';
+import { SortOverviewExample } from './example/sort-overview-example.component';
+import { MatchaSortHeaderModule } from './sort-header.module';
+
+export default {
+    title: 'Atoms / Sort Header',
+    component: SortOverviewExample,
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatchaSortHeaderModule],
+        }),
+    ],
+    args: {},
+    argTypes: sortHeaderArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const SortOverview: StoryObj<SortOverviewExample> = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+    }),
+    name: 'Sort Overview Example',
+};

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

@@ -0,0 +1,92 @@
+export const stepperArgtypes = {
+    ariaLabel: {
+        description: 'Aria label for the step.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    ariaLabelledby: {
+        description: 'Reference to the element that the step is labelled by.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    color: {
+        description: 'Theme color for the particular step.',
+        control: 'select',
+        options: ['primary', 'accent', 'warn'],
+        defaultValue: 'primary',
+        table: {
+            type: { summary: 'ThemePalette' },
+        },
+    },
+    completed: {
+        description: 'Whether the step is marked as completed.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    editable: {
+        description: 'Whether the user can return to this step once it has been marked as completed.',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    errorMessage: {
+        description: 'Error message to display when there is an error.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    hasError: {
+        description: 'Whether the step has an error.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    label: {
+        description: 'Plain text label of the step.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            type: { summary: 'string' },
+        },
+    },
+    optional: {
+        description: 'Whether the completion of the step is optional.',
+        control: 'boolean',
+        defaultValue: false,
+        table: {
+            type: { summary: 'boolean' },
+        },
+    },
+    state: {
+        description: 'State of the step.',
+        control: 'select',
+        options: ['number', 'edit', 'done'],
+        defaultValue: 'number',
+        table: {
+            type: { summary: 'StepState' },
+        },
+    },
+    stepControl: {
+        description: 'The top-level abstract control of the step.',
+        control: null,
+        defaultValue: undefined,
+        table: {
+            type: { summary: 'AbstractControlLike' },
+        },
+    },
+};

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

@@ -0,0 +1,68 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./stepper.stories";
+
+<Meta title="Atoms / Stepper / Documentação" />
+
+# Stepper
+
+> _stepper_ "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">Stepper overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.StepperOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <div matStepper="4" matStepperOverlap="false" class="demo-section">Text with a stepper</div>
+
+                <div matStepper="1" matStepperSize="large" class="demo-section">Text with large stepper</div>
+
+                <div class="demo-section">
+                Button with a stepper on the left
+                <button mat-raised-button color="primary"
+                    matStepper="8" matStepperPosition="before" matStepperColor="accent">
+                    Action
+                </button>
+                </div>
+
+                <div class="demo-section">
+                    Button toggles stepper visibility
+                    <button mat-raised-button matStepper="7" [matStepperHidden]="hidden" (click)="toggleStepperVisibility()">
+                        Hide
+                    </button>
+                </div>
+
+                <div class="demo-section">
+                Icon with a stepper
+                <mat-icon matStepper="15" matStepperColor="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 stepper showing the number 15
+                    </span>
+                </div>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatStepperModule} from '@angular/material/stepper';`
+[Official documentation](https://https://material.angular.io/components/stepper/overview)
+
+<br />

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

@@ -1,12 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatchaStepperDirective } from './matcha-stepper.directive';
+import { MatchaStepperDirective } from './stepper.directive';
 
 @NgModule({
-  declarations: [MatchaStepperDirective],
-  imports: [
-    CommonModule
-  ],
-  exports:[MatchaStepperDirective]
+    declarations: [MatchaStepperDirective],
+    imports: [CommonModule],
+    exports: [MatchaStepperDirective],
 })
-export class MatchaStepperModule { }
+export class MatchaStepperModule {}