matcha-components 20.12.0 → 20.15.0

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

@@ -0,0 +1,132 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { titleArgtypes } from './title.argtypes';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { MatchaTitleModule } from './title.module';
+import { MatchaDividerModule } from '../matcha-divider/divider.module';
+
+export default {
+    title: 'Atoms / Title',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+        moduleMetadata({
+            imports: [CommonModule, MatchaTitleModule, MatchaDividerModule],
+        }),
+    ],
+    tags: ['autodocs'],
+    args: {
+        color: 'fg',
+        size: 4,
+        type: 'pill',
+        icon: 'home',
+        iconClick: null,
+        content: 'My title',
+    },
+    argTypes: titleArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+
+export const TitleControls: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-title
+            color="${args['color']}"
+            size="${args['size']}"
+            type="${args['type']}"
+            icon="${args['icon']}"
+            (iconClick)="yourFunction()"
+            >{{content}}</matcha-title>
+        `,
+    }),
+    name: 'Title Controls',
+};
+
+export const TitleTypePill: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-title type="pill">title pill sem size e sem cor</matcha-title>
+            <matcha-title size="1" type="pill" color="red">title pill colorido size1</matcha-title>
+            <matcha-title size="2" type="pill" color="pink">title pill colorido size2</matcha-title>
+            <matcha-title size="3" type="pill" color="purple">title pill colorido size3</matcha-title>
+            <matcha-title size="4" type="pill" color="deep-purple">title pill colorido size4</matcha-title>
+            <matcha-title size="5" type="pill" color="indigo">title pill colorido size5</matcha-title>
+            <matcha-title size="6" type="pill" color="blue">title pill colorido size6</matcha-title>
+            <matcha-title size="7" type="pill" color="cyan">title pill colorido size7</matcha-title>
+        `,
+    }),
+    name: 'Title Type Pill',
+    parameters: { controls: { exclude: ['size', 'type', 'icon', 'iconClick', 'color', 'content'] } },
+};
+
+export const TitleTypeBullet: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-title type="bullet">title bullet sem size e sem cor</matcha-title>
+            <matcha-title size="1" type="bullet" color="orange">title bullet colorido size1</matcha-title>
+            <matcha-title size="1" type="bullet">title bullet size1</matcha-title>
+            <matcha-title size="2" type="bullet">title bullet size2</matcha-title>
+            <matcha-title size="3" type="bullet">title bullet size3</matcha-title>
+            <matcha-title size="4" type="bullet">title bullet size4</matcha-title>
+            <matcha-title size="5" type="bullet">title bullet size5</matcha-title>
+            <matcha-title size="6" type="bullet">title bullet size6</matcha-title>
+            <matcha-title size="7" type="bullet">title bullet size7</matcha-title>
+        `,
+    }),
+    name: 'Title Type Bullet',
+    parameters: { controls: { exclude: ['size', 'type', 'icon', 'iconClick', 'color', 'content'] } },
+};
+
+export const TitleTypeIcon: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-title type="icon" icon="home">title icon sem cor sem size</matcha-title>
+            <matcha-title type="icon" icon="home" color="primary">title icon colorido sem size</matcha-title>
+            <matcha-title size="1" type="icon" icon="action_sign_success" color="green">title icon colorido size1</matcha-title>
+            <matcha-title size="2" type="icon" icon="action_sign_error" color="red">title icon colorido size2</matcha-title>
+            <matcha-title size="3" type="icon" icon="action_sign_warning" color="yellow">title icon colorido size3</matcha-title>
+            <matcha-title size="4" type="icon" icon="chevron-left" (iconClick)="iconClicked('test')">title icon output sem cor size4</matcha-title>
+            <matcha-title size="5" type="icon" icon="home" color="primary">title icon colorido size5</matcha-title>
+            <matcha-title size="6" type="icon" icon="home" color="primary">title icon colorido size6</matcha-title>
+            <matcha-title size="7" type="icon" icon="home" color="primary">title icon colorido size7</matcha-title>
+        `,
+    }),
+    name: 'Title Type Icon',
+    parameters: { controls: { exclude: ['size', 'type', 'icon', 'iconClick', 'color', 'content'] } },
+};
+
+export const TitleTypeNone: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-title type="none">none sem size</matcha-title>
+            <matcha-title size="1" type="none">none size1</matcha-title>
+            <matcha-title size="2" type="none">none size2</matcha-title>
+            <matcha-title size="3" type="none">none size3</matcha-title>
+            <matcha-title size="4" type="none">none size4</matcha-title>
+            <matcha-title size="5" type="none">none size5</matcha-title>
+            <matcha-title size="6" type="none">none size6</matcha-title>
+            <matcha-title size="7" type="none">none size7</matcha-title>
+        `,
+    }),
+    name: 'Title Type None',
+    parameters: { controls: { exclude: ['size', 'type', 'icon', 'iconClick', 'color', 'content'] } },
+};

package/src/lib/matcha-toolbar/toolbar/toolbar.component.html

@@ -0,0 +1,54 @@
+<!-- HOW TO USE:
+<matcha-toolbar>
+    <matcha-title type="icon" icon="settings-out" (iconClick)="FUNÇÃO-AO-CLICAR-NO-ICONE-AQUI">
+        {{'FINANCIAL.CATEGORY.TITLE' | translate}}
+    </matcha-title>
+    <search-form toolbar-form-field (searchText)="searchText($event)"></search-form>
+    <matcha-toolbar-button icon="home-out" (buttonClick)="FUNÇÃO-AO-CLICAR-AQUI">
+        TEXTO DO BOTÃO AQUI
+    </matcha-toolbar-button>
+    <matcha-toolbar-content>
+        TEXTO DO BOTÃO AQUI
+    </matcha-toolbar-content>
+    <matcha-toolbar-main-button (buttonClick)="FUNÇÃO-AO-CLICAR-AQUI">
+        TEXTO DO BOTÃO AQUI
+    </matcha-toolbar-main-button>
+    QUALQUER OUTRA FUNCIONALIDADE AQUI
+</matcha-toolbar>
+-->
+<ng-template #toolbarMainButton>
+    <ng-content select="matcha-toolbar-main-button"></ng-content>
+</ng-template>
+
+<ng-template #toolbarCustomButton>
+    <ng-content select="matcha-toolbar-custom-button"></ng-content>
+</ng-template>
+<!-- CONTENT HEADER -->
+<div class="flex-column background-surface radius-8" [ngClass]="elevationClass">
+    <div class="flex-column flex-md-row flex-wrap p-16 flex-align-center flex-space-between h-auto min-h-40 flex-wrap">
+        <div class="w-100-p--force w-md-auto--force flex-space-between flex-wrap">
+            <div class="min-h-32 flex-center-center">
+                <ng-content select="matcha-title"></ng-content>
+            </div>
+            <ng-container *ngIf="isMobileScreen">
+                <ng-container *ngTemplateOutlet="toolbarMainButton"></ng-container>
+                <ng-container *ngTemplateOutlet="toolbarCustomButton"></ng-container>
+            </ng-container>
+        </div>
+        <div class="w-100-p--force w-md-auto--force flex-row flex-end gap-8">
+            <!-- ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->
+            <ng-content select="search-form"></ng-content>
+            <!-- /ISSO DEVE SER SUBSTITUIDO PELO matcha-input-search FOR IMPLEMENTADO -->
+            <div class="flex-row gap-8">
+                <ng-content select="matcha-toolbar-button"></ng-content>
+                <ng-content select="matcha-toolbar-content"></ng-content>
+                <ng-content></ng-content>
+                <ng-container *ngIf="!isMobileScreen">
+                    <ng-container *ngTemplateOutlet="toolbarMainButton"></ng-container>
+                    <ng-container *ngTemplateOutlet="toolbarCustomButton"></ng-container>
+                </ng-container>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- / CONTENT HEADER -->

package/src/lib/matcha-toolbar/toolbar/toolbar.component.ts

@@ -0,0 +1,43 @@
+import { Component, HostListener, OnInit, OnDestroy, Input } from '@angular/core';
+
+
+@Component({
+    selector: 'matcha-toolbar',
+    templateUrl: './toolbar.component.html',
+    styleUrls: ['./toolbar.component.scss'],
+    standalone: false
+})
+export class MatchaToolbarComponent implements OnInit, OnDestroy{
+
+  @Input() elevation: number = 1;
+
+  public isMobileScreen = false;
+
+  get elevationClass(): string {
+    return `elevation-z-${this.elevation}`;
+  }
+  
+  private readonly mobileBreakpoint = 1024;
+  private resizeTimeout: any;
+
+  ngOnInit(): void {
+    this.checkScreenWidth();
+  }
+
+  @HostListener('window:resize', [])
+  onResize(): void {
+    clearTimeout(this.resizeTimeout);
+    this.resizeTimeout = setTimeout(() => {
+      this.checkScreenWidth();
+    }, 20);
+  }
+
+  private checkScreenWidth(): void {
+    this.isMobileScreen = window.innerWidth < this.mobileBreakpoint;
+  }
+
+  ngOnDestroy(): void {
+    clearTimeout(this.resizeTimeout);
+  }
+}
+

package/src/lib/matcha-toolbar/toolbar-button/toolbar-button.component.html

@@ -0,0 +1,8 @@
+<!-- HOW TO USE:
+<matcha-toolbar-button (buttonClick)="FUNÇÃO-AO-CLICAR-AQUI" toolbar-button-tooltip="TOOLTIP-AQUI">
+    TEXTO DO BOTÃO AQUI
+</matcha-toolbar-button>
+-->
+<button matcha-button outline="true" size="small" color="grey" icon="true" class="mt-16 mt-md-0" (click)="emitButtonClick()">
+    <span [class]="classes"></span>
+</button>

package/src/lib/matcha-toolbar/toolbar-button/toolbar-button.component.ts

@@ -0,0 +1,21 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'matcha-toolbar-button',
+    templateUrl: './toolbar-button.component.html',
+    styleUrls: ['./toolbar-button.component.scss'],
+    standalone: false
+})
+export class MatchaToolbarButtonComponent{
+    @Input('icon') icon: string = '';
+    @Output() buttonClick = new EventEmitter();
+
+    public get classes(): string {
+        const activeClasses = `i-matcha-${this.icon}`;
+        return activeClasses;
+    }
+
+    emitButtonClick() {
+        this.buttonClick.emit();
+    }
+}

package/src/lib/matcha-toolbar/toolbar-content/toolbar-content.component.html

@@ -0,0 +1,8 @@
+<!-- HOW TO USE:
+<matcha-toolbar-content>
+    OUTROS CONTEUDOS CUSTOMIZADOS NA TOOLBAR
+</matcha-toolbar-content>
+-->
+<div class="d-flex flex-wrap gap-8 mt-16 mt-md-0">
+    <ng-content></ng-content>
+</div>

package/src/lib/matcha-toolbar/toolbar-content/toolbar-content.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'matcha-toolbar-content',
+    templateUrl: './toolbar-content.component.html',
+    styleUrls: ['./toolbar-content.component.scss'],
+    standalone: false
+})
+export class MatchaToolbarContentComponent{}

package/src/lib/matcha-toolbar/toolbar-custom-button/toolbar-custom-button.component.html

@@ -0,0 +1,6 @@
+<!-- HOW TO USE:
+<matcha-toolbar-custom-button>
+    Botão customizado aqui
+</matcha-toolbar-custom-button>
+-->
+<ng-content></ng-content>

package/src/lib/matcha-toolbar/toolbar-custom-button/toolbar-custom-button.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'matcha-toolbar-custom-button',
+    templateUrl: './toolbar-custom-button.component.html',
+    styleUrls: ['./toolbar-custom-button.component.scss'],
+    standalone: false
+})
+export class MatchaToolbarCustomButtonComponent {
+}

package/src/lib/matcha-toolbar/toolbar-main-button/toolbar-main-button.component.html

@@ -0,0 +1,11 @@
+<!-- HOW TO USE:
+<matcha-toolbar-main-button (buttonClick)="FUNÇÃO-AO-CLICAR-AQUI">
+    TEXTO DO BOTÃO AQUI
+</matcha-toolbar-main-button>
+-->
+<button matcha-button size="tiny" size-md="small" color="accent" (click)="emitButtonClick()">
+    <span class="i-matcha-action_plus i-size-sm ml--4"></span>
+    <span class="ml-8 fs-14">
+        <ng-content></ng-content>
+    </span>
+</button>

package/src/lib/matcha-toolbar/toolbar-main-button/toolbar-main-button.component.ts

@@ -0,0 +1,15 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+    selector: 'matcha-toolbar-main-button',
+    templateUrl: './toolbar-main-button.component.html',
+    styleUrls: ['./toolbar-main-button.component.scss'],
+    standalone: false
+})
+export class MatchaToolbarMainButtonComponent {
+    @Output() buttonClick = new EventEmitter();
+
+    emitButtonClick() {
+        this.buttonClick.emit();
+    }
+}

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

@@ -0,0 +1,27 @@
+export const toolbarArgtypes = {
+    icon: {
+        description: 'Ícone do botão. Define qual classe de ícone será aplicada (ex: "home", "settings", etc.).',
+        control: 'text',
+        defaultValue: '',
+        table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+        },
+    },
+    toolbarButtonTooltip: {
+        description: 'Texto exibido no tooltip do botão da toolbar.',
+        control: 'text',
+        defaultValue: '',
+        table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+        },
+    },
+    buttonClick: {
+        description: 'Evento disparado quando o botão é clicado.',
+        action: 'clicked', // Permite acompanhar a ação no painel de actions do Storybook
+        table: {
+        category: 'Events',
+        },
+    },
+};

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

@@ -0,0 +1,36 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import { MatchaButtonModule } from '../matcha-button/button.module';
+import { MatchaTitleModule } from '../matcha-title/title.module';
+import { MatchaTooltipModule } from '../matcha-tooltip/tooltip.module';
+import { MatchaToolbarComponent } from '../matcha-toolbar/toolbar/toolbar.component';
+import { MatchaToolbarButtonComponent } from "./toolbar-button/toolbar-button.component";
+import { MatchaToolbarContentComponent } from "./toolbar-content/toolbar-content.component";
+import { MatchaToolbarMainButtonComponent } from "./toolbar-main-button/toolbar-main-button.component";
+import { MatchaToolbarCustomButtonComponent } from "./toolbar-custom-button/toolbar-custom-button.component";
+
+
+@NgModule({
+  declarations: [
+    MatchaToolbarComponent,
+    MatchaToolbarButtonComponent,
+    MatchaToolbarContentComponent,
+    MatchaToolbarMainButtonComponent,
+    MatchaToolbarCustomButtonComponent
+  ],
+  imports: [
+    CommonModule,
+    MatchaButtonModule,
+    MatchaTitleModule,
+    MatchaTooltipModule
+  ],
+  exports: [
+    MatchaToolbarComponent,
+    MatchaToolbarButtonComponent,
+    MatchaToolbarContentComponent,
+    MatchaToolbarMainButtonComponent,
+    MatchaToolbarCustomButtonComponent,
+    MatchaTitleModule
+    ]
+})
+export class MatchaToolbarModule { }

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

@@ -0,0 +1,131 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { toolbarArgtypes } from './toolbar.argtypes';
+import { MatchaToolbarModule } from './toolbar.module';
+import { MatchaTooltipModule } from '../matcha-tooltip/tooltip.module';
+import { MatchaButtonModule } from '../matcha-button/button.module';
+import { MatchaDividerModule } from '../matcha-divider/divider.module';
+import { MatchaIconModule } from '../matcha-icon/icon.module';
+
+export default {
+    title: 'Components / Toolbar',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatchaToolbarModule, MatchaTooltipModule, MatchaButtonModule, MatchaIconModule, MatchaDividerModule],
+        }),
+    ],
+    tags: ['autodocs'],
+    args: {
+        icon: 'home-out',
+    },
+    argTypes: toolbarArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const ToolbarControls: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-toolbar>
+                <matcha-title type="icon" icon="settings-out" (iconClick)="buttonClick($event)">
+                    teste
+                </matcha-title>
+
+                <matcha-toolbar-button (buttonClick)="buttonClick($event)" icon="${args['icon']}">
+                </matcha-toolbar-button>
+
+                <matcha-toolbar-custom-button>
+                    <button matcha-button color="accent" size="small" outline="true">Button</button>
+                </matcha-toolbar-custom-button>
+            </matcha-toolbar>
+        `,
+
+    }),
+    name: 'Toolbar Controls',
+};
+
+export const ToolbarTitle: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-toolbar>
+                <matcha-title type="icon" icon="settings-out" (iconClick)="buttonClick($event)">teste</matcha-title>
+            </matcha-toolbar>
+        `,
+
+    }),
+    name: 'Toolbar Title',
+};
+
+/** Este é o principal */
+export const ToolbarButtons: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-toolbar>
+                <matcha-title type="icon" icon="settings-out" (iconClick)="buttonClick($event)">teste</matcha-title>
+                <matcha-toolbar-button (buttonClick)="buttonClick($event)" icon="${args['icon']}"></matcha-toolbar-button>
+                <matcha-toolbar-button (buttonClick)="buttonClick($event)" icon="${args['icon']}"></matcha-toolbar-button>
+                <matcha-toolbar-button (buttonClick)="buttonClick($event)" icon="${args['icon']}"></matcha-toolbar-button>
+            </matcha-toolbar>
+        `,
+
+    }),
+    name: 'Toolbar Buttons',
+};
+
+/** Este é o principal */
+export const ToolbarMainButton: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-toolbar>
+                <matcha-title type="icon" icon="settings-out" (iconClick)="buttonClick($event)">teste</matcha-title>
+                <matcha-toolbar-main-button (buttonClick)="buttonClick($event)">Main Button</matcha-toolbar-main-button>
+            </matcha-toolbar>
+        `,
+
+    }),
+    name: 'Toolbar Main Button',
+};
+
+
+/** Este é o principal */
+export const ToolbarCustomContent: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-toolbar>
+                <matcha-title type="icon" icon="settings-out" (iconClick)="buttonClick($event)">teste</matcha-title>
+                <matcha-toolbar-content>
+                    <button matcha-button size="small" outline="true" color="pink">Custom Content</button>
+                    <button matcha-button size="small" outline="true" color="cyan">Custom Content</button>
+                </matcha-toolbar-content>
+                <matcha-toolbar-content>
+                    <span class="color-blue lh-40 flex-center-center">Custom Content</span>
+                </matcha-toolbar-content>
+                <span class="color-red lh-40 flex-center-center">Outside of matcha-toolbar-content</span>
+            </matcha-toolbar>
+        `,
+
+    }),
+    name: 'Toolbar Custom Content',
+};
+

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

