@asd20/ui 3.2.466 → 3.2.467

package/package.json

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

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

@@ -2,10 +2,15 @@
   <section class="asd20-widgets-section">
     <slot name="before" />
 
-    <asd20-department-contact-card v-if="group" :group="group" />
+    <asd20-department-contact-card
+      class="relatedDepartment"
+      v-if="group"
+      :group="group"
+    />
 
     <asd20-people-list
-      v-if="people.length"
+      class="relatedPeople"
+      v-if="people.length && !noPeople"
       :people="people"
       v-bind="peopleFeedProps"
       :multi-column="full"
@@ -13,6 +18,7 @@
     />
 
     <asd20-link-list
+      class="relatedPages"
       v-if="relatedPages"
       :links="relatedPages"
       v-bind="relatedPagesProps"
@@ -27,6 +33,7 @@
     </intersect> -->
 
     <asd20-link-list
+      class="relatedLinks"
       :links="relatedLinks"
       v-bind="relatedLinksProps"
       :multi-column="full"
@@ -35,6 +42,8 @@
 
     <intersect v-if="filesFeedProps" @enter="$emit('files-in-view')">
       <asd20-file-list
+        v-if="files.length && !noFiles"
+        class="relatedFiles"
         v-bind="filesFeedProps"
         :files="files"
         :multi-column="full"
@@ -94,6 +103,8 @@ export default {
     videos: { type: Array, default: () => [] },
 
     full: { type: Boolean, default: false },
+    noFiles: { type: Boolean, default: false },
+    noPeople: { type: Boolean, default: false },
   },
 }
 </script>
@@ -143,5 +154,10 @@ export default {
       max-width: 50vw;
     }
   }
+  .relatedDepartment,
+  .relatedPeople,
+  .relatedPages {
+    max-width: 50vw;
+  }
 }
 </style>

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

@@ -216,6 +216,7 @@
       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>

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

@@ -441,12 +441,15 @@ export default {
     margin: 0 space(1);
     .asd20-card {
       margin-bottom: space(-0.5);
+      :hover {
+        background: rgb(240, 240, 240);
+      }
     }
     .asd20-search-field .asd20-icon {
       margin-left: 0;
     }
     .asd20-card__content {
-      padding: space(1) space(0);
+      padding: space(1) space(1);
     }
 
     h2,
@@ -491,7 +494,7 @@ export default {
       flex-wrap: wrap;
       .asd20-widgets-section {
         flex-basis: 30%;
-        padding: space(2) space(2) 0 0;
+        padding: 0 space(2) 0 0;
         background: none;
       }
     }
@@ -506,7 +509,7 @@ export default {
     }
     .article-list {
       flex-basis: 50%;
-      margin: space(1) space(0) space(1) space(3);
+      margin: space(0) space(0) space(1) space(3);
     }
     .asd20-card {
       margin-bottom: space(1);

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

@@ -52,27 +52,43 @@
       <!-- <asd20-breadcrumb slot="top" :links="breadcrumbLinks"></asd20-breadcrumb> -->
     </asd20-page-header>
 
+    <!-- Inline-Notifications -->
+    <client-only>
+      <asd20-notification-group
+        :notifications="activeNotificationsByType.inline"
+        group-type="inline"
+        @dismiss="$emit('dismiss-notification', $event)"
+        @toggle-all="$emit('toggle-all')"
+      ></asd20-notification-group>
+    </client-only>
+
     <!-- Page Content -->
     <asd20-page-content
       :primary-messages="primaryMessages"
+      :secondary-messages="secondaryMessages"
       omit-detail-links
       omit-calls-to-action
     >
-      <!-- Inline Notifications -->
-      <client-only>
-        <asd20-notification-group
-          slot="before"
-          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>
-
-      <slot></slot>
+      <!-- Sidebar Widgets -->
+      <asd20-widgets-section
+        v-if="widgetsSectionProps.sidebar"
+        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>
 
+    <!-- File List -->
+    <asd20-file-list
+      class="fileList"
+      :files="files"
+      v-bind="filesFeedProps"
+      @files-in-view="$emit('files-in-view')"
+      :multi-column="true"
+      max-height="auto"
+    />
+
     <asd20-media-section
       v-if="combinedMessageImages.length > 1 || combinedMessageVideos.length"
       :images="this.combinedMessageImages || []"
@@ -83,15 +99,14 @@
     <!-- Bottom Widgets -->
     <asd20-widgets-section
       v-if="widgetsSectionProps.footer || $slots.widgets"
-      v-bind="{ ...widgetsSectionProps.footer, ...widgetsSectionProps.sidebar }"
+      v-bind="widgetsSectionProps.footer"
       @events-in-view="$emit('events-in-view')"
       @files-in-view="$emit('files-in-view')"
       full
+      noFiles
       ><slot name="widgets"
     /></asd20-widgets-section>
 
-    <slot name="widgets" />
-
     <slot name="before-footer" />
 
     <!-- Quick Links -->
@@ -120,6 +135,7 @@ import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigati
 import Asd20PageContent from '../../../components/organisms/Asd20PageContent'
 import Asd20MediaSection from '../../../components/organisms/Asd20MediaSection'
 import Asd20WidgetsSection from '../../../components/organisms/Asd20WidgetsSection'
+import Asd20FileList from '../../../components/organisms/Asd20FileList'
 
 import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
 import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
@@ -141,6 +157,7 @@ export default {
     Asd20QuicklinksMenu,
     Asd20WidgetsSection,
     Asd20MediaSection,
+    Asd20FileList,
   },
   props: {
     // groupByOwner: { type: Boolean, default: false },
@@ -150,6 +167,15 @@ export default {
     // fileGroupTitle: { type: String, default: 'Related Files' },
     files: { type: Array, default: () => [] },
   },
+  mounted() {
+    this.$emit('files-in-view')
+  },
+
+  beforeRouteEnter(to, from, next) {
+    next(vm => {
+      vm.$emit('files-in-view')
+    })
+  },
 }
 </script>
 
@@ -188,19 +214,45 @@ export default {
       }
     }
   }
