@asd20/ui 3.2.407 → 3.2.410

package/package.json

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

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

@@ -10,18 +10,19 @@
     class="asd20-event-modal"
     @dismiss="$emit('dismiss')"
     :style="{ '--accent-color': event.calendarColor }"
+    v-scroll-lock="open"
   >
-    <header class="asd20-event-modal__header">
-      <div class="asd20-event-modal__date">
-        <div class="top">{{ event.weekday }}</div>
-        <div class="middle">{{ event.day }}</div>
-        <div class="bottom">{{ event.month }}</div>
-        <small>{{ event.year }}</small>
-      </div>
-      <h2 class="name">{{ event.summary }}</h2>
-    </header>
-    <Asd20Viewport class="asd20-event-modal__details" scrollable>
-      <Asd20List>
+    <Asd20Viewport tabindex="0" class="asd20-event-modal__details" scrollable>
+      <header class="asd20-event-modal__header">
+        <div class="asd20-event-modal__date">
+          <div class="top">{{ event.weekday }}</div>
+          <div class="middle">{{ event.day }}</div>
+          <div class="bottom">{{ event.month }}</div>
+          <small>{{ event.year }}</small>
+        </div>
+        <h2 class="name">{{ event.summary }}</h2>
+      </header>
+      <Asd20List class="description">
         <Asd20ListItem
           icon="map"
           icon-size="lg"
@@ -56,6 +57,8 @@
 
 <script>
 // import parse from 'date-fns/parse'
+import Vue from 'vue'
+
 import { truncate } from 'lodash-es'
 import { format, parse } from 'date-fns'
 import Asd20Modal from '../../molecules/Asd20Modal'
@@ -63,6 +66,8 @@ import Asd20Tag from '../../atoms/Asd20Tag'
 import Asd20List from '../../organisms/Asd20List'
 import Asd20ListItem from '../../molecules/Asd20ListItem'
 import Asd20Viewport from '../../atoms/Asd20Viewport'
+import VScrollLock from 'v-scroll-lock'
+Vue.use(VScrollLock)
 
 export default {
   name: 'Asd20EventModal',
@@ -193,11 +198,13 @@ export default {
     }
   }
   &__details {
-    padding: space(1);
   }
+  .description,
   .tags {
     display: flex;
-    width: 100%;
+    max-width: 100%;
+    padding: space(1);
+
     * {
       margin-right: space(0.125);
       margin-bottom: space(0.125);
@@ -231,7 +238,6 @@ export default {
       }
     }
     &__details {
-      padding: space(2);
     }
   }
 }

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

@@ -12,6 +12,20 @@
         @toggle-all="$emit('toggle-all')"
       />
     </client-only>
+
+    <!-- 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>
+
     <!-- Page Header -->
     <asd20-page-header
       id="page-header"
@@ -40,18 +54,6 @@
       </template>
     </asd20-page-header>
 
-    <!-- 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>
     <!-- Inline-Notifications -->
     <client-only>
       <asd20-notification-group
@@ -75,6 +77,7 @@
         v-bind="widgetsSectionProps.sidebar"
         @events-in-view="$emit('events-in-view')"
         @files-in-view="$emit('files-in-view')"
+        @people-in-view="$emit('people-in-view')"
       ></asd20-widgets-section>
     </asd20-page-content>
 
@@ -141,8 +144,6 @@ import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
 import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
 import Asd20NotificationGroup from '@asd20/notifications-ui/src/components/Asd20NotificationGroup'
 
-// import Intersect from 'vue-intersect'
-
 // Mixins
 import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
 
@@ -160,7 +161,6 @@ export default {
     Asd20NotificationGroup,
     Asd20QuicklinksMenu,
     Asd20MediaSection,
-    // Intersect,
   },
 }
 </script>
@@ -200,19 +200,11 @@ export default {
       }
     }
   }
