Skip to content

Commit b786630

Browse files
webstackdevwebstackdev
committed
WIP Add List component
1 parent bd6db48 commit b786630

36 files changed

Lines changed: 1798 additions & 477 deletions

‎.vscode/settings.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -278,6 +278,7 @@
278278
"startdt",
279279
"statefulsets",
280280
"stddev",
281+
"Svgs",
281282
"SVID",
282283
"SVIDs",
283284
"Swatinem",

‎_TODO.md‎

Lines changed: 50 additions & 79 deletions
Large diffs are not rendered by default.

‎src/components/Carousel/index.astro‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ export type Props =
4343
items: ItemType[]
4444
})
4545
46+
const props: Props = Astro.props
47+
4648
const {
4749
title,
4850
titleHref,
@@ -53,11 +55,13 @@ const {
5355
items: itemsOverride,
5456
navigationMode = 'wrap',
5557
showReadMore = false,
56-
} = Astro.props
58+
} = props
59+
60+
const isKnownCollectionSlug = (slug: Props['type']): slug is KnownCollectionSlug => slug !== 'unknown'
5761
5862
const allItems: ItemType[] = itemsOverride
5963
? itemsOverride
60-
: type === 'unknown'
64+
: !isKnownCollectionSlug(type)
6165
? (() => {
6266
throw new Error('Carousel: type="unknown" requires `items` to be provided')
6367
})()

‎src/components/Layout/Privacy/index.astro‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
---
2+
import List from "@components/List/index.astro"
3+
import Marker from "@components/List/marker.astro"
4+
5+
const lastUpdatedDate = new Date()
6+
const lastUpdatedIso = lastUpdatedDate.toISOString()
7+
const lastUpdatedText = lastUpdatedDate.toLocaleDateString('en-US', {
8+
year: 'numeric',
9+
month: 'long',
10+
day: 'numeric',
11+
})
12+
13+
export type Props = {
14+
content: {
15+
header: {
16+
title: string
17+
description: string
18+
}
19+
nav: {
20+
title: string
21+
items: {
22+
label: string
23+
href: string
24+
}[]
25+
}
26+
collection: {
27+
title: string
28+
cards: {
29+
title: string
30+
description: string
31+
listItems: {
32+
text: string
33+
icon: string
34+
color: string
35+
}[]
36+
listMarkerSize?: number
37+
trailer?: string
38+
}[]
39+
}
40+
usage: {
41+
title: string
42+
description: string
43+
listItems: {
44+
title: string
45+
description: string
46+
icon: string
47+
color: string
48+
background: string
49+
}[]
50+
listMarkerSize?: number
51+
}
52+
sharing: {
53+
title: string
54+
subtitle: string
55+
description: string
56+
listItems: {
57+
text: string
58+
color: string
59+
}[]
60+
}
61+
}
62+
}
63+
64+
type NavItem = Props['content']['nav']['items'][number]
65+
type CollectionCard = Props['content']['collection']['cards'][number]
66+
67+
const { content }: Props = Astro.props
68+
69+
const navItems: Array<NavItem & { showSeparator: boolean }> = []
70+
71+
for (const [index, item] of content.nav.items.entries()) {
72+
navItems.push({
73+
...item,
74+
showSeparator: index < content.nav.items.length - 1,
75+
})
76+
}
77+
---
78+
79+
<header class="text-center max-w-2xl mx-auto mb-8">
80+
<div class="inline-flex items-center justify-center w-18 h-18 rounded-full bg-primary/10 mb-5">
81+
<svg class="w-12 h-12" fill="none" stroke="var(--theme-color-page-inverse)" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
82+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
83+
</svg>
84+
</div>
85+
<h1 class="text-4xl md:text-5xl font-bold text-page-inverse mb-4">{content.header.title}</h1>
86+
<p class="text-lg text-content-offset leading-relaxed mb-4">
87+
{content.header.description}
88+
</p>
89+
<p class="text-sm text-page-inverse italic">
90+
Last updated: <time datetime={lastUpdatedIso}>{lastUpdatedText}</time>
91+
</p>
92+
</header>
93+
94+
<nav aria-label="Privacy policy sections" class="bg-content-active rounded-xl p-6 mb-8">
95+
<p class="text-md font-semibold text-content-inverse mb-3">{content.nav.title}</p>
96+
<div class="flex flex-wrap items-center gap-y-2 md:gap-x-2 text-md md:ml-6">
97+
{
98+
navItems.map(({ href, label, showSeparator }) => (
99+
<>
100+
<a
101+
href={href}
102+
class="text-content-inverse hover:text-content-offset transition-colors no-underline"
103+
>
104+
{label}
105+
</a>
106+
{showSeparator && (
107+
<span class="mx-2 text-trim" aria-hidden="true">·</span>
108+
)}
109+
</>
110+
))
111+
}
112+
</div>
113+
</nav>
114+
115+
<div class="prose prose-lg max-w-none text-content">
116+
<section class="mb-12" aria-labelledby="privacy-information-we-collect-title">
117+
<h2 class="text-2xl md:text-3xl font-bold mb-6" id="privacy-information-we-collect-title">
118+
{content.collection.title}
119+
</h2>
120+
121+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
122+
{
123+
content.collection.cards.map((card: CollectionCard) => (
124+
<div class="text-content-active bg-page-offset rounded-xl px-8 pt-8 pb-4 shadow-md">
125+
<h3 class="text-2xl font-semibold mb-4 mt-0">
126+
{card.title}
127+
</h3>
128+
<p class="mb-2">
129+
{card.description}
130+
</p>
131+
<List
132+
variant="plain-icon-list"
133+
items={card.listItems}
134+
/>
135+
{card.trailer && (
136+
<p class="mt-6 mb-0 text-sm italic text-center text-content-offset">
137+
{card.trailer}
138+
</p>
139+
)}
140+
</div>
141+
))
142+
}
143+
</div>
144+
</section>
145+
146+
<section class="mb-12" aria-labelledby="privacy-how-we-use-title">
147+
<h2 class="text-2xl md:text-3xl font-bold mb-6" id="privacy-how-we-use-title">
148+
{content.usage.title}
149+
</h2>
150+
151+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
152+
{
153+
content.usage.listItems.map((item) => (
154+
<div class="text-content-active bg-primary-inverse rounded-xl px-8 pt-8 pb-4 shadow-md">
155+
<div class="flex items-center mb-4">
156+
<div
157+
class:list={["w-12 h-12 rounded-lg flex items-center justify-center mr-4", item.background]}
158+
>
159+
<Marker
160+
icon={item.icon}
161+
color={item.color}
162+
size={content.usage.listMarkerSize}
163+
/>
164+
</div>
165+
<h3 class="text-xl font-semibold mt-0 mb-0">{item.title}</h3>
166+
</div>
167+
<p class="text-content">
168+
{item.description}
169+
</p>
170+
</div>
171+
))
172+
}
173+
</div>
174+
</section>
175+
176+
<section class="mb-12" aria-labelledby="privacy-information-sharing-title">
177+
<h2
178+
class="text-2xl md:text-3xl font-bold text-content-active mb-6"
179+
id="privacy-information-sharing-title"
180+
>
181+
{content.sharing.title}
182+
</h2>
183+
<div
184+
class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-xl px-8 pt-8 pb-4"
185+
>
186+
<div class="flex items-start">
187+
<div class="shrink-0">
188+
<Marker
189+
icon="warning"
190+
color="text-yellow-600 dark:text-yellow-400"
191+
size={8}
192+
/>
193+
</div>
194+
<div class="text-content-active ml-4">
195+
<h3 class="text-xl font-semibold mb-2 mt-1.5">{content.sharing.subtitle}</h3>
196+
<p class="text-content">{content.sharing.description}</p>
197+
<List
198+
variant="colored-marker-list"
199+
items={content.sharing.listItems}
200+
/>
201+
</div>
202+
</div>
203+
</div>
204+
</section>

