Skip to content

Commit 39fa29b

Browse files
thejacksheltonthejackshelton
committed
search & replace + docs fix
1 parent 20077cf commit 39fa29b

File tree

23 files changed

+359
-470
lines changed

23 files changed

+359
-470
lines changed

‎apps/website/src/components/mdx-components/index.tsx

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,6 @@ import { KeyboardInteractionTable } from '../keyboard-interaction-table/keyboard
1010
import { Note } from '../note/note';
1111
import { Showcase } from '../showcase/showcase';
1212
import { StatusBanner } from '../status-banner/status-banner';
13-
import {
14-
Accordion,
15-
AccordionContent,
16-
AccordionItem,
17-
AccordionTrigger,
18-
} from '@qwik-ui/styled';
1913

2014
export const components: Record<string, Component> = {
2115
p: component$<PropsOf<'p'>>(({ ...props }) => {
@@ -129,10 +123,6 @@ export const components: Record<string, Component> = {
129123
</div>
130124
);
131125
}),
132-
Accordion,
133-
AccordionItem,
134-
AccordionTrigger,
135-
AccordionContent,
136126
AnatomyTable,
137127
APITable,
138128
CodeSnippet,

‎apps/website/src/routes/docs/headless/accordion/examples/custom-heading.tsx

Lines changed: 27 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,57 @@
11
import { component$ } from '@builder.io/qwik';
2-
import {
3-
AccordionContent,
4-
AccordionHeader,
5-
AccordionItem,
6-
AccordionRoot,
7-
AccordionTrigger,
8-
} from '@qwik-ui/headless';
2+
import { Accordion } from '@qwik-ui/headless';
93

104
export default component$(() => {
115
return (
126
<>
137
<div class="flex w-full justify-center">
14-
<AccordionRoot class="w-full">
15-
<AccordionItem class="border-b">
16-
<AccordionHeader as="h4">
17-
<AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
8+
<Accordion.Root class="w-full">
9+
<Accordion.Item class="border-b">
10+
<Accordion.Header as="h4">
11+
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
1812
<span>I'm an h4</span>
1913
<span class="pl-2">
2014
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
2115
+
2216
</p>
2317
</span>
24-
</AccordionTrigger>
25-
</AccordionHeader>
26-
<AccordionContent>
18+
</Accordion.Trigger>
19+
</Accordion.Header>
20+
<Accordion.Content>
2721
<p class="pb-4">My Heading is an h4!</p>
28-
</AccordionContent>
29-
</AccordionItem>
30-
<AccordionItem class="border-b">
31-
<AccordionHeader as="h5">
32-
<AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
22+
</Accordion.Content>
23+
</Accordion.Item>
24+
<Accordion.Item class="border-b">
25+
<Accordion.Header as="h5">
26+
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
3327
<span>I'm an h5</span>
3428
<span class="pl-2">
3529
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
3630
+
3731
</p>
3832
</span>
39-
</AccordionTrigger>
40-
</AccordionHeader>
41-
<AccordionContent>
33+
</Accordion.Trigger>
34+
</Accordion.Header>
35+
<Accordion.Content>
4236
<p class="pb-4">My Heading is an h5!</p>
43-
</AccordionContent>
44-
</AccordionItem>
45-
<AccordionItem class="border-b">
46-
<AccordionHeader as="h6">
47-
<AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
37+
</Accordion.Content>
38+
</Accordion.Item>
39+
<Accordion.Item class="border-b">
40+
<Accordion.Header as="h6">
41+
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
4842
<span>I'm an h6</span>
4943
<span class="flex pl-2">
5044
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
5145
+
5246
</p>
5347
</span>
54-
</AccordionTrigger>
55-
</AccordionHeader>
56-
<AccordionContent>
48+
</Accordion.Trigger>
49+
</Accordion.Header>
50+
<Accordion.Content>
5751
<p class="pb-4">My Heading is an h6!</p>
58-
</AccordionContent>
59-
</AccordionItem>
60-
</AccordionRoot>
52+
</Accordion.Content>
53+
</Accordion.Item>
54+
</Accordion.Root>
6155
</div>
6256
</>
6357
);

‎apps/website/src/routes/docs/headless/accordion/examples/default-value.tsx

Lines changed: 25 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,60 @@
11
import { component$ } from '@builder.io/qwik';
2-
import {
3-
AccordionContent,
4-
AccordionHeader,
5-
AccordionItem,
6-
AccordionRoot,
7-
AccordionTrigger,
8-
} from '@qwik-ui/headless';
2+
import { Accordion } from '@qwik-ui/headless';
93

104
export default component$(() => {
115
return (
126
<>
137
<div class="flex w-full justify-center">
14-
<AccordionRoot class="w-full">
15-
<AccordionItem class="border-b">
16-
<AccordionHeader as="h3">
17-
<AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
8+
<Accordion.Root class="w-full">
9+
<Accordion.Item class="border-b">
10+
<Accordion.Header as="h3">
11+
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
1812
<span>Not open by default.</span>
1913
<span class="pl-2">
2014
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
2115
+
2216
</p>
2317
</span>
24-
</AccordionTrigger>
25-
</AccordionHeader>
26-
<AccordionContent>
18+
</Accordion.Trigger>
19+
</Accordion.Header>
20+
<Accordion.Content>
2721
<p class="pb-4">I wasn't open by default!</p>
28-
</AccordionContent>
29-
</AccordionItem>
30-
<AccordionItem defaultValue>
31-
<AccordionHeader as="h3">
32-
<AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
22+
</Accordion.Content>
23+
</Accordion.Item>
24+
<Accordion.Item defaultValue>
25+
<Accordion.Header as="h3">
26+
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
3327
<span>I'm open!</span>
3428
<span class="pl-2">
3529
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
3630
+
3731
</p>
3832
</span>
39-
</AccordionTrigger>
40-
</AccordionHeader>
41-
<AccordionContent>
33+
</Accordion.Trigger>
34+
</Accordion.Header>
35+
<Accordion.Content>
4236
<p class="pb-4">
4337
You can open me by default by putting the <strong>defaultValue</strong>{' '}
4438
prop on the Accordion Item.
4539
</p>
46-
</AccordionContent>
47-
</AccordionItem>
48-
<AccordionItem class="border-b">
40+
</Accordion.Content>
41+
</Accordion.Item>
42+
<Accordion.Item class="border-b">
4943
<h3>
50-
<AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
44+
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
5145
<span>Not open by default.</span>
5246
<span class="flex pl-2">
5347
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
5448
+
5549
</p>
5650
</span>
57-
</AccordionTrigger>
51+
</Accordion.Trigger>
5852
</h3>
59-
<AccordionContent>
53+
<Accordion.Content>
6054
<p class="pb-4">I wasn't open by default!</p>
61-
</AccordionContent>
62-
</AccordionItem>
63-
</AccordionRoot>
55+
</Accordion.Content>
56+
</Accordion.Item>
57+
</Accordion.Root>
6458
</div>
6559
</>
6660
);

‎apps/website/src/routes/docs/headless/accordion/examples/disabled.tsx

Lines changed: 25 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,51 @@
11
import { component$ } from '@builder.io/qwik';
2-
import {
3-
AccordionContent,
4-
AccordionHeader,
5-
AccordionItem,
6-
AccordionRoot,
7-
AccordionTrigger,
8-
} from '@qwik-ui/headless';
2+
import { Accordion } from '@qwik-ui/headless';
93

104
// disabled
115
export default component$(() => {
126
return (
137
<>
148
<div class="flex w-full justify-center">
15-
<AccordionRoot class="w-full">
16-
<AccordionItem class="border-b">
17-
<AccordionHeader as="h3">
18-
<AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
9+
<Accordion.Root class="w-full">
10+
<Accordion.Item class="border-b">
11+
<Accordion.Header as="h3">
12+
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
1913
<span>I'm enabled!</span>
2014
<span class="pl-2">
2115
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
2216
+
2317
</p>
2418
</span>
25-
</AccordionTrigger>
26-
</AccordionHeader>
27-
<AccordionContent>
19+
</Accordion.Trigger>
20+
</Accordion.Header>
21+
<Accordion.Content>
2822
<p class="pb-4">
2923
Hey, I'm enabled! This is because I don't use the{' '}
3024
<strong>disabled</strong> prop on the trigger.
3125
</p>
32-
</AccordionContent>
33-
</AccordionItem>
34-
<AccordionItem class="border-b">
35-
<AccordionHeader as="h3">
36-
<AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
26+
</Accordion.Content>
27+
</Accordion.Item>
28+
<Accordion.Item class="border-b">
29+
<Accordion.Header as="h3">
30+
<Accordion.Trigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
3731
<span>I'm enabled!</span>
3832
<span class="pl-2">
3933
<p class="scale-150 group-aria-expanded:rotate-45 group-aria-expanded:transform">
4034
+
4135
</p>
4236
</span>
43-
</AccordionTrigger>
44-
</AccordionHeader>
45-
<AccordionContent>
37+
</Accordion.Trigger>
38+
</Accordion.Header>
39+
<Accordion.Content>
4640
<p class="pb-4">
4741
Hey, I'm enabled! This is because I don't use the{' '}
4842
<strong>disabled</strong> prop on the trigger.
4943
</p>
50-
</AccordionContent>
51-
</AccordionItem>
52-
<AccordionItem class="border-b">
44+
</Accordion.Content>
45+
</Accordion.Item>
46+
<Accordion.Item class="border-b">
5347
<h3>
54-
<AccordionTrigger
48+
<Accordion.Trigger
5549
disabled
5650
class="group flex w-full items-center justify-between py-4 text-left hover:bg-accent/50 aria-disabled:cursor-not-allowed aria-expanded:rounded-none"
5751
>
@@ -66,13 +60,13 @@ export default component$(() => {
6660
+
6761
</p>
6862
</span>
69-
</AccordionTrigger>
63+
</Accordion.Trigger>
7064
</h3>
71-
<AccordionContent>
65+
<Accordion.Content>
7266
<p class="pb-4">You shouldn't be able to see this!</p>
73-
</AccordionContent>
74-
</AccordionItem>
75-
</AccordionRoot>
67+
</Accordion.Content>
68+
</Accordion.Item>
69+
</Accordion.Root>
7670
</div>
7771
</>
7872
);

‎apps/website/src/routes/docs/headless/accordion/examples/dynamic.tsx

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
import { component$, useSignal, useStore } from '@builder.io/qwik';
2-
import {
3-
AccordionContent,
4-
AccordionHeader,
5-
AccordionItem,
6-
AccordionRoot,
7-
AccordionTrigger,
8-
} from '@qwik-ui/headless';
2+
import { Accordion } from '@qwik-ui/headless';
93

104
interface DynamicAccordionProps {
115
itemIndexToDelete?: number;
@@ -53,20 +47,20 @@ export default component$(({ itemsLength = 3 }: DynamicAccordionProps) => {
5347
</label>
5448
</div>
5549

56-
<AccordionRoot class="w-full">
50+
<Accordion.Root class="w-full">
5751
{itemStore.map(({ label, id }, index) => {
5852
return (
59-
<AccordionItem id={`${id}`} key={id} class="border-b">
60-
<AccordionHeader>
61-
<AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
53+
<Accordion.Item id={`${id}`} key={id} class="border-b">
54+
<Accordion.Header>
55+
<Accordion.Trigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
6256
{label}
63-
</AccordionTrigger>
64-
</AccordionHeader>
65-
<AccordionContent class="py-4 pt-0">index: {index}</AccordionContent>
66-
</AccordionItem>
57+
</Accordion.Trigger>
58+
</Accordion.Header>
59+
<Accordion.Content class="py-4 pt-0">index: {index}</Accordion.Content>
60+
</Accordion.Item>
6761
);
6862
})}
69-
</AccordionRoot>
63+
</Accordion.Root>
7064
<div class="flex gap-2 md:gap-4">
7165
<button
7266
style={{ color: 'green', marginTop: '1rem' }}

0 commit comments

Comments
 (0)