@trimble-oss/moduswebcomponents/collection/components/modus-wc-typography/modus-wc-typography.stories.js

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

import { html, render } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
// Slot content was lost due to rendering issues when changing the "variant" attribute.
// Because of this, each variant is rendered as a unique story below.
const content = 'The quick brown fox jumps over the lazy dog';
const meta = {
    title: 'Components/Typography',
    component: 'modus-wc-typography',
    args: {
        size: 'md',
        variant: 'p',
        weight: 'normal',
    },
    argTypes: {
        size: {
            control: { type: 'select' },
            options: ['xs', 'sm', 'md', 'lg'],
        },
        variant: {
            control: { type: 'select' },
            options: ['body', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'],
        },
        weight: {
            control: { type: 'select' },
            options: ['light', 'normal', 'semibold', 'bold'],
        },
    },
    decorators: [
        (story) => {
            // Create a stable container that won't be recreated on re-renders
            const container = document.createElement('div');
            const template = document.createElement('template');
            template.innerHTML = content;
            const renderStory = () => {
                render(story(), container);
                // Ensure slot content is present after render
                const typography = container.querySelector('modus-wc-typography');
                if (typography && !typography.textContent) {
                    typography.textContent = template.innerHTML;
                }
            };
            renderStory();
            return container;
        },
    ],
};
export default meta;
export const Default = {
    render: (args) => html `
    <modus-wc-typography
      custom-class=${ifDefined(args['custom-class'])}
      size=${ifDefined(args.size)}
      variant=${args.variant}
      weight=${ifDefined(args.weight)}
    ></modus-wc-typography>
  `,
};
export const Body = {
    args: {
        variant: 'body',
    },
};
export const Heading1 = {
    args: {
        variant: 'h1',
    },
};
export const Heading2 = {
    args: {
        variant: 'h2',
    },
};
export const Heading3 = {
    args: {
        variant: 'h3',
    },
};
export const Heading4 = {
    args: {
        variant: 'h4',
    },
};
export const Heading5 = {
    args: {
        variant: 'h5',
    },
};
export const Heading6 = {
    args: {
        variant: 'h6',
    },
};
export const Paragraph = {
    args: {
        variant: 'p',
    },
};