-  .notification-group--inline {
-    margin: space(1);
-  }
-  .asd20-widgets-section {
-    background: var(--website-page__alternate-background-color);
-    background-image: var(--website-texture__default);
-    background-position-y: top;
-    padding: space(1) 0;
-  }
 }
 
 @media (min-width: 1024px) {
   .asd20-template-article {
+    @include template-desktop;
     margin-left: space(3);
     margin-top: 0;
     .asd20-notification-group--floating {
@@ -228,10 +220,8 @@ export default {
     }
     .notification-group--inline {
       margin: space(2) space(3) space(1) space(3);
-    }
-    .asd20-widgets-section {
-      padding: space(2) space(3);
-      height: min-content;
+      flex-basis: 100%;
+      margin-bottom: 0 !important;
     }
 
     .asd20-page-content {
@@ -246,10 +236,6 @@ export default {
         background: none;
       }
     }
-    .notification-group--inline {
-      flex-basis: 100%;
-      margin-bottom: 0 !important;
-    }
     .primary-messaging-section {
       max-width: 50vw;
     }

package/src/config/configurations.json

@@ -67,7 +67,7 @@
     "backgroundStyle": "",
     "buttonForegroundColor": "var(--color__on-accent)",
     "buttonHoverBackgroundColor": "var(--color__accent-t10)",
-    "buttonHoverForegroundColor": "var(--color__on-accent-s10)",
+    "buttonHoverForegroundColor": "var(--color__on-accent)",
     "buttonBackgroundColor": "var(--color__accent)"
   },
   "websiteHomepageHeader": {
@@ -77,7 +77,7 @@
     "buttonBackgroundColor": "var(--color__accent)",
     "buttonForegroundColor": "var(--color__on-accent)",
     "buttonHoverBackgroundColor": "var(--color__accent-t10)",
-    "buttonHoverForegroundColor": "var(--color__on-accent-s10)",
+    "buttonHoverForegroundColor": "var(--color__on-accent)",
     "foregroundColor": "var(--color__secondary-t90)",
     "titleColor": "#fff",
     "secondaryBackgroundColor": "var(--color__secondary)",
@@ -85,7 +85,7 @@
     "secondaryButtonBackgroundColor": "var(--color__accent)",
     "secondaryButtonForegroundColor": "var(--color__on-accent)",
     "secondaryButtonHoverBackgroundColor": "var(--color__accent-t10)",
-    "secondaryButtonHoverForegroundColor": "var(--color__on-accent-s10)",
+    "secondaryButtonHoverForegroundColor": "var(--color__on-accent)",
     "secondaryForegroundColor": "var(--color__secondary-t90)",
     "secondaryTitleColor": "#fff"
   },

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

@@ -1989,7 +1989,7 @@
       "id": "7d41aee0-5d68-11ea-bd6b-41dc743510b6",
       "title": "Header Button Hover Foreground Color",
       "type": "color",
-      "value": "var(--color__on-accent-s10)",
+      "value": "var(--color__on-accent)",
       "validationPattern": "",
       "required": false
     },

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

@@ -1752,7 +1752,7 @@
             "id": "7d41aee0-5d68-11ea-bd6b-41dc743510b6",
             "title": "Header Button Hover Foreground Color",
             "type": "color",
-            "value": "var(--color__on-accent-s10)",
+            "value": "var(--color__on-accent)",
             "validationPattern": "",
             "required": false
         },

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

@@ -1717,7 +1717,7 @@
             "id": "7d41aee0-5d68-11ea-bd6b-41dc743510b6",
             "title": "Header Button Hover Foreground Color",
             "type": "color",
-            "value": "var(--color__on-accent-s10)",
+            "value": "var(--color__on-accent)",
             "validationPattern": "",
             "required": false
         },

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

@@ -2251,7 +2251,7 @@
       "id": "7d41aee0-5d68-11ea-bd6b-41dc743510b6",
       "title": "Header Button Hover Foreground Color",
       "type": "color",
-      "value": "var(--color__on-accent-s10)",
+      "value": "var(--color__on-accent)",
       "validationPattern": "",
       "required": false
     },

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

@@ -1935,7 +1935,7 @@
       "id": "7d41aee0-5d68-11ea-bd6b-41dc743510b6",
       "title": "Header Button Hover Foreground Color",
       "type": "color",
