adjusting for BlockInlineImage within student project steps

nasa-jpl · Sep 10, 2024 · 4050ab7 · 4050ab7
1 parent e75f8c7
commit 4050ab7
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git a/packages/vue/src/components/BlockInlineImage/BlockInlineImage.vue b/packages/vue/src/components/BlockInlineImage/BlockInlineImage.vue
@@ -44,14 +44,17 @@
         class="flex col-span-5"
         :class="data.alignTo === 'right' ? 'col-start-3 lg:order-1' : 'col-start-6 lg:order-2'"
       >
-        <BlockText :text="data.text" />
+        <BlockText
+          :variant="variant"
+          :text="data.text"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
 import type { ImageObject } from '../../interfaces'
 import { mixinGetSrcSet } from './../../utils/mixins'
 import MixinFancybox from './../MixinFancybox/MixinFancybox.vue'
@@ -73,6 +76,10 @@ export default defineComponent({
     data: {
       type: Object,
       required: false
+    },
+    variant: {
+      type: String as PropType<'small' | 'medium' | 'large'>,
+      default: 'large'
     }
   },
   computed: {

diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
@@ -37,6 +37,7 @@
         :key="`inlineImageBlock${index}`"
         :class="seamlessText(index) ? 'lg:mb-8 mb-5' : marginBottom"
         :data="block"
+        :variant="size"
       />
 
       <LayoutHelper

diff --git a/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.stories.js b/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProject.stories.js
@@ -2,6 +2,7 @@ import { HeroMediaData } from './../../../components/HeroMedia/HeroMedia.stories
 import { BlockIframeEmbedData } from './../../../components/BlockIframeEmbed/BlockIframeEmbed.stories.js'
 import { BlockImageCarouselData } from './../../../components/BlockImageCarousel/BlockImageCarousel.stories'
 import { BlockImageData } from './../../../components/BlockImage/BlockImage.stories'
+import { BlockInlineImageData } from './../../../components/BlockInlineImage/BlockInlineImage.stories'
 import { BlockHeadingData } from './../../../components/BlockHeading/BlockHeading.stories'
 import { BlockImageComparisonData } from './../../../components/BlockImageComparison/BlockImageComparison.stories'
 import { BaseVideoData } from './../../../components/BaseVideo/BaseVideo.stories'
@@ -136,7 +137,7 @@ export const BaseStory = {
         {
           heading: 'Lorem ipsum dolor no media',
           media: [],
-          content: [BlockImageData, ...BlockStreamfieldMinimalData.body]
+          content: [BlockImageData, ...BlockStreamfieldMinimalData.body, BlockInlineImageData.block]
         },
         {
           heading: 'Sit amet',

diff --git a/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue b/packages/vue/src/templates/edu/PageEduStudentProject/PageEduStudentProjectSection.vue
@@ -166,13 +166,11 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
   }
 
   .PageEduStudentProjectStep__fullWidth {
-    @screen lg {
-      .BlockText {
+    .LayoutHelper > div > .BlockText {
+      @screen lg {
         @apply mr-[10rem];
       }
-    }
-    @screen xl {
-      .BlockText {
+      @screen xl {
         @apply mr-[14rem];
       }
     }