@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
190 lines (184 loc) • 7.28 kB
JavaScript
import { withActions } from "@storybook/addon-actions/decorator";
import { html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
import { createShadowHostClass } from "../../providers/shadow-dom/shadow-host-helper";
const options = [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
];
const meta = {
title: 'Components/Forms/Select',
component: 'modus-wc-select',
args: {
bordered: true,
disabled: false,
label: 'Label',
options,
size: 'md',
value: '',
},
argTypes: {
feedback: {
description: 'Feedback prop for input components',
table: {
type: {
detail: `
Interface: IInputFeedbackProp
Properties:
- level ('error' | 'info' | 'success' | 'warning'): The feedback level
- message (string, optional): The feedback message
`,
},
},
},
'input-aria-invalid': {
control: { type: 'select' },
options: ['true', 'false'],
},
options: {
description: 'Array of option objects for the select dropdown',
table: {
type: {
detail: `
Interface: ISelectOption
Properties:
- disabled (boolean, optional): Whether the option is disabled and cannot be selected
- label (string): Display text for the option
- value (string): The value of the option
`,
},
},
},
size: {
control: { type: 'select' },
options: ['sm', 'md', 'lg'],
},
},
decorators: [withActions],
parameters: {
actions: {
handles: ['inputBlur', 'inputChange', 'inputFocus'],
},
},
};
export default meta;
export const Default = {
render: (args) => html `
<modus-wc-select
aria-label="Select input"
?bordered=${args.bordered}
custom-class=${ifDefined(args['custom-class'])}
?disabled=${args.disabled}
.feedback=${args.feedback}
input-aria-invalid=${ifDefined(args['input-aria-invalid'])}
input-id=${ifDefined(args['input-id'])}
input-tab-index=${ifDefined(args['input-tab-index'])}
label=${ifDefined(args.label)}
name=${ifDefined(args.name)}
.options=${args.options}
?required=${args.required}
size=${ifDefined(args.size)}
.value=${args.value}
></modus-wc-select>
<script>
const options = [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
];
// Adding this block to show how to set options via JS
// const select = document.querySelector('modus-wc-select');
// select.options = options;
</script>
`,
};
const errorFeedback = {
level: 'error',
message: 'Value is required.',
};
export const WithErrorFeedback = {
render: (args) => html `
<modus-wc-select
aria-label="Select input"
.feedback=${errorFeedback}
id="error-select"
label=${ifDefined(args.label)}
.options=${[]}
?required=${true}
.value=${args.value}
></modus-wc-select>
<script>
// Adding this block to show how to set feedback via JS
// const select = document.getElementById('error-select');
// select.feedback = { level: 'error', message: 'Value is required.' };
</script>
`,
};
export const ShadowDomParent = {
render: (args) => {
// Create a unique shadow host for select component
if (!customElements.get('select-shadow-host')) {
const SelectShadowHost = createShadowHostClass({
componentTag: 'modus-wc-select',
propsMapper: (v, el) => {
const selectEl = el;
selectEl.bordered = Boolean(v.bordered);
selectEl.customClass = v['custom-class'] || '';
selectEl.disabled = Boolean(v.disabled);
selectEl.inputId = v['input-id'] || '';
selectEl.inputTabIndex = v['input-tab-index'] || 0;
selectEl.label = v.label || '';
selectEl.name = v.name || '';
selectEl.options = v.options;
selectEl.required = Boolean(v.required);
selectEl.size = v.size || 'md';
selectEl.value = v.value;
},
});
customElements.define('select-shadow-host', SelectShadowHost);
}
return html `<select-shadow-host
.props=${Object.assign({}, args)}
></select-shadow-host>`;
},
};
export const Migration = {
parameters: {
docs: {
description: {
story: `
- In 1.0 input state was maintained by the component. 2.0 components encourage users to follow a controlled
input model. See the Form Inputs [documentation](/docs/documentation-form-inputs--docs) for
additional info and examples.
- The options format has changed to use a standardized \`ISelectOption\` object array.
- Size values have changed from verbose names (\`medium\`, \`large\`) to abbreviations (\`sm\`, \`md\`, \`lg\`).
#### Prop Mapping
| 1.0 Prop | 2.0 Prop | Notes |
|-----------------------|---------------------|------------------------------------------------------|
| aria-label | aria-label | |
| disabled | disabled | |
| error-text | feedback.message | Use \`feedback\` level |
| helper-text | | Not carried over |
| label | label | |
| options | options | Format changed to require array of \`ISelectOption\` objects |
| options-display-prop | | Not carried over |
| placeholder | | Not carried over |
| required | required | |
| size | size | \`medium\` → \`md\`, \`large\` → \`lg\` |
| valid-text | feedback.message | Use \`feedback\` level |
| value | value | |
#### Event Mapping
| 1.0 Event | 2.0 Event | Notes |
|--------------|-------------|------------------|
| valueChange | inputChange | |
| inputBlur | inputBlur | |
`,
},
},
controls: { disable: true },
canvas: { disable: true },
},
render: () => html `<div></div>`,
};