matcha-components 1.0.5 → 1.0.7

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.html

@@ -0,0 +1,3 @@
+<div [class]="classes">
+    <ng-content></ng-content>
+</div>

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;
+    }
+}

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

@@ -0,0 +1,43 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./card.stories";
+
+<Meta title="Atoms / Card / Documentação" />
+
+# Card
+
+> _card_ "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">Card overview</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.CardOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <matcha-card blockquoteColor="foreground" elevation="1" blockquote="left" backgroundColor="surface" alpha="false">
+                    Card Content
+                </matcha-card>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import { MatchaCardModule } from 'matcha-components';`
+
+<br />

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

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaCardComponent } from './card.component';
+
+@NgModule({
+    declarations: [MatchaCardComponent],
+    imports: [CommonModule],
+    exports: [MatchaCardComponent],
+})
+export class MatchaCardModule {}

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

@@ -0,0 +1,92 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { MatchaCardModule } from './card.module';
+import { cardArgtypes } from './card-argtype';
+
+/** Este é o card principal */
+export default {
+    title: 'Atoms/Card',
+    decorators: [
+        moduleMetadata({
+            imports: [MatchaCardModule],
+        }),
+    ],
+    // tags: ['autodocs'],
+    args: {
+        elevation: 1,
+        blockquote: 'left',
+        blockquoteColor: 'accent',
+        color: 'surface',
+        label: 'Card Content',
+    },
+    argTypes: cardArgtypes,
+    parameters: {
+        docs: {
+            // canvas: { sourceState: 'shown' },
+            source: { type: 'code' },
+        },
+        controls: {
+            expanded: true,
+            exclude: ['mode'],
+        },
+        componentSubtitle: 'Displays an image that represents a user or organization',
+    },
+} as Meta;
+
+/** Este é o card principal */
+export const CardOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <div class="d-flex-column gap-16">
+            <matcha-card [blockquoteColor]="blockquoteColor" [elevation]="elevation" [blockquote]="blockquote" [color]="color" [alpha]="alpha">{{ label }}</matcha-card>
+        <div>
+        `,
+    }),
+    name: 'Card Overview',
+};
+
+export const WithNestedUsage: StoryObj = {
+    render: () => ({
+        props: {
+            elevation: 10,
+            blockquote: 'left',
+            blockquoteColor: 'foreground',
+            color: 'surface',
+            label: 'Card Content',
+        },
+        template: `
+        <div class="d-flex-column gap-16">
+            <matcha-card elevation="1" blockquote="left" color="surface">
+                Surface Color
+                <matcha-card elevation="1" blockquote="right" color="bg" class="p-0">
+                    Background color
+                    <matcha-card elevation="1" blockquote="left" color="surface" alpha="true">
+                        Surface Alpha
+                        <matcha-card elevation="1" blockquote="right" color="bg" alpha="true">Background Alpha</matcha-card>
+                    </matcha-card>
+                </matcha-card>
+            </matcha-card>
+        <div>
+        `,
+        inlineStory: true,
+    }),
+    name: 'Nested',
+};
+
+export const WithColoredUsage: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            elevation: 1,
+            blockquote: 'left',
+            blockquoteColor: 'yellow',
+            color: 'yellow',
+        },
+        template: `
+            <matcha-card [blockquoteColor]="blockquoteColor" [elevation]="elevation" [blockquote]="blockquote" [color]="color">{{ label }}</matcha-card>
+        `,
+    }),
+    name: 'Raised',
+};

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

@@ -0,0 +1,79 @@
+export const checkboxArgtypes = {
+    disabled: {
+        description: 'Whether the checkbox is disabled',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            defaultValue: { summary: true },
+        },
+    },
+    checked: {
+        description: 'Whether the checkbox is checked',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            defaultValue: { summary: true },
+        },
+    },
+    required: {
+        description: 'Whether the checkbox is required',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            defaultValue: { summary: true },
+        },
+    },
+    indeterminate: {
+        description: 'Whether the checkbox is indeterminate',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            defaultValue: { summary: true },
+        },
+    },
+    disableRipple: {
+        description: 'Whether the checkbox is disableRipple',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            defaultValue: { summary: true },
+        },
+    },
+    color: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'accent',
+        table: {
+            defaultValue: { summary: 'accent' },
+        },
+        options: ['primary', 'accent', 'warn'],
+    },
+    labelPosition: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'after',
+        table: {
+            defaultValue: { summary: 'after' },
+        },
+        options: ['before', 'after'],
+    },
+    value: {
+        description: 'Value of the checkbox',
+        defaultValue: 'Option Selected',
+        table: {
+            defaultValue: { summary: 'Option Selected' },
+        },
+        control: 'text',
+    },
+    change: {
+        action: 'change',
+    },
+    label: {
+        description: 'Value of the checkbox',
+        defaultValue: 'Check-me',
+        table: {
+            defaultValue: { summary: 'Check-me' },
+        },
+        control: 'text',
+    },
+};

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

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

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

