@ons/design-system 74.0.0-next.2 → 74.0.0-next.4
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 +13 -3
- 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/header/_macro.njk +7 -3
- package/components/header/_macro.spec.js +27 -0
- package/components/hero/example-hero-dark-with-external-breadcrumbs.njk +17 -21
- 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.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 +57 -44
- package/package.json +1 -1
- package/scss/objects/_page.scss +1 -1
- package/scss/objects/_spacing.scss +0 -4
package/layout/_template.njk
CHANGED
|
@@ -160,55 +160,68 @@
|
|
|
160
160
|
{% endif %}
|
|
161
161
|
{% endblock %}
|
|
162
162
|
{% block header %}
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
{% block
|
|
163
|
+
<header>
|
|
164
|
+
{{
|
|
165
|
+
onsHeader({
|
|
166
|
+
"wide": pageConfig.wide,
|
|
167
|
+
"fullWidth": pageConfig.fullWidth,
|
|
168
|
+
"language": pageConfig.header.language,
|
|
169
|
+
"button": pageConfig.header.signoutButton,
|
|
170
|
+
"toggleNavigationButton": pageConfig.header.toggleNavigationButton,
|
|
171
|
+
"navigation": pageConfig.header.navigation,
|
|
172
|
+
"siteSearchAutosuggest": pageConfig.header.siteSearchAutosuggest,
|
|
173
|
+
"browserBanner": pageConfig.header.browserBanner,
|
|
174
|
+
"phase": pageConfig.header.phase,
|
|
175
|
+
"serviceLinks": pageConfig.header.serviceLinks,
|
|
176
|
+
"variants": pageConfig.header.variants,
|
|
177
|
+
"classes": pageConfig.header.classes,
|
|
178
|
+
"mastheadLogo": pageConfig.header.mastheadLogo,
|
|
179
|
+
"mastheadLogoUrl": pageConfig.header.mastheadLogoUrl,
|
|
180
|
+
"titleUrl": pageConfig.header.titleUrl,
|
|
181
|
+
"title": pageConfig.header.title | default(pageConfig.title),
|
|
182
|
+
"description": pageConfig.header.description,
|
|
183
|
+
"titleAsH1": pageConfig.header.titleAsH1,
|
|
184
|
+
"titleLogo": pageConfig.header.titleLogo,
|
|
185
|
+
"mastheadLogoAltText": pageConfig.header.mastheadLogoAltText,
|
|
186
|
+
"menuLinks": pageConfig.header.menuLinks,
|
|
187
|
+
"searchLinks": pageConfig.header.searchLinks,
|
|
188
|
+
"useDivForRootElement": true
|
|
189
|
+
})
|
|
190
|
+
}}
|
|
191
|
+
|
|
192
|
+
{% block breadcrumbs %}
|
|
193
193
|
{% if pageConfig.breadcrumbs %}
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
194
|
+
{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
|
|
195
|
+
{{
|
|
196
|
+
onsBreadcrumbs({
|
|
197
|
+
"id": pageConfig.breadcrumbs.id,
|
|
198
|
+
"ariaLabel": pageConfig.breadcrumbs.ariaLabel,
|
|
199
|
+
"itemsList": pageConfig.breadcrumbs.itemsList,
|
|
200
|
+
"wide": pageConfig.wide,
|
|
201
|
+
"fullWidth": pageConfig.fullWidth,
|
|
202
|
+
"variant": pageConfig.breadcrumbs.variant
|
|
203
|
+
})
|
|
204
|
+
}}
|
|
202
205
|
{% endif %}
|
|
203
206
|
{% endblock %}
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
207
|
+
</header>
|
|
208
|
+
{% endblock %}
|
|
209
|
+
{% block preMain %}
|
|
210
|
+
{% endblock %}
|
|
211
|
+
{% block pageContent %}
|
|
212
|
+
<main id="main-content">
|
|
213
|
+
{% block hero %}
|
|
214
|
+
{% endblock %}
|
|
215
|
+
<div class="ons-page__container ons-container{{ containerClasses }}">
|
|
216
|
+
<div class="ons-grid">
|
|
217
|
+
<div class="ons-grid__col ons-col-{{ pageColNumber }}@m{{ pageColClasses }}">
|
|
218
|
+
<div class="ons-page__main{{ mainColClasses }}">
|
|
219
|
+
{% block mainContent %}{% endblock %}
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
209
222
|
</div>
|
|
210
223
|
</div>
|
|
211
|
-
</
|
|
224
|
+
</main>
|
|
212
225
|
{% endblock %}
|
|
213
226
|
</div>
|
|
214
227
|
{% 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
|
|