matcha-components 20.12.0 → 20.15.0

package/src/documentation/tokens/elevations.mdx

@@ -0,0 +1,50 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Tokens / Elevation" />
+
+# Elevation
+
+Os tokens de elevação definem os valores padrão usados para transições de elevação, sombras e opacidades.
+
+### Atributos
+<div class="w-100-p">
+    <table class="w-100-p">
+        <thead>
+            <tr>
+                <th>Token</th>
+                <th>Propriedade</th>
+                <th>Valor</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>$elevation-transition-duration</td>
+                <td>transition-duration</td>
+                <td>280ms</td>
+            </tr>
+            <tr>
+                <td>$elevation-transition-timing-function</td>
+                <td>transition-timing-function</td>
+                <td>cubic-bezier(0.4, 0, 0.2, 1)</td>
+            </tr>
+            <tr>
+                <td>$elevation-color</td>
+                <td>color</td>
+                <td>black</td>
+            </tr>
+            <tr>
+                <td>$elevation-opacity</td>
+                <td>opacity</td>
+                <td>1</td>
+            </tr>
+            <tr>
+                <td>$_elevation-prefix</td>
+                <td>prefix</td>
+                <td>"elevation-z-"</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+### Instalação
+Não é necessario instalar nenhuma dependência para utilizar os tokens. Os tokens são utilizados internamente em todas as bibliotecas do Matcha Design System. Portanto quando você importar qualquer biblioteca do Matcha Design System, você já estará utilizando os tokens dessa documentação.

package/src/documentation/tokens/sizes.mdx

@@ -0,0 +1,150 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Tokens / Spacing" />
+
+# Spacing
+
+Os tokens de espaçamento definem os valores padrão usados para margens, preenchimentos e espaçamentos internos.
+
+### Atributos
+<div class="w-100-p">
+    <table class="w-100-p">
+        <thead>
+            <tr>
+                <th>Token</th>
+                <th>Propriedade</th>
+                <th>Valor</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>$spacing-inset-s</td>
+                <td>padding</td>
+                <td>32px 32px</td>
+            </tr>
+            <tr>
+                <td>$spacing-inset-m</td>
+                <td>padding</td>
+                <td>40px 40px</td>
+            </tr>
+            <tr>
+                <td>$spacing-inset-big</td>
+                <td>padding</td>
+                <td>48px 48px</td>
+            </tr>
+            <tr>
+                <td>$spacing-inset-bgg</td>
+                <td>padding</td>
+                <td>56px 56px</td>
+            </tr>
+            <tr>
+                <td>$spacing-inset-tll</td>
+                <td>padding</td>
+                <td>64px 64px</td>
+            </tr>
+            <tr>
+                <td>$spacing-inset-tlr</td>
+                <td>padding</td>
+                <td>72px 72px</td>
+            </tr>
+            <tr>
+                <td>$spacing-inset-lg</td>
+                <td>padding</td>
+                <td>80px 80px</td>
+            </tr>
+            <tr>
+                <td>$spacing-inset-xl</td>
+                <td>padding</td>
+                <td>88px 88px</td>
+            </tr>
+            <tr>
+                <td>$spacing-inset-xxl</td>
+                <td>padding</td>
+                <td>96px 96px</td>
+            </tr>
+            <tr>
+                <td>$spacing-inset-lgr</td>
+                <td>padding</td>
+                <td>104px 104px</td>
+            </tr>
+            <tr>
+                <td>$spacing-inset-lgs</td>
+                <td>padding</td>
+                <td>112px 112px</td>
+            </tr>
+            <tr>
+                <td>$spacing-squish-min</td>
+                <td>padding</td>
+                <td>8px 16px</td>
+            </tr>
+            <tr>
+                <td>$spacing-squish-xxs</td>
+                <td>padding</td>
+                <td>16px 24px</td>
+            </tr>
+            <tr>
+                <td>$spacing-squish-xs</td>
+                <td>padding</td>
+                <td>24px 32px</td>
+            </tr>
+            <tr>
+                <td>$spacing-squish-s</td>
+                <td>padding</td>
+                <td>32px 40px</td>
+            </tr>
+            <tr>
+                <td>$spacing-squish-m</td>
+                <td>padding</td>
+                <td>40px 48px</td>
+            </tr>
+            <tr>
+                <td>$spacing-squish-big</td>
+                <td>padding</td>
+                <td>48px 56px</td>
+            </tr>
+            <tr>
+                <td>$spacing-squish-bgg</td>
+                <td>padding</td>
+                <td>56px 64px</td>
+            </tr>
+            <tr>
+                <td>$spacing-squish-tll</td>
+                <td>padding</td>
+                <td>64px 72px</td>
+            </tr>
+            <tr>
+                <td>$spacing-squish-tlr</td>
+                <td>padding</td>
+                <td>72px 80px</td>
+            </tr>
+            <tr>
+                <td>$spacing-squish-lg</td>
+                <td>padding</td>
+                <td>80px 88px</td>
+            </tr>
+            <tr>
+                <td>$spacing-squish-xl</td>
+                <td>padding</td>
+                <td>88px 96px</td>
+            </tr>
+            <tr>
+                <td>$spacing-squish-xxl</td>
+                <td>padding</td>
+                <td>96px 104px</td>
+            </tr>
+            <tr>
+                <td>$spacing-squish-lgr</td>
+                <td>padding</td>
+                <td>104px 112px</td>
+            </tr>
+            <tr>
+                <td>$spacing-squish-lgs</td>
+                <td>padding</td>
+                <td>112px 120px</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+### Instalação
+Não é necessario instalar nenhuma dependência para utilizar os tokens. Os tokens são utilizados internamente em todas as bibliotecas do Matcha Design System. Portanto quando você importar qualquer biblioteca do Matcha Design System, você já estará utilizando os tokens dessa documentação.

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

