@cbpds/web-components/dist/collection/stories/tests/dropdown-tests.stories.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
export default {
    title: 'Test/Dropdown Edge Cases',
    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('');
}
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 ShortList = [{ "label": "Alabama", "value": "AL" }, { "label": "Alaska", "value": "AK" }, { "label": "Arizona", "value": "AZ" }];
const EmptyDropdownTemplate = ({ label, description, fieldId, name, placeholder, filter, multiple, create, error, readonly, disabled, value, context, sx }) => {
    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)}` : ''}
      >
        <!-- No dropdown items loaded by default -->
      </cbp-dropdown>
    </cbp-form-field>
  `;
};
export const EmptyDropdown = EmptyDropdownTemplate.bind({});
EmptyDropdown.storyName = "Dropdown - Empty";
EmptyDropdown.args = {
    label: "Field Label",
    value: '',
};
const DebugDropdownTemplate = ({ label, description, fieldId, name, placeholder, filter, multiple, create, error, readonly, disabled, value, context, sx }) => {
    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(ShortList, name, context) : generateItems(ShortList)}
      </cbp-dropdown>
    </cbp-form-field>
  `;
};
export const DebugDropdown = DebugDropdownTemplate.bind({});
DebugDropdown.storyName = "Dropdown - Short";
DebugDropdown.args = {
    label: "Field Label",
    description: "A short dropdown for easier debugging",
    name: 'multiselect',
    value: '',
};
//# sourceMappingURL=dropdown-tests.stories.js.map