@@ -0,0 +1,76 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./checkbox.stories";
+
+<Meta title="Atoms / Checkbox / Documentação" />
+
+# Checkbox
+
+> _checkbox_ é um componente atômico usado para permitir que os usuários selecionem várias opções independentes, ou seja, podem marcar ou desmarcar várias caixas de seleção ao mesmo tempo.
+
+---
+
+### 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">Checkbox - Colors</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.CheckboxColors} />
+            </div>
+            <div class="d-flex-column">
+                ```html
+                <mat-checkbox checked="true" color="primary">primary</mat-checkbox>
+                <mat-checkbox checked="true" color="accent">accent</mat-checkbox>
+                <mat-checkbox checked="true" color="warn">warn</mat-checkbox>
+                ```
+            </div>
+        </div>
+    </div>
+
+    <div class="grid-md-2 gap-16">
+        <div class="matcha-card background-surface d-flex-column gap-16">
+            <span class="h5">Checkbox - Label Position</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.CheckboxLabelPosition} />
+            </div>
+            <div class="d-flex-column">
+                ```html
+                <mat-checkbox checked='true' labelPosition="before">
+                    Check me
+                </mat-checkbox>
+                <mat-checkbox checked='true' labelPosition="after">
+                    Check me
+                </mat-checkbox>
+                ```
+            </div>
+        </div>
+
+        <div class="matcha-card background-surface d-flex-column gap-16">
+            <span class="h5">Checkbox - Disabled</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.CheckboxDisabled} />
+            </div>
+            <div class="d-flex-column">
+                ```html
+                <mat-checkbox disabled='false' checked='true'>
+                    Check me
+                </mat-checkbox>
+                <mat-checkbox disabled='false' checked='false'>
+                    Check me
+                </mat-checkbox>
+                ```
+            </div>
+        </div>
+    </div>
+</div>
+
+<br />
+
+### Installation
+
+`import {MatCheckboxModule} from '@angular/material/checkbox';`
+
+[Official documentation](https://material.angular.io/components/checkbox/overview)
+
+<br />

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

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { MatchaCheckboxDirective } from './checkbox.directive';
+
+@NgModule({
+    declarations: [MatchaCheckboxDirective],
+    imports: [],
+    exports: [MatchaCheckboxDirective],
+})
+export class MatchaCheckboxModule {}

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

@@ -0,0 +1,161 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { action } from '@storybook/addon-actions';
+import { checkboxArgtypes } from './checkbox.argtype';
+import { MatchaCheckboxDirective } from './checkbox.directive';
+
+import { config } from '@storybook/addon-designs';
+
+export default {
+    title: 'Atoms / Checkbox',
+    decorators: [
+        moduleMetadata({
+            imports: [MatCheckboxModule],
+            declarations: [MatchaCheckboxDirective],
+        }),
+    ],
+    args: {
+        disabled: false,
+        label: 'Check me',
+        change: action('change'),
+        checked: true,
+        required: false,
+        indeterminate: false,
+        disableRipple: false,
+        color: 'accent',
+        labelPosition: 'after',
+        value: 'Option Selected',
+    },
+    argTypes: checkboxArgtypes,
+    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 CheckboxDefault: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+            <div class="d-flex gap-16">
+                <mat-checkbox matcha-checkbox [disabled]="disabled" [checked]='checked' [color]="color" [labelPosition]="labelPosition" [value]="label" (change)="change($event)">
+                    {{label}}
+                </mat-checkbox>
+            </div>
+        `,
+    }),
+    name: 'Checkbox Default',
+};
+
+export const CheckboxColors: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+        <div class="d-flex gap-16">
+            <mat-checkbox matcha-checkbox [checked]='checked' color="primary" [labelPosition]="labelPosition" [disabled]="disabled" [value]="value" (change)="change($event)">
+                Primary
+            </mat-checkbox>
+            
+            <mat-checkbox matcha-checkbox [checked]='checked' color="accent" [labelPosition]="labelPosition" [disabled]="disabled" [value]="value" (change)="change($event)">
+                Accent
+            </mat-checkbox>
+            
+            <mat-checkbox matcha-checkbox [checked]='checked' color="warn" [labelPosition]="labelPosition" [disabled]="disabled" [value]="value" (change)="change($event)">
+                Warn
+            </mat-checkbox>
+        </div>
+        `,
+    }),
+    parameters: {
+        controls: {
+            exclude: [
+                'color',
+                'indeterminate',
+                'required',
+                'disableRipple',
+                'label',
+            ],
+        },
+    },
+    name: 'Checkbox Colors',
+};
+
+export const CheckboxDisabled: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+        <div class="d-flex gap-16">
+            <mat-checkbox matcha-checkbox disabled="disabled" checked='true'>
+                {{label}}
+            </mat-checkbox>
+            
+            <div class="d-flex-center-center">
+                <div class="border-color-disabled br-2 h-24"></div>
+            </div>
+            
+            <mat-checkbox matcha-checkbox disabled="disabled" checked='false'>
+                {{label}}
+            </mat-checkbox>
+        </div>
+        `,
+    }),
+    parameters: {
+        controls: {
+            exclude: [
+                'change',
+                'color',
+                'labelPosition',
+                'checked',
+                'disabled',
+                'indeterminate',
+                'required',
+                'disableRipple',
+                'value',
+            ],
+        },
+    },
+    name: 'Checkbox Disabled',
+};
+
+export const CheckboxLabelPosition: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+        <div class="d-flex gap-16">
+            <mat-checkbox matcha-checkbox checked='true' labelPosition="before">
+                {{label}}
+            </mat-checkbox>
+            
+            <div class="d-flex-center-center">
+                <div class="border-color-disabled br-2 h-24"></div>
+            </div>
+            
+            <mat-checkbox matcha-checkbox checked='true' labelPosition="after">
+                {{label}}
+            </mat-checkbox>
+        </div>
+        `,
+    }),
+    parameters: {
+        controls: {
+            exclude: [
+                'change',
+                'color',
+                'labelPosition',
+                'checked',
+                'disabled',
+                'indeterminate',
+                'required',
+                'disableRipple',
+                'value',
+            ],
+        },
+    },
+    name: 'Checkbox Label Position',
+};

