Skip to content

Commit 7936e57

Browse files
thejacksheltonthejackshelton
committed
Merge branch 'thejackshelton-accordion-improvements'
2 parents fe901bb + 1440378 commit 7936e57

File tree

17 files changed

+1869
-437
lines changed

17 files changed

+1869
-437
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/global.css

Lines changed: 48 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,6 @@
22
@tailwind base;
33
@tailwind utilities;
44

5-
@font-face {
6-
font-family: 'Poppins';
7-
font-style: normal;
8-
font-weight: 400;
9-
font-display: swap;
10-
src: url('/fonts/poppins-400.woff2') format('woff2');
11-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
12-
U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
13-
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
14-
}
15-
16-
@font-face {
17-
font-family: 'Poppins';
18-
font-style: normal;
19-
font-weight: 500;
20-
font-display: swap;
21-
src: url('/fonts/poppins-500.woff2') format('woff2');
22-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
23-
U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
24-
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
25-
}
26-
27-
@font-face {
28-
font-family: 'Poppins';
29-
font-style: normal;
30-
font-weight: 700;
31-
font-display: swap;
32-
src: url('/fonts/poppins-700.woff2') format('woff2');
33-
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
34-
U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
35-
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
36-
}
37-
385
:root {
396
--qwik-dark-blue: #006ce9;
407
--qwik-light-blue: #18b6f6;
@@ -45,6 +12,39 @@
4512
--light-color-bg: rgb(203 213 225);
4613
--light-color-text: #333;
4714

15+
@font-face {
16+
font-family: 'Poppins';
17+
font-style: normal;
18+
font-weight: 400;
19+
font-display: swap;
20+
src: url('/fonts/poppins-400.woff2') format('woff2');
21+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
22+
U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
23+
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
24+
}
25+
26+
@font-face {
27+
font-family: 'Poppins';
28+
font-style: normal;
29+
font-weight: 500;
30+
font-display: swap;
31+
src: url('/fonts/poppins-500.woff2') format('woff2');
32+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
33+
U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
34+
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
35+
}
36+
37+
@font-face {
38+
font-family: 'Poppins';
39+
font-style: normal;
40+
font-weight: 700;
41+
font-display: swap;
42+
src: url('/fonts/poppins-700.woff2') format('woff2');
43+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
44+
U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
45+
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
46+
}
47+
4848
--shadow-color: 0deg 0% 63%;
4949
--shadow-elevation-low: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
5050
0.9px 1px 1.5px -1.2px hsl(var(--shadow-color) / 0.34),
@@ -111,3 +111,18 @@ body {
111111
grid-template-columns: 25% 70%;
112112
grid-template-areas: 'sidebar content';
113113
}
114+
115+
/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
116+
It would make more sense to supply the user with the animation declaration in the docs.
117+
*/
118+
@layer utilities {
119+
.accordion-animation-1[data-state='open'] {
120+
animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards
121+
accordion-open;
122+
}
123+
124+
.accordion-animation-1[data-state='closed'] {
125+
animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards
126+
accordion-close;
127+
}
128+
}

‎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)