From 3a8bcc4b713671da7e0a581f1ee211bd14dda3f2 Mon Sep 17 00:00:00 2001
From: James Ray <james.a.ray@jpl.nasa.gov>
Date: Thu, 22 Aug 2024 04:43:56 -0700
Subject: [PATCH 1/3] Rich Table Block

---
 .../src/scss/components/_BlockRichTable.scss  |  62 +++++++++++
 .../BlockRichTable/BlockRichTable.stories.js  |  62 +++++++++++
 .../BlockRichTable/BlockRichTable.vue         | 100 ++++++++++++++++++
 .../BlockStreamfield/BlockStreamfield.vue     |  11 ++
 4 files changed, 235 insertions(+)
 create mode 100644 packages/common/src/scss/components/_BlockRichTable.scss
 create mode 100644 packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
 create mode 100644 packages/vue/src/components/BlockRichTable/BlockRichTable.vue

diff --git a/packages/common/src/scss/components/_BlockRichTable.scss b/packages/common/src/scss/components/_BlockRichTable.scss
new file mode 100644
index 00000000..3982d691
--- /dev/null
+++ b/packages/common/src/scss/components/_BlockRichTable.scss
@@ -0,0 +1,62 @@
+// needed to @extend .BlockText
+@import '@explorer-1/common/src/scss/components/BlockText';
+
+.BlockRichTable {
+  table {
+    @apply border-gray-light-mid border-t border-b border-collapse w-full;
+  }
+
+  thead {
+    @apply bg-jpl-blue-darker;
+  }
+
+  th {
+    @apply p-3 lg:p-5 border-gray-light-mid border-b font-secondary uppercase text-base leading-tight tracking-wider text-white text-left font-normal;
+  }
+
+  tbody {
+    @apply text-gray-dark;
+  }
+
+  tbody tr {
+    @apply table-row bg-white border-t border-gray-light-mid;
+  }
+
+  td {
+    @apply p-3 lg:p-5;
+  }
+
+  .rich_text,
+  .link {
+    @extend .BlockText;
+  }
+  // Below selectors are extra-specific to ensure they take priority over the @extend-ed .BlockText styles.
+  td.rich_text p {
+    @apply mb-4;
+  }
+
+  td.rich_text ol {
+    @apply pl-6 mb-4;
+  }
+
+  td.rich_text ul {
+    @apply pl-6 mb-4 list-disc;
+
+    li {
+      @apply p-0;
+    }
+
+    li::before {
+      @apply hidden;
+    }
+  }
+
+  td.rich_text ul li,
+  td.rich_text ol li {
+    @apply my-1;
+  }
+
+  td.rich_text hr {
+    @apply my-4;
+  }
+}
diff --git a/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js b/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
new file mode 100644
index 00000000..98894bf9
--- /dev/null
+++ b/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
@@ -0,0 +1,62 @@
+import BlockRichTable from './BlockRichTable.vue'
+
+export default {
+  title: 'Components/Blocks/BlockRichTable',
+  component: BlockRichTable,
+  excludeStories: /.*Data$/
+}
+
+export const BlockRichTableData = {
+  blockType: 'RichTableBlock',
+  table: `{ "data": {
+      "page": {
+        "body": [
+          {
+            "blockType": "RichTableBlock",
+            "tableCaption": "table caption",
+            "tableContent": {
+              "tableBody": [
+                [
+                  {
+                    "blockType": "CharBlock",
+                    "value": "plain text render"
+                  }
+                ],
+                [
+                  {
+                    "blockType": "RichTextBlock",
+                    "value": "<p><b>richtext</b> <i>render</i></p>"
+                  }
+                ],
+                [
+                  {
+                    "blockType": "ImageBlock",
+                    "image": {
+                      "caption": "These JPL interns worked on the development and testing of the hardware and software for CADRE, NASA’s upcoming lunar technology demonstration.",
+                      "url": "https://placekitten.com/400/300"
+                    }
+                  }
+                ]
+              ],
+              "tableHead": [
+                [
+                  {
+                    "text": "Column Heading Text"
+                  }
+                ]
+              ]
+            }
+          }
+        ],
+        "breadcrumb": null
+      }
+    }
+  }`
+}
+
+export const BaseStory = {
+  name: 'BlockRichTable',
+  args: {
+    data: BlockRichTableData
+  }
+}
diff --git a/packages/vue/src/components/BlockRichTable/BlockRichTable.vue b/packages/vue/src/components/BlockRichTable/BlockRichTable.vue
new file mode 100644
index 00000000..faf83a5a
--- /dev/null
+++ b/packages/vue/src/components/BlockRichTable/BlockRichTable.vue
@@ -0,0 +1,100 @@
+<script lang="ts">
+// @ts-nocheck
+import { defineComponent, computed } from 'vue'
+
+export default defineComponent({
+  name: 'BlockRichTable',
+  props: {
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    // Parse the table data from the JSON string
+    const parsedData = computed(() => {
+      try {
+        return JSON.parse(props.data.table)
+      } catch (error) {
+        console.error('Error parsing table data:', error)
+        return null
+      }
+    })
+
+    // Extract the relevant table block
+    const table = computed(() => {
+      if (!parsedData.value || !parsedData.value.data.page.body) {
+        return null
+      }
+
+      return parsedData.value.data.page.body.find((block) => block.blockType === 'RichTableBlock')
+    })
+
+    return {
+      table
+    }
+  }
+})
+</script>
+
+<template>
+  <div
+    v-if="table"
+    class="BlockRichTable"
+  >
+    <div class="overflow-x-auto scrolling-touch">
+      <table class="border-gray-light-mid w-full border-t border-b border-collapse table-auto">
+        <caption class="text-center font-bold my-4">
+          {{
+            table.tableCaption
+          }}
+        </caption>
+        <thead>
+          <tr>
+            <th
+              v-for="(headCell, headIndex) in table.tableContent.tableHead[0]"
+              :key="headIndex"
+              class="bg-jpl-blue-darker text-subtitle text-white border-gray-light-mid lg:p-5 p-3 border-b"
+            >
+              {{ headCell.text }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(row, rowIndex) in table.tableContent.tableBody"
+            :key="rowIndex"
+          >
+            <td
+              v-for="(cell, cellIndex) in row"
+              :key="cellIndex"
+              class="bg-white text-gray-dark border-gray-light-mid lg:p-5 p-3 border-b"
+            >
+              <!-- Render content based on the block type -->
+              <template v-if="cell.blockType === 'CharBlock'">
+                {{ cell.value }}
+              </template>
+              <template v-else-if="cell.blockType === 'RichTextBlock'">
+                <div v-html="cell.value"></div>
+              </template>
+              <template v-else-if="cell.blockType === 'ImageBlock'">
+                <figure>
+                  <img
+                    :src="cell.image.url"
+                    :alt="cell.image.caption"
+                    class="w-full h-auto"
+                  />
+                  <figcaption class="text-xs text-center mt-2">{{ cell.image.caption }}</figcaption>
+                </figure>
+              </template>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BlockRichTable';
+</style>
diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
index 6175bc23..8941a4c0 100644
--- a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
+++ b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
@@ -184,6 +184,15 @@
         <BlockTable :data="block" />
       </LayoutHelper>
 
+      <LayoutHelper
+        v-else-if="block.blockType == 'RichTableBlock'"
+        :key="`richTableBlock${index}`"
+        indent="col-3"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockRichTable :data="block" />
+      </LayoutHelper>
+
       <LayoutHelper
         v-else-if="block.blockType == 'RelatedLinksBlock'"
         :key="`relatedLinksBlock${index}`"
@@ -267,6 +276,7 @@ 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'
 import BlockTwitterEmbed from './../BlockTwitterEmbed/BlockTwitterEmbed.vue'
@@ -307,6 +317,7 @@ export default defineComponent({
     BlockQuote,
     BlockRelatedLinks,
     BlockTable,
+    BlockRichTable,
     BlockTeaser,
     BlockText,
     BlockTwitterEmbed,

From e13603699f10cfa79e409dfffbdb660edcbfcf61 Mon Sep 17 00:00:00 2001
From: James Ray <james.a.ray@jpl.nasa.gov>
Date: Wed, 28 Aug 2024 04:16:14 -0700
Subject: [PATCH 2/3] WIP richTableBlock

---
 .../src/scss/components/_BlockRichTable.scss  |  4 --
 .../BlockRichTable/BlockRichTable.stories.js  | 38 +++++++++++-------
 .../BlockRichTable/BlockRichTable.vue         | 40 +++++++++++++------
 3 files changed, 50 insertions(+), 32 deletions(-)

diff --git a/packages/common/src/scss/components/_BlockRichTable.scss b/packages/common/src/scss/components/_BlockRichTable.scss
index 3982d691..43160953 100644
--- a/packages/common/src/scss/components/_BlockRichTable.scss
+++ b/packages/common/src/scss/components/_BlockRichTable.scss
@@ -22,10 +22,6 @@
     @apply table-row bg-white border-t border-gray-light-mid;
   }
 
-  td {
-    @apply p-3 lg:p-5;
-  }
-
   .rich_text,
   .link {
     @extend .BlockText;
diff --git a/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js b/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
index 98894bf9..2eeeb8d6 100644
--- a/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
+++ b/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
@@ -15,33 +15,41 @@ export const BlockRichTableData = {
             "blockType": "RichTableBlock",
             "tableCaption": "table caption",
             "tableContent": {
-              "tableBody": [
+            "tableHead": [
                 [
                   {
-                    "blockType": "CharBlock",
-                    "value": "plain text render"
-                  }
-                ],
-                [
+                    "text": "1. Learn why we study geology on Earth and other planets"
+                  },
                   {
-                    "blockType": "RichTextBlock",
-                    "value": "<p><b>richtext</b> <i>render</i></p>"
+                    "text": "1. Learn why we study geology on Earth and other planets"
                   }
-                ],
+                ]
+              ],
+              "tableBody": [
                 [
                   {
                     "blockType": "ImageBlock",
                     "image": {
-                      "caption": "These JPL interns worked on the development and testing of the hardware and software for CADRE, NASA’s upcoming lunar technology demonstration.",
-                      "url": "https://placekitten.com/400/300"
+                      "caption": "NASA astronaut Kate Rubins uses a hand lens to observe the minerals present in a rock while taking part in the European Space Agency's PANGAEA geology training. Image credit: ESA–A. Romeo",
+                      "url": "https://imagecache.jpl.nasa.gov/images/edu/activities/ediblerocks_learn_main-640x350.jpg"
+                    }
+                  },
+                  {
+                    "blockType": "ImageBlock",
+                    "image": {
+                      "caption": "NASA astronaut Kate Rubins uses a hand lens to observe the minerals present in a rock while taking part in the European Space Agency's PANGAEA geology training. Image credit: ESA–A. Romeo",
+                      "url": "https://imagecache.jpl.nasa.gov/images/edu/activities/ediblerocks_learn_main-640x350.jpg"
                     }
                   }
-                ]
-              ],
-              "tableHead": [
+                ],
                 [
                   {
-                    "text": "Column Heading Text"
+                    "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."
                   }
                 ]
               ]
diff --git a/packages/vue/src/components/BlockRichTable/BlockRichTable.vue b/packages/vue/src/components/BlockRichTable/BlockRichTable.vue
index faf83a5a..0ef42ff4 100644
--- a/packages/vue/src/components/BlockRichTable/BlockRichTable.vue
+++ b/packages/vue/src/components/BlockRichTable/BlockRichTable.vue
@@ -1,6 +1,8 @@
 <script lang="ts">
+// eslint-disable vue/no-v-html
 // @ts-nocheck
 import { defineComponent, computed } from 'vue'
+import BlockImage from './../BlockImage/BlockImage.vue'
 
 export default defineComponent({
   name: 'BlockRichTable',
@@ -42,19 +44,17 @@ export default defineComponent({
     v-if="table"
     class="BlockRichTable"
   >
-    <div class="overflow-x-auto scrolling-touch">
-      <table class="border-gray-light-mid w-full border-t border-b border-collapse table-auto">
-        <caption class="text-center font-bold my-4">
-          {{
-            table.tableCaption
-          }}
-        </caption>
+    <div class="overflow-x-auto scrolling-touch max-w-screen-3xl mx-auto">
+      <table
+        class="min-w-full border-gray-light-mid w-full border-t border-b border-collapse table-auto"
+      >
         <thead>
           <tr>
             <th
               v-for="(headCell, headIndex) in table.tableContent.tableHead[0]"
               :key="headIndex"
-              class="bg-jpl-blue-darker text-subtitle text-white border-gray-light-mid lg:p-5 p-3 border-b"
+              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"
             >
               {{ headCell.text }}
             </th>
@@ -68,29 +68,43 @@ export default defineComponent({
             <td
               v-for="(cell, cellIndex) in row"
               :key="cellIndex"
-              class="bg-white text-gray-dark border-gray-light-mid lg:p-5 p-3 border-b"
+              class="min-w-72 sm:min-w-80 bg-white text-gray-dark border-gray-light-mid p-0"
             >
-              <!-- Render content based on the block type -->
               <template v-if="cell.blockType === 'CharBlock'">
-                {{ cell.value }}
+                <p class="text-sm text-left my-2 px-3 lg:px-5">
+                  {{ cell.value }}
+                </p>
               </template>
               <template v-else-if="cell.blockType === 'RichTextBlock'">
-                <div v-html="cell.value"></div>
+                <div class="text-xs text-left my-2 px-3 lg:px-5">{{ cell.value }}</div>
               </template>
               <template v-else-if="cell.blockType === 'ImageBlock'">
+                <BlockImage
+                  :data="cell.value"
+                  :full-bleed="true"
+                ></BlockImage>
                 <figure>
                   <img
                     :src="cell.image.url"
                     :alt="cell.image.caption"
                     class="w-full h-auto"
                   />
-                  <figcaption class="text-xs text-center mt-2">{{ cell.image.caption }}</figcaption>
+                  <figcaption class="text-xs text-left my-2 px-3 lg:px-5">
+                    {{ cell.image.caption }}
+                  </figcaption>
                 </figure>
               </template>
             </td>
           </tr>
         </tbody>
       </table>
+      <div class="flex w-full">
+        <caption class="text-center font-bold my-2 px-3 lg:px-5">
+          {{
+            table.tableCaption
+          }}
+        </caption>
+      </div>
     </div>
   </div>
 </template>

From b14478e585283b08bf9c7e5a6357c451cb7842e1 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Sun, 15 Sep 2024 22:36:41 -0700
Subject: [PATCH 3/3] finishing BlockRichTable

---
 .../src/scss/components/_BlockRichTable.scss  | 42 +--------
 .../BlockRichTable/BlockRichTable.stories.js  | 91 ++++++++-----------
 .../BlockRichTable/BlockRichTable.vue         | 79 ++++++----------
 .../BlockStreamfield/BlockStreamfield.vue     |  2 +-
 4 files changed, 71 insertions(+), 143 deletions(-)

diff --git a/packages/common/src/scss/components/_BlockRichTable.scss b/packages/common/src/scss/components/_BlockRichTable.scss
index 43160953..cdf51c71 100644
--- a/packages/common/src/scss/components/_BlockRichTable.scss
+++ b/packages/common/src/scss/components/_BlockRichTable.scss
@@ -1,6 +1,3 @@
-// needed to @extend .BlockText
-@import '@explorer-1/common/src/scss/components/BlockText';
-
 .BlockRichTable {
   table {
     @apply border-gray-light-mid border-t border-b border-collapse w-full;
@@ -18,41 +15,12 @@
     @apply text-gray-dark;
   }
 
-  tbody tr {
-    @apply table-row bg-white border-t border-gray-light-mid;
-  }
-
-  .rich_text,
-  .link {
-    @extend .BlockText;
-  }
-  // Below selectors are extra-specific to ensure they take priority over the @extend-ed .BlockText styles.
-  td.rich_text p {
-    @apply mb-4;
-  }
-
-  td.rich_text ol {
-    @apply pl-6 mb-4;
-  }
-
-  td.rich_text ul {
-    @apply pl-6 mb-4 list-disc;
-
-    li {
-      @apply p-0;
+  tbody {
+    tr {
+      @apply table-row bg-white border-t border-gray-light-mid;
     }
-
-    li::before {
-      @apply hidden;
+    td {
+      @apply p-3 lg:p-5 align-top;
     }
   }
-
-  td.rich_text ul li,
-  td.rich_text ol li {
-    @apply my-1;
-  }
-
-  td.rich_text hr {
-    @apply my-4;
-  }
 }
diff --git a/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js b/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
index 2eeeb8d6..c6b85ce3 100644
--- a/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
+++ b/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
@@ -1,4 +1,5 @@
 import BlockRichTable from './BlockRichTable.vue'
+import { BlockImageData } from './../BlockImage/BlockImage.stories'
 
 export default {
   title: 'Components/Blocks/BlockRichTable',
@@ -8,63 +9,47 @@ export default {
 
 export const BlockRichTableData = {
   blockType: 'RichTableBlock',
-  table: `{ "data": {
-      "page": {
-        "body": [
-          {
-            "blockType": "RichTableBlock",
-            "tableCaption": "table caption",
-            "tableContent": {
-            "tableHead": [
-                [
-                  {
-                    "text": "1. Learn why we study geology on Earth and other planets"
-                  },
-                  {
-                    "text": "1. Learn why we study geology on Earth and other planets"
-                  }
-                ]
-              ],
-              "tableBody": [
-                [
-                  {
-                    "blockType": "ImageBlock",
-                    "image": {
-                      "caption": "NASA astronaut Kate Rubins uses a hand lens to observe the minerals present in a rock while taking part in the European Space Agency's PANGAEA geology training. Image credit: ESA–A. Romeo",
-                      "url": "https://imagecache.jpl.nasa.gov/images/edu/activities/ediblerocks_learn_main-640x350.jpg"
-                    }
-                  },
-                  {
-                    "blockType": "ImageBlock",
-                    "image": {
-                      "caption": "NASA astronaut Kate Rubins uses a hand lens to observe the minerals present in a rock while taking part in the European Space Agency's PANGAEA geology training. Image credit: ESA–A. Romeo",
-                      "url": "https://imagecache.jpl.nasa.gov/images/edu/activities/ediblerocks_learn_main-640x350.jpg"
-                    }
-                  }
-                ],
-                [
-                  {
-                    "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."
-                  }
-                ]
-              ]
-            }
-          }
-        ],
-        "breadcrumb": null
-      }
-    }
-  }`
+  tableCaption: 'table caption',
+  tableContent: {
+    tableHead: [
+      [
+        {
+          text: '1. Learn why we study geology on Earth and other planets'
+        },
+        {
+          text: '1. Learn why we study geology on Earth and other planets'
+        }
+      ]
+    ],
+    tableBody: [
+      [
+        {
+          ...BlockImageData,
+          caption: '<p>My custom caption.</p>',
+          displayCaption: true,
+          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."
+        },
+        {
+          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."
+        }
+      ]
+    ]
+  }
 }
 
 export const BaseStory = {
   name: 'BlockRichTable',
   args: {
-    data: BlockRichTableData
+    table: BlockRichTableData
   }
 }
diff --git a/packages/vue/src/components/BlockRichTable/BlockRichTable.vue b/packages/vue/src/components/BlockRichTable/BlockRichTable.vue
index 0ef42ff4..40cd07e3 100644
--- a/packages/vue/src/components/BlockRichTable/BlockRichTable.vue
+++ b/packages/vue/src/components/BlockRichTable/BlockRichTable.vue
@@ -1,40 +1,19 @@
 <script lang="ts">
-// eslint-disable vue/no-v-html
-// @ts-nocheck
-import { defineComponent, computed } from 'vue'
-import BlockImage from './../BlockImage/BlockImage.vue'
+import { defineComponent } from 'vue'
+import BlockImageStandard from './../BlockImage/BlockImageStandard.vue'
+import BlockText from './../BlockText/BlockText.vue'
 
 export default defineComponent({
   name: 'BlockRichTable',
+  components: {
+    BlockImageStandard,
+    BlockText
+  },
   props: {
-    data: {
+    table: {
       type: Object,
       required: true
     }
-  },
-  setup(props) {
-    // Parse the table data from the JSON string
-    const parsedData = computed(() => {
-      try {
-        return JSON.parse(props.data.table)
-      } catch (error) {
-        console.error('Error parsing table data:', error)
-        return null
-      }
-    })
-
-    // Extract the relevant table block
-    const table = computed(() => {
-      if (!parsedData.value || !parsedData.value.data.page.body) {
-        return null
-      }
-
-      return parsedData.value.data.page.body.find((block) => block.blockType === 'RichTableBlock')
-    })
-
-    return {
-      table
-    }
   }
 })
 </script>
@@ -42,13 +21,13 @@ export default defineComponent({
 <template>
   <div
     v-if="table"
-    class="BlockRichTable"
+    class="BlockRichTable BlockText -small text-body-sm"
   >
     <div class="overflow-x-auto scrolling-touch max-w-screen-3xl mx-auto">
       <table
         class="min-w-full border-gray-light-mid w-full border-t border-b border-collapse table-auto"
       >
-        <thead>
+        <thead v-if="table.tableContent.tableHead?.length">
           <tr>
             <th
               v-for="(headCell, headIndex) in table.tableContent.tableHead[0]"
@@ -60,7 +39,7 @@ export default defineComponent({
             </th>
           </tr>
         </thead>
-        <tbody>
+        <tbody v-if="table.tableContent.tableBody?.length">
           <tr
             v-for="(row, rowIndex) in table.tableContent.tableBody"
             :key="rowIndex"
@@ -68,43 +47,39 @@ 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 p-0"
+              class="min-w-72 sm:min-w-80 bg-white text-gray-dark border-gray-light-mid"
             >
               <template v-if="cell.blockType === 'CharBlock'">
-                <p class="text-sm text-left my-2 px-3 lg:px-5">
+                <p class="">
                   {{ cell.value }}
                 </p>
               </template>
               <template v-else-if="cell.blockType === 'RichTextBlock'">
-                <div class="text-xs text-left my-2 px-3 lg:px-5">{{ cell.value }}</div>
+                <BlockText
+                  variant="small"
+                  :text="cell.value"
+                />
               </template>
               <template v-else-if="cell.blockType === 'ImageBlock'">
-                <BlockImage
-                  :data="cell.value"
-                  :full-bleed="true"
-                ></BlockImage>
-                <figure>
-                  <img
-                    :src="cell.image.url"
-                    :alt="cell.image.caption"
-                    class="w-full h-auto"
-                  />
-                  <figcaption class="text-xs text-left my-2 px-3 lg:px-5">
-                    {{ cell.image.caption }}
-                  </figcaption>
-                </figure>
+                <BlockImageStandard
+                  class=""
+                  :data="cell.image"
+                  :display-caption="cell.displayCaption"
+                  :caption="cell.caption"
+                  :constrain="cell.constrain"
+                />
               </template>
             </td>
           </tr>
         </tbody>
       </table>
-      <div class="flex w-full">
-        <caption class="text-center font-bold my-2 px-3 lg:px-5">
+      <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>
+      </template>
     </div>
   </div>
 </template>
diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
index 472cea4c..a3749340 100644
--- a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
+++ b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
@@ -188,7 +188,7 @@
         indent="col-3"
         class="lg:mb-18 mb-10"
       >
-        <BlockRichTable :data="block" />
+        <BlockRichTable :table="block" />
       </LayoutHelper>
 
       <LayoutHelper