@mozaic-ds/vue/src/components/iconbutton/MIconButton.stories.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import type { Meta, StoryObj } from '@storybook/vue3-vite';

import MIconButton from './MIconButton.vue';
import {
  ChevronRight20,
  ChevronRight24,
  ChevronRight32,
} from '@mozaic-ds/icons-vue';

const meta: Meta<typeof MIconButton> = {
  title: 'Action/Icon Button',
  component: MIconButton,
  tags: ['v2'],
  parameters: {
    docs: {
      description: {
        component:
          'Buttons are key interactive elements used to perform actions and can be used as standalone element, or as part of another component. Their appearance depends on the type of action required from the user and the context in which they are used.',
      },
    },
  },
  args: {
    icon: '<ChevronRight24/>',
    ariaLabel: 'Go to next page',
  },
  argTypes: {
    ariaLabel: {
      table: {
        disable: true,
      },
    },
    $slots: {
      table: {
        disable: true,
      },
    },
  },
  render: (args) => ({
    components: { MIconButton, ChevronRight20, ChevronRight24, ChevronRight32 },
    setup() {
      return { args };
    },
    template: `
      <MIconButton 
        v-bind="args"
      >
        <template v-if="${'icon' in args}" v-slot:icon>${args.icon}</template>
      </MIconButton>
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MIconButton>;

export const Filled: Story = {
  parameters: {
    docs: {
      description: {
        story:
          'Most visible variant, used to emphasize the primary action on a page or a section.',
      },
    },
  },
};

export const Outlined: Story = {
  args: { outlined: true },
  parameters: {
    docs: {
      description: {
        story:
          'Complements the filled button for secondary actions that require less attention. It can also be used when multiple actions are available, without one standing out as more important.',
      },
    },
  },
};

export const Ghost: Story = {
  args: { ghost: true },
  parameters: {
    docs: {
      description: {
        story:
          'More discreet, should be used exclusively for canceling or ignoring a task or action.',
      },
    },
  },
};

export const Loading: Story = {
  args: { isLoading: true },
  parameters: {
    docs: {
      description: {
        story:
          'A loader replaces the icon to indicate that an action is in progress. Mouse events are prohibited.',
      },
    },
  },
};

export const Standard: Story = {
  args: { appearance: 'standard' },
  parameters: {
    docs: {
      description: {
        story:
          'The standard style is a neutral variant used for general actions that don’t require special attention, ensuring a consistent and accessible look.',
      },
    },
  },
};

export const Accent: Story = {
  args: { appearance: 'accent' },
  parameters: {
    docs: {
      description: {
        story:
          'The accent style is a more prominent variant used for engaging actions that require attention, such as conversions or highlighting specific tasks, ensuring a vibrant and accessible appearance.',
      },
    },
  },
};

export const Danger: Story = {
  args: { appearance: 'danger' },
  parameters: {
    docs: {
      description: {
        story:
          'The danger style is intended for critical or irreversible actions, such as deleting sensitive data (e.g., deleting a profile picture is not considered sensitive), ensuring that users are clearly warned before proceeding.',
      },
    },
  },
};

export const Inverse: Story = {
  globals: {
    backgrounds: { value: 'inverse' },
  },
  args: { appearance: 'inverse' },
  parameters: {
    docs: {
      description: {
        story:
          'The inverse style must be used exclusively on dark backgrounds, providing contrast and clarity.',
      },
    },
  },
};

export const Small: Story = {
  args: {
    size: 's',
    icon: '<ChevronRight20/>',
  },
  parameters: {
    docs: {
      description: {
        story:
          'Exclusively used on desktop interfaces. Ideal for complex interfaces with a high volume of content.',
      },
    },
  },
};

export const Medium: Story = {
  args: {
    size: 'm',
    icon: '<ChevronRight24/>',
  },
  parameters: {
    docs: {
      description: {
        story:
          'This is the minimum size recommended for mobile use, and it is the default size based on standard height. It provides an adequate touch area for mobile devices.',
      },
    },
  },
};

export const Large: Story = {
  args: {
    size: 'l',
    icon: '<ChevronRight32/>',
  },
  parameters: {
    docs: {
      description: {
        story:
          'Primarily used on landing pages or layouts with generous spacing. It may also be applicable in more complex scenarios, such as for small mobile devices used by warehouse employees.',
      },
    },
  },
};