matcha-components 1.0.5 → 1.0.6

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

@@ -0,0 +1,66 @@
+export const slideToggleArgtypes = {
+    checked: {
+        description: 'Whether the slide toggle is checked',
+        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'],
+    },
+    disableRipple: {
+        description: 'Whether the slide toggle is disableRipple',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            defaultValue: { summary: true },
+        },
+    },
+    disabled: {
+        description: 'Whether the slide toggle is disabled',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            defaultValue: { summary: true },
+        },
+    },
+    hideIcon: {
+        description: 'Whether the slide toggle is disabled',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            defaultValue: { summary: true },
+        },
+    },
+    labelPosition: {
+        description: 'Theme color palette',
+        control: 'select',
+        defaultValue: 'after',
+        table: {
+            defaultValue: { summary: 'after' },
+        },
+        options: ['before', 'after'],
+    },
+    label: {
+        description: 'Value of the slide toggle',
+        defaultValue: 'Slide me',
+        table: {
+            defaultValue: { summary: 'Slide me' },
+        },
+        control: 'text',
+    },
+    onChange: {
+        action: 'change',
+    },
+    toggleChange: {
+        action: 'toggleChange',
+    },
+};

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

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

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

@@ -0,0 +1,92 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./slide-toggle.stories";
+
+<Meta title="Atoms / Slide Toggle / Documentação" />
+
+# Slide Toggle
+
+> _mat-slide-toggle_ is an on/off control that can be toggled via clicking.
+
+---
+
+### 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">SlideToggle - Colors</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.SlideToggleColors} />
+            </div>
+            <div class="d-flex-column">
+                ```html
+                <mat-slide-toggle matcha-slide-toggle checked="true" color="primary">primary</mat-slide-toggle>
+                <mat-slide-toggle matcha-slide-toggle checked="true" color="accent">accent</mat-slide-toggle>
+                <mat-slide-toggle matcha-slide-toggle checked="true" color="warn">warn</mat-slide-toggle>
+                ```
+            </div>
+        </div>
+    </div>
+
+    <div class="grid-md-2 gap-16">
+        <div class="matcha-card background-surface d-flex-column gap-16">
+            <span class="h5">SlideToggle - Label Position</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.SlideToggleLabelPosition} />
+            </div>
+            <div class="d-flex-column">
+                ```html
+                <mat-slide-toggle
+                    matcha-slide-toggle
+                    checked='true'
+                    labelPosition="before">
+                    Slide-me
+                </mat-slide-toggle>
+
+                <mat-slide-toggle
+                    matcha-slide-toggle
+                    checked='true'
+                    labelPosition="after">
+                    Slide-me
+                </mat-slide-toggle>
+                ```
+            </div>
+        </div>
+
+        <div class="matcha-card background-surface d-flex-column gap-16">
+            <span class="h5">SlideToggle - Disabled</span>
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.SlideToggleDisabled} />
+            </div>
+            <div class="d-flex-column">
+                ```html
+                <mat-slide-toggle
+                    matcha-slide-toggle
+                    checked='true'
+                    disabled='true'>
+                    Slide-me
+                </mat-slide-toggle>
+
+                <mat-slide-toggle
+                    matcha-slide-toggle
+                    checked='false'
+                    disabled="true">
+                    Slide-me
+                </mat-slide-toggle>
+                ```
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatSlideToggleModule} from '@angular/material/slide-toggle';`
+
+[Official documentation](https://material.angular.io/components/slide-toggle/overview)
+
+<br />

package/src/lib/matcha-slide-toggle/slide-toggle.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaSlideToggleDirective } from './slide-toggle.directive';
+
+@NgModule({
+  declarations: [MatchaSlideToggleDirective],
+  imports: [
+    CommonModule
+  ],
+  exports:[MatchaSlideToggleDirective]
+})
+export class MatchaSlideToggleModule { }

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

@@ -0,0 +1,167 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { config } from '@storybook/addon-designs';
+
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { slideToggleArgtypes } from './slide-toggle.argtype';
+import { MatchaSlideToggleDirective } from './slide-toggle.directive';
+
+export default {
+    title: 'Atoms / Slide Toggle',
+    decorators: [
+        moduleMetadata({
+            imports: [MatSlideToggleModule],
+            declarations: [MatchaSlideToggleDirective],
+        }),
+    ],
+    args: {
+        checked: true,
+        color: 'accent',
+        disableRipple: false,
+        disabled: false,
+        hideIcon: false,
+        labelPosition: 'after',
+        label: 'Slide me',
+        onChange: action('change'),
+        toggleChange: action('toggleChange'),
+    },
+    argTypes: slideToggleArgtypes,
+    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 SlideToggleDefault: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+            <div class="d-flex gap-16">
+                <mat-slide-toggle
+                matcha-slide-toggle
+                [color]="color"
+                [checked]="checked"
+                [disabled]="disabled"
+                [hideIcon]="hideIcon"
+                [labelPosition]="labelPosition"
+                (change)="onChange($event)"
+                (toggleChange)="toggleChange('data', this.$event)">
+                {{label}}
+                </mat-slide-toggle>
+            </div>
+        `,
+    }),
+    name: 'SlideToggle Default',
+};
+
+export const SlideToggleColors: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+            <div class="d-flex gap-16">
+                <mat-slide-toggle matcha-slide-toggle (change)="onChange($event)" (toggleChange)="toggleChange('Primary', this.$event)" [checked]='checked' color="primary" [labelPosition]="labelPosition" [disabled]="disabled" [hideIcon]="hideIcon">
+                    Primary
+                </mat-slide-toggle>
+                
+                <mat-slide-toggle matcha-slide-toggle (change)="onChange($event)" (toggleChange)="toggleChange('Accent', this.$event)" [checked]='checked' color="accent" [labelPosition]="labelPosition" [disabled]="disabled" [hideIcon]="hideIcon">
+                    Accent
+                </mat-slide-toggle>
+                
+                <mat-slide-toggle matcha-slide-toggle (change)="onChange($event)" (toggleChange)="toggleChange('Warn', this.$event)" [checked]='checked' color="warn" [labelPosition]="labelPosition" [disabled]="disabled" [hideIcon]="hideIcon">
+                    Warn
+                </mat-slide-toggle>
+            </div>
+        `,
+    }),
+    parameters: {
+        controls: {
+            exclude: [
+                'color',
+                'indeterminate',
+                'required',
+                'disableRipple',
+                'label',
+            ],
+        },
+    },
+    name: 'SlideToggle Colors',
+};
+
+export const SlideToggleDisabled: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+        <div class="d-flex gap-16">
+            <mat-slide-toggle matcha-slide-toggle checked='true' disabled="true" [hideIcon]="hideIcon">
+                {{label}}
+            </mat-slide-toggle>
+            
+            <div class="d-flex-center-center">
+                <div class="border-color-disabled br-2 h-24"></div>
+            </div>
+            
+            <mat-slide-toggle matcha-slide-toggle checked='false' disabled="true" [hideIcon]="hideIcon">
+                {{label}}
+            </mat-slide-toggle>
+        </div>
+        `,
+    }),
+    parameters: {
+        controls: {
+            exclude: [
+                'toggleChange',
+                'color',
+                'labelPosition',
+                'onChange',
+                'checked',
+                'disabled',
+                'indeterminate',
+                'required',
+                'disableRipple',
+            ],
+        },
+    },
+    name: 'SlideToggle Disabled',
+};
+
+export const SlideToggleLabelPosition: StoryObj = {
+    render: (args) => ({
+        props: args,
+        template: `
+        <div class="d-flex gap-16">
+            <mat-slide-toggle matcha-slide-toggle checked="true" labelPosition="before" (change)="onChange($event)" (toggleChange)="toggleChange('data', this.$event)">
+                Label before
+            </mat-slide-toggle>
+            
+            <div class="d-flex-center-center">
+                <div class="border-color-disabled br-2 h-24"></div>
+            </div>
+            
+            <mat-slide-toggle matcha-slide-toggle checked="true" labelPosition="after" (change)="onChange($event)" (toggleChange)="toggleChange('data', this.$event)">
+                Label after
+            </mat-slide-toggle>
+        </div>
+        `,
+    }),
+    parameters: {
+        controls: {
+            exclude: [
+                'color',
+                'labelPosition',
+                'checked',
+                'disabled',
+                'indeterminate',
+                'required',
+                'disableRipple',
+                'hideIcon',
+                'label',
+            ],
+        },
+    },
+    name: 'SlideToggle Label Position',
+};

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

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

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaSliderDirective } from './matcha-slider.directive';
+
+@NgModule({
+  declarations: [MatchaSliderDirective],
+  imports: [
+    CommonModule
+  ],
+  exports:[MatchaSliderDirective]
+})
+export class MatchaSliderModule { }

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

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

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaSnackbarDirective } from './matcha-snackbar.directive';
+
+@NgModule({
+  declarations: [MatchaSnackbarDirective],
+  imports: [
+    CommonModule
+  ],
+  exports:[MatchaSnackbarDirective]
+})
+export class MatchaSnackbarModule { }

