@asd20/ui 3.2.981 → 3.2.983

package/package.json

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

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

@@ -227,7 +227,7 @@ export default {
       .message-image {
         position: relative;
         padding-top: 0.5rem;
-        padding-bottom: space(1);
+        padding-bottom: space(0.5);
         margin: 0;
         border-top: none;
         padding-top: 0;

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

@@ -58,11 +58,12 @@
           id="issue"
           label="Describe the Issue"
           help-text="<ul style='margin: 0 0 0.5rem 1rem; font-size: 0.75rem !important;'>
-          <li>Please specify the exact URL, program, service, or digital asset you had a problem with.</li>
-          <li>Please provide as much detail as possible, including the nature of the accessibility barrier, the date and time it occurred, any assistive technology you were using, or the nature of the program or service being denied.</li>
-          <li>Please describe what you believe should be done to resolve the issue.</li>
-          </ul>"
+              <li>Specify the exact URL, program, service, or digital asset you had a problem with.</li>
+              <li>Provide as much detail as possible, including the nature of the accessibility barrier, the date and time it occurred, any assistive technology you were using, or the nature of the program or service being denied.</li>
+              <li>Describe what you believe should be done to resolve the issue.</li><br>
+            </ul>"
           required
+          :validator="validateIssue"
           v-model="form.issue"
           @validated="validationErrors.issue = $event"
         />
@@ -152,25 +153,29 @@ export default {
       console.log('Email validation errors:', validationErrors)
       return validationErrors
     },
+    validateIssue({ value, validationErrors }) {
+      const maxLength = 2000
+      if (!value || value.trim().length === 0) {
+        validationErrors.push('Issue description is required.')
+      } else if (value.length > maxLength) {
+        validationErrors.push(
+          `Issue description must be fewer than ${maxLength} characters.`
+        )
+      }
+      return validationErrors
+    },
+
     captchaVerified(token) {
       // Placeholder: reCAPTCHA not functional yet
       this.submitIssue()
     },
     async sendAccessibilityIssue() {
-      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,
-          this.$config.happyfoxApiKey,
-          this.$config.happyfoxAuthCode
-        )
+        // console.log('Sending accessibility issue:', this.form)
+        await this.$sendAccessibilityIssue(this.form)
         this.submissionSuccess = true
 
         // Wait 2 seconds, then close the modal
@@ -199,6 +204,10 @@ export default {
   &::v-deep .asd20-modal__content .asd20-viewport {
     padding: space(1);
   }
+  ::v-deep .asd20-text-area-input textarea {
+    font-family: Arial, sans-serif;
+    font-size: 1rem;
+  }
 }
 
 @media (min-width: 1024px) {

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

@@ -38,7 +38,13 @@
         size="invisible"
         @verify="captchaVerified"
       >
-        <asd20-button v-show="isValid && !sending" label="Send" horizontal />
+        <asd20-button
+          :disabled="!isValid || sending"
+          label="Send"
+          horizontal
+          centered
+          bordered
+        />
       </vue-recaptcha>
       <asd20-spinner size="sm" v-if="sending" />
     </Asd20Viewport>

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

@@ -265,6 +265,18 @@ export default {
     }
   }
 }
+@media (min-width: 1500px) {
+  .asd20-page-content {
+    &--grid {
+      .primary-messaging-section,
+      .secondary-messaging-section {
+        &::v-deep > * {
+          max-width: 29%;
+        }
+      }
+    }
+  }
+}
 
 @media (min-width: 1790px) {
   .asd20-page-content {

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

@@ -330,6 +330,8 @@ export default {
       // }
     }
     .asd20-page-content {
+      padding: space(1);
+
       .notification-group--inline {
         flex-basis: 100%;
         margin: space(2) space(3) space(0) space(3);
@@ -343,6 +345,7 @@ export default {
       display: flex;
       justify-content: flex-start;
       padding: space(1) space(2) space(1) space(2);
+      width: 100%;
       .asd20-messaging {
         margin-bottom: space(2) !important;
         // flex-grow: 1;
@@ -352,7 +355,7 @@ export default {
       &--grid {
         .primary-messaging-section,
         .secondary-messaging-section {
-          --minimum-column-width: 1000px;
+          // --minimum-column-width: 1000px;
           --gutter: #{space(1)};
           display: flex;
           flex-wrap: wrap;