‎src/components/List/index.astro‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
import AccentBorderLeftList from '@components/List/layouts/AccentBorderLeftList.astro'
3+
import BadgeList from '@components/List/layouts/BadgeList.astro'
4+
import CardGridList from '@components/List/layouts/CardGridList.astro'
5+
import CheckIconsList from '@components/List/layouts/CheckIconsList.astro'
6+
import ChevronList from '@components/List/layouts/ChevronList.astro'
7+
import ColoredMarkerList from '@components/List/layouts/ColoredMarkerList.astro'
8+
import NumberedWithBackgroundList from '@components/List/layouts/NumberedWithBackgroundList.astro'
9+
import PlainIconList from '@components/List/layouts/PlainIconList.astro'
10+
import SideBySideList from '@components/List/layouts/SideBySideList.astro'
11+
import TimelineList from '@components/List/layouts/TimelineList.astro'
12+
import ZebraList from '@components/List/layouts/ZebraList.astro'
13+
14+
export type Props = {
15+
items: {
16+
lead?: string
17+
text: string
18+
icon?: string
19+
color: string
20+
}[]
21+
classes?: {
22+
ol?: string
23+
ul?: string
24+
li?: string
25+
em?: string
26+
}
27+
size?: number
28+
variant: string
29+
}
30+
31+
const { items, size, variant = 'default', classes } = Astro.props
32+
---
33+
34+
{variant === 'accent-border-left-list' && <AccentBorderLeftList items={items} classes={classes} />}
35+
{variant === 'badge-list' && <BadgeList items={items} classes={classes} size={size} />}
36+
{variant === 'card-grid-list' && <CardGridList items={items} classes={classes} size={size} />}
37+
{variant === 'check-icons-list' && <CheckIconsList items={items} classes={classes} size={size} />}
38+
{variant === 'chevron-list' && <ChevronList items={items} classes={classes} size={size} />}
39+
{variant === 'colored-marker-list' && <ColoredMarkerList items={items} classes={classes} size={size} />}
40+
{variant === 'numbered-with-background-list' && <NumberedWithBackgroundList items={items} classes={classes} size={size} />}
41+
{variant === 'plain-icon-list' && <PlainIconList items={items} classes={classes} size={size} />}
42+
{variant === 'side-by-side-list' && <SideBySideList items={items} classes={classes} size={size} />}
43+
{variant === 'timeline-list' && <TimelineList items={items} classes={classes} size={size} />}
44+
{variant === 'zebra-list' && <ZebraList items={items} classes={classes} size={size} />}

