Skip to content

Commit fffbb87

Browse files
thejacksheltonthejackshelton
committed
feat(accordion): possible ready state, major refactor, major docs additions
1 parent f8a7bd0 commit fffbb87

File tree

15 files changed

+1485
-424
lines changed

15 files changed

+1485
-424
lines changed

‎apps/website/src/components/anatomy-table/anatomy-table.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { component$ } from '@builder.io/qwik';
2+
import { Popover, PopoverContent, PopoverTrigger } from '@qwik-ui/headless';
3+
import {} from '@qwik-ui/headless';
4+
5+
type AnatomyTableProps = {
6+
propDescriptors: {
7+
name: string;
8+
info: string;
9+
description: string;
10+
}[];
11+
};
12+
13+
export const AnatomyTable = component$(
14+
({ propDescriptors }: AnatomyTableProps) => {
15+
return (
16+
<div class="overflow-auto">
17+
<table class="w-full max-w-full border-b border-gray-700 text-left">
18+
<tbody class="divide-y divide-gray-700">
19+
<tr class="text-white">
20+
<td class="whitespace-nowrap py-2 pl-4 text-sm font-medium sm:pl-0">
21+
Component
22+
</td>
23+
<td class="whitespace-nowrap py-2 text-sm font-medium">
24+
Description
25+
</td>
26+
</tr>
27+
{propDescriptors?.map((propDescriptor) => {
28+
return (
29+
<tr key={propDescriptor.name}>
30+
<td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0 ">
31+
<code>{propDescriptor.name}</code>
32+
</td>
33+
<td class="py-3 align-baseline">
34+
<div class="prose prose-sm prose-docs-table">
35+
<p>{propDescriptor.description}</p>
36+
</div>
37+
</td>
38+
</tr>
39+
);
40+
})}
41+
</tbody>
42+
</table>
43+
</div>
44+
);
45+
}
46+
);

‎apps/website/src/components/api-table/api-table.tsx

