@explorer-1/vue 0.2.65 → 0.2.66

package/lib/main.ts

@@ -73,7 +73,6 @@ import BlockQuote from './../src/components/BlockQuote/BlockQuote.vue'
 import BlockRelatedLinks from './../src/components/BlockRelatedLinks/BlockRelatedLinks.vue'
 import RelatedLink from './../src/components/BlockRelatedLinks/RelatedLink.vue'
 import BlockStreamfield from './../src/components/BlockStreamfield/BlockStreamfield.vue'
-import BlockTable from './../src/components/BlockTable/BlockTable.vue'
 import BlockTeaser from './../src/components/BlockTeaser/BlockTeaser.vue'
 import BlockText from './../src/components/BlockText/BlockText.vue'
 import BlockVideo from './../src/components/BlockVideo/BlockVideo.vue'
@@ -276,7 +275,6 @@ export {
   BlockRelatedLinks,
   RelatedLink,
   BlockStreamfield,
-  BlockTable,
   BlockTeaser,
   BlockText,
   BlockVideo,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.65",
+  "version": "0.2.66",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
-    "@explorer-1/common": "1.1.16"
+    "@explorer-1/common": "1.1.17"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BlockHeading/BlockHeading.vue

@@ -57,7 +57,7 @@ export default defineComponent({
   &:target {
     @apply scroll-mt-14;
     @screen lg {
-      @apply scroll-mt-[8rem];
+      @apply scroll-mt-[7rem];
     }
   }
 }

package/src/components/BlockKeyPoints/BlockKeyPoints.vue

@@ -11,7 +11,7 @@
       <li
         v-for="(item, index) in data.listItem"
         :key="index"
-        class="flex print:!list-item print:ml-4"
+        class="print:!list-item print:ml-4"
         :class="index + 1 === data.listItem.length ? 'mb-0' : 'mb-4'"
       >
         <BlockText

package/src/components/BlockRichTable/BlockRichTable.stories.js

@@ -4,6 +4,7 @@ import { BlockImageData } from './../BlockImage/BlockImage.stories'
 export default {
   title: 'Components/Blocks/BlockRichTable',
   component: BlockRichTable,
+  tags: ['!autodocs'],
   excludeStories: /.*Data$/
 }
 
@@ -14,10 +15,16 @@ export const BlockRichTableData = {
     tableHead: [
       [
         {
-          text: '1. Learn why we study geology on Earth and other planets'
+          text: '1. Learn'
         },
         {
-          text: '1. Learn why we study geology on Earth and other planets'
+          text: '2. Learn why we study geology on Earth and other planets'
+        },
+        {
+          text: '3. Read about it'
+        },
+        {
+          text: '4. Another column'
         }
       ]
     ],
@@ -29,7 +36,13 @@ export const BlockRichTableData = {
           displayCaption: true,
           blockType: 'ImageBlock'
         },
-        { ...BlockImageData, blockType: 'ImageBlock' }
+        { ...BlockImageData, blockType: 'ImageBlock' },
+        { ...BlockImageData, blockType: 'ImageBlock' },
+        {
+          blockType: 'CharBlock',
+          value:
+            "Geologists are scientists who study a planet's solid features, like soil, rocks, and minerals. There are all kinds of rocks and minerals that make up our planet – as well as the Moon, Mars, and other rocky worlds. By studying these features, we can learn more about how rocky worlds form and change over time."
+        }
       ],
       [
         {
@@ -41,7 +54,13 @@ export const BlockRichTableData = {
           blockType: 'CharBlock',
           value:
             "Geologists are scientists who study a planet's solid features, like soil, rocks, and minerals. There are all kinds of rocks and minerals that make up our planet – as well as the Moon, Mars, and other rocky worlds. By studying these features, we can learn more about how rocky worlds form and change over time."
-        }
+        },
+        {
+          blockType: 'CharBlock',
+          value:
+            "Geologists are scientists who study a planet's solid features, like soil, rocks, and minerals. There are all kinds of rocks and minerals that make up our planet – as well as the Moon, Mars, and other rocky worlds. By studying these features, we can learn more about how rocky worlds form and change over time."
+        },
+        { ...BlockImageData, blockType: 'ImageBlock' }
       ]
     ]
   }