‎src/components/List/layouts/AccentBorderLeftList.astro‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
export type Props = {
3+
items: {
4+
lead?: string
5+
text: string
6+
color?: string
7+
}[]
8+
classes?: {
9+
ul?: string
10+
li?: string
11+
em?: string
12+
}
13+
}
14+
15+
const { items, classes }: Props = Astro.props
16+
17+
const ulClass = "space-y-4"
18+
const liClass = "border-l-4 pl-4"
19+
const headerClass = "font-semibold mb-2"
20+
const textClass = "text-sm"
21+
---
22+
23+
<ul class:list={[ulClass, classes?.ul]}>
24+
{
25+
items.map((item) => (
26+
<li class:list={[liClass, classes?.li, item.color]}>
27+
<h4 class:list={[headerClass, classes?.em]}>{item.lead}</h4>
28+
<p class:list={textClass}>{item.text}</p>
29+
</li>
30+
))
31+
}
32+
</ul>

‎src/components/List/layouts/BadgeList.astro‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
export type Props = {
3+
items: {
4+
lead?: string
5+
text: string
6+
color?: string
7+
}[]
8+
classes?: {
9+
ul?: string
10+
li?: string
11+
em?: string
12+
}
13+
}
14+
15+
const { items, classes }: Props = Astro.props
16+
17+
const ulClass = ["space-y-4", classes?.ul]
18+
const liClass = ["border-l-4 pl-4 py-2", classes?.li]
19+
---
20+
21+
<ul class:list={ulClass}>
22+
{
23+
items.map((item) => (
24+
<li class:list={liClass}>
25+
<em class={classes?.em}>{item.lead}</em>
26+
<span>{item.text}</span>
27+
</li>
28+
))
29+
}
30+
</ul>
31+
32+
<ul class="space-y-4">
33+
<li class="flex flex-col sm:flex-row sm:items-baseline gap-2 sm:gap-4">
34+
<span class="shrink-0 px-2 py-1 rounded bg-content text-page-base font-mono text-xs font-bold">Query</span>
35+
<span>
36+
<em class="text-content font-bold not-italic mr-2">Is the gateway healthy?</em>
37+
<span class="text-content-offset">Request rate, error rate, and latency percentiles answer this instantly.</span>
38+
</span>
39+
</li>
40+
<li class="flex flex-col sm:flex-row sm:items-baseline gap-2 sm:gap-4">
41+
<span class="shrink-0 px-2 py-1 rounded bg-content text-page-base font-mono text-xs font-bold">Query</span>
42+
<span>
43+
<em class="text-content font-bold not-italic mr-2">Is a specific backend unhealthy?</em>
44+
<span class="text-content-offset">Per-upstream metrics and circuit breaker state tell you.</span>
45+
</span>
46+
</li>
47+
<li class="flex flex-col sm:flex-row sm:items-baseline gap-2 sm:gap-4">
48+
<span class="shrink-0 px-2 py-1 rounded bg-content text-page-base font-mono text-xs font-bold">Query</span>
49+
<span>
50+
<em class="text-content font-bold not-italic mr-2">Is a specific consumer affected?</em>
51+
<span class="text-content-offset">Consumer-specific labels let you slice the data.</span>
52+
</span>
53+
</li>
54+
<li class="flex flex-col sm:flex-row sm:items-baseline gap-2 sm:gap-4">
55+
<span class="shrink-0 px-2 py-1 rounded bg-content text-page-base font-mono text-xs font-bold">Query</span>
56+
<span>
57+
<em class="text-content font-bold not-italic mr-2">What happened to this specific request?</em>
58+
<span class="text-content-offset">Trace ID and request ID correlation connect all the pieces.</span>
59+
</span>
60+
</li>
61+
</ul>

0 commit comments

Comments
 (0)