@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
129 lines (127 loc) • 3.58 kB
JavaScript
import { html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
import { createShadowHostClass } from "../../providers/shadow-dom/shadow-host-helper";
import { getAvailableLogos } from "./logo-constants";
const meta = {
title: 'Components/Logo',
component: 'modus-wc-logo',
args: {
name: 'trimble',
emblem: false,
},
argTypes: {
name: {
control: { type: 'select' },
options: getAvailableLogos(),
},
emblem: {
control: { type: 'boolean' },
},
},
};
export default meta;
const Template = {
render: (args) => {
return html `
<modus-wc-logo
name="${args.name}"
?emblem="${args.emblem}"
alt="${ifDefined(args.alt)}"
custom-class="${ifDefined(args['custom-class'])}"
></modus-wc-logo>
`;
},
};
export const Default = Object.assign({}, Template);
export const CustomSizeWithClass = {
render: () => {
return html `
<style>
.logo-small {
width: 80px;
}
.logo-medium {
width: 150px;
}
.logo-large {
width: 250px;
}
.emblem-xs {
width: 80px;
height: 80px;
}
.emblem-sm {
width: 150px;
height: 150px;
}
.emblem-lg {
width: 250px;
height: 250px;
}
</style>
<div style="display: flex; flex-direction: column; gap: 3rem;">
<div>
<h4>Full Logos - Custom Sizes</h4>
<div
style="display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;"
>
<modus-wc-logo
name="trimble"
custom-class="logo-small"
></modus-wc-logo>
<modus-wc-logo
name="trimble"
custom-class="logo-medium"
></modus-wc-logo>
<modus-wc-logo
name="trimble"
custom-class="logo-large"
></modus-wc-logo>
</div>
</div>
<div>
<h4>Emblems - Custom Sizes</h4>
<div
style="display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;"
>
<modus-wc-logo
name="trimble"
emblem
custom-class="emblem-xs"
></modus-wc-logo>
<modus-wc-logo
name="trimble"
emblem
custom-class="emblem-sm"
></modus-wc-logo>
<modus-wc-logo
name="trimble"
emblem
custom-class="emblem-lg"
></modus-wc-logo>
</div>
</div>
</div>
</div>
`;
},
};
export const ShadowDomParent = {
render: (args) => {
if (!customElements.get('logo-shadow-host')) {
const LogoShadowHost = createShadowHostClass({
componentTag: 'modus-wc-logo',
propsMapper: (v, el) => {
var _a;
const logoEl = el;
logoEl.name = v.name;
logoEl.emblem = Boolean(v.emblem);
logoEl.alt = (_a = v.alt) !== null && _a !== void 0 ? _a : '';
logoEl.customClass = v['custom-class'] || '';
},
});
customElements.define('logo-shadow-host', LogoShadowHost);
}
return html `<logo-shadow-host .props=${Object.assign({}, args)}></logo-shadow-host>`;
},
};