@ons/design-system 73.12.0 → 74.0.0-next.10
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/README.md +12 -2
- package/components/access-code/example-access-code-error.njk +1 -1
- package/components/access-code/example-access-code.njk +1 -1
- package/components/back-to-top/example-full-page-back-to-top.njk +1 -1
- package/components/breadcrumbs/_breadcrumbs.scss +4 -7
- package/components/breadcrumbs/_macro.njk +29 -25
- package/components/breadcrumbs/_macro.spec.js +39 -0
- package/components/breadcrumbs/example-breadcrumbs-wide.njk +52 -0
- package/components/header/_macro.njk +7 -3
- package/components/header/_macro.spec.js +27 -0
- package/components/hero/_macro.njk +3 -2
- package/components/hero/_macro.spec.js +36 -0
- package/components/hero/example-hero-dark-wide.njk +17 -0
- package/components/hero/example-hero-dark-with-external-breadcrumbs.njk +17 -21
- package/components/hero/example-hero-default-full-width.njk +16 -0
- package/components/hero/example-hero-default-with-external-breadcrumbs.njk +165 -169
- package/components/hero/example-hero-grey-with-external-breadcrumbs.njk +207 -211
- package/components/hero/example-hero-navy-blue-with-external-breadcrumbs.njk +163 -167
- package/components/hero/example-hero-pale-blue-with-external-breadcrumbs.njk +165 -169
- package/components/question/example-question-ccs.njk +1 -1
- package/components/question/example-question-fieldset.njk +1 -1
- package/components/question/example-question-interviewer-note.njk +1 -1
- package/components/question/example-question-no-fieldset.njk +1 -1
- package/components/relationships/example-relationships-error.njk +1 -1
- package/components/relationships/example-relationships-you.njk +1 -1
- package/components/relationships/example-relationships.njk +1 -1
- package/components/table-of-contents/example-table-of-contents-sticky-full-page-ordered.njk +1 -1
- package/components/table-of-contents/example-table-of-contents-sticky-full-page.njk +1 -1
- package/components/table-of-contents/table-of-contents.spec.js +4 -5
- package/css/main.css +1 -1
- package/layout/_template.njk +60 -47
- package/package.json +1 -1
- package/scss/objects/_page.scss +1 -1
- package/scss/objects/_spacing.scss +0 -4
package/layout/_template.njk
CHANGED
|
@@ -132,8 +132,7 @@
|
|
|
132
132
|
<link rel="manifest" href="{{ assetsUrl }}/favicons/manifest.json" />
|
|
133
133
|
{% endblock %}
|
|
134
134
|
|
|
135
|
-
{% block head %}
|
|
136
|
-
{% endblock %}
|
|
135
|
+
{% block head %}{% endblock %}
|
|
137
136
|
</head>
|
|
138
137
|
<body {% if pageConfig.bodyClasses %}class="{{ pageConfig.bodyClasses }}"{% endif %}>
|
|
139
138
|
<!-- prettier-ignore-start -->
|
|
@@ -166,56 +165,70 @@
|
|
|
166
165
|
{% endif %}
|
|
167
166
|
{% endblock %}
|
|
168
167
|
{% block header %}
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
{% block
|
|
168
|
+
<header>
|
|
169
|
+
{{
|
|
170
|
+
onsHeader({
|
|
171
|
+
"wide": pageConfig.wide,
|
|
172
|
+
"fullWidth": pageConfig.fullWidth,
|
|
173
|
+
"language": pageConfig.header.language,
|
|
174
|
+
"button": pageConfig.header.signoutButton,
|
|
175
|
+
"toggleNavigationButton": pageConfig.header.toggleNavigationButton,
|
|
176
|
+
"navigation": pageConfig.header.navigation,
|
|
177
|
+
"siteSearchAutosuggest": pageConfig.header.siteSearchAutosuggest,
|
|
178
|
+
"browserBanner": pageConfig.header.browserBanner,
|
|
179
|
+
"phase": pageConfig.header.phase,
|
|
180
|
+
"serviceLinks": pageConfig.header.serviceLinks,
|
|
181
|
+
"variants": pageConfig.header.variants,
|
|
182
|
+
"classes": pageConfig.header.classes,
|
|
183
|
+
"mastheadLogo": pageConfig.header.mastheadLogo,
|
|
184
|
+
"mastheadLogoUrl": pageConfig.header.mastheadLogoUrl,
|
|
185
|
+
"titleUrl": pageConfig.header.titleUrl,
|
|
186
|
+
"title": pageConfig.header.title | default(pageConfig.title),
|
|
187
|
+
"description": pageConfig.header.description,
|
|
188
|
+
"titleAsH1": pageConfig.header.titleAsH1,
|
|
189
|
+
"titleLogo": pageConfig.header.titleLogo,
|
|
190
|
+
"mastheadLogoAltText": pageConfig.header.mastheadLogoAltText,
|
|
191
|
+
"menuLinks": pageConfig.header.menuLinks,
|
|
192
|
+
"searchLinks": pageConfig.header.searchLinks,
|
|
193
|
+
"search": pageConfig.header.search,
|
|
194
|
+
"useDivForRootElement": true
|
|
195
|
+
})
|
|
196
|
+
}}
|
|
197
|
+
|
|
198
|
+
{% block preBreadcrumbs %}{% endblock %}
|
|
199
|
+
{% block breadcrumbs %}
|
|
200
200
|
{% if pageConfig.breadcrumbs %}
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
201
|
+
{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
|
|
202
|
+
{{
|
|
203
|
+
onsBreadcrumbs({
|
|
204
|
+
"id": pageConfig.breadcrumbs.id,
|
|
205
|
+
"ariaLabel": pageConfig.breadcrumbs.ariaLabel,
|
|
206
|
+
"itemsList": pageConfig.breadcrumbs.itemsList,
|
|
207
|
+
"wide": pageConfig.wide,
|
|
208
|
+
"fullWidth": pageConfig.fullWidth,
|
|
209
|
+
"variant": pageConfig.breadcrumbs.variant
|
|
210
|
+
})
|
|
211
|
+
}}
|
|
209
212
|
{% endif %}
|
|
210
213
|
{% endblock %}
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
214
|
+
</header>
|
|
215
|
+
{% endblock %}
|
|
216
|
+
{% block preMain %}{% endblock %}
|
|
217
|
+
{% block pageContent %}
|
|
218
|
+
<main id="main-content">
|
|
219
|
+
{% block hero %}{% endblock %}
|
|
220
|
+
{% block postHero %}{% endblock %}
|
|
221
|
+
<div class="ons-page__container ons-container{{ containerClasses }}">
|
|
222
|
+
<div class="ons-grid">
|
|
223
|
+
<div class="ons-grid__col ons-col-{{ pageColNumber }}@m{{ pageColClasses }}">
|
|
224
|
+
<div class="ons-page__main{{ mainColClasses }}">
|
|
225
|
+
{% block mainContent %}{% endblock %}
|
|
226
|
+
{% block postMainContent %}{% endblock %}
|
|
227
|
+
</div>
|
|
228
|
+
</div>
|
|
216
229
|
</div>
|
|
217
230
|
</div>
|
|
218
|
-
</
|
|
231
|
+
</main>
|
|
219
232
|
{% endblock %}
|
|
220
233
|
</div>
|
|
221
234
|
{% block preFooter %}{% endblock %}
|
package/package.json
CHANGED
package/scss/objects/_page.scss
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
// Adjust margin-top when .ons-page__main contains .ons-panel--error
|
|
26
|
-
.ons-breadcrumbs ~ .ons-grid .ons-grid__col .ons-page__main:has(.ons-panel--error) {
|
|
26
|
+
header:has(.ons-breadcrumbs) ~ main .ons-grid .ons-grid__col .ons-page__main:has(.ons-panel--error) {
|
|
27
27
|
margin-top: 1rem;
|
|
28
28
|
}
|
|
29
29
|
|