@asd20/ui 3.2.976 → 3.2.978

package/package.json

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

package/src/components/atoms/Asd20Icon/index.stories.js

@@ -108,8 +108,7 @@ storiesOf('Atoms - Asd20Icon', module)
           'youtube',
           'twitter',
           'facebook',
-
-          'accessiblity',
+          'accessibility',
           'alert',
           'award',
           'bell',

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

@@ -0,0 +1,20 @@
+import { storiesOf } from '@storybook/vue'
+import Asd20AccessibilityIssueModal from '.'
+
+const info = {
+  summary: 'Asd20AccessibilityIssueModal',
+}
+
+const wrapper = {
+  components: { Asd20AccessibilityIssueModal },
+  data: () => ({}),
+}
+
+storiesOf('Organisms - Asd20AccessibilityIssueModal', module).add(
+  'Default',
+  () => ({
+    ...wrapper,
+    template: `<Asd20AccessibilityIssueModal :open="true" recipient-id="14776"></Asd20AccessibilityIssueModal>`,
+  }),
+  { info }
+)

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

@@ -0,0 +1,211 @@
+<template>
+  <asd20-modal
+    :open="open"
+    title="Report an Accessibility Issue"
+    icon="accessibility"
+    dismissable
+    windowed
+    class="asd20-accessibility-issue-modal"
+    @dismiss="$emit('dismiss')"
+  >
+    <Asd20Viewport scrollable>
+      <div v-if="submissionSuccess" class="submission-success">
+        <p style="text-align: center; font-weight: bold; font-size: 1.1rem;">
+          Thank you! Your issue has been submitted.
+        </p>
+      </div>
+
+      <template v-else>
+        <asd20-text-input
+          id="firstName"
+          label="First Name"
+          required
+          v-model="form.firstName"
+          @validated="validationErrors.firstName = $event"
+        />
+        <asd20-text-input
+          id="lastName"
+          label="Last Name"
+          required
+          v-model="form.lastName"
+          @validated="validationErrors.lastName = $event"
+        />
+        <asd20-text-input
+          id="email"
+          label="Email Address"
+          type="email"
+          required
+          :validator="validateEmailAddress"
+          v-model="form.email"
+          @validated="validationErrors.email = $event"
+        />
+        <asd20-text-input
+          id="phone"
+          label="Phone Number"
+          v-model="form.phone"
+        />
+        <asd20-text-input
+          id="address"
+          label="Mailing Address"
+          v-model="form.address"
+        />
+        <asd20-text-input
+          id="organization"
+          label="Organization"
+          v-model="form.organization"
+        />
+        <asd20-text-area-input
+          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>"
+          required
+          v-model="form.issue"
+          @validated="validationErrors.issue = $event"
+        />
+        <asd20-button
+          label="Submit Issue"
+          :disabled="!isValid || sending"
+          @click="sendAccessibilityIssue"
+          horizontal
+          centered
+          bordered
+        />
+        <!-- <vue-recaptcha
+          sitekey="6LfidKoUAAAAAFqr3QEbia3jIkecsZyxBYlMvWrX"
+          :loadRecaptchaScript="true"
+          size="invisible"
+          @verify="captchaVerified"
+        >
+          <asd20-button
+            v-show="isValid && !sending"
+            label="Submit Issue"
+            horizontal
+          />
+        </vue-recaptcha> -->
+        <asd20-spinner size="sm" v-if="sending" />
+      </template>
+    </Asd20Viewport>
+  </asd20-modal>
+</template>
+
+<script>
+import Asd20Modal from '../../molecules/Asd20Modal'
+import Asd20TextInput from '../../molecules/Asd20TextInput'
+import Asd20TextAreaInput from '../../molecules/Asd20TextAreaInput'
+import Asd20Viewport from '../../atoms/Asd20Viewport'
+import Asd20Spinner from '../../atoms/Asd20Spinner'
+import VueRecaptcha from 'vue-recaptcha'
+import Asd20Button from '../../atoms/Asd20Button'
+
+// import sendAccessibilityIssue from '../../../helpers/sendAccessibilityIssue.js'
+
+export default {
+  name: 'Asd20AccessibilityIssueModal',
+  components: {
+    Asd20Modal,
+    Asd20TextInput,
+    Asd20TextAreaInput,
+    Asd20Viewport,
+    Asd20Spinner,
+    VueRecaptcha,
+    Asd20Button,
+  },
+  props: {
+    open: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      sending: false,
+      submissionSuccess: false,
+      form: {
+        firstName: '',
+        lastName: '',
+        email: '',
+        phone: '',
+        address: '',
+        organization: '',
+        issue: '',
+      },
+      validationErrors: {
+        firstName: [],
+        lastName: [],
+        email: [],
+        issue: [],
+      },
+    }
+  },
+  computed: {
+    isValid() {
+      return Object.values(this.validationErrors).every(e => e.length === 0)
+    },
+  },
+  methods: {
+    validateEmailAddress({ value, validationErrors }) {
+      const pattern = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
+      if (!pattern.test(value)) {
+        validationErrors.push('A valid email address is required')
+      }
+      return validationErrors
+    },
+    captchaVerified(token) {
+      // Placeholder: reCAPTCHA not functional yet
+      this.submitIssue()
+    },
+    async sendAccessibilityIssue() {
+      if (!this.isValid || !this.$sendAccessibilityIssue) return
+      this.sending = true
+
+      try {
+        await this.$sendAccessibilityIssue(
+          this.form,
+          this.$config.happyfoxEndpoint,
+          this.$config.happyfoxApiKey,
+          this.$config.happyfoxAuthCode
+        )
+        this.submissionSuccess = true
+
+        // Wait 2 seconds, then close the modal
+        setTimeout(() => {
+          this.submissionSuccess = false
+          this.$emit('dismiss')
+        }, 2000)
+      } catch (e) {
+        console.error('Accessibility issue submission failed:', e.message || e)
+        alert(
+          'Something went wrong while submitting the form. Please try again later.'
+        )
+      } finally {
+        this.sending = false
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../design/_mixins.scss';
+@import '../../../design/_variables.scss';
+
+.asd20-accessibility-issue-modal {
+  &::v-deep .asd20-modal__content .asd20-viewport {
+    padding: space(1);
+  }
+}
+
+@media (min-width: 1024px) {
+  .asd20-accessibility-issue-modal {
+    &::v-deep .asd20-modal__content .asd20-viewport {
+      padding: space(1);
+    }
+    &::v-deep .asd20-modal {
+      margin-top: auto;
+      margin-bottom: auto;
+      max-width: 40vw;
+    }
+  }
+}
+</style>

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

@@ -240,6 +240,7 @@ export default {
           // flex: 1 1 var(--minimum-column-width);
           // margin: var(--gutter) !important;
           max-width: 45%;
+          flex-grow: 1;
         }
       }
     }