@asd20/ui 3.2.976 → 3.2.978

package/src/components/templates/Asd20WayfindingAccessibilityTemplate/index.stories.js

@@ -0,0 +1,68 @@
+import { storiesOf } from '@storybook/vue'
+import { withKnobs, boolean } from '@storybook/addon-knobs'
+
+import mockPageMixin from '../../../mixins/mockPageMixin'
+
+import Asd20WayfindingAccessibilityTemplate from '.'
+import pageQueryResult from '../../../data/page-queries/landing-page-query-result.json'
+import notifications from '../../../data/messages/notifications'
+
+const info = {
+  summary: 'Wayfinding Accessibility Page Template',
+}
+
+const wrapper = {
+  mixins: [mockPageMixin],
+  components: {
+    Asd20WayfindingAccessibilityTemplate,
+  },
+  watch: {
+    languageCode(newValue, oldValue) {
+      console.log(newValue, oldValue)
+    },
+  },
+
+  data: () => ({ pageQueryResult, languageCode: 'es' }),
+
+  computed: {
+    activeNotificationsByType() {
+      const empty = {
+        inline: [],
+        banner: [],
+        floating: [],
+        status: [],
+      }
+      return boolean('Show Notifications', true)
+        ? notifications || empty
+        : empty
+    },
+  },
+
+}
+
+const stories = storiesOf(
+  'Templates - Asd20WayfindingAccessibilityTemplate',
+  module
+)
+stories.addDecorator(withKnobs)
+
+stories.add(
+  'Default',
+  () => ({
+    ...wrapper,
+    template: `
+    <Asd20WayfindingAccessibilityTemplate
+      v-bind="templateProps"
+      :menu-open.sync="menuOpen"
+      :search-open.sync="searchOpen"
+
+      @announcements-in-view="loadAnnouncements"
+      @stories-in-view="loadStories"
+      @events-in-view="loadEvents"
+      @files-in-view="loadFiles"
+      @people-in-view="loadPeople"
+      :languageCode.sync="languageCode"
+    />`,
+  }),
+  { info }
+)

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

