@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";
import { createShadowHostClass } from "../../providers/shadow-dom/shadow-host-helper";
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>
    `;
    },
};
export const ShadowDomParent = {
    render: (args) => {
        if (!customElements.get('skeleton-shadow-host')) {
            const SkeletonShadowHost = createShadowHostClass({
                componentTag: 'modus-wc-skeleton',
                propsMapper: (v, el) => {
                    var _a, _b, _c;
                    const skeletonEl = el;
                    skeletonEl.customClass = v['custom-class'] || '';
                    skeletonEl.height = (_a = v.height) !== null && _a !== void 0 ? _a : '1.5rem';
                    skeletonEl.shape = (_b = v.shape) !== null && _b !== void 0 ? _b : 'rectangle';
                    skeletonEl.width = (_c = v.width) !== null && _c !== void 0 ? _c : '100%';
                },
            });
            customElements.define('skeleton-shadow-host', SkeletonShadowHost);
        }
        return html `<skeleton-shadow-host
      .props=${Object.assign({}, args)}
    ></skeleton-shadow-host>`;
    },
};