@@ -0,0 +1 @@
+<ng-content></ng-content>

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

@@ -0,0 +1,72 @@
+import { Component, Input, ContentChildren, QueryList, AfterContentInit, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { MatchaAccordionItemComponent } from '../accordion-item/accordion-item.component';
+import { Subscription } from 'rxjs';
+
+
+@Component({
+    selector: 'matcha-accordion',
+    templateUrl: './accordion.component.html',
+    styleUrl: './accordion.component.scss',
+    standalone: false
+})
+export class MatchaAccordionComponent implements AfterContentInit, OnDestroy {
+    private _multiple = false;
+    @Input()
+    set multiple(value: boolean | string) {
+        // Converte 'false' (string) ou false (boolean) para false, e qualquer outro valor para true.
+        this._multiple = value != null && `${value}` !== 'false';
+    }
+    get multiple(): boolean {
+        return this._multiple;
+    }
+
+    @Output('openedChange') openedChange = new EventEmitter<boolean>();
+
+    @ContentChildren(MatchaAccordionItemComponent) items!: QueryList<MatchaAccordionItemComponent>;
+    private subscriptions: Subscription[] = [];
+
+    ngAfterContentInit() {
+        this.setupItems();
+
+        // Escuta mudanças na lista de itens (para casos dinâmicos)
+        this.items.changes.subscribe(() => {
+            this.setupItems();
+        });
+    }
+
+    ngOnDestroy() {
+        this.subscriptions.forEach(sub => sub.unsubscribe());
+    }
+
+    private setupItems() {
+        // Limpa subscriptions anteriores
+        this.subscriptions.forEach(sub => sub.unsubscribe());
+        this.subscriptions = [];
+
+        this.items.forEach(item => {
+            const toggleSub = item.toggleRequested.subscribe(() => {
+                this.toggleItem(item);
+            });
+            this.subscriptions.push(toggleSub);
+
+            const openedSub = item.opened.subscribe((isOpen: boolean) => {
+                this.openedChange.emit(isOpen);
+            });
+            this.subscriptions.push(openedSub);
+        });
+    }
+
+    toggleItem(selectedItem: MatchaAccordionItemComponent) {
+        // Toggle o item selecionado
+        selectedItem.isOpen = !selectedItem.isOpen;
+
+        // Se não permite múltiplos itens abertos e o item foi aberto, fecha os demais
+        if (!this.multiple && selectedItem.isOpen) {
+            this.items.forEach(item => {
+                if (item !== selectedItem) {
+                    item.isOpen = false;
+                }
+            });
+        }
+    }
+}

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

@@ -0,0 +1 @@
+<ng-content></ng-content>

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'matcha-accordion-content',
+  templateUrl: './accordion-content.component.html',
+  styleUrl: './accordion-content.component.scss',
+  standalone: false
+})
+export class MatchaAccordionContentComponent {
+
+}