@@ -0,0 +1,337 @@
+<template>
+  <div class="asd20-template-wayfinding-accessibility">
+    <!-- Skip Nav -->
+    <asd20-skip-to></asd20-skip-to>
+
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
+
+    <!-- Banner Notifications -->
+    <client-only>
+      <asd20-notification-group
+        :notifications="activeNotificationsByType.banner"
+        group-type="banner"
+        @dismiss="$emit('dismiss-notification', $event)"
+        @toggle-all="$emit('toggle-all')"
+      ></asd20-notification-group>
+    </client-only>
+
+    <!-- Page Header -->
+    <asd20-page-header
+      id="page-header"
+      v-show="pageHeaderContent"
+      v-bind="pageHeaderContent"
+      :organization="organization"
+      :organization-options="organizationOptions"
+      :languageCode="languageCode"
+      v-on="$listeners"
+      :breadcrumb-links="breadcrumbLinks"
+    >
+      <!-- Floating Notifications -->
+      <template slot="top">
+        <client-only>
+          <asd20-notification-group
+            class="asd20-notification-group--floating"
+            :notifications="activeNotificationsByType.floating"
+            :total-dismissed-notifications="totalDismissedNotifications"
+            group-type="floating"
+            @dismiss="$emit('dismiss-notification', $event)"
+            @toggle-all="$emit('toggle-all')"
+          ></asd20-notification-group>
+        </client-only>
+      </template>
+      <!-- <asd20-breadcrumb slot="top" :links="breadcrumbLinks"></asd20-breadcrumb> -->
+    </asd20-page-header>
+
+    <!-- Inline-Notifications -->
+    <template>
+      <client-only>
+        <asd20-notification-group
+          class="asd20-notification-group--inline"
+          :notifications="activeNotificationsByType.inline"
+          group-type="inline"
+          @dismiss="$emit('dismiss-notification', $event)"
+          @toggle-all="$emit('toggle-all')"
+        ></asd20-notification-group>
+      </client-only>
+    </template>
+
+    <!-- Page Content -->
+    <asd20-page-content
+      class="intro-message"
+      :primary-messages="primaryMessage"
+      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
+      :announcements="announcements"
+      :announcements-feed-props="announcementsFeedProps"
+      @announcements-in-view="$emit('announcements-in-view')"
+      :stories="stories"
+      :stories-feed-props="storiesFeedProps"
+      @stories-in-view="$emit('stories-in-view')"
+      :events="events"
+      :events-feed-props="eventsFeedProps"
+      @events-in-view="$emit('events-in-view')"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    ></asd20-feeds-section>
+
+    <!-- Photos & Videos -->
+    <asd20-media-section
+      v-if="firstMessage.images.length > 1 || firstMessage.videos.length"
+      :images="this.firstMessage.images || []"
+      :videos="this.firstMessage.videos || []"
+    >
+    </asd20-media-section>
+
+    <!-- Bottom Widgets -->
+    <asd20-widgets-section
+      v-if="
+        widgetsSectionProps.footer ||
+          widgetsSectionProps.sidebar ||
+          $slots.widgets
+      "
+      :related-links="relatedLinks"
+      v-bind="{ ...widgetsSectionProps.footer, ...widgetsSectionProps.sidebar }"
+      @events-in-view="$emit('events-in-view')"
+      @files-in-view="$emit('files-in-view')"
+      @people-in-view="$emit('people-in-view')"
+      full
+      ><slot name="widgets"
+    /></asd20-widgets-section>
+
+    <slot name="before-footer" />
+
+    <!-- Quick Links -->
+    <asd20-quicklinks-menu slot="before-footer" :quick-links="quickLinks">
+      <slot name="quicklinks-menu" />
+    </asd20-quicklinks-menu>
+
+    <!-- Footer -->
+    <asd20-page-footer
+      :organization="organization"
+      :socialLinks="socialLinks"
+      :disclosureLinks="disclosureLinks"
+      :websiteLogoProps="websiteLogoProps"
+      :websiteLogoProps2="websiteLogoProps2"
+    >
+      <slot name="page-footer" />
+    </asd20-page-footer>
+    <Asd20AccessibilityIssueModal
+      v-show="modalVisible"
+      :open="modalOpen"
+      @dismiss="modalOpen = false"
+    />
+  </div>
+</template>
+
+<script>
+// Components
+import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
+import Asd20PageHeader from '../../../components/organisms/Asd20PageHeader'
+
+import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
+import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
+
+import Asd20WidgetsSection from '../../../components/organisms/Asd20WidgetsSection'
+import Asd20FeedsSection from '../../../components/organisms/Asd20FeedsSection'
+import Asd20MediaSection from '../../../components/organisms/Asd20MediaSection'
+import Asd20AccessibilityIssueModal from '../../../components/organisms/Asd20AccessibilityIssueModal'
+import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
+import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
+import Asd20NotificationGroup from '../../../components/organisms/Asd20NotificationGroup'
+
+// import Intersect from 'vue-intersect'
+
+// Mixins
+import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+
+export default {
+  name: 'Asd20WayfindingAccessibilityTemplate',
+  mixins: [pageTemplateMixin],
+  components: {
+    Asd20PageContent,
+    Asd20SkipTo,
+    Asd20PageHeader,
+    Asd20PageFooter,
+    Asd20SiteNavigation,
+    Asd20WidgetsSection,
+    Asd20FeedsSection,
+    Asd20NotificationGroup,
+    Asd20QuicklinksMenu,
+    Asd20MediaSection,
+    Asd20AccessibilityIssueModal,
+  },
+  data() {
+    return {
+      modalVisible: false,
+      modalOpen: false,
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      const btn = document.querySelector('[data-trigger-accessibility-modal]')
+      if (btn) {
+        btn.addEventListener('click', () => {
+          this.modalVisible = true
+          this.$nextTick(() => {
+            this.modalOpen = true
+          })
+        })
+      }
+    })
+  },
+  computed: {
+    wayFindingPrimaryMessages() {
+      // wayfinding page
+      return (
+        this.messages
+          // Remove the first message, limit
+          .slice(
+            1,
+            Math.min(this.messages.length, this.primaryMessageLimit + 1)
+          )
+      )
+    },
+    primaryMessage() {
+      const introMessage = this.primaryMessages.slice(0, 1)
+      if (introMessage[0].bodyHtml === '' || null) return
+      return introMessage
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+@import '../../../design/_variables.scss';
+@import '../../../design/_mixins.scss';
+@import '../../../design/_typography.scss';
+@import '../../../design/_template.scss';
+@import '../../../design/_print.scss';
+@import '../../../design/tokens.css';
+
+.asd20-template-wayfinding-accessibility {
+  @include typography;
+  @include template;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 0;
+  overflow: hidden;
+  margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(2.0375);
+    // .bell {
+    //   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
+    //   svg {
+    //     fill: var(--color__accent) !important;
+    //   }
+    //   span {
+    //     background: var(--color__accent) !important;
+    //     top: inherit !important;
+    //     right: inherit !important;
+    //     width: 1.2rem !important;
+    //     height: 1.2rem !important;
+    //     font-size: 0.75rem !important;
+    //   }
+    // }
+  }
+  .asd20-notification-group--inline {
+    margin-top: space(2) !important;
+  }
+
+  .intro-message {
+    .primary-messaging-section {
+      justify-content: center;
+      margin-top: space(1) !important;
+      padding: space(1) space(2) !important;
+      .asd20-messaging {
+        border-top: space(0.25) solid var(--color__tertiary);
+        border-bottom: space(0.25) solid var(--color__tertiary);
+        padding: space(1) 0;
+      }
+    }
+
+    p {
+      // font-family: var(--website-typography__font-family-headlines);
+      font-size: 1rem !important;
+      line-height: 1.5;
+      font-family: var(--website-typography__font-family-headlines);
+    }
+    h2 {
+      @include asd20-font(
+        1.5,
+        var(--website-typography__font-family-headlines),
+        1.2,
+        700
+      );
+      font-family: var(--website-typography__font-family-headlines);
+      // font-size: 36px !important;
+    }
+  }
+  // .asd20-messaging {
+  //   padding-bottom: space(2);
+  //   border-bottom: 10px solid var(--color__tertiary);
+  // }
+}
+
+@media (min-width: 1024px) {
+  .asd20-template-wayfinding-accessibility {
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+      // .bell {
+      //   span {
+      //     background: var(--color__accent);
+      //     top: -0.6em !important;
+      //     right: -0.6em !important;
+      //   }
+      // }
+    }
+    @include template-desktop;
+    margin-left: space(3);
+    margin-top: 0;
+    .asd20-page-content {
+      margin-top: space(0);
+    }
+    // .intro-message {
+    //   width: 90%;
+    // }
+  }
+}
+
+@media (min-width: 1790px) {
+  .limit-message-width {
+    .primary-messaging-section,
+    .secondary-messaging-section {
+      .asd20-messaging {
+        flex: 1 1 var(--minimum-column-width);
+        margin: var(--gutter) !important;
+        max-width: 30% !important;
+      }
+    }
+  }
+}
+</style>

