ISA-Frontend/apps/isa-app/stories/ui/buttons/ui-icon-button.stories.ts

import { argsToTemplate, type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
import { IconButtonColor, IconButtonSize, UiIconButtonComponent } from '@isa/ui/buttons';
// import { within } from '@storybook/testing-library';
// import { expect } from '@storybook/jest';
import * as IsaIcons from '@isa/icons';
import { NgIconComponent, provideIcons } from '@ng-icons/core';

type UiIconButtonComponentInputs = {
  color: IconButtonColor;
  size: IconButtonSize;
  pending: boolean;
  disabled: boolean;
  icon: string;
};

const meta: Meta<UiIconButtonComponentInputs> = {
  component: UiIconButtonComponent,
  decorators: [
    moduleMetadata({
      imports: [NgIconComponent],
      providers: [provideIcons(IsaIcons)],
    }),
  ],
  title: 'ui/buttons/IconButton',
  argTypes: {
    icon: { control: 'select', options: Object.keys(IsaIcons) },
    color: {
      control: 'select',
      options: ['brand', 'primary', 'secondary', 'tertiary'] as IconButtonColor[],
    },
    size: {
      control: 'select',
      options: ['small', 'medium'] as IconButtonSize[],
    },
    pending: {
      control: 'boolean',
    },
    disabled: {
      control: 'boolean',
    },
  },
  args: {
    icon: 'isaActionCheck',
  },
  render: (args) => ({
    props: args,
    template: `<ui-icon-button ${argsToTemplate(args, { exclude: ['disabled', 'icon'] })} ${args.disabled ? 'disabled' : ''}>
        <ng-icon name="${args.icon}"></ng-icon>
    </ui-icon-button>`,
  }),
};
export default meta;

type Story = StoryObj<UiIconButtonComponent>;

export const Default: Story = {
  args: {},
};