package/src/lib/matcha-accordion/accordion-header/accordion-header.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/src/lib/matcha-accordion/accordion-header/accordion-header.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'matcha-accordion-header',
+  templateUrl: './accordion-header.component.html',
+  styleUrl: './accordion-header.component.scss',
+  standalone: false
+})
+export class MatchaAccordionHeaderComponent {
+
+}

package/src/lib/matcha-accordion/accordion-item/accordion-item.component.html

@@ -0,0 +1,13 @@
+<div class="accordion-item flex-column overflow-hidden">
+    <div class="accordion-header d-flex">
+        <div class="d-flex accordion-header-wrapper"
+             [class.cursor-pointer]="clickableHeader"
+             (click)="clickableHeader ? toggleAccordion() : null">
+            <ng-content select="matcha-accordion-header"></ng-content>
+        </div>
+    </div>
+    <div class="accordion-content overflow-hidden" [@expandCollapse]="isOpen ? '*' : 'void'">
+        <ng-content select="matcha-accordion-content"></ng-content>
+        <ng-content></ng-content>
+    </div>
+</div>

package/src/lib/matcha-accordion/accordion-item/accordion-item.component.ts

@@ -0,0 +1,63 @@
+import { Component, EventEmitter, Input, Output, OnInit, HostBinding, OnChanges, SimpleChanges } from '@angular/core';
+import { createAnimations } from '../../matcha-animations/animations';
+
+@Component({
+    selector: 'matcha-accordion-item',
+    templateUrl: './accordion-item.component.html',
+    styleUrl: './accordion-item.component.scss',
+    standalone: false,
+    animations: [...createAnimations]
+})
+export class MatchaAccordionItemComponent implements OnInit, OnChanges {
+    private _stretch: boolean = false;
+    private _isOpen: boolean = false;
+
+    @Input()
+    set stretch(value: boolean | string) {
+        this._stretch = value != null && `${value}` !== 'false';
+    }
+    get stretch(): boolean {
+        return this._stretch;
+    }
+    @HostBinding('class.stretch') get stretchClass() {
+        return this._stretch;
+    }
+
+    private _clickableHeader = true;
+    @Input()
+    set clickableHeader(value: boolean | string) {
+        this._clickableHeader = value != null && `${value}` !== 'false';
+    }
+    get clickableHeader(): boolean {
+        return this._clickableHeader;
+    }
+
+    @Input()
+    set isOpen(value: boolean | string) {
+        this._isOpen = value != null && `${value}` !== 'false';
+    }
+    get isOpen(): boolean {
+        return this._isOpen;
+    }
+    @HostBinding('class.is-open') get isOpenClass() {
+        return this._isOpen;
+    }
+
+    @Output() opened = new EventEmitter<boolean>();
+    @Output() toggleRequested = new EventEmitter<void>();
+
+    ngOnInit() {
+        this.opened.emit(this.isOpen);
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['isOpen']) {
+            this.opened.emit(this.isOpen);
+        }
+    }
+
+    toggleAccordion() {
+        // Emite evento para o accordion pai controlar o estado
+        this.toggleRequested.emit();
+    }
+}

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

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaAccordionComponent } from './accordion/accordion.component';
+import { MatchaAccordionItemComponent } from './accordion-item/accordion-item.component';
+import { MatchaAccordionHeaderComponent } from './accordion-header/accordion-header.component';
+import { MatchaAccordionContentComponent } from './accordion-content/accordion-content.component';
+
+import { MatchaIconModule } from '../matcha-icon/icon.module';
+import { MatchaTitleModule } from '../matcha-title/title.module';
+import { MatchaDividerModule } from '../matcha-divider/divider.module';
+import { MatchaTooltipModule } from '../matcha-tooltip/tooltip.module';
+import { MatchaButtonModule } from '../matcha-button/button.module';
+
+
+@NgModule({
+    declarations: [
+        MatchaAccordionComponent,
+        MatchaAccordionItemComponent,
+        MatchaAccordionHeaderComponent,
+        MatchaAccordionContentComponent
+    ],
+    imports: [
+        CommonModule,
+        MatchaIconModule,
+        MatchaTitleModule,
+        MatchaDividerModule,
+        MatchaTooltipModule,
+        MatchaButtonModule
+    ],
+    exports: [
+        MatchaAccordionComponent,
+        MatchaAccordionItemComponent,
+        MatchaAccordionHeaderComponent,
+        MatchaAccordionContentComponent
+    ]
+})
+export class MatchaAccordionModule { }

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

