Skip to content

Commit

Permalink
feat: add controls to existing stories
Browse files Browse the repository at this point in the history 
Add stories using the Dev Server: Storybook guide
  • Loading branch information
@florianstancioiu
florianstancioiu committed Mar 21, 2024
1 parent 58a9bae commit c17b2d4
Showing 1 changed file with 177 additions and 107 deletions.
284 changes: 177 additions & 107 deletions stories/cosmoz-autocomplete.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,118 +5,188 @@ import { colors } from './data';
export default {
title: 'Autocomplete',
component: 'cosmoz-autocomplete',
tags: ['autodocs'],
argTypes: {
label: { control: 'text' },
textProperty: { control: 'text' },
limit: { control: 'number' },
defaultIndex: { control: 'number' },
hideEmpty: { control: 'boolean' },
disabled: { control: 'boolean' },
placeholder: { control: 'text' },
showSingle: { control: 'boolean' },
preserveOrder: { control: 'boolean' },
min: { control: 'number' },
wrap: { control: 'boolean' },
},
};
const css = html`
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500&display=swap');
cosmoz-autocomplete,
cosmoz-listbox {
font-family: 'Inter', sans-serif;
}
</style>
`,
basic = () => html`
${css}
<cosmoz-autocomplete
.label=${'Choose color'}
.source=${colors}
.textProperty=${'text'}
.value=${[colors[0], colors[3]]}
></cosmoz-autocomplete>
`,
single = () => html`
${css}
<cosmoz-autocomplete
.label=${'Choose color'}
.source=${colors}
.limit=${1}
.textProperty=${'text'}
.value=${colors[2]}
></cosmoz-autocomplete>
`,
hideEmpty = () => html`
${css}
<cosmoz-autocomplete
.label=${'Choose color'}
.source=${colors}
.limit=${1}
.textProperty=${'text'}
.value=${colors[2]}
hide-empty
></cosmoz-autocomplete>
`,
defaultIndex = () => html`
${css}
<cosmoz-autocomplete
.label=${'Choose color'}
.source=${colors}
.limit=${1}
.textProperty=${'text'}
default-index="-1"
></cosmoz-autocomplete>
<cosmoz-autocomplete
.label=${'Choose color (single value)'}
.source=${colors.slice(0, 1)}
.limit=${1}
.textProperty=${'text'}
default-index="-1"
></cosmoz-autocomplete>
`,
disabled = () => html`
${css}
<cosmoz-autocomplete
disabled
.label=${'Choose color'}
.source=${colors}
.limit=${1}
.textProperty=${'text'}
.value=${colors[2]}
></cosmoz-autocomplete>
`,
placeholder = () => html`
${css}
<cosmoz-autocomplete
.placeholder=${'Choose color'}
.source=${colors}
.limit=${1}
.textProperty=${'text'}
.value=${colors[0]}
></cosmoz-autocomplete>
`;

export { basic, single, hideEmpty, defaultIndex, disabled, placeholder };
const CSS = html`
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500&display=swap');
cosmoz-autocomplete,
cosmoz-listbox {
font-family: 'Inter', sans-serif;
}
</style>
`;

const Autocomplete = ({
source,
limit,
textProperty,
min,
label = '',
value = [],
hideEmpty = false,
disabled = false,
placeholder = '',
defaultIndex = 0,
showSingle = false,
preserveOrder = false,
wrap = false,
}) => html`
${CSS}
<cosmoz-autocomplete
.label=${label}
.placeholder=${placeholder}
.source=${source}
.textProperty=${textProperty}
.limit=${limit}
.value=${value}
.hideEmpty=${hideEmpty}
.defaultIndex=${defaultIndex}
.disabled=${disabled}
.showSingle=${showSingle}
.preserveOrder=${preserveOrder}
.min=${min}
.wrap=${wrap}
></cosmoz-autocomplete>
`;

export const Basic = Autocomplete.bind({});
Basic.args = {
label: 'Choose color',
source: colors,
textProperty: 'text',
value: [colors[0], colors[3]],
};

export const Single = Autocomplete.bind({});
Single.args = {
label: 'Choose color',
source: colors,
textProperty: 'text',
limit: 1,
value: [colors[2]],
};

export const overflown = () =>
html` ${css}
<cosmoz-autocomplete
.label=${'Choose color'}
.source=${colors}
.textProperty=${'text'}
.value=${[colors[0], colors[1], colors[2]]}
style="max-width: 170px"
></cosmoz-autocomplete>`;
export const HideEmpty = Autocomplete.bind({});
HideEmpty.args = {
label: 'Choose color',
source: colors,
textProperty: 'text',
limit: 1,
value: [colors[2]],
hideEmpty: true,
};

export const wrap = () =>
html` ${css}
<cosmoz-autocomplete
.label=${'Choose color'}
.source=${colors}
.textProperty=${'text'}
.value=${[colors[0], colors[1], colors[2]]}
wrap
style="max-width: 170px"
></cosmoz-autocomplete>`;
export const DefaultIndex = Autocomplete.bind({});
DefaultIndex.args = {
label: 'Choose color',
source: colors,
textProperty: 'text',
limit: 1,
defaultIndex: -1,
};

export const select = () => html`
${css}
export const DefaultIndexSingleValue = Autocomplete.bind({});
DefaultIndexSingleValue.args = {
label: 'Choose color (single value)',
source: colors.slice(0, 1),
textProperty: 'text',
limit: 1,
defaultIndex: -1,
};

export const Disabled = Autocomplete.bind({});
Disabled.args = {
label: 'Choose color',
source: colors,
textProperty: 'text',
limit: 1,
value: colors[0],
disabled: true,
};

export const Placeholder = Autocomplete.bind({});
Placeholder.args = {
placeholder: 'Choose color (placeholder text)',
source: colors,
limit: 1,
textProperty: 'text',
value: colors[0],
};

export const Select = Autocomplete.bind({});
Select.args = {
label: 'Choose color',
source: colors,
limit: 1,
textProperty: 'text',
value: colors[2],
showSingle: true,
preserveOrder: true,
min: 1,
};

const AutocompleteWithInlineCSS = ({
source,
limit,
textProperty,
min,
label = '',
value = [],
hideEmpty = false,
disabled = false,
placeholder = '',
defaultIndex = 0,
showSingle = false,
preserveOrder = false,
wrap = false,
}) => html`
${CSS}
<cosmoz-autocomplete
.label=${'Choose color'}
.source=${colors}
.limit=${1}
.textProperty=${'text'}
.value=${colors[2]}
show-single
preserve-order
.min=${1}
.label=${label}
.placeholder=${placeholder}
.source=${source}
.textProperty=${textProperty}
.limit=${limit}
.value=${value}
.hideEmpty=${hideEmpty}
.defaultIndex=${defaultIndex}
.disabled=${disabled}
.showSingle=${showSingle}
.preserveOrder=${preserveOrder}
.min=${min}
.wrap=${wrap}
style="max-width: 170px"
></cosmoz-autocomplete>
`;

export const Overflown = AutocompleteWithInlineCSS.bind({});
Overflown.args = {
label: 'Choose color',
source: colors,
textProperty: 'text',
value: [colors[0], colors[1], colors[2]],
};

export const Wrap = AutocompleteWithInlineCSS.bind({});
Wrap.args = {
label: 'Choose color',
source: colors,
textProperty: 'text',
value: [colors[0], colors[1], colors[2]],
wrap: true,
};

0 comments on commit c17b2d4

Please sign in to comment.