@asd20/ui 3.2.1033 → 3.2.1035

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.1033",
+  "version": "3.2.1035",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/atoms/Asd20Messaging/index.vue

@@ -19,9 +19,14 @@
       <div v-if="shortDescription" class="lead short-description">
         <span v-html="shortDescription"></span>
         <a v-if="detailLink" :href="detailLink">{{ detailLinkLabel }}</a>
-        <span class="external-link" v-if="isAbsoluteUrl(detailLink)">
-          <asd20-icon name="external" size="sm" />
-        </span>
+        <div class="external-link" v-if="isExternalUrl(detailLink)">
+          <asd20-icon
+            name="external"
+            size="sm"
+            aria-hidden="true"
+            focusable="false"
+          />
+        </div>
       </div>
       <p
         v-if="longDescription"
@@ -62,6 +67,148 @@
 import Asd20Button from '../Asd20Button'
 import Asd20Icon from '../Asd20Icon'
 
+export default {
+  name: 'Asd20Messaging',
+  inheritAttrs: false,
+  components: { Asd20Button, Asd20Icon },
+  props: {
+    images: { type: Array, default: () => [] },
+    heading: { type: String, default: '' },
+    headingTagName: { type: String, default: 'h2' },
+    shortDescription: { type: String, default: '' },
+    longDescription: { type: String, default: '' },
+    bodyContent: { type: String, default: '' },
+    detailLink: { type: String, default: '' },
+    detailLinkLabel: { type: String, default: '' },
+    callsToAction: { type: Array, default: () => [] },
+    fullscreen: { type: Boolean, default: false },
+    padded: { type: Boolean, default: false },
+
+    /**
+     * If true, treat "www.asd20.org" the same as "asd20.org" for local/external checks.
+     * Leave true unless you specifically want "www." to be considered a separate subdomain.
+     */
+    treatWwwAsLocal: { type: Boolean, default: true },
+  },
+
+  data () {
+    return {
+      // SSR-safe: fill on client in mounted()
+      currentOrigin: '',
+      currentHost: '',
+    }
+  },
+
+  mounted () {
+    if (typeof window !== 'undefined' && window.location) {
+      this.currentOrigin = window.location.origin
+      this.currentHost = window.location.hostname
+    }
+  },
+
+  computed: {
+    hash() {
+      return this.heading.toLowerCase().split(' ').join('-')
+    },
+    classes() {
+      return {
+        'asd20-messaging': true,
+        'asd20-messaging--fullscreen': this.fullscreen,
+        'asd20-messaging--padded': this.padded,
+      }
+    },
+    dynamicComponent() {
+      return {
+        template: `<div>${this.bodyContent}</div>`,
+      }
+    },
+    messageImage() {
+      const messageImages = Array.isArray(this.images) ? this.images : []
+      const coverImage = messageImages.find(i => i.isCover)
+      let messageImageUrl = null
+      if (coverImage) {
+        const coverImageFiles = coverImage.files || []
+        const coverImageFull = coverImageFiles.find(f => f.name === 'full')
+        if (coverImageFull && coverImageFull.filename && coverImageFull.filename.includes('headerimage')) {
+          messageImageUrl = ''
+        } else {
+          messageImageUrl = coverImageFull ? coverImageFull.url : (coverImage.url || '')
+        }
+      }
+      return messageImageUrl
+    },
+    messageImageAlt() {
+      const messageImages = Array.isArray(this.images) ? this.images : []
+      const coverImage = messageImages.find(i => i.isCover)
+      return coverImage?.metadata?.alt || ''
+    },
+  },
+
+  methods: {
+    normalizeHost (host) {
+      if (!host) return ''
+      const h = host.toLowerCase()
+      return this.treatWwwAsLocal ? h.replace(/^www\./, '') : h
+    },
+
+    isHttpLike (urlObj) {
+      // treat only http/https (and protocol-relative via base) as web links
+      return urlObj.protocol === 'http:' || urlObj.protocol === 'https:'
+    },
+
+    // "Local" means: relative URL or absolute URL whose hostname matches current hostname
+    isLocalUrl (href) {
+      if (!href || typeof href !== 'string') return true // nothing to show icon for
+      const s = href.trim()
+
+      // Always consider these "local" (no external icon)
+      if (s.startsWith('#') || s.startsWith('mailto:') || s.startsWith('tel:')) return true
+
+      // Build a URL object using currentOrigin as base so that
+      // - relative paths "/academics" resolve to current host
+      // - protocol-relative "//liberty.asd20.org" resolves correctly
+      // If currentOrigin is empty (SSR), use a dummy base.
+      const base = this.currentOrigin || 'http://example.local'
+      let u
+      try {
+        u = new URL(s, base)
+      } catch (e) {
+        // If it somehow can't be parsed, assume it's local (no icon)
+        return true
+      }
+
+      // Not http/https? treat as local (no icon)
+      if (!this.isHttpLike(u)) return true
+
+      // Relative URLs will have the same host as base; absolute will carry their own host.
+      const linkHost = this.normalizeHost(u.hostname)
+      const currHost = this.normalizeHost(this.currentHost || new URL(base).hostname)
+      return linkHost === currHost
+    },
+
+    // External if it's a web URL AND not local
+    isExternalUrl (href) {
+      if (!href || typeof href !== 'string') return false
+      const s = href.trim()
+      const base = this.currentOrigin || 'http://example.local'
+      let u
+      try {
+        u = new URL(s, base)
+      } catch (e) {
+        return false
+      }
+      if (!this.isHttpLike(u)) return false
+      return !this.isLocalUrl(s)
+    },
+  },
+}
+</script>
+
+
+<!-- <script>
+import Asd20Button from '../Asd20Button'
+import Asd20Icon from '../Asd20Icon'
+
 export default {
   name: 'Asd20Messaging',
   inheritAttrs: false,
@@ -136,7 +283,7 @@ export default {
     },
   },
 }