package/src/components/BlockRichTable/BlockRichTable.vue

@@ -23,7 +23,7 @@ export default defineComponent({
     v-if="table"
     class="BlockRichTable BlockText -small text-body-sm"
   >
-    <div class="overflow-x-auto scrolling-touch max-w-screen-3xl mx-auto">
+    <div class="overflow-x-auto scrolling-touch max-w-screen-3xl mx-auto !mb-0">
       <table
         class="min-w-full border-gray-light-mid w-full border-t border-b border-collapse table-auto"
       >
@@ -33,7 +33,7 @@ export default defineComponent({
               v-for="(headCell, headIndex) in table.tableContent.tableHead[0]"
               :key="headIndex"
               scope="col"
-              class="min-w-72 sm:min-w-80 bg-jpl-blue-darker text-subtitle text-white border-gray-light-mid lg:p-5 p-3 border-b"
+              class="min-w-[12rem] bg-jpl-blue-darker edu:bg-jpl-teal-dark text-subtitle text-white border-gray-light-mid lg:p-5 p-3 border-b"
             >
               {{ headCell.text }}
             </th>
@@ -47,7 +47,7 @@ export default defineComponent({
             <td
               v-for="(cell, cellIndex) in row"
               :key="cellIndex"
-              class="min-w-72 sm:min-w-80 bg-white text-gray-dark border-gray-light-mid"
+              class="min-w-[12rem] bg-white text-gray-dark border-gray-light-mid"
             >
               <template v-if="cell.blockType === 'CharBlock'">
                 <p class="">
@@ -73,14 +73,14 @@ export default defineComponent({
           </tr>
         </tbody>
       </table>
-      <template v-if="table.tableCaption">
-        <caption class="block text-left px-0 text-gray-mid-dark text-body-sm mt-4">
-          {{
-            table.tableCaption
-          }}
-        </caption>
-      </template>
     </div>
+    <template v-if="table.tableCaption">
+      <caption class="block text-left px-0 text-gray-mid-dark text-body-sm mt-4">
+        {{
+          table.tableCaption
+        }}
+      </caption>
+    </template>
   </div>
 </template>
 

package/src/components/BlockStreamfield/BlockStreamfield.stories.js

@@ -11,7 +11,7 @@ import { BlockKeyPointsData } from './../BlockKeyPoints/BlockKeyPoints.stories'
 import { BlockListCardsData } from './../BlockListCards/BlockListCards.stories'
 import { BlockQuoteData } from './../BlockQuote/BlockQuote.stories'
 import { BlockRelatedLinksData } from './../BlockRelatedLinks/BlockRelatedLinks.stories'
-import { BlockTableData } from './../BlockTable/BlockTable.stories'
+import { BlockRichTableData } from './../BlockRichTable/BlockRichTable.stories'
 import { BlockTeaserData } from './../BlockTeaser/BlockTeaser.stories'
 import { BlockIframeEmbedData } from './../BlockIframeEmbed/BlockIframeEmbed.stories'
 import { BlockVideoData } from './../BlockVideo/BlockVideo.stories'
@@ -26,6 +26,10 @@ export default {
     variant: {
       control: { type: 'select' },
       options: Object.keys(variants)
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large']
     }
   },
   parameters: {
@@ -122,7 +126,7 @@ export const BlockStreamfieldData = {
       ...BlockInlineImageData.block,
       alignTo: 'left'
     },
-    BlockTableData,
+    BlockRichTableData,
     {
       blockType: 'ListBlock',
       field: 'card_grid',
@@ -132,12 +136,13 @@ export const BlockStreamfieldData = {
 }
 
 export const BaseStory = {
-  args: { data: BlockStreamfieldData.body, variant: 'default' }
+  args: { data: BlockStreamfieldData.body, variant: 'default', size: 'large' }
 }
 
 export const MatchingWidths = {
   args: {
     data: BlockStreamfieldData.body,
-    variant: 'fluid'
+    variant: 'fluid',
+    size: 'large'
   }
 }

package/src/components/BlockStreamfield/BlockStreamfield.vue

@@ -173,19 +173,10 @@
         <BlockGist :data="block" />
       </LayoutHelper>
 
-      <LayoutHelper
-        v-else-if="block.blockType == 'TableBlock'"
-        :key="`tableBlock${index}`"
-        indent="col-3"
-        :class="marginBottom"
-      >
-        <BlockTable :data="block" />
-      </LayoutHelper>
-
       <LayoutHelper
         v-else-if="block.blockType == 'RichTableBlock'"
         :key="`richTableBlock${index}`"
-        indent="col-3"
+        :indent="themeStore.isEdu ? 'col-2' : 'col-3'"
         class="lg:mb-18 mb-10"
       >
         <BlockRichTable :table="block" />
@@ -277,7 +268,6 @@ import BlockQuote, { type BlockQuoteAttributes } from './../BlockQuote/BlockQuot
 import BlockRelatedLinks, {
   type BlockRelatedLinksObject
 } from './../BlockRelatedLinks/BlockRelatedLinks.vue'
-import BlockTable from './../BlockTable/BlockTable.vue'
 import BlockRichTable from './../BlockRichTable/BlockRichTable.vue'
 import BlockTeaser from './../BlockTeaser/BlockTeaser.vue'
 import BlockText from './../BlockText/BlockText.vue'
@@ -287,6 +277,8 @@ import BlockVideo from './../BlockVideo/BlockVideo.vue'
 import BlockVideoEmbed, {
   type BlockData as VideoBlockEmbedData
 } from './../BlockVideoEmbed/BlockVideoEmbed.vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from '../../store/theme'
 
 interface Variants {
   [key: string]: string
@@ -317,7 +309,6 @@ export default defineComponent({
     BlockListCards,
     BlockQuote,
     BlockRelatedLinks,
-    BlockTable,
     BlockRichTable,
     BlockTeaser,
     BlockText,
@@ -345,6 +336,7 @@ export default defineComponent({
     }
   },
   computed: {
+    ...mapStores(useThemeStore),
     layoutClass(): string {
       return variants[this.variant]
     },

package/src/components/BlockText/BlockText.stories.js

@@ -15,9 +15,35 @@ export default {
     () => ({
       template: '<div class="lg:w-2/3 mx-auto"><story /></div>'
     })
-  ]
+  ],
+  excludeStories: /.*Data$/
 }
 
+export const RichTextMediaData = `<p data-block-key="5f55p">Description for it.</p><div class="richtext-image fullwidth"><img alt="Perseverance Looks Back at &amp;#x27;Bright Angel&amp;#x27;" height="480" loading="lazy" src="https://picsum.photos/640/480" width="640">
+  <div class="richtext-caption">
+      <div class="caption">One of the navigation cameras aboard NASAs Perseverance Mars rover captured this view looking back at the Bright Angel area on July 30, 2024.</div>
+      <span class="credit">Credit: NASA/JPL-Caltech</span>
+      <a class="caption-link" href="#">Full Image Details</a>
+  </div>
+</div><p data-block-key="89jcq">More text and another image that&#x27;s full width (above)</p><p data-block-key="6jsp"></p><div class="richtext-image left"><img alt="Carbon Mapper Coalition&amp;#x27;s Tanager Satellite" height="336" loading="lazy" src="https://picsum.photos/640/336" width="640">
+    <div class="richtext-caption">
+        <div class="caption">This artists concept depicts one of the Carbon Mapper Coalitions Tanager satellites, the first of which launched on Aug. 16, 2024. Tanager-1 will use imaging spectrometer technology developed at JPL to measure greenhouse gas point-source emissions.</div>
+        <span class="credit">Credit: Planet Labs PBC</span>
+        <a class="caption-link" href="#">Full Image Details</a>
+    </div>
+</div>
+<ul><li>Item one in the list</li><li>Aliquam erat volutpat. Nam et lorem purus. Pellentesque placerat, lorem eget ultrices bibendum, lorem dolor finibus metus, consectetur mattis lorem sapien id felis. Cras scelerisque lacus et tristique luctus.</li><li>Third item in the list</li></ul>
+<p data-block-key="4409g">More text and something that&#x27;s <span="math-text">right-aligned</span>.</p><p data-block-key="bid36"></p><div class="richtext-image right"><img alt="Lecture Brings Galileo&amp;#x27;s Travels into Final Focus" height="350" loading="lazy" src="https://picsum.photos/640/350" width="640">
+    <div class="richtext-caption">
+        <div class="caption">Lecture Brings Galileo's Travels into Final Focus</div>
+    </div>
+</div>
+<ol><li>Item one in the list</li><li>Aliquam erat volutpat. Nam et lorem purus. Pellentesque placerat, lorem eget ultrices bibendum, lorem dolor finibus metus, consectetur mattis lorem sapien id felis. Cras scelerisque lacus et tristique luctus.</li><li>Third item in the list</li></ol>
+<p data-block-key="1f4rd"> Pellentesque euismod, metus et vehicula tincidunt, magna velit viverra enim, non efficitur elit enim ut ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum massa est, aliquam sed volutpat quis, tempor vitae felis. Quisque suscipit in purus non rhoncus. Vestibulum commodo gravida nibh. Quisque imperdiet lacus rhoncus malesuada elementum. Mauris tempor purus quis sollicitudin ornare. Suspendisse eget gravida neque. Etiam gravida, sapien ac condimentum placerat, tellus eros volutpat elit, non viverra lectus turpis ut lectus. Praesent varius porttitor eros eu efficitur. Etiam nec neque semper, facilisis leo non, tempor enim. Etiam a sodales lacus. Aenean a nibh ipsum.</p>
+<ul><li>Item one in the list</li><li>Aliquam erat volutpat. Nam et lorem purus. Pellentesque placerat, lorem eget ultrices bibendum, lorem dolor finibus metus, consectetur mattis lorem sapien id felis. Cras scelerisque lacus et tristique luctus.</li><li>Third item in the list</li></ul>
+<ol><li>Item one in the list</li><li>Aliquam erat volutpat. Nam et lorem purus. Pellentesque placerat, lorem eget ultrices bibendum, lorem dolor finibus metus, consectetur mattis lorem sapien id felis. Cras scelerisque lacus et tristique luctus.</li><li>Third item in the list</li></ol>
+<p>Nunc molestie aliquet nunc, ut viverra risus elementum bibendum. Cras metus metus, sagittis sed ex at, rutrum dictum leo. Cras sodales, urna id aliquam scelerisque, neque sem venenatis justo, a feugiat lorem ligula molestie orci. Vestibulum in suscipit diam. Phasellus pulvinar quis diam ullamcorper sagittis. Praesent a risus leo. Etiam tempor dolor eu turpis laoreet fermentum. Sed turpis risus, interdum ut bibendum ut, ornare a augue. Donec condimentum odio non lectus efficitur sodales. Vivamus posuere ligula a eros molestie, semper porttitor augue interdum. Cras et facilisis ligula, nec malesuada velit. </p>`
+
 export const BaseStory = {
   name: 'BlockText',
   args: {
@@ -27,6 +53,12 @@ export const BaseStory = {
 }
 
 export const RichTextMedia = {
+  args: {
+    variant: 'large',
+    text: RichTextMediaData
+  }
+}
+export const SubsequentFloatingImages = {
   args: {
     variant: 'large',
     text: `<p data-block-key="5f55p">Description for it.</p><div class="richtext-image fullwidth"><img alt="Perseverance Looks Back at &amp;#x27;Bright Angel&amp;#x27;" height="480" loading="lazy" src="https://picsum.photos/640/480" width="640">
@@ -45,6 +77,23 @@ export const RichTextMedia = {
                 <div class="richtext-caption">
                     <div class="caption">Lecture Brings Galileo's Travels into Final Focus</div>
                 </div>
-            </div><p data-block-key="1f4rd">More text and something that&#x27;s left-aligned</p>`
+            </div><p data-block-key="4409g">More text and something that&#x27;s right-aligned.</p><p data-block-key="bid36"></p><div class="richtext-image right"><img alt="Lecture Brings Galileo&amp;#x27;s Travels into Final Focus" height="342" loading="lazy" src="https://picsum.photos/640/350" width="640">
+                <div class="richtext-caption">
+                    <div class="caption">Lecture Brings Galileo's Travels into Final Focus</div>
+                </div>
+            </div>
+            <div class="richtext-image left"><img alt="Lecture Brings Galileo&amp;#x27;s Travels into Final Focus" height="354" loading="lazy" src="https://picsum.photos/640/320" width="640">
+                <div class="richtext-caption">
+                    <div class="caption">Lecture Brings Galileo's Travels into Final Focus</div>
+                </div>
+            </div>
+            <div class="richtext-image left"><img alt="Lecture Brings Galileo&amp;#x27;s Travels into Final Focus" height="354" loading="lazy" src="https://picsum.photos/640/324" width="640">
+                <div class="richtext-caption">
+                    <div class="caption">Lecture Brings Galileo's Travels into Final Focus</div>
+                </div>
+            </div>
+            </div><p data-block-key="1f4rd">More text and two subsequent left-aligned images</p>
+                        <p data-block-key="1f4rd"> Pellentesque euismod, metus et vehicula tincidunt, magna velit viverra enim, non efficitur elit enim ut ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum massa est, aliquam sed volutpat quis, tempor vitae felis. Quisque suscipit in purus non rhoncus. Vestibulum commodo gravida nibh. Quisque imperdiet lacus rhoncus malesuada elementum. Mauris tempor purus quis sollicitudin ornare. Suspendisse eget gravida neque. Etiam gravida, sapien ac condimentum placerat, tellus eros volutpat elit, non viverra lectus turpis ut lectus. Praesent varius porttitor eros eu efficitur. Etiam nec neque semper, facilisis leo non, tempor enim. Etiam a sodales lacus. Aenean a nibh ipsum.</p>
+<p>Nunc molestie aliquet nunc, ut viverra risus elementum bibendum. Cras metus metus, sagittis sed ex at, rutrum dictum leo. Cras sodales, urna id aliquam scelerisque, neque sem venenatis justo, a feugiat lorem ligula molestie orci. Vestibulum in suscipit diam. Phasellus pulvinar quis diam ullamcorper sagittis. Praesent a risus leo. Etiam tempor dolor eu turpis laoreet fermentum. Sed turpis risus, interdum ut bibendum ut, ornare a augue. Donec condimentum odio non lectus efficitur sodales. Vivamus posuere ligula a eros molestie, semper porttitor augue interdum. Cras et facilisis ligula, nec malesuada velit. </p>`
   }
 }

package/src/components/NavDesktop/NavDesktopTopHat.vue

@@ -16,8 +16,13 @@
           :class="{ '-ml-3': index === 0 }"
         >
           <span
-            class="can-hover:group-hover:border-jpl-red-light inline-block py-2 border-b-2"
-            :class="index === 0 ? 'border-jpl-red-light' : 'border-transparent'"
+            class="can-hover:group-hover:border-jpl-red inline-block py-2 border-b-2"
+            :class="
+              (getLinkText(item) === 'JPL' && !themeStore.isEdu) ||
+              (getLinkText(item) === 'Education' && themeStore.isEdu)
+                ? 'border-jpl-red'
+                : 'border-transparent'
+            "
           >
             {{ getLinkText(item) }}
           </span>
@@ -29,6 +34,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { mixinGetRouterLink, mixinGetLinkText } from './../../utils/mixins'
+import { mapStores } from 'pinia'
+import { useThemeStore } from './../../store/theme'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import type { LinkObject } from './../../utils/mixins'
 import type { PropType } from 'vue'
@@ -51,6 +58,9 @@ export default defineComponent({
     getLinkText(link: LinkObject): string | undefined {
       return mixinGetLinkText(link)
     }
+  },
+  computed: {
+    ...mapStores(useThemeStore)
   }
 })
 </script>

package/src/components/NavJumpMenu/NavJumpMenu.stories.js

@@ -38,6 +38,23 @@ export const BaseStory = {
   }
 }
 
+export const ExtraLong = {
+  args: {
+    title: 'Page Title',
+    jumpLinks: [
+      ...JumpLinksData,
+      ...JumpLinksData,
+      ...JumpLinksData,
+      ...JumpLinksData,
+      ...JumpLinksData,
+      ...JumpLinksData,
+      ...JumpLinksData,
+      ...JumpLinksData
+    ],
+    invert: true
+  }
+}
+
 export const Light = {
   args: {
     title: 'Page Title',

package/src/components/NavJumpMenu/NavJumpMenu.vue

@@ -18,6 +18,7 @@
         >
           <NavJumpMenuContent
             :key="index"
+            class="max-h-[72vh] overflow-y-auto"
             :item="item"
             v-bind="$attrs"
           />

package/src/components/NavSearchForm/NavSearchForm.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { useThemeStore } from '../../store/theme'
 import SearchInput from './../SearchInput/SearchInput.vue'
 const router = useRouter()
+const themeStore = useThemeStore()
 
 interface NavSearchFormProps {
   mobile?: boolean
@@ -20,7 +22,10 @@ const clearSearch = () => {
 }
 const submitSearch = () => {
   emit('submitForm')
-  router.push({ path: '/search', query: { query: searchQuery.value } })
+  router.push({
+    path: themeStore.isEdu ? '/edu/search/' : '/search',
+    query: { query: searchQuery.value }
+  })
 }
 </script>
 <template>

package/src/components/NavSecondary/NavSecondaryDropdownContent.vue

@@ -16,7 +16,8 @@
       :key="child_index"
     >
       <BaseLink
-        :to="child.path"
+        :to="child.path.startsWith('/') ? child.path : undefined"
+        :href="!child.path.startsWith('/') ? child.path : undefined"
         variant="none"
         :link-class="linkClass(child, child_index === item.children.length - 1)"
         exact
@@ -35,7 +36,8 @@
           class=""
         >
           <BaseLink
-            :to="grandchild.path"
+            :to="grandchild.path.startsWith('/') ? grandchild.path : undefined"
+            :href="!grandchild.path.startsWith('/') ? grandchild.path : undefined"
             variant="none"
             :link-class="
               nestedLinkClass(

package/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue

@@ -231,8 +231,8 @@ export default defineComponent({
   .BlockText {
     ul {
       li {
-        &::before {
-          @apply bg-secondary;
+        &::marker {
+          @apply text-secondary;
         }
       }
     }

package/src/templates/edu/PageEduGalleryDetail/PageEduGalleryDetail.vue

@@ -260,8 +260,8 @@ const { data } = reactive(props)
   .BlockText {
     ul {
       li {
-        &::before {
-          @apply bg-secondary;
+        &::marker {
+          @apply text-secondary;
         }
       }
     }

package/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue

@@ -160,18 +160,5 @@ defineExpose({
     >
       <AboutTheAuthor :authors="data.authors" />
     </LayoutHelper>
-
-    <div class="bg-stars bg-primary-darker">
-      <div class="py-10 text-center text-white">
-        <strong>Related News goes here</strong>
-      </div>
-      <!-- extras -->
-      <!-- <BlockLinkCarousel
-        item-type="cards"
-        class="mt-24"
-        heading="Explore more"
-        :items="data.getRelatedOrLatestNews"
-      /> -->
-    </div>
   </div>
 </template>

package/src/templates/edu/PageEduStudentProject/PageEduStudentProject.stories.js

@@ -9,6 +9,8 @@ import { BaseVideoData } from './../../../components/BaseVideo/BaseVideo.stories
 import { BlockVideoEmbedData } from './../../../components/BlockVideoEmbed/BlockVideoEmbed.stories'
 import { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
 import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
+import { RichTextMediaData } from './../../../components/BlockText/BlockText.stories.js'
+import { BlockRichTableData } from './../../../components/BlockRichTable/BlockRichTable.stories'
 import {
   BlockStreamfieldTruncatedData,
   BlockStreamfieldMinimalData
@@ -139,7 +141,16 @@ export const BaseStory = {
         {
           heading: 'Lorem ipsum dolor no media',
           media: [],
-          content: [BlockImageData, ...BlockStreamfieldMinimalData.body, BlockInlineImageData.block]
+          content: [
+            BlockImageData,
+            ...BlockStreamfieldMinimalData.body,
+            BlockRichTableData,
+            BlockInlineImageData.block,
+            {
+              blockType: 'RichTextBlock',
+              value: RichTextMediaData
+            }
+          ]
         },
         {
           heading: 'Sit amet',
@@ -156,7 +167,7 @@ export const BaseStory = {
         {
           heading: 'Consectatur adipscing',
           media: [BlockImageComparisonData],
-          content: BlockStreamfieldMinimalData.body
+          content: BlockStreamfieldTruncatedData.body
         }
       ],
 

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

@@ -451,9 +451,9 @@ const computedClass = computed((): string => {
   .BlockText {
     ul {
       li {
-        &::before {
+        &::marker {
           // intentionally using a specific red
-          @apply bg-jpl-red;
+          @apply text-jpl-red;
         }
       }
     }

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

@@ -186,13 +186,34 @@ const { heading, blocks, image, steps, stepsNumbering, text } = reactive(props)
     // intentionally overriding correction that occurs within ThemeVariantGray
     @apply text-jpl-red;
   }
+  .richtext-image {
+    &.right,
+    &.left {
+      @apply lg:max-w-md;
+    }
+    &.right {
+      @apply mr-0;
+    }
+    &.left {
+      @apply ml-0;
+    }
+  }
   .PageEduStudentProjectStep__fullWidth {
     .LayoutHelper > div > .BlockText {
-      @screen lg {
-        @apply mr-[10rem];
+      p,
+      li {
+        @screen lg {
+          @apply mr-[10rem];
+        }
+        @screen xl {
+          @apply mr-[14rem];
+        }
       }
-      @screen xl {
-        @apply mr-[14rem];
+      table {
+        p,
+        li {
+          @apply mr-0;
+        }
       }
     }
   }

package/dist/src/components/BlockTable/BlockTable.stories.d.ts

@@ -1,17 +0,0 @@
-import { default as BlockTable } from './BlockTable.vue';
-declare namespace _default {
-    export let title: string;
-    export { BlockTable as component };
-    export let excludeStories: RegExp;
-}
-export default _default;
-export namespace BlockTableData {
-    let blockType: string;
-    let table: string;
-}
-export namespace BaseStory {
-    let name: string;
-    namespace args {
-        export { BlockTableData as data };
-    }
-}

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

@@ -1,17 +0,0 @@
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    data: {
-        type: ObjectConstructor;
-        required: false;
-    };
-}>, {}, {}, {
-    table(): {
-        rows: never[];
-        caption: any;
-    };
-}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    data: {
-        type: ObjectConstructor;
-        required: false;
-    };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
-export default _default;

package/src/components/BlockTable/BlockTable.stories.js

@@ -1,20 +0,0 @@
-import BlockTable from './BlockTable.vue'
-
-export default {
-  title: 'Components/Blocks/BlockTable',
-  component: BlockTable,
-  excludeStories: /.*Data$/
-}
-
-export const BlockTableData = {
-  blockType: 'TableBlock',
-  table:
-    "{'data': [['Header 1', 'Header 2', 'Header 3'], ['Lorem ipsum dolor sit amet', 'Lorem ipsum dolor sit amet', 'Lorem ipsum dolor sit amet'], [None, None, None]], 'cell': [], 'first_row_is_table_header': True, 'first_col_is_header': False, 'table_caption': 'Third row intentionally blank to test parsing.'}"
-}
-
-export const BaseStory = {
-  name: 'BlockTable',
-  args: {
-    data: BlockTableData
-  }
-}