package/src/data/page-queries/landing-page-query-result.json

@@ -80,7 +80,7 @@
           "id": "4fe4dc65-0d61-497f-8596-e4c5d156bf71",
           "title": "Supports for Academic Success",
           "summary": "Academy District 20 provides a host of services so all students have the tools they need to achieve academic success.",
-          "bodyHtml": "<h2>Overview</h2><p>Each Academy District 20 school has at least one special education teacher and speech/language pathologist. Students may also receive supports from school social workers, school psychologists, school nurses and occupational and physical therapists.&nbsp;</p><p>Our special education staff members work with students and their families in a variety of ways such as: completing assessments, participating in the development of Individual Education Plans (IEPs) and providing specialized support services.&nbsp;</p><p>Special Education staff&nbsp;meet the state standards for licensed teachers and/or special service providers through the Colorado Department of Education.&nbsp;</p><h2>Inclusion at Academy District 20</h2><p>Inclusion is a child-centered, collaborative process that focuses on the unique needs of each student as an equally valued member of the school community. Inclusion gives each student authentic access to the standards driven curriculum and social community through meaningful instruction and interaction supported by the intentional allocation of time and resources.</p><p>This includes the practice of educating all students together to the maximum extent appropriate with the long -range goal of independence, and participation in and contribution to the community.</p>",
+          "bodyHtml": "<h2>Overview</h2><p>Each Academy District 20 school has at least one special education teacher and speech/language pathologist. Students may also receive supports from school social workers, school psychologists, school nurses and occupational and physical therapists.&nbsp;</p><p>Our special education staff members work with students and their families in a variety of ways such as: completing assessments, participating in the development of Individual Education Plans (IEPs) and providing specialized support services.&nbsp;</p><p>Special Education staff&nbsp;meet the state standards for licensed teachers and/or special service providers through the Colorado Department of Education.&nbsp;</p><h2>Inclusion at Academy District 20</h2><p>Inclusion is a child-centered, collaborative process that focuses on the unique needs of each student as an equally valued member of the school community. Inclusion gives each student authentic access to the standards driven curriculum and social community through meaningful instruction and interaction supported by the intentional allocation of time and resources.</p><p>This includes the practice of educating all students together to the maximum extent appropriate with the long -range goal of independence, and participation in and contribution to the community.</p><button class='asd20-button' data-trigger-accessibility-modal style='margin: 1rem auto; padding: var(--space-1, 1em); background-color: var(--website-page__background-color, #f5f5f5); color: var(--website-page__title-color, #333); font-family: var(--website-typography__font-family-headlines; font-size: 1rem; font-weight: bold; border: 2px solid var(--color__primary); cursor: pointer; display: flex; justify-content: space-between; align-items: center;'>Notify Us of an Accessibility Issue</button>",
           "status": "Published",
           "publishDateTime": "2019-07-02T20:42:12.000Z",
           "expireDateTime": null,

