Skip to content

Commit

Permalink
finishing BlockRichTable
Browse files Browse the repository at this point in the history
  • Loading branch information
@stephiescastle
stephiescastle committed Sep 16, 2024
1 parent 4a5671e commit b14478e
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 143 deletions.
42 changes: 5 additions & 37 deletions packages/common/src/scss/components/_BlockRichTable.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
// needed to @extend .BlockText
@import '@explorer-1/common/src/scss/components/BlockText';

.BlockRichTable {
table {
@apply border-gray-light-mid border-t border-b border-collapse w-full;
Expand All @@ -18,41 +15,12 @@
@apply text-gray-dark;
}

tbody tr {
@apply table-row bg-white border-t border-gray-light-mid;
}

.rich_text,
.link {
@extend .BlockText;
}
// Below selectors are extra-specific to ensure they take priority over the @extend-ed .BlockText styles.
td.rich_text p {
@apply mb-4;
}

td.rich_text ol {
@apply pl-6 mb-4;
}

td.rich_text ul {
@apply pl-6 mb-4 list-disc;

li {
@apply p-0;
tbody {
tr {
@apply table-row bg-white border-t border-gray-light-mid;
}

li::before {
@apply hidden;
td {
@apply p-3 lg:p-5 align-top;
}
}

td.rich_text ul li,
td.rich_text ol li {
@apply my-1;
}

td.rich_text hr {
@apply my-4;
}
}
91 changes: 38 additions & 53 deletions packages/vue/src/components/BlockRichTable/BlockRichTable.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import BlockRichTable from './BlockRichTable.vue'
import { BlockImageData } from './../BlockImage/BlockImage.stories'

export default {
title: 'Components/Blocks/BlockRichTable',
Expand All @@ -8,63 +9,47 @@ export default {

export const BlockRichTableData = {
blockType: 'RichTableBlock',
table: `{ "data": {
"page": {
"body": [
{
"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": [
[
{
"blockType": "ImageBlock",
"image": {
"caption": "NASA astronaut Kate Rubins uses a hand lens to observe the minerals present in a rock while taking part in the European Space Agency's PANGAEA geology training. Image credit: ESA–A. Romeo",
"url": "https://imagecache.jpl.nasa.gov/images/edu/activities/ediblerocks_learn_main-640x350.jpg"
}
},
{
"blockType": "ImageBlock",
"image": {
"caption": "NASA astronaut Kate Rubins uses a hand lens to observe the minerals present in a rock while taking part in the European Space Agency's PANGAEA geology training. Image credit: ESA–A. Romeo",
"url": "https://imagecache.jpl.nasa.gov/images/edu/activities/ediblerocks_learn_main-640x350.jpg"
}
}
],
[
{
"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."
}
]
]
}
}
],
"breadcrumb": null
}
}
}`
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: '<p>My custom caption.</p>',
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: {
data: BlockRichTableData
table: BlockRichTableData
}
}
79 changes: 27 additions & 52 deletions packages/vue/src/components/BlockRichTable/BlockRichTable.vue
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,33 @@
<script lang="ts">
// eslint-disable vue/no-v-html
// @ts-nocheck
import { defineComponent, computed } from 'vue'
import BlockImage from './../BlockImage/BlockImage.vue'
import { defineComponent } from 'vue'
import BlockImageStandard from './../BlockImage/BlockImageStandard.vue'
import BlockText from './../BlockText/BlockText.vue'
export default defineComponent({
name: 'BlockRichTable',
components: {
BlockImageStandard,
BlockText
},
props: {
data: {
table: {
type: Object,
required: true
}
},
setup(props) {
// Parse the table data from the JSON string
const parsedData = computed(() => {
try {
return JSON.parse(props.data.table)
} catch (error) {
console.error('Error parsing table data:', error)
return null
}
})
// Extract the relevant table block
const table = computed(() => {
if (!parsedData.value || !parsedData.value.data.page.body) {
return null
}
return parsedData.value.data.page.body.find((block) => block.blockType === 'RichTableBlock')
})
return {
table
}
}
})
</script>

<template>
<div
v-if="table"
class="BlockRichTable"
class="BlockRichTable BlockText -small text-body-sm"
>
<div class="overflow-x-auto scrolling-touch max-w-screen-3xl mx-auto">
<table
class="min-w-full border-gray-light-mid w-full border-t border-b border-collapse table-auto"
>
<thead>
<thead v-if="table.tableContent.tableHead?.length">
<tr>
<th
v-for="(headCell, headIndex) in table.tableContent.tableHead[0]"
Expand All @@ -60,51 +39,47 @@ export default defineComponent({
</th>
</tr>
</thead>
<tbody>
<tbody v-if="table.tableContent.tableBody?.length">
<tr
v-for="(row, rowIndex) in table.tableContent.tableBody"
:key="rowIndex"
>
<td
v-for="(cell, cellIndex) in row"
:key="cellIndex"
class="min-w-72 sm:min-w-80 bg-white text-gray-dark border-gray-light-mid p-0"
class="min-w-72 sm:min-w-80 bg-white text-gray-dark border-gray-light-mid"
>
<template v-if="cell.blockType === 'CharBlock'">
<p class="text-sm text-left my-2 px-3 lg:px-5">
<p class="">
{{ cell.value }}
</p>
</template>
<template v-else-if="cell.blockType === 'RichTextBlock'">
<div class="text-xs text-left my-2 px-3 lg:px-5">{{ cell.value }}</div>
<BlockText
variant="small"
:text="cell.value"
/>
</template>
<template v-else-if="cell.blockType === 'ImageBlock'">
<BlockImage
:data="cell.value"
:full-bleed="true"
></BlockImage>
<figure>
<img
:src="cell.image.url"
:alt="cell.image.caption"
class="w-full h-auto"
/>
<figcaption class="text-xs text-left my-2 px-3 lg:px-5">
{{ cell.image.caption }}
</figcaption>
</figure>
<BlockImageStandard
class=""
:data="cell.image"
:display-caption="cell.displayCaption"
:caption="cell.caption"
:constrain="cell.constrain"
/>
</template>
</td>
</tr>
</tbody>
</table>
<div class="flex w-full">
<caption class="text-center font-bold my-2 px-3 lg:px-5">
<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>
</template>
</div>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion packages/vue/src/components/BlockStreamfield/BlockStreamfield.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@
indent="col-3"
class="lg:mb-18 mb-10"
>
<BlockRichTable :data="block" />
<BlockRichTable :table="block" />
</LayoutHelper>

<LayoutHelper
Expand Down

0 comments on commit b14478e

Please sign in to comment.