npm - @asd20/ui - Versions diffs - 3.2.511 → 3.2.513 - Mend

@asd20/ui 3.2.511 → 3.2.513

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/package.json CHANGED Viewed

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

package/src/components/atoms/Asd20Tag/index.vue CHANGED Viewed

@@ -65,6 +65,7 @@ export default {
     background: var(--foreground, var(--color__accent));
     border-radius: 50%;
     opacity: 1;
+    box-shadow: 0px 0px 3px var(--background, currentColor);
   }
   &--bordered {

package/src/components/organisms/Asd20Navbar/index.vue CHANGED Viewed

@@ -4,7 +4,7 @@
       ref="menuButton"
       id="menu-toggle-button"
       aria-owns="main-menu-list"
-      aria-controls="main-menu-list"
+      aria-expanded="false"
       :size="desktop && !zoomed ? 'lg' : 'md'"
       class="menu-button"
       :icon="menuActive ? 'close' : 'menu'"

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

@@ -63,13 +63,15 @@
               v-if="publishDateTime"
               :dateTime="publishDateTime"
             />
-            <br />
-            <span v-if="modifiedDateTime" class="date-prefix">Updated:</span>
-            <asd20-formatted-date
-              v-if="modifiedDateTime"
-              :dateTime="modifiedDateTime"
+            <div class="modified-meta" v-if="modifiedDateTime && showModifiedDateTime">
+              <span class="date-prefix"> | Updated:</span>
+              <asd20-formatted-date :dateTime="modifiedDateTime" />
+            </div>
+            <asd20-tag-group
+              v-if="categories.length"
+              :tags="categories"
+              class="date-prefix"
             />
-            <asd20-tag-group v-if="categories.length" :tags="categories" />
             <slot name="meta" />
           </div>
           <div v-if="lead" class="asd20-page-header__lead">
@@ -198,6 +200,15 @@ export default {
           .pop()
       )
     },
