Skip to content

Commit 50507d5

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #669 from thejackshelton/collapsible
Collapsible beta!
2 parents 2afd090 + 5470487 commit 50507d5

27 files changed

+711
-250
lines changed

‎.changeset/lazy-clouds-march.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@qwik-ui/headless': patch
3+
---
4+
5+
feat: collapsible hits beta!

‎apps/website/src/_state/component-statuses.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const statusByComponent: ComponentKitsStatuses = {
3535
headless: {
3636
Accordion: ComponentStatus.Beta,
3737
Carousel: ComponentStatus.Draft,
38-
Collapsible: ComponentStatus.Draft,
38+
Collapsible: ComponentStatus.Beta,
3939
Combobox: ComponentStatus.Beta,
4040
Modal: ComponentStatus.Beta,
4141
Pagination: ComponentStatus.Draft,

‎apps/website/src/components/feature-list/feature-list.tsx

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,32 @@
11
import { component$ } from '@builder.io/qwik';
22
import { CheckIcon } from '../icons/Check';
33
import { Roadmap } from '../icons/Roadmap';
4+
import { IssueIcon } from '../icons/Issues';
45

56
type FeatureListProps = {
67
features: string[];
78
roadmap?: string[];
9+
issues?: string[];
810
};
911

1012
export const FeatureList = component$((props: FeatureListProps) => {
1113
return (
1214
<ul class="mb-12 mt-[-16px] !px-0">
13-
{props.features.map((descriptor) => {
14-
return (
15-
<li
16-
key={descriptor}
17-
class="flex w-full list-none items-center gap-x-2 gap-y-4 border-b-[1px] border-slate-200 py-2 dark:border-slate-800"
18-
>
19-
<CheckIcon class="min-w-[21px]" />
20-
{descriptor}
21-
</li>
22-
);
23-
})}
15+
{props.features && (
16+
<>
17+
{props.features.map((descriptor) => {
18+
return (
19+
<li
20+
key={descriptor}
21+
class="flex w-full list-none items-center gap-x-2 gap-y-4 border-b-[1px] border-slate-200 py-2 dark:border-slate-800"
22+
>
23+
<CheckIcon class="min-w-[21px]" />
24+
{descriptor}
25+
</li>
26+
);
27+
})}
28+
</>
29+
)}
2430
{props.roadmap && (
2531
<>
2632
<h3 class="mb-6 mt-8 scroll-mt-20 text-xl font-semibold">Roadmap</h3>
@@ -39,6 +45,23 @@ export const FeatureList = component$((props: FeatureListProps) => {
3945
})}
4046
</>
4147
)}
48+
{props.issues && (
49+
<>
50+
{props.issues.map((descriptor) => {
51+
return (
52+
<>
53+
<li
54+
key={descriptor}
55+
class="flex w-full list-none items-center gap-x-2 gap-y-4 border-b-[1px] border-slate-200 py-2 dark:border-slate-800"
56+
>
57+
<IssueIcon class="min-w-[21px]" />
58+
{descriptor}
59+
</li>
60+
</>
61+
);
62+
})}
63+
</>
64+
)}
4265
</ul>
4366
);
4467
});

‎apps/website/src/components/icons/Issues.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { PropsOf } from '@builder.io/qwik';
2+
3+
export function IssueIcon(props: PropsOf<'svg'>, key: string) {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
width="1.35em"
8+
height="1.35em"
9+
viewBox="0 0 256 256"
10+
{...props}
11+
key={key}
12+
>
13+
<g fill="hsl(var(--alert))">
14+
<path d="M224 128a96 96 0 1 1-96-96a96 96 0 0 1 96 96" opacity=".2"></path>
15+
<path d="M176 128a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h80a8 8 0 0 1 8 8m56 0A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"></path>
16+
</g>
17+
</svg>
18+
);
19+
}

‎apps/website/src/routes/docs/headless/collapsible/examples/animation.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { component$, useStyles$ } from '@builder.io/qwik';
2+
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@qwik-ui/headless';
3+
import styles from '../snippets/collapsible.css?inline';
4+
import SVG from './svg';
5+
6+
export default component$(() => {
7+
useStyles$(styles);
8+
9+
return (
10+
<Collapsible class="collapsible">
11+
<CollapsibleTrigger class="collapsible-trigger">
12+
<span>Trigger</span>
13+
<SVG class="collapsible-transition" />
14+
</CollapsibleTrigger>
15+
<CollapsibleContent class="collapsible-animation collapsible-content">
16+
<p class="collapsible-content-outline">Content</p>
17+
</CollapsibleContent>
18+
</Collapsible>
19+
);
20+
});

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { component$, useStyles$ } from '@builder.io/qwik';
2+
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@qwik-ui/headless';
3+
import styles from '../snippets/collapsible.css?inline';
4+
import SVG from './svg';
5+
6+
export default component$(() => {
7+
useStyles$(styles);
8+
9+
return (
10+
<Collapsible class="collapsible" disabled>
11+
<CollapsibleTrigger class="collapsible-trigger">
12+
<span>Trigger</span>
13+
<SVG />
14+
</CollapsibleTrigger>
15+
<CollapsibleContent class="collapsible-content collapsible-content-outline ">
16+
Content
17+
</CollapsibleContent>
18+
</Collapsible>
19+
);
20+
});

