@mozaic-ds/vue/src/components/kpiitem/MKpiItem.stories.ts

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

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

const meta: Meta<typeof MKpiItem> = {
  title: 'Status/Kpi Item',
  component: MKpiItem,
  parameters: {
    docs: {
      description: {
        component:
          'A KPI Item is used to display Key Performance Indicators (KPIs) within an interface, providing a quick and clear visualization of essential data. It often includes contextual elements such as labels, trends, or status indicators to help users interpret the information at a glance. KPI Items are commonly used in dashboards, reports, and analytics tools to highlight critical metrics and facilitate data-driven decision-making.',
      },
    },
  },
  args: {
    value: '99.99%',
    label: 'Label',
    size: 's',
  },
  argTypes: {
    size: {
      control: { type: 'inline-radio' },
      options: ['s', 'm', 'l'],
    },
    trend: {
      control: { type: 'radio' },
      options: ['increasing', 'decreasing', 'stable', undefined],
    },
    status: {
      control: { type: 'radio' },
      options: ['info', 'warning', 'error', 'success', 'neutral'],
    },
  },
  render: (args) => ({
    components: { MKpiItem },
    setup() {
      return { args };
    },
    template: `
      <MKpiItem v-bind="args"></MKpiItem>
    `,
  }),
};

export default meta;

type Story = StoryObj<typeof MKpiItem>;

export const LargeWithIconAndInformation: Story = {
  args: {
    trend: 'increasing',
    information: '> 10% expected',
    size: 'l',
  },
};

export const MediumWithIconAndLabel: Story = {
  args: {
    trend: 'increasing',
    size: 'm',
  },
};

export const SmallWithIcon: Story = {
  args: {
    trend: 'increasing',
    size: 's',
  },
};