package/src/lib/matcha-sort-header/matcha-sort-header.directive.ts

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

package/src/lib/matcha-sort-header/sort-header.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaSortHeaderDirective } from './matcha-sort-header.directive';
+
+@NgModule({
+  declarations: [MatchaSortHeaderDirective],
+  imports: [
+    CommonModule
+  ],
+  exports:[MatchaSortHeaderDirective]
+})
+export class MatchaSortHeaderModule { }

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

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

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaStepperDirective } from './matcha-stepper.directive';
+
+@NgModule({
+  declarations: [MatchaStepperDirective],
+  imports: [
+    CommonModule
+  ],
+  exports:[MatchaStepperDirective]
+})
+export class MatchaStepperModule { }

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

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

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

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaTableDirective } from './matcha-table.directive';
+
+@NgModule({
+  declarations: [MatchaTableDirective],
+  imports: [
+    CommonModule
+  ],
+  exports:[MatchaTableDirective]
+})
+export class MatchaTableModule { }

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

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

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

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaTabsDirective } from './matcha-tabs.directive';
+
+@NgModule({
+    declarations: [
+        MatchaTabsDirective
+    ],
+    imports: [
+        CommonModule
+    ],
+    exports: [
+        MatchaTabsDirective
+    ]
+})
+export class MatchaTabsModule { }

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

