fix: EDU BlockRichTable adjustments (#633)

* changing edu table header color * adjusting min width settings for blocks inside BlockRichTable
nasa-jpl · Sep 24, 2024 · 59a8292 · 59a8292
1 parent 5270d82
commit 59a8292
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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="">