Skip to content

Commit 17eb6a4

Browse files
webstackdevwebstackdev
committed
Add table component
1 parent fff382a commit 17eb6a4

21 files changed

Lines changed: 1660 additions & 463 deletions

‎.cache/pages.json‎

Lines changed: 2 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -88,75 +88,6 @@
8888
},
8989
"consent",
9090
"contact",
91-
{
92-
"deep-dive": [
93-
"alert-fatigue-reduction-triage-actionable-alerts",
94-
"api-deprecation-sunset-headers-consumer-migration",
95-
"api-gateway-metrics-traces-logs-debugging",
96-
"api-usage-metering-quotas-cost-attribution",
97-
"argocd-sync-failures-gitops-debugging-troubleshooting",
98-
"availability-targets-five-nines-cost-benefit-analysis",
99-
"backpressure-load-shedding-admission-control-overload",
100-
"blameless-postmortem-incident-analysis-systemic-causes",
101-
"blue-green-canary-deployment-strategy-comparison",
102-
"cdn-edge-caching-cache-keys-vary-headers",
103-
"chaos-engineering-failure-injection-low-cost-experiments",
104-
"ci-pipeline-caching-docker-layers-dependency-cache",
105-
"circuit-breaker-retry-budget-cascade-failure-prevention",
106-
"consumer-driven-contract-testing-pact-internal-apis",
107-
"container-vulnerability-scanning-ci-shift-left-security",
108-
"database-schema-migrations-continuous-deployment-zero-downtime",
109-
"dead-letter-queue-design-replay-debugging",
110-
"distributed-tracing-sampling-strategies-head-tail",
111-
"eol-runtime-upgrade-dependency-hell-migration",
112-
"ephemeral-preview-environments-cost-control-cleanup",
113-
"flaky-test-diagnosis-race-conditions-e2e-stabilization",
114-
"golden-paths-developer-experience-standardization-autonomy",
115-
"grafana-dashboard-hygiene-pruning-actionable-metrics",
116-
"helm-release-management-drift-detection-debugging",
117-
"idempotent-message-handlers-deduplication-retries",
118-
"internal-cli-kubectl-terraform-wrapper-abstraction",
119-
"internal-developer-portal-platform-self-service-actions",
120-
"internal-platform-api-versioning-deprecation-breaking-changes",
121-
"kubernetes-cluster-upgrade-playbook-risk-reduction",
122-
"kubernetes-cost-optimization-resource-sizing-spot-instances",
123-
"kubernetes-decision-framework-when-not-to-use",
124-
"kubernetes-dns-debugging-ndots-coredns-troubleshooting",
125-
"kubernetes-hpa-autoscaling-metrics-tuning-latency",
126-
"kubernetes-ingress-gateway-api-comparison-migration",
127-
"kubernetes-multi-cluster-fleet-management-configuration",
128-
"kubernetes-pod-resource-requests-limits-qos-classes",
129-
"kubernetes-secrets-external-secrets-operator-csi-vault",
130-
"legacy-code-testing-characterization-tests-seams",
131-
"monorepo-affected-builds-remote-caching-ci-optimization",
132-
"mtls-certificate-rotation-service-mesh-authentication",
133-
"nginx-haproxy-reverse-proxy-production-tuning",
134-
"on-call-rotation-small-teams-sustainable-coverage",
135-
"opa-conftest-policy-as-code-infrastructure-guardrails",
136-
"openapi-spec-documentation-sdk-generation-validation",
137-
"opentelemetry-span-design-granularity-overhead",
138-
"performance-testing-load-models-benchmark-accuracy",
139-
"platform-architecture-control-plane-data-plane-separation",
140-
"platform-engineering-metrics-lead-time-developer-friction",
141-
"postgresql-connection-pooling-saturation-sizing",
142-
"private-networking-dns-routing-tls-debugging",
143-
"prometheus-high-cardinality-metrics-label-design",
144-
"rate-limiting-token-bucket-leaky-bucket-implementation",
145-
"release-quality-gates-automated-deployment-validation",
146-
"reverse-engineering-documentation-legacy-systems",
147-
"service-catalog-metadata-schema-ownership-tracking",
148-
"service-decommissioning-scream-test-shutdown",
149-
"slo-error-budget-practical-guide",
150-
"slsa-build-provenance-artifact-signing-supply-chain",
151-
"strangler-fig-migration-complete-guide",
152-
"structured-logging-correlation-ids-log-schema-design",
153-
"symptom-based-alerting-runbooks-alert-design",
154-
"synthetic-test-data-pii-anonymization-fixtures",
155-
"terraform-module-design-defaults-versioning-interfaces",
156-
"terraform-state-locking-corruption-recovery-backend",
157-
"workload-identity-federation-keyless-cloud-authentication"
158-
]
159-
},
16091
"newsletter",
16192
"offline",
16293
{
@@ -194,5 +125,6 @@
194125
"terraform",
195126
"typescript"
196127
]
197-
}
128+
},
129+
"terms"
198130
]

