Skip to content

Commit 3953d5f

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #337 from thejackshelton/add-headless-autocomplete
Feat: Headless Autocomplete
2 parents 15fef02 + 09689c0 commit 3953d5f

File tree

5 files changed

+722
-1
lines changed

5 files changed

+722
-1
lines changed

‎packages/kit-headless/src/components/Autocomplete/autocomplete.spec.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import {
3+
AutocompleteRoot,
4+
AutocompleteLabel,
5+
AutocompleteTrigger,
6+
AutocompleteInput,
7+
AutocompleteButton,
8+
AutocompleteListbox,
9+
AutocompleteOption,
10+
} from './autocomplete';
11+
12+
const RegularAutocomplete = component$(() => {
13+
return (
14+
<>
15+
<AutocompleteLabel>Label</AutocompleteLabel>
16+
<AutocompleteRoot>
17+
<AutocompleteTrigger>
18+
<AutocompleteInput />
19+
<AutocompleteButton class="test">
20+
<svg
21+
xmlns="http://www.w3.org/2000/svg"
22+
viewBox="0 0 24 24"
23+
fill="none"
24+
stroke="currentColor"
25+
stroke-width="2"
26+
stroke-linecap="round"
27+
stroke-linejoin="round"
28+
style="width: 20px; height: 20px;"
29+
>
30+
<polyline points="6 9 12 15 18 9"></polyline>
31+
</svg>
32+
</AutocompleteButton>
33+
</AutocompleteTrigger>
34+
<AutocompleteListbox>
35+
<AutocompleteOption>Option 1</AutocompleteOption>
36+
<AutocompleteOption>Option 2</AutocompleteOption>
37+
<AutocompleteOption>Option 3</AutocompleteOption>
38+
</AutocompleteListbox>
39+
</AutocompleteRoot>
40+
</>
41+
);
42+
});
43+
44+
describe('Autocomplete', () => {
45+
it('INIT', () => {
46+
cy.mount(<RegularAutocomplete />);
47+
48+
cy.checkA11yForComponent();
49+
});
50+
});