-      "value": "var(--color__on-accent-s10)",
+      "value": "var(--color__on-accent)",
       "validationPattern": "",
       "required": false
     },

package/src/data/page-queries/page-not-found.json

@@ -1565,7 +1565,7 @@
       "id": "7d41aee0-5d68-11ea-bd6b-41dc743510b6",
       "title": "Header Button Hover Foreground Color",
       "type": "color",
-      "value": "var(--color__on-accent-s10)",
+      "value": "var(--color__on-accent)",
       "validationPattern": "",
       "required": false
     },

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

@@ -2360,7 +2360,7 @@
         "id": "7d41aee0-5d68-11ea-bd6b-41dc743510b6",
         "title": "Header Button Hover Foreground Color",
         "type": "color",
-        "value": "var(--color__on-accent-s10)",
+        "value": "var(--color__on-accent)",
         "validationPattern": "",
         "required": false
       },

package/src/data/page-queries/salary-calculator-page-result.json

@@ -1862,7 +1862,7 @@
         "id": "7d41aee0-5d68-11ea-bd6b-41dc743510b6",
         "title": "Header Button Hover Foreground Color",
         "type": "color",
-        "value": "var(--color__on-accent-s10)",
+        "value": "var(--color__on-accent)",
         "validationPattern": "",
         "required": false
       },

package/src/data/page-queries/school-home-page-query-result.json

@@ -2051,7 +2051,7 @@
       "id": "7d41aee0-5d68-11ea-bd6b-41dc743510b6",
       "title": "Header Button Hover Foreground Color",
       "type": "color",
-      "value": "var(--color__on-accent-s10)",
+      "value": "var(--color__on-accent)",
       "validationPattern": "",
       "required": false
     },

package/src/data/page-queries/story-index-page-query-result.json

@@ -1747,7 +1747,7 @@
             "id": "7d41aee0-5d68-11ea-bd6b-41dc743510b6",
             "title": "Header Button Hover Foreground Color",
             "type": "color",
-            "value": "var(--color__on-accent-s10)",
+            "value": "var(--color__on-accent)",
             "validationPattern": "",
             "required": false
         },

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

@@ -1864,7 +1864,7 @@
         "id": "7d41aee0-5d68-11ea-bd6b-41dc743510b6",
         "title": "Header Button Hover Foreground Color",
         "type": "color",
-        "value": "var(--color__on-accent-s10)",
+        "value": "var(--color__on-accent)",
         "validationPattern": "",
         "required": false
       },

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

@@ -2109,7 +2109,7 @@
             "id": "7d41aee0-5d68-11ea-bd6b-41dc743510b6",
             "title": "Header Button Hover Foreground Color",
             "type": "color",
-            "value": "var(--color__on-accent-s10)",
+            "value": "var(--color__on-accent)",
             "validationPattern": "",
             "required": false
         },

package/src/design/tokens.base.json

@@ -53,7 +53,7 @@
     "buttonBackgroundColor": "#0e2c6c",
     "buttonForegroundColor": "var(--color__on-accent)",
     "buttonHoverBackgroundColor": "#0e2c6c",
-    "buttonHoverForegroundColor": "var(--color__on-accent-s10)",
+    "buttonHoverForegroundColor": "var(--color__on-accent)",
     "descriptionBackgroundColor": "var(--website-page__background-color)",
     "descriptionForegroundColor": "var(--website-page__foreground-color)",
     "foregroundColor": "var(--color__secondary-t90)",
@@ -68,7 +68,7 @@
     "buttonBackgroundColor": "var(--color__accent)",
     "buttonForegroundColor": "var(--color__on-accent)",
     "buttonHoverBackgroundColor": "var(--color__accent-t10)",
-    "buttonHoverForegroundColor": "var(--color__on-accent-s10)",
+    "buttonHoverForegroundColor": "var(--color__on-accent)",
     "foregroundColor": "var(--color__secondary-t90)",
     "titleColor": "#fff",
     "secondaryBackgroundColor": "var(--color__secondary)",
