@asd20/ui-next 2.7.2 → 2.7.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/package.json +1 -1
  3. package/src/components/organisms/Asd20ComposeEmailModal/index.vue +88 -100
  4. package/src/components/organisms/Asd20QuicklinksMenu/index.vue +5 -7
  5. package/src/components/organisms/Asd20SchoolHomepageHeader/index.vue +1 -13
  6. package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue +3 -7
  7. package/src/components/templates/Asd20SchoolHomeTemplate/index.vue +2 -8
  8. package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.vue +48 -43
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.7.4](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.7.3...ui-next-v2.7.4) (2026-05-05)
4
+
5
+ ## [2.7.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.7.2...ui-next-v2.7.3) (2026-05-05)
6
+
3
7
  ## [2.7.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.7.1...ui-next-v2.7.2) (2026-05-05)
4
8
 
5
9
  ## [2.7.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.7.0...ui-next-v2.7.1) (2026-05-05)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@asd20/ui-next",
3
- "version": "2.7.2",
3
+ "version": "2.7.4",
4
4
  "private": false,
5
5
  "description": "ASD20 UI component library for Vue 3.",
6
6
  "license": "MIT",
package/src/components/organisms/Asd20ComposeEmailModal/index.vue CHANGED
@@ -9,90 +9,60 @@
9
9
  @dismiss="$emit('dismiss')"
10
10
  >
11
11
  <Asd20Viewport scrollable>
12
- <template v-if="!sendRejected">
13
- <asd20-text-input
14
- id="senderName"
15
- v-model="emailMessage.senderName"
16
- label="Your Full Name"
17
- required
18
- @validated="validationErrors.senderName = $event"
19
- />
20
- <asd20-text-input
21
- id="senderEmail"
22
- v-model="emailMessage.senderEmail"
23
- type="email"
24
- :validator="validateEmailAddress"
25
- label="Your Email Address"
26
- required
27
- @validated="validationErrors.senderEmail = $event"
28
- />
29
- <asd20-text-area-input
30
- id="messageBody"
31
- v-model="emailMessage.messageBody"
32
- label="Message"
33
- required
34
- @validated="validationErrors.messageBody = $event"
35
- />
36
- <div
37
- class="asd20-compose-email-modal__submit"
38
- aria-live="polite"
39
- >
40
- <Recaptcha
41
- v-if="!sending && !sendSucceeded"
42
- sitekey="6LfidKoUAAAAAFqr3QEbia3jIkecsZyxBYlMvWrX"
43
- :load-recaptcha-script="true"
44
- size="invisible"
45
- @verify="captchaVerified"
46
- >
47
- <asd20-button
48
- :disabled="!isValid"
49
- label="Send"
50
- horizontal
51
- centered
52
- bordered
53
- />
54
- </Recaptcha>
55
- <asd20-spinner
56
- v-else-if="sending"
57
- size="sm"
58
- />
59
- <p
60
- v-else
61
- class="asd20-compose-email-modal__success"
62
- role="status"
63
- >
64
- Your message was sent.
65
- </p>
66
- </div>
67
- </template>
12
+ <asd20-text-input
13
+ id="senderName"
14
+ v-model="emailMessage.senderName"
15
+ label="Your Full Name"
16
+ aria-required="true"
17
+ @validated="validationErrors.senderName = $event"
18
+ />
19
+ <asd20-text-input
20
+ id="senderEmail"
21
+ v-model="emailMessage.senderEmail"
22
+ type="email"
23
+ :validator="validateEmailAddress"
24
+ label="Your Email Address"
25
+ aria-required="true"
26
+ @validated="validationErrors.senderEmail = $event"
27
+ />
28
+ <asd20-text-area-input
29
+ id="messageBody"
30
+ v-model="emailMessage.messageBody"
31
+ label="Message"
32
+ help-text="All fields are required."
33
+ aria-required="true"
34
+ @validated="validationErrors.messageBody = $event"
35
+ />
68
36
  <div
