fix: markup for table caption (#636)

* fixing markup for table caption * moving SCSS back to common
nasa-jpl · Sep 25, 2024 · dc574d9 · dc574d9
1 parent 2aaaf07
commit dc574d9
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 32 deletions.
diff --git a/packages/common/src/scss/components/_BlockRichTable.scss b/packages/common/src/scss/components/_BlockRichTable.scss
@@ -1,28 +1,4 @@
 .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;
-    }
-  }
   .BlockImageStandard,
   .BlockText {
     @apply min-w-[12rem] lg:min-w-[15rem];

diff --git a/packages/vue/src/components/BlockRichTable/BlockRichTable.vue b/packages/vue/src/components/BlockRichTable/BlockRichTable.vue
@@ -25,15 +25,24 @@ export default defineComponent({
   >
     <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"
+        v-if="table.tableContent"
+        class="min-w-full border-gray-light-mid w-full border-t border-b border-collapse table-auto m-0 p-0"
       >
+        <caption
+          v-if="table.tableCaption"
+          class="sr-only"
+        >
+          {{
+            table.tableCaption
+          }}
+        </caption>
         <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-[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"
+              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 text-left"
             >
               {{ headCell.text }}
             </th>
@@ -47,7 +56,7 @@ export default defineComponent({
             <td
               v-for="(cell, cellIndex) in row"
               :key="cellIndex"
-              class="min-w-[6rem] bg-white text-gray-dark border-gray-light-mid"
+              class="min-w-[6rem] bg-white text-gray-dark border-gray-light-mid lg:p-5 p-3 align-top"
             >
               <template v-if="cell.blockType === 'CharBlock'">
                 <p class="">
@@ -75,11 +84,12 @@ export default defineComponent({
       </table>
     </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>
+      <div
+        class="max-w-screen-3xl mx-auto block text-left px-0 text-gray-mid-dark text-body-sm mt-4"
+        aria-hidden
+      >
+        {{ table.tableCaption }}
+      </div>
     </template>
   </div>
 </template>

diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js
@@ -16,6 +16,7 @@ import { BlockTeaserData } from './../BlockTeaser/BlockTeaser.stories'
 import { BlockIframeEmbedData } from './../BlockIframeEmbed/BlockIframeEmbed.stories'
 import { BlockVideoData } from './../BlockVideo/BlockVideo.stories'
 import { BlockVideoEmbedData } from './../BlockVideoEmbed/BlockVideoEmbed.stories'
+import { MixedColumnWidths } from './../BlockRichTable/BlockRichTable.stories'
 import BlockStreamfield, { variants } from './BlockStreamfield.vue'
 
 export default {
@@ -127,6 +128,45 @@ export const BlockStreamfieldData = {
       alignTo: 'left'
     },
     BlockRichTableData,
+    MixedColumnWidths.args.table,
+    {
+      blockType: 'RichTableBlock',
+      tableCaption: 'table caption',
+      tableContent: {
+        tableHead: [
+          [
+            {
+              text: '1. Learn'
+            }
+          ]
+        ],
+        tableBody: [
+          [
+            {
+              ...BlockImageData,
+              caption: '<p>My custom caption.</p>',
+              displayCaption: true,
+              blockType: 'ImageBlock'
+            }
+          ],
+          [
+            {
+              blockType: 'RichTextBlock',
+              value:
+                '<p>Rich text. 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'
+            }
+          ],
+
+          [
+            {
+              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: 'ListBlock',
       field: 'card_grid',