@trimble-oss/moduswebcomponents
Version:
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
107 lines (106 loc) • 3.84 kB
JavaScript
import { html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
import { createShadowHostClass } from "../../providers/shadow-dom/shadow-host-helper";
const content = 'The quick brown fox jumps over the lazy dog';
const meta = {
title: 'Components/Typography',
component: 'modus-wc-typography',
args: {
hierarchy: 'p',
label: content,
size: 'md',
weight: 'normal',
},
argTypes: {
hierarchy: {
control: { type: 'select' },
options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'],
},
size: {
control: { type: 'select' },
options: [
'xs',
'sm',
'md',
'lg',
'xl',
'2xl',
'3xl',
'4xl',
'5xl',
'6xl',
'7xl',
'8xl',
'9xl',
],
},
weight: {
control: { type: 'select' },
options: ['light', 'normal', 'semibold', 'bold'],
},
},
};
export default meta;
const Template = {
render: (args) => {
// prettier-ignore
return html `
<modus-wc-typography
custom-class=${ifDefined(args['custom-class'])}
hierarchy=${args.hierarchy}
label=${args.label}
size=${ifDefined(args.size)}
weight=${ifDefined(args.weight)}
></modus-wc-typography>
`;
},
};
export const Default = Object.assign({}, Template);
export const Heading1 = Object.assign(Object.assign({}, Template), { args: { hierarchy: 'h1', label: content } });
export const Heading2 = Object.assign(Object.assign({}, Template), { args: { hierarchy: 'h2', label: content } });
export const Heading3 = Object.assign(Object.assign({}, Template), { args: { hierarchy: 'h3', label: content } });
export const Heading4 = Object.assign(Object.assign({}, Template), { args: { hierarchy: 'h4', label: content } });
export const Heading5 = Object.assign(Object.assign({}, Template), { args: { hierarchy: 'h5', label: content } });
export const Heading6 = Object.assign(Object.assign({}, Template), { args: { hierarchy: 'h6', label: content } });
export const Paragraph = Object.assign(Object.assign({}, Template), { args: { hierarchy: 'p', label: content } });
export const WithLabel = Object.assign(Object.assign({}, Template), { args: {
hierarchy: 'p',
label: 'This text is set via the label prop',
} });
export const WithSlot = {
render: (args) => {
// prettier-ignore
return html `
<modus-wc-typography
custom-class=${ifDefined(args['custom-class'])}
hierarchy=${args.hierarchy}
size=${ifDefined(args.size)}
weight=${ifDefined(args.weight)}
>
This <u>text</u> is set using <em>slot</em>
</modus-wc-typography>
`;
},
};
export const ShadowDomParent = {
render: (args) => {
if (!customElements.get('typography-shadow-host')) {
const TypographyShadowHost = createShadowHostClass({
componentTag: 'modus-wc-typography',
propsMapper: (v, el) => {
var _a, _b;
const typographyEl = el;
typographyEl.customClass = v['custom-class'] || '';
typographyEl.hierarchy = v.hierarchy;
typographyEl.label = v.label;
typographyEl.size = (_a = v.size) !== null && _a !== void 0 ? _a : 'md';
typographyEl.weight = (_b = v.weight) !== null && _b !== void 0 ? _b : 'normal';
},
});
customElements.define('typography-shadow-host', TypographyShadowHost);
}
return html `<typography-shadow-host
.props=${Object.assign({}, args)}
></typography-shadow-host>`;
},
};