matcha-components 1.0.5 → 1.0.6

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

@@ -0,0 +1,4 @@
+<div class="matcha-card-header d-flex-space-between pb-8">
+    <ng-content></ng-content>
+</div>
+

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

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'matcha-card-header',
+  templateUrl: './matcha-card-header.component.html',
+  styleUrls: ['./matcha-card-header.component.scss']
+})
+export class MatchaCardHeaderComponent {
+
+}

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

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

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

@@ -0,0 +1,117 @@
+    // -----------------------------------------------------------------------------------------------------
+    // @ Cards
+    // -----------------------------------------------------------------------------------------------------
+    .matcha-card,
+    .matcha-card-raised,
+    .matcha-card-flat {
+        padding: 16px;
+        border-radius: 8px;
+
+        &-border,
+        &.matcha-card-border,
+        &-border-left,
+        &.matcha-card-border-left {
+            border-left: 8px solid;
+        }
+
+        &-border-right,
+        &.matcha-card-border-right {
+            border-right: 8px solid;
+        }
+
+        &.disabled {
+            transition: opacity 100ms linear;
+            opacity: 0.5;
+            pointer-events: none;
+        }
+
+        &.enabled {
+            transition: opacity 100ms linear;
+            opacity: 1;
+        }
+
+        &.variable-width {
+            min-width: 0;
+        }
+
+        &.auto-width {
+            min-width: 0;
+            max-width: none;
+        }
+
+        &.fixed-width {
+            min-width: 264px;
+            max-width: 264px;
+            width: 264px;
+        }
+
+        // Buttons
+        .mat-button {
+            min-width: 0 !important;
+            padding: 0 8px !important;
+        }
+
+        // Button Toggle Group
+        .mat-button-toggle-group,
+        .mat-button-toggle-standalone {
+            box-shadow: none !important;
+        }
+
+        .mat-tab-label {
+            min-width: 0 !important;
+        }
+
+        // Divider
+        .card-divider {
+            margin: 16px;
+
+            &.full-width {
+                margin: 0;
+            }
+        }
+
+        // Expand Area
+        .card-expand-area {
+            overflow: hidden;
+
+            .card-expanded-content {
+                padding: 8px 16px 16px 16px;
+                line-height: 1.75;
+            }
+        }
+
+        .title {
+            line-height: 24px;
+            margin: 0 0 16px 0;
+            display: flex;
+            align-items: center;
+
+            .title-bullet {
+                height: 100%;
+                width: 8px;
+                margin: 0px 8px 0 0;
+                display: inline-block;
+                position: relative;
+                border-radius: 10px;
+            }
+
+            .title-content {
+                line-height: 20px;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                word-break: break-word;
+                white-space: initial;
+                -webkit-box-orient: vertical;
+                text-transform: capitalize;
+            }
+        }
+
+        .title-sm {
+            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatchaCardComponent } from './matcha-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/matcha-card.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'matcha-card',
+    templateUrl: './matcha-card.component.html',
+    styleUrls: ['./matcha-card.component.scss']
+})
+
+export class MatchaCardComponent {
+
+    // border-color-bg
+    // background-bg
+    // fill-bg
+    // stroke-bg
+
+    @Input()
+    elevation: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | '14' | '15' | '16' | '17' | '18' | '19' | '20' | '21' | '22' | '23' | '24' = '0';
+
+    @Input()
+    blockquote: 'left' | 'right' | 'none' = 'none';
+
+    @Input()
+    blockquoteColor: 'bg' | 'fg' | 'accent' | 'primary' | 'warn' | 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' = 'fg';
+
+    @Input()
+    backgroundColor: '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' = 'surface';
+
+    @Input()
+    alpha: boolean = false;
+
+    @Input()
+    loading: boolean = false;
+
+    public get classes(): string {
+        const backgroundColor = this.backgroundColor ? `background-${this.backgroundColor}` : '';
+        const blockquoteColor = this.blockquoteColor ? `border-color-${this.blockquoteColor}` : '';
+        const elevation = `elevation-z-${this.elevation}`;
+        const blockquoteLeft = this.blockquote === 'left' ? `matcha-card-border-${this.blockquote}` : '';
+        const blockquoteRight = this.blockquote === 'right' ? `matcha-card-border-${this.blockquote}` : '';
+        const activeClasses = `matcha-card ${elevation} ${blockquoteLeft} ${blockquoteRight} ${blockquoteColor} ${backgroundColor}${this.alpha ? '-alpha' : ''} ${this.loading ? 'loading' : ''}`;
+        return activeClasses;
+    }
+}

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

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaCardHeaderComponent } from './matcha-card-header/matcha-card-header.component';
+import { MatchaCardContentComponent } from './matcha-card-content/matcha-card-content.component';
+import { MatchaCardFooterComponent } from './matcha-card-footer/matcha-card-footer.component';
+import { MatchaCardComponent } from './matcha-card.component';
+
+
+
+@NgModule({
+  declarations: [
+    MatchaCardHeaderComponent,
+    MatchaCardContentComponent,
+    MatchaCardFooterComponent,
+    MatchaCardComponent
+  ],
+  imports: [
+      CommonModule,
+    ],
+  exports:[
+    MatchaCardHeaderComponent,
+    MatchaCardContentComponent,
+    MatchaCardFooterComponent,
+    MatchaCardComponent
+  ]
+})
+export class MatchaCardModule { }

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

@@ -0,0 +1,80 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { MatchaCardModule } from './matcha-card.module';
+import { matchaCardArgtypes } from './matcha-card-argtype';
+
+/** Este é o card principal */
+export default {
+    title: 'Atoms/Card',
+    decorators: [
+        moduleMetadata({
+            imports: [MatchaCardModule],
+        }),
+    ],
+    tags: ['autodocs'],
+
+    args: {
+        elevation: '1',
+        blockquote: 'left',
+        blockquoteColor: 'foreground',
+        backgroundColor: 'surface',
+        label: 'O mais incrível é que funciona.',
+    },
+    argTypes: matchaCardArgtypes,
+    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 WithBasicUsage: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+            <matcha-card [blockquoteColor]="blockquoteColor" [elevation]="elevation" [blockquote]="blockquote" [backgroundColor]="backgroundColor" [alpha]="alpha">{{ label }}</matcha-card>
+        `,
+    }),
+    name: 'Matcha Card - Flat',
+};
+
+export const WithBlockquoteUsage: StoryObj = {
+    render: () => ({
+        props: {
+            elevation: '10',
+            blockquote: 'left',
+            blockquoteColor: 'foreground',
+            backgroundColor: 'surface',
+            label: 'O mais incrível é que funciona.',
+        },
+        template: `
+            <matcha-card blockquoteColor="foreground" elevation="1" blockquote="left" backgroundColor="surface"> Seu conteúdo vai aqui </matcha-card>
+        `,
+        inlineStory: true,
+    }),
+    name: 'Card - Blockquote Left',
+};
+
+export const WithColoredUsage: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+            elevation: '1',
+            blockquote: 'left',
+            blockquoteColor: 'yellow',
+            backgroundColor: 'yellow',
+        },
+        template: `
+            <matcha-card [blockquoteColor]="blockquoteColor" [elevation]="elevation" [blockquote]="blockquote" [backgroundColor]="backgroundColor">{{ label }}</matcha-card>
+        `,
+    }),
+    name: 'matcha-card - 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',
+};