Skip to content

Commit e2c7afc

Browse files
thejacksheltonthejackshelton
authored
Merge pull request #360 from thejackshelton/accordion-changes
Major accordion refactor, banner component
2 parents dc7981c + 7ba09c3 commit e2c7afc

File tree

29 files changed

+1570
-491
lines changed

29 files changed

+1570
-491
lines changed

‎.vscode/launch.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "chrome",
9+
"request": "launch",
10+
"name": "Launch Chrome against localhost",
11+
"url": "http://localhost:8080",
12+
"webRoot": "${workspaceFolder}"
13+
}
14+
]
15+
}

‎.vscode/qwik.code-snippets

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
{
2+
"Qwik component (simple)": {
3+
"scope": "javascriptreact,typescriptreact",
4+
"prefix": "qcomponent$",
5+
"description": "Simple Qwik component",
6+
"body": [
7+
"export const ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}} = component$(() => {",
8+
" return <${2:div}>$4</$2>",
9+
"});"
10+
]
11+
},
12+
"Qwik component (props)": {
13+
"scope": "typescriptreact",
14+
"prefix": "qcomponent$ + props",
15+
"description": "Qwik component w/ props",
16+
"body": [
17+
"export interface ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Props {",
18+
" $2",
19+
"}",
20+
"",
21+
"export const $1 = component$<$1Props>((props) => {",
22+
" const ${2:count} = useSignal(0);",
23+
" return (",
24+
" <${3:div} on${4:Click}$={(ev) => {$5}}>",
25+
" $6",
26+
" </${3}>",
27+
" );",
28+
"});"
29+
]
30+
},
31+
"Qwik signal": {
32+
"scope": "javascriptreact,typescriptreact",
33+
"prefix": "quseSignal",
34+
"description": "useSignal() declaration",
35+
"body": ["const ${1:foo} = useSignal($2);", "$0"]
36+
},
37+
"Qwik store": {
38+
"scope": "javascriptreact,typescriptreact",
39+
"prefix": "quseStore",
40+
"description": "useStore() declaration",
41+
"body": ["const ${1:state} = useStore({", " $2", "});", "$0"]
42+
},
43+
"$ hook": {
44+
"scope": "javascriptreact,typescriptreact",
45+
"prefix": "q$",
46+
"description": "$() function hook",
47+
"body": ["$(() => {", " $0", "});", ""]
48+
},
49+
"useVisibleTask": {
50+
"scope": "javascriptreact,typescriptreact",
51+
"prefix": "quseVisibleTask",
52+
"description": "useVisibleTask$() function hook",
53+
"body": ["useVisibleTask$(({ track }) => {", " $0", "});", ""]
54+
},
55+
"useTask": {
56+
"scope": "javascriptreact,typescriptreact",
57+
"prefix": "quseTask$",
58+
"description": "useTask$() function hook",
59+
"body": [
60+
"useTask$(({ track }) => {",
61+
" track(() => $1);",
62+
" $0",
63+
"});",
64+
""
65+
]
66+
},
67+
"useResource": {
68+
"scope": "javascriptreact,typescriptreact",
69+
"prefix": "quseResource$",
70+
"description": "useResource$() declaration",
71+
"body": [
72+
"const $1 = useResource$(({ track, cleanup }) => {",
73+
" $0",
74+
"});",
75+
""
76+
]
77+
}
78+
}

‎apps/website/postcss.config.cjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ const path = require('path');
22

33
module.exports = {
44
plugins: {
5+
'tailwindcss/nesting': 'postcss-nested',
56
tailwindcss: {
67
config: path.join(__dirname, 'tailwind.config.cjs'),
78
},

‎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: 51 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,53 @@
11
.docs {
2-
@apply lg:ml-80 w-full lg:max-w-4xl xl:max-w-6xl py-8 px-8 lg:px-16;
3-
}
4-
5-
.docs h1 {
6-
@apply text-5xl font-bold mb-12;
7-
}
8-
9-
.docs h2 {
10-
@apply text-3xl font-bold mt-20 mb-12 border-b-2;
11-
}
12-
13-
.docs h3 {
14-
@apply text-xl font-bold mb-6;
15-
}
16-
17-
.docs h4 {
18-
@apply text-lg mb-6;
19-
}
20-
21-
/* Styles Jack has added / will change */
22-
.docs a {
23-
@apply border-b-2 border-[#00B9FC] font-bold;
24-
}
25-
26-
/* adds sufficient padding to the table items */
27-
.docs td article {
28-
@apply pt-4 pb-4 mb-0;
29-
}
30-
31-
.docs p {
32-
@apply mb-4;
33-
}
34-
35-
.docs td p {
36-
@apply mb-0;
2+
& {
3+
@apply lg:ml-80 w-full lg:max-w-4xl xl:max-w-6xl py-8 px-8 lg:px-16;
4+
}
5+
6+
/*
7+
Styles that are direct descendents of .docs
8+
this should not affect the styles inside of the tabpanel
9+
A.K.A the components
10+
*/
11+
& > {
12+
p {
13+
@apply mb-4;
14+
}
15+
16+
h1 {
17+
@apply text-5xl font-bold mb-12;
18+
}
19+
20+
h2 {
21+
@apply text-3xl font-bold mt-20 mb-12 border-b-2;
22+
}
23+
24+
h3 {
25+
@apply text-xl font-bold mb-6;
26+
}
27+
28+
h4 {
29+
@apply text-lg mb-6;
30+
}
31+
}
32+
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];
43+
}
44+
45+
/* adds sufficient padding to the table items / API Component */
46+
td article {
47+
@apply pt-4 pb-4 mb-0;
48+
}
49+
50+
td p {
51+
@apply mb-0;
52+
}
3753
}

0 commit comments

Comments
 (0)