Lines changed: 65 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -14,66 +14,70 @@ type APITableProps = {
1414

1515
export const APITable = component$(({ propDescriptors }: APITableProps) => {
1616
return (
17-
<table class="w-full min-w-[540px] border-b border-gray-700 text-left sm:min-w-full">
18-
<tbody class="divide-y divide-gray-700">
19-
<tr class="w-1/4 text-white">
20-
<td class="w-1/6 whitespace-nowrap py-2 pl-4 text-sm font-medium sm:pl-0">
21-
Prop
22-
</td>
23-
<td class="w-1/6 whitespace-nowrap py-2 text-sm font-medium">Type</td>
24-
<td class="w-2/3 whitespace-nowrap py-2 text-sm font-medium">
25-
Description
26-
</td>
27-
</tr>
28-
{propDescriptors?.map((propDescriptor) => {
29-
return (
30-
<tr key={propDescriptor.name}>
31-
<td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0 ">
32-
<code>{propDescriptor.name}</code>
33-
</td>
34-
<td class="prose prose-sm py-3 align-baseline">
35-
<span class="flex items-center">
36-
<code>{propDescriptor.type}</code>
37-
{propDescriptor.info && (
38-
<Popover placement="top">
39-
<PopoverContent>
40-
<div class="bg-[#202425] text-[#7881fa] max-w-xs mb-2 text-md px-4 py-2 rounded-md">
41-
{propDescriptor?.info}
42-
</div>
43-
</PopoverContent>
44-
<PopoverTrigger>
45-
<div class="hover:bg-slate-500 hover:bg-opacity-50 h-[31px] mt-2 p-2 rounded-md">
46-
<svg
47-
width="15"
48-
height="15"
49-
viewBox="0 0 15 15"
50-
fill="none"
51-
xmlns="http://www.w3.org/2000/svg"
52-
aria-hidden="true"
53-
focusable="false"
54-
>
55-
<path
56-
d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z"
57-
fill="currentColor"
58-
fill-rule="evenodd"
59-
clip-rule="evenodd"
60-
></path>
61-
</svg>
62-
</div>{' '}
63-
</PopoverTrigger>
64-
</Popover>
65-
)}
66-
</span>
67-
</td>
68-
<td class="py-3 align-baseline">
69-
<div class="prose prose-sm prose-docs-table">
70-
<p>{propDescriptor.description}</p>
71-
</div>
72-
</td>
73-
</tr>
74-
);
75-
})}
76-
</tbody>
77-
</table>
17+
<div class="overflow-auto">
18+
<table class="w-full min-w-[540px] border-b border-gray-700 text-left sm:min-w-full">
19+
<tbody class="divide-y divide-gray-700">
20+
<tr class="w-1/4 text-white">
21+
<td class="w-1/6 whitespace-nowrap py-2 pl-4 text-sm font-medium sm:pl-0">
22+
Prop
23+
</td>
24+
<td class="w-1/6 whitespace-nowrap py-2 text-sm font-medium">
25+
Type
26+
</td>
27+
<td class="w-2/3 whitespace-nowrap py-2 text-sm font-medium">
28+
Description
29+
</td>
30+
</tr>
31+
{propDescriptors?.map((propDescriptor) => {
32+
return (
33+
<tr key={propDescriptor.name}>
34+
<td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0 ">
35+
<code>{propDescriptor.name}</code>
36+
</td>
37+
<td class="prose prose-sm py-3 align-baseline">
38+
<span class="flex items-center">
39+
<code>{propDescriptor.type}</code>
40+
{propDescriptor.info && (
41+
<Popover placement="top">
42+
<PopoverContent>
43+
<div class="bg-[#202425] text-[#7881fa] max-w-xs mb-2 text-md px-4 py-2 rounded-md">
44+
{propDescriptor?.info}
45+
</div>
46+
</PopoverContent>
47+
<PopoverTrigger>
48+
<div class="hover:bg-slate-500 hover:bg-opacity-50 h-[31px] mt-2 p-2 rounded-md">
49+
<svg
50+
width="15"
51+
height="15"
52+
viewBox="0 0 15 15"
53+
fill="none"
54+
xmlns="http://www.w3.org/2000/svg"
55+
aria-hidden="true"
56+
focusable="false"
57+
>
58+
<path
59+
d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z"
60+
fill="currentColor"
61+
fill-rule="evenodd"
62+
clip-rule="evenodd"
63+
></path>
64+
</svg>
65+
</div>{' '}
66+
</PopoverTrigger>
67+
</Popover>
68+
)}
69+
</span>
70+
</td>
71+
<td class="py-3 align-baseline">
72+
<div class="prose prose-sm prose-docs-table">
73+
<p>{propDescriptor.description}</p>
74+
</div>
75+
</td>
76+
</tr>
77+
);
78+
})}
79+
</tbody>
80+
</table>
81+
</div>
7882
);
7983
});

‎apps/website/src/components/preview-code-example/preview-code-example.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@ export const PreviewCodeExample = component$(() => {
2525
Code
2626
</Tab>
2727
</TabList>
28-
<TabPanel class="rounded-b-xl p-12 bg-slate-200 dark:bg-slate-900">
28+
<TabPanel class="rounded-b-xl p-4 md:p-12 bg-slate-200 dark:bg-slate-900">
2929
<section class="flex flex-col items-center">
3030
<Slot name="actualComponent" />
3131
</section>
3232
</TabPanel>
33-
<TabPanel class="rounded-b-xl p-12 bg-slate-900">
33+
<TabPanel class="rounded-b-xl p-4 md:p-12 bg-slate-900">
3434
<section class="overflow-auto">
3535
<Slot name="codeExample" />
3636
</section>

‎apps/website/src/routes/docs.css

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,15 @@
1313
@apply mb-4;
1414
}
1515

16+
h1,
17+
h2,
18+
h3,
19+
h4,
20+
h5,
21+
h6 {
22+
overflow-wrap: break-word;
23+
}
24+
1625
h1 {
1726
@apply text-5xl font-bold mb-12;
1827
}
@@ -28,6 +37,22 @@
2837
h4 {
2938
@apply text-lg mb-6;
3039
}
40+
41+
h5 {
42+
@apply text-xl mb-1 font-bold;
43+
}
44+
45+
blockquote {
46+
@apply bg-[#BFDBFE] dark:bg-[#312E81] p-4 border-l-[3px] dark:border-[#F3F3F3] border-[#333333] rounded-sm;
47+
}
48+
49+
ul {
50+
@apply list-disc px-6 mb-4 font-[500];
51+
}
52+
53+
li {
54+
@apply py-2;
55+
}
3156
}
3257

3358
a {
@@ -39,7 +64,7 @@
3964
}
4065

4166
p code {
42-
@apply bg-transparent px-2 rounded-md dark:bg-transparent border-[1px] dark:border-white w-max border-[#333333];
67+
@apply bg-transparent px-2 mx-1 rounded-md dark:bg-transparent border-[1px] dark:border-white w-max border-[#333333];
4368
}
4469

4570
/* adds sufficient padding to the table items / API Component */
@@ -50,4 +75,8 @@
5075
td p {
5176
@apply mb-0;
5277
}
78+
79+
blockquote a {
80+
@apply border-[#333] dark:border-[#F3F3F3];
81+
}
5382
}

0 commit comments

Comments
 (0)