@cbpds/web-components
Version:
Web components for the CBP Design System.
288 lines (287 loc) • 21 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
export default {
title: 'Components/Dropdown',
tags: ['beta'],
argTypes: {
label: {
control: 'text',
},
description: {
control: 'text',
},
fieldId: {
control: 'text',
},
name: {
control: 'text',
},
placeholder: {
control: 'text',
},
value: {
control: 'text',
},
filter: {
control: 'boolean',
},
multiple: {
control: 'boolean',
},
create: {
control: 'boolean',
if: { arg: 'filter', eq: true },
},
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.',
},
};
function generateItems(items) {
const html = items.map(({ label, value = label, selected }) => {
return `<cbp-dropdown-item ${value ? `value="${value}"` : ''} ${selected == true ? 'selected' : ''}>${label}</cbp-dropdown-item>`;
});
return html.join('');
}
const States = [{ "label": "Alabama", "value": "AL" }, { "label": "Alaska", "value": "AK" }, { "label": "Arizona", "value": "AZ" }, { "label": "Arkansas", "value": "AR" }, { "label": "California", "value": "CA" }, { "label": "Colorado", "value": "CO" }, { "label": "Connecticut", "value": "CT" }, { "label": "Delaware", "value": "DE" }, { "label": "District of Columbia", "value": "DC" }, { "label": "Florida", "value": "FL" }, { "label": "Georgia", "value": "GA" }, { "label": "Hawaii", "value": "HI" }, { "label": "Idaho", "value": "ID" }, { "label": "Illinois", "value": "IL" }, { "label": "Indiana", "value": "IN" }, { "label": "Iowa", "value": "IA" }, { "label": "Kansas", "value": "KS" }, { "label": "Kentucky", "value": "KY" }, { "label": "Louisiana", "value": "LA" }, { "label": "Maine", "value": "ME" }, { "label": "Maryland", "value": "MD" }, { "label": "Massachusetts", "value": "MA" }, { "label": "Michigan", "value": "MI" }, { "label": "Minnesota", "value": "MN" }, { "label": "Mississippi", "value": "MS" }, { "label": "Missouri", "value": "MO" }, { "label": "Montana", "value": "MT" }, { "label": "Nebraska", "value": "NE" }, { "label": "Nevada", "value": "NV" }, { "label": "New Hampshire", "value": "NH" }, { "label": "New Jersey", "value": "NJ" }, { "label": "New Mexico", "value": "NM" }, { "label": "New York", "value": "NY" }, { "label": "North Carolina", "value": "NC" }, { "label": "North Dakota", "value": "ND" }, { "label": "Ohio", "value": "OH" }, { "label": "Oklahoma", "value": "OK" }, { "label": "Oregon", "value": "OR" }, { "label": "Pennsylvania", "value": "PA" }, { "label": "Rhode Island", "value": "RI" }, { "label": "South Carolina", "value": "SC" }, { "label": "South Dakota", "value": "SD" }, { "label": "Tennessee", "value": "TN" }, { "label": "Texas", "value": "TX" }, { "label": "Utah", "value": "UT" }, { "label": "Vermont", "value": "VT" }, { "label": "Virginia", "value": "VA" }, { "label": "Washington", "value": "WA" }, { "label": "West Virginia", "value": "WV" }, { "label": "Wisconsin", "value": "WI" }, { "label": "Wyoming", "value": "WY" }];
const StatesDropdownTemplate = ({ label, description, fieldId, name, placeholder, filter, multiple, create, error, readonly, disabled, value, context, sx, items }) => {
return `
<cbp-form-field
${label ? `label="${label}"` : ''}
${description ? `description="${description}"` : ''}
${fieldId ? `field-id="${fieldId}"` : ''}
${readonly ? `readonly` : ''}
${disabled ? `disabled` : ''}
${error ? `error` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
>
<cbp-dropdown
${name ? `name="${name}"` : ''}
${fieldId ? `field-id="${fieldId}"` : ''}
${placeholder ? `placeholder="${placeholder}"` : ''}
${value ? `value="${value}"` : ''}
${filter ? `filter` : ''}
${multiple ? `multiple` : ''}
${create ? `create` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx=${JSON.stringify(sx)}` : ''}
>
${multiple ? generateMultiSelectItems(items, name, context) : generateItems(items)}
</cbp-dropdown>
</cbp-form-field>
`;
};
export const StatesDropdown = StatesDropdownTemplate.bind({});
StatesDropdown.storyName = "Dropdown - States";
StatesDropdown.args = {
label: "State",
value: '',
items: States
};
const Countries = [{ "label": "Afghanistan" }, { "label": "Albania" }, { "label": "Algeria" }, { "label": "Andaman Islands" }, { "label": "Andorra" }, { "label": "Angola" }, { "label": "Anguilla" }, { "label": "Annobon Island" }, { "label": "Antigua" }, { "label": "Antigua and Barbuda" }, { "label": "Argentina" }, { "label": "Armenia" }, { "label": "Aruba" }, { "label": "Ascension Island" }, { "label": "Australia" }, { "label": "Austria" }, { "label": "Azerbaijan" }, { "label": "Azores" }, { "label": "Bahamas" }, { "label": "Bahrain" }, { "label": "Balearic Islands" }, { "label": "Bangladesh" }, { "label": "Barbados" }, { "label": "Barbuda" }, { "label": "Basse Terre" }, { "label": "Belarus" }, { "label": "Belau" }, { "label": "Belgium" }, { "label": "Belize" }, { "label": "Benin" }, { "label": "Bermuda" }, { "label": "Bhutan" }, { "label": "Bolivia" }, { "label": "Bonaire" }, { "label": "Bosnia and Herzegovina" }, { "label": "Bosnia-Herzegovina" }, { "label": "Botswana" }, { "label": "Brazil" }, { "label": "British Virgin Islands" }, { "label": "Brunei" }, { "label": "Bulgaria" }, { "label": "Burkina Faso" }, { "label": "Burma" }, { "label": "Burundi" }, { "label": "Byelarus" }, { "label": "Cabinda" }, { "label": "Caicos Islands" }, { "label": "Cambodia" }, { "label": "Cameroon" }, { "label": "Canada" }, { "label": "Canary Islands" }, { "label": "Canton Islands" }, { "label": "Cape Verde" }, { "label": "Carriacou" }, { "label": "Castelrosse Islands" }, { "label": "Cayman Islands" }, { "label": "Central African Rep" }, { "label": "Chad" }, { "label": "Channel Islands" }, { "label": "Chile" }, { "label": "China" }, { "label": "Christmas Island" }, { "label": "Cocos Islands" }, { "label": "Colombia" }, { "label": "Comoros" }, { "label": "Congo" }, { "label": "Cook Islands" }, { "label": "Corsica" }, { "label": "Costa Rica" }, { "label": "Crete" }, { "label": "Croatia" }, { "label": "Cuba" }, { "label": "Curacao" }, { "label": "Cyprus" }, { "label": "Czech Republic" }, { "label": "Dem Rep of Congo" }, { "label": "Denmark" }, { "label": "Diego Garcia" }, { "label": "Djibouti" }, { "label": "Dodecanese Islands" }, { "label": "Dominica" }, { "label": "Dominican Republic" }, { "label": "East Timor" }, { "label": "Easter Island" }, { "label": "Ecuador" }, { "label": "Egypt" }, { "label": "Eire" }, { "label": "El Salvador" }, { "label": "England" }, { "label": "Equatorial Guinea" }, { "label": "Eritrea" }, { "label": "Estonia" }, { "label": "Ethiopia" }, { "label": "Falkland Islands" }, { "label": "Faroe Islands" }, { "label": "Fernando de Noronha" }, { "label": "Fiji" }, { "label": "Finland" }, { "label": "France" }, { "label": "French Guiana" }, { "label": "French Polynesia" }, { "label": "French West Indies" }, { "label": "Gabon" }, { "label": "Gambia" }, { "label": "Georgia" }, { "label": "Germany" }, { "label": "Ghana" }, { "label": "Gibraltar" }, { "label": "Grand Cayman Island" }, { "label": "Grand Terre" }, { "label": "Grand Turk" }, { "label": "Great Britain" }, { "label": "Greece" }, { "label": "Greenland" }, { "label": "Grenada" }, { "label": "Grenadine Islands" }, { "label": "Guadeloupe" }, { "label": "Guatemala" }, { "label": "Guinea" }, { "label": "Guinea-Bissau" }, { "label": "Guyana" }, { "label": "Haiti" }, { "label": "Honduras" }, { "label": "Hong Kong" }, { "label": "Hungary" }, { "label": "Iceland" }, { "label": "India" }, { "label": "Indonesia" }, { "label": "Iran" }, { "label": "Iraq" }, { "label": "Ireland" }, { "label": "Ireland, Republic of" }, { "label": "Isle of Man" }, { "label": "Israel" }, { "label": "Italy" }, { "label": "Jamaica" }, { "label": "Jan Mayen Island" }, { "label": "Japan" }, { "label": "Jerusalem" }, { "label": "Jordan" }, { "label": "Kampuchea" }, { "label": "Kazakhstan" }, { "label": "Kenya" }, { "label": "Kiribati" }, { "label": "Kuwait" }, { "label": "Kyrgyzstan" }, { "label": "Laos" }, { "label": "Latvia" }, { "label": "Lebanon" }, { "label": "Lesotho" }, { "label": "Liberia" }, { "label": "Libya" }, { "label": "Liechtenstein" }, { "label": "Lithuania" }, { "label": "Little Cayman Island" }, { "label": "Luxembourg" }, { "label": "Macao" }, { "label": "Macedonia" }, { "label": "Madagascar" }, { "label": "Madeira Islands" }, { "label": "Malawi" }, { "label": "Malaysia" }, { "label": "Maldives" }, { "label": "Mali" }, { "label": "Malta" }, { "label": "Marshall Islands" }, { "label": "Martinique" }, { "label": "Mauritania" }, { "label": "Mauritius" }, { "label": "Mexico" }, { "label": "Micronesia" }, { "label": "Midway Island" }, { "label": "Miquelon Island" }, { "label": "Moldova" }, { "label": "Monaco" }, { "label": "Mongolia" }, { "label": "Montenegro" }, { "label": "Montserrat" }, { "label": "Morocco" }, { "label": "Mozambique" }, { "label": "Myanmar" }, { "label": "Namibia" }, { "label": "Nauru" }, { "label": "Nepal" }, { "label": "Netherlands" }, { "label": "Netherlands Antilles" }, { "label": "Nevis" }, { "label": "New Caldonia" }, { "label": "New Caledonia" }, { "label": "New Guinea" }, { "label": "New Hebrides" }, { "label": "New Zealand" }, { "label": "Nicaragua" }, { "label": "Nicobar Islands" }, { "label": "Niger" }, { "label": "Nigeria" }, { "label": "North Korea" }, { "label": "Northern Ireland" }, { "label": "Norway" }, { "label": "Okinawa" }, { "label": "Oman" }, { "label": "Pagalu" }, { "label": "Pakistan" }, { "label": "Palau" }, { "label": "Panama" }, { "label": "Papua New Guinea" }, { "label": "Paraguay" }, { "label": "Peru" }, { "label": "Petit Martinique" }, { "label": "Philippines" }, { "label": "Pitcairn Island" }, { "label": "Poland" }, { "label": "Portugal" }, { "label": "Qatar" }, { "label": "Republic of Congo" }, { "label": "Republic of Georgia" }, { "label": "Republic of Macedonia" }, { "label": "Reunion" }, { "label": "Romania" }, { "label": "Russia" }, { "label": "Rwanda" }, { "label": "Ryukyu Islands" }, { "label": "Saba" }, { "label": "Samoa" }, { "label": "San Marino" }, { "label": "Sao Tome and Principe" }, { "label": "Sardinia" }, { "label": "Saudi Arabia" }, { "label": "Scotland" }, { "label": "Senegal" }, { "label": "Serbia" }, { "label": "Serbia and Montenegro" }, { "label": "Seychelles" }, { "label": "Sicily" }, { "label": "Sierra Leone" }, { "label": "Singapore" }, { "label": "Slovak Republic" }, { "label": "Slovakia" }, { "label": "Slovenia" }, { "label": "Solomon Islands" }, { "label": "Somalia" }, { "label": "Somaliland" }, { "label": "Sombrero" }, { "label": "South Africa" }, { "label": "South Korea" }, { "label": "Southwest Africa" }, { "label": "Spain" }, { "label": "Spanish Sahara" }, { "label": "Sri Lanka" }, { "label": "St Christopher" }, { "label": "St Eustatius" }, { "label": "St Helena" }, { "label": "St Kitts" }, { "label": "St Lucia" }, { "label": "St Maarten" }, { "label": "St Martin" }, { "label": "St Pierre" }, { "label": "St Vincent" }, { "label": "Sudan" }, { "label": "Sumatra" }, { "label": "Suriname" }, { "label": "Swaziland" }, { "label": "Sweden" }, { "label": "Switzerland" }, { "label": "Syria" }, { "label": "Tahiti" }, { "label": "Taiwan" }, { "label": "Tajikistan" }, { "label": "Tanzania" }, { "label": "Thailand" }, { "label": "Timor" }, { "label": "Togo" }, { "label": "Tonga" }, { "label": "Tortola" }, { "label": "Trinidad and Tobago" }, { "label": "Tristan da Cunha" }, { "label": "Tunisia" }, { "label": "Turkey" }, { "label": "Turkmenistan" }, { "label": "Turks and Caicos Is" }, { "label": "Turks Islands" }, { "label": "Tuvalu" }, { "label": "Uganda" }, { "label": "Ukraine" }, { "label": "United Arab Emirates" }, { "label": "United Kingdom" }, { "label": "United States of America" }, { "label": "Upper Volta" }, { "label": "Uruguay" }, { "label": "Uzbekistan" }, { "label": "Vanuatu" }, { "label": "Vatican City" }, { "label": "Venezuela" }, { "label": "Vietnam" }, { "label": "Wake Island" }, { "label": "Wales" }, { "label": "Wallis and Futuna Is" }, { "label": "Walvis Bay" }, { "label": "Western Sahara" }, { "label": "Western Samoa" }, { "label": "Yemen" }, { "label": "Yemen, Republic of" }, { "label": "Zaire" }, { "label": "Zambia" }, { "label": "Zimbabwe" }, { "label": "Cote D'Ivoire" }, { "label": "Rep of South Sudan" }, { "label": "Kosovo" }, { "label": "Alderney" }, { "label": "Ascension" }, { "label": "Brunei Darussalam" }, { "label": "Guernsey" }, { "label": "Ivory Coast" }, { "label": "Jersey" }, { "label": "Kowloon" }, { "label": "Niue" }, { "label": "Redonda" }, { "label": "Santa Cruz Islands" }, { "label": "Sark" }, { "label": "St Bartholomew" }, { "label": "St Christopher - Nevis" }, { "label": "St Pierre and Miquelon" }, { "label": "St Vincent - Grenadine" }, { "label": "Syrian Arab Republic" }, { "label": "Timor-Leste" }, { "label": "Eswatini" }];
const CountriesDropdownTemplate = ({ label, description, fieldId, name, placeholder, filter, create, multiple, error, readonly, disabled, value, context, sx, items }) => {
return `
<cbp-form-field
${label ? `label="${label}"` : ''}
${description ? `description="${description}"` : ''}
${readonly ? `readonly` : ''}
${disabled ? `disabled` : ''}
${error ? `error` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
>
<cbp-dropdown
${name ? `name="${name}"` : ''}
${fieldId ? `field-id="${fieldId}"` : ''}
${placeholder ? `placeholder="${placeholder}"` : ''}
${value ? `value="${value}"` : ''}
${filter ? `filter` : ''}
${multiple ? `multiple` : ''}
${create ? `create` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx=${JSON.stringify(sx)}` : ''}
>
${multiple ? generateMultiSelectItems(items, name, context) : generateItems(items)}
</cbp-dropdown>
</cbp-form-field>
`;
};
export const CountriesDropdown = CountriesDropdownTemplate.bind({});
CountriesDropdown.storyName = "Dropdown - Countries";
CountriesDropdown.args = {
label: "Country",
value: '',
items: Countries
};
function generateMultiSelectItems(items, name, context) {
const html = items.map(({ label, value, selected }) => {
return `
<cbp-dropdown-item ${value ? `value="${value}"` : ''} ${selected == true ? 'selected' : ''}>
<cbp-checkbox
${context && context != 'light-inverts' ? `context=${context}` : ''}
>
<input
type="checkbox"
name="${`${name}-selection`}"
${value ? `value=${value || label}` : ''}
/>
${label}
</cbp-checkbox>
</cbp-dropdown-item>
`;
});
return html.join('');
}
const ComboboxTemplate = ({ label, description, fieldId, name, placeholder, filter, multiple, create, error, readonly, disabled, value, context, sx, items }) => {
return `
<cbp-form-field
${label ? `label="${label}"` : ''}
${description ? `description="${description}"` : ''}
${readonly ? `readonly` : ''}
${disabled ? `disabled` : ''}
${error ? `error` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
>
<cbp-dropdown
${name ? `name="${name}"` : ''}
${fieldId ? `field-id="${fieldId}"` : ''}
${placeholder ? `placeholder="${placeholder}"` : ''}
${value ? `value="${value}"` : ''}
${filter ? `filter` : ''}
${multiple ? `multiple` : ''}
${create ? `create` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx=${JSON.stringify(sx)}` : ''}
>
${multiple ? generateMultiSelectItems(items, name, context) : generateItems(items)}
</cbp-dropdown>
</cbp-form-field>
`;
};
export const Combobox = ComboboxTemplate.bind({});
Combobox.storyName = "Dropdown - Combobox";
Combobox.args = {
label: "Combobox",
description: "A combobox is enabled by using the 'filter' property.",
value: '',
filter: true,
items: Countries,
};
const DropdownJSONTemplate = ({ label, description, fieldId, name, placeholder, items, filter, async, minimumInputLength, multiple, create, error, readonly, disabled, value, context, sx }) => {
return `
<cbp-form-field
${label ? `label="${label}"` : ''}
${description ? `description="${description}"` : ''}
${readonly ? `readonly` : ''}
${disabled ? `disabled` : ''}
${error ? `error` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
>
<cbp-dropdown
${name ? `name="${name}"` : ''}
${fieldId ? `field-id="${fieldId}"` : ''}
${placeholder ? `placeholder="${placeholder}"` : ''}
${value ? `value="${value}"` : ''}
${items ? `items='${items}'` : ''}
${filter ? `filter` : ''}
${async ? `async` : ''}
${minimumInputLength ? `minimum-input-length="${minimumInputLength}"` : ''}
${multiple ? `multiple` : ''}
${create ? `create` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx=${JSON.stringify(sx)}` : ''}
>
<!-- No dropdown items loaded by default -->
</cbp-dropdown>
</cbp-form-field>
`;
};
export const DropdownJSON = DropdownJSONTemplate.bind({});
DropdownJSON.storyName = "Dropdown - JSON items";
DropdownJSON.args = {
label: "Dropdown using JSON",
description: "A dropdown example using States data, loaded via JSON.",
items: JSON.stringify(States),
value: '',
};
const ComboboxAsyncTemplate = ({ label, description, fieldId, name, placeholder, filter, async, minimumInputLength, multiple, create, error, readonly, disabled, value, selectedLabel, context, sx }) => {
let asyncCombobox;
setTimeout(() => {
asyncCombobox = document.querySelector('cbp-dropdown[async]');
asyncCombobox.addEventListener('populateCombobox', (e) => {
let searchString = e.detail.searchString;
let filteredJSON = Countries.filter((item) => item.label.toLowerCase().indexOf(searchString) != -1);
asyncCombobox.items = filteredJSON;
});
}, 100);
return `
<cbp-form-field
${label ? `label="${label}"` : ''}
${description ? `description="${description}"` : ''}
${readonly ? `readonly` : ''}
${disabled ? `disabled` : ''}
${error ? `error` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
>
<cbp-dropdown
${name ? `name="${name}"` : ''}
${fieldId ? `field-id="${fieldId}"` : ''}
${placeholder ? `placeholder="${placeholder}"` : ''}
${value ? `value="${value}"` : ''}
${selectedLabel ? `selected-label="${selectedLabel}"` : ''}
${filter ? `filter` : ''}
${async ? `async` : ''}
${minimumInputLength ? `minimum-input-length="${minimumInputLength}"` : ''}
${multiple ? `multiple` : ''}
${create ? `create` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx=${JSON.stringify(sx)}` : ''}
>
<!-- No dropdown items loaded by default -->
</cbp-dropdown>
</cbp-form-field>
`;
};
export const ComboboxAsync = ComboboxAsyncTemplate.bind({});
ComboboxAsync.storyName = "Dropdown - Asynchronous JSON";
ComboboxAsync.argTypes = {
async: {
control: 'boolean',
},
minimumInputLength: {
control: 'number',
if: { arg: 'async', eq: true },
},
selectedLabel: {
control: 'text',
}
};
ComboboxAsync.args = {
label: "Combobox",
description: "A combobox example using Country data, fetched asynchronously after 2 key presses.",
value: '',
selectedLabel: '',
filter: true,
async: true,
minimumInputLength: 2,
multiple: false
};
//# sourceMappingURL=cbp-dropdown.stories.js.map