-</script>
+</script> -->
 
 <style lang="scss" scoped>
 @import '../../../design/_variables.scss';

package/src/components/organisms/Asd20AppHeader/index.stories.js

@@ -16,7 +16,7 @@ storiesOf('Organisms - Asd20AppHeader', module).add(
   () => ({
     ...wrapper,
     template: `
-      <Asd20AppHeader title="App Name" icon="files" version="1.0.0">
+      <Asd20AppHeader title="App Name" icon="calendar" version="1.0.0">
       </Asd20AppHeader>`,
   }),
   { info }

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

@@ -1,31 +1,25 @@
 <template>
   <header class="asd20-app-header">
-    <asd20-button
-      v-show="!zoomed"
-      class="back-button"
-      icon="chevron"
-      :icon-angle="-90"
-      size="xs"
-      :label="backLabel"
-      transparent
-      horizontal
-      text-only
-      :link="backLink"
-    ></asd20-button>
-    <h1>
-      <div
-        :class="
-          zoomed
-            ? 'asd20-app-header__title asd20-app-header__zoomed'
-            : 'asd20-app-header__title'
-        "
-      >
+    <div class="asd20-app-header__title">
+      <asd20-button
+        class="back-button"
+        icon="chevron"
+        :icon-angle="-90"
+        size="xs"
+        :label="backLabel"
+        transparent
+        horizontal
+        text-only
+        :link="backLink"
+      ></asd20-button>
+      <div class="icon-and-title">
         <asd20-icon v-if="icon" :name="icon" size="md" />
-        {{ title }}
+        <h1>{{ title }}</h1>
       </div>
-      <asd20-district-logo link="https://www.asd20.org" />
-    </h1>
-    <!-- <span class="version" v-if="version && !zoomed" v-html="version"></span> -->
+    </div>
+
+    <asd20-district-logo link="https://www.asd20.org" />
+    <!-- <span class="version" v-if="version" v-html="version"></span> -->
     <slot />
   </header>
 </template>
@@ -45,18 +39,6 @@ export default {
     backLink: { type: String, default: 'https://www.asd20.org' },
     backLabel: { type: String, default: 'asd20.org' },
   },
-  data: () => ({
-    zoomed: false,
-  }),
-  mounted() {
-    this.zoomed = window.innerHeight <= 500
-    window.addEventListener('resize', this.handleResize)
-  },
-  methods: {
-    handleResize() {
-      this.zoomed = window.innerHeight <= 500
-    },
-  },
 }
 </script>
 
