@trimble-oss/moduswebcomponents/collection/components/modus-wc-skeleton/modus-wc-skeleton.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 } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
const meta = {
    title: 'Components/Skeleton',
    component: 'modus-wc-skeleton',
    args: {
        'custom-class': '',
        height: '1.5rem',
        shape: 'rectangle',
        width: '100%',
    },
    argTypes: {
        shape: {
            control: {
                type: 'select',
            },
            options: ['circle', 'rectangle'],
        },
    },
    parameters: {
        layout: 'padded',
    },
};
export default meta;
export const Default = {
    render: (args) => {
        return html `
      <modus-wc-skeleton
        custom-class=${ifDefined(args['custom-class'])}
        height=${ifDefined(args.height)}
        shape=${ifDefined(args.shape)}
        width=${ifDefined(args.width)}
      ></modus-wc-skeleton>
    `;
    },
};
export const Circle = {
    render: () => {
        return html `
      <modus-wc-skeleton
        height="5rem"
        shape="circle"
        width="5rem"
      ></modus-wc-skeleton>
    `;
    },
};
export const Square = {
    render: () => {
        return html `
      <modus-wc-skeleton height="5rem" width="5rem"></modus-wc-skeleton>
    `;
    },
};
export const Composed = {
    render: () => {
        // prettier-ignore
        return html `
<style>
  .skeleton-container {
    width: 13rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .skeleton-profile {
    display: flex;
    gap: 1rem;
  }

  .skeleton-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
</style>
<div class="skeleton-container">
  <div class="skeleton-profile">
    <modus-wc-skeleton
      height="4rem"
      shape="circle"
      width="4rem"
    ></modus-wc-skeleton>
    <div class="skeleton-text">
      <modus-wc-skeleton width="5rem"></modus-wc-skeleton>
      <modus-wc-skeleton width="7rem"></modus-wc-skeleton>
    </div>
  </div>
  <modus-wc-skeleton height="8rem"></modus-wc-skeleton>
</div>
    `;
    },
};