@cbpds/web-components
Version:
Web components for the CBP Design System.
108 lines (107 loc) • 3.47 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
export default {
title: 'Components/Form Field',
tags: ['beta'],
argTypes: {
label: {
control: 'text',
},
description: {
control: 'text',
},
fieldId: {
control: 'text',
},
error: {
control: 'boolean',
},
readonly: {
control: 'boolean',
},
disabled: {
control: 'boolean',
},
context: {
control: 'select',
options: ["light-inverts", "light-always", "dark-inverts", "dark-always"]
},
sx: {
description: 'Supports adding inline styles as an object of key-value pairs comprised of CSS properties and values. Values should reference design tokens when possible.',
control: 'object',
},
},
args: {
label: 'Field Label',
description: 'Field description.',
},
};
const TextInputTemplate = ({ label, description, fieldId, error, readonly, disabled, value, context, sx }) => {
return `
<cbp-form-field
${label ? `label="${label}"` : ''}
${description ? `description="${description}"` : ''}
${fieldId ? `field-id="${fieldId}"` : ''}
${error ? `error` : ''}
${disabled ? `disabled` : ''}
${readonly ? `readonly` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx=${JSON.stringify(sx)}` : ''}
>
<input type="text" name="textinput" ${value ? `value="${value}"` : ''} />
</cbp-form-field>
`;
};
export const TextInput = TextInputTemplate.bind({});
TextInput.args = {
value: '',
};
const TextareaTemplate = ({ label, description, fieldId, error, readonly, disabled, value, context, sx }) => {
return `
<cbp-form-field
${label ? `label="${label}"` : ''}
${description ? `description="${description}"` : ''}
${fieldId ? `field-id="${fieldId}"` : ''}
${error ? `error` : ''}
${disabled ? `disabled` : ''}
${readonly ? `readonly` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx=${JSON.stringify(sx)}` : ''}
>
<textarea name="textarea">${value}</textarea>
</cbp-form-field>
`;
};
export const Textarea = TextareaTemplate.bind({});
Textarea.args = {
value: '',
};
const SelectTemplate = ({ label, description, fieldId, error, disabled, context, sx }) => {
return `
<cbp-form-field
${label ? `label="${label}"` : ''}
${description ? `description="${description}"` : ''}
${fieldId ? `field-id="${fieldId}"` : ''}
${error ? `error` : ''}
${disabled ? `disabled` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx=${JSON.stringify(sx)}` : ''}
>
<select name="select">
<option value=""></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
</select>
</cbp-form-field>
`;
};
export const Select = SelectTemplate.bind({});
Select.args = {};
//# sourceMappingURL=cbp-form-field.stories.js.map