diff --git a/packages/common/src/scss/components/_BlockRichTable.scss b/packages/common/src/scss/components/_BlockRichTable.scss new file mode 100644 index 00000000..cdf51c71 --- /dev/null +++ b/packages/common/src/scss/components/_BlockRichTable.scss @@ -0,0 +1,26 @@ +.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; + } + } +} diff --git a/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js b/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js new file mode 100644 index 00000000..c6b85ce3 --- /dev/null +++ b/packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js @@ -0,0 +1,55 @@ +import BlockRichTable from './BlockRichTable.vue' +import { BlockImageData } from './../BlockImage/BlockImage.stories' + +export default { + title: 'Components/Blocks/BlockRichTable', + component: BlockRichTable, + excludeStories: /.*Data$/ +} + +export const BlockRichTableData = { + blockType: 'RichTableBlock', + tableCaption: 'table caption', + tableContent: { + tableHead: [ + [ + { + text: '1. Learn why we study geology on Earth and other planets' + }, + { + text: '1. Learn why we study geology on Earth and other planets' + } + ] + ], + tableBody: [ + [ + { + ...BlockImageData, + caption: '
My custom caption.
', + displayCaption: true, + 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." + }, + { + 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." + } + ] + ] + } +} + +export const BaseStory = { + name: 'BlockRichTable', + args: { + table: BlockRichTableData + } +} diff --git a/packages/vue/src/components/BlockRichTable/BlockRichTable.vue b/packages/vue/src/components/BlockRichTable/BlockRichTable.vue new file mode 100644 index 00000000..40cd07e3 --- /dev/null +++ b/packages/vue/src/components/BlockRichTable/BlockRichTable.vue @@ -0,0 +1,89 @@ + + + ++ {{ headCell.text }} + | +
---|
+
+ + {{ cell.value }} + + + + |
+