@explorer-1/vue 0.2.69 → 0.2.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.69",
+  "version": "0.2.71",
   "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.18"
+    "@explorer-1/common": "1.1.19"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BlockCardGrid/BlockCardGrid.stories.js

@@ -92,3 +92,6 @@ export const BaseStory = {
   name: 'BlockCardGrid',
   args: { cards: BlockCardGridData }
 }
+export const ThreeCards = {
+  args: { cards: BlockCardGridData.slice(0, 3) }
+}

package/src/components/BlockCardGrid/BlockCardGrid.vue

@@ -3,9 +3,7 @@
     v-if="cards"
     class="BlockCardGrid"
   >
-    <div
-      :class="`hidden md:grid md:grid-cols-2 lg:grid-cols-3 ${compact ? ' gap-5' : '3xl:grid-cols-4 gap-8'}`"
-    >
+    <div :class="computedClasses">
       <BlockCardGridItem
         v-for="(card, index) of cards"
         :key="`item-${index}`"
@@ -65,6 +63,23 @@ export default defineComponent({
       type: Array as PropType<CardGridItem[]>,
       default: undefined
     }
+  },
+  computed: {
+    fourColumns() {
+      return this.cards && this.cards.length > 3
+    },
+    computedClasses() {
+      let classes = 'hidden md:grid md:grid-cols-2 lg:grid-cols-3'
+      if (this.compact) {
+        classes += ' gap-5'
+      } else {
+        classes += ' gap-8'
+      }
+      if (this.fourColumns) {
+        classes += ' xl:grid-cols-4'
+      }
+      return classes
+    }
   }
 })
 </script>

package/src/components/BlockImage/BlockImageFullBleed.vue

