@explorer-1/vue 0.2.30 → 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.30",
+  "version": "0.2.31",
   "private": false,
   "publishConfig": {
     "access": "public"

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);
         }
       }
     }