@explorer-1/vue 0.2.29 → 0.2.31

package/dist/src/components/MetaPanel/MetaPanel.stories.d.ts

@@ -37,7 +37,10 @@ export namespace BaseStory {
         let additionalSubjects: {
             subject: string;
         }[];
-        let time: string;
+        namespace time {
+            let time_1: string;
+            export { time_1 as time };
+        }
         let gradeLevels: {
             gradeLevel: string;
         }[];

package/dist/src/components/MetadataEvent/MetadataEvent.stories.d.ts

@@ -13,10 +13,12 @@ export namespace MetadataEventData {
         export let location: string;
         export let startDate: string;
         export let startDatetime: string;
+        export let startTime: string;
         export let endDate: string;
+        export let endDatetime: string;
+        export let endTime: string;
         export let ongoing: boolean;
         export let isVirtualEvent: boolean;
-        export let endDatetime: string;
         export let locationName: string;
         export let locationLink: string;
         export let customDate: undefined;

package/dist/src/components/NavSecondary/NavSecondary.vue.d.ts

@@ -16,6 +16,10 @@ declare const _default: import('vue').DefineComponent<{
         required: false;
         default: boolean;
     };
+    jumpMenu: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, unknown, {
     isSticky: boolean;
     stickyElement?: HTMLElement | undefined;
@@ -58,9 +62,14 @@ declare const _default: import('vue').DefineComponent<{
         required: false;
         default: boolean;
     };
+    jumpMenu: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     invert: boolean;
     breadcrumb: string;
     hasIntro: boolean;
+    jumpMenu: boolean;
 }, {}>;
 export default _default;

package/dist/src/interfaces.d.ts

@@ -206,6 +206,7 @@ export interface PageObject {
     slug: string;
     url: string;
     title: string;
+    readTime?: string;
     getTopicsForDisplay?: Topic[];
     showJumpMenu?: boolean;
     label?: string;

package/dist/src/templates/edu/PageEduCollectionsDetail/PageEduCollectionsDetail.stories.d.ts

@@ -54,6 +54,7 @@ export namespace BaseStory {
                 let alt_1: string;
                 export { alt_1 as alt };
             }
+            export let heroSummary: string;
             export let heroImageCaption: string;
             export let heroConstrain: boolean;
             export let heroPosition: string;

package/dist/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.stories.d.ts

@@ -1,5 +1,6 @@
 import { default as PageEduExplainerArticle } from './PageEduExplainerArticle.vue';
 import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js';
+import { AboutTheAuthorData } from './../../../components/AboutTheAuthor/AboutTheAuthor.stories';
 declare namespace _default {
     export let title: string;
     export { PageEduExplainerArticle as component };
@@ -169,6 +170,8 @@ export namespace BaseStory {
             let title_1: string;
             export { title_1 as title };
             export let readTime: string;
+            export let lastPublishedAt: string;
+            export { AboutTheAuthorData as authors };
             export let heroConstrain: boolean;
             export let heroPosition: string;
             export let hero: {

package/dist/src/templates/edu/PageEduLesson/PageEduLesson.stories.d.ts

@@ -167,14 +167,26 @@ export namespace BaseStory {
                 value: string;
             }[];
             export let backgroundHeading: string;
-            export let procedures: {
-                blocks: {
-                    blockType: string;
-                    value: string;
+            export let procedures: ({
+                sectionHeading: string;
+                stepsNumbering: boolean;
+                steps: {
+                    blocks: {
+                        blockType: string;
+                        value: string;
+                    }[];
                 }[];
-            }[];
+            } | {
+                stepsNumbering: boolean;
+                steps: {
+                    blocks: {
+                        blockType: string;
+                        value: string;
+                    }[];
+                }[];
+                sectionHeading?: undefined;
+            })[];
             export let proceduresHeading: string;
-            export let proceduresStepsNumbering: boolean;
             export let discussion: {
                 blockType: string;
                 value: string;

package/dist/src/templates/edu/PageEduTeachableMoment/PageEduTeachableMoment.stories.d.ts

@@ -27,6 +27,7 @@ export namespace BaseStory {
             export let url: string;
             export let pageType: string;
             export let contentType: string;
+            export let readTime: string;
             export let showJumpMenu: boolean;
             export namespace thumbnailImage {
                 let __typename_1: string;

package/dist/src/utils/rangeifyGrades.d.ts

@@ -1,3 +1,3 @@
 import { GradeLevelsObject } from './../interfaces';
 
-export declare const rangeifyGrades: (gradeLevels: GradeLevelsObject[]) => string | undefined;
+export declare const rangeifyGrades: (gradeLevels: GradeLevelsObject[], showLabel?: boolean) => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.29",
+  "version": "0.2.31",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/NavDesktop/NavDesktop.vue

@@ -246,14 +246,17 @@ export default defineComponent({
     // to determine active class on menu links and 'more' menu links
     checkActive(item: LinkObject) {
       const urlKey = this.getUrlKey(item)
-      if (urlKey && this.breadcrumb && this.breadcrumb.menu_links) {
+      if (urlKey && this.breadcrumb?.menu_links) {
         // key into the breadcrumbs for each section
-        const objArray = this.breadcrumb.menu_links[urlKey]
+        const sectionLinks = this.breadcrumb.menu_links[urlKey]
         // check if any of the paths contained in the array are active
-        const isActive = objArray.some((el: BreadcrumbPathObject) => mixinIsActivePath(el.path))
+        const isActive = sectionLinks.some((link: BreadcrumbPathObject) =>
+          mixinIsActivePath(link.path)
+        )
         if (isActive) {
-          mixinUpdateGlobalChildren(this.breadcrumb.menu_links[urlKey])
+          mixinUpdateGlobalChildren(sectionLinks)
         }
+        console.log(isActive)
         return isActive
       }
       return false

package/src/components/NavJumpMenu/NavJumpMenu.vue

@@ -5,6 +5,7 @@
     ref="NavJumpMenuRef"
     class="NavJumpMenu -hide-until-threshold"
     :invert="invert"
+    jump-menu
   >
     <template v-for="(item, index) in theBreadcrumbs">
       <template v-if="item.children && item.children.length > 0">

package/src/components/NavSecondary/NavSecondary.vue

@@ -79,6 +79,10 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    jumpMenu: {
+      type: Boolean,
+      default: false
     }
   },
   data(): {
@@ -101,9 +105,12 @@ export default defineComponent({
       if (this.breadcrumb) {
         // we also want to update the store to override secondary nav
         mixinUpdateSecondary(JSON.parse(this.breadcrumb))
+
         return JSON.parse(this.breadcrumb)
       } else if (this.headerStore) {
-        return this.headerStore.globalChildren
+        if (!this.jumpMenu) {
+          return this.headerStore.globalChildren
+        }
       }
       return undefined
     },
@@ -117,7 +124,9 @@ export default defineComponent({
   mounted() {
     if (this.enabled) {
       // if there is a secondary nav displayed, then don't highlight the primary active item
-      mixinHighlightPrimary(false)
+      if (!this.jumpMenu) {
+        mixinHighlightPrimary(false)
+      }
     }
 
     if (

package/src/templates/edu/PageEduCollectionsDetail/PageEduCollectionsDetail.stories.js

@@ -54,6 +54,7 @@ export const BaseStory = {
         },
         alt: 'The alt text'
       },
+      heroSummary: 'Lorem ipsum dolor sit amet consectatur adipscing.',
       heroImageCaption: '<p>Lorem ipsum dolor sit amet</p>',
       heroConstrain: true,
       heroPosition: 'full_bleed',

package/src/templates/edu/PageEduCollectionsDetail/PageEduCollectionsDetail.vue

@@ -10,12 +10,13 @@ import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelate
 import HeroLarge from './../../../components/HeroLarge/HeroLarge.vue'
 import NavJumpMenu from './../../../components/NavJumpMenu/NavJumpMenu.vue'
 import MetaPanel from '../../../components/MetaPanel/MetaPanel.vue'
+import ShareButtonsEdu from '../../../components/ShareButtonsEdu/ShareButtonsEdu.vue'
 
 interface PageEduCollectionsDetail extends PageEduResourcesObject {
   heroImage: ImageObject
   heroImageCaption: string
   showMetaPanel: boolean
-  heroSubtitle: string
+  heroSummary: string
 }
 interface PageEduCollectionsDetailProps {
   data?: PageEduCollectionsDetail
@@ -57,9 +58,9 @@ const computedClass = computed((): string => {
       v-if="!heroInline && data.heroImage"
       :title="data.title"
       :image="data.heroImage"
-      :summary="'Test test test lorem ipsum dolor sit amet yep.'"
+      :summary="data.heroSummary"
       :custom-pill-type="data.__typename"
-      :class="!data.showMetaPanel ? 'mb-10 lg:mb-22' : ''"
+      :class="!data.showMetaPanel ? 'mb-10' : ''"
     />
 
     <NavJumpMenu
@@ -81,11 +82,18 @@ const computedClass = computed((): string => {
         pill
         pill-color="primary-inverted"
       />
+
+      <ShareButtonsEdu
+        class="mt-4"
+        :title="data.title"
+        :url="data.url"
+      />
     </LayoutHelper>
+
     <MetaPanel
       v-if="data.showMetaPanel"
       theme="primary"
-      :class="{ 'mb-10 lg:mb-14': true }"
+      :class="{ 'mb-10 lg:mb-12': true }"
       :primary-subject="data.primarySubject"
       :additional-subjects="data.additionalSubjects"
       :grade-levels="data.gradeLevels"
@@ -96,7 +104,7 @@ const computedClass = computed((): string => {
     <!-- TODO: put this in a component (exclude layout though) -->
     <LayoutHelper
       v-if="data.heroImage && heroInline"
-      class="lg:mb-22 mb-10"
+      class="mb-10 lg:mb-18"
     >
       <BlockImageStandard
         :data="data.heroImage"
@@ -106,6 +114,19 @@ const computedClass = computed((): string => {
       />
     </LayoutHelper>
 
+    <LayoutHelper
+      v-if="!heroInline"
+      indent="col-2"
+      class="mb-6 lg:mb-12"
+      :class="{ '-mt-4': data.showMetaPanel }"
+    >
+      <ShareButtonsEdu
+        class="mt-4"
+        :title="data.title"
+        :url="data.url"
+      />
+    </LayoutHelper>
+
     <!-- streamfield blocks -->
     <BlockStreamfield :data="data.body" />
 

package/src/templates/edu/PageEduLesson/PageEduLesson.stories.js

@@ -169,17 +169,52 @@ export const BaseStory = {
 
       procedures: [
         {
-          blocks: BlockStreamfieldMinimalData.body
+          sectionHeading: 'Section Heading 1',
+          stepsNumbering: true,
+          steps: [
+            {
+              blocks: BlockStreamfieldMinimalData.body
+            },
+            {
+              blocks: BlockStreamfieldMinimalData.body
+            },
+            {
+              blocks: BlockStreamfieldMinimalData.body
+            }
+          ]
         },
         {
-          blocks: BlockStreamfieldMinimalData.body
+          // sectionHeading: 'Section Heading 2',
+          stepsNumbering: true,
+          steps: [
+            {
+              blocks: BlockStreamfieldMinimalData.body
+            },
+            {
+              blocks: BlockStreamfieldMinimalData.body
+            },
+            {
+              blocks: BlockStreamfieldMinimalData.body
+            }
+          ]
         },
         {
-          blocks: BlockStreamfieldMinimalData.body
+          sectionHeading: 'Section Heading 3',
+          stepsNumbering: false,
+          steps: [
+            {
+              blocks: BlockStreamfieldMinimalData.body
+            },
+            {
+              blocks: BlockStreamfieldMinimalData.body
+            },
+            {
+              blocks: BlockStreamfieldMinimalData.body
+            }
+          ]
         }
       ],
       proceduresHeading: 'Procedures heading',
-      proceduresStepsNumbering: true,
 
       discussion: BlockStreamfieldMinimalData.body,
       discussionHeading: 'Discussion heading',

package/src/templates/edu/PageEduLesson/PageEduLesson.vue

@@ -342,7 +342,6 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
         :heading="value.heading"
         :blocks="value.blocks"
         :procedures="value.procedures"
-        :procedure-steps="value.procedureSteps"
         :text="value.text"
         :image="value.image"
       />

package/src/templates/edu/PageEduLesson/PageEduLessonSection.vue

@@ -15,9 +15,12 @@ export interface PageEduLessonSectionProps {
   heading: BlockHeadingObject
   blocks?: StreamfieldBlockData[]
   procedures?: {
-    blocks: StreamfieldBlockData[]
+    sectionHeading: string
+    stepsNumbering: boolean
+    steps: {
+      blocks: StreamfieldBlockData[]
+    }[]
   }[]
-  procedureSteps?: boolean
   text?: string
   image?: ImageObject
 }
@@ -26,7 +29,6 @@ const props = withDefaults(defineProps<PageEduLessonSectionProps>(), {
   heading: undefined,
   blocks: undefined,
   procedures: undefined,
-  procedureSteps: false,
   text: undefined,
   image: undefined
 })
@@ -68,23 +70,51 @@ const anchorId = computed(() => {
     />
     <template v-else-if="procedures?.length">
       <template
-        v-for="(item, index) in procedures"
-        :key="index"
+        v-for="(section, _index) in procedures"
+        :key="_index"
       >
-        <LayoutHelper
-          v-if="procedureSteps"
-          indent="col-3"
-          class="lg:mb-8 mb-5"
-        >
-          <BaseHeading level="h3">
-            {{ 'Section ' + (Number(index) + 1) }}
-          </BaseHeading>
-        </LayoutHelper>
         <div class="PageEduProcedureSection">
-          <BlockStreamfield
-            v-if="item?.blocks"
-            :data="item.blocks"
-          />
+          <LayoutHelper
+            v-if="section.sectionHeading"
+            indent="col-3"
+            class="lg:mb-8 mb-5"
+          >
+            <BaseHeading level="h3">
+              {{ section.sectionHeading }}
+            </BaseHeading>
+          </LayoutHelper>
+          <div
+            v-if="section.steps?.length"
+            class="PageEduProcedureSectionSteps"
+          >
+            <template v-if="section.stepsNumbering">
+              <ol class="PageEduProcedureSectionSingleStep">
+                <template
+                  v-for="(step, _step_index) of section.steps"
+                  :key="_step_index"
+                >
+                  <li v-if="step.blocks?.length">
+                    <BlockStreamfield
+                      v-if="step?.blocks"
+                      :data="step.blocks"
+                    />
+                  </li>
+                </template>
+              </ol>
+            </template>
+            <template v-else>
+              <template
+                v-for="(step, _step_index) of section.steps"
+                :key="_step_index"
+              >
+                <BlockStreamfield
+                  v-if="step.blocks?.length"
+                  class="PageEduProcedureSectionSingleStep"
+                  :data="step.blocks"
+                />
+              </template>
+            </template>
+          </div>
         </div>
       </template>
     </template>
@@ -98,23 +128,55 @@ const anchorId = computed(() => {
   </section>
 </template>
 <style lang="scss">
+@use 'sass:math';
+@function pxToRem($pxValue) {
+  // Assumes font-size for body element is a constant 16px
+  @return math.div($pxValue, 16) * 1rem;
+}
 .PageEduProcedureSection {
-  counter-reset: listitem;
-  .BlockText ol {
-    list-style-type: none;
-    counter-reset: nestedlistitem;
+  .PageEduProcedureSectionSteps {
+    counter-reset: step;
+  }
+  .PageEduProcedureSectionSingleStep {
+    li:not(:last-of-type) .BlockStreamfield {
+      @apply -mb-5 lg:-mb-10;
+    }
+  }
+  ol.PageEduProcedureSectionSingleStep {
+    @apply list-none;
     > li {
-      counter-increment: listitem;
-      &::marker {
-        content: counter(listitem) '. ';
+      @apply relative w-full;
+      counter-increment: step;
+      &::before {
+        @apply relative block w-[45rem] mx-auto h-0 pl-3;
+        content: counter(step) '. ';
+        // mimicking .text-body-lg
+        font-size: pxToRem(18);
+        line-height: 1.6667;
       }
-    }
-    ol {
-      list-style-type: none;
-      > li {
-        counter-increment: nestedlistitem;
-        &::marker {
-          content: counter(nestedlistitem) '. ';
+
+      @screen sm {
+        &::before {
+          @apply w-[47rem];
+          font-size: pxToRem(19);
+        }
+      }
+      @screen md {
+        &::before {
+          @apply w-[50rem];
+          font-size: pxToRem(20);
+        }
+      }
+      @screen lg {
+        &::before {
+          @apply w-[47rem] pl-0;
+          font-size: pxToRem(21);
+        }
+      }
+      @screen xl {
+        &::before {
+          @apply w-[59rem];
+          font-size: pxToRem(22);
         }
       }
     }

package/src/utils/mixins.ts

@@ -149,12 +149,16 @@ export const mixinHighlightPrimary = (value: boolean) => {
     */
 export const mixinIsActivePath = (itemPath: string): Boolean => {
   const route = useRoute()
-  const currentPath = route ? route.path : null
-  const path = itemPath
-  const ancestorPath = path ? (path.endsWith('/') ? path : path + '/') : null
+  const currentPath = route ? route.path : false
+  const path = itemPath.startsWith('http') ? itemPath.replace(/^.*\/\/[^/]+/, '') : itemPath
+  const ancestorPath = path ? (path.endsWith('/') ? path : path + '/') : false
+
   if (currentPath && path && ancestorPath) {
     if (currentPath === path) {
       return true
+    } else if (currentPath.startsWith('/edu/events')) {
+      // special treatment since EDU combines News & Events in the main nav
+      return path.startsWith('/edu/news')
     } else {
       return currentPath.startsWith(ancestorPath)
     }