@rileybathurst/paddle 0.0.23 → 0.0.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -2
- package/src/PaddleComposition.tsx +2 -0
- package/src/PaddleLocationCard.tsx +149 -0
- package/src/PaddleSocials.tsx +44 -0
- package/src/PaddleTime.tsx +0 -2
- package/src/assets/facebook-icon.tsx +26 -0
- package/src/assets/instagram-icon.tsx +27 -0
- package/src/assets/tripadvisor-icon.tsx +17 -0
- package/src/index.tsx +3 -1
- package/src/stories/Colors.mdx +71 -0
- package/src/stories/Footer.tsx +2 -20
- package/src/stories/Location.tsx +2 -1
- package/src/stories/Socials.stories.tsx +19 -0
- package/src/stories/Socials.tsx +50 -0
- package/src/stories/{Colors.stories.tsx → Spec.stories.tsx} +4 -4
- package/src/stories/Spec.tsx +99 -0
- package/src/stories/Svg.stories.tsx +19 -0
- package/src/stories/Svg.tsx +23 -0
- package/src/stories/Typography.mdx +51 -0
- package/src/stories/Widths.tsx +5 -5
- package/src/styles/app.css +1 -1
- package/src/styles/color.css +10 -0
- package/src/styles/layout.css +48 -1
- package/src/styles/links.css +9 -2
- package/src/styles/media.css +99 -0
- package/src/styles/variables.css +1 -0
- package/src/types/location-card-types.ts +24 -0
- package/src/stories/Colors.tsx +0 -48
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rileybathurst/paddle",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.25",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"dev": "vite",
|
|
@@ -16,7 +16,8 @@
|
|
|
16
16
|
"gatsby": "^5.13.6",
|
|
17
17
|
"react": "^18.2.0",
|
|
18
18
|
"react-aria-components": "^1.2.1",
|
|
19
|
-
"react-dom": "^18.2.0"
|
|
19
|
+
"react-dom": "^18.2.0",
|
|
20
|
+
"react-markdown": "^9.0.1"
|
|
20
21
|
},
|
|
21
22
|
"devDependencies": {
|
|
22
23
|
"@chromatic-com/storybook": "^1.3.4",
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react"
|
|
2
|
+
// ! this isnt finished it wont have faker when its done
|
|
2
3
|
import { faker } from '@faker-js/faker';
|
|
3
4
|
// import { GatsbyImage } from "gatsby-plugin-image"
|
|
4
5
|
|
|
@@ -27,6 +28,7 @@ function TopThree({ className }: TopThreeTypes) {
|
|
|
27
28
|
return null;
|
|
28
29
|
} */
|
|
29
30
|
|
|
31
|
+
|
|
30
32
|
interface CompositionTypes {
|
|
31
33
|
sport?: string;
|
|
32
34
|
}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
// TODO: Season is super broken
|
|
2
|
+
|
|
3
|
+
import * as React from "react"
|
|
4
|
+
import { Link } from 'gatsby';
|
|
5
|
+
import Markdown from "react-markdown";
|
|
6
|
+
import type { LocationCardTypes } from "./types/location-card-types";
|
|
7
|
+
|
|
8
|
+
interface SeasonTypes {
|
|
9
|
+
season_start: string;
|
|
10
|
+
season_end: string;
|
|
11
|
+
opening_time: string;
|
|
12
|
+
closing_time: string;
|
|
13
|
+
name: string;
|
|
14
|
+
}
|
|
15
|
+
function Season({ season_start, season_end, opening_time, closing_time, name }: SeasonTypes) {
|
|
16
|
+
|
|
17
|
+
// TODO: these need a query but thats not the most important first step
|
|
18
|
+
if (name === "Free Parking Lot" || name === "Parking" || name === "Delivery") {
|
|
19
|
+
return null;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// console.log(opening_time);
|
|
23
|
+
|
|
24
|
+
/* if (new Date(season_start) < new Date()) {
|
|
25
|
+
return (
|
|
26
|
+
<p>
|
|
27
|
+
{opening_time ? "Open Daily: " : null}
|
|
28
|
+
<HourMin time={opening_time} />
|
|
29
|
+
{opening_time ? " - : " : null}
|
|
30
|
+
<HourMin time={closing_time} />
|
|
31
|
+
</p>
|
|
32
|
+
)
|
|
33
|
+
} */
|
|
34
|
+
|
|
35
|
+
/* return (
|
|
36
|
+
<p>
|
|
37
|
+
We're closed for the season:<br />
|
|
38
|
+
We will reopen<br />
|
|
39
|
+
{season_start} - {season_end}<br />
|
|
40
|
+
Weather Permitting
|
|
41
|
+
</p>
|
|
42
|
+
) */
|
|
43
|
+
return (
|
|
44
|
+
<p>
|
|
45
|
+
{/* {opening_time ? "Open Daily: " : null} */}
|
|
46
|
+
Open Daily 9:30am - 5:30pm<br />
|
|
47
|
+
Weather Permitting
|
|
48
|
+
{/* <HourMin time={opening_time} /> */}
|
|
49
|
+
{/* {opening_time ? " - : " : null} */}
|
|
50
|
+
{/* <HourMin time={closing_time} /> */}
|
|
51
|
+
</p>
|
|
52
|
+
)
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
interface ContentTypes {
|
|
56
|
+
svg: string;
|
|
57
|
+
name: string;
|
|
58
|
+
address: {
|
|
59
|
+
data: {
|
|
60
|
+
address: string;
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
description: {
|
|
64
|
+
data: {
|
|
65
|
+
description: string;
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
opening_time: string;
|
|
69
|
+
closing_time: string;
|
|
70
|
+
|
|
71
|
+
locale: {
|
|
72
|
+
season_start: string;
|
|
73
|
+
season_end: string;
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
function Content({ svg, name, address, description, opening_time, closing_time, locale }: ContentTypes) {
|
|
77
|
+
return (
|
|
78
|
+
<>
|
|
79
|
+
<div
|
|
80
|
+
className="svg"
|
|
81
|
+
dangerouslySetInnerHTML={{ __html: svg }}
|
|
82
|
+
/>
|
|
83
|
+
|
|
84
|
+
<div>
|
|
85
|
+
<h3 className="elbrus">{name}</h3>
|
|
86
|
+
<Markdown className="react-markdown">
|
|
87
|
+
{address.data.address}
|
|
88
|
+
</Markdown>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<div>
|
|
92
|
+
<Season
|
|
93
|
+
season_start={locale.season_start}
|
|
94
|
+
season_end={locale.season_end}
|
|
95
|
+
opening_time={opening_time}
|
|
96
|
+
closing_time={closing_time}
|
|
97
|
+
name={name}
|
|
98
|
+
/>
|
|
99
|
+
<br />
|
|
100
|
+
<Markdown className="react-markdown" >
|
|
101
|
+
{description.data.description}
|
|
102
|
+
</Markdown>
|
|
103
|
+
{/* // TODO: add phone but dont break the link on link rule {name === "On Water Rental" ? <Phone /> : null} */}
|
|
104
|
+
</div>
|
|
105
|
+
</>
|
|
106
|
+
)
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
function LocationCard({ svg, name, link, address, description, opening_time, closing_time, locale, background }: LocationCardTypes) {
|
|
110
|
+
|
|
111
|
+
if (link.includes('http')) {
|
|
112
|
+
return (
|
|
113
|
+
<a
|
|
114
|
+
href={link}
|
|
115
|
+
className={`location ${background}`}
|
|
116
|
+
title={name}
|
|
117
|
+
>
|
|
118
|
+
<Content
|
|
119
|
+
svg={svg}
|
|
120
|
+
name={name}
|
|
121
|
+
address={address}
|
|
122
|
+
description={description}
|
|
123
|
+
opening_time={opening_time}
|
|
124
|
+
closing_time={closing_time}
|
|
125
|
+
locale={locale}
|
|
126
|
+
/>
|
|
127
|
+
</a>
|
|
128
|
+
)
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
return (
|
|
132
|
+
<Link
|
|
133
|
+
to={`/${link}`}
|
|
134
|
+
className={`location ${background}`}
|
|
135
|
+
>
|
|
136
|
+
<Content
|
|
137
|
+
svg={svg}
|
|
138
|
+
name={name}
|
|
139
|
+
address={address}
|
|
140
|
+
description={description}
|
|
141
|
+
opening_time={opening_time}
|
|
142
|
+
closing_time={closing_time}
|
|
143
|
+
locale={locale}
|
|
144
|
+
/>
|
|
145
|
+
</Link>
|
|
146
|
+
)
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
export default LocationCard
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import * as React from "react"
|
|
2
|
+
|
|
3
|
+
import FacebookIcon from "./assets/facebook-icon"
|
|
4
|
+
import InstagramIcon from "./assets/instagram-icon"
|
|
5
|
+
import TripAdvisorIcon from "./assets/tripadvisor-icon"
|
|
6
|
+
|
|
7
|
+
interface SocialsTypes {
|
|
8
|
+
instagram: string
|
|
9
|
+
facebook: string
|
|
10
|
+
tripadvisor: string
|
|
11
|
+
}
|
|
12
|
+
export const PaddleSocials = ({ instagram, facebook, tripadvisor }: SocialsTypes) =>
|
|
13
|
+
<div className="social">
|
|
14
|
+
{facebook ?
|
|
15
|
+
<a
|
|
16
|
+
href={facebook}
|
|
17
|
+
target='_blank' rel='noopener noreferrer'
|
|
18
|
+
aria-label='facebook link'
|
|
19
|
+
>
|
|
20
|
+
<FacebookIcon />
|
|
21
|
+
</a>
|
|
22
|
+
: null
|
|
23
|
+
}
|
|
24
|
+
{instagram ?
|
|
25
|
+
<a href={instagram}
|
|
26
|
+
target='_blank'
|
|
27
|
+
rel='noopener noreferrer'
|
|
28
|
+
aria-label='instagram link'
|
|
29
|
+
>
|
|
30
|
+
<InstagramIcon />
|
|
31
|
+
</a>
|
|
32
|
+
: null
|
|
33
|
+
}
|
|
34
|
+
{tripadvisor ?
|
|
35
|
+
<a href={tripadvisor}
|
|
36
|
+
target='_blank'
|
|
37
|
+
rel='noopener noreferrer'
|
|
38
|
+
aria-label='tripadvisor link'
|
|
39
|
+
>
|
|
40
|
+
<TripAdvisorIcon />
|
|
41
|
+
</a>
|
|
42
|
+
: null
|
|
43
|
+
}
|
|
44
|
+
</div>
|
package/src/PaddleTime.tsx
CHANGED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
|
|
3
|
+
const FacebookIcon = () => {
|
|
4
|
+
return (
|
|
5
|
+
<svg
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
viewBox="0 0 1024 1024"
|
|
8
|
+
className="facebook"
|
|
9
|
+
>
|
|
10
|
+
<title>facebook page</title>
|
|
11
|
+
<g>
|
|
12
|
+
<path
|
|
13
|
+
className="circle"
|
|
14
|
+
d="M1024,512C1024,229.2,794.8,0,512,0S0,229.2,0,512c0,255.6,187.2,467.4,432,505.8V660H302V512h130V399.2
|
|
15
|
+
C432,270.9,508.4,200,625.4,200c56,0,114.6,10,114.6,10v126h-64.6c-63.6,0-83.4,39.5-83.4,80v96h142l-22.7,148H592v357.8
|
|
16
|
+
C836.8,979.4,1024,767.6,1024,512z"/>
|
|
17
|
+
<path
|
|
18
|
+
className="f"
|
|
19
|
+
d="M711.3,660L734,512H592v-96c0-40.5,19.8-80,83.4-80H740V210c0,0-58.6-10-114.6-10
|
|
20
|
+
c-117,0-193.4,70.9-193.4,199.2V512H302v148h130v357.8c26.1,4.1,52.8,6.2,80,6.2s53.9-2.1,80-6.2V660H711.3z"/>
|
|
21
|
+
</g>
|
|
22
|
+
</svg>
|
|
23
|
+
);
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export default FacebookIcon;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
|
|
3
|
+
// I got this from the instagram website rather than the brand book as that one was a mess
|
|
4
|
+
const InstagramIcon = () => {
|
|
5
|
+
return (
|
|
6
|
+
<svg
|
|
7
|
+
viewBox="0 0 80 81"
|
|
8
|
+
fill="url(#jsc_s_2)"
|
|
9
|
+
className="instagram"
|
|
10
|
+
>
|
|
11
|
+
<title>instagram logo</title>
|
|
12
|
+
<defs>
|
|
13
|
+
<linearGradient x1="69.27%" x2="128.20%" y1="129.46%" y2="29.46%" id="jsc_s_2">
|
|
14
|
+
<stop offset="0" stopColor="#FDD074" />
|
|
15
|
+
<stop offset="25%" stopColor="#F77F34" />
|
|
16
|
+
<stop offset="50%" stopColor="#DD326E" />
|
|
17
|
+
<stop offset="75%" stopColor="#D82B7E" />
|
|
18
|
+
<stop offset="100%" stopColor="#A432B1" />
|
|
19
|
+
</linearGradient>
|
|
20
|
+
</defs>
|
|
21
|
+
<path d="m43.655 0 5.21.025 3.4.055 2.74.095L56.49.24c4.26.195 7.165.87 9.71 1.86 2.63 1.025 4.86 2.39 7.085 4.615 2.225 2.225 3.595 4.46 4.615 7.09.88 2.26 1.51 4.81 1.775 8.34l.19 3.775.09 3.59.045 6.855-.03 12.835-.075 4.015-.135 3.3c-.195 4.26-.87 7.17-1.86 9.715-1.02 2.63-2.39 4.865-4.615 7.09-2.225 2.225-4.455 3.59-7.085 4.615-2.26.88-4.81 1.51-8.335 1.775l-4.3.205-3.78.085-6.13.035-12.835-.03-4.01-.075-3.3-.135c-4.26-.195-7.165-.87-9.71-1.86-2.63-1.025-4.865-2.39-7.085-4.615C4.49 71.095 3.12 68.86 2.1 66.23 1.22 63.97.59 61.42.325 57.89l-.15-2.86-.095-2.745-.055-3.395L0 42.545l.025-11.4.055-3.395.095-2.745.065-1.485c.195-4.26.87-7.17 1.86-9.715 1.02-2.63 2.39-4.865 4.615-7.09C8.935 4.49 11.17 3.125 13.8 2.1c2.26-.88 4.81-1.51 8.34-1.775l2.855-.15 2.74-.095 3.4-.055L36.345 0h7.31zm5.09 7.235h-17.49l-3.03.045-4.39.165a32.326 32.326 0 0 0-3.294.307l-.599.097a20.85 20.85 0 0 0-1.316.273l-.46.117c-.148.04-.29.08-.426.121l-.93.31-.4.15c-1.87.73-3.2 1.595-4.6 2.995-1.4 1.4-2.265 2.735-2.99 4.6l-.31.845-.136.432c-.362 1.201-.705 2.817-.874 5.133l-.09 1.7-.13 3.57-.065 6.18.015 14.255.08 4.41.13 3.25a31.47 31.47 0 0 0 .344 3.534l.098.57c.017.092.034.182.052.27l.108.511.113.474c.019.076.038.151.058.224l.117.424.12.393.06.185.31.845c.725 1.865 1.59 3.2 2.99 4.6 1.4 1.4 2.73 2.27 4.6 2.995l.845.305.378.121.2.06.423.118c.073.02.148.04.224.058l.473.113.51.108.55.102c1.044.18 2.296.32 3.822.39l4.875.175 6.515.055 14.115-.025 3.58-.07 3.245-.135c1.526-.07 2.778-.21 3.822-.39l.55-.102.51-.108.473-.113.224-.058.423-.118.393-.12.185-.061.845-.305c1.87-.725 3.2-1.595 4.6-2.995 1.4-1.4 2.265-2.735 2.995-4.6l.305-.845c.41-1.24.82-2.96 1.01-5.565l.19-4.245.08-4.285.02-6.18-.02-11.145-.08-4.285-.13-3.225a33.046 33.046 0 0 0-.262-2.977l-.093-.622c-.049-.3-.1-.582-.155-.85l-.112-.516a18.598 18.598 0 0 0-.116-.479l-.12-.442-.062-.209-.38-1.135-.075-.2c-.73-1.865-1.595-3.2-2.995-4.6-1.4-1.4-2.73-2.265-4.6-2.995l-.4-.15-.93-.31-.229-.066-.488-.13c-1.102-.279-2.505-.525-4.358-.659L54.21 7.36l-2.435-.08-3.03-.045z" />
|
|
22
|
+
<path d="M40 19.47c11.345 0 20.54 9.2 20.54 20.545 0 11.35-9.195 20.55-20.54 20.55-11.345 0-20.54-9.2-20.54-20.55C19.46 28.67 28.655 19.47 40 19.47zm0 7.21c-7.365 0-13.335 5.97-13.335 13.335 0 7.37 5.97 13.34 13.335 13.34 7.365 0 13.335-5.97 13.335-13.34 0-7.365-5.97-13.335-13.335-13.335zM66.15 18.65a4.801 4.801 0 1 1-9.598-.002 4.801 4.801 0 0 1 9.598.002z" />
|
|
23
|
+
</svg>
|
|
24
|
+
);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export default InstagramIcon;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
|
|
3
|
+
const TripadvisorIcon = () => {
|
|
4
|
+
return (
|
|
5
|
+
<svg
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
viewBox="0 0 696.6 696.6"
|
|
8
|
+
className="tripadvisor"
|
|
9
|
+
>
|
|
10
|
+
<title>tripadvisor logo</title>
|
|
11
|
+
<circle cx="348.3" cy="348.3" r="348.3" />
|
|
12
|
+
<path d="M563.4,280.3l42-45.8h-93.2c-98.8-67.3-228.8-67.3-327.6,0h-93.4l42,45.8c-52.2,48-55.7,129.3-7.6,181.6,48,52.2,129.3,55.7,181.6,7.6l41.2,44.8,41.2-44.8c52.1,48.2,133.4,44.9,181.6-7.2,48.2-52.1,44.9-133.4-7.2-181.6-.2-.1-.3-.3-.5-.4ZM219.8,462.2c-48,0-87-39-87-87s39-87,87-87,87,39,87,87h0c0,48-39,87-87,87ZM348.3,372.8c0-57.2-41.6-106.3-96.5-127.3,61.8-25.7,131.2-25.7,193,0-54.8,21-96.5,70.1-96.5,127.3h0ZM476.8,462.2c-48,0-87-39-87-87s39-87,87-87,87,39,87,87h0c0,48-39,87-87,87ZM476.8,329.7c-25.2,0-45.6,20.4-45.6,45.6s20.4,45.6,45.6,45.6,45.6-20.4,45.6-45.6h0c0-25.2-20.4-45.6-45.6-45.6h0ZM265.4,375.2c0,25.2-20.4,45.6-45.5,45.6-25.2,0-45.6-20.4-45.6-45.5,0-25.2,20.4-45.6,45.5-45.6s45.6,20.4,45.6,45.5h0Z" />
|
|
13
|
+
</svg>
|
|
14
|
+
);
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export default TripadvisorIcon;
|
package/src/index.tsx
CHANGED
|
@@ -9,6 +9,8 @@ export * from "./PaddleTime";
|
|
|
9
9
|
|
|
10
10
|
// Molecules
|
|
11
11
|
export * from "./PaddleComposition";
|
|
12
|
+
export * from "./PaddleSocials";
|
|
12
13
|
|
|
13
14
|
// Organisms
|
|
14
|
-
export * from "./PaddleTestimonials";
|
|
15
|
+
export * from "./PaddleTestimonials";
|
|
16
|
+
export * from "./PaddleLocationCard";
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
|
|
2
|
+
|
|
3
|
+
<Meta title="Colors" />
|
|
4
|
+
|
|
5
|
+
<ColorPalette>
|
|
6
|
+
<ColorItem
|
|
7
|
+
title="Mullen"
|
|
8
|
+
subtitle="base 100 - Tahoe City"
|
|
9
|
+
colors={{
|
|
10
|
+
mullen100: "hsl(0, 50%, 50%)",
|
|
11
|
+
mullen200: "hsl(0, 50%, 37.5%)",
|
|
12
|
+
mullen300: "hsl(0, 50%, 25%)",
|
|
13
|
+
}}
|
|
14
|
+
/>
|
|
15
|
+
<ColorItem
|
|
16
|
+
title="Sand"
|
|
17
|
+
subtitle="base 100 - Tahoe City"
|
|
18
|
+
colors={{
|
|
19
|
+
sand100: "hsl(25, 37%, 95%)",
|
|
20
|
+
sand150: "hsl(25, 37%, 92.5%)",
|
|
21
|
+
sand200: "hsl(25, 37%, 87.5%)",
|
|
22
|
+
sand300: "hsl(25, 37%, 75%)",
|
|
23
|
+
}}
|
|
24
|
+
/>
|
|
25
|
+
|
|
26
|
+
<ColorItem
|
|
27
|
+
title="Ink"
|
|
28
|
+
subtitle="base 100 - Tahoe City"
|
|
29
|
+
colors={{
|
|
30
|
+
ink100: "hsl(210, 50%, 12.5%)",
|
|
31
|
+
ink200: "hsl(210, 50%, 7.5%)",
|
|
32
|
+
ink300: "hsl(210, 50%, 5%)",
|
|
33
|
+
}}
|
|
34
|
+
/>
|
|
35
|
+
<ColorItem
|
|
36
|
+
title="Navy"
|
|
37
|
+
subtitle="base 400 - South Lake"
|
|
38
|
+
colors={{
|
|
39
|
+
navy200: "oklch(75% 0.12 230)",
|
|
40
|
+
navy300: "oklch(62.5% 0.14 230)",
|
|
41
|
+
navy400: "oklch(50% 0.14 230)",
|
|
42
|
+
navy500: "oklch(37.5% 0.14 230)",
|
|
43
|
+
navy600: "oklch(25% 0.12 230)"
|
|
44
|
+
}}
|
|
45
|
+
/>
|
|
46
|
+
<ColorItem
|
|
47
|
+
title="Sunshine"
|
|
48
|
+
subtitle="base 500 - South Lake"
|
|
49
|
+
colors={{
|
|
50
|
+
navy100: "oklch(97.5% 0.025 95)",
|
|
51
|
+
navy200: "oklch(95% 0.05 95)",
|
|
52
|
+
navy300: "oklch(92.5% 0.1 95)",
|
|
53
|
+
navy400: "oklch(90% 0.15 95)",
|
|
54
|
+
navy500: "oklch(87.5% 0.2 95)"
|
|
55
|
+
}}
|
|
56
|
+
/>
|
|
57
|
+
<ColorItem
|
|
58
|
+
title="Neutrals"
|
|
59
|
+
colors={{
|
|
60
|
+
blackmetal: "hsl(210, 25%, 2.5%)",
|
|
61
|
+
blackout: "hsl(210, 25%, 12.5%)",
|
|
62
|
+
raven: "hsl(210, 25%, 25%)",
|
|
63
|
+
industrial: "hsl(210, 7.5%, 37.5%)",
|
|
64
|
+
grey: "hsl(210, 7.5%, 50%)",
|
|
65
|
+
cold: "hsl(210, 7.5%, 62.5%)",
|
|
66
|
+
tin: "hsl(210, 12.5%, 75%)",
|
|
67
|
+
cloud: "hsl(210, 18.75%, 87.5%)",
|
|
68
|
+
brilliance: "hsl(210, 25%, 97.5%)",
|
|
69
|
+
}}
|
|
70
|
+
/>
|
|
71
|
+
</ColorPalette>
|
package/src/stories/Footer.tsx
CHANGED
|
@@ -5,6 +5,7 @@ import { faker } from '@faker-js/faker';
|
|
|
5
5
|
|
|
6
6
|
import { Pricing } from './Pricing';
|
|
7
7
|
import { LocationDeck } from './LocationDeck';
|
|
8
|
+
import { Socials } from './Socials';
|
|
8
9
|
|
|
9
10
|
function Deal() {
|
|
10
11
|
|
|
@@ -68,26 +69,7 @@ export const Footer = ({
|
|
|
68
69
|
>
|
|
69
70
|
{faker.internet.email()}
|
|
70
71
|
</a>
|
|
71
|
-
<
|
|
72
|
-
{/* {useSiteMetadata().social?.facebook ?? */}
|
|
73
|
-
<a
|
|
74
|
-
href={faker.location.city()}
|
|
75
|
-
target='_blank' rel='noopener noreferrer'
|
|
76
|
-
aria-label={`${faker.location.city()} facebook`}
|
|
77
|
-
>
|
|
78
|
-
{/* <FacebookIcon /> */}
|
|
79
|
-
</a>
|
|
80
|
-
{/* } */}
|
|
81
|
-
{/* {useSiteMetadata().social?.instagram ?? */}
|
|
82
|
-
<a href={faker.location.city()}
|
|
83
|
-
target='_blank'
|
|
84
|
-
rel='noopener noreferrer'
|
|
85
|
-
aria-label={`${faker.location.city()} instagram`}
|
|
86
|
-
>
|
|
87
|
-
{/* <InstagramIcon /> */}
|
|
88
|
-
</a>
|
|
89
|
-
{/* } */}
|
|
90
|
-
</div>
|
|
72
|
+
<Socials />
|
|
91
73
|
</div>
|
|
92
74
|
<hr />
|
|
93
75
|
<div className="footer__locations">
|
package/src/stories/Location.tsx
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
// this is the Name.tsx file
|
|
2
|
+
// TODO: these are way to similar for the reality of the design
|
|
2
3
|
import React from 'react';
|
|
3
4
|
import { faker } from '@faker-js/faker';
|
|
4
5
|
|
|
@@ -28,7 +29,7 @@ export const Location = ({
|
|
|
28
29
|
<path d="M4 46v-3h2q1.55 0 3.075-.525Q10.6 41.95 12 40.55q1.4 1.4 2.925 1.925Q16.45 43 18 43q1.5 0 3.075-.55 1.575-.55 2.925-1.9 1.45 1.4 2.95 1.925Q28.45 43 30 43q1.5 0 3.075-.55 1.575-.55 2.925-1.9 1.35 1.35 2.925 1.9Q40.5 43 42 43h2v3h-2q-1.45 0-2.975-.425Q37.5 45.15 36 44q-1.5 1.15-3.025 1.575Q31.45 46 30 46q-1.45 0-2.975-.425Q25.5 45.15 24 44q-1.5 1.15-3.025 1.575Q19.45 46 18 46q-1.45 0-2.975-.425Q13.5 45.15 12 44q-1.5 1.15-3.025 1.575Q7.45 46 6 46Zm20-27.7q-1.5 0-2.575-1.075-1.075-1.075-1.075-2.575 0-1.5 1.075-2.575Q22.5 11 24 11q1.5 0 2.575 1.075 1.075 1.075 1.075 2.575 0 1.5-1.075 2.575Q25.5 18.3 24 18.3Zm-6 19.9q-1.65 0-3.25-.9T12 34.95q-.65.7-1.55 1.375T8.7 37.55q-1.95-.4-4.225-1.075Q2.2 35.8 0 35q2.65-1.05 6.875-2.1t7.775-1.65l2.8-8.95q.4-1.4 1.7-1.95 1.3-.55 2.55.1l5.3 2.8 6.05-3.2 3.5-8.1-1-2.65 2.4-5.25L43.4 6.5l-2.35 5.25-2.65 1-7.8 18.15q4.55.55 9.55 1.75 5 1.2 7.85 2.35-2.2.8-4.475 1.475-2.275.675-4.225 1.075-.85-.55-1.75-1.225T36 34.95q-1.15 1.45-2.75 2.35-1.6.9-3.25.9t-3.25-.9q-1.6-.9-2.75-2.35-1.15 1.45-2.75 2.35-1.6.9-3.25.9Zm10.45-7.55 2.6-6.2-4.05 2.1-3.8-1.9-1.8 5.85H24q1.15 0 2.225.025 1.075.025 2.225.125Z" />
|
|
29
30
|
</svg>
|
|
30
31
|
<div>
|
|
31
|
-
<h3 className="
|
|
32
|
+
<h3 className="elbrus">{faker.helpers.arrayElement(['On Water Rental', 'Retail Location', 'Parking', 'Free Parking Lot', 'Delivery'])}</h3>
|
|
32
33
|
<p>
|
|
33
34
|
{faker.location.secondaryAddress()}
|
|
34
35
|
<br />
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// this is the Name.stories.tsx file
|
|
2
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
|
+
import { fn } from '@storybook/test';
|
|
4
|
+
import { Socials } from './Socials';
|
|
5
|
+
|
|
6
|
+
const meta = {
|
|
7
|
+
component: Socials,
|
|
8
|
+
title: 'Molecules/Socials',
|
|
9
|
+
args: { onClick: fn() },
|
|
10
|
+
} satisfies Meta<typeof Socials>;
|
|
11
|
+
|
|
12
|
+
export default meta;
|
|
13
|
+
type Story = StoryObj<typeof meta>;
|
|
14
|
+
|
|
15
|
+
export const Primary: Story = {
|
|
16
|
+
args: {
|
|
17
|
+
primary: true,
|
|
18
|
+
},
|
|
19
|
+
};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
// this is the Name.tsx file
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { faker } from '@faker-js/faker';
|
|
4
|
+
import FacebookIcon from '../assets/facebook-icon';
|
|
5
|
+
import InstagramIcon from '../assets/instagram-icon';
|
|
6
|
+
import TripadvisorIcon from '../assets/tripadvisor-icon';
|
|
7
|
+
|
|
8
|
+
interface SocialsProps {
|
|
9
|
+
primary?: boolean;
|
|
10
|
+
onClick?: () => void;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export const Socials = ({
|
|
14
|
+
primary = false,
|
|
15
|
+
...props
|
|
16
|
+
}: SocialsProps) => {
|
|
17
|
+
|
|
18
|
+
return (
|
|
19
|
+
<main className="social">
|
|
20
|
+
{/* // TODO: boolean check on socials */}
|
|
21
|
+
{/* {useSiteMetadata().social?.facebook ?? */}
|
|
22
|
+
<a
|
|
23
|
+
href={faker.location.city()}
|
|
24
|
+
target='_blank' rel='noopener noreferrer'
|
|
25
|
+
aria-label={`${faker.location.city()} facebook`}
|
|
26
|
+
>
|
|
27
|
+
<FacebookIcon />
|
|
28
|
+
</a>
|
|
29
|
+
{/* } */}
|
|
30
|
+
{/* {useSiteMetadata().social?.instagram ?? */}
|
|
31
|
+
<a href={faker.location.city()}
|
|
32
|
+
target='_blank'
|
|
33
|
+
rel='noopener noreferrer'
|
|
34
|
+
aria-label={`${faker.location.city()} instagram`}
|
|
35
|
+
>
|
|
36
|
+
<InstagramIcon />
|
|
37
|
+
</a>
|
|
38
|
+
{/* } */}
|
|
39
|
+
{/* {useSiteMetadata().social?.instagram ?? */}
|
|
40
|
+
<a href={faker.location.city()}
|
|
41
|
+
target='_blank'
|
|
42
|
+
rel='noopener noreferrer'
|
|
43
|
+
aria-label={`${faker.location.city()} tripadvisor`}
|
|
44
|
+
>
|
|
45
|
+
<TripadvisorIcon />
|
|
46
|
+
</a>
|
|
47
|
+
{/* } */}
|
|
48
|
+
</main>
|
|
49
|
+
);
|
|
50
|
+
};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
// this is the Name.stories.tsx file
|
|
2
2
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
3
|
import { fn } from '@storybook/test';
|
|
4
|
-
import {
|
|
4
|
+
import { Spec } from './Spec';
|
|
5
5
|
|
|
6
6
|
const meta = {
|
|
7
|
-
component:
|
|
8
|
-
title: '
|
|
7
|
+
component: Spec,
|
|
8
|
+
title: 'Molecules/Spec',
|
|
9
9
|
args: { onClick: fn() },
|
|
10
|
-
} satisfies Meta<typeof
|
|
10
|
+
} satisfies Meta<typeof Spec>;
|
|
11
11
|
|
|
12
12
|
export default meta;
|
|
13
13
|
type Story = StoryObj<typeof meta>;
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
// this is the Name.tsx file
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { faker } from '@faker-js/faker';
|
|
4
|
+
|
|
5
|
+
interface Spec3Types {
|
|
6
|
+
crew: string;
|
|
7
|
+
capacity: {
|
|
8
|
+
data: number;
|
|
9
|
+
unit: string;
|
|
10
|
+
};
|
|
11
|
+
test: {
|
|
12
|
+
data: string;
|
|
13
|
+
unit: string;
|
|
14
|
+
};
|
|
15
|
+
length: {
|
|
16
|
+
data: number;
|
|
17
|
+
unit: string;
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
function Spec3({ crew, capacity, test, length }: Spec3Types) {
|
|
21
|
+
|
|
22
|
+
console.log(crew);
|
|
23
|
+
console.log(capacity);
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
Object.entries({ crew, capacity, test, length }).map(([key, value]) => {
|
|
27
|
+
|
|
28
|
+
// console.log(value);
|
|
29
|
+
// this is maybe where you can use generics to get around this check
|
|
30
|
+
|
|
31
|
+
// or if the next capacity data is a string
|
|
32
|
+
// so you create a string here from the object
|
|
33
|
+
|
|
34
|
+
if (typeof value !== 'string' && key && value) {
|
|
35
|
+
|
|
36
|
+
// console.log('🦖');
|
|
37
|
+
|
|
38
|
+
// * works but cant be type safe
|
|
39
|
+
// ? i guess you could wrap it in a typeof check
|
|
40
|
+
// so this is getting kinda ugly
|
|
41
|
+
if (key === 'length' && typeof value.data === 'number') {
|
|
42
|
+
return (
|
|
43
|
+
<section key={key}>
|
|
44
|
+
<h3>{key} - <Remainder inches={value.data} /></h3>
|
|
45
|
+
</section>
|
|
46
|
+
)
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
const combinedDataUnit = `${value.data} ${value.unit}`;
|
|
50
|
+
return (
|
|
51
|
+
<section key={key}>
|
|
52
|
+
<h3>{key} - {combinedDataUnit}</h3>
|
|
53
|
+
</section>
|
|
54
|
+
)
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
if (key && value) {
|
|
58
|
+
|
|
59
|
+
// console.log('🦄');
|
|
60
|
+
|
|
61
|
+
return (
|
|
62
|
+
<section key={key}>
|
|
63
|
+
<h3>{key} - {value}</h3>
|
|
64
|
+
</section>
|
|
65
|
+
)
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
return (
|
|
69
|
+
<section key={key}>
|
|
70
|
+
<h3>{key}</h3>
|
|
71
|
+
</section>
|
|
72
|
+
);
|
|
73
|
+
})
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
interface SpecProps {
|
|
80
|
+
primary?: boolean;
|
|
81
|
+
onClick?: () => void;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
export const Spec = ({
|
|
85
|
+
primary = false,
|
|
86
|
+
...props
|
|
87
|
+
}: SpecProps) => {
|
|
88
|
+
|
|
89
|
+
return (
|
|
90
|
+
<main
|
|
91
|
+
{...props}
|
|
92
|
+
>
|
|
93
|
+
<Spec3
|
|
94
|
+
crew={faker.helpers.arrayElement(['single', 'double'])}
|
|
95
|
+
capacity={{ data: faker.number.int(100), unit: "lbs" }}
|
|
96
|
+
/>
|
|
97
|
+
</main>
|
|
98
|
+
);
|
|
99
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
// this is the Name.stories.tsx file
|
|
2
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
|
+
import { fn } from '@storybook/test';
|
|
4
|
+
import { Svg } from './Svg';
|
|
5
|
+
|
|
6
|
+
const meta = {
|
|
7
|
+
component: Svg,
|
|
8
|
+
title: 'Atoms/Svg',
|
|
9
|
+
args: { onClick: fn() },
|
|
10
|
+
} satisfies Meta<typeof Svg>;
|
|
11
|
+
|
|
12
|
+
export default meta;
|
|
13
|
+
type Story = StoryObj<typeof meta>;
|
|
14
|
+
|
|
15
|
+
export const Primary: Story = {
|
|
16
|
+
args: {
|
|
17
|
+
primary: true,
|
|
18
|
+
},
|
|
19
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
// this is the Name.tsx file
|
|
2
|
+
import React from 'react';
|
|
3
|
+
|
|
4
|
+
import FacebookIcon from '../assets/facebook-icon';
|
|
5
|
+
|
|
6
|
+
interface SvgProps {
|
|
7
|
+
primary?: boolean;
|
|
8
|
+
onClick?: () => void;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export const Svg = ({
|
|
12
|
+
primary = false,
|
|
13
|
+
...props
|
|
14
|
+
}: SvgProps) => {
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<main
|
|
18
|
+
{...props}
|
|
19
|
+
>
|
|
20
|
+
<FacebookIcon />
|
|
21
|
+
</main>
|
|
22
|
+
);
|
|
23
|
+
};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
// Setting in px is dumb and not getting the name
|
|
2
|
+
|
|
3
|
+
import { Meta, Typeset } from "@storybook/blocks";
|
|
4
|
+
|
|
5
|
+
<Meta title="Typography" />
|
|
6
|
+
|
|
7
|
+
export const typography = {
|
|
8
|
+
type: {
|
|
9
|
+
primary: '"Barlow", Arial, sans-serif',
|
|
10
|
+
},
|
|
11
|
+
weight: {
|
|
12
|
+
regular: "400",
|
|
13
|
+
bold: "700",
|
|
14
|
+
extrabold: "800",
|
|
15
|
+
black: "900",
|
|
16
|
+
},
|
|
17
|
+
// Font sizes in pixels
|
|
18
|
+
size: {
|
|
19
|
+
everest: 3 * 16,
|
|
20
|
+
aconcagua: 2.5 * 16,
|
|
21
|
+
denali: 2 * 16,
|
|
22
|
+
kilimanjaro: 1.5 * 16,
|
|
23
|
+
elbrus: 1.25 * 16,
|
|
24
|
+
vinson: 16,
|
|
25
|
+
kosciuszko: 0.75 * 16,
|
|
26
|
+
},
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export const SampleText =
|
|
30
|
+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
|
|
31
|
+
|
|
32
|
+
# Typography
|
|
33
|
+
|
|
34
|
+
**Font:** Nunito Sans
|
|
35
|
+
|
|
36
|
+
**Weights:** 400(regular), 700(bold), 800(extrabold), 900(black)
|
|
37
|
+
|
|
38
|
+
<Typeset
|
|
39
|
+
fontSizes={[
|
|
40
|
+
Number(typography.size.kosciuszko),
|
|
41
|
+
Number(typography.size.vinson),
|
|
42
|
+
Number(typography.size.elbrus),
|
|
43
|
+
Number(typography.size.kilimanjaro),
|
|
44
|
+
Number(typography.size.denali),
|
|
45
|
+
Number(typography.size.aconcagua),
|
|
46
|
+
Number(typography.size.everest),
|
|
47
|
+
]}
|
|
48
|
+
fontWeight={typography.weight.black}
|
|
49
|
+
sampleText={SampleText}
|
|
50
|
+
fontFamily={typography.type.primary}
|
|
51
|
+
/>
|
package/src/stories/Widths.tsx
CHANGED
|
@@ -35,12 +35,12 @@ export const Widths = ({
|
|
|
35
35
|
return (
|
|
36
36
|
<>
|
|
37
37
|
<h1>Widths</h1>
|
|
38
|
-
<WidthCard widths={['
|
|
38
|
+
<WidthCard widths={['vulture', 'stork', 'condor', 'pelican', 'albatross']} />
|
|
39
39
|
<hr />
|
|
40
40
|
<h2>split</h2>
|
|
41
|
-
<p>pelican
|
|
41
|
+
<p>pelican wrap</p>
|
|
42
42
|
<div
|
|
43
|
-
className='pelican
|
|
43
|
+
className='pelican wrap'
|
|
44
44
|
style={{
|
|
45
45
|
height: '100px',
|
|
46
46
|
marginBlockEnd: '1rem',
|
|
@@ -52,14 +52,14 @@ export const Widths = ({
|
|
|
52
52
|
backgroundColor: 'var(--mullen-300)',
|
|
53
53
|
}}
|
|
54
54
|
>
|
|
55
|
-
|
|
55
|
+
wrap
|
|
56
56
|
</div>
|
|
57
57
|
<div
|
|
58
58
|
style={{
|
|
59
59
|
backgroundColor: 'var(--mullen-300)',
|
|
60
60
|
}}
|
|
61
61
|
>
|
|
62
|
-
|
|
62
|
+
wrap
|
|
63
63
|
</div>
|
|
64
64
|
</div>
|
|
65
65
|
</>
|
package/src/styles/app.css
CHANGED
package/src/styles/color.css
CHANGED
|
@@ -2,6 +2,16 @@
|
|
|
2
2
|
/* #COLOR */
|
|
3
3
|
/*------------------------------------*/
|
|
4
4
|
|
|
5
|
+
body {
|
|
6
|
+
background-color: whitesmoke;
|
|
7
|
+
color: var(--black-metal);
|
|
8
|
+
|
|
9
|
+
@media (prefers-color-scheme: dark) {
|
|
10
|
+
background-color: var(--black-metal);
|
|
11
|
+
color: var(--kingly-cloud);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
5
15
|
/*------------------------------------*/
|
|
6
16
|
/* #TOP-BAR */
|
|
7
17
|
/*------------------------------------*/
|
package/src/styles/layout.css
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
/* #LAYOUT */
|
|
3
3
|
/*------------------*/
|
|
4
4
|
|
|
5
|
+
body {
|
|
6
|
+
margin: 0; /* reset */
|
|
7
|
+
}
|
|
8
|
+
|
|
5
9
|
.vulture {
|
|
6
10
|
max-width: var(--vulture);
|
|
7
11
|
flex-basis: var(--vulture);
|
|
@@ -18,7 +22,8 @@
|
|
|
18
22
|
width: calc(100% - var(--kosciuszko) * 2);
|
|
19
23
|
}
|
|
20
24
|
|
|
21
|
-
.condor
|
|
25
|
+
.condor,
|
|
26
|
+
.location {
|
|
22
27
|
max-width: var(--condor);
|
|
23
28
|
flex-basis: var(--condor);
|
|
24
29
|
margin-inline: auto;
|
|
@@ -51,6 +56,7 @@
|
|
|
51
56
|
> * {
|
|
52
57
|
flex: 1 1;
|
|
53
58
|
width: 100%;
|
|
59
|
+
height: fit-content;
|
|
54
60
|
}
|
|
55
61
|
}
|
|
56
62
|
|
|
@@ -97,3 +103,44 @@ footer {
|
|
|
97
103
|
margin-block-end: 0.25rem;
|
|
98
104
|
}
|
|
99
105
|
}
|
|
106
|
+
|
|
107
|
+
/*------------------------------------*/
|
|
108
|
+
/* #SOCIAL */
|
|
109
|
+
/*------------------------------------*/
|
|
110
|
+
|
|
111
|
+
.social {
|
|
112
|
+
display: flex;
|
|
113
|
+
gap: var(--kilimanjaro);
|
|
114
|
+
margin-block-end: clamp(var(--kilimanjaro), 1.667vw, var(--aconcagua));
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/*------------------*/
|
|
118
|
+
/* #LOCATION */
|
|
119
|
+
/*------------------*/
|
|
120
|
+
|
|
121
|
+
.location-deck {
|
|
122
|
+
margin-block-end: var(--kilimanjaro);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.location {
|
|
126
|
+
display: flex;
|
|
127
|
+
flex-flow: row;
|
|
128
|
+
align-items: center;
|
|
129
|
+
gap: var(--elbrus);
|
|
130
|
+
padding: var(--elbrus);
|
|
131
|
+
border-radius: var(--card-radius);
|
|
132
|
+
|
|
133
|
+
> * {
|
|
134
|
+
flex: 7.5 1; /* guess and check to get the parking on one row in the footer */
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
> svg,
|
|
138
|
+
.svg {
|
|
139
|
+
flex: 1 1 max-content;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.location.false:not(:last-child) {
|
|
144
|
+
border-block-end: 1px solid;
|
|
145
|
+
border-radius: 0;
|
|
146
|
+
}
|
package/src/styles/links.css
CHANGED
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
/* #LINKS */
|
|
3
3
|
/*------------------------------------*/
|
|
4
4
|
|
|
5
|
-
a:where(:hover, :focus)
|
|
6
|
-
a.hover {
|
|
5
|
+
a:where(:hover, :focus) {
|
|
7
6
|
text-decoration: none;
|
|
8
7
|
}
|
|
9
8
|
|
|
9
|
+
/*------------------------------------*/
|
|
10
|
+
|
|
10
11
|
.link__subtle {
|
|
11
12
|
text-decoration: none;
|
|
12
13
|
}
|
|
@@ -14,3 +15,9 @@ a.hover {
|
|
|
14
15
|
.link__subtle:where(:hover, :focus) {
|
|
15
16
|
text-decoration: underline;
|
|
16
17
|
}
|
|
18
|
+
|
|
19
|
+
/*------------------------------------*/
|
|
20
|
+
|
|
21
|
+
a svg {
|
|
22
|
+
transition: var(--fade);
|
|
23
|
+
}
|
package/src/styles/media.css
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
/*------------------------------------*/
|
|
2
|
+
/* #MEDIA */
|
|
3
|
+
/*------------------------------------*/
|
|
4
|
+
|
|
5
|
+
svg {
|
|
6
|
+
width: 100%;
|
|
7
|
+
height: 100%;
|
|
8
|
+
max-width: clamp(var(--kilimanjaro), 5vw, 5rem);
|
|
9
|
+
max-height: clamp(var(--kilimanjaro), 5vw, 5rem);
|
|
10
|
+
}
|
|
11
|
+
|
|
1
12
|
/*------------------*/
|
|
2
13
|
/* #LOGO */
|
|
3
14
|
/*------------------*/
|
|
@@ -38,3 +49,91 @@
|
|
|
38
49
|
max-height: 10rem;
|
|
39
50
|
}
|
|
40
51
|
}
|
|
52
|
+
|
|
53
|
+
/*------------------*/
|
|
54
|
+
/* #SOCIAL */
|
|
55
|
+
/*------------------*/
|
|
56
|
+
.social svg {
|
|
57
|
+
transition: var(--slow);
|
|
58
|
+
|
|
59
|
+
* {
|
|
60
|
+
transition: var(--slow);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/*------------------------------------*/
|
|
65
|
+
/* #FACEBOOK */
|
|
66
|
+
/*------------------------------------*/
|
|
67
|
+
/* https://about.meta.com/brand/resources/facebook/logo/ */
|
|
68
|
+
|
|
69
|
+
.facebook {
|
|
70
|
+
.f {
|
|
71
|
+
fill: transparent;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@media (prefers-color-scheme: dark) {
|
|
75
|
+
.circle {
|
|
76
|
+
fill: white;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.facebook:hover {
|
|
82
|
+
.circle {
|
|
83
|
+
fill: #1877f2;
|
|
84
|
+
}
|
|
85
|
+
.f {
|
|
86
|
+
fill: white;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/*------------------------------------*/
|
|
91
|
+
/* #INSTAGRAM */
|
|
92
|
+
/*------------------------------------*/
|
|
93
|
+
/* https://about.meta.com/brand/resources/instagram/instagram-brand/ */
|
|
94
|
+
|
|
95
|
+
.instagram {
|
|
96
|
+
filter: grayscale(100%) brightness(0%);
|
|
97
|
+
mix-blend-mode: multiply;
|
|
98
|
+
|
|
99
|
+
@media (prefers-color-scheme: dark) {
|
|
100
|
+
filter: grayscale(100%) brightness(300%);
|
|
101
|
+
mix-blend-mode: screen;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.instagram:hover {
|
|
106
|
+
filter: grayscale(0%) brightness(100%);
|
|
107
|
+
fill: revert-layer;
|
|
108
|
+
mix-blend-mode: normal;
|
|
109
|
+
|
|
110
|
+
@media (prefers-color-scheme: dark) {
|
|
111
|
+
filter: grayscale(0%) brightness(100%);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/*------------------------------------*/
|
|
116
|
+
/* #TRIPADVISOR */
|
|
117
|
+
/*------------------------------------*/
|
|
118
|
+
/* https://www.tripadvisor.com/pdfs/cprc/BrandGuidelinesForPartners.pdf */
|
|
119
|
+
/* TODO: sizing fix */
|
|
120
|
+
/* I know this is smaller without the circle but for now adding a stroke to the circle wasnt right */
|
|
121
|
+
/* looks better in dark for now */
|
|
122
|
+
|
|
123
|
+
.tripadvisor {
|
|
124
|
+
circle {
|
|
125
|
+
fill: transparent;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
@media (prefers-color-scheme: dark) {
|
|
129
|
+
circle {
|
|
130
|
+
fill: white;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.tripadvisor:hover {
|
|
136
|
+
circle {
|
|
137
|
+
fill: #34e0a1;
|
|
138
|
+
}
|
|
139
|
+
}
|
package/src/styles/variables.css
CHANGED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export interface LocationCardTypes {
|
|
2
|
+
id: React.Key;
|
|
3
|
+
svg: string;
|
|
4
|
+
name: string;
|
|
5
|
+
link: string;
|
|
6
|
+
address: {
|
|
7
|
+
data: {
|
|
8
|
+
address: string;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
description: {
|
|
12
|
+
data: {
|
|
13
|
+
description: string;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
opening_time: string;
|
|
17
|
+
closing_time: string;
|
|
18
|
+
|
|
19
|
+
locale: {
|
|
20
|
+
season_start: string;
|
|
21
|
+
season_end: string;
|
|
22
|
+
};
|
|
23
|
+
background?: string;
|
|
24
|
+
}
|
package/src/stories/Colors.tsx
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
// this is the Name.tsx file
|
|
2
|
-
import React from 'react';
|
|
3
|
-
|
|
4
|
-
function ColorCards({ color, variables }) {
|
|
5
|
-
return (
|
|
6
|
-
<div>
|
|
7
|
-
<h2>{color}</h2>
|
|
8
|
-
{variables.map((variable) => (
|
|
9
|
-
<div
|
|
10
|
-
key={variable}
|
|
11
|
-
style={{
|
|
12
|
-
backgroundColor: `var(--${color}-${variable})`,
|
|
13
|
-
padding: '1rem',
|
|
14
|
-
margin: '1rem',
|
|
15
|
-
borderRadius: '0.5rem',
|
|
16
|
-
color: 'white',
|
|
17
|
-
textAlign: 'center',
|
|
18
|
-
}}
|
|
19
|
-
>
|
|
20
|
-
{`--${color}-${variable}`}
|
|
21
|
-
</div>
|
|
22
|
-
))}
|
|
23
|
-
</div>
|
|
24
|
-
);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
interface ColorsProps {
|
|
28
|
-
primary?: boolean;
|
|
29
|
-
onClick?: () => void;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export const Colors = ({
|
|
33
|
-
primary = false,
|
|
34
|
-
...props
|
|
35
|
-
}: ColorsProps) => {
|
|
36
|
-
|
|
37
|
-
return (
|
|
38
|
-
<main
|
|
39
|
-
{...props}
|
|
40
|
-
>
|
|
41
|
-
{primary ? 'primary' : 'secondary'}
|
|
42
|
-
<ColorCards
|
|
43
|
-
color="navy"
|
|
44
|
-
variables={[100, 200]}
|
|
45
|
-
/>
|
|
46
|
-
</main>
|
|
47
|
-
);
|
|
48
|
-
};
|