@@ -0,0 +1,18 @@
+import {storiesOf} from '@storybook/angular';
+import {MatTabsModule} from '@angular/material/tabs';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
+storiesOf('Tabs', module)
+  .add('Basic', () => ({
+    template: `
+    <div>
+      <mat-tab-group>
+        <mat-tab label="Tab 1">Content 1</mat-tab>
+        <mat-tab label="Tab 2">Content 2</mat-tab>
+      </mat-tab-group>
+    </div>
+    `,
+    moduleMetadata: {
+      imports: [BrowserAnimationsModule, MatTabsModule]
+    }
+  }));

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

@@ -0,0 +1,33 @@
+<ng-container [ngSwitch]="level">
+
+    <h1 class="title" *ngSwitchCase="1">
+        <span class="title-bullet h-32 w-8" [ngClass]="bulletColor" *ngIf="bulletColor"></span>
+        {{title}}
+    </h1>
+
+    <h2 class="title" *ngSwitchCase="2">
+        <span class="title-bullet h-28 w-8" [ngClass]="bulletColor" *ngIf="bulletColor"></span>
+        {{title}}
+    </h2>
+
+    <h3 class="title" *ngSwitchCase="3">
+        <span class="title-bullet h-24 w-8" [ngClass]="bulletColor" *ngIf="bulletColor"></span>
+        {{title}}
+    </h3>
+
+    <h4 class="title" *ngSwitchCase="4">
+        <span class="title-bullet h-24 w-8" [ngClass]="bulletColor" *ngIf="bulletColor"></span>
+        {{title}}
+    </h4>
+
+    <h5 class="title" *ngSwitchCase="5">
+        <span class="title-bullet h-20 w-8" [ngClass]="bulletColor" *ngIf="bulletColor"></span>
+        {{title}}
+    </h5>
+
+    <h6 class="title" *ngSwitchCase="6">
+        <span class="title-bullet h-16 w-8" [ngClass]="bulletColor" *ngIf="bulletColor"></span>
+        {{title}}
+    </h6>
+
+</ng-container>

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

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

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

@@ -0,0 +1,24 @@
+import { Component, Input, OnInit, Sanitizer } from '@angular/core';
+
+@Component({
+  selector: 'matcha-title',
+  templateUrl: './matcha-title.component.html',
+  styleUrls: ['./matcha-title.component.scss']
+})
+export class MatchaTitleComponent implements OnInit {
+
+  @Input('level') level: number = 1;
+
+  @Input('bulletColor') bulletColor: string = '';
+
+  @Input('title') title: string = '';
+
+  constructor() {}
+
+
+  ngOnInit(): void {
+    this.bulletColor = this.bulletColor ?  `background-${this.bulletColor}` : '';
+  }
+
+
+}

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

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaTitleComponent } from './matcha-title.component';
+
+
+
+@NgModule({
+  declarations: [
+    MatchaTitleComponent
+  ],
+  imports: [
+      CommonModule
+    ],
+  exports:[
+    MatchaTitleComponent
+  ]
+})
+export class MatchaTitleModule { }