matcha-components 1.0.6 → 1.0.7

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

@@ -0,0 +1,88 @@
+import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { NgIf, NgFor, AsyncPipe, JsonPipe } from '@angular/common';
+import { MatchaHeadersModule } from './headers.module';
+import { headersArgtypes } from './headers.argtype';
+import { CommonModule } from '@angular/common';
+import { provideAnimations } from '@angular/platform-browser/animations';
+
+export default {
+    title: 'Atoms / Headers',
+    decorators: [
+        applicationConfig({
+            providers: [provideAnimations()],
+        }),
+        moduleMetadata({
+            imports: [CommonModule, MatchaHeadersModule, NgIf, JsonPipe, NgFor, AsyncPipe],
+        }),
+    ],
+    args: {
+        label: 'Headline Example',
+        bulletColor: 'accent',
+    },
+    argTypes: headersArgtypes,
+    parameters: {
+        controls: { expanded: true },
+    },
+} as Meta;
+
+/** Este é o card principal */
+export const HeadersOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <div class="d-flex-column d-flex-center-center gap-24">
+            <matcha-headline [bulletColor]="bulletColor">{{label}}</matcha-headline>
+            <matcha-subhead [bulletColor]="bulletColor">{{label}}</matcha-subhead>
+            <matcha-title [bulletColor]="bulletColor">{{label}}</matcha-title>
+        </div>
+        `,
+    }),
+    name: 'Headers Overview',
+};
+
+/** Este é o card principal */
+export const HeadlineOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <matcha-headline [bulletColor]="bulletColor">{{label}}</matcha-headline>
+        </div>
+        `,
+    }),
+    name: 'Headline Overview',
+};
+
+/** Este é o card principal */
+export const SubheadOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <matcha-subhead [bulletColor]="bulletColor">{{label}}</matcha-subhead>
+        </div>
+        `,
+    }),
+    name: 'Subhead Overview',
+};
+
+/** Este é o card principal */
+export const TitleOverview: StoryObj = {
+    render: (args) => ({
+        props: {
+            ...args,
+        },
+        template: `
+        <div class="d-flex-center-center">
+            <matcha-title [bulletColor]="bulletColor">{{label}}</matcha-title>
+        </div>
+        `,
+    }),
+    name: 'Title Overview',
+};

package/src/lib/matcha-headers/headine/headline.component.html

@@ -0,0 +1 @@
+<h4 class="lh-16 d-flex d-flex-align-center m-0 h4"><span [class]="classes"></span><ng-content></ng-content></h4>

package/src/lib/matcha-headers/headine/headline.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'matcha-headline',
+    templateUrl: './headline.component.html',
+    styleUrls: ['./headline.component.scss'],
+})
+export class MatchaHeadlineComponent {
+    @Input()
+    bulletColor: 'fg' | 'accent' | 'primary' | 'warn' | 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' = 'accent';
+
+    @Input()
+    loading: boolean = false;
+
+    public get classes(): string {
+        const bullet = this.bulletColor ? `background-${this.bulletColor} min-h-24 h-24 max-h-24 max-w-8 w-8 min-w-8 d-inline-block position-relative mr-8 border-radius-8` : '';
+        const activeClasses = `${bullet} ${this.loading ? 'loading' : ''}`;
+        return activeClasses;
+    }
+}

package/src/lib/matcha-headers/subhead/subhead.component.html

@@ -0,0 +1 @@
+<h5 class="lh-16 d-flex d-flex-align-center m-0 h5"><span [class]="classes"></span><ng-content></ng-content></h5>

package/src/lib/matcha-headers/subhead/subhead.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'matcha-subhead',
+    templateUrl: './subhead.component.html',
+    styleUrls: ['./subhead.component.scss'],
+})
+export class MatchaSubheadComponent {
+    @Input()
+    bulletColor: 'fg' | 'accent' | 'primary' | 'warn' | 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' = 'accent';
+
+    @Input()
+    loading: boolean = false;
+
+    public get classes(): string {
+        const bullet = this.bulletColor ? `background-${this.bulletColor} min-h-20 h-20 max-h-20 max-w-8 w-8 min-w-8 d-inline-block position-relative mr-8 border-radius-8` : '';
+        const activeClasses = `${bullet} ${this.loading ? 'loading' : ''}`;
+        return activeClasses;
+    }
+}

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

@@ -0,0 +1 @@
+<h6 class="lh-24 d-flex d-flex-align-center m-0 h8"><span [class]="classes"></span><ng-content></ng-content></h6>

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

@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'matcha-title',
+    templateUrl: './title.component.html',
+    styleUrls: ['./title.component.scss'],
+})
+export class MatchaTitleComponent {
+    @Input()
+    bulletColor: 'fg' | 'accent' | 'primary' | 'warn' | 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' = 'accent';
+
+    @Input()
+    loading: boolean = false;
+
+    public get classes(): string {
+        const bullet = this.bulletColor ? `background-${this.bulletColor} min-h-16 h-16 max-h-16 max-w-8 w-8 min-w-8 d-inline-block position-relative mr-8 border-radius-8` : '';
+        const activeClasses = `${bullet} ${this.loading ? 'loading' : ''}`;
+        return activeClasses;
+    }
+}

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

@@ -0,0 +1,36 @@
+export const iconArgtypes = {
+    color: {
+        description: 'Select color for icons',
+        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],
+    },
+    size: {
+        description: 'Select size for icons',
+        control: 'select',
+        defaultValue: 'md',
+        table: {
+            defaultValue: { summary: 'md' },
+        },
+        options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+    name: {
+        description: 'Select icon name',
+        control: 'text',
+        defaultValue: 'home',
+        table: {
+            type: { summary: 'string | undefined | null' },
+        },
+    },
+    loading: {
+        description: 'Whether the element is loading',
+        control: 'boolean',
+        defaultValue: true,
+        table: {
+            defaultValue: { summary: true },
+        },
+    },
+};

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

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

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

@@ -0,0 +1,34 @@
+import { Component, Directive, Input } from '@angular/core';
+
+@Component({
+    selector: 'matcha-icon',
+    templateUrl: './icon.component.html',
+    styleUrls: ['./icon.component.scss'],
+})
+export class MatchaIconComponent {
+    @Input()
+    name: string | undefined | null = '';
+
+    @Input()
+    size: string | undefined | null = '';
+
+    @Input()
+    color: string | undefined | null = '';
+
+    @Input()
+    class: string | undefined | null = '';
+
+    @Input()
+    loading: boolean = false;
+
+    public get classes(): string {
+        const icon = this.name ? `i-matcha-${this.name}` : '';
+        const size = this.size ? `i-size-${this.size}` : '';
+        const color = `color-${this.color}`;
+        const loading = this.loading ? 'loading' : '';
+
+        const activeClasses = `${icon} ${color} ${size} ${loading} ${this.class}`;
+        return activeClasses;
+    }
+}
+export class MatchaCardFooter {}

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

@@ -0,0 +1,60 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+import * as ComponentStories from "./icon.stories";
+
+<Meta title="Atoms / Icon / Documentação" />
+
+# Icon
+
+> _icon_ "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">
+
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.IconOverview} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <matcha-icon name="home" color="accent" size="md"></matcha-icon>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+    <div class="d-flex-column">
+        <div class="matcha-card background-surface d-flex-column gap-16">
+
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.IconList} />
+            </div>
+
+            <div class="d-flex-column">
+
+                ```html
+                <matcha-icon name="home" color="accent" size="md"></matcha-icon>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatIconModule} from '@angular/material/icon';`
+
+[Official documentation](https://https://material.angular.io/components/icon/overview)
+
+<br />

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

@@ -1,19 +1,10 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatchaIconPositionPreDirective } from './matcha-icon-position-pre.directive';
-import { MatchaIconPositionPosDirective } from './matcha-icon-position-pos.directive';
+import { MatchaIconComponent } from './icon.component';
 
 @NgModule({
-  declarations: [
-    MatchaIconPositionPreDirective,
-    MatchaIconPositionPosDirective
-  ],
-  imports: [
-    CommonModule
-  ],
-  exports: [
-    MatchaIconPositionPreDirective,
-    MatchaIconPositionPosDirective
-  ]
+    declarations: [MatchaIconComponent],
+    imports: [CommonModule],
+    exports: [MatchaIconComponent],
 })
-export class MatchaIconModule { }
+export class MatchaIconModule {}