matcha-components 20.15.0 → 20.16.0

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

@@ -1,552 +0,0 @@
-import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-import { provideAnimations } from '@angular/platform-browser/animations';
-import { buttonArgtypes } from './button.argtypes';
-import { MatchaButtonModule } from './button.module';
-import { MatchaDividerModule } from '../matcha-divider/divider.module';
-import { MatchaIconModule } from '../matcha-icon/icon.module';
-
-export default {
-    title: 'Atoms / Button',
-    decorators: [
-        applicationConfig({
-            providers: [provideAnimations()],
-        }),
-
-        moduleMetadata({
-            imports: [CommonModule, MatchaButtonModule, MatchaIconModule, MatchaDividerModule],
-        }),
-    ],
-    args: {
-        color: 'accent',
-        basic: false,
-        outline: false,
-        pill: false,
-        link: false,
-        icon: false,
-        iconName: 'home',
-        alpha: false,
-        size: 'medium',
-        sizeXs: '',
-        sizeSm: '',
-        sizeMd: '',
-        sizeLg: '',
-        sizeXl: '',
-    },
-    tags: ['autodocs'],
-    argTypes: buttonArgtypes,
-    parameters: {
-        controls: { expanded: true },
-    },
-} as Meta;
-
-
-export const ButtonsControls: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-            <button matcha-button
-                ${args['color'] ? `color="${args['color']}"` : ''}
-                ${args['size'] ? `size="${args['size']}"` : ''}
-                ${args['sizeXs'] ? `size-xs="${args['sizeXs']}"` : ''}
-                ${args['sizeSm'] ? `size-sm="${args['sizeSm']}"` : ''}
-                ${args['sizeMd'] ? `size-md="${args['sizeMd']}"` : ''}
-                ${args['sizeLg'] ? `size-lg="${args['sizeLg']}"` : ''}
-                ${args['sizeXl'] ? `size-xl="${args['sizeXl']}"` : ''}
-                ${args['basic'] ? `basic="${args['basic']}"` : ''}
-                ${args['outline'] ? `outline="${args['outline']}"` : ''}
-                ${args['alpha'] ? `alpha="${args['alpha']}"` : ''}
-                ${args['pill'] ? `pill="${args['pill']}"` : ''}
-                ${args['link'] ? `link="${args['link']}"` : ''}
-                ${args['icon'] ? `icon="${args['icon']}"` : ''}>
-                ${args['icon'] ? `<span class="i-matcha-${args['iconName']}"></span>` : 'Button'}
-            </button>
-        `,
-    }),
-    name: 'Button Controls',
-};
-
-export const ButtonsFill: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="d-flex flex-wrap gap-16">
-            <div class="d-flex flex-wrap gap-16">
-                <button matcha-button size="medium" color="primary">Primary</button>
-                <button matcha-button size="medium" color="accent">Accent</button>
-                <button matcha-button size="medium" color="warn">Warn</button>
-                <button matcha-button size="medium" color="accent" disabled>Disabled</button>
-
-                <button matcha-button size="medium" color="red">red</button>
-                <button matcha-button size="medium" color="pink">pink</button>
-                <button matcha-button size="medium" color="purple">purple</button>
-                <button matcha-button size="medium" color="deep-purple">deep-purple</button>
-
-                <button matcha-button size="medium" color="indigo">indigo</button>
-                <button matcha-button size="medium" color="blue">blue</button>
-                <button matcha-button size="medium" color="light-blue">light-blue</button>
-                <button matcha-button size="medium" color="cyan">cyan</button>
-
-                <button matcha-button size="medium" color="teal">teal</button>
-                <button matcha-button size="medium" color="green">green</button>
-                <button matcha-button size="medium" color="light-green">light-green</button>
-                <button matcha-button size="medium" color="lime">lime</button>
-
-                <button matcha-button size="medium" color="yellow">yellow</button>
-                <button matcha-button size="medium" color="amber">amber</button>
-                <button matcha-button size="medium" color="orange">orange</button>
-                <button matcha-button size="medium" color="deep-orange">deep-orange</button>
-
-                <button matcha-button size="medium" color="brown">brown</button>
-                <button matcha-button size="medium" color="grey">grey</button>
-                <button matcha-button size="medium" color="blue-grey">blue-grey</button>
-                <button matcha-button size="medium">no color</button>
-            </div>
-
-            <div class="d-flex flex-wrap gap-16">
-                <button matcha-button size="tiny" icon color="primary"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" icon color="accent"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" icon color="warn"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" icon color="accent" disabled><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="small" icon color="red"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" icon color="pink"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" icon color="purple"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" icon color="deep-purple"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="medium" icon color="indigo"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" icon color="blue"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" icon color="light-blue"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" icon color="cyan"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="large" icon color="teal"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" icon color="green"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" icon color="light-green"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" icon color="lime"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="huge" icon color="yellow"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" icon color="amber"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" icon color="orange"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" icon color="deep-orange"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="huge" icon color="brown"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" icon color="grey"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" icon color="blue-grey"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" icon><span class="i-matcha-favorite"></span></button>
-            </div>
-        </div>
-        `,
-    }),
-    name: 'Button Fill',
-    parameters: { controls: { exclude: ['size', 'color', 'basic', 'outline', 'pill', 'link', 'icon', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl', 'iconName', 'alpha'] }},
-};
-
-export const ButtonsPill: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="d-flex flex-wrap gap-16">
-            <div class="d-flex flex-wrap gap-16">
-                <button matcha-button size="medium" pill color="primary">Primary</button>
-                <button matcha-button size="medium" pill color="accent">Accent</button>
-                <button matcha-button size="medium" pill color="warn">Warn</button>
-                <button matcha-button size="medium" pill color="accent" disabled>Disabled</button>
-
-                <button matcha-button size="medium" pill color="red">red</button>
-                <button matcha-button size="medium" pill color="pink">pink</button>
-                <button matcha-button size="medium" pill color="purple">purple</button>
-                <button matcha-button size="medium" pill color="deep-purple">deep-purple</button>
-
-                <button matcha-button size="medium" pill color="indigo">indigo</button>
-                <button matcha-button size="medium" pill color="blue">blue</button>
-                <button matcha-button size="medium" pill color="light-blue">light-blue</button>
-                <button matcha-button size="medium" pill color="cyan">cyan</button>
-
-                <button matcha-button size="medium" pill color="teal">teal</button>
-                <button matcha-button size="medium" pill color="green">green</button>
-                <button matcha-button size="medium" pill color="light-green">light-green</button>
-                <button matcha-button size="medium" pill color="lime">lime</button>
-
-                <button matcha-button size="medium" pill color="yellow">yellow</button>
-                <button matcha-button size="medium" pill color="amber">amber</button>
-                <button matcha-button size="medium" pill color="orange">orange</button>
-                <button matcha-button size="medium" pill color="deep-orange">deep-orange</button>
-
-                <button matcha-button size="medium" pill color="brown">brown</button>
-                <button matcha-button size="medium" pill color="grey">grey</button>
-                <button matcha-button size="medium" pill color="blue-grey">blue-grey</button>
-                <button matcha-button size="medium" pill>no color</button>
-            </div>
-
-            <div class="d-flex flex-wrap gap-16">
-                <button matcha-button size="tiny" pill icon color="primary"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" pill icon color="accent"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" pill icon color="warn"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" pill icon color="accent" disabled><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="small" pill icon color="red"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" pill icon color="pink"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" pill icon color="purple"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" pill icon color="deep-purple"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="medium" pill icon color="indigo"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" pill icon color="blue"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" pill icon color="light-blue"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" pill icon color="cyan"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="large" pill icon color="teal"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" pill icon color="green"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" pill icon color="light-green"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" pill icon color="lime"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="huge" pill icon color="yellow"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" pill icon color="amber"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" pill icon color="orange"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" pill icon color="deep-orange"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="huge" pill icon color="brown"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" pill icon color="grey"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" pill icon color="blue-grey"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" pill icon><span class="i-matcha-favorite"></span></button>
-            </div>
-        </div>
-        `,
-    }),
-    parameters: { controls: { exclude: ['size', 'color', 'basic', 'outline', 'pill', 'link', 'icon', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl', 'iconName', 'alpha'] }},
-};
-
-export const ButtonsOutline: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="d-flex flex-wrap gap-16">
-            <div class="d-flex flex-wrap gap-16">
-                <button matcha-button size="medium" outline color="primary">Primary</button>
-                <button matcha-button size="medium" outline color="accent">Accent</button>
-                <button matcha-button size="medium" outline color="warn">Warn</button>
-                <button matcha-button size="medium" outline color="accent" disabled>Disabled</button>
-
-                <button matcha-button size="medium" outline color="red">red</button>
-                <button matcha-button size="medium" outline color="pink">pink</button>
-                <button matcha-button size="medium" outline color="purple">purple</button>
-                <button matcha-button size="medium" outline color="deep-purple">deep-purple</button>
-
-                <button matcha-button size="medium" outline color="indigo">indigo</button>
-                <button matcha-button size="medium" outline color="blue">blue</button>
-                <button matcha-button size="medium" outline color="light-blue">light-blue</button>
-                <button matcha-button size="medium" outline color="cyan">cyan</button>
-
-                <button matcha-button size="medium" outline color="teal">teal</button>
-                <button matcha-button size="medium" outline color="green">green</button>
-                <button matcha-button size="medium" outline color="light-green">light-green</button>
-                <button matcha-button size="medium" outline color="lime">lime</button>
-
-                <button matcha-button size="medium" outline color="yellow">yellow</button>
-                <button matcha-button size="medium" outline color="amber">amber</button>
-                <button matcha-button size="medium" outline color="orange">orange</button>
-                <button matcha-button size="medium" outline color="deep-orange">deep-orange</button>
-
-                <button matcha-button size="medium" outline color="brown">brown</button>
-                <button matcha-button size="medium" outline color="grey">grey</button>
-                <button matcha-button size="medium" outline color="blue-grey">blue-grey</button>
-                <button matcha-button size="medium" outline>no color</button>
-            </div>
-
-            <div class="d-flex flex-wrap gap-16">
-                <button matcha-button size="tiny" outline icon color="primary"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" outline icon color="accent"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" outline icon color="warn"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" outline icon color="accent" disabled><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="small" outline icon color="red"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" outline icon color="pink"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" outline icon color="purple"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" outline icon color="deep-purple"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="medium" outline icon color="indigo"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" outline icon color="blue"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" outline icon color="light-blue"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" outline icon color="cyan"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="large" outline icon color="teal"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" outline icon color="green"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" outline icon color="light-green"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" outline icon color="lime"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="huge" outline icon color="yellow"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" outline icon color="amber"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" outline icon color="orange"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" outline icon color="deep-orange"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="huge" outline icon color="brown"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" outline icon color="grey"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" outline icon color="blue-grey"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" outline icon><span class="i-matcha-favorite"></span></button>
-            </div>
-        </div>
-        `,
-    }),
-    name: 'Button Outline',
-    parameters: { controls: { exclude: ['size', 'color', 'basic', 'outline', 'pill', 'link', 'icon', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl', 'iconName', 'alpha'] }},
-};
-
-export const ButtonsAlpha: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="d-flex flex-wrap gap-16">
-            <div class="d-flex flex-wrap gap-16">
-                <button matcha-button size="medium" alpha color="primary">Primary</button>
-                <button matcha-button size="medium" alpha color="accent">Accent</button>
-                <button matcha-button size="medium" alpha color="warn">Warn</button>
-                <button matcha-button size="medium" alpha color="accent" disabled>Disabled</button>
-
-                <button matcha-button size="medium" alpha color="red">red</button>
-                <button matcha-button size="medium" alpha color="pink">pink</button>
-                <button matcha-button size="medium" alpha color="purple">purple</button>
-                <button matcha-button size="medium" alpha color="deep-purple">deep-purple</button>
-
-                <button matcha-button size="medium" alpha color="indigo">indigo</button>
-                <button matcha-button size="medium" alpha color="blue">blue</button>
-                <button matcha-button size="medium" alpha color="light-blue">light-blue</button>
-                <button matcha-button size="medium" alpha color="cyan">cyan</button>
-
-                <button matcha-button size="medium" alpha color="teal">teal</button>
-                <button matcha-button size="medium" alpha color="green">green</button>
-                <button matcha-button size="medium" alpha color="light-green">light-green</button>
-                <button matcha-button size="medium" alpha color="lime">lime</button>
-
-                <button matcha-button size="medium" alpha color="yellow">yellow</button>
-                <button matcha-button size="medium" alpha color="amber">amber</button>
-                <button matcha-button size="medium" alpha color="orange">orange</button>
-                <button matcha-button size="medium" alpha color="deep-orange">deep-orange</button>
-
-                <button matcha-button size="medium" alpha color="brown">brown</button>
-                <button matcha-button size="medium" alpha color="grey">grey</button>
-                <button matcha-button size="medium" alpha color="blue-grey">blue-grey</button>
-                <button matcha-button size="medium" alpha>no color</button>
-            </div>
-
-            <div class="d-flex flex-wrap gap-16">
-                <button matcha-button size="tiny" alpha icon color="primary"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" alpha icon color="accent"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" alpha icon color="warn"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" alpha icon color="accent" disabled><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="small" alpha icon color="red"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" alpha icon color="pink"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" alpha icon color="purple"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" alpha icon color="deep-purple"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="medium" alpha icon color="indigo"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" alpha icon color="blue"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" alpha icon color="light-blue"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" alpha icon color="cyan"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="large" alpha icon color="teal"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" alpha icon color="green"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" alpha icon color="light-green"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" alpha icon color="lime"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="huge" alpha icon color="yellow"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" alpha icon color="amber"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" alpha icon color="orange"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" alpha icon color="deep-orange"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="huge" alpha icon color="brown"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" alpha icon color="grey"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" alpha icon color="blue-grey"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" alpha icon><span class="i-matcha-favorite"></span></button>
-            </div>
-        </div>
-        `,
-    }),
-    name: 'Button Alpha',
-    parameters: { controls: { exclude: ['size', 'color', 'basic', 'outline', 'pill', 'link', 'icon', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl', 'iconName', 'alpha'] }},
-}
-
-
-export const ButtonsBasic: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="d-flex flex-wrap gap-16">
-            <div class="d-flex flex-wrap gap-16">
-                <button matcha-button size="medium" basic color="primary">Primary</button>
-                <button matcha-button size="medium" basic color="accent">Accent</button>
-                <button matcha-button size="medium" basic color="warn">Warn</button>
-                <button matcha-button size="medium" basic color="accent" disabled>Disabled</button>
-
-                <button matcha-button size="medium" basic color="red">red</button>
-                <button matcha-button size="medium" basic color="pink">pink</button>
-                <button matcha-button size="medium" basic color="purple">purple</button>
-                <button matcha-button size="medium" basic color="deep-purple">deep-purple</button>
-
-                <button matcha-button size="medium" basic color="indigo">indigo</button>
-                <button matcha-button size="medium" basic color="blue">blue</button>
-                <button matcha-button size="medium" basic color="light-blue">light-blue</button>
-                <button matcha-button size="medium" basic color="cyan">cyan</button>
-
-                <button matcha-button size="medium" basic color="teal">teal</button>
-                <button matcha-button size="medium" basic color="green">green</button>
-                <button matcha-button size="medium" basic color="light-green">light-green</button>
-                <button matcha-button size="medium" basic color="lime">lime</button>
-
-                <button matcha-button size="medium" basic color="yellow">yellow</button>
-                <button matcha-button size="medium" basic color="amber">amber</button>
-                <button matcha-button size="medium" basic color="orange">orange</button>
-                <button matcha-button size="medium" basic color="deep-orange">deep-orange</button>
-
-                <button matcha-button size="medium" basic color="brown">brown</button>
-                <button matcha-button size="medium" basic color="grey">grey</button>
-                <button matcha-button size="medium" basic color="blue-grey">blue-grey</button>
-                <button matcha-button size="medium" basic>no color</button>
-            </div>
-
-            <div class="d-flex flex-wrap gap-16">
-                <button matcha-button size="tiny" basic icon color="primary"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" basic icon color="accent"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" basic icon color="warn"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" basic icon color="accent" disabled><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="small" basic icon color="red"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" basic icon color="pink"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" basic icon color="purple"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" basic icon color="deep-purple"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="medium" basic icon color="indigo"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" basic icon color="blue"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" basic icon color="light-blue"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" basic icon color="cyan"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="large" basic icon color="teal"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" basic icon color="green"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" basic icon color="light-green"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" basic icon color="lime"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="huge" basic icon color="yellow"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" basic icon color="amber"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" basic icon color="orange"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" basic icon color="deep-orange"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="huge" basic icon color="brown"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" basic icon color="grey"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" basic icon color="blue-grey"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" basic icon><span class="i-matcha-favorite"></span></button>
-            </div>
-        </div>
-        `,
-    }),
-    name: 'Button Basic',
-    parameters: { controls: { exclude: ['size', 'color', 'basic', 'outline', 'pill', 'link', 'icon', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl', 'iconName', 'alpha'] }},
-}
-
-export const ButtonsBasicAlpha: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-        <div class="d-flex flex-wrap gap-16">
-            <div class="d-flex flex-wrap gap-16">
-                <button matcha-button size="medium" basic alpha color="primary">Primary</button>
-                <button matcha-button size="medium" basic alpha color="accent">Accent</button>
-                <button matcha-button size="medium" basic alpha color="warn">Warn</button>
-                <button matcha-button size="medium" basic alpha color="accent" disabled>Disabled</button>
-
-                <button matcha-button size="medium" basic alpha color="red">red</button>
-                <button matcha-button size="medium" basic alpha color="pink">pink</button>
-                <button matcha-button size="medium" basic alpha color="purple">purple</button>
-                <button matcha-button size="medium" basic alpha color="deep-purple">deep-purple</button>
-
-                <button matcha-button size="medium" basic alpha color="indigo">indigo</button>
-                <button matcha-button size="medium" basic alpha color="blue">blue</button>
-                <button matcha-button size="medium" basic alpha color="light-blue">light-blue</button>
-                <button matcha-button size="medium" basic alpha color="cyan">cyan</button>
-
-                <button matcha-button size="medium" basic alpha color="teal">teal</button>
-                <button matcha-button size="medium" basic alpha color="green">green</button>
-                <button matcha-button size="medium" basic alpha color="light-green">light-green</button>
-                <button matcha-button size="medium" basic alpha color="lime">lime</button>
-
-                <button matcha-button size="medium" basic alpha color="yellow">yellow</button>
-                <button matcha-button size="medium" basic alpha color="amber">amber</button>
-                <button matcha-button size="medium" basic alpha color="orange">orange</button>
-                <button matcha-button size="medium" basic alpha color="deep-orange">deep-orange</button>
-
-                <button matcha-button size="medium" basic alpha color="brown">brown</button>
-                <button matcha-button size="medium" basic alpha color="grey">grey</button>
-                <button matcha-button size="medium" basic alpha color="blue-grey">blue-grey</button>
-                <button matcha-button size="medium" basic alpha>no color</button>
-            </div>
-
-            <div class="d-flex flex-wrap gap-16">
-                <button matcha-button size="tiny" basic alpha icon color="primary"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" basic alpha icon color="accent"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" basic alpha icon color="warn"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="tiny" basic alpha icon color="accent" disabled><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="small" basic alpha icon color="red"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" basic alpha icon color="pink"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" basic alpha icon color="purple"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="small" basic alpha icon color="deep-purple"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="medium" basic alpha icon color="indigo"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" basic alpha icon color="blue"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" basic alpha icon color="light-blue"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="medium" basic alpha icon color="cyan"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="large" basic alpha icon color="teal"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" basic alpha icon color="green"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" basic alpha icon color="light-green"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="large" basic alpha icon color="lime"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="huge" basic alpha icon color="yellow"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" basic alpha icon color="amber"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" basic alpha icon color="orange"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" basic alpha icon color="deep-orange"><span class="i-matcha-favorite"></span></button>
-
-                <button matcha-button size="huge" basic alpha icon color="brown"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" basic alpha icon color="grey"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" basic alpha icon color="blue-grey"><span class="i-matcha-favorite"></span></button>
-                <button matcha-button size="huge" basic alpha icon><span class="i-matcha-favorite"></span></button>
-            </div>
-        </div>
-        `,
-    }),
-    name: 'Button Basic Alpha',
-    parameters: { controls: { exclude: ['size', 'color', 'basic', 'outline', 'pill', 'link', 'icon', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl', 'iconName', 'alpha'] }},
-}
-
-export const ButtonsSizesBreakpoints: StoryObj = {
-    render: (args) => ({
-        props: {
-            ...args,
-        },
-        template: `
-            <section class="flex-column">
-                <div class="flex-row flex-wrap gap-16">
-                    <button matcha-button size="tiny" size-xs="medium" color="accent">size-xs</button>
-                    <button matcha-button size="tiny" size-sm="medium" color="accent">size-sm</button>
-                    <button matcha-button size="tiny" size-md="medium" color="accent">size-md</button>
-                    <button matcha-button size="tiny" size-lg="medium" color="accent">size-lg</button>
-                    <button matcha-button size="tiny" size-xl="medium" color="accent">size-xl</button>
-                </div>
-            </section>
-        `,
-    }),
-    name: 'Button Sizes Breakpoints',
-    parameters: { controls: { exclude: ['size', 'color', 'basic', 'outline', 'pill', 'link', 'icon', 'sizeXs', 'sizeSm', 'sizeMd', 'sizeLg', 'sizeXl', 'iconName', 'alpha'] }},
-};

package/src/lib/matcha-button-toggle/button-toggle/button-toggle.component.html

@@ -1,8 +0,0 @@
-<div
-  class="button-group d-flex"
-  [ngClass]="gapClass"
-  [class.flex-wrap]="gap !== 0"
-  role="group"
->
-  <ng-content></ng-content>
-</div>