@cbpds/web-components
Version:
Web components for the CBP Design System.
201 lines (185 loc) • 6.4 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
export default {
title: "Test/Form Processing",
argTypes: {
name: {
control: 'text',
},
action: {
control: 'text',
},
method: {
control: 'select',
options: ["get", "post"]
},
enctype: {
control: 'select',
options: ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"]
},
},
args: {
name: 'test',
action: '/?path=/story/test-form-processing--form-processing',
method: 'post',
enctype: 'multipart/form-data'
},
};
const Prefix = '[{"label":"Attorney","value":"Attorney"},{"label":"Coach","value":"Coach"},{"label":"Dr.","value":"Dr."},{"label":"Father","value":"Father"},{"label":"Governor","value":"Governor"},{"label":"Honorable","value":"Honorable"},{"label":"Officer","value":"Officer"},{"label":"Master","value":"Master"},{"label":"Miss","value":"Miss"},{"label":"Mr.","value":"Mr."},{"label":"Mrs","value":"Mrs."},{"label":"Ms.","value":"Ms"},{"label":"President","value":"President"},{"label":"Professor","value":"Professor"},{"label":"Reverend","value":"Reverend"}]';
const Suffix = '[{"label":"I","value":"First"},{"label":"II","value":"Second"},{"label":"III","value":"Third"},{"label":"IV","value":"Fourth"},{"label":"IX","value":"Ninth"},{"label":"JR","value":"Junior"},{"label":"SR","value":"Senior"},{"label":"V","value":"Fifth"},{"label":"VI","value":"Sixth"},{"label":"VII","value":"Seventh"},{"label":"VIII","value":"Eighth"},{"label":"X","value":"Tenth"},{"label":"XI","value":"Eleventh"},{"label":"XII","value":"Twelfth"},{"label":"XIII","value":"Thirteenth"},{"label":"XIV","value":"Fourteenth"},{"label":"XV","value":"Fifteenth"},{"label":"XVI","value":"Sixteenth"},{"label":"XVII","value":"Seventeenth"}]';
const FormProcessingTemplate = ({ name, action, method, enctype }) => {
setTimeout(() => {
const formEl = document.querySelector(`form[name="${name}"]`);
const submitButton = document.querySelector('button[type=submit]');
submitButton.addEventListener('click', e => {
console.log('submit pressed', submitButton, e);
});
formEl.addEventListener('submit', e => {
console.log('form submit', formEl, e);
e.preventDefault();
let formData = new FormData(formEl);
for (let [name, value] of formData) {
console.log(`${name} =`, value);
}
console.log('formData (array spread): ', [...formData]);
console.log('formData as JS Object: ', Object.fromEntries(formData.entries()));
});
}, 500);
return `
<form
name="${name}"
action="${action}"
method="${method}"
${enctype ? `enctype="${enctype}"` : ''}
target="_top"
>
<cbp-form-field group
label="User's Full Name"
description="Required."
>
<cbp-flex
wrap="wrap"
gap="var(--cbp-space-4x)"
breakpoint="20rem"
>
<cbp-flex-item
flex-basis="10rem"
flex-shrink="0"
>
<cbp-form-field
label="Prefix"
>
<cbp-dropdown name="prefix" items='${Prefix}'></cbp-dropdown>
</cbp-form-field>
</cbp-flex-item>
<cbp-flex-item
flex-basis="10rem"
flex-grow="1"
>
<cbp-form-field
label="First Name"
name="firstname"
>
<input name="firstname" type="text" />
</cbp-form-field>
</cbp-flex-item>
<cbp-form-field
label="M.I."
sx='{"width":"5ch"}'
>
<input name="middleinitial" type="text" maxlength="1" />
</cbp-form-field>
<cbp-flex-item
flex-basis="10rem"
flex-grow="1"
>
<cbp-form-field
label="Last Name"
>
<input name="lastname" type="text" />
</cbp-form-field>
</cbp-flex-item>
<cbp-flex-item
flex-basis="10rem"
flex-shrink="0"
>
<cbp-form-field
label="Suffix"
>
<cbp-dropdown name="suffix" items='${Suffix}'></cbp-dropdown>
</cbp-form-field>
</cbp-flex-item>
</cbp-flex>
</cbp-form-field>
<cbp-form-field group
label="Checklist Group Label"
description="Field description."
>
<cbp-checkbox>
<input
type="checkbox"
name="checklist"
value="1"
/>
Checkbox 1
</cbp-checkbox>
<cbp-checkbox>
<input
type="checkbox"
name="checklist"
value="2"
/>
Checkbox 2
</cbp-checkbox>
<cbp-checkbox>
<input
type="checkbox"
name="checklist"
value="3"
/>
Checkbox 3
</cbp-checkbox>
<cbp-checkbox>
<input
type="checkbox"
name="checklist"
value="4"
/>
Checkbox 4
</cbp-checkbox>
</cbp-form-field>
<cbp-form-field
label="Field Label"
description="Field description."
>
<cbp-slider>
<input
type="range"
name="range"
/>
</cbp-slider>
</cbp-form-field>
<cbp-form-field
label="Single File"
description="Field description."
>
<cbp-file-input name="singlefile">
<input type="file" />
</cbp-file-input>
</cbp-form-field>
<cbp-form-field
label="Multiple Files"
description="Field description."
>
<cbp-file-input name="multifile" multiple>
<input type="file" />
</cbp-file-input>
</cbp-form-field>
<cbp-button type="submit">Submit</cbp-button>
<cbp-button type="reset" color="secondary" fill="outline">Reset</cbp-button>
</form>
`;
};
export const FormProcessing = FormProcessingTemplate.bind({});
//# sourceMappingURL=form-processing.stories.js.map