package/src/lib/matcha-checkbox/checkbox.stories.txt

@@ -0,0 +1,74 @@
+import {Meta, moduleMetadata} from '@storybook/angular';
+import {MatCheckbox, MatCheckboxModule} from '@angular/material/checkbox';
+import {action} from '@storybook/addon-actions';
+import {boolean, text} from '@storybook/addon-knobs';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatchaCheckboxDirective } from './matcha-checkbox.directive';
+
+
+export default {
+    title: 'Componentes/Matcha Checkbox',
+    component: MatCheckbox,
+    decorators: [
+      moduleMetadata({
+          imports: [MatCheckboxModule, BrowserAnimationsModule],
+          declarations: [MatchaCheckboxDirective],
+      }),
+    ],
+    args: {
+        disabled: boolean('disabled', false),
+        label: text('label', 'Check me'),
+        onChange: action('change')
+    },
+    argTypes: {
+        disabled: { control: 'boolean' },
+        label: { control: 'text' },
+        onChange: { control: 'boolean' }
+    }
+} as Meta;
+
+export const checkbox = () => ({
+    component: MatCheckbox,
+    template: `
+        <div>
+            <mat-checkbox [disabled]="disabled" (change)="onChange($event)">
+                {{label}}
+            </mat-checkbox>
+        </div>
+    `,
+    props: {
+      text: 'Botão com ícone',
+      icon: 'favorite',
+      onClick: action('Botão com ícone clicado'),
+    },
+  });
+
+
+// export default MATCHA_CARD;
+
+// export const Default2: MatCheckbox = {
+//     render: (args: any) => ({
+//         props: args,
+//     }),
+// };
+
+
+
+// storiesOf('Checkbox', module)
+//   .add('Basic', () => ({
+//     template: `
+//     <div>
+//       <mat-checkbox [disabled]="disabled" (change)="onChange($event)">
+//         {{label}}
+//       </mat-checkbox>
+//     </div>
+//     `,
+//     props: {
+//       disabled: boolean('disabled', false),
+//       label: text('label', 'Check me'),
+//       onChange: action('change')
+//     },
+//     moduleMetadata: {
+//       imports: [MatCheckboxModule]
+//     }
+//   }));

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { MatchaChipsDirective } from './matcha-chips.directive';
+
+@NgModule({
+  declarations: [MatchaChipsDirective],
+  imports: [
+  ],
+  exports:[
+      MatchaChipsDirective
+  ]
+})
+export class MatchaChipsModule { }