@@ -76,7 +76,7 @@
     "secondaryButtonBackgroundColor": "var(--color__accent)",
     "secondaryButtonForegroundColor": "var(--color__on-accent)",
     "secondaryButtonHoverBackgroundColor": "var(--color__accent-t10)",
-    "secondaryButtonHoverForegroundColor": "var(--color__on-accent-s10)",
+    "secondaryButtonHoverForegroundColor": "var(--color__on-accent)",
     "secondaryForegroundColor": "var(--color__secondary-t90)",
     "secondaryTitleColor": "#fff"
   },

package/src/design/tokens.css

@@ -124,7 +124,7 @@
   --website-header__button-background-color: var(--color__accent);
   --website-header__button-foreground-color: var(--color__on-accent);
   --website-header__button-hover-background-color: var(--color__accent);
-  --website-header__button-hover-foreground-color: var(--color__on-accent-s10);
+  --website-header__button-hover-foreground-color: var(--color__on-accent);
   --website-header__description-background-color: var(--website-page__background-color);
   --website-header__description-foreground-color: var(--website-page__foreground-color);
   --website-header__foreground-color: var(--color__secondary-t90);
@@ -137,7 +137,7 @@
   --website-homepage-header__button-background-color: var(--color__accent);
   --website-homepage-header__button-foreground-color: var(--color__on-accent);
   --website-homepage-header__button-hover-background-color: var(--color__accent);
-  --website-homepage-header__button-hover-foreground-color: var(--color__on-accent-s10);
+  --website-homepage-header__button-hover-foreground-color: var(--color__on-accent);
   --website-homepage-header__foreground-color: var(--color__secondary-t90);
   --website-homepage-header__title-color: #fff;
   --website-homepage-header__secondary-background-color: var(--color__secondary);
@@ -145,7 +145,7 @@
   --website-homepage-header__secondary-button-background-color: var(--color__accent);
   --website-homepage-header__secondary-button-foreground-color: var(--color__on-accent);
   --website-homepage-header__secondary-button-hover-background-color: var(--color__secondary-t10);
-  --website-homepage-header__secondary-button-hover-foreground-color: var(--color__on-accent-s10);
+  --website-homepage-header__secondary-button-hover-foreground-color: var(--color__on-accent);
   --website-homepage-header__secondary-foreground-color: var(--color__secondary-t90);
   --website-homepage-header__secondary-title-color: #fff;
   --website-icon__fill-color: var(--color__accent);

package/src/design/tokens.json

@@ -53,7 +53,7 @@
     "buttonBackgroundColor": "#0e2c6c",
     "buttonForegroundColor": "var(--color__on-accent)",
     "buttonHoverBackgroundColor": "#0e2c6c",
-    "buttonHoverForegroundColor": "var(--color__on-accent-s10)",
+    "buttonHoverForegroundColor": "var(--color__on-accent)",
     "descriptionBackgroundColor": "var(--website-page__background-color)",
     "descriptionForegroundColor": "var(--website-page__foreground-color)",
     "foregroundColor": "var(--color__secondary-t90)",
@@ -68,7 +68,7 @@
     "buttonBackgroundColor": "var(--color__accent)",
     "buttonForegroundColor": "var(--color__on-accent)",
     "buttonHoverBackgroundColor": "var(--color__accent-t10)",
-    "buttonHoverForegroundColor": "var(--color__on-accent-s10)",
+    "buttonHoverForegroundColor": "var(--color__on-accent)",
     "foregroundColor": "var(--color__secondary-t90)",
     "titleColor": "#fff",
     "secondaryBackgroundColor": "var(--color__secondary)",
@@ -76,7 +76,7 @@
     "secondaryButtonBackgroundColor": "var(--color__accent)",
     "secondaryButtonForegroundColor": "var(--color__on-accent)",
     "secondaryButtonHoverBackgroundColor": "var(--color__accent-t10)",
-    "secondaryButtonHoverForegroundColor": "var(--color__on-accent-s10)",
+    "secondaryButtonHoverForegroundColor": "var(--color__on-accent)",
     "secondaryForegroundColor": "var(--color__secondary-t90)",
     "secondaryTitleColor": "#fff"
   },