Skip to content

Commit 2e17962

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #370 from thejackshelton/thejackshelton-accordion-improvements
major accordion refactor, possible ready state
2 parents 3d55332 + 66e89b6 commit 2e17962

File tree

31 files changed

+1908
-611
lines changed

31 files changed

+1908
-611
lines changed

‎apps/website/src/_state/kit-name.type.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export enum KitName {
22
HEADLESS = 'healdess',
33
TAILWIND = 'tailwind',
4-
NO_KIT = 'no-kit',
4+
NO_KIT = 'no-kit'
55
}

‎apps/website/src/_state/root-store-context-id.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
import { createContextId } from '@builder.io/qwik';
22
import { AppState } from './app-state.type';
33

4-
export const ROOT_STORE_CONTEXT_ID = createContextId<AppState>(
5-
'app-state-context-id'
6-
);
4+
export const ROOT_STORE_CONTEXT_ID = createContextId<AppState>('app-state-context-id');

‎apps/website/src/global.css

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,8 @@
88
font-weight: 400;
99
font-display: fallback;
1010
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+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
13-
U+FEFF, U+FFFD;
11+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
12+
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
1413
}
1514

1615
@font-face {
@@ -19,9 +18,8 @@
1918
font-weight: 500;
2019
font-display: fallback;
2120
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+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
24-
U+FEFF, U+FFFD;
21+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
22+
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
2523
}
2624

2725
@font-face {
@@ -30,9 +28,8 @@
3028
font-weight: 700;
3129
font-display: fallback;
3230
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+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
35-
U+FEFF, U+FFFD;
31+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
32+
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
3633
}
3734

