@asd20/ui 3.2.978 → 3.2.980

package/package.json

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

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

@@ -11,6 +11,7 @@
         ? undefined
         : '_blank'
     "
+    v-bind="[trackingCode ? { [trackingCode]: '' } : {}]"
   >
     <asd20-icon
       v-if="icon"
@@ -39,6 +40,7 @@ export default {
     opposite: { type: Boolean, default: false },
     hideLabel: { type: Boolean, default: false },
     link: { type: String, default: '' },
+    trackingCode: { type: String, default: '' },
     icon: { type: String, default: '' },
     badge: { type: Number, default: 0 },
     size: {
@@ -76,14 +78,12 @@ export default {
       }
     },
     tag() {
-      return this.link ? 'a' : 'button'
+      if (!this.link || this.link === ' ') {
+        return 'button'
+      } else {
+        return 'a'
+      }
     },
-    // openNewWindow() {
-    //   if (!this.link) return ''
-    //   return this.link[0] === '/' || this.link.indexOf('asd20.org') > -1
-    //     ? ''
-    //     : '_blank'
-    // },
   },
 }
 </script>

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

@@ -214,6 +214,8 @@ export default {
       padding: 0;
       display: flex;
       align-items: center;
+      flex-direction: column;
+      justify-content: flex-start;
 
       .asd20-messaging__content {
         position: relative;
@@ -225,13 +227,13 @@ export default {
       .message-image {
         position: relative;
         padding-top: 0.5rem;
-        padding-right: space(1);
+        padding-bottom: space(1);
         margin: 0;
         border-top: none;
         padding-top: 0;
         img {
-          width: 15vw;
-          height: 15vw;
+          width: 100%;
+          height: 20vw;
         }
       }
     }

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

@@ -69,7 +69,7 @@
         <asd20-button
           label="Submit Issue"
           :disabled="!isValid || sending"
-          @click="sendAccessibilityIssue"
+          @click.native="sendAccessibilityIssue"
           horizontal
           centered
           bordered
@@ -149,6 +149,7 @@ export default {
       if (!pattern.test(value)) {
         validationErrors.push('A valid email address is required')
       }
+      console.log('Email validation errors:', validationErrors)
       return validationErrors
     },
     captchaVerified(token) {
@@ -156,10 +157,14 @@ export default {
       this.submitIssue()
     },
     async sendAccessibilityIssue() {
-      if (!this.isValid || !this.$sendAccessibilityIssue) return
+      alert('Submit button clicked')
+      console.log('$sendAccessibilityIssue is', this.$sendAccessibilityIssue)
+
+      if (!this.isValid) return
       this.sending = true
 
       try {
+        console.log('Sending accessibility issue:', this.form)
         await this.$sendAccessibilityIssue(
           this.form,
           this.$config.happyfoxEndpoint,

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

@@ -183,7 +183,7 @@ export default {
       padding: space(2) space(1) space(2) space(2);
       &::v-deep > * {
         // flex: 1 1 var(--minimum-column-width);
-        // margin: space(1) !important;
+        margin: space(1) !important;
       }
     }
     &--grid {
@@ -193,13 +193,14 @@ export default {
         --gutter: #{space(1)};
         display: flex;
         flex-wrap: wrap;
-        // margin: calc(var(--gutter) * -1);
+        margin: calc(var(--gutter) * -1);
         padding: space(2) space(1) space(2) space(2);
 
         &::v-deep > * {
           // flex: 1 1 var(--minimum-column-width);
           // margin: var(--gutter) !important;
-          // max-width: 45%;
+          max-width: 42%;
+          flex-grow: 1;
         }
       }
     }
@@ -239,8 +240,7 @@ export default {
         &::v-deep > * {
           // flex: 1 1 var(--minimum-column-width);
           // margin: var(--gutter) !important;
-          max-width: 45%;
-          flex-grow: 1;
+          max-width: 28%;
         }
       }
     }

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

@@ -126,6 +126,7 @@
         :label="callsToAction[0].label"
         :icon="callsToAction[0].icon"
         :link="callsToAction[0].url"
+        :trackingCode="callsToAction[0].trackingCode"
         reversed
         horizontal
         centered
@@ -136,6 +137,7 @@
         :label="callsToAction[1].label"
         :icon="callsToAction[1].icon"
         :link="callsToAction[1].url"
+        :trackingCode="callsToAction[1].trackingCode"
         reversed
         horizontal
         centered

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

@@ -73,14 +73,6 @@
       omit-detail-links
       omit-calls-to-action
     />
-    <asd20-page-content
-      :class="wayFindingPrimaryMessages.length > 3 ? 'limit-message-width' : ''"
-      :primary-messages="wayFindingPrimaryMessages"
-      :secondary-messages="secondaryMessages"
-      omit-body-content
-      omit-calls-to-action
-      grid
-    />
 
     <!-- Feed Section -->
     <asd20-feeds-section
@@ -97,6 +89,15 @@
       :organization-options="organizationOptions"
     ></asd20-feeds-section>
 
+    <asd20-page-content
+      :class="wayFindingPrimaryMessages.length > 3 ? 'limit-message-width' : ''"
+      :primary-messages="wayFindingPrimaryMessages"
+      :secondary-messages="secondaryMessages"
+      omit-body-content
+      omit-calls-to-action
+      grid
+    />
+
     <!-- Photos & Videos -->
     <asd20-media-section
       v-if="firstMessage.images.length > 1 || firstMessage.videos.length"

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

@@ -95,6 +95,7 @@
     <asd20-page-content
       :primary-messages="wayFindingPrimaryMessages"
       :secondary-messages="secondaryMessages"
+      :organization-options="organizationOptions"
       omit-body-content
       omit-calls-to-action
       grid
@@ -340,6 +341,7 @@ export default {
     }
     .asd20-page-content:not(.intro-message) .primary-messaging-section {
       display: flex;
+      justify-content: space-between;
       padding: space(1) space(2) space(1) space(2);
       .asd20-messaging {
         margin-bottom: space(2) !important;