@@ -67,84 +49,63 @@ export default {
   position: relative;
   z-index: 100;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   flex-shrink: 0;
   background: var(--color__primary);
   color: white;
-  // background: white;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   border-bottom: 1px solid var(--color__tertiary);
-
   &__title {
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-    padding: 0 0 space(0.5) 0;
-    // width: 100vw;
-    // border-bottom: 1px solid var(--color__tertiary);
-  }
-  &__zoomed,
-  .asd20-district-logo {
-    padding: 0 !important;
-  }
-
-  h1 {
-    margin: 0;
-    font-size: 1.5rem;
-    color: var(--color__on-primary);
-    flex-grow: 1;
-    width: 100%;
-    border-bottom: 1px solid var(--color__tertiary);
-    display: flex;
-    align-items: center;
-    font-family: var(--website-typography__font-family-headlines);
-    .asd20-icon {
-      margin: 0 space(0.5);
-      --line-color: white;
+    .icon-and-title {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      padding-bottom: 0.5rem;
+      h1 {
+        margin: 0;
+        font-size: 1.5rem;
+        color: var(--color__on-primary);
+        flex-grow: 1;
+        width: 100%;
+        // border-bottom: 1px solid var(--color__tertiary);
+        display: flex;
+        align-items: center;
+        font-family: var(--website-typography__font-family-headlines);
+      }
+      .asd20-icon {
+        margin: 0 space(0.5);
+        --line-color: white;
+      }
     }
   }
-  .version {
-    position: absolute;
-    top: space(3);
-    right: space(-0.45);
-    display: block;
-    font-size: 0.75rem;
-    font-family: var(--website-typography__font-family-headlines);
-    color: lightgray;
-    text-transform: uppercase;
-    margin-left: space(0.5);
-    margin-right: space(0.5);
-    order: 2;
-  }
 
   .asd20-district-logo {
     margin-left: auto;
     margin-right: space(1);
-    height: space(1.5);
-    padding: space(0.5) 0;
-    --fill-one: #fff;
-    --fill-two: #ccc;
-    // --fill-one: #{asd20-color('brand-blue')};
-    // --fill-two: #{asd20-color('brand-gray')};
-  }
-
-  .asd20-button {
-    margin-left: auto;
-    margin-right: space(0.5);
-    order: 3;
-    border-radius: 0;
+    height: 1.5rem;
+      padding: 0.75rem 0 0 0;
+    &::v-deep svg {
+      fill: #fff;
+      .district {
+        fill: #ccc;
+      }
+    }
   }
 
-  .asd20-button + .asd20-button {
-    margin-left: 0;
-  }
-  .asd20-button:not(.back-button) {
-    border-left: 1px solid var(--color__tertiary);
-  }
+  // .version {
+  //   position: absolute;
+  //   top: space(3);
+  //   right: space(-0.45);
+  //   display: block;
+  //   font-size: 0.75rem;
+  //   font-family: var(--website-typography__font-family-headlines);
+  //   color: lightgray;
+  //   text-transform: uppercase;
+  //   margin-left: space(0.5);
+  //   margin-right: space(0.5);
+  //   order: 2;
+  // }
 
-  .asd20-button.asd20-button--transparent {
-    margin-right: 0;
-  }
   .back-button {
     // width: 100vw;
     background: var(--color__primary);
@@ -161,38 +122,12 @@ export default {
     }
   }
 }
-
-@media (max-width: 767px) {
-  .asd20-app-header::v-deep .asd20-district-logo {
-    display: none;
-  }
+@media (min-width: 768px) {
   .asd20-app-header {
-    h1 .version {
-      display: none;
-    }
-    .asd20-button:not(.back-button) {
-      &::v-deep .asd20-button__label {
-        display: none;
-      }
-    }
-    .asd20-app-header__title {
-      padding: space(0.125) 0;
-      &::v-deep .asd20-icon {
-        margin-right: space(0.125);
-      }
-    }
-  }
-}
-
-@media (max-width: 480px) {
-  .asd20-app-header {
-    &__title {
-      display: flex;
-      align-items: center;
-      flex-shrink: 0;
-      padding: space(0.5) 0;
-      width: 100vw;
-      border-bottom: 1px solid var(--color__tertiary);
+    align-items: flex-end;
+    .asd20-district-logo {
+      padding: 0 0 0.25rem 0;
+      height: space(1.5);
     }
   }
 }

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

@@ -48,7 +48,7 @@ $factoids-header-fg: var(--color__primary);
     font-size: 1.25rem;
     padding: space(0.5) space(1) space(0.5) space(1);
     z-index: -1;
-    border-top: 2px solid var(--color__tertiary);
+    // border-top: 2px solid var(--color__tertiary);
   }
 }
 
@@ -56,8 +56,8 @@ $factoids-header-fg: var(--color__primary);
   .asd20-factoids-section {
     grid-column: 1 / -1;
     h2 {
-      width: calc(100% - #{space(6)});
-      margin-left: space(6);
+      width: calc(100% - #{space(3)});
+      margin-left: space(3);
     }
   }
 }

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

@@ -56,15 +56,6 @@
     </transition>
 
     <transition name="slide">
-      <!-- <asd20-site-menu
-        ref="siteMenu"
-        :class="zoomed ? 'zoomed' : ''"
-        v-show="menuOpen"
-        :active="menuOpen"
-        @update:active="$emit('update:menuOpen', $event)"
-        :sections="navigation"
-        v-scroll-lock="menuOpen"
-      /> -->
       <asd20-site-menu
         ref="siteMenu"
         :class="zoomed ? 'zoomed' : ''"

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

@@ -1,6 +1,6 @@
 <template>
   <component :is="tag" class="asd20-swiper-feed">
-    <h2 aria-label="Feed title">
+    <h2 class="swiper-title" aria-label="Feed title">
       <asd20-icon v-if="icon" :name="icon" size="lg" /><span
         v-html="title"
       ></span>
@@ -142,9 +142,9 @@ export default {
   display: flex;
   flex-direction: column;
   position: relative;
-  margin: 0;
-  padding: space(2) space(2) space(2) 0;
-  background: var(--website-page__alternate-background-color);
+  margin: space(2) 0 space(0.5) 0;
+  // padding: space(1) space(2) space(1) 0;
+  // background: var(--website-page__alternate-background-color);
 
   --color__fade-overlay-left: var(--website-page__background-color);
   --color__fade-overlay-right: var(--website-page__alternate-background-color);
@@ -157,17 +157,18 @@ export default {
     display: block;
     position: absolute;
     left: 0;
-    right: space(1);
-    top: space(1);
-    bottom: space(0);
-    background: var(--website-page__background-color);
-    border-radius: var(--website-shape__radius-m);
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+    right: 0;
+    top: 30%;
+    bottom: 30%;
+    background: var(--website-page__alternate-background-color);
+    border-radius: 0;
+    // border-radius: var(--website-shape__radius-m);
+    // border-top-left-radius: 0;
+    // border-bottom-left-radius: 0;
     z-index: 0;
   }
 
-  h2 {
+  .swiper-title {
     display: flex;
     font-size: 1.5rem;
     line-height: 1;
@@ -175,6 +176,9 @@ export default {
     text-align: left;
     margin: 0 0 0 space(1);
     align-items: center;
+    border-bottom: 3px solid var(--color__accent);
+    padding-bottom: space(0.5);
+    width: 100%;
   }
 
   .asd20-icon {
@@ -197,6 +201,7 @@ export default {
   .feed-buttons {
     display: flex;
     flex-direction: column;
+    padding-bottom: space(0.5);
   }
 
   .asd20-button {
@@ -224,13 +229,14 @@ export default {
 
 @media (min-width: 1024px) {
   .asd20-swiper-feed {
-    h2 {
-      margin-left: space(3);
+    .swiper-title {
+      margin: 0 space(1) 0 space(3);
+      width: inherit;
     }
 
-    &::after {
-      right: space(3);
-    }
+    // &::after {
+    //   right: space(3);
+    // }
 
     .asd20-swiper {
       // margin-left: space(1);

package/src/components/templates/Asd20DetailAlternateTemplate/index.vue

@@ -256,23 +256,23 @@ export default {
     top: space(2.0375);
   }
 
-  .asd20-feeds-section--top {
-    // margin-top: space(1);
-    .asd20-swiper-feed:first-child {
-      padding-top: space(2);
-      padding-bottom: space(1);
-      &::after {
-        top: space(1);
-      }
-    }
-    .asd20-swiper-feed:last-child {
-      // margin-top: space(-1);
-      padding-bottom: space(2);
-      &::after {
-        bottom: space(1);
-      }
-    }
-  }
+  // .asd20-feeds-section--top {
+  //   // margin-top: space(1);
+  //   .asd20-swiper-feed:first-child {
+  //     padding-top: space(2);
+  //     padding-bottom: space(1);
+  //     &::after {
+  //       top: space(1);
+  //     }
+  //   }
+  //   .asd20-swiper-feed:last-child {
+  //     // margin-top: space(-1);
+  //     padding-bottom: space(2);
+  //     &::after {
+  //       bottom: space(1);
+  //     }
+  //   }
+  // }
 }
 
 @media (min-width: 1024px) {

package/src/components/templates/Asd20WayfindingAlternateTemplate/index.vue

@@ -227,23 +227,23 @@ export default {
   .asd20-notification-group--inline {
     margin-top: space(2) !important;
   }
-  .asd20-feeds-section {
-    margin-top: space(1);
-    .asd20-swiper-feed:first-child {
-      padding-top: space(2);
-      padding-bottom: space(1);
-      &::after {
-        top: space(1);
-      }
-    }
-    .asd20-swiper-feed:last-child {
-      // margin-top: space(-1);
-      padding-bottom: space(2);
-      &::after {
-        bottom: space(1);
-      }
-    }
-  }
+  // .asd20-feeds-section {
+  //   margin-top: space(1);
+  //   .asd20-swiper-feed:first-child {
+  //     padding-top: space(2);
+  //     padding-bottom: space(1);
+  //     &::after {
+  //       top: space(1);
+  //     }
+  //   }
+  //   .asd20-swiper-feed:last-child {
+  //     // margin-top: space(-1);
+  //     padding-bottom: space(2);
+  //     &::after {
+  //       bottom: space(1);
+  //     }
+  //   }
+  // }
   .intro-message {
     .primary-messaging-section {
       justify-content: center;

package/src/components/templates/Asd20WayfindingImageTemplate/index.vue

@@ -231,22 +231,22 @@ export default {
   .notification-group--inline {
     margin-bottom: space(1);
   }
-  .asd20-feeds-section {
-    margin-top: space(1);
-    .asd20-swiper-feed:first-child {
-      padding-top: space(2);
-      padding-bottom: space(1);
-      &::after {
-        top: space(1);
-      }
-    }
-    .asd20-swiper-feed:last-child {
-      padding-bottom: space(2);
-      &::after {
-        bottom: space(1);
-      }
-    }
-  }
+  // .asd20-feeds-section {
+  //   margin-top: space(1);
+  //   .asd20-swiper-feed:first-child {
+  //     padding-top: space(2);
+  //     padding-bottom: space(1);
+  //     &::after {
+  //       top: space(1);
+  //     }
+  //   }
+  //   .asd20-swiper-feed:last-child {
+  //     padding-bottom: space(2);
+  //     &::after {
+  //       bottom: space(1);
+  //     }
+  //   }
+  // }
   .asd20-page-content:not(.intro-message) .primary-messaging-section {
     padding: space(1) space(0);
   }