Skip to content

Commit 4425372

Browse files
webstackdevwebstackdev
committed
WIP Add Check Icons layout to List component
1 parent 477d0b7 commit 4425372

5 files changed

Lines changed: 90 additions & 96 deletions

File tree

‎src/components/List/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const { items, size, variant = 'default', classes } = Astro.props
3434
{variant === 'accent-border-left-list' && <AccentBorderLeftList items={items} classes={classes} />}
3535
{variant === 'badge-list' && <BadgeList items={items} classes={classes} size={size} />}
3636
{variant === 'card-grid-list' && <CardGridList items={items} classes={classes} />}
37-
{variant === 'check-icons-list' && <CheckIconsList items={items} classes={classes} size={size} />}
37+
{variant === 'check-icons-list' && <CheckIconsList items={items} classes={classes} />}
3838
{variant === 'chevron-list' && <ChevronList items={items} classes={classes} size={size} />}
3939
{variant === 'colored-marker-list' && <ColoredMarkerList items={items} classes={classes} size={size} />}
4040
{variant === 'numbered-with-background-list' && <NumberedWithBackgroundList items={items} classes={classes} size={size} />}

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

Lines changed: 15 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
---
2+
import Marker from "@components/List/marker.astro"
3+
24
export type Props = {
35
items: {
46
lead?: string
@@ -14,60 +16,26 @@ export type Props = {
1416
1517
const { items, classes }: Props = Astro.props
1618
17-
const ulClass = ["space-y-4", classes?.ul]
18-
const liClass = ["border-l-4 pl-4 py-2", classes?.li]
19+
const ulClass = ["space-y-3", classes?.ul]
20+
const liClass = ["flex items-start gap-3", classes?.li]
21+
const emClass = ["text-content font-semibold not-italic", classes?.em]
1922
---
2023

2124
<ul class:list={ulClass}>
2225
{
2326
items.map((item) => (
2427
<li class:list={liClass}>
25-
<em class={classes?.em}>{item.lead}</em>
26-
<span>{item.text}</span>
28+
<Marker
29+
icon="check"
30+
color={"text-success"}
31+
size={5}
32+
/>
33+
<span>
34+
<em class:list={emClass}>{item.lead}</em>
35+
<span class="text-content-offset/60 mx-2">—</span>
36+
<span class="text-content-offset">{item.text}</span>
37+
</span>
2738
</li>
2839
))
2940
}
3041
</ul>
31-
32-
<ul class="space-y-3">
33-
<li class="flex items-start gap-3">
34-
<svg class="w-5 h-5 text-success shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
35-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
36-
</svg>
37-
<span>
38-
<em class="text-content font-semibold not-italic">Is the gateway healthy?</em>
39-
<span class="text-content-offset/60 mx-2">—</span>
40-
<span class="text-content-offset">Request rate, error rate, and latency percentiles answer this instantly.</span>
41-
</span>
42-
</li>
43-
<li class="flex items-start gap-3">
44-
<svg class="w-5 h-5 text-success shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
45-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
46-
</svg>
47-
<span>
48-
<em class="text-content font-semibold not-italic">Is a specific backend unhealthy?</em>
49-
<span class="text-content-offset/60 mx-2">—</span>
50-
<span class="text-content-offset">Per-upstream metrics and circuit breaker state tell you.</span>
51-
</span>
52-
</li>
53-
<li class="flex items-start gap-3">
54-
<svg class="w-5 h-5 text-success shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
55-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
56-
</svg>
57-
<span>
58-
<em class="text-content font-semibold not-italic">Is a specific consumer affected?</em>
59-
<span class="text-content-offset/60 mx-2">—</span>
60-
<span class="text-content-offset">Consumer-specific labels let you slice the data.</span>
61-
</span>
62-
</li>
63-
<li class="flex items-start gap-3">
64-
<svg class="w-5 h-5 text-success shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
65-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
66-
</svg>
67-
<span>
68-
<em class="text-content font-semibold not-italic">What happened to this specific request?</em>
69-
<span class="text-content-offset/60 mx-2">—</span>
70-
<span class="text-content-offset">Trace ID and request ID correlation connect all the pieces.</span>
71-
</span>
72-
</li>
73-
</ul>

‎src/components/List/markers/check.astro‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
export type Props = {
3+
color: string
4+
classes?: string
5+
size: number
6+
}
7+
8+
const { color, classes, size } = Astro.props
9+
---
10+
11+
<svg
12+
class:list={["shrink-0 mt-0.5", `w-${size} h-${size}`, color, classes]}
13+
fill="none"
14+
stroke="currentColor"
15+
viewBox="0 0 24 24"
16+
aria-hidden="true"
17+
focusable="false"
18+
>
19+
<path
20+
stroke-linecap="round"
21+
stroke-linejoin="round"
22+
stroke-width="2"
23+
d="M5 13l4 4L19 7"
24+
></path>
25+
</svg>

‎src/content/articles/demo/index.mdx‎

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1587,7 +1587,7 @@ Display customer feedback and testimonials:
15871587

15881588
```markdown
15891589
<List
1590-
variant="card-grid-list"
1590+
variant="check-icons-list"
15911591
items={[
15921592
{
15931593
lead: "Is the gateway healthy?",
@@ -1632,3 +1632,51 @@ Display customer feedback and testimonials:
16321632
/>
16331633

16341634
<br />
1635+
1636+
```markdown
1637+
<List
1638+
variant="check-icons-list"
1639+
items={[
1640+
{
1641+
lead: "Is the gateway healthy?",
1642+
text: "Request rate, error rate, and latency percentiles answer this instantly.",
1643+
},
1644+
{
1645+
lead: "Is a specific backend unhealthy?",
1646+
text: "Per-upstream metrics and circuit breaker state tell you.",
1647+
},
1648+
{
1649+
lead: "Is a specific consumer affected?",
1650+
text: "Consumer-specific labels let you slice the data.",
1651+
},
1652+
{
1653+
lead: "What happened to this specific request?",
1654+
text: "Trace ID and request ID correlation connect all the pieces.",
1655+
},
1656+
]}
1657+
/>
1658+
```
1659+
1660+
<List
1661+
variant="check-icons-list"
1662+
items={[
1663+
{
1664+
lead: "Is the gateway healthy?",
1665+
text: "Request rate, error rate, and latency percentiles answer this instantly.",
1666+
},
1667+
{
1668+
lead: "Is a specific backend unhealthy?",
1669+
text: "Per-upstream metrics and circuit breaker state tell you.",
1670+
},
1671+
{
1672+
lead: "Is a specific consumer affected?",
1673+
text: "Consumer-specific labels let you slice the data.",
1674+
},
1675+
{
1676+
lead: "What happened to this specific request?",
1677+
text: "Trace ID and request ID correlation connect all the pieces.",
1678+
},
1679+
]}
1680+
/>
1681+
1682+
<br />

‎src/pages/hero.astro‎

Lines changed: 0 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -12,53 +12,6 @@ const path = '/hero/'
1212
<section class="container mx-auto px-4 sm:px-6 lg:px-8 py-16 space-y-16">
1313
<h2 class="text-3xl font-bold text-content mb-8 border-b border-trim pb-4">List Style Variations</h2>
1414

15-
<!-- VARIATION 3: Icon Bullets with Dash Separator -->
16-
<div class="max-w-3xl">
17-
<p class="text-xs font-bold text-content-offset uppercase tracking-widest mb-4">Variation 3: Check Icons with Dash Separator</p>
18-
<ul class="space-y-3">
19-
<li class="flex items-start gap-3">
20-
<svg class="w-5 h-5 text-success shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
21-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
22-
</svg>
23-
<span>
24-
<em class="text-content font-semibold not-italic">Is the gateway healthy?</em>
25-
<span class="text-content-offset/60 mx-2">—</span>
26-
<span class="text-content-offset">Request rate, error rate, and latency percentiles answer this instantly.</span>
27-
</span>
28-
</li>
29-
<li class="flex items-start gap-3">
30-
<svg class="w-5 h-5 text-success shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
31-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
32-
</svg>
33-
<span>
34-
<em class="text-content font-semibold not-italic">Is a specific backend unhealthy?</em>
35-
<span class="text-content-offset/60 mx-2">—</span>
36-
<span class="text-content-offset">Per-upstream metrics and circuit breaker state tell you.</span>
37-
</span>
38-
</li>
39-
<li class="flex items-start gap-3">
40-
<svg class="w-5 h-5 text-success shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
41-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
42-
</svg>
43-
<span>
44-
<em class="text-content font-semibold not-italic">Is a specific consumer affected?</em>
45-
<span class="text-content-offset/60 mx-2">—</span>
46-
<span class="text-content-offset">Consumer-specific labels let you slice the data.</span>
47-
</span>
48-
</li>
49-
<li class="flex items-start gap-3">
50-
<svg class="w-5 h-5 text-success shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
51-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
52-
</svg>
53-
<span>
54-
<em class="text-content font-semibold not-italic">What happened to this specific request?</em>
55-
<span class="text-content-offset/60 mx-2">—</span>
56-
<span class="text-content-offset">Trace ID and request ID correlation connect all the pieces.</span>
57-
</span>
58-
</li>
59-
</ul>
60-
</div>
61-
6215
<!-- VARIATION 4: Definition List Style -->
6316
<div class="max-w-3xl">
6417
<p class="text-xs font-bold text-content-offset uppercase tracking-widest mb-4">Variation 4: Definition List Style</p>

0 commit comments

Comments
 (0)