@asd20/ui-next 2.0.20 → 2.0.22

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 (20) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/package.json +1 -1
  3. package/src/components/organisms/Asd20MediaSection/index.vue +2 -1
  4. package/src/components/organisms/Asd20PageHeader/index.vue +123 -9
  5. package/src/components/templates/Asd20ArticleDigestCompactTemplate/index.vue +2 -2
  6. package/src/components/templates/Asd20ArticleDigestTemplate/index.vue +2 -2
  7. package/src/components/templates/Asd20ArticleListTemplate/index.vue +2 -2
  8. package/src/components/templates/Asd20ArticleTemplate/index.vue +3 -2
  9. package/src/components/templates/Asd20ClubsTemplate/index.vue +2 -2
  10. package/src/components/templates/Asd20DetailAlternateTemplate/index.vue +1 -1
  11. package/src/components/templates/Asd20DetailImageFullTemplate/index.vue +2 -2
  12. package/src/components/templates/Asd20DetailImageTemplate/index.vue +2 -2
  13. package/src/components/templates/Asd20DetailTemplate/index.vue +2 -2
  14. package/src/components/templates/Asd20FileListPageTemplate/index.vue +1 -1
  15. package/src/components/templates/Asd20LoginsTemplate/index.vue +2 -2
  16. package/src/components/templates/Asd20WayfindingAccessibilityTemplate/index.vue +2 -2
  17. package/src/components/templates/Asd20WayfindingAlternateTemplate/index.vue +2 -2
  18. package/src/components/templates/Asd20WayfindingImageTemplate/index.vue +2 -2
  19. package/src/components/templates/Asd20WayfindingTemplate/index.vue +2 -2
  20. package/src/mixins/pageTemplateMixin.js +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.0.22](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.21...ui-next-v2.0.22) (2026-04-02)
4
+
5
+ ## [2.0.21](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.20...ui-next-v2.0.21) (2026-04-02)
6
+
3
7
  ## [2.0.20](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.19...ui-next-v2.0.20) (2026-04-02)
4
8
 
5
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@asd20/ui-next",
3
- "version": "2.0.20",
3
+ "version": "2.0.22",
4
4
  "private": false,
5
5
  "description": "ASD20 UI component library for Vue 3.",
6
6
  "license": "MIT",
package/src/components/organisms/Asd20MediaSection/index.vue CHANGED
@@ -7,7 +7,7 @@
7
7
  <slot name="before" />
8
8
 
9
9
  <asd20-image-gallery
10
- v-if="images.length > 1"
10
+ v-if="allowSingleImageGallery ? images.length > 0 : images.length > 1"
11
11
  title="Images"
12
12
  :images="images"
13
13
  >
@@ -37,6 +37,7 @@ export default {
37
37
  ),
38
38
  },
39
39
  props: {
40
+ allowSingleImageGallery: { type: Boolean, default: false },
40
41
  images: { type: Array, default: () => [] },
41
42
  videos: { type: Array, default: () => [] },
42
43
  },
package/src/components/organisms/Asd20PageHeader/index.vue CHANGED
@@ -15,7 +15,10 @@
15
15
  ></asd20-organization-picker>
16
16
  <slot name="top" />
17
17
  </div>
18
- <div class="asd20-page-header__main">
18
+ <div
19
+ class="asd20-page-header__main"
20
+ :class="{ 'asd20-page-header__main--has-image': imageUrl && !$slots.aside }"
21
+ >
19
22
  <div
20
23
  class="asd20-page-header__content"
21
24
  :class="headerImageUrl ? 'new-header add-fade' : ''"
@@ -144,7 +147,7 @@
144
147
  /> -->
145
148
  <asd20-button
146
149
  v-if="callsToAction.length >= 1"
147
- :size="['sm', 'md'].indexOf(mq) > -1 ? 'sm' : 'lg'"
150
+ :size="mq === 'sm' ? 'sm' : 'lg'"
148
151
  :label="callsToAction[0].label"
149
152
  :icon="callsToAction[0].icon"
150
153
  :link="callsToAction[0].url"
