link.stories.ts

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

import { AccessibilityIconComponent } from '../icons/accessibility-icon/accessibility-icon.component';
import { LinkComponent } from './link.component';

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

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

export const Default: Story = {
  args: {
    url: 'https://www.bundestag.de/',
    openInNewTab: true,
  },
  argTypes: {
    url: { description: 'Link to external url' },
    openInNewTab: { description: 'Should the link be opened in new tab' },
    class: { description: 'CSS/Tailwind class' },
  },
  render: (args) => ({
    props: args,
    template: `<ods-link ${argsToTemplate(args)}>
      Link with text
    </ods-link>`,
  }),
};

export const WithIcon: Story = {
  args: {
    url: 'https://www.bmas.de/DE/Service/Gesetze-und-Gesetzesvorhaben/barrierefreiheitsstaerkungsgesetz.html',
    openInNewTab: true,
  },
  render: (args) => ({
    props: args,
    template: `<ods-link ${argsToTemplate(args)}>
      <ods-accessibility-icon size="large" />
    </ods-link>`,
  }),
};