button.stories.ts

import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';

import { SaveIconComponent } from '../icons/save-icon/save-icon.component';
import { ButtonComponent } from './button.component';

const meta: Meta<ButtonComponent> = {
  title: 'Button',
  component: ButtonComponent,
  decorators: [
    moduleMetadata({
      imports: [ButtonComponent, SaveIconComponent],
    }),
  ],
  excludeStories: /.*Data$/,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<ButtonComponent>;

export const Default: Story = {
  args: {
    text: 'Hello world!',
    isLoading: false,
    variant: 'primary',
  },
  argTypes: {
    variant: {
      options: ['primary', 'outline'],
      control: { type: 'radio' },
      table: { defaultValue: { summary: 'primary' } },
    },
  },
};

export const WithIcon: Story = {
  args: {
    text: 'I have an icon',
    variant: 'outline',
  },
  render: (args) => ({
    props: args,
    template: `<ods-button ${argsToTemplate(args)}>
      <ods-save-icon icon size='small'></ods-save-icon>
    </ods-button>`,
  }),
};

export const IsLoading: Story = {
  args: {
    text: 'Loading...',
    isLoading: true,
  },
};

export const OnlyIcon: Story = {
  args: {
    variant: 'onlyIcon',
    size: 'fit',
  },
  render: (args) => ({
    props: args,
    template: `<ods-button ${argsToTemplate(args)}>
      <ods-save-icon icon size='medium'></ods-save-icon>
    </ods-button>`,
  }),
};