69
- v-else
70
- class="asd20-compose-email-modal__rejection"
71
- role="status"
37
+ class="asd20-compose-email-modal__submit"
38
+ aria-live="polite"
72
39
  >
73
- <p
74
- class="asd20-compose-email-modal__rejection-message"
40
+ <Recaptcha
41
+ v-if="!sending && !sendSucceeded && !sendRejected"
42
+ sitekey="6LfidKoUAAAAAFqr3QEbia3jIkecsZyxBYlMvWrX"
43
+ :load-recaptcha-script="true"
44
+ size="invisible"
45
+ @verify="captchaVerified"
75
46
  >
76
- Please contact the Academy District 20 Help Desk who can evaluate your
77
- request and route it appropriately.
78
- </p>
79
- <div class="asd20-compose-email-modal__rejection-actions">
80
- <asd20-button
81
- label="Contact Our Help Desk"
82
- :link="helpDeskUrl"
83
- horizontal
84
- centered
85
- bordered
86
- />
87
47
  <asd20-button
88
- label="Cancel"
48
+ :disabled="!isValid"
49
+ label="Send"
89
50
  horizontal
90
51
  centered
91
52
  bordered
92
- transparent
93
- @click="$emit('dismiss')"
94
53
  />
95
- </div>
54
+ </Recaptcha>
55
+ <asd20-spinner
56
+ v-else-if="sending"
57
+ size="sm"
58
+ />
59
+ <p
60
+ v-else
61
+ class="asd20-compose-email-modal__status"
62
+ role="status"
63
+ >
64
+ {{ sendStatusMessage }}
65
+ </p>
96
66
  </div>
97
67
  </Asd20Viewport>
98
68
  </asd20-modal>