+    showModifiedDateTime() {
+      const publishDateTimeString = new Date(this.publishDateTime)
+      const modifiedDateTimeString = new Date(this.modifiedDateTime)
+      console.log(publishDateTimeString, modifiedDateTimeString)
+      let publishDateTimePlusOne = new Date(publishDateTimeString.setDate(publishDateTimeString.getDate() + 1))
+      console.log(publishDateTimePlusOne, modifiedDateTimeString)
+      return modifiedDateTimeString > publishDateTimePlusOne ? true : false
+    },
   },
   methods: {
     goBack() {
@@ -368,16 +379,18 @@ export default {
     }
     .date-prefix {
       @include asd20-font(
-        0.75,
+        0.6,
         var(--website-typography__font-family-headlines)
       );
     }
+    .modified-meta {
+      display: inline-block;
+    }
     .asd20-formatted-date {
       @include asd20-font(
-        0.75,
+        0.6,
         var(--website-typography__font-family-headlines)
       );
-      text-transform: uppercase;
     }
   }

package/src/components/organisms/Asd20SiteMenu/index.vue CHANGED Viewed

@@ -1,79 +1,119 @@
 <template>
-  <div
+  <!-- <div
     id="main-menu-list"
     ref="menuContainer"
     class="asd20-site-menu"
-    role="menu"
     @click="onBackgroundClick"
     @focus="onFocus"
     @blur="onBlur"
     @keyup.up.stop.prevent="previous"
     @keyup.down.stop.prevent="next"
     @keyup.right.stop.prevent="activateSection"
-    @keyup.enter="activateSection"
     @keyup.left.stop.prevent="deactivateSection"
+    @keyup.enter="activateSection"
     @keyup.escape="deactivateSection"
     @keydown.tab.stop="dismiss"
     tabindex="0"
+  > -->
+  <div
+    id="main-menu-list"
+    ref="menuContainer"
+    class="asd20-site-menu"
+    @keyup.right.stop.prevent="activateSection"
+    @keyup.left.stop.prevent="deactivateSection"
+    @keyup.escape="deactivateSection"
+    @keyup.enter="activateSection"
+    tabindex="-1"
   >
-    <div class="asd20-site-menu__viewport">
-      <transition name="slide-right">
-        <div v-if="!activeSection" class="asd20-table-of-contents">
-          <button
-            role="menuitem"
-            v-for="(section, index) in sections"
-            :key="index"
-            :id="`asd20-site-menu__section-${index}`"
-            class="asd20-table-of-contents__item"
-            @click="activeSectionIndex = index"
-            @mouseup="keyboardTriggeredLastAction = false"
-            @keyup="keyboardTriggeredLastAction = true"
-            tabindex="-1"
-          >
-            <span class="title">{{ section.title }}</span>
-            <asd20-icon name="chevron" size="sm" />
-          </button>
-        </div>
-      </transition>
-      <transition name="slide-left" v-on:after-enter="afterActivateTransition">
-        <div v-if="activeSection" class="asd20-site-menu__section">
+    <focus-trap
+      :active="active"
+      aria-hidden="true"
+      tabindex="-1"
+      :initial-focus="() => $refs.focused[0]"
+    >
+      <div class="asd20-site-menu__viewport" tabindex="-1">
+        <transition name="slide-right" tabindex="-1">
           <div
-            class="asd20-site-menu__section__back"
-            @click="deactivateSection"
-            @mouseup="keyboardTriggeredLastAction = false"
-            @keyup="keyboardTriggeredLastAction = true"
+            v-if="!activeSection"
+            class="asd20-table-of-contents"
+            tabindex="-1"
+            role="menubar"
           >
-            <asd20-icon name="chevron" size="sm" />
-            <span class="title">{{ activeSection.title }}</span>
-          </div>
-          <div class="asd20-site-menu__items">
-            <a
-              v-for="(item, index) in activeSection.items"
-              :id="`asd20-site-menu__item-${activeSectionIndex}-${index}`"
+            <button
+              v-for="(section, index) in sections"
               :key="index"
-              class="asd20-site-menu__item"
-              :href="item.url"
-              @click="dismiss"
-              tabindex="-1"
-              :target="
-                !item.url || item.url.startsWith('/') ? undefined : '_blank'
-              "
-              >{{ item.title }}</a
+              :id="`asd20-site-menu__section-${index}`"
+              class="asd20-table-of-contents__item"
+              role="menuitem"
+              ref="focused"
+              aria-expanded="false"
+              :aria-owns="`asd20-site-menu__item-${index}`"
+              @click="activeSectionIndex = index"
+              @mouseup="keyboardTriggeredLastAction = false"
+              @keyup="keyboardTriggeredLastAction = true"
             >
+              <span class="title">{{ section.title }}</span>
+              <asd20-icon name="chevron" size="sm" />
+            </button>
+          </div>
+        </transition>
+        <transition
+          name="slide-left"
+          v-on:after-enter="afterActivateTransition"
+        >
+          <!-- <focus-trap
+            :active="active"
+            aria-hidden="true"
+            returnFocusOnDeactivate="true"
+          > -->
+          <div v-if="activeSection" class="asd20-site-menu__section">
+            <div>
+              <button
+                class="asd20-site-menu__section__back"
+                aria-expanded="true"
+                @click="deactivateSection"
+                @mouseup="keyboardTriggeredLastAction = false"
+                @keyup="keyboardTriggeredLastAction = true"
+              >
+                <asd20-icon name="chevron" size="sm" />
+                <span class="title">{{ activeSection.title }}</span>
+              </button>
+              <div
+                :id="`asd20-site-menu__item-${activeSectionIndex}`"
+                class="asd20-site-menu__items"
+                role="menu"
+              >
+                <a
+                  v-for="(item, index) in activeSection.items"
+                  :id="`asd20-site-menu__item-${activeSectionIndex}-${index}`"
+                  :key="index"
+                  class="asd20-site-menu__item"
+                  :href="item.url"
+                  @click="dismiss"
+                  :target="
+                    !item.url || item.url.startsWith('/') ? undefined : '_blank'
+                  "
+                  >{{ item.title }}</a
+                >
+              </div>
+            </div>
           </div>
-        </div>
-      </transition>
-    </div>
+          <!-- </focus-trap> -->
+        </transition>
+      </div>
+    </focus-trap>
   </div>
 </template>
 <script>
 import { setTimeout } from 'timers'
+import { FocusTrap } from 'focus-trap-vue'
 import Asd20Icon from '../../atoms/Asd20Icon'
 export default {
   name: 'Asd20SiteMenu',
-  components: { Asd20Icon },
+  components: { Asd20Icon, FocusTrap },
   props: {
     sections: { type: Array, default: () => [] },
     active: { type: Boolean, default: false },
@@ -88,10 +128,13 @@ export default {
   computed: {
     activeSection() {
       return this.activeSectionIndex === -1
-        ? null
+        ? 0
         : this.sections[this.activeSectionIndex]
     },
   },
+  mounted() {
+    this.setFocus()
+  },
   methods: {
     onFocus(event) {
       this.hasFocus = true
@@ -150,6 +193,7 @@ export default {
         this.$nextTick(() => {
           if (this.keyboardTriggeredLastAction) {
             this.setFocusSection()
+            this.setFocus()
           }
         })
       } else {
@@ -188,6 +232,11 @@ export default {
         this.$emit('update:active', false)
       }
     },
+    setFocus() {
+      this.$nextTick(() => {
+        this.$refs.focused[0].focus()
+      })
+    },
   },
 }
 </script>
@@ -314,6 +363,8 @@ export default {
     padding: space(0.75) space(1) space(0.75) space(2);
     cursor: pointer;
     box-shadow: 0 -1px 0 0 var(--website-menu__divider-color) inset;
+    border: none;
+    width: 100%;
     transition: background asd20-speed(1) ease-in-out;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     touch-action: manipulation;

package/src/components/templates/Asd20ArticleListTemplate/index.vue CHANGED Viewed

@@ -99,12 +99,25 @@
               medium
             />
             <asd20-multiselect-input
+              role="combobox"
+              aria-label="Choose a Category to Sort By"
+              aria-controls="joketypes"
+              aria-autocomplete="list"
+              aria-expanded="true"
+              aria-activedescendant=""
+              title="Choose a Category"
               label="Categories"
               :taggable="false"
               :value="selectedCategories"
               :items="categoryOptions"
               @input="$emit('update:selected-categories', $event)"
             />
+            <form>
+              <label for="multi-select">Choose a Category</label>
+              <select name="categories" multiple id="multi-select">
+                <options :options="categoryOptions"/>
+              </select>
+            </form>
           </div>
           <div class="feed">
@@ -128,6 +141,7 @@
                     class="load-more"
                     icon="chevron"
                     label="Prev"
+                    aira-label="Previous"
                     :iconAngle="-90"
                     size="md"
                     horizontal

package/src/data/page-queries/sublanding-page-query-result.json CHANGED Viewed

@@ -17,14 +17,7 @@
         }
       ],
       "links": [],
-      "parentPage": {
-        "id": "253ba306-6e0f-72bc-9ab7-ec7558f6cd8e",
-        "path": {
-          "level": 1,
-          "path": "/"
-        },
-        "title": "Home"
-      },
+      "parentPage": null,
       "path": {
         "path": "/buses-and-transportation/choice-transportation"
       },
@@ -41,6 +34,7 @@
             "bodyHtml": "<h2>Bring Your Own Device (BYOD) for Digital Learning at AAHS</h2><p>The advantages of student-owned devices include:&nbsp;</p><ul><li><p>Any time, anywhere access to class resources, support and extension activities</p></li><li><p>The ability to develop \"digital\" folders and exercise books for their classes (that can't be lost, and never need replacing) through Google Apps</p></li><li><p>Anytime, anywhere access to the school library e-books, database and cataloged web resources.</p></li><li><p>Greater ability to communicate with teachers, parents, and peers to support their learning through instant access to their student e-mail</p></li><li><p>Anytime, anywhere access to unlimited resources and information on the internet</p></li><li><p>The ability to draft, redraft and publish their work at the click of a button</p></li><li><p>Allowing students to become active partners in their learning</p></li></ul><p></p><h2>Digital Citizenship</h2><p>Internet safety and helping our students become good digital citizens is of paramount importance at AAHS! Our staff is committed to helping students maintain a positive digital footprint and&nbsp;keeping our students safe an while using the vast collection of educational resources available on the internet. We use digital citizenship lessons from&nbsp;<a href=\"https://www.commonsensemedia.org/\" rel=\"noopener noreferrer nofollow\">Common Sense Media</a>.&nbsp;</p><p>Practicing good digital citizenship extends beyond the classroom and into the home. For great resources for your family, visit the links below:</p><ul><li><p><a href=\"http://www.safeteens.com/\" rel=\"noopener noreferrer nofollow\">SafeTeens</a>&nbsp;A place for teens and parents to learn how to use the Internet safely.</p></li><li><p><a href=\"http://www.cyber-safety.com/\" rel=\"noopener noreferrer nofollow\">Cyber-Safety.com</a>&nbsp;A website dedicated to keeping kids safe in a wired world.</p></li><li><p><a href=\"http://www.connectsafely.org/\" rel=\"noopener noreferrer nofollow\">ConnectSafely.org</a>&nbsp;is dedicated to educating users of connected technology about safety, privacy and security.</p></li><li><p><a href=\"https://www.commonsensemedia.org/educators/digital-compass\" rel=\"noopener noreferrer nofollow\">Digital Compass</a>&nbsp;- Where are you headed? The only educational game that gives kids the freedom to explore how decisions made in their digital lives can impact their relationships and future.&nbsp; (from Common Sense Media)</p></li></ul><h2>Getting Internet Access at Home</h2><ol><li><p><a href=\"https://internetessentials.com/\" rel=\"noopener noreferrer nofollow\">Internet Essentials from Comcast</a><a href=\"http://www.centurylink.com/home/internetbasics/?rid=internetbasics\" rel=\"noopener noreferrer nofollow\">Internet</a></p></li><li><p><a href=\"http://www.centurylink.com/home/internetbasics/?rid=internetbasics\" rel=\"noopener noreferrer nofollow\">Basics from CenturyLink</a></p></li><li><p><a href=\"https://everyoneon.org/get-connected/\" rel=\"noopener noreferrer nofollow\">EveryoneOn.org</a><br></p></li></ol><h2>Borrowing Equipment</h2><p>1. Print and sign the last page of the <a href=\"https://airacademy.asd20.org/SiteAssets/Pages/BYOD/Tech%20Guidelines%20and%20Device%20Checkout%20Form%20Nov%202020.pdf\" rel=\"noopener noreferrer nofollow\">Technology Guidelines and Responsible Use Agreement</a>.</p><p>2. Electronically sign and email it or direct questions to <a href=\"mailto: traci.trimbach@asd20.org\" rel=\"noopener noreferrer nofollow\">Traci Trimbach</a>.<br></p><h2>Educational Discounts&nbsp;</h2><p><a href=\"https://airacademy.asd20.org/ems/byod/Documents/Educational%20Discounts%20for%20Devices.pdf\" rel=\"noopener noreferrer nofollow\">List of links</a>&nbsp;to sites offering educational discounts<br></p><h2>Have teenagers?&nbsp; Get insurance! &nbsp;</h2><p>Students and parents are responsible to pay for damages that occur on their district-provided-devices.</p><p><a href=\"http://www.studentinsurancepartners.com/\" rel=\"noopener noreferrer nofollow\">Link to 3rd party insurance</a></p><p></p><h2>Need troubleshooting?</h2><p>At AAHS, go to Room 416 to see Ms. Hiner or Mr. Duran for help.</p><p>At home, consider using the following links.</p><ul><li><p><strong>PC Troubleshooting links</strong></p><ul><li><p><a href=\"https://www.youtube.com/results?search_query=troubleshooting+a+pc\" rel=\"noopener noreferrer nofollow\">PC Troubleshooting videos</a>&nbsp;(YouTube)</p></li></ul></li><li><p><strong>Mac Troubleshooting links</strong></p><ul><li><p><a href=\"https://www.youtube.com/results?search_query=troubleshooting+a+Mac\" rel=\"noopener noreferrer nofollow\">Mac Troubleshooting videos</a>&nbsp;(YouTube)</p></li></ul></li></ul><h2>Long List</h2>  <ol>    <li><p>Nikolas Abbotts</p></li><li><p>Emma Errickson</p></li><li><p>Zackery Kuster</p></li><li><p>Remzi Revia</p></li><li><p>Nancy Ahmed</p></li><li><p>Morgan Feher</p></li><li><p>Jessica Lange</p></li><li><p>Lauryn Robinson</p></li><li><p>Isabella Alexander</p></li><li><p>Sarah Fesler</p></li><li><p>Michelle Lau</p></li><li><p>Isaiah Roux</p></li><li><p>Ava Amsden</p></li><li><p>Sonia Florek</p></li><li><p>Connor Laxson</p></li><li><p>Darius Rymski</p></li><li><p>Natalie Asay</p></li><li><p>Sophia Footman</p></li><li><p>Addison Leslie</p></li><li><p>Diego Sauceda</p></li><li><p>Falon Asiu</p></li><li><p>Kailen Ford</p></li><li><p>Sophia Li</p></li><li><p>Julia Schneider</p></li><li><p>Jason Baek</p></li><li><p>Leah Fox</p></li><li><p>Reign Linn</p></li><li><p>Ethan Schoeneck</p></li><li><p>Emily Baldridge</p></li><li><p>Annabelle Frailey</p></li><li><p>Emma Lucero</p></li><li><p>Tyler Scholes</p></li><li><p>Nathan Baldridge</p></li><li><p>Mackenzie Frazee</p></li><li><p>Amari Luu</p></li><li><p>James Schreiber</p></li><li><p>Damian Balon</p></li><li><p>Taryn Galceran</p></li><li><p>Zoe Maher</p></li><li><p>Isobel Schwartz</p></li><li><p>Ella Beckwith</p></li><li><p>Isabella Garcia</p></li><li><p>Brayden Mallery</p></li><li><p>Nuwanya Senanayake</p></li><li><p>Piper Behan</p></li><li><p>Aurora Gazetti</p></li><li><p>Jacob Marlett</p></li><li><p>Camryn Shade</p></li><li><p>Ethan Benedict</p></li><li><p>Jillian Gehrmann</p></li><li><p>Thomas Masciullo</p></li><li><p>Samantha Mae Sheridan</p></li><li><p>Stanley Black</p></li><li><p>Skylar Gordon</p></li><li><p>Megan Mattorano</p></li><li><p>Lauren Shrank</p></li><li><p>Daniel Boland</p></li><li><p>Ethan Gosnell</p></li><li><p>Cooper McDowell</p></li><li><p>Priyaj Shrestha</p></li><li><p>Evan Boudreau</p></li><li><p>Paul Grier IV</p></li><li><p>Demetrius McGriff</p></li><li><p>Matthew Silver</p></li><li><p>Laura Bunnell</p></li><li><p>Jayden Guerrero</p></li><li><p>Kennedy McHugh</p></li><li><p>Patrick Simpson</p></li><li><p>Brayden Burk</p></li><li><p>Brandon Guterriz</p></li><li><p>Seth McKamey</p></li><li><p>Allan Sindler</p></li><li><p>Isabella Burton</p></li><li><p>Karol Gutierrez</p></li><li><p>Cecilia Molden</p></li><li><p>Anthony Sintas</p></li><li><p>Carson Caplan</p></li><li><p>Samah Halim</p></li><li><p>Tatjana Montalvo</p></li><li><p>Kira Smith</p></li><li><p>Max Caron</p></li><li><p>Alyssa Hanson</p></li><li><p>Ashlee Moore</p></li><li><p>Megan Smith</p></li><li><p>Aidan Chen</p></li><li><p>Raya Hardson</p></li><li><p>Julian Moore</p></li><li><p>Dustin Spillar</p></li><li><p>Ashley Choi</p></li><li><p>Isaac Hatch</p></li><li><p>Aaron Mulder</p></li><li><p>Charles Stephenson</p></li><li><p>Chad Compton</p></li><li><p>Karolyn Heredia-Martell</p></li><li><p>Elijah Mullin</p></li><li><p>Trevor Timms-Martinez</p></li><li><p>Emily Cook</p></li><li><p>Madisyn Herron</p></li><li><p>Regan Nelson</p></li><li><p>Joshua Tobiasz</p></li><li><p>Collin Cooper</p></li><li><p>Kaden Hillman</p></li><li><p>Andrew Nguyen</p></li><li><p>Erica Tong</p></li><li><p>Briana Crippen</p></li><li><p>Lauren Hoffa</p></li><li><p>Tyler Nielsen</p></li><li><p>Noah Tongen</p></li><li><p>Nicholas Curtis</p></li><li><p>Allison Holcombe</p></li><li><p>Tanja Oostenrijk</p></li><li><p>Sophia Turner</p></li><li><p>Daxton Davenport</p></li><li><p>Ashton Holmes</p></li><li><p>Peyton Oppelt</p></li><li><p>Avery Valdez</p></li><li><p>Zachariah Davis</p></li><li><p>Quinn Howell</p></li><li><p>Brenner Page</p></li><li><p>Angelique Vuldy</p></li><li><p>Abigail DeCecco</p></li><li><p>Grace Hu</p></li><li><p>Erin Park</p></li><li><p>Hannah Wade</p></li><li><p>Sophia DeJoia</p></li><li><p>Madison Huxhold</p></li><li><p>Cade Parker</p></li><li><p>Isabella Wade</p></li><li><p>Chloe Dembroski</p></li><li><p>Matthew Jennings</p></li><li><p>Lauryn Peck</p></li><li><p>Allan Watson</p></li><li><p>Anna DeThomas</p></li><li><p>Samuel Jensen</p></li><li><p>Sadie Peroulas</p></li><li><p>Madison Weiner</p></li><li><p>Avery Dial</p></li><li><p>Ethan Johnson</p></li><li><p>Sydney Provan</p></li><li><p>Liam Whetzal</p></li><li><p>Jake Eaton</p></li><li><p>Keira Johnson</p></li><li><p>Nikhil Pudtha</p></li><li><p>Emma Wilhelm</p></li><li><p>Lauren Ebner</p></li><li><p>Maya Kaipus</p></li><li><p>Nitya Pudtha</p></li><li><p>Aidan Wilson</p></li><li><p>Mark Eddings II</p></li><li><p>Shunya Kawazoe</p></li><li><p>Tessa Raedeke</p></li><li><p>Christian Winkler</p></li><li><p>Gus Engel</p></li><li><p>Addison King</p></li><li><p>Abby Reardanz</p></li><li><p>Skyler Wood</p></li><li><p>Caitlyn Ericksen</p></li><li><p>Bailey King</p></li><li><p>Gabriella Redfern</p></li><li><p>Jasmine Woods</p></li> </ol><hr/>",
             "status": "Published",
             "publishDateTime": "2019-07-29T21:04:21.000Z",
+            "modifiedDateTime": "2019-07-31T21:04:21.000Z",
             "expireDateTime": null,
             "translations": [],
             "images": [