diff --git a/packages/common/src/scss/components/_BlockRichTable.scss b/packages/common/src/scss/components/_BlockRichTable.scss index 76e33e56..bf4ca996 100644 --- 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 index c7b574e2..b444868b 100644 --- a/packages/vue/src/components/BlockRichTable/BlockRichTable.vue +++ b/packages/vue/src/components/BlockRichTable/BlockRichTable.vue @@ -25,15 +25,24 @@ export default defineComponent({ >
+ @@ -47,7 +56,7 @@ export default defineComponent({
+ {{ + table.tableCaption + }} +
{{ headCell.text }} diff --git a/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js b/packages/vue/src/components/BlockStreamfield/BlockStreamfield.stories.js index da235da7..46760d43 100644 --- 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: '

My custom caption.

', + displayCaption: true, + blockType: 'ImageBlock' + } + ], + [ + { + blockType: 'RichTextBlock', + value: + '

Rich text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae justo quis justo malesuada molestie. Cras sed tincidunt dui.

\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',