Skip to content

Commit 42b733e

Browse files
acelayaacelaya
committed
Move more examples from SelectNextPage to example files
1 parent 18ebdfb commit 42b733e

File tree

7 files changed

+365
-160
lines changed

7 files changed

+365
-160
lines changed

‎src/pattern-library/components/patterns/prototype/SelectNextPage.tsx

Lines changed: 70 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import classnames from 'classnames';
2-
import { useCallback, useId, useMemo, useState } from 'preact/hooks';
2+
import { useId, useState } from 'preact/hooks';
33

44
import { Link } from '../../../..';
5-
import { ArrowLeftIcon, ArrowRightIcon } from '../../../../components/icons';
65
import type { SelectNextProps } from '../../../../components/input';
7-
import { IconButton, InputGroup } from '../../../../components/input';
86
import SelectNext from '../../../../components/input/SelectNext';
7+
import SelectNextInInputGroup from '../../../examples/select-next-in-input-group';
8+
import SelectNextWithManyOptions from '../../../examples/select-next-with-custom-options';
99
import Library from '../../Library';
1010

1111
type ItemType = {
@@ -23,20 +23,12 @@ const defaultItems: ItemType[] = [
2323
];
2424

2525
function SelectExample({
26-
disabled,
2726
textOnly,
2827
items = defaultItems,
2928
...rest
3029
}: Pick<
3130
SelectNextProps<ItemType>,
32-
| 'aria-label'
33-
| 'aria-labelledby'
34-
| 'buttonClasses'
35-
| 'containerClasses'
36-
| 'listboxClasses'
37-
| 'disabled'
38-
| 'right'
39-
| 'listboxAsPopover'
31+
'buttonClasses' | 'containerClasses' | 'listboxClasses'
4032
> & {
4133
textOnly?: boolean;
4234
items?: ItemType[];
@@ -46,15 +38,12 @@ function SelectExample({
4638

4739
return (
4840
<>
49-
{!rest['aria-label'] && !rest['aria-labelledby'] && (
50-
<label htmlFor={buttonId}>Select a person</label>
51-
)}
41+
<label htmlFor={buttonId}>Select a person</label>
5242
<SelectNext
5343
{...rest}
5444
buttonId={buttonId}
5545
value={value}
5646
onChange={setValue}
57-
disabled={disabled}
5847
buttonContent={
5948
value ? (
6049
<>
@@ -68,8 +57,6 @@ function SelectExample({
6857
</div>
6958
)}
7059
</>
71-
) : disabled ? (
72-
<>This is disabled</>
7360
) : (
7461
<>Select one…</>
7562
)
@@ -106,79 +93,6 @@ function SelectExample({
10693
);
10794
}
10895

109-
function InputGroupSelectExample({
110-
buttonClasses,
111-
}: {
112-
buttonClasses?: string;
113-
}) {
114-
const [selected, setSelected] = useState<(typeof defaultItems)[number]>();
115-
const selectedIndex = useMemo(
116-
() => (!selected ? -1 : defaultItems.findIndex(item => item === selected)),
117-
[selected],
118-
);
119-
const next = useCallback(() => {
120-
const newIndex = selectedIndex + 1;
121-
setSelected(defaultItems[newIndex] ?? selected);
122-
}, [selected, selectedIndex]);
123-
const previous = useCallback(() => {
124-
const newIndex = selectedIndex - 1;
125-
setSelected(defaultItems[newIndex] ?? selected);
126-
}, [selected, selectedIndex]);
127-
const buttonId = useId();
128-
129-
return (
130-
<>
131-
<label htmlFor={buttonId}>Select a person</label>
132-
<InputGroup>
133-
<IconButton
134-
icon={ArrowLeftIcon}
135-
title="Previous student"
136-
variant="dark"
137-
onClick={previous}
138-
disabled={selectedIndex <= 0}
139-
/>
140-
<SelectNext
141-
buttonId={buttonId}
142-
value={selected}
143-
onChange={setSelected}
144-
buttonClasses={buttonClasses}
145-
buttonContent={
146-
selected ? (
147-
<div className="flex">
148-
<div className="truncate">{selected.name}</div>
149-
<div className="rounded px-2 ml-2 bg-grey-7 text-white">
150-
{selected.id}
151-
</div>
152-
</div>
153-
) : (
154-
<>Select one…</>
155-
)
156-
}
157-
>
158-
{defaultItems.map(item => (
159-
<SelectNext.Option value={item} key={item.id}>
160-
{item.name}
161-
<div className="grow" />
162-
<div
163-
className={classnames('rounded px-2 ml-2 text-white bg-grey-7')}
164-
>
165-
{item.id}
166-
</div>
167-
</SelectNext.Option>
168-
))}
169-
</SelectNext>
170-
<IconButton
171-
icon={ArrowRightIcon}
172-
title="Next student"
173-
variant="dark"
174-
onClick={next}
175-
disabled={selectedIndex >= defaultItems.length - 1}
176-
/>
177-
</InputGroup>
178-
</>
179-
);
180-
}
181-
18296
export default function SelectNextPage() {
18397
return (
18498
<Library.Page
@@ -227,51 +141,49 @@ export default function SelectNextPage() {
227141
</p>
228142

229143
<Library.Example title="Composing and styling Selects">
230-
<Library.Demo title="Select with custom Options">
231-
<div className="w-96">
232-
<SelectExample />
233-
</div>
234-
</Library.Demo>
144+
<Library.Demo
145+
title="Select with custom Options"
146+
exampleFile="select-next-with-custom-options"
147+
withSource
148+
/>
235149

236-
<Library.Demo title="Select in InputGroup">
237-
<div className="w-96">
238-
<InputGroupSelectExample />
239-
</div>
240-
</Library.Demo>
150+
<Library.Demo
151+
title="Select in InputGroup"
152+
exampleFile="select-next-in-input-group"
153+
withSource
154+
/>
241155
</Library.Example>
242156

243157
<Library.Example title="Select with many options">
244158
<Library.Demo title="Select with many options">
245-
<div className="w-96 mx-auto">
246-
<SelectExample
247-
items={[
248-
...defaultItems.map(({ id, name }) => ({
249-
id: `1${id}`,
250-
name: `1 ${name}`,
251-
})),
252-
...defaultItems.map(({ id, name }) => ({
253-
id: `2${id}`,
254-
name: `2 ${name}`,
255-
})),
256-
...defaultItems.map(({ id, name }) => ({
257-
id: `3${id}`,
258-
name: `3 ${name}`,
259-
})),
260-
...defaultItems.map(({ id, name }) => ({
261-
id: `4${id}`,
262-
name: `4 ${name}`,
263-
})),
264-
...defaultItems.map(({ id, name }) => ({
265-
id: `5${id}`,
266-
name: `5 ${name}`,
267-
})),
268-
...defaultItems.map(({ id, name }) => ({
269-
id: `6${id}`,
270-
name: `6 ${name}`,
271-
})),
272-
]}
273-
/>
274-
</div>
159+
<SelectNextWithManyOptions
160+
items={[
161+
...defaultItems.map(({ id, name }) => ({
162+
id: `1${id}`,
163+
name: `1 ${name}`,
164+
})),
165+
...defaultItems.map(({ id, name }) => ({
166+
id: `2${id}`,
167+
name: `2 ${name}`,
168+
})),
169+
...defaultItems.map(({ id, name }) => ({
170+
id: `3${id}`,
171+
name: `3 ${name}`,
172+
})),
173+
...defaultItems.map(({ id, name }) => ({
174+
id: `4${id}`,
175+
name: `4 ${name}`,
176+
})),
177+
...defaultItems.map(({ id, name }) => ({
178+
id: `5${id}`,
179+
name: `5 ${name}`,
180+
})),
181+
...defaultItems.map(({ id, name }) => ({
182+
id: `6${id}`,
183+
name: `6 ${name}`,
184+
})),
185+
]}
186+
/>
275187
</Library.Demo>
276188
</Library.Example>
277189

@@ -291,26 +203,21 @@ export default function SelectNextPage() {
291203
linked to <code>buttonId</code>
292204
</>
293205
}
294-
>
295-
<div className="w-96 mx-auto">
296-
<SelectExample />
297-
</div>
298-
</Library.Demo>
206+
exampleFile="select-next-basic"
207+
withSource
208+
/>
299209

300-
<Library.Demo title="Via aria-label">
301-
<div className="w-96 mx-auto">
302-
<SelectExample aria-label="Select a person with aria label" />
303-
</div>
304-
</Library.Demo>
210+
<Library.Demo
211+
title="Via aria-label"
212+
exampleFile="select-next-aria-label"
213+
withSource
214+
/>
305215

306-
<Library.Demo title="Via aria-labelledby">
307-
<div className="w-96 mx-auto">
308-
<p id="select-next-meta-label">
309-
Select a person with aria labelledby
310-
</p>
311-
<SelectExample aria-labelledby="select-next-meta-label" />
312-
</div>
313-
</Library.Demo>
216+
<Library.Demo
217+
title="Via aria-labelledby"
218+
exampleFile="select-next-aria-labelledby"
219+
withSource
220+
/>
314221
</Library.Example>
315222

316223
<Library.Example title="Select with long content">
@@ -343,7 +250,10 @@ export default function SelectNextPage() {
343250

344251
<Library.Demo title="Input group">
345252
<div className="mx-auto">
346-
<InputGroupSelectExample buttonClasses="!w-36" />
253+
<SelectNextInInputGroup
254+
buttonClasses="!w-36"
255+
wrapperClasses=""
256+
/>
347257
</div>
348258
</Library.Demo>
349259
</Library.Example>
@@ -409,11 +319,11 @@ export default function SelectNextPage() {
409319
<code>undefined</code>
410320
</Library.InfoItem>
411321
</Library.Info>
412-
<Library.Demo title="Disabled Select">
413-
<div className="w-96 mx-auto">
414-
<SelectExample disabled />
415-
</div>
416-
</Library.Demo>
322+
<Library.Demo
323+
title="Disabled Select"
324+
exampleFile="select-next-disabled"
325+
withSource
326+
/>
417327
</Library.Example>
418328
<Library.Example title="right">
419329
<Library.Info>
@@ -428,11 +338,11 @@ export default function SelectNextPage() {
428338
<code>false</code>
429339
</Library.InfoItem>
430340
</Library.Info>
431-
<Library.Demo title="Right listbox">
432-
<div className="mx-auto">
433-
<SelectExample right buttonClasses="!w-36" />
434-
</div>
435-
</Library.Demo>
341+
<Library.Demo
342+
title="Right listbox"
343+
exampleFile="select-next-right"
344+
withSource
345+
/>
436346
</Library.Example>
437347
<Library.Example title="buttonClasses">
438348
<Library.Info>

‎src/pattern-library/examples/select-next-aria-label.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { useState } from 'preact/hooks';
2+
3+
import { SelectNext } from '../..';
4+
5+
const items = [
6+
{ id: '1', name: 'All students' },
7+
{ id: '2', name: 'Albert Banana' },
8+
{ id: '3', name: 'Bernard California' },
9+
{ id: '4', name: 'Cecelia Davenport' },
10+
{ id: '5', name: 'Doris Evanescence' },
11+
];
12+
13+
export default function App() {
14+
const [value, setSelected] = useState<{ id: string; name: string }>();
15+
16+
return (
17+
<div className="w-96 mx-auto">
18+
<SelectNext
19+
aria-label="Select a person with aria label"
20+
value={value}
21+
onChange={setSelected}
22+
buttonContent={value ? value.name : <>Select one…</>}
23+
>
24+
{items.map(item => (
25+
<SelectNext.Option value={item} key={item.id}>
26+
{item.name}
27+
</SelectNext.Option>
28+
))}
29+
</SelectNext>
30+
</div>
31+
);
32+
}

‎src/pattern-library/examples/select-next-aria-labelledby.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { useId, useState } from 'preact/hooks';
2+
3+
import { SelectNext } from '../..';
4+
5+
const items = [
6+
{ id: '1', name: 'All students' },
7+
{ id: '2', name: 'Albert Banana' },
8+
{ id: '3', name: 'Bernard California' },
9+
{ id: '4', name: 'Cecelia Davenport' },
10+
{ id: '5', name: 'Doris Evanescence' },
11+
];
12+
13+
export default function App() {
14+
const [value, setSelected] = useState<{ id: string; name: string }>();
15+
const labelId = useId();
16+
17+
return (
18+
<div className="w-96 mx-auto">
19+
<p id={labelId}>Select a person with aria labelledby</p>
20+
<SelectNext
21+
aria-labelledby={labelId}
22+
value={value}
23+
onChange={setSelected}
24+
buttonContent={value ? value.name : <>Select one…</>}
25+
>
26+
{items.map(item => (
27+
<SelectNext.Option value={item} key={item.id}>
28+
{item.name}
29+
</SelectNext.Option>
30+
))}
31+
</SelectNext>
32+
</div>
33+
);
34+
}

0 commit comments

Comments
 (0)