ISA-Frontend/apps/isa-app/stories/ui/input-controls/checkbox.stories.ts

import { type Meta, type StoryObj, argsToTemplate } from '@storybook/angular';
import { CheckboxAppearance, CheckboxComponent } from '@isa/ui/input-controls';

type CheckboxComponentInputs = {
  checked: boolean;
  disabled: boolean;
  appearance: CheckboxAppearance;
};

const meta: Meta<CheckboxComponentInputs> = {
  component: CheckboxComponent,
  title: 'ui/input-controls/Checkbox',
  argTypes: {
    checked: { control: 'boolean' },
    disabled: { control: 'boolean' },
    appearance: { control: 'select', options: Object.values(CheckboxAppearance) },
  },
  args: {
    appearance: 'bullet',
  },
  render: (args) => ({
    props: args,
    template: `
            <ui-checkbox ${argsToTemplate(args, { include: ['appearance'] })}>
                <input type="checkbox" ${args.disabled ? 'disabled' : ''} ${args.checked ? 'checked' : ''} />
            </ui-checkbox>
        `,
  }),
};

export default meta;

type Story = StoryObj<CheckboxComponentInputs>;

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

export const Checked: Story = {
  args: {
    checked: true,
  },
};

export const Disabled: Story = {
  args: {
    disabled: true,
  },
};

export const CheckedAndDisabled: Story = {
  args: {
    checked: true,
    disabled: true,
  },
};