@asd20/ui 3.2.385 → 3.2.388

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui",
-  "version": "3.2.383",
+  "version": "3.2.387",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -13063,6 +13063,19 @@
       "integrity": "sha512-LI7v2mH02R55SekHYdv9pRHR9RajVNyIJ2N5IEkWbg7FT5ZmJ9Hw4mWxHeEUcd+dJo0QmzztHvDvWcc7prVFsw==",
       "dev": true
     },
+    "focus-trap": {
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.4.tgz",
+      "integrity": "sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==",
+      "requires": {
+        "tabbable": "^5.3.3"
+      }
+    },
+    "focus-trap-vue": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/focus-trap-vue/-/focus-trap-vue-1.1.1.tgz",
+      "integrity": "sha512-N+M4d4uYymCogct417gUL7wWSMIW/oUcCicfg3eRdo+gz7jlQnIGwUwViFxPkKV7iyzpc81g6JeSxRWiYWU3eQ=="
+    },
     "follow-redirects": {
       "version": "1.5.10",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
@@ -27968,6 +27981,11 @@
       "integrity": "sha512-R9N6uDkVsghHePKh1TEqbnLddO2IY25OcsksyFp/qBe7XYd0PVbKEWxhcdMhpLzE1I6skj5l4aEZ3CRxcbArlA==",
       "dev": true
     },
