@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
145 lines (139 loc) • 5.35 kB
JavaScript
import { withActions } from "@storybook/addon-actions/decorator";
import { html } from "lit";
import { ifDefined } from "lit/directives/if-defined.js";
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>
`,
};
const errorFeedback = {
level: 'error',
message: 'Value is required.',
};
export const WithErrorFeedback = {
render: (args) => html `
<modus-wc-select
aria-label="Select input"
.feedback=${errorFeedback}
label=${ifDefined(args.label)}
.options=${[]}
?required=${true}
.value=${args.value}
></modus-wc-select>
`,
};
export const Migration = {
parameters: {
docs: {
description: {
story: `
#### Breaking Changes
- 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>`,
};