fix: MetaPanel adjustments (#550)

* rendering HTML in MetaPanel accordions * minor code cleanup * only allowing MetaPanel to overlap if hero isn't interactive * removing autodocs from lesson page stories
nasa-jpl · Aug 19, 2024 · 973652d · 973652d
1 parent f3798eb
commit 973652d
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 70 deletions.
diff --git a/packages/common/src/scss/_grid.scss b/packages/common/src/scss/_grid.scss
@@ -42,10 +42,6 @@
       grid-column-start: container-start;
     }
 
-    .col-start-indent-col-1 {
-      grid-column-start: indent-col-1;
-    }
-
     .col-start-indent-col-2 {
       grid-column-start: indent-col-2;
     }

diff --git a/packages/vue/src/components/BaseButton/BaseButton.vue b/packages/vue/src/components/BaseButton/BaseButton.vue
@@ -11,11 +11,6 @@ export const variants: Variants = {
   dark: '-dark',
   social: '-social'
 }
-export const colors: Variants = {
-  primary: '-color-primary',
-  secondary: '-color-secondary',
-  action: '-color-action'
-}
 
 export default defineComponent({
   name: 'BaseButton',
@@ -26,12 +21,6 @@ export default defineComponent({
       default: 'primary',
       validator: (prop: string): boolean => Object.keys(variants).includes(prop)
     },
-    color: {
-      type: String,
-      required: false,
-      default: 'primary',
-      validator: (prop: string): boolean => Object.keys(colors).includes(prop)
-    },
     compact: {
       type: Boolean,
       default: false,

diff --git a/packages/vue/src/components/MetaPanel/MetaPanel.stories.js b/packages/vue/src/components/MetaPanel/MetaPanel.stories.js
@@ -28,8 +28,8 @@ export const BaseStory = {
     negativeTop: true,
     negativeBottom: true,
     button: 'View Standards',
-    primarySubject: 'Math',
-    additionalSubjects: ['Science'],
+    primarySubject: { subject: 'Math' },
+    additionalSubjects: [{ subject: 'Science' }],
     time: '30mins - hr',
     gradeLevels: [
       { gradeLevel: 'All Ages' },
@@ -46,7 +46,7 @@ export const BaseStory = {
         standard: {
           code: 'CCRA.R.1',
           definition:
-            'Read closely to determine what the text says explicitly and to make logical inferences from it; cite specific textual evidence when writing or speaking to support conclusions drawn from the text.',
+            'Read closely to determine what the text says explicitly and to make logical inferences from it; cite specific textual evidence when writing or speaking to support conclusions drawn from the text. Test<sub>render</sub> and test<sup>render</sup>. ',
           domain: {
             domain: 'College and Career Readiness Anchor Standards for Reading'
           },

diff --git a/packages/vue/src/components/MetaPanelAccordion/MetaPanelAccordion.vue b/packages/vue/src/components/MetaPanelAccordion/MetaPanelAccordion.vue
@@ -33,7 +33,7 @@ const { standards } = reactive(props)
       </template>
       <template #panelContents>
         <div class="pl-3 pb-3 pr-8 text-sm text-gray-dark">
-          <p>{{ item.standard.definition }}</p>
+          <p v-html="item.standard.definition"></p>
         </div>
       </template>
     </BaseAccordionItem>

diff --git a/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.stories.js b/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.stories.js
@@ -17,6 +17,7 @@ import PageEduLesson from './PageEduLesson.vue'
 export default {
   title: 'Templates/EDU/PageEduLesson',
   component: PageEduLesson,
+  tags: ['!autodocs'],
   decorators: [
     () => ({
       template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
@@ -55,7 +56,6 @@ export const BaseStory = {
         }
       ],
       heroConstrain: true,
-      heroPosition: 'full_bleed',
 
       studentProject: {
         title: 'Student Project',
@@ -207,14 +207,6 @@ export const BaseStory = {
     }
   }
 }
-export const InlineHero = {
-  args: {
-    data: {
-      ...BaseStory.args.data,
-      heroPosition: 'inline'
-    }
-  }
-}
 
 export const HeroCarousel = {
   args: {
@@ -229,7 +221,6 @@ export const HeroImageComparison = {
   args: {
     data: {
       ...BaseStory.args.data,
-      heroPosition: 'inline',
       hero: [
         {
           ...BlockImageComparisonData
@@ -259,7 +250,6 @@ export const HeroVideoEmbed = {
   args: {
     data: {
       ...BaseStory.args.data,
-      heroPosition: 'inline',
       hero: [
         {
           ...BlockVideoEmbedData.data,
@@ -277,7 +267,6 @@ export const HeroIframeEmbed = {
   args: {
     data: {
       ...BaseStory.args.data,
-      heroPosition: 'inline',
       hero: [
         {
           ...BlockIframeEmbedData

diff --git a/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.vue b/packages/vue/src/templates/edu/PageEduLesson/PageEduLesson.vue
@@ -93,11 +93,13 @@ const stringAsHeadingBlockData = (
 }
 
 const heroEmpty = computed((): boolean => {
-  return !data?.hero?.length
+  return data?.hero?.length === 0
 })
 
 const heroInline = computed((): boolean => {
+  // heroes with interactive elements have special handling
   if (!heroEmpty.value && data?.hero) {
+    // excludes VideoBlock as this will autoplay
     if (data?.hero[0].blockType === 'VideoBlock') {
       return false
     } else if (
@@ -296,12 +298,13 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
     <MetaPanel
       button="View Standards"
       theme="primary"
+      :class="{ 'mb-10 lg:mb-14': heroInline || data?.hero?.length === 0 }"
       :primary-subject="data.primarySubject"
       :additional-subjects="data.additionalSubjects"
       :time="data.time"
       :grade-levels="data.gradeLevels"
       :standards="data.standards"
-      negative-bottom
+      :negative-bottom="heroInline || data?.hero?.length !== 0"
     />
 
     <!-- hero media -->
@@ -366,45 +369,44 @@ const consolidatedSections = computed((): EduLessonSectionObject[] => {
       :blocks="consolidatedBlocks"
       :enabled="true"
     />
-    <div id="NavJumpMenuFrame">
-      <template
-        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>
 
-      <!-- streamfield blocks -->
-      <BlockStreamfield :data="data.body" />
+    <template
+      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>
 
-      <!-- related links -->
-      <LayoutHelper
-        v-if="data.relatedLinks && data.relatedLinks.length"
-        indent="col-3"
-        class="lg:my-18 my-10"
-      >
-        <BlockRelatedLinks :data="data.relatedLinks[0]" />
-      </LayoutHelper>
+    <!-- streamfield blocks -->
+    <BlockStreamfield :data="data.body" />
 
-      <!-- related content -->
-      <BlockLinkCarousel
-        item-type="cards"
-        class="lg:my-24 my-12 print:px-4"
-        :heading="data.relatedContentHeading"
-        :items="data.relatedContent"
-      />
-    </div>
+    <!-- related links -->
+    <LayoutHelper
+      v-if="data.relatedLinks && data.relatedLinks.length"
+      indent="col-3"
+      class="lg:my-18 my-10"
+    >
+      <BlockRelatedLinks :data="data.relatedLinks[0]" />
+    </LayoutHelper>
+
+    <!-- related content -->
+    <BlockLinkCarousel
+      item-type="cards"
+      class="lg:my-24 my-12 print:px-4"
+      :heading="data.relatedContentHeading"
+      :items="data.relatedContent"
+    />
   </div>
 </template>