Skip to content

Commit 6ddd7bb

Browse files
maiieulmaiieul
authored
feat(styled kit): collapsible component (#1102)
* feat(styled kit): collapsible component * chore: changeset * docs: more precision
1 parent 9828f89 commit 6ddd7bb

File tree

16 files changed

+186
-33
lines changed

16 files changed

+186
-33
lines changed

‎.changeset/fair-women-cover.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@qwik-ui/styled': patch
3+
---
4+
5+
FEAT: The styled kit Collapsible component is now available.

‎apps/website/src/components/highlight/highlight.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export type HighlightProps = PropsOf<'div'> & {
2121
export const Highlight = component$(
2222
({ code, copyCodeClass, language = 'tsx', ...props }: HighlightProps) => {
2323
return (
24-
<div class="code-example data-pagefind-ignore relative max-h-[31.25rem] rounded-base">
24+
<div class="code-example data-pagefind-ignore relative rounded-base">
2525
<CodeCopy
2626
class={[
2727
'absolute right-3 top-3 text-white hover:bg-slate-800 hover:text-white',
@@ -32,7 +32,7 @@ export const Highlight = component$(
3232
<div
3333
{...props}
3434
class={cn(
35-
'tab-size max-h-[31.25rem] max-w-full overflow-auto rounded-sm bg-gradient-to-b from-slate-900 to-slate-800 p-6 text-sm dark:from-background dark:to-accent/30',
35+
'tab-size max-h-[494px] max-w-full overflow-auto rounded-sm bg-gradient-to-b from-slate-900 to-slate-800 p-6 text-sm dark:from-background dark:to-accent/30',
3636
props.class,
3737
)}
3838
data-pagefind-ignore="all"

‎apps/website/src/components/showcase/showcase.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ export const Showcase = component$<ShowcaseProps>(({ rawCode, ...props }) => {
2323
Code
2424
</Tabs.Tab>
2525
</Tabs.List>
26-
<Tabs.Panel class="rounded-b-md border px-8 py-32 md:px-32">
27-
<section class="flex flex-col items-center">
26+
<Tabs.Panel class="h-[500px] rounded-b-md border px-8 py-32 md:px-32">
27+
<section class="flex h-full flex-col items-center justify-center">
2828
<Slot />
2929
</section>
3030
</Tabs.Panel>

‎apps/website/src/routes/docs/headless/collapsible/auto-api/api.ts

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,16 @@
11
export const api = {
2-
collapsible: [
2+
"collapsible": [
33
{
4-
'collapsible-content': [],
4+
"collapsible-content": []
55
},
66
{
7-
'collapsible-trigger': [],
7+
"collapsible-trigger": []
88
},
99
{
10-
collapsible: [
11-
{
12-
CollapsibleProps: [
13-
{
14-
comment: '@deprecated use `onChange$` instead',
15-
prop: 'onOpenChange$',
16-
type: 'QRL<(open: boolean) => void>',
17-
},
18-
],
19-
},
20-
],
10+
"collapsible": []
2111
},
2212
{
23-
'use-collapsible': [],
24-
},
25-
],
26-
};
13+
"use-collapsible": []
14+
}
15+
]
16+
};

‎apps/website/src/routes/docs/styled/carousel/examples/hero-vertical.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { LuChevronUp } from '@qwikest/icons/lucide';
66
export default component$(() => {
77
return (
88
<Carousel.Root
9-
class="w-full"
9+
class="w-full max-w-sm"
1010
orientation="vertical"
1111
maxSlideHeight={360}
1212
slidesPerView={3}
@@ -17,7 +17,7 @@ export default component$(() => {
1717
<div class="p-1">
1818
<Card.Root>
1919
<Card.Content class="flex w-full items-center justify-center pt-6">
20-
<span class="text-4xl font-semibold">{index + 1}</span>
20+
<span class="text-3xl font-semibold">{index + 1}</span>
2121
</Card.Content>
2222
</Card.Root>
2323
</div>

‎apps/website/src/routes/docs/styled/carousel/examples/hero.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Card, Carousel } from '@qwik-ui/styled';
33

44
export default component$(() => {
55
return (
6-
<Carousel.Root class="max-w-xs sm:max-w-sm">
6+
<Carousel.Root class="max-w-xs">
77
<Carousel.Scroller class="m-2">
88
{Array.from({ length: 9 }).map((_, index) => (
99
<Carousel.Slide key={index}>

‎apps/website/src/routes/docs/styled/carousel/examples/pagination.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Card, Carousel } from '@qwik-ui/styled';
33

44
export default component$(() => {
55
return (
6-
<Carousel.Root class="max-w-xs sm:max-w-sm">
6+
<Carousel.Root class="max-w-xs">
77
<Carousel.Scroller>
88
{Array.from({ length: 5 }).map((_, index) => (
99
<Carousel.Slide key={index}>

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { cn } from '@qwik-ui/utils';
3+
import { LuChevronsUpDown } from '@qwikest/icons/lucide';
4+
import { buttonVariants, Collapsible } from '~/components/ui';
5+
6+
export default component$(() => {
7+
return (
8+
<Collapsible.Root class="flex w-[350px] flex-col gap-2">
9+
<div class="flex items-center justify-between gap-4 px-4">
10+
<h4 class="text-sm font-semibold">@peduarte starred 3 repositories</h4>
11+
<Collapsible.Trigger
12+
class={cn(buttonVariants({ size: 'icon', look: 'ghost' }), 'size-8')}
13+
>
14+
<LuChevronsUpDown />
15+
</Collapsible.Trigger>
16+
</div>
17+
<div class="rounded-md border px-4 py-2 font-mono text-sm">@qwik-ui/headless</div>
18+
<Collapsible.Content>
19+
<div class="flex flex-col gap-2">
20+
<div class="rounded-md border px-4 py-2 font-mono text-sm">
21+
@qwik-ui/kit-styled
22+
</div>
23+
<div class="rounded-md border px-4 py-2 font-mono text-sm">
24+
@qwik-ui/kit-headless
25+
</div>
26+
</div>
27+
</Collapsible.Content>
28+
</Collapsible.Root>
29+
);
30+
});

‎apps/website/src/routes/docs/styled/collapsible/index.mdx

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
title: Qwik UI | Styled Collapsible Component
3+
description: An interactive section that shows or hides its connected information. Copy/paste into your project from the documentation or by using the CLI. Easily customize the CVA variants according to your brand requirements.
4+
---
5+
6+
import { statusByComponent } from '~/_state/component-statuses';
7+
8+
import { ShowcaseHero } from './showcase-components';
9+
10+
11+
<StatusBanner status={statusByComponent.styled.Collapsible} />
12+
13+
# Collapsible
14+
15+
An interactive section that shows or hides its connected information.
16+
17+
<ShowcaseHero />
18+
19+
## Installation
20+
21+
### 1. Run the following cli command or copy/paste the component code into your project
22+
23+
```sh
24+
qwik-ui add collapsible
25+
```
26+
27+
```tsx
28+
import { component$, Slot, type PropsOf } from '@builder.io/qwik';
29+
import { Collapsible as HeadlessCollapsible } from '@qwik-ui/headless';
30+
import { cn } from '@qwik-ui/utils';
31+
32+
const Root = (props: PropsOf<typeof HeadlessCollapsible.Root>) => (
33+
<HeadlessCollapsible.Root {...props}>{props.children}</HeadlessCollapsible.Root>
34+
);
35+
36+
const Trigger = component$<PropsOf<typeof HeadlessCollapsible.Trigger>>(
37+
({ ...props }) => {
38+
return (
39+
<HeadlessCollapsible.Trigger {...props}>
40+
<Slot />
41+
</HeadlessCollapsible.Trigger>
42+
);
43+
},
44+
);
45+
46+
const Content = component$<PropsOf<typeof HeadlessCollapsible.Content>>((props) => {
47+
return (
48+
<HeadlessCollapsible.Content {...props} class={cn(props.class)}>
49+
<Slot />
50+
</HeadlessCollapsible.Content>
51+
);
52+
});
53+
54+
export const Collapsible = {
55+
Root,
56+
Trigger,
57+
Content,
58+
};
59+
```
60+
61+
## Usage
62+
63+
The styled Collapsible component doesn't isn't really styled because it's meant to be a wrapper around some items in a list or menu.
64+
65+
```tsx
66+
import { Collapsible } from '~/components/ui';
67+
```
68+
69+
```tsx
70+
<Collapsible.Root>
71+
<Collapsible.Trigger>Is it accessible?</Collapsible.Trigger>
72+
<Collapsible.Content>Yes. It adheres to the WAI-ARIA design pattern.</Collapsible.Content>
73+
</Collapsible.Root>
74+
```

‎apps/website/src/routes/docs/styled/collapsible/showcase-components.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { Showcase } from '~/components/showcase/showcase';
3+
4+
import Hero from './examples/hero';
5+
import HeroRawCode from './examples/hero.tsx?raw';
6+
export const ShowcaseHero = component$(() => {
7+
return (
8+
<Showcase rawCode={HeroRawCode}>
9+
<Hero />
10+
</Showcase>
11+
);
12+
});

0 commit comments

Comments
 (0)