+    "tabbable": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
+      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
+    },
     "table": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/table/-/table-4.0.2.tgz",

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.385",
+  "version": "3.2.388",
   "private": false,
   "license": "MIT",
   "repository": {
@@ -33,6 +33,8 @@
     "basicscroll": "^3.0.2",
     "countup.js": "^2.0.0",
     "date-fns": "^1.30.1",
+    "focus-trap": "^6.9.4",
+    "focus-trap-vue": "^1.1.1",
     "js-cookie": "^2.2.1",
     "lodash-es": "^4.17.15",
     "swiper": "^5.4.5",

package/src/components/molecules/Asd20DepartmentContactCard/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div v-show="group.description || group.contactPhone || group.contactEmail" :class="classes">
+  <div
+    v-show="group.description || group.contactPhone || group.contactEmail"
+    :class="classes"
+  >
     <div  class="asd20-department-contact-card__header">
       <h2 v-show="group.description">{{ group.title }}</h2>
       <p v-show="group.description">{{ group.description }}</p>
@@ -18,6 +21,7 @@
     <asd20-compose-email-modal
       v-if="group"
       :open="composingEmail"
+      v-model="isActive"
       :recipient-id="group.id"
       @dismiss="composingEmail = false"
     />
@@ -39,6 +43,7 @@ export default {
   },
   data: () => ({
     composingEmail: false,
+    isActive: false,
   }),
   computed: {
     classes() {
@@ -143,7 +148,10 @@ export default {
   methods: {
     onItemClick(item) {
       console.log(item)
-      if (item.label === 'Send an Email') this.composingEmail = true
+      if (item.label === 'Send an Email') {
+        this.composingEmail = true
+        this.isActive = true
+      }
     },
   },
 }

package/src/components/molecules/Asd20ListItem/index.vue

@@ -102,8 +102,10 @@ export default {
       }
     },
     tag() {
-      if (this.actionable && this.to && this.to[0] === '/' && this.$router)
-        return 'button'
+      if (this.actionable)
+      return 'button'
+      // if (this.actionable && this.to && this.to[0] === '/' && this.$router)
+      //   return 'button'
       if (this.actionable && this.hrefValue) return 'a'
       return 'div'
     },
@@ -128,11 +130,17 @@ export default {
 
   methods: {
     onClick(e) {
-      if (this.tag === 'button') {
+      if (this.tag === 'button' && this.$router) {
         e.preventDefault()
         this.$router.push(this.to)
       }
     },
+    // onClick(e) {
+    //   if (this.tag === 'button') {
+    //     e.preventDefault()
+    //     this.$router.push(this.to)
+    //   }
+    // },
   },
 }
 </script>

package/src/components/molecules/Asd20Modal/index.vue

@@ -6,40 +6,47 @@
     @before-leave="transitioning = true"
   >
     <div v-if="open" :class="classes">
-      <div class="asd20-modal">
-        <div v-if="title || $slots.title" class="asd20-modal__header">
-          <asd20-icon v-if="icon" :name="icon" size="md" />
-          <h2>{{ title }}<slot name="title" /></h2>
+      <focus-trap :isActive="isActive">
+        <div class="asd20-modal">
+          <div v-if="title || $slots.title" class="asd20-modal__header">
+            <asd20-icon v-if="icon" :name="icon" size="md" />
+            <h2>{{ title }}<slot name="title" /></h2>
 
-          <asd20-button
-            v-if="dismissable"
-            size="md"
-            icon="close"
-            label="Close"
-            hide-label
-            transparent
-            @click.native="$emit('dismiss', false)"
-          />
+            <asd20-button
+              v-if="dismissable"
+              size="md"
+              icon="close"
+              label="Close"
+              hide-label
+              transparent
+              @click.native="$emit('dismiss', false)"
+              @click="isActive = false"
+            />
+          </div>
+          <slot name="header" />
+          <div class="asd20-modal__content">
+            <slot name="default" :transitioning="transitioning" />
+            <slot name="main" />
+          </div>
+          <div class="asd20-modal__footer">
+            <slot name="footer" />
+          </div>
         </div>
-        <slot name="header" />
-        <div class="asd20-modal__content">
-          <slot name="default" :transitioning="transitioning" />
-          <slot name="main" />
-        </div>
-        <div class="asd20-modal__footer">
-          <slot name="footer" />
-        </div>
-      </div>
+      </focus-trap>
     </div>
   </transition>
 </template>
 
 <script>
+import Vue from 'vue'
 import Asd20Icon from '../../atoms/Asd20Icon'
 import Asd20Button from '../../atoms/Asd20Button'
+import { FocusTrap } from 'focus-trap-vue'
+Vue.use(FocusTrap)
+
 export default {
   name: 'Asd20Modal',
-  components: { Asd20Icon, Asd20Button },
+  components: { Asd20Icon, Asd20Button, FocusTrap },
   model: { prop: 'open', event: 'dismiss' },
   props: {
     open: { type: Boolean, default: false },
@@ -50,6 +57,7 @@ export default {
   },
   data: () => ({
     transitioning: false,
+    isActive: false,
   }),
   computed: {
     classes() {

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

@@ -1,6 +1,7 @@
 <template>
   <asd20-modal
     :open="open"
+    :isActive="isActive"
     title="Send an Email"
     icon="email"
     dismissable
@@ -77,6 +78,7 @@ export default {
     },
     composing: false,
     sending: false,
+    isActive: false,
     emailMessage: {
       senderName: '',
       senderEmail: '',

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

@@ -5,12 +5,13 @@
         v-for="(person, index) in mappedPeople"
         :key="index"
         v-bind="person"
-        @click.native="onPersonClick(person)"
+        @click.native="()=>{onPersonClick(person); isActive = true}"
       />
     </asd20-list>
     <Asd20PersonModal
       :person="selectedPerson"
       :open="!!selectedPerson"
+      :isActive="isActive"
       @dismiss="selectedPerson = null"
       :force-display-email="forceDisplayEmail"
     />
@@ -45,6 +46,7 @@ export default {
   data: () => ({
     // loadedPeople: [],
     selectedPerson: null,
+    isActive: false,
   }),
 
   methods: {

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

@@ -2,6 +2,7 @@
   <asd20-modal
     v-if="person"
     :open="open"
+    :isActive="isActive"
     title="Staff Details"
     icon="staff"
     dismissable
@@ -45,7 +46,12 @@
           icon-size="lg"
           label="Send an Email"
           actionable
-          @click.native="composingEmail = true"
+          @click.native="
+            ()=>{
+              composingEmail = true;
+              isActive = true
+            }
+          "
         />
         <Asd20ListItem
           v-show="person.email && !useEmailForm"
@@ -78,6 +84,7 @@
     <asd20-compose-email-modal
       v-show="person"
       :open="open && composingEmail"
+      :isActive="isActive"
       :recipient-id="person.id"
       @dismiss="composingEmail = false"
     />
@@ -108,6 +115,7 @@ export default {
   },
   data: () => ({
     composingEmail: false,
+    isActive: false,
   }),
   computed: {
     initials() {

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

@@ -88,7 +88,7 @@
       <slot name="page-footer" />
 
       <!-- analytics requested by Kyle Blakely -->
-      <!-- <img src="https://jelly.mdhv.io/v1/star.gif?pid=ipUavA655F50RvTSoYZIJU2vFFFB&src=mh&evt=hi"> -->
+      <img src="https://jelly.mdhv.io/v1/star.gif?pid=ipUavA655F50RvTSoYZIJU2vFFFB&src=mh&evt=hi">
 
     </asd20-page-footer>
   </div>

package/src/design/_variables.scss

@@ -6,7 +6,7 @@ $colors: (
   brand-gray: #828281,
   silver-gray: #e3e6e8, //lighten(#d1d7ce, 10%),
   silver-gray-darker: #d1d7ce,
-  muted-blue: #477e88,
+  muted-blue: #3f507b,
   muted-yellow: #f7e06e,
   muted-green: #4d7d36,
   muted-red: #da2e0b,

package/src/design/tokens.json

@@ -6,7 +6,7 @@
     "onSecondary": "#ffffff",
     "onTertiary": "#062137",
     "primary": "#0e2c6c",
-    "secondary": "#8a8b8c",
+    "secondary": "#3f507b",
     "tertiary": "#e3e6e8"
   },
   "websiteButton": {