@@ -155,7 +158,7 @@
155
158
  />
156
159
  <asd20-button
157
160
  v-if="callsToAction.length >= 2"
158
- :size="['sm', 'md'].indexOf(mq) > -1 ? 'sm' : 'lg'"
161
+ :size="mq === 'sm' ? 'sm' : 'lg'"
159
162
  :label="callsToAction[1].label"
160
163
  :icon="callsToAction[1].icon"
161
164
  :link="callsToAction[1].url"
@@ -584,6 +587,15 @@ export default {
584
587
  }
585
588
  }
586
589
  }
590
+
591
+ @media (max-width: 767px) {
592
+ .asd20-page-header:not(.asd20-page-header--has-cta) {
593
+ &::after {
594
+ display: none;
595
+ }
596
+ }
597
+ }
598
+
587
599
  @media (min-width: 667px) {
588
600
  .asd20-page-header {
589
601
  &__image {
@@ -602,7 +614,7 @@ export default {
602
614
  }
603
615
  }
604
616
 
605
- @media (min-width: 1024px) {
617
+ @media (min-width: 768px) and (max-width: 1023px) {
606
618
  .asd20-page-header {
607
619
  .back {
608
620
  padding: 0;
@@ -614,9 +626,115 @@ export default {
614
626
  right: space(0);
615
627
  left: space(4);
616
628
  border-bottom-left-radius: 5rem;
629
+ }
630
+ &__main--has-image {
631
+ min-height: 400px;
632
+ }
633
+
634
+ &__main {
635
+ display: flex;
636
+ justify-content: space-between;
637
+ border-bottom-left-radius: 5rem;
638
+ background: var(--website-header__background-color)
639
+ var(--website-header__background-style);
640
+ }
617
641
 
642
+ &__top {
643
+ .asd20-organization-picker {
644
+ display: none !important;
645
+ }
646
+ }
647
+
648
+ &__tools {
649
+ flex-direction: row;
650
+ flex-wrap: wrap;
651
+ margin-top: 0;
652
+ .asd20-breadcrumb,
653
+ .back {
654
+ margin: 0 !important;
655
+ order: 1;
656
+ }
657
+ .language-and-tools {
658
+ order: 2;
659
+ }
660
+ .asd20-language-loader {
661
+ order: 2;
662
+ }
663
+ }
664
+ &__content {
665
+ width: 100%;
666
+ flex-basis: 50%;
667
+ flex-grow: 1;
668
+ padding: 1rem 1rem 1rem 2rem;
669
+ min-height: clamp(240px, 40vh, 300px);
670
+ /* margin-right: space(3);*/
671
+ background: transparent;
672
+ }
673
+
674
+ &__image {
675
+ display: flex;
676
+ max-height: 350px;
677
+ max-width: 45vw;
678
+ margin-top: 0;
679
+ margin-bottom: space(-1);
680
+ border-radius: 0;
681
+ border-bottom-left-radius: 2rem;
682
+ overflow: hidden;
683
+ flex-grow: 1;
684
+ min-width: 30vw;
685
+ img {
686
+ width: 100%;
687
+ height: 100%;
688
+ max-height: inherit;
689
+ object-fit: cover;
690
+ border-top: none;
691
+ /* opacity: 0;*/
692
+ }
693
+ }
694
+
695
+ h1 {
696
+ font-size: 2rem !important;
697
+ }
698
+
699
+ &__title-content {
700
+ position: relative;
701
+ max-width: space(35);
702
+ /* .asd20-page-header__lead {*/
703
+ /* margin-right: 25%;*/
704
+ /* }*/
705
+ }
706
+
707
+ & :deep(.asd20-organization-picker) {
708
+ display: flex;
709
+ margin: space(0) auto space(0) space(0);
710
+ }
711
+
712
+ &__call-to-action {
713
+ margin: space(-1) 60vw space(-1) space(3);
714
+ .asd20-button {
715
+ font-size: 1rem !important;
716
+ flex-shrink: 0;
717
+ padding: 0.25rem 2rem;
718
+ }
719
+ }
720
+ }
721
+ }
722
+
723
+ @media (min-width: 1024px) {
724
+ .asd20-page-header {
725
+ .back {
726
+ padding: 0;
727
+ margin: 0;
728
+ }
729
+ &::after {
730
+ top: space(6);
731
+ bottom: space(-2);
732
+ right: space(0);
733
+ left: space(4);
734
+ border-bottom-left-radius: 5rem;
618
735
  }
619
736
  &__main {
737
+ display: flex;
620
738
  justify-content: space-between;
621
739
  border-bottom-left-radius: 5rem;
622
740
  background: var(--website-header__background-color)
@@ -637,7 +755,7 @@ export default {
637
755
  max-height: 600px;
638
756
  margin-top: space(-1);
639
757
  margin-bottom: space(-1);
640
- border-radius: var(--website-shape__radius-m);
758
+ border-radius: var(--website-shape__radius-l);
641
759
  border-top-right-radius: 0;
642
760
  border-bottom-right-radius: 0;
643
761
  overflow: hidden;
@@ -694,10 +812,6 @@ export default {
694
812
  }
695
813
  }
696
814
 
697
- &__main {
698
- display: flex;
699
- }
700
-
701
815
  &__call-to-action {
702
816
  margin: space(-1) 60vw space(-1) space(3);
703
817
  .asd20-button {
package/src/components/templates/Asd20ArticleDigestCompactTemplate/index.vue CHANGED
@@ -400,7 +400,7 @@ export default {
400
400
  .asd20-notification-group--floating {
401
401
  position: absolute;
402
402
  top: space(2);
403
- right: space(0.75);
403
+ right: space(0.5);
404
404
  }
405
405
  .notification-group--inline {
406
406
  margin: space(2) space(1) space(1) space(1);
@@ -493,7 +493,7 @@ export default {
493
493
  margin-top: 0;
494
494
  .asd20-notification-group--floating {
495
495
  position: absolute;
496
- top: space(0.75);
496
+ top: 1rem;
497
497
  }
498
498
  .notification-group--inline {
499
499
  margin: space(2) space(3) space(1) space(3);
package/src/components/templates/Asd20ArticleDigestTemplate/index.vue CHANGED
@@ -414,7 +414,7 @@ export default {
414
414
  .asd20-notification-group--floating {
415
415
  position: absolute;
416
416
  top: space(2);
417
- right: space(0.75);
417
+ right: space(0.5);
418
418
  }
419
419
  .notification-group--inline {
420
420
  margin: space(2) space(1) space(1) space(1);
@@ -506,7 +506,7 @@ export default {
506
506
  margin-top: 0;
507
507
  .asd20-notification-group--floating {
508
508
  position: absolute;
509
- top: space(0.75);
509
+ top: 1rem;
510
510
  }
511
511
  .notification-group--inline {
512
512
  margin: space(2) space(3) space(1) space(3);
package/src/components/templates/Asd20ArticleListTemplate/index.vue CHANGED
@@ -460,7 +460,7 @@ export default {
460
460
  .asd20-notification-group--floating {
461
461
  position: absolute;
462
462
  top: space(2);
463
- right: space(0.75);
463
+ right: space(0.5);
464
464
  }
465
465
  .feed-title {
466
466
  margin: space(1) 0 0 0;
@@ -576,7 +576,7 @@ export default {
576
576
  margin-top: 0;
577
577
  .asd20-notification-group--floating {
578
578
  position: absolute;
579
- top: space(0.75);
579
+ top: 1rem;
580
580
  }
581
581
  .feed-title {
582
582
  margin-left: 0;
package/src/components/templates/Asd20ArticleTemplate/index.vue CHANGED
@@ -95,6 +95,7 @@
95
95
 
96
96
  <asd20-media-section
97
97
  v-if="shouldShowArticleMediaSection"
98
+ allow-single-image-gallery
98
99
  :images="articleGalleryImages || []"
99
100
  :videos="combinedMessageVideos || []"
100
101
  >
@@ -187,7 +188,7 @@ export default {
187
188
  .asd20-notification-group--floating {
188
189
  position: absolute;
189
190
  top: space(2);
190
- right: space(0.75);
191
+ right: space(0.5);
191
192
  }
192
193
  }
193
194
 
@@ -198,7 +199,7 @@ export default {
198
199
  margin-top: 0;
199
200
  .asd20-notification-group--floating {
200
201
  position: absolute;
201
- top: space(0.75);
202
+ top: 1rem;
202
203
  }
203
204
  .notification-group--inline {
204
205
  margin: space(2) space(3) space(1) space(3);
package/src/components/templates/Asd20ClubsTemplate/index.vue CHANGED
@@ -408,7 +408,7 @@ export default {
408
408
  .asd20-notification-group--floating {
409
409
  position: absolute;
410
410
  top: space(2);
411
- right: space(0.75);
411
+ right: space(0.5);
412
412
  }
413
413
  .asd20-page-content {
414
414
  display: block;
@@ -498,7 +498,7 @@ export default {
498
498
  margin-top: 0;
499
499
  .asd20-notification-group--floating {
500
500
  position: absolute;
501
- top: space(0.75);
501
+ top: 1rem;
502
502
  }
503
503
  .feed-title-wrapper {
504
504
  margin-left: 0;
package/src/components/templates/Asd20DetailAlternateTemplate/index.vue CHANGED
@@ -277,7 +277,7 @@ export default {
277
277
  margin-top: 0;
278
278
  .asd20-notification-group--floating {
279
279
  position: absolute;
280
- top: space(0.75);
280
+ top: 1rem;
281
281
  }
282
282
  .notification-group--inline {
283
283
  flex-basis: 100%;
package/src/components/templates/Asd20DetailImageFullTemplate/index.vue CHANGED
@@ -241,7 +241,7 @@ export default {
241
241
  .asd20-notification-group--floating {
242
242
  position: absolute;
243
243
  top: space(2);
244
- right: space(0.75);
244
+ right: space(0.5);
245
245
  }
246
246
  }
247
247
 
@@ -261,7 +261,7 @@ export default {
261
261
  margin-top: 0;
262
262
  .asd20-notification-group--floating {
263
263
  position: absolute;
264
- top: space(0.75);
264
+ top: 1rem;
265
265
  }
266
266
  .notification-group--inline {
267
267
  margin: space(2) space(3) space(1) space(3);
package/src/components/templates/Asd20DetailImageTemplate/index.vue CHANGED
@@ -234,7 +234,7 @@ export default {
234
234
  .asd20-notification-group--floating {
235
235
  position: absolute;
236
236
  top: space(2);
237
- right: space(0.75);
237
+ right: space(0.5);
238
238
  }
239
239
  }
240
240
 
@@ -254,7 +254,7 @@ export default {
254
254
  margin-top: 0;
255
255
  .asd20-notification-group--floating {
256
256
  position: absolute;
257
- top: space(0.75);
257
+ top: 1rem;
258
258
  }
259
259
  .notification-group--inline {
260
260
  margin: space(2) space(3) space(1) space(3);
package/src/components/templates/Asd20DetailTemplate/index.vue CHANGED
@@ -237,7 +237,7 @@ export default {
237
237
  .asd20-notification-group--floating {
238
238
  position: absolute;
239
239
  top: space(2);
240
- right: space(0.75);
240
+ right: space(0.5);
241
241
  }
242
242
  }
243
243
 
@@ -248,7 +248,7 @@ export default {
248
248
  margin-top: 0;
249
249
  .asd20-notification-group--floating {
250
250
  position: absolute;
251
- top: space(0.75);
251
+ top: 1rem;
252
252
  }
253
253
  .notification-group--inline {
254
254
  margin: space(2) space(3) space(1) space(3);
package/src/components/templates/Asd20FileListPageTemplate/index.vue CHANGED
@@ -222,7 +222,7 @@ export default {
222
222
  margin-top: 0;
223
223
  .asd20-notification-group--floating {
224
224
  position: absolute;
225
- top: space(0.75);
225
+ top: 1rem;
226
226
  }
227
227
  .notification-group--inline {
228
228
  margin: space(2) space(3) space(1) space(3);
package/src/components/templates/Asd20LoginsTemplate/index.vue CHANGED
@@ -368,7 +368,7 @@ export default {
368
368
  }
369
369
  .notification-group--floating {
370
370
  position: absolute;
371
- right: space(0.75);
371
+ right: space(0.5);
372
372
  top: space(1);
373
373
  z-index: 101;
374
374
  }
@@ -416,7 +416,7 @@ export default {
416
416
  .notification-group--floating {
417
417
  position: absolute;
418
418
  right: space(1.85);
419
- top: space(0.75);
419
+ top: 1rem;
420
420
  }
421
421
  .notification-group--inline {
422
422
  margin: space(2) space(3) space(1) space(3);
package/src/components/templates/Asd20WayfindingAccessibilityTemplate/index.vue CHANGED
@@ -240,7 +240,7 @@ export default {
240
240
  .asd20-notification-group--floating {
241
241
  position: absolute;
242
242
  top: space(2);
243
- right: space(0.75);
243
+ right: space(0.5);
244
244
  }
245
245
  .asd20-notification-group--inline {
246
246
  margin-top: space(2) !important;
@@ -281,7 +281,7 @@ export default {
281
281
  .asd20-template-wayfinding-accessibility {
282
282
  .asd20-notification-group--floating {
283
283
  position: absolute;
284
- top: space(0.75);
284
+ top: 1rem;
285
285
  }
286
286
  @include template-desktop;
287
287
  margin-left: space(3);
package/src/components/templates/Asd20WayfindingAlternateTemplate/index.vue CHANGED
@@ -216,7 +216,7 @@ export default {
216
216
  .asd20-notification-group--floating {
217
217
  position: absolute;
218
218
  top: space(2);
219
- right: space(0.75);
219
+ right: space(0.5);
220
220
  }
221
221
  .asd20-notification-group--inline {
222
222
  margin-top: space(2) !important;
@@ -277,7 +277,7 @@ export default {
277
277
  .asd20-template-wayfinding-alternate {
278
278
  .asd20-notification-group--floating {
279
279
  position: absolute;
280
- top: space(0.75);
280
+ top: 1rem;
281
281
  }
282
282
  @include template-desktop;
283
283
  margin-left: space(3);
package/src/components/templates/Asd20WayfindingImageTemplate/index.vue CHANGED
@@ -217,7 +217,7 @@ export default {
217
217
  .asd20-notification-group--floating {
218
218
  position: absolute;
219
219
  top: space(2);
220
- right: space(0.75);
220
+ right: space(0.5);
221
221
  }
222
222
  .asd20-notification-group--inline {
223
223
  margin-top: space(2) !important;
@@ -298,7 +298,7 @@ export default {
298
298
  margin-top: space(0);
299
299
  .asd20-notification-group--floating {
300
300
  position: absolute;
301
- top: space(0.75);
301
+ top: 1rem;
302
302
  }
303
303
  .asd20-page-content {
304
304
  padding: space(1);
package/src/components/templates/Asd20WayfindingTemplate/index.vue CHANGED
@@ -214,7 +214,7 @@ export default {
214
214
  .asd20-notification-group--floating {
215
215
  position: absolute;
216
216
  top: space(2);
217
- right: space(0.75);
217
+ right: space(0.5);
218
218
  }
219
219
  .asd20-notification-group--inline {
220
220
  margin-top: space(2) !important;
@@ -255,7 +255,7 @@ export default {
255
255
  .asd20-template-wayfinding {
256
256
  .asd20-notification-group--floating {
257
257
  position: absolute;
258
- top: space(0.75);
258
+ top: 1rem;
259
259
  }
260
260
  @include template-desktop;
261
261
  margin-left: space(3);
package/src/mixins/pageTemplateMixin.js CHANGED
@@ -251,7 +251,7 @@ export default {
251
251
 
252
252
  shouldShowArticleMediaSection() {
253
253
  return (
254
- this.articleGalleryImages.length >= 3 ||
254
+ this.articleGalleryImages.length > 0 ||
255
255
  this.combinedMessageVideos.length > 0
256
256
  )
257
257
  },