Skip to content

Commit a7ddbcf

Browse files
gioboagioboa
authored
docs: add tailwind docs (#309)
1 parent 4d6372a commit a7ddbcf

File tree

3 files changed

+172
-11
lines changed

3 files changed

+172
-11
lines changed

‎apps/website/src/routes/docs/tailwind/(components)/accordion/index.tsx renamed to ‎apps/website/src/routes/docs/tailwind/(components)/accordion/examples.tsx

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import { component$, useStylesScoped$ } from '@builder.io/qwik';
1+
import { component$, Slot, useStylesScoped$ } from '@builder.io/qwik';
2+
import { PreviewCodeExample } from '../../../../../components/preview-code-example/preview-code-example';
23
import { Accordion, AccordionItem } from '@qwik-ui/tailwind';
34

4-
export default component$(() => {
5+
export const Example01 = component$(() => {
56
useStylesScoped$(`
67
h1 { margin: 2rem 0; padding-top: 1rem; font-weight: bold; border-top: 1px dotted #222}
78
.container { width: 300px } Accordion {border: 1px solid white}
89
`);
910
return (
10-
<>
11-
<div class="container">
12-
<h2>This is the documentation for the Accordion</h2>
13-
14-
<h1>Accordion Example</h1>
11+
<PreviewCodeExample>
12+
<div q:slot="actualComponent">
1513
<Accordion>
1614
<AccordionItem label="Heading 1">
1715
<div class="p-2">
@@ -30,8 +28,19 @@ export default component$(() => {
3028
</div>
3129
</AccordionItem>
3230
</Accordion>
31+
</div>
3332

34-
<h1>Accordion with Disabled Item Example</h1>
33+
<div q:slot="codeExample">
34+
<Slot />
35+
</div>
36+
</PreviewCodeExample>
37+
);
38+
});
39+
40+
export const Example02 = component$(() => {
41+
return (
42+
<PreviewCodeExample>
43+
<div q:slot="actualComponent">
3544
<Accordion>
3645
<AccordionItem label="Heading 1">
3746
<div class="p-2">
@@ -51,6 +60,10 @@ export default component$(() => {
5160
</AccordionItem>
5261
</Accordion>
5362
</div>
54-
</>
63+
64+
<div q:slot="codeExample">
65+
<Slot />
66+
</div>
67+
</PreviewCodeExample>
5568
);
5669
});

‎apps/website/src/routes/docs/tailwind/(components)/accordion/index.mdx

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
---
2+
title: Qwik UI | Accordion
3+
---
4+
5+
import { Accordion, AccordionItem } from '@qwik-ui/tailwind';
6+
import { Example01, Example02 } from './examples';
7+
import { CodeExample } from '../../../../../components/code-example/code-example';
8+
import { KeyboardInteractionTable } from '../../../../../components/keyboard-interaction-table/keyboard-interaction-table';
9+
import { APITable } from '../../../../../components/api-table/api-table';
10+
11+
# Accordion
12+
13+
#### A vertically stacked set of interactive headings which reveal or hide their associated content.
14+
15+
{' '}
16+
17+
<Example01>
18+
```tsx
19+
<Accordion>
20+
<AccordionItem label="Heading 1">
21+
<div class="p-2">
22+
<p>
23+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
24+
aliquid architecto delectus deleniti dolor
25+
</p>
26+
</div>
27+
</AccordionItem>
28+
<AccordionItem label="Heading 2">
29+
<div class="p-2">
30+
<p>
31+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
32+
aliquid architecto delectus deleniti dolor
33+
</p>
34+
</div>
35+
</AccordionItem>
36+
</Accordion>
37+
```
38+
</Example01>
39+
40+
## Building blocks
41+
42+
<CodeExample>
43+
```tsx
44+
import { component$ } from '@builder.io/qwik';
45+
import { Accordion, AccordionItem } from '@qwik-ui/tailwind';
46+
47+
export default component$(() => (
48+
<Accordion>
49+
<AccordionItem>Content</AccordionItem>
50+
</Accordion>
51+
));
52+
```
53+
54+
</CodeExample>
55+
56+
## Examples
57+
58+
### EXAMPLE: with disabled item
59+
60+
<Example02>
61+
```tsx
62+
<Accordion>
63+
<AccordionItem label="Heading 1">
64+
<div class="p-2">
65+
<p>
66+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
67+
aliquid architecto delectus deleniti dolor
68+
</p>
69+
</div>
70+
</AccordionItem>
71+
<AccordionItem label="Heading 2 - Disabled" disabled>
72+
<div class="p-2">
73+
<p>
74+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
75+
aliquid architecto delectus deleniti dolor
76+
</p>
77+
</div>
78+
</AccordionItem>
79+
</Accordion>
80+
```
81+
</Example02>
82+
83+
## Accessibility
84+
85+
### Keyboard interaction
86+
87+
<KeyboardInteractionTable keyDescriptors={
88+
[
89+
{
90+
keyTitle: 'Space',
91+
description: 'Expand or collapse the `AccordionItem`.',
92+
},
93+
{
94+
keyTitle: 'Enter',
95+
description: 'Expand or collapse the `AccordionItem`.',
96+
},
97+
{
98+
keyTitle: 'Tab',
99+
description: 'Moves focus to the next focusable element.',
100+
},
101+
{
102+
keyTitle: 'Shift + Tab',
103+
description: 'Moves focus to the previous focusable element.',
104+
},
105+
{
106+
keyTitle: 'Home',
107+
description: 'When on `AccordionItem`, Moves focus to the first `AccordionItem`.',
108+
},
109+
{
110+
keyTitle: 'End',
111+
description: 'When on `AccordionItem`, Moves focus to the last `AccordionItem`.',
112+
},
113+
114+
]
115+
}/>
116+
117+
## API
118+
119+
### AccordionItem
120+
121+
<APITable
122+
propDescriptors={[
123+
{
124+
name: 'class',
125+
type: 'string',
126+
description: 'CSS classes to apply to the accordion container.',
127+
},
128+
{
129+
name: 'style',
130+
type: 'string',
131+
description: 'CSS styles to apply to the accordion container.',
132+
},
133+
{
134+
name: 'label',
135+
type: 'string',
136+
description: 'The label to give to the accordion item.',
137+
},
138+
{
139+
name: 'onClick$',
140+
type: 'PropFunction<() => void>',
141+
description: 'A custom click handler',
142+
},
143+
]}
144+
/>

‎packages/kit-headless/src/components/accordion/accordion.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,9 @@ export const AccordionItem = component$((props: AccordionItemProps) => {
9797
<button
9898
id={`${id}__trigger`}
9999
aria-controls={`${id}__body`}
100-
aria-expanded={!!ref.value?.getAttribute('open')}
100+
aria-expanded={
101+
ref.value?.getAttribute ? !!ref.value?.getAttribute('open') : false
102+
}
101103
onClick$={(e) => {
102104
const target = ref.value;
103105
contextService.items.forEach((i: HTMLElement) => {
@@ -119,7 +121,9 @@ export const AccordionItem = component$((props: AccordionItemProps) => {
119121
id={`${id}__body`}
120122
class="content"
121123
aria-labelledby={`${id}__trigger`}
122-
aria-hidden={!!ref.value?.getAttribute('open')}
124+
aria-hidden={
125+
ref.value?.getAttribute ? !!ref.value?.getAttribute('open') : false
126+
}
123127
>
124128
<Slot />
125129
</div>

0 commit comments

Comments
 (0)