Skip to content

Commit c5d4017

Browse files
thejacksheltonthejackshelton
committed
feat(accordion & banner): major accordion refactor and banner component for docs
1 parent f7116a7 commit c5d4017

File tree

17 files changed

+787
-231
lines changed

17 files changed

+787
-231
lines changed

‎apps/website/src/components/alpha-banner/alpha-banner.tsx

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import {
2+
QwikIntrinsicElements,
3+
Slot,
4+
component$,
5+
useSignal,
6+
useStylesScoped$,
7+
} from '@builder.io/qwik';
8+
9+
export const AlphaBanner = component$(() => {
10+
const ref = useSignal<HTMLElement | undefined>();
11+
const isClosed = useSignal(false);
12+
13+
useStylesScoped$(`
14+
.normal-state {
15+
transition: margin-top 0.5s ease;
16+
}
17+
18+
/*
19+
if you see these media queries I'm sorry xd. Normally, you would use a transform here, since it reflects the elements size, but margin-top affects the siblig elements, and is the only way I can animate the upwards slide (without JS) in this component.
20+
21+
I could do it with JS using RequestAnimationFrame
22+
-Jack
23+
*/
24+
25+
.fade {
26+
animation: fadeOut 0.5s ease forwards;
27+
margin-top: -256px;
28+
}
29+
30+
@media (min-width: 336px) {
31+
.fade {
32+
margin-top: -232px;
33+
}
34+
}
35+
36+
@media (min-width: 365px) {
37+
.fade {
38+
margin-top: -208px;
39+
}
40+
}
41+
42+
@media (min-width: 405px) {
43+
.fade {
44+
margin-top: -184px;
45+
}
46+
}
47+
48+
@media (min-width: 479px) {
49+
.fade {
50+
margin-top: -160px;
51+
}
52+
}
53+
54+
@media (min-width: 812px) {
55+
.fade {
56+
margin-top: -112px
57+
}
58+
}
59+
60+
@keyframes fadeOut {
61+
from {
62+
opacity: 1;
63+
}
64+
to {
65+
opacity: 0;
66+
}
67+
}
68+
`);
69+
70+
return (
71+
<>
72+
<div
73+
ref={ref}
74+
hidden={isClosed.value}
75+
onAnimationEnd$={() => (isClosed.value = true)}
76+
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"
77+
>
78+
<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
82+
</span>
83+
<button
84+
onClick$={() => ref.value?.classList.toggle('fade')}
85+
class="scale-150 absolute top-2 right-2"
86+
>
87+
<EpCircleCloseFilled />
88+
</button>
89+
</div>
90+
</>
91+
);
92+
});
93+
94+
export function EpCircleCloseFilled(
95+
props: QwikIntrinsicElements['svg'],
96+
key: string
97+
) {
98+
return (
99+
<svg
100+
xmlns="http://www.w3.org/2000/svg"
101+
width="1em"
102+
height="1em"
103+
viewBox="0 0 1024 1024"
104+
{...props}
105+
key={key}
106+
>
107+
<path
108+
fill="currentColor"
109+
d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896zm0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512L353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336L616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512L670.4 407.936a38.4 38.4 0 1 0-54.336-54.336L512 457.664z"
110+
></path>
111+
</svg>
112+
);
113+
}

‎apps/website/src/global.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,42 @@
4444
--dark-color-text: rgb(203 213 225);
4545
--light-color-bg: rgb(203 213 225);
4646
--light-color-text: #333;
47+
48+
--shadow-color: 0deg 0% 63%;
49+
--shadow-elevation-low: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
50+
0.9px 1px 1.5px -1.2px hsl(var(--shadow-color) / 0.34),
51+
2.1px 2.3px 3.5px -2.5px hsl(var(--shadow-color) / 0.34);
52+
--shadow-elevation-medium: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.36),
53+
1.7px 1.9px 2.9px -0.8px hsl(var(--shadow-color) / 0.36),
54+
4.3px 4.8px 7.2px -1.7px hsl(var(--shadow-color) / 0.36),
55+
10.4px 11.6px 17.5px -2.5px hsl(var(--shadow-color) / 0.36);
56+
--shadow-elevation-high: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
57+
3px 3.4px 5.1px -0.4px hsl(var(--shadow-color) / 0.34),
58+
5.6px 6.3px 9.5px -0.7px hsl(var(--shadow-color) / 0.34),
59+
9.3px 10.4px 15.7px -1.1px hsl(var(--shadow-color) / 0.34),
60+
14.8px 16.6px 25px -1.4px hsl(var(--shadow-color) / 0.34),
61+
23.1px 26px 39.1px -1.8px hsl(var(--shadow-color) / 0.34),
62+
35.1px 39.5px 59.4px -2.1px hsl(var(--shadow-color) / 0.34),
63+
51.8px 58.2px 87.7px -2.5px hsl(var(--shadow-color) / 0.34);
64+
65+
--dark-shadow-color: 218deg 49% 7%;
66+
--dark-shadow-elevation-low: 0.5px 0.6px 0.9px hsl(var(--shadow-color) / 0.34),
67+
0.9px 1.1px 1.6px -1.2px hsl(var(--dark-shadow-color) / 0.34),
68+
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),
71+
1.8px 2.1px 3.1px -0.8px hsl(var(--dark-shadow-color) / 0.36),
72+
4.4px 5.3px 7.7px -1.7px hsl(var(--dark-shadow-color) / 0.36),
73+
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),
76+
3.1px 3.7px 5.4px -0.4px hsl(var(--dark-shadow-color) / 0.34),
77+
5.9px 7px 10.3px -0.7px hsl(var(--dark-shadow-color) / 0.34),
78+
9.6px 11.5px 16.9px -1.1px hsl(var(--dark-shadow-color) / 0.34),
79+
15.4px 18.3px 26.9px -1.4px hsl(var(--dark-shadow-color) / 0.34),
80+
24.1px 28.6px 42.1px -1.8px hsl(var(--dark-shadow-color) / 0.34),
81+
36.6px 43.5px 64px -2.1px hsl(var(--dark-shadow-color) / 0.34),
82+
53.9px 64.1px 94.2px -2.5px hsl(var(--dark-shadow-color) / 0.34);
4783
}
4884

4985
.light {

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,18 @@
2828
h4 {
2929
@apply text-lg mb-6;
3030
}
31+
}
3132

32-
a {
33-
@apply border-b-2 border-[#00B9FC] font-bold;
34-
}
33+
a {
34+
@apply border-b-[1.25px] border-[#00B9FC] font-bold transition-[border-radius] duration-500 ease-in;
35+
}
36+
37+
a:hover {
38+
@apply border-b-2;
39+
}
40+
41+
p code {
42+
@apply bg-transparent px-2 rounded-md dark:bg-transparent border-[1px] dark:border-white w-max border-[#333333];
3543
}
3644

3745
/* adds sufficient padding to the table items / API Component */

0 commit comments

Comments
 (0)