import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import './KpiItem.svelte';
const meta = {
    title: 'Status/Kpi Item',
    component: 'm-kpi-item',
    tags: ['v2'],
    argTypes: {
        status: {
            control: 'radio',
            options: ['info', 'success', 'warning', 'error', 'neutral'],
        },
        trend: {
            control: { type: 'radio' },
            options: [undefined, 'increasing', 'decreasing', 'stable'],
        },
        size: {
            control: 'inline-radio',
            options: ['s', 'm', 'l'],
        },
    },
    args: {
        value: '99.99%',
        label: 'Label',
        size: 's',
    },
    render: (args) => html `
    <m-kpi-item
      value=${args.value}
      label=${ifDefined(args.label)}
      information=${ifDefined(args.information)}
      status=${ifDefined(args.status)}
      trend=${ifDefined(args.trend)}
      size=${ifDefined(args.size)}
    >
    </m-kpi-item>
  `,
};
export default meta;
export const LargeWithIconAndInformation = {
    args: {
        trend: 'increasing',
        information: '> 10% expected',
        size: 'l',
    },
};
export const MediumWithIconAndLabel = {
    args: {
        trend: 'increasing',
        size: 'm',
    },
};
export const SmallWithIcon = {
    args: {
        trend: 'increasing',
        size: 's',
    },
};