‎packages/kit-headless/src/components/Autocomplete/autocomplete.stories.tsx

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
import { Meta, StoryObj } from 'storybook-framework-qwik';
2+
import { userEvent, within } from '@storybook/testing-library';
3+
import { expect } from '@storybook/jest';
4+
import './autocompleteTest.css';
5+
6+
/*
7+
8+
Didn't finish setting up storybook in time.
9+
Want to test QwikIntrinsicElements & HTMLAttributes
10+
11+
*/
12+
13+
const fruits = [
14+
'Apple',
15+
'Apricot',
16+
'Avocado 🥑',
17+
'Banana',
18+
'Bilberry',
19+
'Blackberry',
20+
'Blackcurrant',
21+
'Blueberry',
22+
'Boysenberry',
23+
'Currant',
24+
'Cherry',
25+
'Coconut',
26+
'Cranberry',
27+
'Cucumber',
28+
'Custard apple',
29+
'Damson',
30+
'Date',
31+
'Dragonfruit',
32+
'Durian',
33+
'Elderberry',
34+
'Feijoa',
35+
'Fig',
36+
'Gooseberry',
37+
'Grape',
38+
'Raisin',
39+
'Grapefruit',
40+
'Guava',
41+
'Honeyberry',
42+
'Huckleberry',
43+
'Jabuticaba',
44+
'Jackfruit',
45+
'Jambul',
46+
'Juniper berry',
47+
'Kiwifruit',
48+
'Kumquat',
49+
'Lemon',
50+
'Lime',
51+
'Loquat',
52+
'Longan',
53+
'Lychee',
54+
'Mango',
55+
'Mangosteen',
56+
'Marionberry',
57+
'Melon',
58+
'Cantaloupe',
59+
'Honeydew',
60+
'Watermelon',
61+
'Miracle fruit',
62+
'Mulberry',
63+
'Nectarine',
64+
'Nance',
65+
'Olive',
66+
'Orange',
67+
'Clementine',
68+
'Mandarine',
69+
'Tangerine',
70+
'Papaya',
71+
'Passionfruit',
72+
'Peach',
73+
'Pear',
74+
'Persimmon',
75+
'Plantain',
76+
'Plum',
77+
'Pineapple',
78+
'Pomegranate',
79+
'Pomelo',
80+
'Quince',
81+
'Raspberry',
82+
'Salmonberry',
83+
'Rambutan',
84+
'Redcurrant',
85+
'Salak',
86+
'Satsuma',
87+
'Soursop',
88+
'Star fruit',
89+
'Strawberry',
90+
'Tamarillo',
91+
'Tamarind',
92+
'Yuzu',
93+
];
94+
95+
import {
96+
AutocompleteRoot,
97+
AutocompleteLabel,
98+
AutocompleteTrigger,
99+
AutocompleteInput,
100+
AutocompleteButton,
101+
AutocompleteListbox,
102+
AutocompleteOption,
103+
type AutocompleteRootProps,
104+
} from './autocomplete';
105+
106+
const meta: Meta<AutocompleteRootProps> = {
107+
args: {},
108+
component: AutocompleteRoot,
109+
};
110+
111+
type Story = StoryObj<AutocompleteRootProps>;
112+
113+
const RegularAutocomplete = () => (
114+
<>
115+
<AutocompleteRoot style="width: fit-content">
116+
<AutocompleteLabel>Label</AutocompleteLabel>
117+
<AutocompleteTrigger>
118+
<AutocompleteInput />
119+
<AutocompleteButton>
120+
<svg
121+
xmlns="http://www.w3.org/2000/svg"
122+
viewBox="0 0 24 24"
123+
fill="none"
124+
stroke="currentColor"
125+
stroke-width="2"
126+
stroke-linecap="round"
127+
stroke-linejoin="round"
128+
style="width: 20px; height: 20px;"
129+
>
130+
<polyline points="6 9 12 15 18 9"></polyline>
131+
</svg>
132+
</AutocompleteButton>
133+
</AutocompleteTrigger>
134+
<AutocompleteListbox class="listboxStyle">
135+
{fruits.map((fruit, index) => (
136+
<AutocompleteOption optionValue={fruit} key={index}>
137+
{fruit}
138+
</AutocompleteOption>
139+
))}
140+
</AutocompleteListbox>
141+
</AutocompleteRoot>
142+
<AutocompleteRoot style="width: fit-content">
143+
<AutocompleteLabel>Label</AutocompleteLabel>
144+
<AutocompleteTrigger>
145+
<AutocompleteInput />
146+
<AutocompleteButton>
147+
<svg
148+
xmlns="http://www.w3.org/2000/svg"
149+
viewBox="0 0 24 24"
150+
fill="none"
151+
stroke="currentColor"
152+
stroke-width="2"
153+
stroke-linecap="round"
154+
stroke-linejoin="round"
155+
style="width: 20px; height: 20px;"
156+
>
157+
<polyline points="6 9 12 15 18 9"></polyline>
158+
</svg>
159+
</AutocompleteButton>
160+
</AutocompleteTrigger>
161+
<AutocompleteListbox class="listboxStyle">
162+
{fruits.map((fruit, index) => (
163+
<AutocompleteOption optionValue={fruit} key={index}>
164+
{fruit}
165+
</AutocompleteOption>
166+
))}
167+
</AutocompleteListbox>
168+
</AutocompleteRoot>
169+
<AutocompleteRoot style="width: fit-content">
170+
<AutocompleteLabel>Label</AutocompleteLabel>
171+
<AutocompleteTrigger>
172+
<AutocompleteInput />
173+
<AutocompleteButton>
174+
<svg
175+
xmlns="http://www.w3.org/2000/svg"
176+
viewBox="0 0 24 24"
177+
fill="none"
178+
stroke="currentColor"
179+
stroke-width="2"
180+
stroke-linecap="round"
181+
stroke-linejoin="round"
182+
style="width: 20px; height: 20px;"
183+
>
184+
<polyline points="6 9 12 15 18 9"></polyline>
185+
</svg>
186+
</AutocompleteButton>
187+
</AutocompleteTrigger>
188+
<AutocompleteListbox class="listboxStyle">
189+
{fruits.map((fruit, index) => (
190+
<AutocompleteOption optionValue={fruit} key={index}>
191+
{fruit}
192+
</AutocompleteOption>
193+
))}
194+
</AutocompleteListbox>
195+
</AutocompleteRoot>
196+
</>
197+
);
198+
199+
export const Primary: Story = {
200+
render: () => RegularAutocomplete(),
201+
play: ({ canvasElement }) => {
202+
const canvas = within(canvasElement);
203+
},
204+
};
205+
206+
export default meta;

0 commit comments

Comments
 (0)