+  .fileList {
+    padding: space(1);
+    --minimum-column-width: 620px;
+    --gutter: #{space(0.5)};
+    display: block;
+    flex-direction: row;
+    flex-wrap: wrap;
+    // justify-content: space-between;
+    margin: 0 calc(var(--gutter) * -1);
+    height: min-content;
 
-  .asd20-file-page-section {
-    background-position-y: top;
-    margin: 0 space(1);
-    padding-bottom: space(2);
-  }
-  .asd20-widgets-section {
-    padding: space(0) space(0);
+    &::v-deep > * {
+      flex: 1 1 var(--minimum-column-width);
+      margin: var(--gutter);
+      // max-width: space(25);
+    }
   }
 }
+// @media (max-width: 1023px) {
+//   .asd20-template-file-list {
+//     .fileList {
+//       flex-direction: row;
+//       &::v-deep .asd20-list__header {
+//         padding: 0 space(0.75);
+//       }
+//       &::v-deep .asd20-list-category {
+//         padding-left: space(1);
+//       }
+//       &::v-deep .asd20-list-item {
+//         padding-left: space(1);
+//         padding-right: space(1);
+//       }
+//     }
+//   }
+// }
 
 @media (min-width: 1024px) {
   .asd20-template-file-list {
+    @include template-desktop;
     margin-left: space(3);
     margin-top: 0;
     .asd20-notification-group--floating {
@@ -214,14 +266,36 @@ export default {
       //   }
       // }
     }
+    .notification-group--inline {
+      margin: space(2) space(3) space(1) space(3);
+      flex-basis: 100%;
+      margin-bottom: 0 !important;
+    }
+
     .asd20-page-content {
-      margin-top: space(1);
+      // margin-top: space(1);
+      display: flex;
+      justify-content: space-between;
+      align-items: stretch;
+      flex-wrap: wrap;
+      .asd20-widgets-section {
+        flex-basis: 30%;
+        padding: space(2) space(2) 0 0;
+        background: none;
+      }
     }
-    .asd20-file-page-section {
-      padding: 0 space(2);
+    .primary-messaging-section {
+      max-width: 50vw;
     }
-    .asd20-widgets-section {
-      padding: space(0) space(3);
+    .fileList {
+      padding: space(3.5);
+      display: flex;
+
+      --minimum-column-width: 450px;
+      --gutter: #{space(1)};
+      &::v-deep .asd20-person-list {
+        max-width: 50vw;
+      }
     }
   }
 }

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

@@ -4,7 +4,7 @@ import { withKnobs, boolean } from '@storybook/addon-knobs'
 import mockPageMixin from '../../../mixins/mockPageMixin'
 
 import Asd20PeopleFeatureTemplate from '.'
-import pageQueryResult from '../../../data/page-queries/landing-page-query-result.json'
+import pageQueryResult from '../../../data/page-queries/sublanding-page-query-result.json'
 import notifications from '../../../data/messages/notifications'
 
 const info = {
@@ -50,7 +50,7 @@ stories.add(
     ...wrapper,
     template: `
     <Asd20PeopleFeatureTemplate
-      v-bind="templatePropsNoMessages"
+      v-bind="templateProps"
       :menu-open.sync="menuOpen"
       :search-open.sync="searchOpen"
 

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

@@ -53,32 +53,40 @@
       <!-- <asd20-breadcrumb slot="top" :links="breadcrumbLinks"></asd20-breadcrumb> -->
     </asd20-page-header>
 
+    <!-- Inline-Notifications -->
+    <client-only>
+      <asd20-notification-group
+        :notifications="activeNotificationsByType.inline"
+        group-type="inline"
+        @dismiss="$emit('dismiss-notification', $event)"
+        @toggle-all="$emit('toggle-all')"
+      ></asd20-notification-group>
+    </client-only>
+
     <!-- Page Content -->
     <asd20-page-content
       :primary-messages="primaryMessages"
       :secondary-messages="secondaryMessages"
-      grid
-      forceDisplay
+      omit-detail-links
+      omit-calls-to-action
     >
-      <!-- Inline-Notifications -->
-      <template slot="before">
-        <client-only>
-          <asd20-notification-group
-            :notifications="activeNotificationsByType.inline"
-            group-type="inline"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          ></asd20-notification-group>
-        </client-only>
-      </template>
-      <asd20-people-list
-        :people="people"
-        v-bind="peopleFeedProps"
+      <!-- Sidebar Widgets -->
+      <asd20-widgets-section
+        v-if="widgetsSectionProps.sidebar"
+        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')"
-      />
-      <slot></slot>
+      ></asd20-widgets-section>
     </asd20-page-content>
 
+    <!-- People List -->
+    <asd20-people-list
+      :people="people"
+      v-bind="peopleFeedProps"
+      @people-in-view="$emit('people-in-view')"
+    />
+
     <asd20-feeds-section
       :announcements="announcements"
       :announcements-feed-props="announcementsFeedProps"
@@ -93,18 +101,12 @@
 
     <!-- Bottom Widgets -->
     <asd20-widgets-section
-      v-if="
-        widgetsSectionPropsNoPeople.footer ||
-          widgetsSectionPropsNoPeople.sidebar ||
-          $slots.widgets
-      "
-      v-bind="{
-        ...widgetsSectionPropsNoPeople.footer,
-        ...widgetsSectionPropsNoPeople.sidebar,
-      }"
+      v-if="widgetsSectionProps.footer || $slots.widgets"
+      v-bind="widgetsSectionProps.footer"
       @events-in-view="$emit('events-in-view')"
       @files-in-view="$emit('files-in-view')"
       full
+      noPeople
       ><slot name="widgets"
     /></asd20-widgets-section>
 
@@ -176,21 +178,6 @@ export default {
       vm.$emit('people-in-view')
     })
   },
-
-  computed: {
-    widgetsSectionPropsNoPeople() {
-      if (
-        this.widgetsSectionProps &&
-        this.widgetsSectionProps.footer &&
-        this.widgetsSectionProps.footer.people
-      ) {
-        let removePeopleFromWidget = this.widgetsSectionProps
-        delete removePeopleFromWidget.footer.people
-        return removePeopleFromWidget
-      }
-      return this.widgetsSectionProps
-    },
-  },
 }
 </script>
 
@@ -211,8 +198,26 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: space(2);
+    .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-person-list {
-    padding: space(1);
+    padding: space(3);
   }
 }
 
@@ -221,8 +226,38 @@ export default {
     @include template-desktop;
     margin-left: space(3);
     margin-top: 0;
+    .asd20-notification-group--floating {
+      position: absolute;
+      top: space(1);
+      // .bell {
+      //   span {
+      //     background: var(--color__accent);
+      //     top: -0.6em !important;
+      //     right: -0.6em !important;
+      //   }
+      // }
+    }
+    .notification-group--inline {
+      margin: space(2) space(3) space(1) space(3);
+      flex-basis: 100%;
+      margin-bottom: 0 !important;
+    }
+
     .asd20-page-content {
-      margin-top: space(1);
+      // margin-top: space(1);
+      display: flex;
+      justify-content: space-between;
+      align-items: stretch;
+      flex-wrap: wrap;
+      .asd20-widgets-section {
+        flex-basis: 30%;
+        padding: space(2) space(2) 0 0;
+        background: none;
+      }
+    }
+
+    .primary-messaging-section {
+      max-width: 50vw;
     }
   }
 }

package/src/mixins/pageTemplateMixin.js

@@ -212,8 +212,10 @@ export default {
       */
 
       const useSidebar =
-        this.firstMessage && this.firstMessage.bodyHtml && this.desktop
-
+        this.firstMessage &&
+        this.firstMessage.bodyHtml &&
+        this.desktop &&
+        this.primaryMessages.length < 3
       const relatedLinksContainImages =
         this.relatedLinks.length && !!this.relatedLinks.find(l => !!l.imageUrl)