@explorer-1/vue 0.2.69 → 0.2.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.69",
+  "version": "0.2.70",
   "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/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',