@solexllc/usx-contracts 0.1.1 → 0.1.3
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/dist/component-contracts.json +96 -12
- package/package.json +1 -1
- package/src/contracts.js +96 -12
|
@@ -26,10 +26,18 @@
|
|
|
26
26
|
"default": false,
|
|
27
27
|
"description": "Whether multiple accordion items can be expanded at the same time."
|
|
28
28
|
},
|
|
29
|
+
"iconPosition": {
|
|
30
|
+
"type": "select",
|
|
31
|
+
"options": [
|
|
32
|
+
"start",
|
|
33
|
+
"end"
|
|
34
|
+
],
|
|
35
|
+
"description": "Position of the expand/collapse icon. Omit to use the global USWDS or theme setting."
|
|
36
|
+
},
|
|
29
37
|
"className": {
|
|
30
38
|
"type": "string",
|
|
31
39
|
"default": "",
|
|
32
|
-
"description": "Additional CSS classes to apply to the accordion. Use
|
|
40
|
+
"description": "Additional CSS classes to apply to the accordion. Use iconPosition to set the icon position for this accordion. For live global theming, set --usx-accordion-icon-position to 1.25rem auto (start) or auto 1.25rem (end)."
|
|
33
41
|
}
|
|
34
42
|
}
|
|
35
43
|
},
|
|
@@ -296,6 +304,10 @@
|
|
|
296
304
|
"type": "string",
|
|
297
305
|
"description": "The custom aria label users can override."
|
|
298
306
|
},
|
|
307
|
+
"flagSrc": {
|
|
308
|
+
"type": "string",
|
|
309
|
+
"description": "URL for the decorative banner flag image. Defaults to img/us_flag_small.png under the configured asset base."
|
|
310
|
+
},
|
|
299
311
|
"tld": {
|
|
300
312
|
"type": "string",
|
|
301
313
|
"description": "The top level domain for the site. Defaults to `.gov`"
|
|
@@ -1718,6 +1730,14 @@
|
|
|
1718
1730
|
"className": {
|
|
1719
1731
|
"type": "string",
|
|
1720
1732
|
"description": "Additional classes"
|
|
1733
|
+
},
|
|
1734
|
+
"utilityContent": {
|
|
1735
|
+
"type": "slot",
|
|
1736
|
+
"description": "Rendered inline, to the left of the search box (in both header variants)."
|
|
1737
|
+
},
|
|
1738
|
+
"navEndContent": {
|
|
1739
|
+
"type": "slot",
|
|
1740
|
+
"description": "Rendered right-justified, in line with the primary nav links (extended header only)."
|
|
1721
1741
|
}
|
|
1722
1742
|
}
|
|
1723
1743
|
},
|
|
@@ -1765,11 +1785,78 @@
|
|
|
1765
1785
|
"type": "string",
|
|
1766
1786
|
"description": "URL of the background image applied via inline style"
|
|
1767
1787
|
},
|
|
1788
|
+
"contentPosition": {
|
|
1789
|
+
"type": "select",
|
|
1790
|
+
"options": [
|
|
1791
|
+
"left",
|
|
1792
|
+
"center",
|
|
1793
|
+
"right"
|
|
1794
|
+
],
|
|
1795
|
+
"default": "left",
|
|
1796
|
+
"description": "Main content position. Secondary content sits opposite on desktop for left/right layouts, and below for centered or mobile layouts. Reading order always starts with the main content."
|
|
1797
|
+
},
|
|
1798
|
+
"calloutMaxWidth": {
|
|
1799
|
+
"type": "string",
|
|
1800
|
+
"description": "Optional CSS maximum width for the main callout, such as 28rem or 50%. Overrides the theme width for this Hero only; omit to keep the theme default. Remains constrained by the available container width. Does not change split-layout column proportions."
|
|
1801
|
+
},
|
|
1802
|
+
"boxed": {
|
|
1803
|
+
"type": "boolean",
|
|
1804
|
+
"default": true,
|
|
1805
|
+
"description": "Show the padded callout background. Disable for unboxed content directly over the hero background; ensure sufficient text contrast. Independent of overlay."
|
|
1806
|
+
},
|
|
1807
|
+
"backgroundPosition": {
|
|
1808
|
+
"type": "string",
|
|
1809
|
+
"description": "CSS background position for the image focal point, such as center, right center, or 70% 40%. Defaults to the stylesheet setting."
|
|
1810
|
+
},
|
|
1811
|
+
"headingLevel": {
|
|
1812
|
+
"type": "select",
|
|
1813
|
+
"options": [
|
|
1814
|
+
"h1",
|
|
1815
|
+
"h2",
|
|
1816
|
+
"h3",
|
|
1817
|
+
"h4",
|
|
1818
|
+
"h5"
|
|
1819
|
+
],
|
|
1820
|
+
"default": "h1",
|
|
1821
|
+
"description": "Main heading element, independent of visual size. Secondary content uses the next heading level."
|
|
1822
|
+
},
|
|
1823
|
+
"secondaryContent": {
|
|
1824
|
+
"type": "object",
|
|
1825
|
+
"description": "Optional unboxed supporting content: title, paragraph, and link. Stacks after the main content on mobile; use overlay or a suitable background for readable contrast.",
|
|
1826
|
+
"properties": {
|
|
1827
|
+
"title": {
|
|
1828
|
+
"type": "string",
|
|
1829
|
+
"description": "Supporting heading"
|
|
1830
|
+
},
|
|
1831
|
+
"paragraph": {
|
|
1832
|
+
"type": "string",
|
|
1833
|
+
"description": "Supporting description"
|
|
1834
|
+
},
|
|
1835
|
+
"link": {
|
|
1836
|
+
"type": "object",
|
|
1837
|
+
"description": "Optional secondary text link",
|
|
1838
|
+
"properties": {
|
|
1839
|
+
"href": {
|
|
1840
|
+
"type": "string",
|
|
1841
|
+
"description": "Destination URL"
|
|
1842
|
+
},
|
|
1843
|
+
"text": {
|
|
1844
|
+
"type": "string",
|
|
1845
|
+
"description": "Link text"
|
|
1846
|
+
}
|
|
1847
|
+
}
|
|
1848
|
+
}
|
|
1849
|
+
}
|
|
1850
|
+
},
|
|
1768
1851
|
"overlay": {
|
|
1769
1852
|
"type": "boolean",
|
|
1770
1853
|
"default": true,
|
|
1771
1854
|
"description": "When true, adds a semi-transparent dark overlay over the background image to improve text legibility"
|
|
1772
1855
|
},
|
|
1856
|
+
"overlayOpacity": {
|
|
1857
|
+
"type": "number",
|
|
1858
|
+
"description": "Optional black overlay opacity from 0 (transparent) to 1 (opaque), clamped to that range. Overrides the theme overlay color when set. Has no effect when overlay is false; omit to preserve the theme setting."
|
|
1859
|
+
},
|
|
1773
1860
|
"ariaLabel": {
|
|
1774
1861
|
"type": "string",
|
|
1775
1862
|
"description": "Accessible label for the section element (defaults to 'Introduction')"
|
|
@@ -1963,24 +2050,21 @@
|
|
|
1963
2050
|
"href": {
|
|
1964
2051
|
"type": "string",
|
|
1965
2052
|
"description": "Link to the agency's site."
|
|
2053
|
+
},
|
|
2054
|
+
"useThe": {
|
|
2055
|
+
"type": "boolean",
|
|
2056
|
+
"description": "Whether \"the\" precedes the name in the English disclaimer, e.g. \"the Department of...\". Default true. Has no effect on the Spanish disclaimer."
|
|
1966
2057
|
}
|
|
1967
2058
|
}
|
|
1968
2059
|
}
|
|
1969
2060
|
},
|
|
1970
|
-
"
|
|
2061
|
+
"avatarProps": {
|
|
1971
2062
|
"type": "array",
|
|
1972
|
-
"description": "
|
|
2063
|
+
"description": "Props for Avatar components rendered in the identifier masthead.",
|
|
1973
2064
|
"items": {
|
|
1974
2065
|
"type": "object",
|
|
1975
|
-
"description": "
|
|
2066
|
+
"description": "Avatar props, including image, initials, and icon variants.",
|
|
1976
2067
|
"component": "avatar",
|
|
1977
|
-
"omit": [
|
|
1978
|
-
"variant",
|
|
1979
|
-
"value",
|
|
1980
|
-
"tooltip",
|
|
1981
|
-
"className",
|
|
1982
|
-
"contentClassName"
|
|
1983
|
-
],
|
|
1984
2068
|
"properties": {
|
|
1985
2069
|
"shape": {
|
|
1986
2070
|
"type": "select",
|
|
@@ -4198,7 +4282,7 @@
|
|
|
4198
4282
|
},
|
|
4199
4283
|
"onChange": {
|
|
4200
4284
|
"type": "string",
|
|
4201
|
-
"description": "JavaScript function to call when the selected theme changes — applying the theme
|
|
4285
|
+
"description": "JavaScript function to call when the selected theme changes — applying the theme is the caller's responsibility. With @solexllc/usx-theme/themes, that's typically `document.documentElement.dataset.theme = value` (plus any persistence)."
|
|
4202
4286
|
},
|
|
4203
4287
|
"className": {
|
|
4204
4288
|
"type": "string",
|
package/package.json
CHANGED
package/src/contracts.js
CHANGED
|
@@ -41,10 +41,18 @@ export const componentContracts = {
|
|
|
41
41
|
"default": false,
|
|
42
42
|
"description": "Whether multiple accordion items can be expanded at the same time."
|
|
43
43
|
},
|
|
44
|
+
"iconPosition": {
|
|
45
|
+
"type": "select",
|
|
46
|
+
"options": [
|
|
47
|
+
"start",
|
|
48
|
+
"end"
|
|
49
|
+
],
|
|
50
|
+
"description": "Position of the expand/collapse icon. Omit to use the global USWDS or theme setting."
|
|
51
|
+
},
|
|
44
52
|
"className": {
|
|
45
53
|
"type": "string",
|
|
46
54
|
"default": "",
|
|
47
|
-
"description": "Additional CSS classes to apply to the accordion. Use
|
|
55
|
+
"description": "Additional CSS classes to apply to the accordion. Use iconPosition to set the icon position for this accordion. For live global theming, set --usx-accordion-icon-position to 1.25rem auto (start) or auto 1.25rem (end)."
|
|
48
56
|
}
|
|
49
57
|
}
|
|
50
58
|
},
|
|
@@ -311,6 +319,10 @@ export const componentContracts = {
|
|
|
311
319
|
"type": "string",
|
|
312
320
|
"description": "The custom aria label users can override."
|
|
313
321
|
},
|
|
322
|
+
"flagSrc": {
|
|
323
|
+
"type": "string",
|
|
324
|
+
"description": "URL for the decorative banner flag image. Defaults to img/us_flag_small.png under the configured asset base."
|
|
325
|
+
},
|
|
314
326
|
"tld": {
|
|
315
327
|
"type": "string",
|
|
316
328
|
"description": "The top level domain for the site. Defaults to `.gov`"
|
|
@@ -1733,6 +1745,14 @@ export const componentContracts = {
|
|
|
1733
1745
|
"className": {
|
|
1734
1746
|
"type": "string",
|
|
1735
1747
|
"description": "Additional classes"
|
|
1748
|
+
},
|
|
1749
|
+
"utilityContent": {
|
|
1750
|
+
"type": "slot",
|
|
1751
|
+
"description": "Rendered inline, to the left of the search box (in both header variants)."
|
|
1752
|
+
},
|
|
1753
|
+
"navEndContent": {
|
|
1754
|
+
"type": "slot",
|
|
1755
|
+
"description": "Rendered right-justified, in line with the primary nav links (extended header only)."
|
|
1736
1756
|
}
|
|
1737
1757
|
}
|
|
1738
1758
|
},
|
|
@@ -1780,11 +1800,78 @@ export const componentContracts = {
|
|
|
1780
1800
|
"type": "string",
|
|
1781
1801
|
"description": "URL of the background image applied via inline style"
|
|
1782
1802
|
},
|
|
1803
|
+
"contentPosition": {
|
|
1804
|
+
"type": "select",
|
|
1805
|
+
"options": [
|
|
1806
|
+
"left",
|
|
1807
|
+
"center",
|
|
1808
|
+
"right"
|
|
1809
|
+
],
|
|
1810
|
+
"default": "left",
|
|
1811
|
+
"description": "Main content position. Secondary content sits opposite on desktop for left/right layouts, and below for centered or mobile layouts. Reading order always starts with the main content."
|
|
1812
|
+
},
|
|
1813
|
+
"calloutMaxWidth": {
|
|
1814
|
+
"type": "string",
|
|
1815
|
+
"description": "Optional CSS maximum width for the main callout, such as 28rem or 50%. Overrides the theme width for this Hero only; omit to keep the theme default. Remains constrained by the available container width. Does not change split-layout column proportions."
|
|
1816
|
+
},
|
|
1817
|
+
"boxed": {
|
|
1818
|
+
"type": "boolean",
|
|
1819
|
+
"default": true,
|
|
1820
|
+
"description": "Show the padded callout background. Disable for unboxed content directly over the hero background; ensure sufficient text contrast. Independent of overlay."
|
|
1821
|
+
},
|
|
1822
|
+
"backgroundPosition": {
|
|
1823
|
+
"type": "string",
|
|
1824
|
+
"description": "CSS background position for the image focal point, such as center, right center, or 70% 40%. Defaults to the stylesheet setting."
|
|
1825
|
+
},
|
|
1826
|
+
"headingLevel": {
|
|
1827
|
+
"type": "select",
|
|
1828
|
+
"options": [
|
|
1829
|
+
"h1",
|
|
1830
|
+
"h2",
|
|
1831
|
+
"h3",
|
|
1832
|
+
"h4",
|
|
1833
|
+
"h5"
|
|
1834
|
+
],
|
|
1835
|
+
"default": "h1",
|
|
1836
|
+
"description": "Main heading element, independent of visual size. Secondary content uses the next heading level."
|
|
1837
|
+
},
|
|
1838
|
+
"secondaryContent": {
|
|
1839
|
+
"type": "object",
|
|
1840
|
+
"description": "Optional unboxed supporting content: title, paragraph, and link. Stacks after the main content on mobile; use overlay or a suitable background for readable contrast.",
|
|
1841
|
+
"properties": {
|
|
1842
|
+
"title": {
|
|
1843
|
+
"type": "string",
|
|
1844
|
+
"description": "Supporting heading"
|
|
1845
|
+
},
|
|
1846
|
+
"paragraph": {
|
|
1847
|
+
"type": "string",
|
|
1848
|
+
"description": "Supporting description"
|
|
1849
|
+
},
|
|
1850
|
+
"link": {
|
|
1851
|
+
"type": "object",
|
|
1852
|
+
"description": "Optional secondary text link",
|
|
1853
|
+
"properties": {
|
|
1854
|
+
"href": {
|
|
1855
|
+
"type": "string",
|
|
1856
|
+
"description": "Destination URL"
|
|
1857
|
+
},
|
|
1858
|
+
"text": {
|
|
1859
|
+
"type": "string",
|
|
1860
|
+
"description": "Link text"
|
|
1861
|
+
}
|
|
1862
|
+
}
|
|
1863
|
+
}
|
|
1864
|
+
}
|
|
1865
|
+
},
|
|
1783
1866
|
"overlay": {
|
|
1784
1867
|
"type": "boolean",
|
|
1785
1868
|
"default": true,
|
|
1786
1869
|
"description": "When true, adds a semi-transparent dark overlay over the background image to improve text legibility"
|
|
1787
1870
|
},
|
|
1871
|
+
"overlayOpacity": {
|
|
1872
|
+
"type": "number",
|
|
1873
|
+
"description": "Optional black overlay opacity from 0 (transparent) to 1 (opaque), clamped to that range. Overrides the theme overlay color when set. Has no effect when overlay is false; omit to preserve the theme setting."
|
|
1874
|
+
},
|
|
1788
1875
|
"ariaLabel": {
|
|
1789
1876
|
"type": "string",
|
|
1790
1877
|
"description": "Accessible label for the section element (defaults to 'Introduction')"
|
|
@@ -1978,24 +2065,21 @@ export const componentContracts = {
|
|
|
1978
2065
|
"href": {
|
|
1979
2066
|
"type": "string",
|
|
1980
2067
|
"description": "Link to the agency's site."
|
|
2068
|
+
},
|
|
2069
|
+
"useThe": {
|
|
2070
|
+
"type": "boolean",
|
|
2071
|
+
"description": "Whether \"the\" precedes the name in the English disclaimer, e.g. \"the Department of...\". Default true. Has no effect on the Spanish disclaimer."
|
|
1981
2072
|
}
|
|
1982
2073
|
}
|
|
1983
2074
|
}
|
|
1984
2075
|
},
|
|
1985
|
-
"
|
|
2076
|
+
"avatarProps": {
|
|
1986
2077
|
"type": "array",
|
|
1987
|
-
"description": "
|
|
2078
|
+
"description": "Props for Avatar components rendered in the identifier masthead.",
|
|
1988
2079
|
"items": {
|
|
1989
2080
|
"type": "object",
|
|
1990
|
-
"description": "
|
|
2081
|
+
"description": "Avatar props, including image, initials, and icon variants.",
|
|
1991
2082
|
"component": "avatar",
|
|
1992
|
-
"omit": [
|
|
1993
|
-
"variant",
|
|
1994
|
-
"value",
|
|
1995
|
-
"tooltip",
|
|
1996
|
-
"className",
|
|
1997
|
-
"contentClassName"
|
|
1998
|
-
],
|
|
1999
2083
|
"properties": {
|
|
2000
2084
|
"shape": {
|
|
2001
2085
|
"type": "select",
|
|
@@ -4213,7 +4297,7 @@ export const componentContracts = {
|
|
|
4213
4297
|
},
|
|
4214
4298
|
"onChange": {
|
|
4215
4299
|
"type": "string",
|
|
4216
|
-
"description": "JavaScript function to call when the selected theme changes — applying the theme
|
|
4300
|
+
"description": "JavaScript function to call when the selected theme changes — applying the theme is the caller's responsibility. With @solexllc/usx-theme/themes, that's typically `document.documentElement.dataset.theme = value` (plus any persistence)."
|
|
4217
4301
|
},
|
|
4218
4302
|
"className": {
|
|
4219
4303
|
"type": "string",
|