ISA-Frontend/apps/isa-app/stories/ui/notice/ui-notice.stories.ts

import { argsToTemplate, type Meta, type StoryObj } from '@storybook/angular';
import { NoticeComponent, NoticePriority } from '@isa/ui/notice';

type NoticeInputs = {
  priority: NoticePriority;
};

const meta: Meta<NoticeInputs> = {
  component: NoticeComponent,
  title: 'ui/notice/Notice',
  argTypes: {
    priority: {
      control: { type: 'select' },
      options: Object.values(NoticePriority),
      description: 'The priority level (high, medium, low)',
    },
  },
  args: {
    priority: NoticePriority.High,
  },
  render: (args) => ({
    props: args,
    template: `<ui-notice ${argsToTemplate(args)}>Important message</ui-notice>`,
  }),
};
export default meta;

type Story = StoryObj<NoticeComponent>;

export const High: Story = {
  args: {
    priority: NoticePriority.High,
  },
  render: (args) => ({
    props: args,
    template: `<ui-notice [priority]="priority">Action Required</ui-notice>`,
  }),
};

export const Medium: Story = {
  args: {
    priority: NoticePriority.Medium,
  },
  render: (args) => ({
    props: args,
    template: `<ui-notice [priority]="priority">Secondary Information</ui-notice>`,
  }),
};

export const Low: Story = {
  args: {
    priority: NoticePriority.Low,
  },
  render: (args) => ({
    props: args,
    template: `<ui-notice [priority]="priority">Info Message</ui-notice>`,
  }),
};

export const AllPriorities: Story = {
  render: () => ({
    template: `
      <div style="display: flex; flex-direction: column; gap: 1rem;">
        <ui-notice priority="high">High Priority</ui-notice>
        <ui-notice priority="medium">Medium Priority</ui-notice>
        <ui-notice priority="low">Low Priority</ui-notice>
      </div>
    `,
  }),
};