revising data model for EDU Lesson procedures (#579)

* revising data model for EDU Lesson procedures * Update packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.stories.js Co-authored-by: Scott Cranfill <scott.cranfill@jpl.nasa.gov> * cleanup after code review * fixing build errors --------- Co-authored-by: Scott Cranfill <scott.cranfill@jpl.nasa.gov>
nasa-jpl · Aug 28, 2024 · 4d6273e · 4d6273e
1 parent 1f6f3c5
commit 4d6273e
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 37 deletions.
diff --git a/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.stories.js b/packages/vue/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',

diff --git a/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.vue b/packages/vue/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"
       />

diff --git a/packages/vue/src/templates/edu/PageEduLesson/PageEduLessonSection.vue b/packages/vue/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);
         }
       }
     }