Skip to content

Commit

Permalink
add Grouped Options story for SingleSelect (#816)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jasonbasuil
jasonbasuil authored Jan 24, 2023
1 parent 7ce000a commit 64ee78b
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 18 deletions.
119 changes: 107 additions & 12 deletions spec/__snapshots__/Storyshots.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10316,7 +10316,7 @@ exports[`Storyshots Components/Selects/Single Custom Option With Checkbox 1`] =
>
<span
className="css-1f43avz-a11yText-A11yText"
id="react-select-14-live-region"
id="react-select-15-live-region"
/>
<span
aria-atomic="false"
Expand All @@ -10334,13 +10334,13 @@ exports[`Storyshots Components/Selects/Single Custom Option With Checkbox 1`] =
>
<div
className=" css-858797-placeholder"
id="react-select-14-placeholder"
id="react-select-15-placeholder"
>
Select...
</div>
<input
aria-autocomplete="list"
aria-describedby="react-select-14-placeholder"
aria-describedby="react-select-15-placeholder"
aria-expanded={false}
aria-haspopup={true}
aria-readonly={true}
Expand Down Expand Up @@ -10411,7 +10411,7 @@ exports[`Storyshots Components/Selects/Single Custom Option With Description 1`]
>
<span
className="css-1f43avz-a11yText-A11yText"
id="react-select-13-live-region"
id="react-select-14-live-region"
/>
<span
aria-atomic="false"
Expand All @@ -10429,13 +10429,13 @@ exports[`Storyshots Components/Selects/Single Custom Option With Description 1`]
>
<div
className=" css-858797-placeholder"
id="react-select-13-placeholder"
id="react-select-14-placeholder"
>
Select...
</div>
<input
aria-autocomplete="list"
aria-describedby="react-select-13-placeholder"
aria-describedby="react-select-14-placeholder"
aria-expanded={false}
aria-haspopup={true}
aria-readonly={true}
Expand Down Expand Up @@ -10506,7 +10506,7 @@ exports[`Storyshots Components/Selects/Single Custom Option With Indeterminate C
>
<span
className="css-1f43avz-a11yText-A11yText"
id="react-select-15-live-region"
id="react-select-16-live-region"
/>
<span
aria-atomic="false"
Expand All @@ -10524,13 +10524,13 @@ exports[`Storyshots Components/Selects/Single Custom Option With Indeterminate C
>
<div
className=" css-858797-placeholder"
id="react-select-15-placeholder"
id="react-select-16-placeholder"
>
Select...
</div>
<input
aria-autocomplete="list"
aria-describedby="react-select-15-placeholder"
aria-describedby="react-select-16-placeholder"
aria-expanded={false}
aria-haspopup={true}
aria-readonly={true}
Expand Down Expand Up @@ -10601,7 +10601,7 @@ exports[`Storyshots Components/Selects/Single Custom Value Container 1`] = `
>
<span
className="css-1f43avz-a11yText-A11yText"
id="react-select-16-live-region"
id="react-select-17-live-region"
/>
<span
aria-atomic="false"
Expand All @@ -10619,13 +10619,13 @@ exports[`Storyshots Components/Selects/Single Custom Value Container 1`] = `
>
<div
className=" css-858797-placeholder"
id="react-select-16-placeholder"
id="react-select-17-placeholder"
>
Select...
</div>
<input
aria-autocomplete="list"
aria-describedby="react-select-16-placeholder"
aria-describedby="react-select-17-placeholder"
aria-expanded={false}
aria-haspopup={true}
aria-readonly={true}
Expand Down Expand Up @@ -10768,6 +10768,101 @@ exports[`Storyshots Components/Selects/Single Default 1`] = `
</div>
`;

exports[`Storyshots Components/Selects/Single Grouped Options 1`] = `
<div
style={
Object {
"padding": "1rem",
}
}
>
<div
className="FormGroup"
>
<label
className="InputLabel"
htmlFor="grouped-options-select"
>
Grouped options
</label>
<div
className="SingleSelect css-b62m3t-container"
onKeyDown={[Function]}
>
<span
className="css-1f43avz-a11yText-A11yText"
id="react-select-13-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
className="css-1f43avz-a11yText-A11yText"
/>
<div
className=" css-cijnja-control"
onMouseDown={[Function]}
onTouchEnd={[Function]}
>
<div
className=" css-319lph-ValueContainer"
>
<div
className=" css-858797-placeholder"
id="react-select-13-placeholder"
>
Select...
</div>
<input
aria-autocomplete="list"
aria-describedby="react-select-13-placeholder"
aria-expanded={false}
aria-haspopup={true}
aria-readonly={true}
className="css-mohuvp-dummyInput-DummyInput"
disabled={false}
id="grouped-options-select"
inputMode="none"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
role="combobox"
tabIndex={0}
value=""
/>
</div>
<div
className=" css-1hb7zxy-IndicatorsContainer"
>
<span
className=" css-43ykx9-indicatorSeparator"
/>
<div
aria-hidden="true"
className=" css-7sl878-indicatorContainer"
onMouseDown={[Function]}
onTouchEnd={[Function]}
>
<svg
aria-hidden="true"
className="css-tj5bde-Svg"
focusable="false"
height={20}
viewBox="0 0 20 20"
width={20}
>
<path
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
`;

exports[`Storyshots Components/Selects/Single In Modal 1`] = `
<div
style={
Expand Down
38 changes: 32 additions & 6 deletions src/Select/SingleSelect.stories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,10 @@ export default {
};

const options = [
{ label: 'White', value: 1 },
{ label: 'Black / African American', value: 2 },
{ label: 'American Indian / Alaska Native', value: 3 },
{ label: 'Asian', value: 4 },
{ label: 'Native Hawaiian / Pacific Islander', value: 5 },
{ label: 'Hispanic / Latinx', value: 6 },
{ label: '1-on-1 interview', value: 1 },
{ label: 'Focus group', value: 2 },
{ label: 'Multi-day study', value: 3 },
{ label: 'Unmoderated task', value: 4 },
];

export const Default = () => (
Expand Down Expand Up @@ -112,6 +110,34 @@ export const InModal = () => (
</Modal>
);

export const GroupedOptions = () => {
const groupedOptions = [
{
label: 'Study type',
options,
},
{
label: 'Audience type',
options: [
{ label: 'Consumers', value: 5 },
{ label: 'Professionals', value: 6 },
],
},
];
return (
<FormGroup
label="Grouped options"
labelHtmlFor="grouped-options-select"
>
<SingleSelect
inputId="grouped-options-select"
options={groupedOptions}
onChange={onChange}
/>
</FormGroup>
);
};

export const CustomOptionWithDescription = () => {
const optionsWithDescriptions = [
{
Expand Down

0 comments on commit 64ee78b

Please sign in to comment.