@@ -133,7 +103,6 @@ export default {
133
103
  sending: false,
134
104
  sendSucceeded: false,
135
105
  sendRejected: false,
136
- helpDeskUrl: 'https://asd20.org/help-desk',
137
106
  emailMessage: {
138
107
  senderName: '',
139
108
  senderEmail: '',
@@ -142,10 +111,18 @@ export default {
142
111
  }),
143
112
  computed: {
144
113
  modalTitle() {
145
- return this.sendRejected ? 'Contact our Help Desk' : 'Send an Email'
114
+ return 'Send an Email'
115
+ },
116
+ sendStatusMessage() {
117
+ return this.sendRejected
118
+ ? "Your message couldn't be sent via this form."
119
+ : 'Your message was sent.'
146
120
  },
147
121
  isValid() {
148
122
  return (
123
+ Boolean(this.emailMessage.senderName) &&
124
+ Boolean(this.emailMessage.senderEmail) &&
125
+ Boolean(this.emailMessage.messageBody) &&
149
126
  this.validationErrors.senderName.length === 0 &&
150
127
  this.validationErrors.senderEmail.length === 0 &&
151
128
  this.validationErrors.messageBody.length === 0
@@ -242,7 +219,7 @@ export default {
242
219
  return null
243
220
  }
244
221
  },
245
- isHelpDeskRejection(error) {
222
+ isModerationRejection(error) {
246
223
  return (
247
224
  this.getSendEmailResponseData(error)?.code === 'moderation_rejected'
248
225
  )
@@ -279,11 +256,11 @@ export default {
279
256
  } catch (error) {
280
257
  this.sendSucceeded = false
281
258
  console.error('Email send failed:', error?.message || error)
282
- if (this.isHelpDeskRejection(error)) {
283
- this.helpDeskUrl =
284
- this.getSendEmailResponseData(error)?.helpDeskUrl ||
285
- 'https://asd20.org/help-desk'
259
+ if (this.isModerationRejection(error)) {
260
+ this.sending = false
286
261
  this.sendRejected = true
262
+ await this.waitForSuccessMessage()
263
+ this.$emit('dismiss')
287
264
  return
288
265
  }
289
266
  alert(this.getSendEmailFailureMessage(error))
@@ -310,34 +287,45 @@ export default {
310
287
  min-height: 3rem;
311
288
  }
312
289
 
313
- &__success {
290
+ &__status {
314
291
  font-weight: 600;
315
292
  margin: 0;
316
293
  text-align: center;
317
294
  }
318
-
319
- &__rejection {
320
- display: flex;
321
- flex-direction: column;
322
- gap: space(1);
323
- }
324
-
325
- &__rejection-message {
326
- margin: 0;
327
- }
328
-
329
- &__rejection-actions {
330
- display: flex;
331
- flex-wrap: wrap;
332
- gap: space(0.75);
333
- }
334
295
  }
335
296
 
336
297
  @media (min-width: 1024px) {
337
298
  .asd20-compose-email-modal {
338
299
  & :deep(.asd20-modal__content .asd20-viewport) {
300
+ display: flex;
301
+ flex-direction: column;
302
+ min-height: 0;
339
303
  padding: space(1);
340
304
  }
305
+
306
+ & :deep(.asd20-text-area-input) {
307
+ align-items: stretch;
308
+ display: flex;
309
+ flex: 1 1 auto;
310
+ flex-direction: column;
311
+ min-height: 0;
312
+ }
313
+
314
+ & :deep(.asd20-text-area-input .input-wrapper) {
315
+ flex: 1 1 auto;
316
+ min-height: 0;
317
+ }
318
+
319
+ & :deep(.asd20-text-area-input textarea) {
320
+ height: 100%;
321
+ min-height: 0;
322
+ }
323
+
324
+ & :deep(.asd20-text-area-input__help-text) {
325
+ align-self: flex-start;
326
+ text-align: left;
327
+ }
328
+
341
329
  & :deep(.asd20-modal) {
342
330
  margin-top: auto;
343
331
  margin-bottom: auto;
package/src/components/organisms/Asd20QuicklinksMenu/index.vue CHANGED
@@ -35,7 +35,8 @@ export default {
35
35
  background: var(--website-quick-links__background-color);
36
36
  min-height: 3vh;
37
37
  display: block;
38
- padding: space(1) space(0);
38
+ padding: space(1) space(0.5);
39
+ gap: 0.25rem;
39
40
 
40
41
  .asd20-button {
41
42
  display: flex;
@@ -43,7 +44,6 @@ export default {
43
44
  flex: 1 1;
44
45
  justify-content: flex-start;
45
46
  width: auto;
46
- margin: space(0.5) space(0.5);
47
47
  font-size: 0.875rem !important;
48
48
  color: var(--website-quick-links__button-foreground-color) !important;
49
49
  & :deep(.asd20-button__label) {
@@ -71,17 +71,15 @@ export default {
71
71
  flex-wrap: wrap;
72
72
  align-items: flex-start;
73
73
  min-height: 3vh;
74
- padding: space(0.5) space(0);
75
74
 
76
75
  .asd20-button {
77
76
  display: flex;
78
77
  flex-direction: column;
79
78
  text-align: center;
80
79
  flex: 1 1;
81
- align-self: start;
82
- margin: space(0.5) 0;
80
+ padding: space(0.5) space(0.25) !important;
83
81
  & :deep(.asd20-button__label) {
84
- margin-left: space(0);
82
+ margin-left: 0;
85
83
  }
86
84
  }
87
85
  }
@@ -89,7 +87,7 @@ export default {
89
87
 
90
88
  @media (min-width: 1024px) {
91
89
  .asd20-quicklinks-menu {
92
- padding: space(0) space(1);
90
+ padding: 1rem 1rem;
93
91
  }
94
92
  }
95
93
  </style>
package/src/components/organisms/Asd20SchoolHomepageHeader/index.vue CHANGED
@@ -322,8 +322,6 @@ $max: 4rem;
322
322
  }
323
323
  &__top {
324
324
  flex-direction: row;
325
- /* justify-content: flex-end;*/
326
- /* padding: space(0.25) space(1);*/
327
325
  align-items: center !important;
328
326
  }
329
327
  &__image {
@@ -352,10 +350,7 @@ $max: 4rem;
352
350
  .asd20-school-homepage-header {
353
351
  display: grid;
354
352
  grid-template-columns: space(3) repeat(5, 1fr space(3)) 1fr space(3);
355
- grid-template-rows: repeat(6, space(1)) space(3) 1fr space(3) repeat(
356
- 3,
357
- space(1)
358
- );
353
+ grid-template-rows: repeat(6, space(1)) space(3) 1fr space(3) repeat(3, space(1));
359
354
  margin-bottom: 0;
360
355
  &::before {
361
356
  content: '';
@@ -368,8 +363,6 @@ $max: 4rem;
368
363
  grid-column: 1 / -1;
369
364
  grid-row: 7 / -4;
370
365
  z-index: 1;
371
- /* transform: translate3d(0, calc(5% * var(--scroll-progress)), 0);*/
372
- /* border-radius: var(--website-shape__radius-l);*/
373
366
  border-top-left-radius: 0;
374
367
  border-top-right-radius: 0;
375
368
  border-bottom-left-radius: 3rem;
@@ -406,11 +399,6 @@ $max: 4rem;
406
399
  & :deep(.asd20-picker) {
407
400
  display: flex;
408
401
  }
409
- /* &::v-deep .notification-group--floating {*/
410
- /* position: absolute;*/
411
- /* top: 9rem;*/
412
- /* right: 5.5rem;*/
413
- /* }*/
414
402
  }
415
403
 
416
404
  & :deep(.asd20-notification-group--status) {
package/src/components/organisms/Asd20SchoolHomepageVideoHeader/index.vue CHANGED
@@ -534,7 +534,7 @@ $max: 4rem;
534
534
 
535
535
  &__top {
536
536
  margin: 0;
537
- padding: space(1) space(3) space(1) space(3);
537
+ padding: space(0.5) space(3) space(1) space(3);
538
538
  grid-column: 1/-1;
539
539
  grid-row: 1/7;
540
540
  background: transparent;
@@ -618,10 +618,7 @@ $max: 4rem;
618
618
  .asd20-school-homepage-video-header {
619
619
  display: grid;
620
620
  grid-template-columns: space(3) repeat(5, 1fr space(3)) 1fr space(3);
621
- grid-template-rows: repeat(6, space(1)) space(3) 1fr space(3) repeat(
622
- 3,
623
- space(1)
624
- );
621
+ grid-template-rows: repeat(6, space(1)) space(3) 1fr space(3) repeat(3, space(1));
625
622
  margin-bottom: 0;
626
623
  .background-video {
627
624
  display: block;
@@ -654,7 +651,6 @@ $max: 4rem;
654
651
  grid-column: 1 / -1;
655
652
  grid-row: 7 / -4;
656
653
  z-index: 1;
657
- /* transform: translate3d(0, calc(5% * var(--scroll-progress)), 0);*/
658
654
  border-radius: var(--website-shape__radius-l);
659
655
  border-top-left-radius: 0;
660
656
  border-top-right-radius: 0;
@@ -682,7 +678,7 @@ $max: 4rem;
682
678
 
683
679
  &__top {
684
680
  margin: 0;
685
- padding: space(1) space(3) space(1) space(3);
681
+ padding: space(0.5) space(3) space(1) space(3);
686
682
  grid-column: 1/-1;
687
683
  grid-row: 1/7;
688
684
  background: transparent;
package/src/components/templates/Asd20SchoolHomeTemplate/index.vue CHANGED
@@ -476,16 +476,10 @@ export default {
476
476
  }
477
477
  .pickerContainer {
478
478
  display: flex;
479
- /* .optionalLogo {*/
480
- /* display: none;*/
481
- /* }*/
482
479
  }
483
480
  .asd20-quicklinks-menu {
484
- padding-bottom: space(1);
485
- margin: space(-1) 0 0 0;
486
- &::after {
487
- bottom: space(-4);
488
- }
481
+ margin-top: -1rem;
482
+ padding: 0 1rem 2rem 1rem;
489
483
  }
490
484
  .button-group {
491
485
  display: flex;
package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.vue CHANGED
@@ -38,40 +38,42 @@
38
38
  :organization="organization"
39
39
  logo-size="lg"
40
40
  />
41
- <a
42
- v-if="websiteLogoProps"
43
- :href="websiteLogoProps.logoLink ? websiteLogoProps.logoLink : ''"
44
- @click="onLogoClick($event, websiteLogoProps.logoLink)"
45
- >
46
- <img
47
- class="optionalLogo"
48
- :src="
49
- websiteLogoProps.logoImageUrl
50
- ? websiteLogoProps.logoImageUrl
51
- : ''
52
- "
53
- :alt="websiteLogoProps.logoAlt ? websiteLogoProps.logoAlt : ''"
54
- />
55
- </a>
56
- <a
57
- v-if="websiteLogoProps2"
58
- :href="
59
- websiteLogoProps2.logoLink ? websiteLogoProps2.logoLink : ''
60
- "
61
- @click="onLogoClick($event, websiteLogoProps2.logoLink)"
62
- >
63
- <img
64
- class="optionalLogo"
65
- :src="
66
- websiteLogoProps2.logoImageUrl
67
- ? websiteLogoProps2.logoImageUrl
68
- : ''
69
- "
70
- :alt="
71
- websiteLogoProps2.logoAlt ? websiteLogoProps2.logoAlt : ''
41
+ <div class="website-logos">
42
+ <a
43
+ v-if="websiteLogoProps"
44
+ :href="websiteLogoProps.logoLink ? websiteLogoProps.logoLink : ''"
45
+ @click="onLogoClick($event, websiteLogoProps.logoLink)"
46
+ >
47
+ <img
48
+ class="optionalLogo"
49
+ :src="
50
+ websiteLogoProps.logoImageUrl
51
+ ? websiteLogoProps.logoImageUrl
52
+ : ''
53
+ "
54
+ :alt="websiteLogoProps.logoAlt ? websiteLogoProps.logoAlt : ''"
55
+ />
56
+ </a>
57
+ <a
58
+ v-if="websiteLogoProps2"
59
+ :href="
60
+ websiteLogoProps2.logoLink ? websiteLogoProps2.logoLink : ''
72
61
  "
73
- />
74
- </a>
62
+ @click="onLogoClick($event, websiteLogoProps2.logoLink)"
63
+ >
64
+ <img
65
+ class="optionalLogo"
66
+ :src="
67
+ websiteLogoProps2.logoImageUrl
68
+ ? websiteLogoProps2.logoImageUrl
69
+ : ''
70
+ "
71
+ :alt="
72
+ websiteLogoProps2.logoAlt ? websiteLogoProps2.logoAlt : ''
73
+ "
74
+ />
75
+ </a>
76
+ </div>
75
77
  </div>
76
78
  <div class="notification-translation-container">
77
79
  <div class="language-wrapper">
@@ -422,9 +424,17 @@ export default {
422
424
  margin-top: 0;
423
425
  .pickerContainer {
424
426
  display: flex;
425
- .optionalLogo {
426
- max-width: 12rem;
427
- max-height: 6rem;
427
+ .asd20-organization-picker {
428
+ display: flex;
429
+ }
430
+ .website-logos {
431
+ display: flex;
432
+ flex-direction: row;
433
+ gap: 1rem;
434
+ .optionalLogo {
435
+ max-width: 12rem;
436
+ max-height: 6rem;
437
+ }
428
438
  }
429
439
  }
430
440
  .notification-translation-container {
@@ -434,11 +444,8 @@ export default {
434
444
  }
435
445
 
436
446
  .asd20-quicklinks-menu {
437
- padding-bottom: space(1);
438
- margin: space(-1) 0 0 0;
439
- &::after {
440
- bottom: space(-4);
441
- }
447
+ margin-top: -1rem;
448
+ padding: 0 1rem 2rem 1rem;
442
449
  }
443
450
  .button-group {
444
451
  display: flex;
@@ -448,8 +455,6 @@ export default {
448
455
  }
449
456
  .asd20-notification-group--status {
450
457
  order: 0;
451
- /* right: space(5.5) !important;*/
452
- /* top: space(6) !important;*/
453
458
  }
454
459
  }
455
460
  }