matcha-components 20.12.0 → 20.15.0

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'],
+    standalone: false
+})
+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 | string = 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 == true ? 'loading' : '';
+
+        const activeClasses = `${icon} ${color} ${size} ${loading} ${this.class}`;
+        return activeClasses;
+    }
+}

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

@@ -0,0 +1,58 @@
+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="flex-column gap-16">
+    <div class="flex-column">
+        <div class="matcha-card background-surface flex-column gap-16">
+
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.IconOverview} />
+            </div>
+
+            <div class="flex-column">
+
+                ```html
+                <matcha-icon name="home" color="accent" size="md"></matcha-icon>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+    <div class="flex-column">
+        <div class="matcha-card background-surface flex-column gap-16">
+
+            <div class="matcha-card background-bg">
+                <Story of={ComponentStories.IconList} />
+            </div>
+
+            <div class="flex-column">
+
+                ```html
+                <matcha-icon name="home" color="accent" size="md"></matcha-icon>
+                ```
+
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<br />
+
+### Installation
+
+`import {MatchaIconModule} from 'matcha-components';`
+
+<br />

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

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatchaIconComponent } from './icon.component';
+import { MatchaTooltipModule } from '../matcha-tooltip/tooltip.module';
+
+@NgModule({
+    declarations: [MatchaIconComponent],
+    imports: [CommonModule, MatchaTooltipModule],
+    exports: [MatchaIconComponent],
+})
+export class MatchaIconModule {}