@chassis-ui/docs 0.7.0 → 0.9.0-next.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 +13 -0
- package/README.md +50 -8
- package/UPGRADING.md +123 -0
- package/package.json +13 -13
- package/src/cli/assets.js +57 -9
- package/src/cli/main.js +32 -5
- package/src/components/DocsSidebar.astro +100 -102
- package/src/components/FeatureCard.astro +5 -7
- package/src/components/TableOfContents.astro +10 -12
- package/src/components/ThemeToggler.astro +5 -2
- package/src/components/shortcodes/Blockquote.astro +11 -13
- package/src/components/shortcodes/CSSOnly.astro +3 -3
- package/src/components/shortcodes/Code.astro +104 -108
- package/src/components/shortcodes/DeprecatedIn.astro +1 -3
- package/src/components/shortcodes/Example.astro +29 -33
- package/src/components/shortcodes/Icon.astro +19 -21
- package/src/components/shortcodes/InFigma.astro +3 -3
- package/src/components/shortcodes/Placeholder.astro +14 -16
- package/src/components/shortcodes/ResizableExample.astro +3 -5
- package/src/layouts/BaseLayout.astro +14 -20
- package/src/layouts/DocsLayout.astro +51 -52
- package/src/layouts/footer/Consent.astro +18 -20
- package/src/layouts/footer/Footer.astro +60 -24
- package/src/layouts/head/Head.astro +7 -10
- package/src/layouts/header/Navigation.astro +71 -60
- package/src/layouts/header/SearchDialog.astro +10 -4
- package/src/layouts/header/SearchTrigger.astro +2 -4
- package/src/layouts/header/Skippy.astro +8 -8
- package/src/scss/_content.scss +1 -1
|
@@ -35,23 +35,21 @@ const isActive = (path: string) => {
|
|
|
35
35
|
|
|
36
36
|
<header class="navbar translucent lg:navbar-expand cxd-navbar sticky-top">
|
|
37
37
|
<nav class="container 2xl" aria-label="Site navigation">
|
|
38
|
-
{
|
|
39
|
-
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
)
|
|
54
|
-
}
|
|
38
|
+
{layout === 'docs' && (
|
|
39
|
+
<div class="cxd-navbar-toggle">
|
|
40
|
+
<button
|
|
41
|
+
class="button icon-only navbar-toggler"
|
|
42
|
+
type="button"
|
|
43
|
+
data-cx-toggle="drawer"
|
|
44
|
+
data-cx-target="#cxdSidebar"
|
|
45
|
+
aria-controls="cxdSidebar"
|
|
46
|
+
aria-label="Toggle docs navigation"
|
|
47
|
+
>
|
|
48
|
+
<Icon name="bars-solid" class="icon-lg" />
|
|
49
|
+
<span class="d-none lg:d-inline fs-6 pe-2xs">Browse</span>
|
|
50
|
+
</button>
|
|
51
|
+
</div>
|
|
52
|
+
)}
|
|
55
53
|
{layout !== 'docs' && <div class="lg:d-none" style="width: 4.25rem;" />}
|
|
56
54
|
|
|
57
55
|
<a class="navbar-brand m-0 py-sm lg:me-md" href="/" aria-label="Chassis">
|
|
@@ -59,7 +57,9 @@ const isActive = (path: string) => {
|
|
|
59
57
|
</a>
|
|
60
58
|
|
|
61
59
|
<div class="d-flex">
|
|
62
|
-
<div class="cxd-search"
|
|
60
|
+
<div class="cxd-search">
|
|
61
|
+
<SearchTrigger placeholder="Search docs…" />
|
|
62
|
+
</div>
|
|
63
63
|
|
|
64
64
|
<button
|
|
65
65
|
class="button icon-only navbar-toggler"
|
|
@@ -79,65 +79,76 @@ const isActive = (path: string) => {
|
|
|
79
79
|
aria-labelledby="cxdNavbarOffcanvasLabel"
|
|
80
80
|
>
|
|
81
81
|
<div class="drawer-header">
|
|
82
|
-
<h2 class="drawer-title" id="cxdNavbarOffcanvasLabel">
|
|
82
|
+
<h2 class="drawer-title" id="cxdNavbarOffcanvasLabel">
|
|
83
|
+
Chassis
|
|
84
|
+
</h2>
|
|
83
85
|
<button
|
|
84
86
|
type="button"
|
|
85
87
|
class="close-button close-button-white"
|
|
86
88
|
data-cx-dismiss="drawer"
|
|
87
89
|
aria-label="Close"
|
|
88
|
-
data-cx-target="#cxdNavbar"
|
|
90
|
+
data-cx-target="#cxdNavbar"
|
|
91
|
+
></button>
|
|
89
92
|
</div>
|
|
90
93
|
|
|
91
94
|
<hr class="lg:d-none m-0" />
|
|
92
95
|
<div class="drawer-body lg:p-0">
|
|
93
|
-
<ul
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
<NavLink active={isActive('/figma')} href="/figma">
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
<NavLink active={isActive('/
|
|
101
|
-
|
|
96
|
+
<ul class="navbar-nav d-grid grid-cols-2 lg:d-flex flex-row flex-wrap cxd-navbar-nav mx-0 lg:mx-md">
|
|
97
|
+
<NavLink active={isActive('/tokens')} href="/tokens">
|
|
98
|
+
Tokens
|
|
99
|
+
</NavLink>
|
|
100
|
+
<NavLink active={isActive('/figma')} href="/figma">
|
|
101
|
+
Figma
|
|
102
|
+
</NavLink>
|
|
103
|
+
<NavLink active={isActive('/css')} href="/css">
|
|
104
|
+
CSS
|
|
105
|
+
</NavLink>
|
|
106
|
+
<NavLink active={isActive('/react')} href="/react">
|
|
107
|
+
React
|
|
108
|
+
</NavLink>
|
|
109
|
+
<NavLink active={isActive('/assets')} href="/assets">
|
|
110
|
+
Assets
|
|
111
|
+
</NavLink>
|
|
112
|
+
<NavLink active={isActive('/icons')} href="/icons">
|
|
113
|
+
Icons
|
|
114
|
+
</NavLink>
|
|
102
115
|
<li class="nav-item col-span-full lg:d-flex">
|
|
103
116
|
<div class="vr d-none lg:d-flex my-auto lg:mx-sm"></div>
|
|
104
117
|
<hr class="lg:d-none" />
|
|
105
118
|
</li>
|
|
106
|
-
<NavLink active={isActive('/blog')} href="/blog">
|
|
107
|
-
|
|
119
|
+
<NavLink active={isActive('/blog')} href="/blog">
|
|
120
|
+
Blog
|
|
121
|
+
</NavLink>
|
|
122
|
+
<NavLink active={isActive('/examples')} href="/examples">
|
|
123
|
+
Examples
|
|
124
|
+
</NavLink>
|
|
108
125
|
</ul>
|
|
109
126
|
|
|
110
127
|
<hr class="lg:d-none m-0" />
|
|
111
128
|
|
|
112
|
-
<ul
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
>
|
|
136
|
-
<Icon name="github-brand" title="GitHub" />
|
|
137
|
-
<small class="lg:d-none ms-xs">GitHub</small>
|
|
138
|
-
</NavLink>
|
|
139
|
-
)
|
|
140
|
-
}
|
|
129
|
+
<ul class="navbar-nav d-grid grid-cols-2 lg:d-flex flex-row flex-wrap lg:ms-auto align-items-center">
|
|
130
|
+
{figmaHandle && (
|
|
131
|
+
<NavLink
|
|
132
|
+
class="px-0 lg:px-xs"
|
|
133
|
+
href={`https://figma.com/@${figmaHandle}`}
|
|
134
|
+
target="_blank"
|
|
135
|
+
rel="noopener"
|
|
136
|
+
>
|
|
137
|
+
<Icon name="figma-brand" title="Figma" />
|
|
138
|
+
<small class="lg:d-none ms-xs">Figma Community</small>
|
|
139
|
+
</NavLink>
|
|
140
|
+
)}
|
|
141
|
+
{githubOrg && (
|
|
142
|
+
<NavLink
|
|
143
|
+
class="px-0 lg:px-xs"
|
|
144
|
+
href={`https://github.com/${githubOrg}`}
|
|
145
|
+
target="_blank"
|
|
146
|
+
rel="noopener"
|
|
147
|
+
>
|
|
148
|
+
<Icon name="github-brand" title="GitHub" />
|
|
149
|
+
<small class="lg:d-none ms-xs">GitHub</small>
|
|
150
|
+
</NavLink>
|
|
151
|
+
)}
|
|
141
152
|
<li class="nav-item col-span-full">
|
|
142
153
|
<div class="vr d-none lg:d-flex h-100 lg:mx-2xs"></div>
|
|
143
154
|
<hr class="lg:d-none" />
|
|
@@ -45,7 +45,9 @@ const { id = 'cxdSearchDialog', placeholder = 'Search docs…' } = Astro.props
|
|
|
45
45
|
</div>
|
|
46
46
|
</cxd-search-input>
|
|
47
47
|
<cxd-search-filter class="cxd-search-filter" hidden>
|
|
48
|
-
<label class="visually-hidden" for={`${id}-filter`}>
|
|
48
|
+
<label class="visually-hidden" for={`${id}-filter`}>
|
|
49
|
+
Search in
|
|
50
|
+
</label>
|
|
49
51
|
<select id={`${id}-filter`} class="form-input cxd-search-filter-select"></select>
|
|
50
52
|
</cxd-search-filter>
|
|
51
53
|
<button
|
|
@@ -53,8 +55,10 @@ const { id = 'cxdSearchDialog', placeholder = 'Search docs…' } = Astro.props
|
|
|
53
55
|
class="close-button"
|
|
54
56
|
aria-label="Close"
|
|
55
57
|
data-cx-dismiss="dialog"
|
|
56
|
-
data-cx-target={`#${id}`}
|
|
58
|
+
data-cx-target={`#${id}`}
|
|
57
59
|
>
|
|
60
|
+
×
|
|
61
|
+
</button>
|
|
58
62
|
</search>
|
|
59
63
|
|
|
60
64
|
<div class="modal-body cxd-search-body">
|
|
@@ -65,11 +69,13 @@ const { id = 'cxdSearchDialog', placeholder = 'Search docs…' } = Astro.props
|
|
|
65
69
|
<li class="list-item">
|
|
66
70
|
<kbd class="cxd-search-shortcut-key font-2xs">⮐</kbd>
|
|
67
71
|
<span class="cxd-search-shortcut-label">to select</span>
|
|
68
|
-
</li
|
|
72
|
+
</li>
|
|
73
|
+
<li class="list-item">
|
|
69
74
|
<kbd class="cxd-search-shortcut-key font-sm">↑</kbd>
|
|
70
75
|
<kbd class="cxd-search-shortcut-key font-sm">↓</kbd>
|
|
71
76
|
<span class="cxd-search-shortcut-label">to navigate</span>
|
|
72
|
-
</li
|
|
77
|
+
</li>
|
|
78
|
+
<li class="list-item">
|
|
73
79
|
<kbd class="cxd-search-shortcut-key font-xs">ESC</kbd>
|
|
74
80
|
<span class="cxd-search-shortcut-label">to close</span>
|
|
75
81
|
</li>
|
|
@@ -32,10 +32,8 @@ const { class: className, placeholder = 'Search docs…', target = '#cxdSearchDi
|
|
|
32
32
|
>
|
|
33
33
|
<Icon name="search-solid" size={16} />
|
|
34
34
|
<span class="cxd-search-trigger-label">{placeholder}</span>
|
|
35
|
-
{
|
|
36
|
-
/* Shortcut hint is empty + hidden until search.js detects the platform and
|
|
35
|
+
{/* Shortcut hint is empty + hidden until search.js detects the platform and
|
|
37
36
|
fills in either ⌘K (Mac) or Ctrl K (other). Without JS the shortcut
|
|
38
|
-
itself doesn't work, so showing nothing is more honest than guessing. */
|
|
39
|
-
}
|
|
37
|
+
itself doesn't work, so showing nothing is more honest than guessing. */}
|
|
40
38
|
<span class="cxd-search-trigger-shortcut" hidden></span>
|
|
41
39
|
</button>
|
|
@@ -17,13 +17,13 @@ const { layout } = Astro.props
|
|
|
17
17
|
|
|
18
18
|
<div class="skippy visually-hidden-focusable overflow-hidden">
|
|
19
19
|
<div class="container xl">
|
|
20
|
-
<a class="d-inline-flex p-xs m-xs" href="#content">
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
20
|
+
<a class="d-inline-flex p-xs m-xs" href="#content">
|
|
21
|
+
Skip to main content
|
|
22
|
+
</a>
|
|
23
|
+
{layout === 'docs' && (
|
|
24
|
+
<a class="d-none d-md-inline-flex p-xs m-xs" href="#cxd-docs-nav">
|
|
25
|
+
Skip to docs navigation
|
|
26
|
+
</a>
|
|
27
|
+
)}
|
|
28
28
|
</div>
|
|
29
29
|
</div>
|