Merge branch 'main' into fix/contact-form-google

nasa-jpl · Aug 29, 2024 · 949c4ae · 949c4ae
2 parents 5316474 + b440644
commit 949c4ae
Show file tree

Hide file tree

Showing 13 changed files with 198 additions and 72 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.2.30",
+  "version": "3.2.33",
   "type": "module",
   "description": "Monorepo for JPL's design system, Explorer 1",
   "keywords": [

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/common",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "private": false,
   "publishConfig": {
     "access": "public"

diff --git a/packages/common/src/scss/components/_BlockText.scss b/packages/common/src/scss/components/_BlockText.scss
@@ -76,6 +76,15 @@
 
   ol {
     @apply pl-12 list-decimal;
+    ol {
+      list-style-type: lower-alpha;
+      ol {
+        list-style-type: lower-roman;
+        ol {
+          list-style-type: decimal;
+        }
+      }
+    }
   }
 
   ul {

diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.30",
+  "version": "0.2.33",
   "private": false,
   "publishConfig": {
     "access": "public"

diff --git a/packages/vue/src/components/BlockDialog/BlockDialog.vue b/packages/vue/src/components/BlockDialog/BlockDialog.vue
@@ -86,7 +86,6 @@ export default defineComponent({
       this.dialog = this.$refs.DialogRef
         ? new A11yDialog(this.$refs.DialogRef as HTMLElement)
         : null
-      console.log(this.dialog)
       if (this.dialog) {
         this.dialog
           .on('show', () => {

diff --git a/packages/vue/src/components/BlockHeading/BlockHeading.vue b/packages/vue/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];
     }
   }
 }

diff --git a/packages/vue/src/components/BlockIframeEmbed/BlockIframeEmbed.vue b/packages/vue/src/components/BlockIframeEmbed/BlockIframeEmbed.vue
@@ -20,7 +20,8 @@
         v-if="data.url"
         class="print:border print:border-gray-dark"
         aspect-ratio="16:9"
-        dark-mode
+        no-logo
+        :dark-mode="!themeStore.isEdu"
       >
         <div>
           <iframe
@@ -48,6 +49,8 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 import BaseImageCaption from './../BaseImageCaption/BaseImageCaption.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 
@@ -81,6 +84,9 @@ export default defineComponent({
         this.lazyNative = false
       }
     }
+  },
+  computed: {
+    ...mapStores(useThemeStore)
   }
 })
 </script>
diff --git a/packages/vue/src/components/NavDesktop/NavDesktop.vue b/packages/vue/src/components/NavDesktop/NavDesktop.vue
@@ -256,7 +256,6 @@ export default defineComponent({
         if (isActive) {
           mixinUpdateGlobalChildren(sectionLinks)
         }
-        console.log(isActive)
         return isActive
       }
       return false

diff --git a/packages/vue/src/components/NavSearchForm/NavSearchForm.vue b/packages/vue/src/components/NavSearchForm/NavSearchForm.vue
@@ -20,7 +20,6 @@ const clearSearch = () => {
 }
 const submitSearch = () => {
   emit('submitForm')
-  console.log(searchQuery.value)
   router.push({ path: '/search', query: searchQuery.value })
 }
 </script>

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

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

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