@explorer-1/vue 0.2.54 → 0.2.56

package/src/templates/edu/PageEduStudentProject/PageEduStudentProject.vue

@@ -69,17 +69,6 @@ defineExpose({
   PageEduStudentProjectJumpMenu
 })
 
-const stringAsHeadingBlockData = (
-  heading: HeadingLevel,
-  overrideText?: string
-): BlockHeadingObject => {
-  return {
-    blockType: 'HeadingBlock',
-    heading: (overrideText || heading) as HeadingLevel,
-    level: 'h2'
-  }
-}
-
 const heroEmpty = computed((): boolean => {
   return data?.hero?.length === 0
 })
@@ -122,14 +111,32 @@ const heroInline = computed((): boolean => {
 
 const sectionOrder = ['top', 'overview', 'materials', 'steps', 'bottom']
 
-// mimic HeadingBlock data shape for defined section headings
+const stringAsHeadingBlockData = (
+  heading: string,
+  level: HeadingLevel = 'h2'
+): BlockHeadingObject => {
+  return {
+    blockType: 'HeadingBlock',
+    heading: heading,
+    level: level
+  }
+}
+
+// mimic HeadingBlock data shape for predefined section headings
 const staticSectionHeadings = computed((): { [key: string]: BlockHeadingObject } | undefined => {
   if (data) {
     const result = sectionOrder.reduce<Record<string, BlockHeadingObject>>((acc, section) => {
       // only include the heading if the section has content
       if (data[section]?.length) {
+        // generate heading text
         const headingText =
-          section === 'steps' ? 'Project Steps' : section.charAt(0).toUpperCase() + section.slice(1)
+          section === 'steps'
+            ? 'Project Steps'
+            : section === 'overview'
+              ? // we don't want an overview heading unless it's custom
+                undefined
+              : section.charAt(0).toUpperCase() + section.slice(1)
+        // set the headings for each section
         acc[section] = stringAsHeadingBlockData(
           (data[`${section}Heading`] as HeadingLevel) || headingText
         )
@@ -173,45 +180,16 @@ const keyedCustomSections = computed(
   }
 )
 
-const consolidatedBlocks = computed(() => {
-  // NavJumpMenu handles filtering for HeadingBlock, so we don't need to do that here
-  const blocks = []
-  // include custom top blocks
-  if (keyedCustomSections.value && keyedCustomSections.value['top']) {
-    blocks.push(...keyedCustomSections.value['top'])
+// used to get headings for the JumpMenu
+const stepHeadings = computed(() => {
+  const steps = data?.steps
+  const headings: BlockHeadingObject[] = []
+  if (steps?.length) {
+    steps.forEach((step) => {
+      if (step.heading) headings.push(stringAsHeadingBlockData(step.heading, 'h3'))
+    })
   }
-  // include predefined section blocks
-  sectionOrder.forEach((section) => {
-    if (data && data[section]) {
-      if (staticSectionHeadings.value && staticSectionHeadings.value[section]) {
-        blocks.push(staticSectionHeadings.value[section])
-      }
-      if (section !== 'materials' && section !== 'steps') {
-        blocks.push(...data[section])
-      } else if (section === 'steps' && data.steps?.length) {
-        // get blocks in nested steps
-        data.steps.forEach((item) => {
-          if (item.content?.length) {
-            blocks.push(...item.content)
-          }
-        })
-      }
-    }
-    // include custom "after_" blocks
-    if (keyedCustomSections.value && keyedCustomSections.value[`after_${section}`]) {
-      blocks.push(...keyedCustomSections.value[`after_${section}`])
-    }
-  })
-  // include custom bottom blocks
-  if (keyedCustomSections.value && keyedCustomSections.value['bottom']) {
-    blocks.push(...keyedCustomSections.value['bottom'])
-  }
-  // include body blocks
-  if (data?.body?.length) {
-    blocks.push(...data.body)
-  }
-
-  return blocks
+  return headings
 })
 
 // organize data to render with PageEduStudentProjectSection component
@@ -227,7 +205,8 @@ const consolidatedSections = computed((): EduStudentProjectSectionObject[] => {
         heading: staticSectionHeadings.value ? staticSectionHeadings.value[section] : undefined,
         blocks: section !== 'materials' && section !== 'steps' ? data[section] : undefined,
         text: section === 'materials' ? data[section] : undefined,
-        steps: section === 'steps' ? data[section] : undefined
+        steps: section === 'steps' ? data[section] : undefined,
+        image: data[`${section}Image`]
       })
     }
     // include custom "after_" sections
@@ -251,12 +230,11 @@ const studentBadge = computed(() => {
 })
 
 const computedClass = computed((): string => {
-  if (heroInline.value || heroEmpty.value) {
-    return 'pt-5 lg:pt-12'
-  } else if (!heroInline.value) {
+  if (heroTitle.value) {
     return '-nav-offset'
+  } else {
+    return 'pt-5 lg:pt-12'
   }
-  return ''
 })
 </script>
 <template>
@@ -319,59 +297,35 @@ const computedClass = computed((): string => {
         </BaseLink>
       </div>
     </LayoutHelper>
-
     <div
       v-if="!heroTitle"
-      class="container relative mx-auto z-20 pointer-events-none"
+      class="lg:hidden container relative mx-auto z-30 pointer-events-none"
     >
       <img
         :src="studentBadge"
         alt=""
         width="150"
         height="150"
-        class="absolute -mt-16 sm:-mt-24 right-0 lg:hidden md:w-[185px] md:h-[185px]"
+        class="absolute -mt-10 sm:-mt-24 right-0 lg:hidden md:w-[185px] md:h-[185px]"
       />
     </div>
-    <!-- hero media -->
-    <HeroMedia
-      v-if="
-        !heroEmpty &&
-        !heroTitle &&
-        !heroInline &&
-        theHero &&
-        (theHero.blockType === 'HeroImageBlock' || theHero.blockType === 'VideoBlock')
-      "
-      :image="theHero.image"
-      :video="theHero.video"
-      :display-caption="theHero.displayCaption"
-      :caption="theHero.caption"
-      :credit="theHero.credit"
-      :constrain="data.heroConstrain"
-    />
-    <LayoutHelper
-      v-else-if="!heroEmpty && heroInline && data.hero?.length"
-      class="lg:mb-14 mb-10"
-    >
-      <HeroInlineMedia
-        :hero-blocks="data.hero"
-        :constrain="data.heroConstrain"
-      />
-    </LayoutHelper>
-
     <MetaPanel
       button="Info for Teachers"
-      theme="stars"
-      :class="{ 'mb-10 lg:mb-14': true }"
+      theme="secondary"
+      :class="{ 'mb-10 lg:mb-14': heroTitle || heroInline || heroEmpty }"
       :primary-subject="data.primarySubject"
       :additional-subjects="data.additionalSubjects"
       :time="data.customTime ? { time: data.customTime } : data.time"
       :standards="data.standards"
-      :negative-top="!heroInline && !heroEmpty && !heroTitle"
+      :negative-bottom="!heroInline && !heroTitle && !heroEmpty"
     >
       <template #metaInfo>
-        <div :class="data?.standards ? 'border-b border-gray-light-mid' : ''">
+        <div :class="data?.standards?.length ? 'border-b border-gray-light-mid' : ''">
           <div class="py-6 lg:py-8">
-            <MetaPanelItems :grade-levels="data?.gradeLevels" />
+            <MetaPanelItems
+              theme="secondary"
+              :grade-levels="data?.gradeLevels"
+            />
             <div
               v-if="data.lesson"
               class="mt-8 font-bold text-body-s"
@@ -390,11 +344,42 @@ const computedClass = computed((): string => {
       </template>
     </MetaPanel>
 
+    <!-- hero media -->
+    <HeroMedia
+      v-if="
+        !heroEmpty &&
+        !heroTitle &&
+        !heroInline &&
+        theHero &&
+        (theHero.blockType === 'HeroImageBlock' || theHero.blockType === 'VideoBlock')
+      "
+      class="md:mb-12 lg:mb-18 mb-10"
+      :image="theHero.image"
+      :video="theHero.video"
+      :display-caption="theHero.displayCaption"
+      :caption="theHero.caption"
+      :credit="theHero.credit"
+      :constrain="data.heroConstrain"
+    />
+    <LayoutHelper
+      v-else-if="!heroEmpty && heroInline && data.hero?.length"
+      class="lg:mb-22 mb-10"
+    >
+      <HeroInlineMedia
+        :hero-blocks="data.hero"
+        :constrain="data.heroConstrain"
+      />
+    </LayoutHelper>
+
     <NavJumpMenu
+      v-if="stepHeadings?.length"
       ref="PageEduStudentProjectJumpMenu"
       :title="data.title"
-      :blocks="consolidatedBlocks"
-      dropdown-text="In this project"
+      :blocks="stepHeadings"
+      dropdown-text="Project Steps"
+      heading-level="h3"
+      :steps-numbering="true"
+      steps-classes="text-secondary"
     />
 
     <template

package/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue

@@ -38,7 +38,7 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
     :aria-label="heading?.heading"
   >
     <LayoutHelper
-      v-if="heading"
+      v-if="heading?.heading"
       indent="col-3"
       class="lg:mb-8 mb-5"
     >
@@ -71,22 +71,19 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
       <li
         v-for="(step, index) in steps"
         :key="index"
-        class="PageEduStudentProjectStep lg:mb-10 mb-8 px-4 lg:px-0"
+        class="PageEduStudentProjectStep lg:mb-12 mb-10 px-4 lg:px-0"
       >
         <LayoutHelper
-          class="ThemeVariantGray bg-gray-light py-6 lg:py-14 px-4 lg:px-0"
-          indent="col-2"
+          class="px-0 lg:px-4"
+          indent="col-1"
         >
-          <template v-if="step.media?.length">
-            <!-- split 50/50 -->
-            <div class="lg:grid grid-cols-2 gap-6 lg:gap-10">
-              <div
-                :class="index % 2 === 0 ? 'order-1' : 'order-2'"
-                class="mb-6 lg:mb-0"
-              >
+          <div class="ThemeVariantGray bg-gray-light px-8 py-6 md:px-10 md:py-8 lg:px-18 lg:py-16">
+            <template v-if="step.media?.length">
+              <!-- split 50/50 -->
+              <div class="lg:grid grid-cols-2 gap-6 lg:gap-10">
                 <BaseHeading
                   level="h3"
-                  class="mb-5"
+                  class="lg:hidden mb-5"
                 >
                   <span
                     v-if="stepsNumbering"
@@ -96,41 +93,59 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
                   >
                   {{ step.heading }}
                 </BaseHeading>
-                <BlockStreamfield
-                  v-if="step.content"
-                  :data="step.content"
-                  size="medium"
-                  variant="fluid"
+                <HeroInlineMedia
+                  :hero-blocks="step.media"
+                  class="order-1 mb-6 lg:mb-0"
+                  :class="index % 2 === 1 ? 'lg:order-1' : 'lg:order-2'"
+                  constrain
                 />
+                <div
+                  :class="index % 2 === 0 ? 'lg:order-1' : 'lg:order-2'"
+                  class="order-2"
+                >
+                  <BaseHeading
+                    level="h3"
+                    class="hidden lg:block mb-5"
+                  >
+                    <span
+                      v-if="stepsNumbering"
+                      class="steps-numbering"
+                      aria-hidden
+                      >{{ `Step ${index + 1}:` }}</span
+                    >
+                    {{ step.heading }}
+                  </BaseHeading>
+                  <BlockStreamfield
+                    v-if="step.content"
+                    :data="step.content"
+                    size="medium"
+                    variant="fluid"
+                  />
+                </div>
               </div>
-              <HeroInlineMedia
-                :hero-blocks="step.media"
-                :class="index % 2 === 1 ? 'order-1' : 'order-2'"
-                constrain
-              />
-            </div>
-          </template>
-          <template v-else>
-            <BaseHeading
-              level="h3"
-              class="mb-5"
-            >
-              <span
-                v-if="stepsNumbering"
-                aria-hidden
-                class="steps-numbering"
-                >{{ `Step ${index + 1}:` }}</span
+            </template>
+            <template v-else>
+              <BaseHeading
+                level="h3"
+                class="mb-5"
               >
-              {{ step.heading }}
-            </BaseHeading>
-            <BlockStreamfield
-              v-if="step.content"
-              class="PageEduStudentProjectStep__fullWidth"
-              :data="step.content"
-              size="medium"
-              variant="fluid"
-            />
-          </template>
+                <span
+                  v-if="stepsNumbering"
+                  aria-hidden
+                  class="steps-numbering"
+                  >{{ `Step ${index + 1}:` }}</span
+                >
+                {{ step.heading }}
+              </BaseHeading>
+              <BlockStreamfield
+                v-if="step.content"
+                class="PageEduStudentProjectStep__fullWidth"
+                :data="step.content"
+                size="medium"
+                variant="fluid"
+              />
+            </template>
+          </div>
         </LayoutHelper>
       </li>
     </component>

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

@@ -1,36 +0,0 @@
-import { PropType } from 'vue';
-
-interface NextCloseApproach {
-    date: string;
-    distanceMiles: string;
-    distanceKilometers: string;
-    comparisonImage: {
-        image: {
-            src: {
-                url: string;
-            };
-            webp: {
-                url: string;
-            };
-        };
-        text: string;
-    };
-    sizeFeet: string;
-    name: string;
-    externalLink: string;
-}
-/**
- * Displays asteroid widget data. API is parsed by the backend. Frontend retrieves via a graphQL query.
- */
-declare const _default: import('vue').DefineComponent<{
-    nextCloseApproaches: {
-        type: PropType<NextCloseApproach[]>;
-        required: false;
-    };
-}, unknown, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    nextCloseApproaches: {
-        type: PropType<NextCloseApproach[]>;
-        required: false;
-    };
-}>>, {}, {}>;
-export default _default;

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

@@ -1,37 +0,0 @@
-import { PropType } from 'vue';
-import { ImageObject } from '../../interfaces';
-
-declare const _default: import('vue').DefineComponent<{
-    data: {
-        type: PropType<Partial<ImageObject>>;
-        required: true;
-        default: undefined;
-    };
-    customLink: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    customLinkText: {
-        type: StringConstructor;
-        default: string;
-    };
-}, unknown, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    data: {
-        type: PropType<Partial<ImageObject>>;
-        required: true;
-        default: undefined;
-    };
-    customLink: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    customLinkText: {
-        type: StringConstructor;
-        default: string;
-    };
-}>>, {
-    data: Partial<ImageObject>;
-    customLink: string;
-    customLinkText: string;
-}, {}>;
-export default _default;

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

@@ -1,33 +0,0 @@
-import { PropType } from 'vue';
-import { ImageObject, LinkObject } from '../../interfaces';
-
-interface CardGridItem {
-    title: string;
-    label: string;
-    description: string;
-    image: Partial<ImageObject>;
-    link?: LinkObject;
-}
-declare const _default: import('vue').DefineComponent<{
-    compact: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    cards: {
-        type: PropType<CardGridItem[]>;
-        default: undefined;
-    };
-}, unknown, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    compact: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    cards: {
-        type: PropType<CardGridItem[]>;
-        default: undefined;
-    };
-}>>, {
-    compact: boolean;
-    cards: CardGridItem[];
-}, {}>;
-export default _default;

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

@@ -1,19 +0,0 @@
-import { PropType } from 'vue';
-import { LinkObject } from './../../interfaces';
-
-declare const _default: import('vue').DefineComponent<{
-    link: {
-        type: PropType<LinkObject>;
-        required: false;
-        default: undefined;
-    };
-}, unknown, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    link: {
-        type: PropType<LinkObject>;
-        required: false;
-        default: undefined;
-    };
-}>>, {
-    link: LinkObject;
-}, {}>;
-export default _default;

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

@@ -1,24 +0,0 @@
-declare const _default: import('vue').DefineComponent<{
-    data: {
-        type: ObjectConstructor;
-        required: false;
-    };
-}, unknown, {
-    lazyNative: boolean;
-}, {
-    themeStore: () => import('pinia').Store<"theme", import('../../store/theme').State, {
-        isEdu(state: {
-            theme: import('../../interfaces').Explorer1Theme | null;
-        } & import('pinia').PiniaCustomStateProperties<import('../../store/theme').State>): boolean;
-    }, {
-        setTheme(value: import('../../interfaces').Explorer1Theme): void;
-    }>;
-}, {
-    featureDetectIframeLazyLoad(): void;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    data: {
-        type: ObjectConstructor;
-        required: false;
-    };
-}>>, {}, {}>;
-export default _default;