From 59a82922dea96d161e5699600fcda7f2500e0012 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephiescastle@users.noreply.github.com>
Date: Tue, 24 Sep 2024 11:20:12 -0700
Subject: [PATCH] fix: EDU BlockRichTable adjustments (#633)

* changing edu table header color

* adjusting min width settings for blocks inside BlockRichTable
---
 .../src/scss/components/_BlockRichTable.scss  |  7 ++
 .../BlockRichTable/BlockRichTable.stories.js  | 94 +++++++++++++++++++
 .../BlockRichTable/BlockRichTable.vue         |  4 +-
 3 files changed, 103 insertions(+), 2 deletions(-)

diff --git a/packages/common/src/scss/components/_BlockRichTable.scss b/packages/common/src/scss/components/_BlockRichTable.scss
index cdf51c71..76e33e56 100644
--- a/packages/common/src/scss/components/_BlockRichTable.scss
+++ b/packages/common/src/scss/components/_BlockRichTable.scss
@@ -23,4 +23,11 @@
       @apply p-3 lg:p-5 align-top;
     }
   }
+  .BlockImageStandard,
+  .BlockText {
+    @apply min-w-[12rem] lg:min-w-[15rem];
+    .caption-area {
+      @apply pt-2;
+    }
+  }
 }
diff --git a/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js b/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
index aa8ade59..78189b4d 100644
--- a/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
+++ b/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
@@ -72,3 +72,97 @@ export const BaseStory = {
     table: BlockRichTableData
   }
 }
+export const MixedColumnWidths = {
+  args: {
+    table: {
+      blockType: 'RichTableBlock',
+      tableCaption:
+        'Ut dapibus cursus quam, non dapibus diam pellentesque ac. Maecenas ultrices porta dui eget placerat. Curabitur ornare congue interdum.',
+      tableContent: {
+        tableHead: [
+          [
+            {
+              text: 'Image'
+            },
+            {
+              text: 'Type'
+            },
+            {
+              text: 'Description'
+            }
+          ]
+        ],
+        tableBody: [
+          [
+            {
+              ...BlockImageData,
+              caption: '<p>Custom ImageCaption</p>',
+              displayCaption: true,
+              blockType: 'ImageBlock'
+            },
+            {
+              blockType: 'CharBlock',
+              value: 'Internal'
+            },
+            {
+              blockType: 'RichTextBlock',
+              value:
+                '<p>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'
+            }
+          ],
+          [
+            {
+              ...BlockImageData,
+              caption: '<p>Custom ImageCaption</p>',
+              displayCaption: true,
+              blockType: 'ImageBlock'
+            },
+            {
+              blockType: 'CharBlock',
+              value: 'External'
+            },
+            {
+              blockType: 'RichTextBlock',
+              value:
+                '<p>Morbi pretium, massa non convallis facilisis, lectus eros vulputate turpis, et imperdiet eros metus eu enim. Cras consequat iaculis leo eget auctor. Sed bibendum, nulla vel ultricies aliquam, augue mauris sagittis massa, nec malesuada massa justo id sem. In hac habitasse platea dictumst. Sed ullamcorper bibendum libero vitae pellentesque.</p>\n'
+            }
+          ],
+          [
+            {
+              ...BlockImageData,
+              caption: '<p>Custom ImageCaption</p>',
+              displayCaption: false,
+              blockType: 'ImageBlock'
+            },
+            {
+              blockType: 'CharBlock',
+              value: 'N/A'
+            },
+            {
+              blockType: 'RichTextBlock',
+              value:
+                '<p>Maecenas vel dapibus ligula, pretium <a href="#">dictum est</a>. Proin venenatis massa vulputate <strong>est rhoncus</strong>, sed ornare ex sagittis. Donec iaculis magna in rhoncus malesuada.</p>\n'
+            }
+          ],
+          [
+            {
+              ...BlockImageData,
+              caption: '<p>Custom ImageCaption</p>',
+              displayCaption: true,
+              blockType: 'ImageBlock'
+            },
+            {
+              blockType: 'CharBlock',
+              value: 'Internal'
+            },
+            {
+              blockType: 'RichTextBlock',
+              value:
+                '<p>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'
+            }
+          ]
+        ]
+      }
+    }
+  }
+}
diff --git a/packages/vue/src/components/BlockRichTable/BlockRichTable.vue b/packages/vue/src/components/BlockRichTable/BlockRichTable.vue
index 84bdd199..c7b574e2 100644
--- a/packages/vue/src/components/BlockRichTable/BlockRichTable.vue
+++ b/packages/vue/src/components/BlockRichTable/BlockRichTable.vue
@@ -33,7 +33,7 @@ export default defineComponent({
               v-for="(headCell, headIndex) in table.tableContent.tableHead[0]"
               :key="headIndex"
               scope="col"
-              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"
+              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"
             >
               {{ headCell.text }}
             </th>
@@ -47,7 +47,7 @@ export default defineComponent({
             <td
               v-for="(cell, cellIndex) in row"
               :key="cellIndex"
-              class="min-w-[12rem] bg-white text-gray-dark border-gray-light-mid"
+              class="min-w-[6rem] bg-white text-gray-dark border-gray-light-mid"
             >
               <template v-if="cell.blockType === 'CharBlock'">
                 <p class="">