‎src/components/Callout/index.astro‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ const iconColor = accentTextClasses.startsWith('text-') ? accentTextClasses.slic
7777

7878
<div
7979
class:list={[
80+
'callout',
8081
containerClasses,
8182
'flex',
8283
'flex-col',

‎src/components/Table/index.astro‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,27 @@
11
---
2-
import DefaultTable from '@components/Table/layouts/default.astro'
2+
import CriteriaHighlightTable from '@components/Table/layouts/criteria-highlight.astro'
3+
import GridAndAccentHeaderTable from '@components/Table/layouts/grid-and-accent-header.astro'
4+
import MinimalBordersTable from '@components/Table/layouts/minimal-borders.astro'
5+
import NumberedReviewTable from '@components/Table/layouts/numbered-review.astro'
6+
import ReportTable from '@components/Table/layouts/report-table.astro'
7+
import SemanticColoringTable from '@components/Table/layouts/semantic-coloring.astro'
8+
import SoftHeaderCardTable from '@components/Table/layouts/soft-header-card.astro'
9+
import StickyHeaderTable from '@components/Table/layouts/sticky-header.astro'
10+
import StripedRowsTable from '@components/Table/layouts/striped-rows.astro'
11+
import TimelineLabelsTable from '@components/Table/layouts/timeline-labels.astro'
12+
import VerticalColumnDelineationTable from '@components/Table/layouts/vertical-column-delineation.astro'
313
414
export type Props = {
515
content: {
616
caption?: string
717
subcaption?: string
18+
figure?: string
819
thead?: {
920
th: string[]
1021
}
1122
tbody: {
1223
tr: {
13-
th?: string
24+
th?: string | { label: string; color?: string }
1425
td: string[]
1526
}[]
1627
}
@@ -24,6 +35,7 @@ export type Props = {
2435
classes?: {
2536
table?: string
2637
caption?: string
38+
figure?: string
2739
thead?: string
2840
tbody?: string
2941
tfoot?: string
@@ -32,7 +44,26 @@ export type Props = {
3244
}
3345
3446
const { content, variant = 'default', classes } = Astro.props
47+
3548
const classesProps = classes ? { classes } : {}
49+
const wrapperClass = 'overflow-x-auto rounded-lg border border-trim bg-content-inverse'
3650
---
3751

38-
{variant === 'default' && <DefaultTable content={content} {...classesProps} />}
52+
<figure class:list={[content.figure ? 'my-4 mx-auto max-w-none' : '', classes?.figure]}>
53+
<div class={wrapperClass}>
54+
{variant === 'criteria-highlight-table' && <CriteriaHighlightTable content={content} {...classesProps} />}
55+
{variant === 'grid-and-accent-header-table' && <GridAndAccentHeaderTable content={content} {...classesProps} />}
56+
{variant === 'minimal-borders-table' && <MinimalBordersTable content={content} {...classesProps} />}
57+
{variant === 'numbered-review-table' && <NumberedReviewTable content={content} {...classesProps} />}
58+
{variant === 'report-table' && <ReportTable content={content} {...classesProps} />}
59+
{variant === 'semantic-coloring-table' && <SemanticColoringTable content={content} {...classesProps} />}
60+
{variant === 'soft-header-card-table' && <SoftHeaderCardTable content={content} {...classesProps} />}
61+
{variant === 'sticky-header-table' && <StickyHeaderTable content={content} {...classesProps} />}
62+
{variant === 'striped-rows-table' && <StripedRowsTable content={content} {...classesProps} />}
63+
{variant === 'timeline-labels-table' && <TimelineLabelsTable content={content} {...classesProps} />}
64+
{variant === 'vertical-column-delineation-table' && <VerticalColumnDelineationTable content={content} {...classesProps} />}
65+
</div>
66+
{content.figure && (
67+
<figcaption class="italic text-base text-center mt-3" set:html={content.figure}></figcaption>
68+
)}
69+
</figure>

‎src/components/Table/layouts/criteria-highlight.astro‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
export type Props = {
3+
content: {
4+
caption?: string
5+
subcaption?: string
6+
thead?: {
7+
th: string[]
8+
}
9+
tbody: {
10+
tr: {
11+
th?: string | { label: string; color?: string }
12+
td: string[]
13+
}[]
14+
}
15+
tfoot?: {
16+
tr: {
17+
th?: string
18+
td: string[]
19+
}[]
20+
}
21+
}
22+
classes?: {
23+
table?: string
24+
caption?: string
25+
thead?: string
26+
tbody?: string
27+
tfoot?: string
28+
}
29+
}
30+
31+
const { content, classes }: Props = Astro.props
32+
33+
const tableClass = 'w-full text-left'
34+
const captionClass = 'text-left px-4 py-3 text-content-offset'
35+
const headerClass = 'px-4 py-2.5 font-semibold text-content-active'
36+
const theadClass = 'bg-page-offset border-b border-trim'
37+
const rowClass = 'transition-colors duration-150 hover:bg-page-offset border-b border-trim-offset last:border-b-0'
38+
---
39+
40+
41+
<table class:list={[tableClass, classes?.table]}>
42+
{content.caption && (
43+
<caption class:list={[captionClass, classes?.caption]} set:html={content.caption}></caption>
44+
)}
45+
{content.subcaption && (
46+
<caption class:list={[captionClass, classes?.caption]} set:html={content.subcaption}></caption>
47+
)}
48+
49+
{content.thead && (
50+
<thead class:list={[theadClass, classes?.thead]}>
51+
<tr>
52+
{content.thead.th.map((th) => (
53+
<th scope="col" class:list={[headerClass, classes?.thead]} set:html={th}></th>
54+
))}
55+
</tr>
56+
</thead>
57+
)}
58+
59+
<tbody class:list={[classes?.tbody]}>
60+
{content.tbody.tr.map((row) => (
61+
<tr class={rowClass}>
62+
{row.th && (
63+
<th scope="row" class:list={['px-4 py-3 text-content font-medium', classes?.tbody]} set:html={row.th}></th>
64+
)}
65+
{row.td.map((td, index) => (
66+
index === 1 ? (
67+
<td class:list={['px-4 py-3', classes?.tbody]}>
68+
<span class="inline-flex rounded-md border border-primary-offset bg-primary-inverse px-2.5 py-1 text-primary-offset" set:html={td}></span>
69+
</td>
70+
) : (
71+
<td
72+
class:list={[
73+
'px-4 py-3',
74+
index === 0 ? 'text-content font-medium' : 'text-content',
75+
classes?.tbody,
76+
]}
77+
set:html={td}
78+
></td>
79+
)
80+
))}
81+
</tr>
82+
))}
83+
</tbody>
84+
85+
{content.tfoot && (
86+
<tfoot class:list={[classes?.tfoot]}>
87+
{content.tfoot.tr.map((row) => (
88+
<tr class={rowClass}>
89+
{row.th && (
90+
<th scope="row" class:list={['px-4 py-3 text-content font-medium', classes?.tfoot]} set:html={row.th}></th>
91+
)}
92+
{row.td.map((td, index) => (
93+
index === 1 ? (
94+
<td class:list={['px-4 py-3', classes?.tfoot]}>
95+
<span class="inline-flex rounded-md border border-secondary bg-secondary-inverse px-2.5 py-1 text-secondary font-semibold" set:html={td}></span>
96+
</td>
97+
) : (
98+
<td
99+
class:list={[
100+
'px-4 py-3',
101+
index === 0 ? 'text-content font-medium' : 'text-content',
102+
classes?.tfoot,
103+
]}
104+
set:html={td}
105+
></td>
106+
)
107+
))}
108+
</tr>
109+
))}
110+
</tfoot>
111+
)}
112+
</table>

‎src/components/Table/layouts/default.astro‎

Lines changed: 0 additions & 87 deletions
This file was deleted.

0 commit comments

Comments
 (0)