@@ -0,0 +1,108 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { MatchaAccordionModule } from './accordion.module';
+import { MatchaTooltipModule } from '../matcha-tooltip/tooltip.module';
+import { MatchaTitleModule } from '../matcha-title/title.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 / Accordion',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatchaTitleModule, MatchaAccordionModule, MatchaTooltipModule, MatchaButtonModule, MatchaIconModule, MatchaDividerModule],
+        }),
+    ],
+    tags: ['autodocs'],
+    args: {
+        multiple: false,
+        stretch: false,
+        isOpen: false,
+
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const AccordionControls: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-accordion ${args['multiple'] ? `multiple="${args['multiple']}"` : ''} ${args['stretch'] ? `stretch="${args['stretch']}"` : ''} class="flex-column gap-24">
+                <matcha-accordion-item ${args['isOpen'] ? `isOpen="${args['isOpen']}"` : ''}>
+                    <matcha-accordion-header>
+                        <button matcha-button size="medium" outline="true" color="primary">Abre o item 1</button>
+                    </matcha-accordion-header>
+                    <matcha-accordion-content>
+                        <span class="fs-64">😀</span>
+                    </matcha-accordion-content>
+                </matcha-accordion-item>
+
+                <matcha-accordion-item ${args['isOpen'] ? `isOpen="${args['isOpen']}"` : ''}>
+                    <matcha-accordion-header>
+                        <button matcha-button size="medium" outline="true" color="primary">Abre o item 2</button>
+                    </matcha-accordion-header>
+                    <matcha-accordion-content>
+                        <span class="fs-64">😛</span>
+                    </matcha-accordion-content>
+                </matcha-accordion-item>
+            </matcha-accordion>
+        `,
+
+    }),
+    name: 'Accordion Controls',
+};
+
+export const AccordionStretch: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            isAccordionOpened: false,
+            openedChange: function(isOpen: boolean) {
+                this['isAccordionOpened'] = isOpen;
+            }
+        },
+        template: `
+            <div class="matcha-card pt-0 pb-0">
+                <matcha-accordion stretch>
+                    <matcha-accordion-item (opened)="openedChange($event)" isOpen="true">
+                        <matcha-accordion-header>
+                            <div class="d-flex flex-space-between py-16 cursor-pointer">
+                                <matcha-title color="accent" size="4" type="pill">
+                                    Lorem ipsum
+                                </matcha-title>
+                                <span class="d-flex flex-center-center gap-8">
+                                    <span class="letter-spacing-relaxed text-uppercase color-grey fw-900 fs-12 lh-14">
+                                        {{ isAccordionOpened ? 'Ver menos' : 'Ver mais' }}
+                                    </span>
+                                    <span class="i-size-sm color-grey {{ isAccordionOpened ? 'i-matcha-chevron-up' : 'i-matcha-chevron-down'}}"></span>
+                                </span>
+                            </div>
+                        </matcha-accordion-header>
+                        <matcha-accordion-content>
+                            <matcha-divider></matcha-divider>
+                            <div class="flex-column py-16">
+                                <matcha-title color="fg" size="3" type="bullet">Lorem ipsum dolor sit amet <span class="color-grey fw-500 fs-16 lh-20">(Opcional)</span></matcha-title>
+
+                                <p class="color-grey fw-400 fs-16 lh-20"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
+                            </div>
+
+                        </matcha-accordion-content>
+                    </matcha-accordion-item>
+                </matcha-accordion>
+            </div>
+        `,
+
+    }),
+    name: 'Accordion Stretch',
+};
+