matcha-components 1.0.6 → 1.0.7

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

@@ -0,0 +1,171 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./button.stories";
+
+<Meta title="Atoms / Button / Documentação" />
+
+# Button
+
+> _button_ "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">Button Basic</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.ButtonOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <section>
+                    <div class="example-label">Basic</div>
+                    <div class="example-button-row">
+                        <button mat-button>Basic</button>
+                        <button mat-button color="primary">Primary</button>
+                        <button mat-button color="accent">Accent</button>
+                        <button mat-button color="warn">Warn</button>
+                        <button mat-button disabled>Disabled</button>
+                        <a 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 mat-raised-button>Basic</button>
+                        <button mat-raised-button color="primary">Primary</button>
+                        <button mat-raised-button color="accent">Accent</button>
+                        <button mat-raised-button color="warn">Warn</button>
+                        <button mat-raised-button disabled>Disabled</button>
+                        <a 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 mat-stroked-button>Basic</button>
+                        <button mat-stroked-button color="primary">Primary</button>
+                        <button mat-stroked-button color="accent">Accent</button>
+                        <button mat-stroked-button color="warn">Warn</button>
+                        <button mat-stroked-button disabled>Disabled</button>
+                        <a 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 mat-flat-button>Basic</button>
+                        <button mat-flat-button color="primary">Primary</button>
+                        <button mat-flat-button color="accent">Accent</button>
+                        <button mat-flat-button color="warn">Warn</button>
+                        <button mat-flat-button disabled>Disabled</button>
+                        <a 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">
+                            <mat-icon>more_vert</mat-icon>
+                        </button>
+                        <button mat-icon-button color="primary" aria-label="Example icon button with a home icon">
+                            <mat-icon>home</mat-icon>
+                        </button>
+                        <button mat-icon-button color="accent" aria-label="Example icon button with a menu icon">
+                            <mat-icon>menu</mat-icon>
+                        </button>
+                        <button mat-icon-button color="warn" aria-label="Example icon button with a heart icon">
+                            <mat-icon>favorite</mat-icon>
+                        </button>
+                        <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
+                            <mat-icon>open_in_new</mat-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">
+                            <mat-icon>delete</mat-icon>
+                            </button>
+                        </div>
+                        <div class="example-button-container">
+                            <button mat-fab color="accent" aria-label="Example icon button with a bookmark icon">
+                            <mat-icon>bookmark</mat-icon>
+                            </button>
+                        </div>
+                        <div class="example-button-container">
+                            <button mat-fab color="warn" aria-label="Example icon button with a home icon">
+                            <mat-icon>home</mat-icon>
+                            </button>
+                        </div>
+                        <div class="example-button-container">
+                            <button mat-fab disabled aria-label="Example icon button with a heart icon">
+                            <mat-icon>favorite</mat-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">
+                            <mat-icon>menu</mat-icon>
+                            </button>
+                        </div>
+                        <div class="example-button-container">
+                            <button mat-mini-fab color="accent" aria-label="Example icon button with a plus one icon">
+                            <mat-icon>plus_one</mat-icon>
+                            </button>
+                        </div>
+                        <div class="example-button-container">
+                            <button mat-mini-fab color="warn" aria-label="Example icon button with a filter list icon">
+                            <mat-icon>filter_list</mat-icon>
+                            </button>
+                        </div>
+                        <div class="example-button-container">
+                            <button mat-mini-fab disabled aria-label="Example icon button with a home icon">
+                            <mat-icon>home</mat-icon>
+                            </button>
+                        </div>
+                        </div>
+                    </div>
+                </section>
+
+
+                <button mat-stroked-button (click)="openButton(message.value, action.value)">Show button</button>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import { MatButton, MatButtonModule } from '@angular/material/button';`
+
+[Official documentation](https://https://material.angular.io/components/button/overview)
+
+<br />

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

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+
+import { MatchaButtonDirective } from './button.directive';
+
+@NgModule({
+    declarations: [MatchaButtonDirective],
+    imports: [],
+    exports: [MatchaButtonDirective],
+})
+export class MatchaButtonModule {}

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

@@ -0,0 +1,38 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { buttonArgtypes } from './button.argtypes';
+import { ButtonOverviewExample } from './button-overview-example.component';
+import { MatchaButtonModule } from './button.module';
+
+export default {
+    title: 'Atoms / Button',
+    component: ButtonOverviewExample,
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+
+        moduleMetadata({
+            imports: [CommonModule, MatchaButtonModule],
+        }),
+    ],
+    args: {
+        size: 'md',
+        color: 'accent',
+        pill: false,
+    },
+    argTypes: buttonArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+export const ButtonOverview: StoryObj<ButtonOverviewExample> = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+    }),
+    name: 'Button Overview',
+};

package/src/lib/matcha-button-toggle/button-toggle.argtype.ts

@@ -0,0 +1,115 @@
+export const buttonToggleArgtypes = {
+  multiple: {
+    description: 'Whether multiple button toggles can be selected',
+    control: 'boolean',
+    defaultValue: false,
+    table: {
+      defaultValue: { summary: false },
+    },
+  },
+  disabledGroup: {
+    description: 'Whether the button is disabled',
+    control: 'boolean',
+    defaultValue: false,
+    table: {
+      defaultValue: { summary: false },
+    },
+  },
+  // nameGroup: {
+  //   description: 'name attribute for the underlying input element',
+  //   control: 'text',
+  // },
+  // valueGroup: {
+  //   description: 'Value of the toggle group',
+  //   control: 'text',
+  // },
+  vertical: {
+    description: 'Whether the toggle group is vertical',
+    control: 'boolean',
+    defaultValue: false,
+    table: {
+      defaultValue: { summary: false },
+    },
+  },
+  // changeGroup: {
+  //   description: "Event emitted when the group's value changes",
+  //   action: 'change',
+  // },
+  // selected: {
+  //   description: 'Selected button toggles in the group',
+  //   control: null, // No control for objects
+  // },
+
+  appearance: {
+    description: 'The appearance style of the button',
+    control: 'select',
+    defaultValue: 'standard',
+    table: {
+      defaultValue: { summary: 'standard' },
+    },
+    options: ['standard', 'legacy'],
+  },
+  // ariaLabel: {
+  //   description:
+  //     'Attached to the aria-label attribute of the host element. In most cases, aria-labelledby will take precedence so this may be omitted.',
+  //   control: 'text',
+  // },
+  // ariaLabelledby: {
+  //   description:
+  //     'Users can specify the aria-labelledby attribute which will be forwarded to the input element',
+  //   control: 'text',
+  // },
+  checked: {
+    description: 'Whether the button is checked',
+    control: 'boolean',
+    defaultValue: false,
+    table: {
+      defaultValue: { summary: false },
+    },
+  },
+  disableRipple: {
+    description: 'Whether ripples are disabled',
+    control: 'boolean',
+    defaultValue: false,
+    table: {
+      defaultValue: { summary: false },
+    },
+  },
+  disabled: {
+    description: 'Whether the button is disabled',
+    control: 'boolean',
+    defaultValue: false,
+    table: {
+      defaultValue: { summary: false },
+    },
+  },
+  // id: {
+  //   description: 'The unique ID for this button toggle',
+  //   control: 'text',
+  // },
+  // name: {
+  //   description:
+  //     "HTML's 'name' attribute used to group radios for unique selection",
+  //   control: 'text',
+  // },
+  // value: {
+  //   description: 'MatButtonToggleGroup reads this to assign its own value',
+  //   control: 'text',
+  // },
+  // change: {
+  //   description: 'Event emitted when the group value changes',
+  //   action: 'change',
+  // },
+  // buttonId: {
+  //   description: 'Unique ID for the underlying button element',
+  //   control: 'text',
+  // },
+  buttonToggleGroup: {
+    description:
+      'The parent button toggle group (exclusive selection). Optional.',
+    control: null, // No control for objects
+  },
+  label: {
+    control: 'text',
+  },
+};

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

@@ -0,0 +1,13 @@
+import { Directive, ElementRef, Renderer2 } from '@angular/core';
+
+@Directive({
+    selector: '[matcha-button-toggle]',
+})
+export class MatchaButtonToggleDirective {
+    constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {
+        this._renderer.addClass(
+            this._elementRef.nativeElement,
+            'matcha-button-toggle'
+        );
+    }
+}

package/src/lib/matcha-button-toggle/button-toggle.mdx

@@ -0,0 +1,63 @@
+import { Story } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs';
+import * as ComponentStories from './button-toggle.stories';
+
+<Meta title="Atoms / Button Toggle / Documentação" />
+
+# Button Toggle
+
+> _button toggle_ permite a criação de botões de alternância com a opção de
+> seleção única ou múltipla.
+
+---
+
+### 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">Basic Button Toggle</span>
+      <div class="matcha-card background-bg">
+        <Story of={ComponentStories.BasicButtonToggle} />
+      </div>
+      <div class="d-flex-column">
+        ```html
+        <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
+          <mat-button-toggle value="bold">Bold</mat-button-toggle>
+          <mat-button-toggle value="italic">Italic</mat-button-toggle>
+          <mat-button-toggle value="underline">Underline</mat-button-toggle>
+        </mat-button-toggle-group>
+        ```
+      </div>
+    </div>
+  </div>
+
+  <div class="matcha-card background-surface d-flex-column gap-16">
+    <span class="h5">Multiple Selection</span>
+    <span class="font-size-16">
+      Para seleção de mais de uma opção simultaneamente.
+    </span>
+    <div class="matcha-card background-bg">
+      <Story of={ComponentStories.MultipleButtonToggle} />
+    </div>
+    <div class="d-flex-column">
+      ```html
+      <mat-button-toggle-group name="fontStyle" aria-label="Font Style" multiple>
+        <mat-button-toggle value="bold">Bold</mat-button-toggle>
+        <mat-button-toggle value="italic">Italic</mat-button-toggle>
+        <mat-button-toggle value="underline">Underline</mat-button-toggle>
+      </mat-button-toggle-group>
+      ```
+    </div>
+  </div>
+</div>
+
+<br />
+
+### Installation
+
+`import {MatButtonToggleModule} from '@angular/material/button-toggle';`
+
+[Official documentation](https://material.angular.io/components/button-toggle/overview)
+
+<br />

package/src/lib/matcha-button-toggle/button-toggle.stories.ts

@@ -0,0 +1,64 @@
+import { StoryObj, Meta, moduleMetadata } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { buttonToggleArgtypes } from './button-toggle.argtype';
+import { MatchaButtonToggleDirective } from './button-toggle.directive';
+import { config } from '@storybook/addon-designs';
+
+export default {
+  title: 'Atoms / Button Toggle ',
+  decorators: [
+    moduleMetadata({
+      imports: [MatButtonToggleModule],
+      declarations: [MatchaButtonToggleDirective],
+    }),
+  ],
+  args: {
+    appearance: 'standard',
+    label: 'Bold',
+    multiple: true,
+    vertical: false,
+    checked: false,
+    disabled: false,
+    disabledGroup: false,
+    disableRipple: false,
+  },
+  argTypes: buttonToggleArgtypes,
+  parameters: {
+    controls: {
+      expanded: false,
+    },
+    design: config({
+      type: 'figma',
+      url: 'https://www.figma.com/file/Enji6Zk0UvtHyt8fdOPdBx/DS-PAINEL-(Copy)?type=design&mode=design&t=IKqH3YB1sj5qgDHJ-1',
+    }),
+  },
+} as Meta;
+
+export const BasicButtonToggle: StoryObj = {
+  render: (args) => ({
+    props: args,
+    template: `
+            <mat-button-toggle-group [appearance]="appearance" [disabled]="disabledGroup" [vertical]="vertical" name="fontStyle" aria-label="Font Style" [multiple]="multiple">
+                <mat-button-toggle value="bold" [disabled]="disabled" [disableRipple]="disableRipple" [checked]="checked" >{{label}}</mat-button-toggle>
+                <mat-button-toggle value="italic">Italic</mat-button-toggle>
+                <mat-button-toggle value="underline">Underline</mat-button-toggle>
+            </mat-button-toggle-group>      
+        `,
+  }),
+  name: 'Basic Button Toggle',
+};
+
+export const MultipleButtonToggle: StoryObj = {
+  render: (args) => ({
+    props: args,
+    template: `
+          <mat-button-toggle-group [appearance]="appearance" [disabled]="disabledGroup" [vertical]="vertical" name="fontStyle" aria-label="Font Style" [multiple]="multiple">
+            <mat-button-toggle value="bold" [disabled]="disabled" [disableRipple]="disableRipple" [checked]="checked" >{{label}}</mat-button-toggle>
+            <mat-button-toggle value="italic">Italic</mat-button-toggle>
+            <mat-button-toggle value="underline">Underline</mat-button-toggle>
+          </mat-button-toggle-group>     
+        `,
+  }),
+  name: 'Multiple Button Toggle',
+};

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

@@ -9,7 +9,6 @@ export class MatchaButtonToggleDirective {
         private _elementRef: ElementRef,
         private _renderer: Renderer2
     ) {
-        //this._elementRef.nativeElement.style.backgroundColor = 'grey';
         this._renderer.addClass(this._elementRef.nativeElement,'matcha-button-toggle')
     }
 

package/src/lib/matcha-card/card-argtype.ts

@@ -0,0 +1,54 @@
+export const cardArgtypes = {
+    elevation: {
+        description: 'Elevation level of the card',
+        defaultValue: 0,
+        table: {
+            type: { summary: 'range' },
+            defaultValue: { summary: 0 },
+        },
+        control: {
+            type: 'range',
+            min: 0,
+            max: 24,
+            step: 1,
+        },
+    },
+    blockquote: {
+        description: 'Position of the blockquote bar',
+        control: 'select',
+        defaultValue: '',
+        table: {
+            defaultValue: { summary: '' },
+        },
+        options: ['left', 'right', 'none'],
+    },
+    blockquoteColor: {
+        description: 'Theme color palette for the blockquote bar',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['fg', 'accent', 'primary', 'warn', 'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', null],
+    },
+    color: {
+        description: 'Theme color palette for the card background',
+        control: 'select',
+        defaultValue: 'surface',
+        table: {
+            defaultValue: { summary: 'surface' },
+        },
+        options: ['bg', 'fg', 'surface', 'accent', 'primary', 'warn', 'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange'],
+    },
+    alpha: {
+        description: 'Opacity of the card color',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            defaultValue: { summary: true },
+        },
+    },
+    label: {
+        control: 'text',
+    },
+};

package/src/lib/matcha-card/card-header.html

@@ -0,0 +1,10 @@
+<ng-content select="[mat-card-avatar], [matCardAvatar]"></ng-content>
+<div class="title text-bold">
+    <span class="title-bullet matcha-background-accent h-24 w-8"></span>
+    <ng-content
+        select="mat-card-title, mat-card-subtitle,
+      [mat-card-title], [mat-card-subtitle],
+      [matCardTitle], [matCardSubtitle]"
+    ></ng-content>
+</div>
+<ng-content></ng-content>

package/src/lib/matcha-card/card-title-group.html

@@ -0,0 +1,12 @@
+<div>
+  <ng-content
+      select="mat-card-title, mat-card-subtitle,
+      [mat-card-title], [mat-card-subtitle],
+      [matCardTitle], [matCardSubtitle]"></ng-content>
+</div>
+<ng-content select="[mat-card-image], [matCardImage],
+                    [mat-card-sm-image], [matCardImageSmall],
+                    [mat-card-md-image], [matCardImageMedium],
+                    [mat-card-lg-image], [matCardImageLarge],
+                    [mat-card-xl-image], [matCardImageXLarge]"></ng-content>
+<ng-content></ng-content>

package/src/lib/matcha-card/card.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatchaCardComponent } from './card.component';
+
+describe('MatchaCardComponent', () => {
+    let component: MatchaCardComponent;
+    let fixture: ComponentFixture<MatchaCardComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [MatchaCardComponent],
+        });
+        fixture = TestBed.createComponent(MatchaCardComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,47 @@
+import { ChangeDetectionStrategy, Component, Directive, Inject, InjectionToken, Input, Optional, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'matcha-card',
+    templateUrl: './card.component.html',
+    styleUrls: ['./card.component.scss'],
+})
+export class MatchaCardComponent {
+    @Input()
+    elevation: number | string = 0;
+
+    @Input()
+    blockquote: 'left' | 'right' | 'none' | null = 'none';
+
+    @Input()
+    color: 'bg' | 'fg' | 'surface' | 'accent' | 'primary' | 'warn' | 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' | string = 'surface';
+
+    @Input()
+    blockquoteColor: 'fg' | 'accent' | 'primary' | 'warn' | 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' | null = null;
+
+    @Input()
+    class: string = '';
+
+    @Input()
+    alpha: boolean = false;
+
+    @Input()
+    loading: boolean = false;
+
+    public get classes(): string {
+        const elevation = `elevation-z-${this.elevation}`;
+        let blockquoteposition = this.blockquote === 'right' || 'left' ? `matcha-card-border-${this.blockquote}` : '';
+        let backgroundColor = '';
+        let blockquoteColor = '';
+
+        if (this.color === 'bg' || this.color === 'surface') {
+            backgroundColor = `background-${this.color}${this.alpha ? '-alpha' : ''}`;
+            blockquoteColor = this.blockquoteColor ? `border-color-${this.blockquoteColor}` : '';
+        } else {
+            backgroundColor = `background-${this.color}${this.alpha ? '-alpha' : ''} border-color-${this.color}`;
+            this.alpha ? (blockquoteposition = this.blockquote === 'right' || 'left' ? `matcha-card-border-${this.blockquote}` : '') : (blockquoteposition = '');
+        }
+
+        const activeClasses = `matcha-card ${elevation} ${blockquoteposition} ${blockquoteColor} ${backgroundColor} ${this.loading ? 'loading' : ''} ${this.class}`;
+        return activeClasses;
+    }
+}