@asd20/ui 3.2.1032 → 3.2.1034

package/package.json

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

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

@@ -19,23 +19,32 @@
       <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"
         class="long-description"
         v-html="longDescription"
       />
-      <!-- <div v-if="bodyContent" class="asd20-messaging__body-content">
+      <div v-if="bodyContent" class="asd20-messaging__body-content">
         <component :is="dynamicComponent"></component>
-      </div> -->
-      <div
+      </div>
+
+      <!-- use this in place of the dynamicComponent above for simpler/safer
+          body content rendering; it does prevent usage of Vue components like
+          nuxt-link during build -->
+      <!-- <div
         v-if="bodyContent"
         class="asd20-messaging__body-content"
         v-html="bodyContent"
-      />
+      /> -->
 
       <div
         v-if="callsToAction && callsToAction.length > 0"
@@ -58,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,
@@ -87,11 +238,11 @@ export default {
         'asd20-messaging--padded': this.padded,
       }
     },
-    // dynamicComponent() {
-    //   return {
-    //     template: `<div>${this.bodyContent}</div>`,
-    //   }
-    // },
+    dynamicComponent() {
+      return {
+        template: `<div>${this.bodyContent}</div>`,
+      }
+    },
     messageImage() {
       // Get full image
       const messageImages = Array.isArray(this.images) ? this.images : []
@@ -132,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/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' : ''"