@asd20/ui-next 2.22.3 → 2.23.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 +14 -0
- package/package.json +1 -1
- package/src/components/organisms/Asd20ComposeEmailModal/index.vue +14 -0
- package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue +44 -17
- package/src/design/_tokens.scss +8 -0
- package/src/design/tokens.base.json +10 -0
- package/src/design/tokens.json +10 -0
- package/src/helpers/sendEmail.js +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
# [2.23.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.22.4...ui-next-v2.23.0) (2026-09-08)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* add subject to directory email form ([e81778f](https://github.com/academydistrict20/asd20-ui-next/commit/e81778f1ff7ba90196e747799cd32b2028a06c8f))
|
|
9
|
+
|
|
10
|
+
## [2.22.4](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.22.3...ui-next-v2.22.4) (2026-08-31)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* add css tokens to fill video home page header component ([0d58ae6](https://github.com/academydistrict20/asd20-ui-next/commit/0d58ae6432b33c86b9a5c629b6dc2065fbec6b2f))
|
|
16
|
+
|
|
3
17
|
## [2.22.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.22.2...ui-next-v2.22.3) (2026-08-31)
|
|
4
18
|
|
|
5
19
|
|
package/package.json
CHANGED
|
@@ -25,6 +25,15 @@
|
|
|
25
25
|
aria-required="true"
|
|
26
26
|
@validated="validationErrors.senderEmail = $event"
|
|
27
27
|
/>
|
|
28
|
+
<asd20-text-input
|
|
29
|
+
id="subject"
|
|
30
|
+
v-model="emailMessage.subject"
|
|
31
|
+
label="Subject"
|
|
32
|
+
maxlength="200"
|
|
33
|
+
required
|
|
34
|
+
aria-required="true"
|
|
35
|
+
@validated="validationErrors.subject = $event"
|
|
36
|
+
/>
|
|
28
37
|
<asd20-text-area-input
|
|
29
38
|
id="messageBody"
|
|
30
39
|
v-model="emailMessage.messageBody"
|
|
@@ -97,6 +106,7 @@ export default {
|
|
|
97
106
|
validationErrors: {
|
|
98
107
|
senderName: [],
|
|
99
108
|
senderEmail: [],
|
|
109
|
+
subject: [],
|
|
100
110
|
messageBody: [],
|
|
101
111
|
},
|
|
102
112
|
composing: false,
|
|
@@ -106,6 +116,7 @@ export default {
|
|
|
106
116
|
emailMessage: {
|
|
107
117
|
senderName: '',
|
|
108
118
|
senderEmail: '',
|
|
119
|
+
subject: '',
|
|
109
120
|
messageBody: '',
|
|
110
121
|
},
|
|
111
122
|
}),
|
|
@@ -122,9 +133,11 @@ export default {
|
|
|
122
133
|
return (
|
|
123
134
|
Boolean(this.emailMessage.senderName) &&
|
|
124
135
|
Boolean(this.emailMessage.senderEmail) &&
|
|
136
|
+
Boolean(this.emailMessage.subject) &&
|
|
125
137
|
Boolean(this.emailMessage.messageBody) &&
|
|
126
138
|
this.validationErrors.senderName.length === 0 &&
|
|
127
139
|
this.validationErrors.senderEmail.length === 0 &&
|
|
140
|
+
this.validationErrors.subject.length === 0 &&
|
|
128
141
|
this.validationErrors.messageBody.length === 0
|
|
129
142
|
)
|
|
130
143
|
},
|
|
@@ -173,6 +186,7 @@ export default {
|
|
|
173
186
|
this.emailMessage = {
|
|
174
187
|
senderEmail: '',
|
|
175
188
|
senderName: '',
|
|
189
|
+
subject: '',
|
|
176
190
|
messageBody: '',
|
|
177
191
|
}
|
|
178
192
|
},
|
|
@@ -226,8 +226,14 @@ export default {
|
|
|
226
226
|
left: 0;
|
|
227
227
|
right: 2rem;
|
|
228
228
|
z-index: -1;
|
|
229
|
-
background: var(
|
|
230
|
-
|
|
229
|
+
background: var(
|
|
230
|
+
--website-video-homepage-header__background-style,
|
|
231
|
+
var(--website-header__background-style)
|
|
232
|
+
);
|
|
233
|
+
background-color: var(
|
|
234
|
+
--website-video-homepage-header__background-color,
|
|
235
|
+
var(--website-header__background-color)
|
|
236
|
+
);
|
|
231
237
|
border-top-left-radius: 0;
|
|
232
238
|
border-top-right-radius: 3rem;
|
|
233
239
|
border-bottom-left-radius: 0;
|
|
@@ -288,7 +294,10 @@ export default {
|
|
|
288
294
|
|
|
289
295
|
h1 {
|
|
290
296
|
position: relative;
|
|
291
|
-
color: var(
|
|
297
|
+
color: var(
|
|
298
|
+
--website-video-homepage-header__title-color,
|
|
299
|
+
var(--website-header__title-color)
|
|
300
|
+
);
|
|
292
301
|
@include asd20-font(
|
|
293
302
|
2,
|
|
294
303
|
var(--website-typography__font-family-headlines),
|
|
@@ -302,7 +311,10 @@ export default {
|
|
|
302
311
|
&__lead {
|
|
303
312
|
position: relative;
|
|
304
313
|
z-index: 1;
|
|
305
|
-
color: var(
|
|
314
|
+
color: var(
|
|
315
|
+
--website-video-homepage-header__foreground-color,
|
|
316
|
+
var(--website-header__foreground-color)
|
|
317
|
+
);
|
|
306
318
|
@include asd20-font(1, var(--website-typography__font-family-body));
|
|
307
319
|
margin: space(-0.5) space(2) space(1) space(1);
|
|
308
320
|
a {
|
|
@@ -322,12 +334,15 @@ export default {
|
|
|
322
334
|
margin-bottom: space(0.5);
|
|
323
335
|
font-size: 1rem !important;
|
|
324
336
|
background-color: var(
|
|
325
|
-
--website-homepage-header__button-background-color,
|
|
326
|
-
var(--color__accent)
|
|
337
|
+
--website-video-homepage-header__button-background-color,
|
|
338
|
+
var(--website-header__button-background-color, var(--color__accent))
|
|
327
339
|
);
|
|
328
340
|
color: var(
|
|
329
|
-
--website-homepage-header__button-foreground-color,
|
|
330
|
-
var(
|
|
341
|
+
--website-video-homepage-header__button-foreground-color,
|
|
342
|
+
var(
|
|
343
|
+
--website-header__button-foreground-color,
|
|
344
|
+
var(--color__accent-t100)
|
|
345
|
+
)
|
|
331
346
|
);
|
|
332
347
|
position: relative;
|
|
333
348
|
padding: space(0.5) space(1.5);
|
|
@@ -341,7 +356,7 @@ export default {
|
|
|
341
356
|
left: 0;
|
|
342
357
|
width: 10px;
|
|
343
358
|
height: 100%;
|
|
344
|
-
background-color: var(--
|
|
359
|
+
background-color: var(--color__accent-t40);
|
|
345
360
|
transition: width 0.3s ease, background-color 0.3s ease;
|
|
346
361
|
z-index: 0;
|
|
347
362
|
}
|
|
@@ -349,17 +364,23 @@ export default {
|
|
|
349
364
|
&:hover,
|
|
350
365
|
&:focus {
|
|
351
366
|
background-color: var(
|
|
352
|
-
--website-homepage-header__button-hover-background-color,
|
|
353
|
-
var(
|
|
367
|
+
--website-video-homepage-header__button-hover-background-color,
|
|
368
|
+
var(
|
|
369
|
+
--website-header__button-hover-background-color,
|
|
370
|
+
var(--color__accent-t60)
|
|
371
|
+
)
|
|
354
372
|
);
|
|
355
373
|
color: var(
|
|
356
|
-
--website-homepage-header__button-hover-foreground-color,
|
|
357
|
-
var(
|
|
374
|
+
--website-video-homepage-header__button-hover-foreground-color,
|
|
375
|
+
var(
|
|
376
|
+
--website-header__button-hover-foreground-color,
|
|
377
|
+
var(--color__accent-t100)
|
|
378
|
+
)
|
|
358
379
|
);
|
|
359
380
|
|
|
360
381
|
&::before {
|
|
361
382
|
width: 20px;
|
|
362
|
-
background-color: var(--
|
|
383
|
+
background-color: var(--color__accent-t60);
|
|
363
384
|
}
|
|
364
385
|
}
|
|
365
386
|
|
|
@@ -567,7 +588,7 @@ $max: 4rem;
|
|
|
567
588
|
rgba(0, 0, 0, 0) 100%
|
|
568
589
|
);
|
|
569
590
|
padding: space(1);
|
|
570
|
-
border-left: space(1.5) solid var(--
|
|
591
|
+
border-left: space(1.5) solid var(--color__accent-t20);
|
|
571
592
|
animation: slide_left 1s ease-in-out 0.5s both;
|
|
572
593
|
border-top-left-radius: 2rem;
|
|
573
594
|
border-bottom-left-radius: 2rem;
|
|
@@ -581,14 +602,20 @@ $max: 4rem;
|
|
|
581
602
|
h1 {
|
|
582
603
|
margin: 0 0 space(1);
|
|
583
604
|
font-size: 40px !important;
|
|
584
|
-
color: var(
|
|
605
|
+
color: var(
|
|
606
|
+
--website-video-homepage-header__title-color,
|
|
607
|
+
var(--website-header__title-color)
|
|
608
|
+
);
|
|
585
609
|
border-bottom: none;
|
|
586
610
|
}
|
|
587
611
|
|
|
588
612
|
&__lead {
|
|
589
613
|
margin: space(-0.5) 0 0;
|
|
590
614
|
font-size: 20px !important;
|
|
591
|
-
color: var(
|
|
615
|
+
color: var(
|
|
616
|
+
--website-video-homepage-header__foreground-color,
|
|
617
|
+
var(--website-header__foreground-color)
|
|
618
|
+
);
|
|
592
619
|
}
|
|
593
620
|
|
|
594
621
|
&__call-to-action {
|
package/src/design/_tokens.scss
CHANGED
|
@@ -151,6 +151,14 @@ $texture-image-base-path: '~@asd20/ui-next/design/images';
|
|
|
151
151
|
--website-homepage-header__secondary-button-hover-foreground-color: var(--color__on-accent);
|
|
152
152
|
--website-homepage-header__secondary-foreground-color: var(--color__secondary-t90);
|
|
153
153
|
--website-homepage-header__secondary-title-color: #fff;
|
|
154
|
+
--website-video-homepage-header__background-color: var(--website-header__background-color);
|
|
155
|
+
--website-video-homepage-header__background-style: var(--website-header__background-style);
|
|
156
|
+
--website-video-homepage-header__button-background-color: var(--website-header__button-background-color);
|
|
157
|
+
--website-video-homepage-header__button-foreground-color: var(--website-header__button-foreground-color);
|
|
158
|
+
--website-video-homepage-header__button-hover-background-color: var(--website-header__button-hover-background-color);
|
|
159
|
+
--website-video-homepage-header__button-hover-foreground-color: var(--website-header__button-hover-foreground-color);
|
|
160
|
+
--website-video-homepage-header__foreground-color: var(--website-header__foreground-color);
|
|
161
|
+
--website-video-homepage-header__title-color: var(--website-header__title-color);
|
|
154
162
|
--website-icon__fill-color: var(--color__accent);
|
|
155
163
|
--website-icon__fill-color-reverse: var(--color__accent);
|
|
156
164
|
--website-icon__hover-fill-color: var(--color__accent);
|
|
@@ -80,6 +80,16 @@
|
|
|
80
80
|
"secondaryForegroundColor": "var(--color__secondary-t90)",
|
|
81
81
|
"secondaryTitleColor": "#fff"
|
|
82
82
|
},
|
|
83
|
+
"websiteVideoHomepageHeader": {
|
|
84
|
+
"backgroundColor": "var(--website-header__background-color)",
|
|
85
|
+
"backgroundStyle": "var(--website-header__background-style)",
|
|
86
|
+
"buttonBackgroundColor": "var(--website-header__button-background-color)",
|
|
87
|
+
"buttonForegroundColor": "var(--website-header__button-foreground-color)",
|
|
88
|
+
"buttonHoverBackgroundColor": "var(--website-header__button-hover-background-color)",
|
|
89
|
+
"buttonHoverForegroundColor": "var(--website-header__button-hover-foreground-color)",
|
|
90
|
+
"foregroundColor": "var(--website-header__foreground-color)",
|
|
91
|
+
"titleColor": "var(--website-header__title-color)"
|
|
92
|
+
},
|
|
83
93
|
"websiteIcon": {
|
|
84
94
|
"fillColor": "var(--color__accent)",
|
|
85
95
|
"fillColorReverse": "var(--color__accent)",
|
package/src/design/tokens.json
CHANGED
|
@@ -80,6 +80,16 @@
|
|
|
80
80
|
"secondaryForegroundColor": "var(--color__secondary-t90)",
|
|
81
81
|
"secondaryTitleColor": "#fff"
|
|
82
82
|
},
|
|
83
|
+
"websiteVideoHomepageHeader": {
|
|
84
|
+
"backgroundColor": "var(--website-header__background-color)",
|
|
85
|
+
"backgroundStyle": "var(--website-header__background-style)",
|
|
86
|
+
"buttonBackgroundColor": "var(--website-header__button-background-color)",
|
|
87
|
+
"buttonForegroundColor": "var(--website-header__button-foreground-color)",
|
|
88
|
+
"buttonHoverBackgroundColor": "var(--website-header__button-hover-background-color)",
|
|
89
|
+
"buttonHoverForegroundColor": "var(--website-header__button-hover-foreground-color)",
|
|
90
|
+
"foregroundColor": "var(--website-header__foreground-color)",
|
|
91
|
+
"titleColor": "var(--website-header__title-color)"
|
|
92
|
+
},
|
|
83
93
|
"websiteIcon": {
|
|
84
94
|
"fillColor": "var(--color__accent)",
|
|
85
95
|
"fillColorReverse": "var(--color__accent)",
|