‎apps/website/src/routes/docs/headless/collapsible/examples/hero.tsx

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,19 @@
1-
import { component$ } from '@builder.io/qwik';
1+
import { component$, useStyles$ } from '@builder.io/qwik';
22
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@qwik-ui/headless';
3-
import { DoubleChevron } from '~/components/icons/double-chevron';
4-
import './collapsible.css';
3+
import styles from '../snippets/collapsible.css?inline';
4+
import SVG from './svg';
55

66
export default component$(() => {
7+
useStyles$(styles);
8+
79
return (
8-
<Collapsible class="flex flex-col">
9-
<div class="mb-2 flex items-center justify-between px-2">
10-
<span class="w-fit">
11-
<strong>@thejackshelton</strong> starred 3 repositories
12-
</span>
13-
<CollapsibleTrigger class="rounded-base mx-2 mr-0 bg-slate-700 p-1 text-white shadow-lg dark:bg-slate-800">
14-
<DoubleChevron class="size-4" />
15-
</CollapsibleTrigger>
16-
</div>
17-
<div class="rounded-base mx-2 mb-2 bg-slate-700 p-2 text-white shadow-md dark:bg-slate-800">
18-
@qwik-ui/headless
19-
</div>
20-
<CollapsibleContent class="animation">
21-
<div class="rounded-base mx-2 mb-2 bg-slate-700 p-2 text-white shadow-md dark:bg-slate-800">
22-
@builder.io/qwik
23-
</div>
24-
<div class="rounded-base mx-2 bg-slate-700 p-2 text-white shadow-md dark:bg-slate-800">
25-
@qwikdev/astro
26-
</div>
27-
<div class="p-2"></div>
10+
<Collapsible class="collapsible">
11+
<CollapsibleTrigger class="collapsible-trigger">
12+
<span>Trigger</span>
13+
<SVG />
14+
</CollapsibleTrigger>
15+
<CollapsibleContent class="collapsible-content collapsible-content-outline ">
16+
Content
2817
</CollapsibleContent>
2918
</Collapsible>
3019
);

‎apps/website/src/routes/docs/headless/collapsible/examples/no-animation.tsx

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎apps/website/src/routes/docs/headless/collapsible/examples/open-change.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { component$, useStyles$, useSignal, $ } from '@builder.io/qwik';
2+
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@qwik-ui/headless';
3+
import styles from '../snippets/collapsible.css?inline';
4+
import SVG from './svg';
5+
6+
export default component$(() => {
7+
useStyles$(styles);
8+
const count = useSignal<number>(0);
9+
10+
const handleOpenChange$ = $((open: boolean) => {
11+
if (open) {
12+
count.value++;
13+
}
14+
});
15+
16+
return (
17+
<Collapsible class="collapsible" onOpenChange$={handleOpenChange$}>
18+
<CollapsibleTrigger class="collapsible-trigger">
19+
<span>Trigger</span>
20+
<SVG />
21+
</CollapsibleTrigger>
22+
<CollapsibleContent class="collapsible-content collapsible-content-outline ">
23+
Content: {count.value}
24+
</CollapsibleContent>
25+
</Collapsible>
26+
);
27+
});

‎apps/website/src/routes/docs/headless/collapsible/examples/open.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { component$, useStyles$ } from '@builder.io/qwik';
2+
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@qwik-ui/headless';
3+
import styles from '../snippets/collapsible.css?inline';
4+
import SVG from './svg';
5+
6+
export default component$(() => {
7+
useStyles$(styles);
8+
9+
return (
10+
<Collapsible class="collapsible" open>
11+
<CollapsibleTrigger class="collapsible-trigger">
12+
<span>Trigger</span>
13+
<SVG />
14+
</CollapsibleTrigger>
15+
<CollapsibleContent class="collapsible-content collapsible-content-outline ">
16+
Content
17+
</CollapsibleContent>
18+
</Collapsible>
19+
);
20+
});

0 commit comments

Comments
 (0)