@asd20/ui 3.2.360 → 3.2.363

package/package.json

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

package/src/components/atoms/Asd20ThumbnailAvatar/index.vue

@@ -1,6 +1,6 @@
 <template>
   <figure :class="classes" class="asd20-thumbnail-avatar">
-    <img :src="thumbnail" :alt="label || 'The logo for this link.'" />
+    <img :src="thumbnail" :alt="label" />
   </figure>
 </template>
 
@@ -10,7 +10,7 @@ export default {
   props: {
     square: { type: Boolean, default: false },
     contain: { type: Boolean, default: false },
-    text: { type: String, default: '' },
+    label: { type: String, default: 'The logo for this link.' },
     thumbnail: {
       type: String,
       default: '',

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

@@ -20,7 +20,7 @@
         :thumbnail="thumbnail"
         :square="fullThumbnail"
         :contain="fullThumbnail"
-        :alt="label"
+        :label="label"
       />
       <slot name="thumbnail" />
     </div>

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

@@ -5,47 +5,6 @@
     :class="classes"
     role="banner"
   >
-    <!-- <div v-if="$slots.top" class="asd20-homepage-header__top">
-      <slot name="top" />
-    </div> -->
-    <!-- <div class="asd20-campus-header__top">
-      <asd20-district-logo
-        v-show="
-          organization.title === 'Academy District 20' &&
-            mq !== 'sm' &&
-            mq !== 'md'
-        "
-      ></asd20-district-logo>
-      <client-only>
-        <asd20-logo
-          v-if="organization.title !== 'Academy District 20'"
-          :title="mapOrganizationTitle"
-          :subtitle="mapOrganizationSubtitle"
-          :image="organization.logoImageUrl"
-          :link="organization.website"
-          size="md"
-          bordered
-          wrappable
-        />
-        <asd20-organization-picker
-          class="largePicker"
-          v-show="organization.title !== 'Academy District 20'"
-          :organization-options="organizationOptions"
-          :organization="organization"
-        ></asd20-organization-picker>
-      </client-only>
-      <client-only>
-        <asd20-organization-picker
-          class="smallPicker"
-          v-show="organization.title !== 'Academy District 20'"
-          :organization-options="organizationOptions"
-          :organization="organization"
-          logoSize="xs"
-        ></asd20-organization-picker>
-      </client-only>
-      <slot name="top" />
-    </div> -->
-
     <div class="asd20-campus-header__top">
       <asd20-district-logo
         v-show="
@@ -182,7 +141,7 @@ export default {
   flex-shrink: 0;
   flex-direction: column;
   box-sizing: border-box;
-  margin-top: space(1);
+  margin: space(1);
   .heading-container {
     margin-bottom: space(1);
   }

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

@@ -316,6 +316,7 @@ export default {
       width: auto;
       margin-bottom: space(2);
       top: -2.125%;
+      max-width: inherit;
     }
     &::v-deep .asd20-district-logo {
       position: relative;

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

@@ -1,7 +1,7 @@
 <template>
   <div class="asd20-template-base">
     <!-- Skip Nav -->
-    <asd20-skip-to></asd20-skip-to>
+    <asd20-skip-to />
 
     <!-- Banner Notifications -->
     <client-only>
@@ -26,17 +26,8 @@
       :languageCode="languageCode"
       v-on="$listeners"
     >
+      <!-- Floating Notifications -->
       <template slot="top">
-        <!-- Status Notifications -->
-        <client-only>
-          <asd20-notification-group
-            :notifications="activeNotificationsByType.status"
-            group-type="status"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          />
-        </client-only>
-        <!-- Floating Notifications -->
         <client-only>
           <asd20-notification-group
             class="asd20-notification-group--floating"
@@ -63,30 +54,34 @@
     >
     </asd20-site-navigation>
 
+    <!-- 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
-      omit-body-content
-      grid
     >
-      <!-- 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>
-
-      <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>
 
+    <!-- Feeds -->
     <asd20-feeds-section
       :announcements="announcements"
       :announcements-feed-props="announcementsFeedProps"
@@ -99,27 +94,27 @@
       @events-in-view="$emit('events-in-view')"
     ></asd20-feeds-section>
 
-    <!-- Widgets -->
-    <intersect
-      @enter="
-        $emit('files-in-view')
-        $emit('events-in-view')
-      "
-    >
-      <asd20-widgets-section
-        :related-pages="relatedPages"
-        :related-links="relatedLinks"
-        :group="group"
-        :events="events"
-        :eventsFeedProps="eventsFeedProps"
-        :files="files"
-        :filesFeedProps="filesFeedProps"
-        :people="files"
-        :peopleFeedProps="peopleFeedProps"
-      >
-        <slot name="widgets" />
-      </asd20-widgets-section>
-    </intersect>
+    <!-- Bottom Widgets -->
+    <asd20-widgets-section
+      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
+      ><slot name="widgets"
+    /></asd20-widgets-section>
+
+    <!-- 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>
 
     <slot name="before-footer" />
 
@@ -155,8 +150,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'
 
@@ -173,7 +166,6 @@ export default {
     Asd20FeedsSection,
     Asd20NotificationGroup,
     Asd20QuicklinksMenu,
-    Intersect,
   },
 }
 </script>

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

@@ -12,6 +12,7 @@
         @toggle-all="$emit('toggle-all')"
       />
     </client-only>
+
     <!-- Page Header -->
     <asd20-page-header
       id="page-header"
@@ -52,6 +53,7 @@
       :organization-options="organizationOptions"
     >
     </asd20-site-navigation>
+
     <!-- Inline-Notifications -->
     <client-only>
       <asd20-notification-group
@@ -99,20 +101,6 @@
     >
     </asd20-media-section>
 
-    <!-- Bottom Widgets -->
-    <!-- <asd20-widgets-section
-      v-if="
-        widgetsSectionProps.footer ||
-          widgetsSectionProps.sidebar ||
-          $slots.widgets
-      "
-      v-bind="{ ...widgetsSectionProps.footer, ...widgetsSectionProps.sidebar }"
-      @events-in-view="$emit('events-in-view')"
-      @files-in-view="$emit('files-in-view')"
-      full
-      ><slot name="widgets"
-    /></asd20-widgets-section> -->
-
     <!-- Bottom Widgets -->
     <asd20-widgets-section
       v-if="widgetsSectionProps.footer || $slots.widgets"

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

@@ -286,6 +286,12 @@ export default {
   flex-shrink: 0;
   overflow: hidden;
   margin-top: space(2.25);
+  .asd20-page-header::after {
+    left: 0 !important;
+  }
+  .asd20-page-header {
+    margin-bottom: space(0) !important;
+  }
   .notification-group--floating {
     position: absolute;
     right: space(0.5);
@@ -301,9 +307,9 @@ export default {
     background-position-y: top;
     padding: space(1) 0;
   }
-  .logins-tab-bar {
-    padding: space(2) 0 0 0;
-  }
+  // .logins-tab-bar {
+  //   padding: space(2) 0 0 0;
+  // }
   .logins-list {
     display: flex;
     flex-direction: column;
@@ -337,12 +343,6 @@ export default {
     .notification-group--inline {
       margin: space(2) space(3) space(1) space(3);
     }
-    .asd20-page-header {
-      margin-bottom: space(0);
-    }
-    .asd20-page-header::after {
-      left: 0;
-    }
     .asd20-page-content {
       margin-top: space(1);
     }
@@ -350,7 +350,7 @@ export default {
       padding: space(3);
     }
     .logins-tab-bar {
-      padding: space(1) space(2) 0 space(3);
+      padding: space(1) space(2) 0 space(3) !important;
     }
     .logins-list {
       padding: space(1) space(3);

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

@@ -0,0 +1,58 @@
+import { storiesOf } from '@storybook/vue'
+import { withKnobs, boolean } from '@storybook/addon-knobs'
+
+import mockPageMixin from '../../../mixins/mockPageMixin'
+
+import Asd20SalaryCalculatorTemplate from '.'
+import pageQueryResult from '../../../data/page-queries/salary-calculator-page-result.json'
+import notifications from '../../../data/messages/notifications'
+
+const info = {
+  summary: 'Salary Calculator Template',
+}
+
+const wrapper = {
+  mixins: [mockPageMixin],
+  components: {
+    Asd20SalaryCalculatorTemplate,
+  },
+
+  data: () => ({ pageQueryResult }),
+
+  computed: {
+    activeNotificationsByType() {
+      const empty = {
+        inline: [],
+        banner: [],
+        floating: [],
+        status: [],
+      }
+      return boolean('Show Notifications', false)
+        ? notifications || empty
+        : empty
+    },
+  },
+}
+
+const stories = storiesOf('Templates - Asd20SalaryCalculatorTemplate', module)
+stories.addDecorator(withKnobs)
+
+stories.add(
+  'Default',
+  () => ({
+    ...wrapper,
+    template: `
+     <Asd20SalaryCalculatorTemplate
+      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"
+     
+    />`,
+  }),
+  { info }
+)