package/src/helpers/sendAccessibilityIssue.js

@@ -0,0 +1,47 @@
+import axios from 'axios'
+
+function issueIsValid(issue) {
+  return !!issue.firstName && !!issue.lastName && !!issue.email && !!issue.issue
+}
+
+export default async function sendAccessibilityIssue(issue, endpoint, apiKey, authCode) {
+  if (!issueIsValid(issue)) {
+    throw new Error('The issue object is incomplete or invalid.')
+  }
+
+  const payload = {
+    name: `${issue.firstName} ${issue.lastName}`,
+    email: issue.email,
+    phone: issue.phone || '',
+    subject: 'Accessibility Issue Reported via External ASD20 Website',
+    html: `
+      <p><strong>Issue Details:</strong></p>
+      <p>${issue.issue}</p>
+      <p><strong>Mailing Address:</strong> ${issue.address || 'Not provided'}</p>
+      <p><strong>Organization:</strong> ${issue.organization || 'Not provided'}</p>
+    `,
+    category: Number(process.env.HAPPYFOX_CATEGORY_ID),
+  }
+
+  try {
+    const response = await axios.post(endpoint, payload, {
+      headers: {
+        Authorization: `Basic ${btoa(`${apiKey}:${authCode}`)}`,
+        'Content-Type': 'application/json',
+        Accept: 'application/json'
+      }
+    })
+
+    return response.data
+  } catch (error) {
+    if (error.response) {
+      throw new Error(
+        `HappyFox error ${error.response.status}: ${JSON.stringify(
+          error.response.data
+        )}`
+      )
+    } else {
+      throw new Error(`Request error: ${error.message}`)
+    }
+  }
+}