@@ -0,0 +1,58 @@
+export const tooltipArgtypes = {
+    tooltipText: {
+        description: 'Text to be displayed in the tooltip',
+        control: 'text',
+        defaultValue: '',
+        table: {
+            defaultValue: { summary: '' },
+        },
+    },
+    tooltipDisabled: {
+        description: 'Disable the tooltip',
+        control: 'boolean',
+        defaultValue: 'false',
+        table: {
+            defaultValue: { summary: 'false' },
+        },
+    },
+    preferAbove: {
+        description: 'Prefer displaying the tooltip above the element',
+        control: 'boolean',
+        defaultValue: 'false',
+        table: {
+            defaultValue: { summary: 'false' },
+        },
+    },
+    preferBelow: {
+        description: 'Prefer displaying the tooltip below the element',
+        control: 'boolean',
+        defaultValue: 'false',
+        table: {
+            defaultValue: { summary: 'false' },
+        },
+    },
+    preferLeft: {
+        description: 'Prefer displaying the tooltip to the left of the element',
+        control: 'boolean',
+        defaultValue: 'false',
+        table: {
+            defaultValue: { summary: 'false' },
+        },
+    },
+    preferRight: {
+        description: 'Prefer displaying the tooltip to the right of the element',
+        control: 'boolean',
+        defaultValue: 'false',
+        table: {
+            defaultValue: { summary: 'false' },
+        },
+    },
+    tooltipEnableClose: {
+        description: 'Enable close button on the tooltip (useful for mobile)',
+        control: 'boolean',
+        defaultValue: 'false',
+        table: {
+            defaultValue: { summary: 'false' },
+        },
+    },
+};