3835
:root {
@@ -66,13 +63,11 @@
6663
--dark-shadow-elevation-low: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
6764
0.9px 1.1px 1.6px -1.2px hsl(var(--dark-shadow-color) / 0.34),
6865
2.2px 2.6px 3.8px -2.5px hsl(var(--dark-shadow-color) / 0.34);
69-
--dark-shadow-elevation-medium: 0.5px 0.6px 0.9px
70-
hsl(var(--dark-shadow-color) / 0.36),
66+
--dark-shadow-elevation-medium: 0.5px 0.6px 0.9px hsl(var(--dark-shadow-color) / 0.36),
7167
1.8px 2.1px 3.1px -0.8px hsl(var(--dark-shadow-color) / 0.36),
7268
4.4px 5.3px 7.7px -1.7px hsl(var(--dark-shadow-color) / 0.36),
7369
10.8px 12.8px 18.8px -2.5px hsl(var(--dark-shadow-color) / 0.36);
74-
--dark-shadow-elevation-high: 0.5px 0.6px 0.9px
75-
hsl(var(--dark-shadow-color) / 0.34),
70+
--dark-shadow-elevation-high: 0.5px 0.6px 0.9px hsl(var(--dark-shadow-color) / 0.34),
7671
3.1px 3.7px 5.4px -0.4px hsl(var(--dark-shadow-color) / 0.34),
7772
5.9px 7px 10.3px -0.7px hsl(var(--dark-shadow-color) / 0.34),
7873
9.6px 11.5px 16.9px -1.1px hsl(var(--dark-shadow-color) / 0.34),
@@ -100,10 +95,9 @@ html {
10095
background-color: var(--color-bg) !important;
10196
color: var(--color-text) !important;
10297

103-
font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system,
104-
BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
105-
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', Segoe UI Symbol,
106-
'Noto Color Emoji';
98+
font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
99+
Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
100+
'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji';
107101
}
108102

109103
body {
@@ -114,3 +108,16 @@ body {
114108
grid-template-columns: 25% 70%;
115109
grid-template-areas: 'sidebar content';
116110
}
111+
112+
/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
113+
It would make more sense to supply the user with the animation declaration in the docs.
114+
*/
115+
@layer utilities {
116+
.accordion-animation-1[data-state='open'] {
117+
animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-open;
118+
}
119+
120+
.accordion-animation-1[data-state='closed'] {
121+
animation: 500ms cubic-bezier(0.87, 0, 0.13, 1) 0s 1 normal forwards accordion-close;
122+
}
123+
}

‎apps/website/src/root.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import {
33
useContextProvider,
44
useStore,
55
useStyles$,
6-
useVisibleTask$,
6+
useVisibleTask$
77
} from '@builder.io/qwik';
88
import {
99
QwikCityProvider,
1010
RouterOutlet,
11-
ServiceWorkerRegister,
11+
ServiceWorkerRegister
1212
} from '@builder.io/qwik-city';
1313
import { RouterHead } from './routes/_components/router-head/router-head';
1414

@@ -32,8 +32,8 @@ export default component$(() => {
3232
mode: 'light',
3333
isSidebarOpened: false,
3434
featureFlags: {
35-
showTailwind: import.meta.env.DEV,
36-
},
35+
showTailwind: import.meta.env.DEV
36+
}
3737
});
3838

3939
useContextProvider(ROOT_STORE_CONTEXT_ID, rootStore);
@@ -45,7 +45,7 @@ export default component$(() => {
4545

4646
// TODO: remove this old state once refactored
4747
const state = useStore<OldAppState>({
48-
darkMode: false,
48+
darkMode: false
4949
});
5050
useContextProvider(OLD_APP_STATE_CONTEXT_ID, state);
5151

@@ -61,7 +61,7 @@ export default component$(() => {
6161
<body
6262
lang="en"
6363
class={{
64-
'overflow-y-hidden': rootStore.isSidebarOpened,
64+
'overflow-y-hidden': rootStore.isSidebarOpened
6565
}}
6666
>
6767
<RouterOutlet />

‎apps/website/src/routes/(main)/about/[email protected]

Lines changed: 30 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -7,73 +7,66 @@ export default component$(() => {
77
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
88
<h1 class="text-4xl font-bold mb-8">About Qwik UI</h1>
99
<p class="text-lg mb-16">
10-
Qwik UI is the first ever component library for the revolutionary Qwik
11-
web framework. Developed by leading members of the Qwik community,{' '}
10+
Qwik UI is the first ever component library for the revolutionary Qwik web
11+
framework. Developed by leading members of the Qwik community,{' '}
1212
<mark class="text-purple-300 bg-transparent">
1313
including members from the Qwik team
1414
</mark>
15-
, Qwik UI offers an open-source solution for building instant loading
16-
and accessible web applications that achieve top-tier SEO performance.
15+
, Qwik UI offers an open-source solution for building instant loading and
16+
accessible web applications that achieve top-tier SEO performance.
1717
</p>
1818

1919
<h2 class="text-2xl font-semibold mb-4">Designed for Developers</h2>
2020
<p class="text-lg mb-16">
21-
Qwik UI is built for developers who want to harness the power of
22-
Qwik's innovative{' '}
23-
<mark class="text-purple-300 bg-transparent">
24-
JavaScript Streaming
25-
</mark>{' '}
26-
technology to create highly performant web applications with minimal
27-
effort. Whether you're working on an e-commerce platform, a dashboard
28-
or any scale application, Qwik UI provides the components and tools
29-
you need to deliver a seamless user experience.
21+
Qwik UI is built for developers who want to harness the power of Qwik's
22+
innovative{' '}
23+
<mark class="text-purple-300 bg-transparent">JavaScript Streaming</mark>{' '}
24+
technology to create highly performant web applications with minimal effort.
25+
Whether you're working on an e-commerce platform, a dashboard or any scale
26+
application, Qwik UI provides the components and tools you need to deliver a
27+
seamless user experience.
3028
</p>
3129

3230
<h2 class="text-2xl font-semibold mb-4">
3331
A MUST for E-commerce and SEO-focused Applications
3432
</h2>
3533
<p class="text-lg mb-16">
36-
Qwik's instant loading capabilities offer a significant advantage for
37-
e-commerce and other search engine-facing applications. By ensuring
38-
the highest Core Web Vitals scores, Qwik UI not only{' '}
34+
Qwik's instant loading capabilities offer a significant advantage for e-commerce
35+
and other search engine-facing applications. By ensuring the highest Core Web
36+
Vitals scores, Qwik UI not only{' '}
3937
<mark class="text-purple-300 bg-transparent">
4038
delivers an amazing user experience
4139
</mark>{' '}
4240
but also helps{' '}
4341
<mark class="text-purple-300 bg-transparent">
4442
improve your site's search engine rankings
4543
</mark>
46-
. Stand out from the competition with a web application that loads
47-
instantly, regardless of its size or complexity.
44+
. Stand out from the competition with a web application that loads instantly,
45+
regardless of its size or complexity.
4846
</p>
4947

5048
<h2 class="text-2xl font-semibold mb-4">Accessibility Matters</h2>
5149
<p class="text-lg mb-16">
52-
In addition to performance and SEO advantages, Qwik UI components are
53-
designed with accessibility in mind.{' '}
50+
In addition to performance and SEO advantages, Qwik UI components are designed
51+
with accessibility in mind.{' '}
5452
<mark class="text-purple-300 bg-transparent">
5553
We believe in creating inclusive web experiences
5654
</mark>{' '}
57-
that cater to users of all abilities, and our components are built to
58-
adhere to the highest accessibility standards.
55+
that cater to users of all abilities, and our components are built to adhere to
56+
the highest accessibility standards.
5957
</p>
60-
<h2 class="text-2xl font-semibold mb-4">
61-
Open Source and Community-Driven
62-
</h2>
58+
<h2 class="text-2xl font-semibold mb-4">Open Source and Community-Driven</h2>
6359
<p class="text-lg mb-16">
64-
Qwik UI is an open-source project, which means that it's freely
65-
available for developers to use and contribute to. By fostering a{' '}
66-
<mark class="text-purple-300 bg-transparent">
67-
community-driven approach
68-
</mark>
69-
, we aim to continuously improve and expand the capabilities of Qwik
70-
UI, making it the go-to component library for developers working the
71-
Qwik framework.
60+
Qwik UI is an open-source project, which means that it's freely available for
61+
developers to use and contribute to. By fostering a{' '}
62+
<mark class="text-purple-300 bg-transparent">community-driven approach</mark>,
63+
we aim to continuously improve and expand the capabilities of Qwik UI, making it
64+
the go-to component library for developers working the Qwik framework.
7265
</p>
7366
<p class="text-lg mb-16">
74-
Join us in our mission to revolutionize web development and create
75-
instant loading web applications that offer unparalleled performance,
76-
SEO advantages, and accessibility.
67+
Join us in our mission to revolutionize web development and create instant
68+
loading web applications that offer unparalleled performance, SEO advantages,
69+
and accessibility.
7770
</p>
7871

7972
<a href="/docs/headless/introduction">
@@ -87,5 +80,5 @@ export default component$(() => {
8780
});
8881

8982
export const head: DocumentHead = {
90-
title: 'Qwik UI | About the project',
83+
title: 'Qwik UI | About the project'
9184
};

‎apps/website/src/routes/_components/footer/footer.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,7 @@ export const Footer = component$(() => {
66
return (
77
<footer class="bg-gray-300 dark:bg-gray-900">
88
<div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
9-
<nav
10-
class="-mx-5 -my-2 flex flex-wrap justify-center"
11-
aria-label="Footer"
12-
>
9+
<nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
1310
<div class="px-5 py-2">
1411
<a
1512
href="/about"

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

‎apps/website/src/routes/docs/_components/alpha-banner/alpha-banner.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
Slot,
44
component$,
55
useSignal,
6-
useStylesScoped$,
6+
useStylesScoped$
77
} from '@builder.io/qwik';
88

99
export const AlphaBanner = component$(() => {
@@ -76,9 +76,9 @@ export const AlphaBanner = component$(() => {
7676
class="bg-[#fef1c7] dark:bg-[#92730e] mb-8 px-6 py-4 rounded-xl md:items-center relative md:flex-row normal-state shadow-depth dark:shadow-depth-dark"
7777
>
7878
<span class="pr-2">
79-
<strong>WARNING:</strong> This component is currently in Alpha, and
80-
not intended to use in production. You may use it for testing
81-
purposes, or use a component with the <strong>Ready</strong> state
79+
<strong>WARNING:</strong> This component is currently in Alpha, and not intended
80+
to use in production. You may use it for testing purposes, or use a component
81+
with the <strong>Ready</strong> state
8282
</span>
8383
<button
8484
onClick$={() => ref.value?.classList.toggle('fade')}
@@ -91,10 +91,7 @@ export const AlphaBanner = component$(() => {
9191
);
9292
});
9393

94-
export function EpCircleCloseFilled(
95-
props: QwikIntrinsicElements['svg'],
96-
key: string
97-
) {
94+
export function EpCircleCloseFilled(props: QwikIntrinsicElements['svg'], key: string) {
9895
return (
9996
<svg
10097
xmlns="http://www.w3.org/2000/svg"

‎apps/website/src/routes/docs/_components/anatomy-table/anatomy-table.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
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$(({ propDescriptors }: AnatomyTableProps) => {
14+
return (
15+
<div class="overflow-auto">
16+
<table class="w-full max-w-full border-b border-gray-700 text-left">
17+
<tbody class="divide-y divide-gray-700">
18+
<tr class="text-white">
19+
<td class="whitespace-nowrap py-2 pl-4 text-sm font-medium sm:pl-0">
20+
Component
21+
</td>
22+
<td class="whitespace-nowrap py-2 text-sm font-medium">Description</td>
23+
</tr>
24+
{propDescriptors?.map((propDescriptor) => {
25+
return (
26+
<tr key={propDescriptor.name}>
27+
<td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0 ">
28+
<code>{propDescriptor.name}</code>
29+
</td>
30+
<td class="py-3 align-baseline">
31+
<div class="prose prose-sm prose-docs-table">
32+
<p>{propDescriptor.description}</p>
33+
</div>
34+
</td>
35+
</tr>
36+
);
37+
})}
38+
</tbody>
39+
</table>
40+
</div>
41+
);
42+
});

0 commit comments

Comments
 (0)