fix: rich table block (#627)

* removing BlockTable, adjusting width of BlockRichTable

* making rich table full width in student project steps

* fixing vue build

packages/common/src/scss/_components.scss

@@ -13,7 +13,6 @@
   @import 'components/BlockInlineImage';
   @import 'components/BlockKeyPoints';
   @import 'components/BlockQuote';
-  @import 'components/BlockTable';
   @import 'components/BlockTeaser';
   @import 'components/BlockText';
   @import 'components/BlockVideoEmbed';

packages/vue/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,

packages/vue/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' }
       ]
     ]
   }

packages/vue/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>
 

packages/vue/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'
   }
 }

packages/vue/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]
     },