@explorer-1/vue 0.2.30 → 0.2.32

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.30",
+  "version": "0.2.32",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "vue-bind-once": "^0.2.1",
     "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5",
-    "@explorer-1/common": "1.1.9"
+    "@explorer-1/common": "1.1.10"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BlockHeading/BlockHeading.vue

@@ -55,7 +55,7 @@ export default defineComponent({
   &:target {
     @apply scroll-mt-14;
     @screen lg {
-      @apply scroll-mt-20;
+      @apply scroll-mt-[8rem];
     }
   }
 }

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

@@ -164,22 +164,72 @@ export const BaseStory = {
       management: BlockStreamfieldMinimalData.body,
       managementHeading: 'Management stuff',
 
-      background: BlockStreamfieldMinimalData.body,
+      background: [
+        ...BlockStreamfieldMinimalData.body,
+        {
+          blockType: 'RichTextBlock',
+          value:
+            '<ol><li data-block-key="wv2pw">A list<ol><li data-block-key="mc91">A nested list should be a.<ol><li data-block-key="3p0pb">Another nested should be i.<ol><li data-block-key="22afo">Another is a number again.</li></ol></li></ol></li></ol></li></ol>'
+        }
+      ],
       backgroundHeading: 'Background heading',
 
       procedures: [
         {
-          blocks: BlockStreamfieldMinimalData.body
+          sectionHeading: 'Section Heading 1',
+          stepsNumbering: true,
+          steps: [
+            {
+              blocks: [
+                ...BlockStreamfieldMinimalData.body,
+
+                {
+                  blockType: 'RichTextBlock',
+                  value:
+                    '<ol><li data-block-key="wv2pw">A list<ol><li data-block-key="mc91">A nested list should be a.<ol><li data-block-key="3p0pb">Another nested should be i.<ol><li data-block-key="22afo">Another is a number again.</li></ol></li></ol></li></ol></li></ol>'
+                }
+              ]
+            },
+            {
+              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

@@ -231,8 +231,7 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
           : undefined,
         blocks: section !== 'materials' && section !== 'procedures' ? data[section] : undefined,
         text: section === 'materials' ? data[section] : undefined,
-        procedures: section === 'procedures' ? data[section] : undefined,
-        procedureSteps: section === 'procedures' ? data.proceduresStepsNumbering : false
+        procedures: section === 'procedures' ? data[section] : undefined
       })
     }
     // include custom "after_" sections
@@ -333,19 +332,20 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
       v-for="(value, _key) in consolidatedSections"
       :key="_key"
     >
-      <BlockStreamfield
-        v-if="value.type === 'streamfield'"
-        :data="value.blocks"
-      />
-      <PageEduLessonSection
-        v-else
-        :heading="value.heading"
-        :blocks="value.blocks"
-        :procedures="value.procedures"
-        :procedure-steps="value.procedureSteps"
-        :text="value.text"
-        :image="value.image"
-      />
+      <template v-if="value.blocks?.length || value.procedures?.length">
+        <BlockStreamfield
+          v-if="value.type === 'streamfield'"
+          :data="value.blocks"
+        />
+        <PageEduLessonSection
+          v-else
+          :heading="value.heading"
+          :blocks="value.blocks"
+          :procedures="value.procedures"
+          :text="value.text"
+          :image="value.image"
+        />
+      </template>
     </template>
 
     <!-- streamfield blocks -->

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

@@ -148,19 +148,21 @@ export const mixinHighlightPrimary = (value: boolean) => {
       Useful for dropdown toggles.
     */
 export const mixinIsActivePath = (itemPath: string): Boolean => {
-  const route = useRoute()
-  const currentPath = route ? route.path : false
-  const path = itemPath.startsWith('http') ? itemPath.replace(/^.*\/\/[^/]+/, '') : itemPath
-  const ancestorPath = path ? (path.endsWith('/') ? path : path + '/') : false
+  if (itemPath) {
+    const route = useRoute()
+    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)
+    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)
+      }
     }
   }
   return false