@forumone/throughline-reference-ds 0.0.2 → 0.2.0
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/CHANGELOG.md +7 -0
- package/LICENSE +21 -0
- package/README.md +102 -28
- package/dist/components/CTASection/CTASection.contract.d.ts +3 -0
- package/dist/components/CTASection/CTASection.contract.d.ts.map +1 -0
- package/dist/components/CTASection/CTASection.contract.js +117 -0
- package/dist/components/CTASection/CTASection.contract.js.map +1 -0
- package/dist/components/CTASection/CTASection.d.ts +17 -0
- package/dist/components/CTASection/CTASection.d.ts.map +1 -0
- package/dist/components/CTASection/CTASection.js +7 -0
- package/dist/components/CTASection/CTASection.js.map +1 -0
- package/dist/components/CTASection/index.d.ts +3 -0
- package/dist/components/CTASection/index.d.ts.map +1 -0
- package/dist/components/CTASection/index.js +3 -0
- package/dist/components/CTASection/index.js.map +1 -0
- package/dist/components/Card/Card.contract.d.ts +3 -0
- package/dist/components/Card/Card.contract.d.ts.map +1 -0
- package/dist/components/Card/Card.contract.js +111 -0
- package/dist/components/Card/Card.contract.js.map +1 -0
- package/dist/components/Card/Card.d.ts +16 -0
- package/dist/components/Card/Card.d.ts.map +1 -0
- package/dist/components/Card/Card.js +11 -0
- package/dist/components/Card/Card.js.map +1 -0
- package/dist/components/Card/index.d.ts +3 -0
- package/dist/components/Card/index.d.ts.map +1 -0
- package/dist/components/Card/index.js +3 -0
- package/dist/components/Card/index.js.map +1 -0
- package/dist/components/CardGrid/CardGrid.contract.d.ts +3 -0
- package/dist/components/CardGrid/CardGrid.contract.d.ts.map +1 -0
- package/dist/components/CardGrid/CardGrid.contract.js +67 -0
- package/dist/components/CardGrid/CardGrid.contract.js.map +1 -0
- package/dist/components/CardGrid/CardGrid.d.ts +9 -0
- package/dist/components/CardGrid/CardGrid.d.ts.map +1 -0
- package/dist/components/CardGrid/CardGrid.js +7 -0
- package/dist/components/CardGrid/CardGrid.js.map +1 -0
- package/dist/components/CardGrid/index.d.ts +3 -0
- package/dist/components/CardGrid/index.d.ts.map +1 -0
- package/dist/components/CardGrid/index.js +3 -0
- package/dist/components/CardGrid/index.js.map +1 -0
- package/dist/components/Divider/Divider.contract.d.ts +3 -0
- package/dist/components/Divider/Divider.contract.d.ts.map +1 -0
- package/dist/components/Divider/Divider.contract.js +77 -0
- package/dist/components/Divider/Divider.contract.js.map +1 -0
- package/dist/components/Divider/Divider.d.ts +8 -0
- package/dist/components/Divider/Divider.d.ts.map +1 -0
- package/dist/components/Divider/Divider.js +10 -0
- package/dist/components/Divider/Divider.js.map +1 -0
- package/dist/components/Divider/index.d.ts +3 -0
- package/dist/components/Divider/index.d.ts.map +1 -0
- package/dist/components/Divider/index.js +3 -0
- package/dist/components/Divider/index.js.map +1 -0
- package/dist/components/FAQ/FAQ.contract.d.ts +3 -0
- package/dist/components/FAQ/FAQ.contract.d.ts.map +1 -0
- package/dist/components/FAQ/FAQ.contract.js +93 -0
- package/dist/components/FAQ/FAQ.contract.js.map +1 -0
- package/dist/components/FAQ/FAQ.d.ts +14 -0
- package/dist/components/FAQ/FAQ.d.ts.map +1 -0
- package/dist/components/FAQ/FAQ.js +7 -0
- package/dist/components/FAQ/FAQ.js.map +1 -0
- package/dist/components/FAQ/index.d.ts +3 -0
- package/dist/components/FAQ/index.d.ts.map +1 -0
- package/dist/components/FAQ/index.js +3 -0
- package/dist/components/FAQ/index.js.map +1 -0
- package/dist/components/Hero/Hero.contract.d.ts +3 -0
- package/dist/components/Hero/Hero.contract.d.ts.map +1 -0
- package/dist/components/Hero/Hero.contract.js +171 -0
- package/dist/components/Hero/Hero.contract.js.map +1 -0
- package/dist/components/Hero/Hero.d.ts +24 -0
- package/dist/components/Hero/Hero.d.ts.map +1 -0
- package/dist/components/Hero/Hero.js +7 -0
- package/dist/components/Hero/Hero.js.map +1 -0
- package/dist/components/Hero/index.d.ts +3 -0
- package/dist/components/Hero/index.d.ts.map +1 -0
- package/dist/components/Hero/index.js +3 -0
- package/dist/components/Hero/index.js.map +1 -0
- package/dist/components/MediaBlock/MediaBlock.contract.d.ts +3 -0
- package/dist/components/MediaBlock/MediaBlock.contract.d.ts.map +1 -0
- package/dist/components/MediaBlock/MediaBlock.contract.js +83 -0
- package/dist/components/MediaBlock/MediaBlock.contract.js.map +1 -0
- package/dist/components/MediaBlock/MediaBlock.d.ts +23 -0
- package/dist/components/MediaBlock/MediaBlock.d.ts.map +1 -0
- package/dist/components/MediaBlock/MediaBlock.js +8 -0
- package/dist/components/MediaBlock/MediaBlock.js.map +1 -0
- package/dist/components/MediaBlock/index.d.ts +3 -0
- package/dist/components/MediaBlock/index.d.ts.map +1 -0
- package/dist/components/MediaBlock/index.js +3 -0
- package/dist/components/MediaBlock/index.js.map +1 -0
- package/dist/components/Prose/Prose.contract.d.ts +3 -0
- package/dist/components/Prose/Prose.contract.d.ts.map +1 -0
- package/dist/components/Prose/Prose.contract.js +95 -0
- package/dist/components/Prose/Prose.contract.js.map +1 -0
- package/dist/components/Prose/Prose.d.ts +9 -0
- package/dist/components/Prose/Prose.d.ts.map +1 -0
- package/dist/components/Prose/Prose.js +7 -0
- package/dist/components/Prose/Prose.js.map +1 -0
- package/dist/components/Prose/index.d.ts +3 -0
- package/dist/components/Prose/index.d.ts.map +1 -0
- package/dist/components/Prose/index.js +3 -0
- package/dist/components/Prose/index.js.map +1 -0
- package/dist/components/Quote/Quote.contract.d.ts +3 -0
- package/dist/components/Quote/Quote.contract.d.ts.map +1 -0
- package/dist/components/Quote/Quote.contract.js +90 -0
- package/dist/components/Quote/Quote.contract.js.map +1 -0
- package/dist/components/Quote/Quote.d.ts +16 -0
- package/dist/components/Quote/Quote.d.ts.map +1 -0
- package/dist/components/Quote/Quote.js +7 -0
- package/dist/components/Quote/Quote.js.map +1 -0
- package/dist/components/Quote/index.d.ts +3 -0
- package/dist/components/Quote/index.d.ts.map +1 -0
- package/dist/components/Quote/index.js +3 -0
- package/dist/components/Quote/index.js.map +1 -0
- package/dist/components/SectionIntro/SectionIntro.contract.d.ts +3 -0
- package/dist/components/SectionIntro/SectionIntro.contract.d.ts.map +1 -0
- package/dist/components/SectionIntro/SectionIntro.contract.js +97 -0
- package/dist/components/SectionIntro/SectionIntro.contract.js.map +1 -0
- package/dist/components/SectionIntro/SectionIntro.d.ts +10 -0
- package/dist/components/SectionIntro/SectionIntro.d.ts.map +1 -0
- package/dist/components/SectionIntro/SectionIntro.js +7 -0
- package/dist/components/SectionIntro/SectionIntro.js.map +1 -0
- package/dist/components/SectionIntro/index.d.ts +3 -0
- package/dist/components/SectionIntro/index.d.ts.map +1 -0
- package/dist/components/SectionIntro/index.js +3 -0
- package/dist/components/SectionIntro/index.js.map +1 -0
- package/dist/components/Spacer/Spacer.contract.d.ts +3 -0
- package/dist/components/Spacer/Spacer.contract.d.ts.map +1 -0
- package/dist/components/Spacer/Spacer.contract.js +66 -0
- package/dist/components/Spacer/Spacer.contract.js.map +1 -0
- package/dist/components/Spacer/Spacer.d.ts +7 -0
- package/dist/components/Spacer/Spacer.d.ts.map +1 -0
- package/dist/components/Spacer/Spacer.js +7 -0
- package/dist/components/Spacer/Spacer.js.map +1 -0
- package/dist/components/Spacer/index.d.ts +3 -0
- package/dist/components/Spacer/index.d.ts.map +1 -0
- package/dist/components/Spacer/index.js +3 -0
- package/dist/components/Spacer/index.js.map +1 -0
- package/dist/components/Stats/Stats.contract.d.ts +3 -0
- package/dist/components/Stats/Stats.contract.d.ts.map +1 -0
- package/dist/components/Stats/Stats.contract.js +92 -0
- package/dist/components/Stats/Stats.contract.js.map +1 -0
- package/dist/components/Stats/Stats.d.ts +13 -0
- package/dist/components/Stats/Stats.d.ts.map +1 -0
- package/dist/components/Stats/Stats.js +7 -0
- package/dist/components/Stats/Stats.js.map +1 -0
- package/dist/components/Stats/index.d.ts +3 -0
- package/dist/components/Stats/index.d.ts.map +1 -0
- package/dist/components/Stats/index.js +3 -0
- package/dist/components/Stats/index.js.map +1 -0
- package/dist/index.d.ts +14 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +14 -0
- package/dist/index.js.map +1 -0
- package/dist/manifest.json +2014 -0
- package/dist/styles/base.css +55 -0
- package/dist/styles/index.css +213 -0
- package/dist/styles/reset.css +48 -0
- package/dist/styles/tokens.css +105 -0
- package/dist/tokens/colors.d.ts +48 -0
- package/dist/tokens/colors.d.ts.map +1 -0
- package/dist/tokens/colors.js +47 -0
- package/dist/tokens/colors.js.map +1 -0
- package/dist/tokens/index.d.ts +99 -0
- package/dist/tokens/index.d.ts.map +1 -0
- package/dist/tokens/index.js +21 -0
- package/dist/tokens/index.js.map +1 -0
- package/dist/tokens/radii.d.ts +11 -0
- package/dist/tokens/radii.d.ts.map +1 -0
- package/dist/tokens/radii.js +10 -0
- package/dist/tokens/radii.js.map +1 -0
- package/dist/tokens/spacing.d.ts +26 -0
- package/dist/tokens/spacing.d.ts.map +1 -0
- package/dist/tokens/spacing.js +25 -0
- package/dist/tokens/spacing.js.map +1 -0
- package/dist/tokens/typography.d.ts +28 -0
- package/dist/tokens/typography.d.ts.map +1 -0
- package/dist/tokens/typography.js +27 -0
- package/dist/tokens/typography.js.map +1 -0
- package/package.json +88 -7
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SectionIntro/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAsD,MAAM,mBAAmB,CAAA;AACpG,OAAO,EAAE,QAAQ,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Spacer.contract.d.ts","sourceRoot":"","sources":["../../../src/components/Spacer/Spacer.contract.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAA;AAE9E,eAAO,MAAM,QAAQ,EAAE,iBAyEtB,CAAA"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
export const contract = {
|
|
2
|
+
name: 'Spacer',
|
|
3
|
+
category: 'utility',
|
|
4
|
+
description: 'An explicit vertical spacing block that inserts a token-sized gap between adjacent components.',
|
|
5
|
+
intent: 'Add breathing room between two components when neither component\'s own margins produce the right rhythm. Prefer component-owned spacing when possible; reach for Spacer only when layout composition requires it, such as between Stats and a following CardGrid on a dense page.',
|
|
6
|
+
composition: {
|
|
7
|
+
placement: ['page', 'section'],
|
|
8
|
+
maxPerPage: null,
|
|
9
|
+
requiredSiblings: [],
|
|
10
|
+
forbiddenAdjacent: ['Spacer'],
|
|
11
|
+
},
|
|
12
|
+
content: {
|
|
13
|
+
fields: [
|
|
14
|
+
{
|
|
15
|
+
name: 'size',
|
|
16
|
+
type: 'select',
|
|
17
|
+
required: false,
|
|
18
|
+
constraints: 'xs | sm | md | lg | xl',
|
|
19
|
+
},
|
|
20
|
+
],
|
|
21
|
+
variants: [
|
|
22
|
+
{ name: 'xs', description: 'Extra small', whenToUse: 'Fine-grained adjustment' },
|
|
23
|
+
{ name: 'sm', description: 'Small', whenToUse: 'Between closely related elements' },
|
|
24
|
+
{ name: 'md', description: 'Medium (default)', whenToUse: 'Most cases' },
|
|
25
|
+
{ name: 'lg', description: 'Large', whenToUse: 'Between page sections that need visual separation' },
|
|
26
|
+
{ name: 'xl', description: 'Extra large', whenToUse: 'Major visual pauses on long landing pages' },
|
|
27
|
+
],
|
|
28
|
+
},
|
|
29
|
+
tokens: {
|
|
30
|
+
consumes: ['spacing.2', 'spacing.4', 'spacing.8', 'spacing.16', 'spacing.24'],
|
|
31
|
+
configurable: [
|
|
32
|
+
{ prop: 'size', tokenGroup: 'spacing', allowedValues: ['xs', 'sm', 'md', 'lg', 'xl'] },
|
|
33
|
+
],
|
|
34
|
+
},
|
|
35
|
+
accessibility: {
|
|
36
|
+
keyboardSupport: [],
|
|
37
|
+
screenReaderBehavior: 'Spacer is a presentational div marked aria-hidden. Assistive technology skips it entirely.',
|
|
38
|
+
contentWarnings: [
|
|
39
|
+
'Do not use Spacer to replace paragraph margins inside Prose — the typography already handles that',
|
|
40
|
+
],
|
|
41
|
+
},
|
|
42
|
+
examples: [
|
|
43
|
+
{ label: 'Small', intent: 'Subtle gap', storyId: 'spacer--small' },
|
|
44
|
+
{ label: 'Medium', intent: 'Standard gap', storyId: 'spacer--medium' },
|
|
45
|
+
{ label: 'Large', intent: 'Major section break', storyId: 'spacer--large' },
|
|
46
|
+
],
|
|
47
|
+
antiExamples: [
|
|
48
|
+
{
|
|
49
|
+
label: 'Stacking multiple Spacers to achieve a custom size',
|
|
50
|
+
why: 'Nesting spacers bypasses the token scale and makes spacing unauditable',
|
|
51
|
+
useInstead: 'Pick the nearest size in the scale or adjust the neighboring components',
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
label: 'Using Spacer for semantic breaks',
|
|
55
|
+
why: 'Spacer has no semantic meaning; readers cannot tell one section has ended and another begun',
|
|
56
|
+
useInstead: 'Divider (decorative=false) or SectionIntro',
|
|
57
|
+
},
|
|
58
|
+
],
|
|
59
|
+
behavior: {
|
|
60
|
+
fetchesData: false,
|
|
61
|
+
hasClientState: false,
|
|
62
|
+
animates: false,
|
|
63
|
+
requiresAnalytics: false,
|
|
64
|
+
},
|
|
65
|
+
};
|
|
66
|
+
//# sourceMappingURL=Spacer.contract.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Spacer.contract.js","sourceRoot":"","sources":["../../../src/components/Spacer/Spacer.contract.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAsB;IACzC,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,gGAAgG;IAC7G,MAAM,EACJ,oRAAoR;IAEtR,WAAW,EAAE;QACX,SAAS,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC;QAC9B,UAAU,EAAE,IAAI;QAChB,gBAAgB,EAAE,EAAE;QACpB,iBAAiB,EAAE,CAAC,QAAQ,CAAC;KAC9B;IAED,OAAO,EAAE;QACP,MAAM,EAAE;YACN;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,QAAQ;gBACd,QAAQ,EAAE,KAAK;gBACf,WAAW,EAAE,wBAAwB;aACtC;SACF;QACD,QAAQ,EAAE;YACR,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,yBAAyB,EAAE;YAChF,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,kCAAkC,EAAE;YACnF,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,YAAY,EAAE;YACxE,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,mDAAmD,EAAE;YACpG,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,2CAA2C,EAAE;SACnG;KACF;IAED,MAAM,EAAE;QACN,QAAQ,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,CAAC;QAC7E,YAAY,EAAE;YACZ,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE;SACvF;KACF;IAED,aAAa,EAAE;QACb,eAAe,EAAE,EAAE;QACnB,oBAAoB,EAClB,4FAA4F;QAC9F,eAAe,EAAE;YACf,mGAAmG;SACpG;KACF;IAED,QAAQ,EAAE;QACR,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,eAAe,EAAE;QAClE,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,gBAAgB,EAAE;QACtE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,qBAAqB,EAAE,OAAO,EAAE,eAAe,EAAE;KAC5E;IAED,YAAY,EAAE;QACZ;YACE,KAAK,EAAE,oDAAoD;YAC3D,GAAG,EAAE,wEAAwE;YAC7E,UAAU,EAAE,yEAAyE;SACtF;QACD;YACE,KAAK,EAAE,kCAAkC;YACzC,GAAG,EAAE,6FAA6F;YAClG,UAAU,EAAE,4CAA4C;SACzD;KACF;IAED,QAAQ,EAAE;QACR,WAAW,EAAE,KAAK;QAClB,cAAc,EAAE,KAAK;QACrB,QAAQ,EAAE,KAAK;QACf,iBAAiB,EAAE,KAAK;KACzB;CACF,CAAA"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export type SpacerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
2
|
+
export interface SpacerProps {
|
|
3
|
+
size?: SpacerSize;
|
|
4
|
+
className?: string;
|
|
5
|
+
}
|
|
6
|
+
export declare function Spacer({ size, className }: SpacerProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
//# sourceMappingURL=Spacer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../../src/components/Spacer/Spacer.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEzD,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,MAAM,CAAC,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,WAAW,2CAQ7D"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import styles from './Spacer.module.css';
|
|
4
|
+
export function Spacer({ size = 'md', className }) {
|
|
5
|
+
return (_jsx("div", { "aria-hidden": "true", role: "presentation", className: clsx(styles.spacer, styles[size], className) }));
|
|
6
|
+
}
|
|
7
|
+
//# sourceMappingURL=Spacer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Spacer.js","sourceRoot":"","sources":["../../../src/components/Spacer/Spacer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAC3B,OAAO,MAAM,MAAM,qBAAqB,CAAA;AASxC,MAAM,UAAU,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAe;IAC5D,OAAO,CACL,6BACc,MAAM,EAClB,IAAI,EAAC,cAAc,EACnB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,GACvD,CACH,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Spacer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AACvE,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Spacer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAqC,MAAM,aAAa,CAAA;AACvE,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Stats.contract.d.ts","sourceRoot":"","sources":["../../../src/components/Stats/Stats.contract.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAA;AAE9E,eAAO,MAAM,QAAQ,EAAE,iBAoGtB,CAAA"}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
export const contract = {
|
|
2
|
+
name: 'Stats',
|
|
3
|
+
category: 'data',
|
|
4
|
+
description: 'A numerical data display with two to four stat items, each with a value, a label, and an optional description.',
|
|
5
|
+
intent: 'Surface a small set of headline metrics in a scannable row. Use for impact reports, program highlights, and annual summaries where numbers tell the story. Not appropriate for dense tabular data — that needs a real table component.',
|
|
6
|
+
composition: {
|
|
7
|
+
placement: ['section'],
|
|
8
|
+
maxPerPage: null,
|
|
9
|
+
requiredSiblings: [],
|
|
10
|
+
forbiddenAdjacent: [],
|
|
11
|
+
},
|
|
12
|
+
content: {
|
|
13
|
+
fields: [
|
|
14
|
+
{
|
|
15
|
+
name: 'eyebrow',
|
|
16
|
+
type: 'text',
|
|
17
|
+
required: false,
|
|
18
|
+
maxLength: 40,
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
name: 'headline',
|
|
22
|
+
type: 'text',
|
|
23
|
+
required: false,
|
|
24
|
+
maxLength: 100,
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
name: 'items',
|
|
28
|
+
type: 'array',
|
|
29
|
+
required: true,
|
|
30
|
+
constraints: 'Two to four items',
|
|
31
|
+
of: [
|
|
32
|
+
{ name: 'value', type: 'text', required: true, maxLength: 20 },
|
|
33
|
+
{ name: 'label', type: 'text', required: true, maxLength: 60 },
|
|
34
|
+
{ name: 'description', type: 'text', required: false, maxLength: 80 },
|
|
35
|
+
],
|
|
36
|
+
},
|
|
37
|
+
],
|
|
38
|
+
},
|
|
39
|
+
tokens: {
|
|
40
|
+
consumes: [
|
|
41
|
+
'color.text.primary',
|
|
42
|
+
'color.text.secondary',
|
|
43
|
+
'color.brand.primary',
|
|
44
|
+
'spacing.16',
|
|
45
|
+
'spacing.10',
|
|
46
|
+
'spacing.8',
|
|
47
|
+
'spacing.3',
|
|
48
|
+
'spacing.2',
|
|
49
|
+
'spacing.1',
|
|
50
|
+
'spacing.container',
|
|
51
|
+
'font.size.5xl',
|
|
52
|
+
'font.size.3xl',
|
|
53
|
+
'font.size.sm',
|
|
54
|
+
'font.weight.bold',
|
|
55
|
+
'font.weight.semibold',
|
|
56
|
+
'line.height.tight',
|
|
57
|
+
'letter.spacing.wide',
|
|
58
|
+
],
|
|
59
|
+
},
|
|
60
|
+
accessibility: {
|
|
61
|
+
keyboardSupport: [],
|
|
62
|
+
screenReaderBehavior: 'Statistics are rendered as a <dl> with <dt>/<dd> pairs. Screen readers traverse each value + label + description as a definition list entry.',
|
|
63
|
+
contentWarnings: [
|
|
64
|
+
'Keep values concise — "4,200" instead of "4,200,000,000 dollars"',
|
|
65
|
+
'Never invent numbers to fill the grid; use the real count even if unequal',
|
|
66
|
+
],
|
|
67
|
+
},
|
|
68
|
+
examples: [
|
|
69
|
+
{ label: 'Three stats', intent: 'Annual report highlights', storyId: 'stats--three-stats' },
|
|
70
|
+
{ label: 'Two stats', intent: 'Minimal impact summary', storyId: 'stats--two-stats' },
|
|
71
|
+
{ label: 'Four stats', intent: 'Dense overview', storyId: 'stats--four-stats' },
|
|
72
|
+
],
|
|
73
|
+
antiExamples: [
|
|
74
|
+
{
|
|
75
|
+
label: 'Five or more stats',
|
|
76
|
+
why: 'Beyond four items the layout cramps on mobile and the individual numbers lose impact',
|
|
77
|
+
useInstead: 'Pick the top four; move the rest to a full report page',
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
label: 'Paragraph-length values',
|
|
81
|
+
why: 'Stats are designed for at-a-glance reading; long values overwhelm the layout',
|
|
82
|
+
useInstead: 'Use Prose for extended narrative',
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
behavior: {
|
|
86
|
+
fetchesData: false,
|
|
87
|
+
hasClientState: false,
|
|
88
|
+
animates: false,
|
|
89
|
+
requiresAnalytics: false,
|
|
90
|
+
},
|
|
91
|
+
};
|
|
92
|
+
//# sourceMappingURL=Stats.contract.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Stats.contract.js","sourceRoot":"","sources":["../../../src/components/Stats/Stats.contract.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAsB;IACzC,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,MAAM;IAChB,WAAW,EACT,gHAAgH;IAClH,MAAM,EACJ,wOAAwO;IAE1O,WAAW,EAAE;QACX,SAAS,EAAE,CAAC,SAAS,CAAC;QACtB,UAAU,EAAE,IAAI;QAChB,gBAAgB,EAAE,EAAE;QACpB,iBAAiB,EAAE,EAAE;KACtB;IAED,OAAO,EAAE;QACP,MAAM,EAAE;YACN;gBACE,IAAI,EAAE,SAAS;gBACf,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE,KAAK;gBACf,SAAS,EAAE,EAAE;aACd;YACD;gBACE,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE,KAAK;gBACf,SAAS,EAAE,GAAG;aACf;YACD;gBACE,IAAI,EAAE,OAAO;gBACb,IAAI,EAAE,OAAO;gBACb,QAAQ,EAAE,IAAI;gBACd,WAAW,EAAE,mBAAmB;gBAChC,EAAE,EAAE;oBACF,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;oBAC9D,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;oBAC9D,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;iBACtE;aACF;SACF;KACF;IAED,MAAM,EAAE;QACN,QAAQ,EAAE;YACR,oBAAoB;YACpB,sBAAsB;YACtB,qBAAqB;YACrB,YAAY;YACZ,YAAY;YACZ,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;YACX,mBAAmB;YACnB,eAAe;YACf,eAAe;YACf,cAAc;YACd,kBAAkB;YAClB,sBAAsB;YACtB,mBAAmB;YACnB,qBAAqB;SACtB;KACF;IAED,aAAa,EAAE;QACb,eAAe,EAAE,EAAE;QACnB,oBAAoB,EAClB,8IAA8I;QAChJ,eAAe,EAAE;YACf,kEAAkE;YAClE,2EAA2E;SAC5E;KACF;IAED,QAAQ,EAAE;QACR,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,0BAA0B,EAAE,OAAO,EAAE,oBAAoB,EAAE;QAC3F,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,wBAAwB,EAAE,OAAO,EAAE,kBAAkB,EAAE;QACrF,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,gBAAgB,EAAE,OAAO,EAAE,mBAAmB,EAAE;KAChF;IAED,YAAY,EAAE;QACZ;YACE,KAAK,EAAE,oBAAoB;YAC3B,GAAG,EAAE,sFAAsF;YAC3F,UAAU,EAAE,wDAAwD;SACrE;QACD;YACE,KAAK,EAAE,yBAAyB;YAChC,GAAG,EAAE,8EAA8E;YACnF,UAAU,EAAE,kCAAkC;SAC/C;KACF;IAED,QAAQ,EAAE;QACR,WAAW,EAAE,KAAK;QAClB,cAAc,EAAE,KAAK;QACrB,QAAQ,EAAE,KAAK;QACf,iBAAiB,EAAE,KAAK;KACzB;CACF,CAAA"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export interface StatItem {
|
|
2
|
+
value: string;
|
|
3
|
+
label: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
}
|
|
6
|
+
export interface StatsProps {
|
|
7
|
+
eyebrow?: string;
|
|
8
|
+
headline?: string;
|
|
9
|
+
items: StatItem[];
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare function Stats({ eyebrow, headline, items, className }: StatsProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
//# sourceMappingURL=Stats.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Stats.d.ts","sourceRoot":"","sources":["../../../src/components/Stats/Stats.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,UAAU,2CAsBxE"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import styles from './Stats.module.css';
|
|
4
|
+
export function Stats({ eyebrow, headline, items, className }) {
|
|
5
|
+
return (_jsx("section", { className: clsx(styles.stats, className), children: _jsxs("div", { className: styles.container, children: [eyebrow ? _jsx("p", { className: styles.eyebrow, children: eyebrow }) : null, headline ? _jsx("h2", { className: styles.headline, children: headline }) : null, _jsx("dl", { className: clsx(styles.list, styles[`cols-${items.length}`]), children: items.map((item) => (_jsxs("div", { className: styles.item, children: [_jsx("dt", { className: styles.value, children: item.value }), _jsxs("dd", { className: styles.label, children: [_jsx("span", { className: styles.labelText, children: item.label }), item.description ? (_jsx("span", { className: styles.description, children: item.description })) : null] })] }, `${item.value}-${item.label}`))) })] }) }));
|
|
6
|
+
}
|
|
7
|
+
//# sourceMappingURL=Stats.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Stats.js","sourceRoot":"","sources":["../../../src/components/Stats/Stats.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAA;AAC3B,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAevC,MAAM,UAAU,KAAK,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAc;IACvE,OAAO,CACL,kBAAS,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,YAC/C,eAAK,SAAS,EAAE,MAAM,CAAC,SAAS,aAC7B,OAAO,CAAC,CAAC,CAAC,YAAG,SAAS,EAAE,MAAM,CAAC,OAAO,YAAG,OAAO,GAAK,CAAC,CAAC,CAAC,IAAI,EAC5D,QAAQ,CAAC,CAAC,CAAC,aAAI,SAAS,EAAE,MAAM,CAAC,QAAQ,YAAG,QAAQ,GAAM,CAAC,CAAC,CAAC,IAAI,EAClE,aAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,YAC7D,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,eAAyC,SAAS,EAAE,MAAM,CAAC,IAAI,aAC7D,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,IAAI,CAAC,KAAK,GAAM,EAC9C,cAAI,SAAS,EAAE,MAAM,CAAC,KAAK,aACzB,eAAM,SAAS,EAAE,MAAM,CAAC,SAAS,YAAG,IAAI,CAAC,KAAK,GAAQ,EACrD,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,eAAM,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,IAAI,CAAC,WAAW,GAAQ,CAC/D,CAAC,CAAC,CAAC,IAAI,IACL,KAPG,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,CAQjC,CACP,CAAC,GACC,IACD,GACE,CACX,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stats/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAA;AAClE,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Stats/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAkC,MAAM,YAAY,CAAA;AAClE,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAA"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export { Hero, type HeroProps, type HeroVariant, type HeroBackground } from './components/Hero/index.js';
|
|
2
|
+
export { SectionIntro, type SectionIntroProps, type SectionIntroAlignment } from './components/SectionIntro/index.js';
|
|
3
|
+
export { Prose, type ProseProps, type ProseSize } from './components/Prose/index.js';
|
|
4
|
+
export { MediaBlock, type MediaBlockProps, type MediaBlockAspect, type MediaBlockMedia } from './components/MediaBlock/index.js';
|
|
5
|
+
export { Card, type CardProps } from './components/Card/index.js';
|
|
6
|
+
export { CardGrid, type CardGridProps, type CardGridColumns } from './components/CardGrid/index.js';
|
|
7
|
+
export { CTASection, type CTASectionProps, type CTASectionBackground } from './components/CTASection/index.js';
|
|
8
|
+
export { Stats, type StatsProps, type StatItem } from './components/Stats/index.js';
|
|
9
|
+
export { FAQ, type FAQProps, type FAQItem } from './components/FAQ/index.js';
|
|
10
|
+
export { Quote, type QuoteProps, type QuoteSize } from './components/Quote/index.js';
|
|
11
|
+
export { Divider, type DividerProps, type DividerSpacing } from './components/Divider/index.js';
|
|
12
|
+
export { Spacer, type SpacerProps, type SpacerSize } from './components/Spacer/index.js';
|
|
13
|
+
export * as tokens from './tokens/index.js';
|
|
14
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAA;AACxG,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,qBAAqB,EAAE,MAAM,oCAAoC,CAAA;AACrH,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,6BAA6B,CAAA;AACpF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,kCAAkC,CAAA;AAChI,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,gCAAgC,CAAA;AACnG,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,kCAAkC,CAAA;AAC9G,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACnF,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAC5E,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,6BAA6B,CAAA;AACpF,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,MAAM,+BAA+B,CAAA;AAC/F,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,8BAA8B,CAAA;AAExF,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAA"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export { Hero } from './components/Hero/index.js';
|
|
2
|
+
export { SectionIntro } from './components/SectionIntro/index.js';
|
|
3
|
+
export { Prose } from './components/Prose/index.js';
|
|
4
|
+
export { MediaBlock } from './components/MediaBlock/index.js';
|
|
5
|
+
export { Card } from './components/Card/index.js';
|
|
6
|
+
export { CardGrid } from './components/CardGrid/index.js';
|
|
7
|
+
export { CTASection } from './components/CTASection/index.js';
|
|
8
|
+
export { Stats } from './components/Stats/index.js';
|
|
9
|
+
export { FAQ } from './components/FAQ/index.js';
|
|
10
|
+
export { Quote } from './components/Quote/index.js';
|
|
11
|
+
export { Divider } from './components/Divider/index.js';
|
|
12
|
+
export { Spacer } from './components/Spacer/index.js';
|
|
13
|
+
export * as tokens from './tokens/index.js';
|
|
14
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAyD,MAAM,4BAA4B,CAAA;AACxG,OAAO,EAAE,YAAY,EAAsD,MAAM,oCAAoC,CAAA;AACrH,OAAO,EAAE,KAAK,EAAmC,MAAM,6BAA6B,CAAA;AACpF,OAAO,EAAE,UAAU,EAAqE,MAAM,kCAAkC,CAAA;AAChI,OAAO,EAAE,IAAI,EAAkB,MAAM,4BAA4B,CAAA;AACjE,OAAO,EAAE,QAAQ,EAA4C,MAAM,gCAAgC,CAAA;AACnG,OAAO,EAAE,UAAU,EAAmD,MAAM,kCAAkC,CAAA;AAC9G,OAAO,EAAE,KAAK,EAAkC,MAAM,6BAA6B,CAAA;AACnF,OAAO,EAAE,GAAG,EAA+B,MAAM,2BAA2B,CAAA;AAC5E,OAAO,EAAE,KAAK,EAAmC,MAAM,6BAA6B,CAAA;AACpF,OAAO,EAAE,OAAO,EAA0C,MAAM,+BAA+B,CAAA;AAC/F,OAAO,EAAE,MAAM,EAAqC,MAAM,8BAA8B,CAAA;AAExF,OAAO,KAAK,MAAM,MAAM,mBAAmB,CAAA"}
|