@asd20/ui-next 2.10.7 → 2.10.9

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [2.10.9](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.10.8...ui-next-v2.10.9) (2026-05-19)
+
+
+### Bug Fixes
+
+* add storybook fix for _media urls; add event modal animation ([55c1167](https://github.com/academydistrict20/asd20-ui-next/commit/55c1167e6a6259c8fc2580a6c3bd29b0e5675651))
+
+## [2.10.8](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.10.7...ui-next-v2.10.8) (2026-05-15)
+
 ## [2.10.7](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.10.6...ui-next-v2.10.7) (2026-05-15)
 
 ## [2.10.6](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.10.5...ui-next-v2.10.6) (2026-05-15)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.10.7",
+  "version": "2.10.9",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/molecules/Asd20Card/index.vue

@@ -611,10 +611,11 @@ export default {
     overflow: visible; /* allow the date badge to protrude*/
 
     .asd20-card__content {
-      padding: space(0.75);
+      padding: 1.5rem 1rem;
       position: relative;
       z-index: 2; /* keep content above the logo*/
       overflow: visible;
+      justify-content: center;
     }
 
     /* hide large-only sections*/
@@ -628,7 +629,7 @@ export default {
     .asd20-card__date-left {
       display: flex;
       align-items: center;
-      gap: space(0.75);
+      gap: 0.5rem;
       position: relative; /* for overlay link*/
       min-height: 5.25rem;
     }
@@ -731,6 +732,7 @@ export default {
     margin-left: space(-0.25);
     .asd20-tag {
       padding: 0 space(0.25);
+      font-size: 0.65rem;
     }
   }
 

package/src/components/molecules/Asd20LanguageTranslation/index.vue

@@ -1,9 +1,11 @@
 <template>
-  <div :class="['asd20-language-translation', { 'asd20-language-translation--no-label': noLabel }]">
-    <asd20-loader
-      v-show="_languageLoading"
-      size="sm"
-    ></asd20-loader>
+  <div
+    :class="[
+      'asd20-language-translation',
+      { 'asd20-language-translation--no-label': noLabel },
+    ]"
+  >
+    <asd20-loader v-show="_languageLoading" size="sm"></asd20-loader>
     <asd20-select-input
       v-show="languageOptions"
       v-model="resolvedLanguageCode"
@@ -94,18 +96,29 @@ export default {
     /* margin-bottom: space(0.5);*/
     background: transparent;
   }
+  & :deep(.asd20-select-input__select-wrapper:focus) {
+    border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+  }
   & :deep(.asd20-select-input) {
     margin-bottom: 0;
+    padding-right: 0.5rem;
     .asd20-icon {
-      margin-left: space(0.25);
+      margin: 0 space(0.25);
       width: 32px !important;
       height: 32px !important;
       --line-color: var(--website-icon__line-color) !important;
       --fill-color: var(--website-menu__icon-fill-color) !important;
     }
   }
-  & :deep(.asd20-select-input__overlay-label)::after {
-    margin-right: space(1);
+  & :deep(.asd20-select-input__overlay-label) {
+    padding: 0.375rem 0.75rem 0.375rem 0.5rem;
+      border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+  }
+  & :deep(.asd20-select-input select:focus) {
+    border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
   }
   &--no-label {
     border-radius: 50%;

package/src/components/organisms/Asd20AiSearch/index.vue

@@ -504,11 +504,15 @@ export default {
       height: 2.75rem;
       font-size: 0.95rem;
       background: transparent;
+      padding-left: 2.5rem;
+      padding-right: 1rem;
     }
 
     :deep(.asd20-search-field input:focus) {
-      box-shadow: none;
-      outline: none;
+      // box-shadow: none !important;
+      // outline: none !important;
+      border-top-left-radius: 2rem;
+      border-bottom-left-radius: 2rem;
     }
 
     :deep(.asd20-search-field input::-webkit-search-cancel-button) {
@@ -558,6 +562,7 @@ export default {
     position: relative;
     flex: 1 1 auto;
     min-width: 0;
+    padding-left: 0.5rem;
   }
 
   &__go-button {

package/src/components/organisms/Asd20DistrictVideoFooter/index.vue

@@ -22,6 +22,7 @@
 <script>
 import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
 import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
+import { resolveMediaCssUrl } from '../../../helpers/mediaUrl'
 
 export default {
   name: 'Asd20DistrictVideoFooter',
@@ -56,7 +57,9 @@ export default {
       if (isDistrict) {
         return {
           '--asd20-district-footer-image':
-            "url('/_media/asd20-images/page-images/asd20-footer-image.jpg')",
+            resolveMediaCssUrl(
+              'asd20-images/page-images/asd20-footer-image.jpg'
+            ),
         }
       }
 

package/src/components/organisms/Asd20EventModal/index.vue

@@ -187,10 +187,47 @@ export default {
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    width: 8rem;
-    height: 8rem;
+    width: 10rem;
+    height: 10rem;
     margin-bottom: space(1);
-    border-radius: var(--website-shape__radius-s);
+    border-radius: 999px;
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: -1;
+      inset: -0.15rem;
+      border-radius: inherit;
+      background: conic-gradient(
+        from 0deg,
+        transparent 0deg,
+        transparent 55deg,
+        rgba(255, 255, 255, 0.2) 80deg,
+        rgba(255, 255, 255, 0.75) 98deg,
+        var(--accent-color) 114deg,
+        rgba(255, 255, 255, 0.25) 132deg,
+        transparent 160deg,
+        transparent 235deg,
+        rgba(255, 255, 255, 0.2) 260deg,
+        rgba(255, 255, 255, 0.75) 278deg,
+        var(--accent-color) 294deg,
+        rgba(255, 255, 255, 0.25) 312deg,
+        transparent 340deg,
+        transparent 360deg
+      );
+      filter: blur(0.5px);
+      -webkit-mask: radial-gradient(
+        farthest-side,
+        transparent calc(100% - 0.22rem),
+        #000 calc(100% - 0.18rem)
+      );
+      mask: radial-gradient(
+        farthest-side,
+        transparent calc(100% - 0.22rem),
+        #000 calc(100% - 0.18rem)
+      );
+      opacity: 0.6;
+      animation: asd20-event-date-ring 14s linear infinite;
+    }
     small {
       color: var(---website-card__reverse-foreground-color);
     }
@@ -220,10 +257,6 @@ export default {
       max-width: 100%;
       padding: space(1);
       font-size: 1rem;
-
-      // * {
-      //   align-items: center;
-      // }
     }
 
     .description {
@@ -244,6 +277,23 @@ export default {
     }
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .asd20-event-modal {
+    &__date {
+      &::before {
+        animation: none;
+      }
+    }
+  }
+}
+
+@keyframes asd20-event-date-ring {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 @media (min-width: 1024px) {
   .asd20-event-modal {
     &__header {
@@ -267,7 +317,7 @@ export default {
         font-size: 1.125rem;
       }
       .middle {
-        font-size: 6rem;
+        font-size: 5rem;
       }
     }
     &__details {

package/src/components/organisms/Asd20PageFooter/index.vue

@@ -179,6 +179,7 @@ import Asd20Logo from '../../../components/atoms/Asd20Logo'
 import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
 import organizationAddress from '../../../data/organization-address.json'
 import { navigateInternalHref } from '../../../helpers/linkPolicy'
+import { resolveMediaCssUrl } from '../../../helpers/mediaUrl'
 import {
   organizationLevel,
   organizationName,
@@ -266,7 +267,9 @@ export default {
       if (isDistrict) {
         return {
           '--asd20-district-footer-image':
-            "url('/_media/asd20-images/page-images/asd20-footer-image.jpg')",
+            resolveMediaCssUrl(
+              'asd20-images/page-images/asd20-footer-image.jpg'
+            ),
         }
       }
 

package/src/components/organisms/Asd20PageHeader/index.vue

@@ -147,6 +147,7 @@
         reversed
         horizontal
         centered
+        highlighted
       />
       <asd20-button
         v-if="callsToAction.length >= 2"
@@ -158,6 +159,7 @@
         reversed
         horizontal
         centered
+        highlighted
       />
     </div>
     <div

package/src/components/organisms/Asd20PrimaryHeader/index.vue

@@ -34,6 +34,7 @@
 <script>
 import Asd20Messaging from '../../atoms/Asd20Messaging'
 import _get from 'lodash/get'
+import { resolveMediaCssUrl } from '../../../helpers/mediaUrl'
 
 export default {
   name: 'Asd20PrimaryHeader',
@@ -61,7 +62,7 @@ export default {
     photoStripStyle() {
       return {
         '--asd20-photo-strip-image':
-          "url('/_media/asd20-images/page-images/ASD20PhotoStrip.jpg')",
+          resolveMediaCssUrl('asd20-images/page-images/ASD20PhotoStrip.jpg'),
       }
     },
     firstMessage() {

package/src/components/organisms/Asd20TertiaryHeader/index.vue

@@ -10,6 +10,7 @@
 
 <script>
 import Asd20Messaging from '../../atoms/Asd20Messaging'
+import { resolveMediaCssUrl } from '../../../helpers/mediaUrl'
 
 export default {
   name: 'Asd20TertiaryHeader',
@@ -29,7 +30,9 @@ export default {
     headerStyle() {
       return {
         '--asd20-header-divider-image':
-          "url('/_media/asd20-images/page-images/asd20-header-divider.jpg')",
+          resolveMediaCssUrl(
+            'asd20-images/page-images/asd20-header-divider.jpg'
+          ),
       }
     },
   },

package/src/helpers/mediaUrl.js

@@ -0,0 +1,46 @@
+import { normalizeBaseUrl, resolveRuntimeConfigValue } from './runtimeConfig'
+
+const DEFAULT_MEDIA_BASE_URL = '/_media'
+const STORYBOOK_MEDIA_BASE_URL =
+  'https://asd20websitestorage.blob.core.windows.net'
+
+function normalizeMediaPath(path) {
+  return typeof path === 'string' ? path.trim().replace(/^\/+/, '') : ''
+}
+
+function isStorybookRuntime() {
+  return (
+    typeof window !== 'undefined' &&
+    Boolean(window.__ASD20_UI_STORYBOOK__)
+  )
+}
+
+export function resolveMediaUrl(path, options = {}) {
+  const mediaPath = normalizeMediaPath(path)
+
+  if (!mediaPath) {
+    return ''
+  }
+
+  const configuredBaseUrl = resolveRuntimeConfigValue({
+    explicitValue: options.mediaBaseUrl,
+    runtimeConfig: options.runtimeConfig,
+    runtimeConfigKeys: ['mediaBaseUrl', 'mediaEndpoint'],
+    envKeys: ['MEDIA_BASE_URL', 'VUE_APP_MEDIA_BASE_URL'],
+  })
+
+  const baseUrl = normalizeBaseUrl(
+    configuredBaseUrl ||
+      (isStorybookRuntime()
+        ? STORYBOOK_MEDIA_BASE_URL
+        : DEFAULT_MEDIA_BASE_URL)
+  )
+
+  return `${baseUrl}/${mediaPath}`
+}
+
+export function resolveMediaCssUrl(path, options = {}) {
+  const mediaUrl = resolveMediaUrl(path, options)
+
+  return mediaUrl ? `url(${JSON.stringify(mediaUrl)})` : ''
+}