@engie-group/fluid-design-system-vue/src/components/icon/NjIcon.stories.ts

Fluid Design System Vue

import NjIcon from '@engie-group/fluid-design-system-vue/src/components/icon/NjIcon.vue';
import { Tokens } from '@engie-group/fluid-design-tokens';
import { Meta, StoryObj } from '@storybook/vue3';

const meta: Meta<typeof NjIcon> = {
  title: 'Components/Icon',
  id: 'icon',
  component: NjIcon,
  argTypes: {
    size: {
      type: 'string',
      control: 'radio',
      options: [...Object.keys(Tokens.semantic.size.icon), 'inherit'],
    },
    variant: {
      type: 'string',
      control: 'select',
      options: [
        'secondary',
        'tertiary',
        'inherit',
        'inverse',
        'grey',
        'brand',
        'teal',
        'pink',
        'orange',
        'red',
        'green',
        'ultramarine',
        'yellow',
        'purple',
      ],
    },
  },
};

export default meta;

type Story = StoryObj<typeof NjIcon>;

export const Basic: Story = {
  render: (args) => ({
    components: { NjIcon },
    setup: () => ({ args }),
    template: `
      <nj-icon v-bind="args"/>
    `,
  }),
  args: {
    name: 'language',
  },
};