@engie-group/fluid-design-system-vue/src/components/button/NjButton.stories.ts

Fluid Design System Vue

import NjButton from '@engie-group/fluid-design-system-vue/src/components/button/NjButton.vue';
import { Meta, StoryObj } from '@storybook/vue3';

const meta: Meta<typeof NjButton> = {
  title: 'Components/Button',
  component: NjButton,
  argTypes: {
    size: {
      type: 'string',
      control: 'radio',
      options: ['xsmall', 'small', 'normal', 'large'],
    },
    variant: {
      type: 'string',
      control: 'radio',
      options: ['primary', 'secondary', 'destructive', 'inverse'],
    },
    emphasis: {
      type: 'string',
      control: 'radio',
      options: ['bold', 'subtle', 'minimal'],
    },
  },
  decorators: [
    // Change background depending on the `variant` prop.
    (_, ctx) => {
      return {
        setup: () => ({ variant: (ctx.args as { variant: string }).variant }),
        template: `
          <div
            :style="{
              background:
                variant === 'inverse'
                  ? 'var(--nj-core-color-ultramarine-800)'
                  : 'transparent',
              padding: 'var(--nj-semantic-size-spacing-16)',
            }"
          >
            <story />
          </div>
        `,
      };
    },
  ],
};

export default meta;

type Story = StoryObj<typeof NjButton>;

export const Basic: Story = {
  render: (args) => ({
    components: { NjButton },
    setup() {
      return { args };
    },
    template: `
    <nj-button v-bind="args">
      {{ args.default }}
    </nj-button>
  `,
  }),
  args: {
    default: 'Button label',
  },
};