feature: Rich Table Block (#561)

* Rich Table Block * WIP richTableBlock * finishing BlockRichTable --------- Co-authored-by: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
nasa-jpl · Sep 16, 2024 · a47044a · a47044a
1 parent 2a2bdb0
commit a47044a
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 0 deletions.
diff --git a/packages/common/src/scss/components/_BlockRichTable.scss b/packages/common/src/scss/components/_BlockRichTable.scss
@@ -0,0 +1,26 @@
+.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 align-top;
+    }
+  }
+}
diff --git a/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js b/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
@@ -0,0 +1,55 @@
+import BlockRichTable from './BlockRichTable.vue'
+import { BlockImageData } from './../BlockImage/BlockImage.stories'
+
+export default {
+  title: 'Components/Blocks/BlockRichTable',
+  component: BlockRichTable,
+  excludeStories: /.*Data$/
+}
+
+export const BlockRichTableData = {
+  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: [
+      [
+        {
+          ...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: {
+    table: BlockRichTableData
+  }
+}
diff --git a/packages/vue/src/components/BlockRichTable/BlockRichTable.vue b/packages/vue/src/components/BlockRichTable/BlockRichTable.vue
@@ -0,0 +1,89 @@
+<script lang="ts">
+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: {
+    table: {
+      type: Object,
+      required: true
+    }
+  }
+})
+</script>
+
+<template>
+  <div
+    v-if="table"
+    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 v-if="table.tableContent.tableHead?.length">
+          <tr>
+            <th
+              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"
+            >
+              {{ headCell.text }}
+            </th>
+          </tr>
+        </thead>
+        <tbody v-if="table.tableContent.tableBody?.length">
+          <tr
+            v-for="(row, rowIndex) in table.tableContent.tableBody"
+            :key="rowIndex"
+          >
+            <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"
+            >
+              <template v-if="cell.blockType === 'CharBlock'">
+                <p class="">
+                  {{ cell.value }}
+                </p>
+              </template>
+              <template v-else-if="cell.blockType === 'RichTextBlock'">
+                <BlockText
+                  variant="small"
+                  :text="cell.value"
+                />
+              </template>
+              <template v-else-if="cell.blockType === 'ImageBlock'">
+                <BlockImageStandard
+                  class=""
+                  :data="cell.image"
+                  :display-caption="cell.displayCaption"
+                  :caption="cell.caption"
+                  :constrain="cell.constrain"
+                />
+              </template>
+            </td>
+          </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>
+  </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
@@ -182,6 +182,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 :table="block" />
+      </LayoutHelper>
+
       <LayoutHelper
         v-else-if="block.blockType == 'RelatedLinksBlock'"
         :key="`relatedLinksBlock${index}`"
@@ -269,6 +278,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 BlockIframeEmbed from './../BlockIframeEmbed/BlockIframeEmbed.vue'
@@ -308,6 +318,7 @@ export default defineComponent({
     BlockQuote,
     BlockRelatedLinks,
     BlockTable,
+    BlockRichTable,
     BlockTeaser,
     BlockText,
     BlockIframeEmbed,