@ons/design-system 72.1.1 → 72.1.2
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/components/button/_button.scss +1 -1
- package/components/description-list/_description-list.scss +40 -9
- package/components/description-list/_macro.njk +20 -12
- package/components/description-list/_macro.spec.js +11 -1
- package/components/description-list/example-inline-description-list.njk +58 -0
- package/components/header/_macro.njk +92 -90
- package/components/header/_macro.spec.js +10 -0
- package/components/header/example-header-basic.njk +11 -0
- package/components/hero/_hero.scss +239 -2
- package/components/hero/_macro.njk +7 -0
- package/components/hero/_macro.spec.js +5 -0
- package/components/hero/example-hero-navy-blue.njk +14 -0
- package/components/tabs/_tabs.scss +1 -1
- package/css/main.css +1 -1
- package/package.json +1 -1
- package/scss/vars/_colors.scss +2 -0
|
@@ -10,6 +10,24 @@
|
|
|
10
10
|
background-color: var(--ons-color-hero-bg-dark);
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
+
&--navy-blue {
|
|
14
|
+
background-color: var(--ons-color-navy-blue);
|
|
15
|
+
&::before {
|
|
16
|
+
content: '';
|
|
17
|
+
background-color: var(--ons-color-navy-blue-light);
|
|
18
|
+
border-radius: 0 0 50% 50%;
|
|
19
|
+
inset: 0;
|
|
20
|
+
left: -40%;
|
|
21
|
+
position: absolute;
|
|
22
|
+
width: 150%;
|
|
23
|
+
@include mq(l) {
|
|
24
|
+
border-radius: 0 0 300% 150%;
|
|
25
|
+
left: 0;
|
|
26
|
+
width: 100%;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
13
31
|
&__container {
|
|
14
32
|
align-items: center;
|
|
15
33
|
display: flex;
|
|
@@ -25,8 +43,8 @@
|
|
|
25
43
|
height: 100%;
|
|
26
44
|
}
|
|
27
45
|
|
|
28
|
-
&__text {
|
|
29
|
-
|
|
46
|
+
&__text:has(+ .ons-btn) {
|
|
47
|
+
margin-bottom: 2rem;
|
|
30
48
|
}
|
|
31
49
|
|
|
32
50
|
&__pre-title {
|
|
@@ -62,4 +80,223 @@
|
|
|
62
80
|
}
|
|
63
81
|
}
|
|
64
82
|
}
|
|
83
|
+
&--navy-blue & {
|
|
84
|
+
&__details {
|
|
85
|
+
color: var(--ons-color-text-inverse);
|
|
86
|
+
padding: 2rem 0 6rem;
|
|
87
|
+
@include mq(l) {
|
|
88
|
+
padding: 4rem 0;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&__circle-1 {
|
|
93
|
+
@include mq(l) {
|
|
94
|
+
background-color: var(--ons-color-spring-green);
|
|
95
|
+
border-radius: 50%;
|
|
96
|
+
height: 59px;
|
|
97
|
+
position: absolute;
|
|
98
|
+
right: 289px;
|
|
99
|
+
top: -11px;
|
|
100
|
+
width: 59px;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&__circle-2 {
|
|
105
|
+
@include mq(l) {
|
|
106
|
+
background-color: var(--ons-color-white);
|
|
107
|
+
border-radius: 50%;
|
|
108
|
+
position: absolute;
|
|
109
|
+
height: 30px;
|
|
110
|
+
right: 193px;
|
|
111
|
+
top: 11px;
|
|
112
|
+
width: 30px;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
&__circle-3 {
|
|
117
|
+
@include mq(l) {
|
|
118
|
+
height: 60px;
|
|
119
|
+
right: 112px;
|
|
120
|
+
top: 25px;
|
|
121
|
+
width: 60px;
|
|
122
|
+
background-color: var(--ons-color-white);
|
|
123
|
+
border-radius: 50%;
|
|
124
|
+
position: absolute;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
&__circle-4 {
|
|
129
|
+
@include mq(l) {
|
|
130
|
+
background-color: var(--ons-color-white);
|
|
131
|
+
border-radius: 50%;
|
|
132
|
+
height: 60px;
|
|
133
|
+
position: absolute;
|
|
134
|
+
right: 208px;
|
|
135
|
+
top: 80px;
|
|
136
|
+
width: 60px;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
&::before {
|
|
140
|
+
@include mq(l) {
|
|
141
|
+
background-color: var(--ons-color-ocean-blue);
|
|
142
|
+
border-radius: 50%;
|
|
143
|
+
content: '';
|
|
144
|
+
height: 100%;
|
|
145
|
+
left: 0;
|
|
146
|
+
opacity: 0.4;
|
|
147
|
+
position: absolute;
|
|
148
|
+
top: 0;
|
|
149
|
+
width: 100%;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
&__circle-5 {
|
|
155
|
+
@include mq(l) {
|
|
156
|
+
background-color: var(--ons-color-white);
|
|
157
|
+
border-radius: 50%;
|
|
158
|
+
height: 14px;
|
|
159
|
+
position: absolute;
|
|
160
|
+
right: 222px;
|
|
161
|
+
top: 187px;
|
|
162
|
+
width: 14px;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
&::before {
|
|
166
|
+
@include mq(l) {
|
|
167
|
+
background-color: var(--ons-color-sky-blue);
|
|
168
|
+
border-radius: 50%;
|
|
169
|
+
content: '';
|
|
170
|
+
height: 100%;
|
|
171
|
+
left: 0;
|
|
172
|
+
opacity: 0.7;
|
|
173
|
+
position: absolute;
|
|
174
|
+
top: 0;
|
|
175
|
+
width: 100%;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
&__circle-6 {
|
|
181
|
+
@include mq(l) {
|
|
182
|
+
background-color: var(--ons-color-spring-green);
|
|
183
|
+
border-radius: 50%;
|
|
184
|
+
height: 15px;
|
|
185
|
+
position: absolute;
|
|
186
|
+
right: 135px;
|
|
187
|
+
top: 188px;
|
|
188
|
+
width: 15px;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
&__circle-7 {
|
|
193
|
+
@include mq(l) {
|
|
194
|
+
background-color: var(--ons-color-white);
|
|
195
|
+
border-radius: 50%;
|
|
196
|
+
height: 60px;
|
|
197
|
+
position: absolute;
|
|
198
|
+
right: 24px;
|
|
199
|
+
bottom: 92px;
|
|
200
|
+
width: 60px;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
&::before {
|
|
204
|
+
@include mq(l) {
|
|
205
|
+
background-color: var(--ons-color-night-blue);
|
|
206
|
+
border-radius: 50%;
|
|
207
|
+
content: '';
|
|
208
|
+
height: 100%;
|
|
209
|
+
left: 0;
|
|
210
|
+
opacity: 0.7;
|
|
211
|
+
position: absolute;
|
|
212
|
+
top: 0;
|
|
213
|
+
width: 100%;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
&__circle-8 {
|
|
219
|
+
@include mq(l) {
|
|
220
|
+
background-color: var(--ons-color-white);
|
|
221
|
+
border-radius: 50%;
|
|
222
|
+
bottom: 70px;
|
|
223
|
+
height: 15px;
|
|
224
|
+
position: absolute;
|
|
225
|
+
right: 275px;
|
|
226
|
+
width: 15px;
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
&__circle-9 {
|
|
231
|
+
background-color: var(--ons-color-spring-green);
|
|
232
|
+
border-radius: 50%;
|
|
233
|
+
bottom: 28px;
|
|
234
|
+
position: absolute;
|
|
235
|
+
right: 15px;
|
|
236
|
+
width: 40px;
|
|
237
|
+
height: 40px;
|
|
238
|
+
@include mq(l) {
|
|
239
|
+
bottom: 40px;
|
|
240
|
+
height: 30px;
|
|
241
|
+
position: absolute;
|
|
242
|
+
right: 215px;
|
|
243
|
+
width: 30px;
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
&__circle-10 {
|
|
248
|
+
@include mq(l) {
|
|
249
|
+
background-color: var(--ons-color-white);
|
|
250
|
+
border-radius: 50%;
|
|
251
|
+
bottom: 63px;
|
|
252
|
+
height: 15px;
|
|
253
|
+
position: absolute;
|
|
254
|
+
right: 120px;
|
|
255
|
+
width: 15px;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
&::before {
|
|
259
|
+
@include mq(l) {
|
|
260
|
+
background-color: var(--ons-color-aqua-teal);
|
|
261
|
+
border-radius: 50%;
|
|
262
|
+
content: '';
|
|
263
|
+
height: 100%;
|
|
264
|
+
left: 0;
|
|
265
|
+
opacity: 0.4;
|
|
266
|
+
position: absolute;
|
|
267
|
+
top: 0;
|
|
268
|
+
width: 100%;
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
&__circle-11 {
|
|
274
|
+
background-color: var(--ons-color-sky-blue);
|
|
275
|
+
border-radius: 50%;
|
|
276
|
+
height: 14px;
|
|
277
|
+
width: 14px;
|
|
278
|
+
position: absolute;
|
|
279
|
+
bottom: -7px;
|
|
280
|
+
right: 50px;
|
|
281
|
+
@include mq(l) {
|
|
282
|
+
bottom: 33px;
|
|
283
|
+
height: 30px;
|
|
284
|
+
position: absolute;
|
|
285
|
+
right: 75px;
|
|
286
|
+
width: 30px;
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
&__circle-12 {
|
|
291
|
+
@include mq(l) {
|
|
292
|
+
background-color: var(--ons-color-night-blue);
|
|
293
|
+
border-radius: 50%;
|
|
294
|
+
bottom: -35px;
|
|
295
|
+
height: 59px;
|
|
296
|
+
position: absolute;
|
|
297
|
+
right: 125px;
|
|
298
|
+
width: 59px;
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
}
|
|
65
302
|
}
|
|
@@ -6,6 +6,13 @@
|
|
|
6
6
|
<section
|
|
7
7
|
class="ons-hero ons-grid--gutterless{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-hero--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-hero--{{ params.variants }}{% endif %}"
|
|
8
8
|
>
|
|
9
|
+
{% if params.variants == 'navy-blue' %}
|
|
10
|
+
<div class="ons-hero__circles" aria-hidden="true">
|
|
11
|
+
{% for i in range(1, 13) %}
|
|
12
|
+
<div class="ons-hero__circle-{{ i }}"></div>
|
|
13
|
+
{% endfor %}
|
|
14
|
+
</div>
|
|
15
|
+
{% endif %}
|
|
9
16
|
<div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}">
|
|
10
17
|
<div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m ons-col-10@s@m">
|
|
11
18
|
<header>
|
|
@@ -87,4 +87,9 @@ describe('macro: hero', () => {
|
|
|
87
87
|
const content = $('.ons-hero__additional-content').text().trim();
|
|
88
88
|
expect(content).toEqual(expect.stringContaining('Example content...'));
|
|
89
89
|
});
|
|
90
|
+
|
|
91
|
+
it('renders circles when variant is `navy blue`', () => {
|
|
92
|
+
const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'navy-blue' }));
|
|
93
|
+
expect($('.ons-hero--navy-blue .ons-hero__circles').length).toBe(1);
|
|
94
|
+
});
|
|
90
95
|
});
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
---
|
|
2
|
+
'fullWidth': true
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
{% from "components/hero/_macro.njk" import onsHero %}
|
|
6
|
+
{{
|
|
7
|
+
onsHero({
|
|
8
|
+
"title": 'Welcome to the ONS Beta',
|
|
9
|
+
"text": 'Thank you for participating in our beta test. This limited preview of the ONS website focuses on our
|
|
10
|
+
new design and navigation for the retail insutry section. Please be aware that greyed-out links indicate sections still under development.
|
|
11
|
+
The active links will take you through the journey to test the new design features.',
|
|
12
|
+
"variants": 'navy-blue'
|
|
13
|
+
})
|
|
14
|
+
}}
|