@@ -109,34 +109,32 @@ export default defineComponent({
     v-if="theData"
     class="BlockImageFullBleed"
   >
-    <div class="bg-gray-light">
-      <div class="max-w-screen-3xl mx-auto">
-        <MixinFancybox
-          v-if="theData.src"
-          :src="theData.original || theData.src?.url"
-          :caption="theData.caption"
-          :credit="theData.credit"
-          :detail-url="customDetailUrl || theData.detailUrl"
+    <div class="max-w-screen-3xl mx-auto">
+      <MixinFancybox
+        v-if="theData.src"
+        :src="theData.original || theData.src?.url"
+        :caption="theData.caption"
+        :credit="theData.credit"
+        :detail-url="customDetailUrl || theData.detailUrl"
+      >
+        <BaseImagePlaceholder
+          :aspect-ratio="constrain ? '16:9' : 'none'"
+          :responsive-aspect-ratio="constrain ? 'lg:aspect-ratio-two-one' : ''"
+          dark-mode
         >
-          <BaseImagePlaceholder
-            :aspect-ratio="constrain ? '16:9' : 'none'"
-            :responsive-aspect-ratio="constrain ? 'lg:aspect-ratio-two-one' : ''"
-            dark-mode
-          >
-            <BaseImage
-              v-if="theData.src && theData.srcCropped"
-              :src="constrain ? theData.srcCropped.url : theData.src.url"
-              :srcset="theData.srcSet && !constrain ? theData.srcSet : theSrcSet"
-              :width="constrain ? theData.srcCropped.width : theData.src.width"
-              :height="constrain ? theData.srcCropped.height : theData.src.height"
-              :alt="theData.alt"
-              :image-class="!constrain ? 'w-full h-auto' : undefined"
-              :object-fit-class="constrain ? 'cover' : undefined"
-              loading="lazy"
-            />
-          </BaseImagePlaceholder>
-        </MixinFancybox>
-      </div>
+          <BaseImage
+            v-if="theData.src && theData.srcCropped"
+            :src="constrain ? theData.srcCropped.url : theData.src.url"
+            :srcset="theData.srcSet && !constrain ? theData.srcSet : theSrcSet"
+            :width="constrain ? theData.srcCropped.width : theData.src.width"
+            :height="constrain ? theData.srcCropped.height : theData.src.height"
+            :alt="theData.alt"
+            :image-class="!constrain ? 'w-full h-auto' : undefined"
+            :object-fit-class="constrain ? 'cover' : undefined"
+            loading="lazy"
+          />
+        </BaseImagePlaceholder>
+      </MixinFancybox>
     </div>
     <div
       v-if="data && hasCaptionArea"

package/src/components/BlockRichTable/BlockRichTable.vue

@@ -25,15 +25,24 @@ export default defineComponent({
   >
     <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"
+        v-if="table.tableContent"
+        class="min-w-full border-gray-light-mid w-full border-t border-b border-collapse table-auto m-0 p-0"
       >
+        <caption
+          v-if="table.tableCaption"
+          class="sr-only"
+        >
+          {{
+            table.tableCaption
+          }}
+        </caption>
         <thead v-if="table.tableContent.tableHead?.length">
           <tr>
             <th
               v-for="(headCell, headIndex) in table.tableContent.tableHead[0]"
               :key="headIndex"
               scope="col"
-              class="min-w-[6rem] bg-jpl-blue-darker edu:bg-jpl-violet-darker text-subtitle text-white border-gray-light-mid lg:p-5 p-3 border-b"
+              class="min-w-[6rem] bg-jpl-blue-darker edu:bg-jpl-violet-darker text-subtitle text-white border-gray-light-mid lg:p-5 p-3 border-b text-left"
             >
               {{ headCell.text }}
             </th>
@@ -47,7 +56,7 @@ export default defineComponent({
             <td
               v-for="(cell, cellIndex) in row"
               :key="cellIndex"
-              class="min-w-[6rem] bg-white text-gray-dark border-gray-light-mid"
+              class="min-w-[6rem] bg-white text-gray-dark border-gray-light-mid lg:p-5 p-3 align-top"
             >
               <template v-if="cell.blockType === 'CharBlock'">
                 <p class="">
@@ -75,11 +84,12 @@ export default defineComponent({
       </table>
     </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>
+      <div
+        class="max-w-screen-3xl mx-auto block text-left px-0 text-gray-mid-dark text-body-sm mt-4"
+        aria-hidden
+      >
+        {{ table.tableCaption }}
+      </div>
     </template>
   </div>
 </template>

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

@@ -16,6 +16,7 @@ import { BlockTeaserData } from './../BlockTeaser/BlockTeaser.stories'
 import { BlockIframeEmbedData } from './../BlockIframeEmbed/BlockIframeEmbed.stories'
 import { BlockVideoData } from './../BlockVideo/BlockVideo.stories'
 import { BlockVideoEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.stories'
+import { MixedColumnWidths } from './../BlockRichTable/BlockRichTable.stories'
 import BlockStreamfield, { variants } from './BlockStreamfield.vue'
 
 export default {
@@ -127,6 +128,45 @@ export const BlockStreamfieldData = {
       alignTo: 'left'
     },
     BlockRichTableData,
+    MixedColumnWidths.args.table,
+    {
+      blockType: 'RichTableBlock',
+      tableCaption: 'table caption',
+      tableContent: {
+        tableHead: [
+          [
+            {
+              text: '1. Learn'
+            }
+          ]
+        ],
+        tableBody: [
+          [
+            {
+              ...BlockImageData,
+              caption: '<p>My custom caption.</p>',
+              displayCaption: true,
+              blockType: 'ImageBlock'
+            }
+          ],
+          [
+            {
+              blockType: 'RichTextBlock',
+              value:
+                '<p>Rich text. Lorem ipsum <a href="/missions/test-mission/">dolor</a> sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.</p>\n'
+            }
+          ],
+
+          [
+            {
+              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: 'ListBlock',
       field: 'card_grid',

package/src/components/HeroMedia/HeroMedia.vue

@@ -3,52 +3,50 @@
     v-if="image || video"
     class="HeroMedia"
   >
-    <div class="bg-gray-light">
-      <div class="vh-crop max-w-screen-3xl relative flex items-center mx-auto overflow-hidden">
-        <div class="hero">
-          <template v-if="theImageData">
-            <img
-              v-if="theImageData.src"
-              class="object-cover object-center w-full h-full"
-              :srcset="theSrcSet"
-              :src="theImageData.src.url"
-              :width="theImageData.src.width"
-              :height="theImageData.src.height"
-              :alt="theImageData.alt"
-              itemprop="image"
-              data-chromatic="ignore"
-            />
-          </template>
-          <template v-else-if="video">
-            <MixinVideoBg :video="video" />
-          </template>
-        </div>
-        <div
-          v-if="hasCaptionArea"
-          class="lg:hidden absolute bottom-0 left-0 w-full h-auto mx-auto print:hidden"
-        >
-          <button
-            class="bg-opacity-90 text-gray-dark flex items-center justify-center w-12 h-12 ml-auto bg-white cursor-pointer"
-            aria-label="Toggle caption"
-            @click="toggleCaption"
-          >
-            <IconInfo
-              v-show="!captionVisible"
-              class="text-xl"
-            />
-            <IconClose v-show="captionVisible" />
-          </button>
-        </div>
+    <div class="vh-crop max-w-screen-3xl relative flex items-center mx-auto overflow-hidden">
+      <div class="hero">
+        <template v-if="theImageData">
+          <img
+            v-if="theImageData.src"
+            class="object-cover object-center w-full h-full"
+            :srcset="theSrcSet"
+            :src="theImageData.src.url"
+            :width="theImageData.src.width"
+            :height="theImageData.src.height"
+            :alt="theImageData.alt"
+            itemprop="image"
+            data-chromatic="ignore"
+          />
+        </template>
+        <template v-else-if="video">
+          <MixinVideoBg :video="video" />
+        </template>
       </div>
-
       <div
         v-if="hasCaptionArea"
-        :class="captionVisibilityClass"
-        class="caption-area max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 ThemeVariantGray lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto print:block"
+        class="lg:hidden absolute bottom-0 left-0 w-full h-auto mx-auto print:hidden"
       >
-        <BaseImageCaption :data="theImageData || customCaption" />
+        <button
+          class="bg-opacity-90 text-gray-dark flex items-center justify-center w-12 h-12 ml-auto bg-white cursor-pointer"
+          aria-label="Toggle caption"
+          @click="toggleCaption"
+        >
+          <IconInfo
+            v-show="!captionVisible"
+            class="text-xl"
+          />
+          <IconClose v-show="captionVisible" />
+        </button>
       </div>
     </div>
+
+    <div
+      v-if="hasCaptionArea"
+      :class="captionVisibilityClass"
+      class="caption-area max-w-screen-3xl ThemeVariantGray bg-gray-light bg-opacity-90 lg:bg-opacity-100 ThemeVariantGray lg:block lg:pb-4 lg:px-3 xl:px-8 lg:pt-4 items-start p-4 mx-auto print:block"
+    >
+      <BaseImageCaption :data="theImageData || customCaption" />
+    </div>
   </div>
 </template>
 <script lang="ts">

package/src/components/NavDesktopEdu/NavDesktopEdu.vue

@@ -12,7 +12,7 @@
     }"
   >
     <!-- navbar -->
-    <div class="header-bg z-10 max-w-screen-3xl absolute inset-0 mx-auto"></div>
+    <div class="header-bg z-10 absolute inset-0 mx-auto"></div>
     <div class="px-4">
       <div class="h-18 container flex items-center justify-between mx-auto">
         <!-- branding -->