scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add RTE Table

Browse Source
This commit is contained in:
Arvid Norlin
2024-08-05 15:56:26 +02:00
parent a5dbd38654
commit 4005701c79
3 changed files with 81 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/JsonToHtml/renderOptions.tsx
View File

@@ -4,6 +4,7 @@ import { insertResponseToImageVaultAsset } from "@/utils/imageVault"
import ImageContainer from "../ImageContainer"
import Divider from "../TempDesignSystem/Divider"
import Table, { TBody, TD, TH, THead, TR } from "../TempDesignSystem/Table"
import BiroScript from "../TempDesignSystem/Text/BiroScript"
import Body from "../TempDesignSystem/Text/Body"
import Caption from "../TempDesignSystem/Text/Caption"
@@ -375,9 +376,9 @@ export const renderOptions: RenderOptions = {
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<table key={node.uid} {...props}>
<Table key={node.uid} {...props}>
{next(node.children, embeds, fullRenderOptions)}
</table>
</Table>
)
},
@@ -387,11 +388,25 @@ export const renderOptions: RenderOptions = {
next: RTENext,
fullRenderOptions: RenderOptions
) => {
// Override the styling of p tags inside the thead tag
const theadChildPRenderOptions = {
...fullRenderOptions,
[RTETypeEnum.p]: (
node: RTEDefaultNode,
embeds: EmbedByUid,
next: RTENext,
fullRenderOptions: RenderOptions
) => (
<Body color={"burgundy"} textTransform={"bold"}>
{next(node.children, embeds, fullRenderOptions)}
</Body>
),
}
const props = extractPossibleAttributes(node.attrs)
return (
<thead key={node.uid} {...props}>
{next(node.children, embeds, fullRenderOptions)}
</thead>
<THead key={node.uid} {...props}>
{next(node.children, embeds, theadChildPRenderOptions)}
</THead>
)
},
@@ -403,9 +418,9 @@ export const renderOptions: RenderOptions = {
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<tbody key={node.uid} {...props}>
<TBody key={node.uid} {...props}>
{next(node.children, embeds, fullRenderOptions)}
</tbody>
</TBody>
)
},
@@ -440,9 +455,9 @@ export const renderOptions: RenderOptions = {
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<tr key={node.uid} {...props}>
<TR key={node.uid} {...props}>
{next(node.children, embeds, fullRenderOptions)}
</tr>
</TR>
)
},
@@ -454,9 +469,9 @@ export const renderOptions: RenderOptions = {
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<th key={node.uid} {...props}>
<TH key={node.uid} {...props}>
{next(node.children, embeds, fullRenderOptions)}
</th>
</TH>
)
},
@@ -468,9 +483,9 @@ export const renderOptions: RenderOptions = {
) => {
const props = extractPossibleAttributes(node.attrs)
return (
<td key={node.uid} {...props}>
<TD key={node.uid} {...props}>
{next(node.children, embeds, fullRenderOptions)}
</td>
</TD>
)
},

27
components/TempDesignSystem/Table/index.tsx Normal file
View File

@@ -0,0 +1,27 @@
import styles from "./table.module.css"
function Table({ children }: React.PropsWithChildren) {
return <table className={styles.table}>{children}</table>
}
export default Table
export function THead({ children }: React.PropsWithChildren) {
return <thead className={styles.thead}>{children}</thead>
}
export function TH({ children }: React.PropsWithChildren) {
return <th className={styles.th}>{children}</th>
}
export function TD({ children }: React.PropsWithChildren) {
return <td className={styles.td}>{children}</td>
}
export function TBody({ children }: React.PropsWithChildren) {
return <tbody className={styles.tbody}>{children}</tbody>
}
export function TR({ children }: React.PropsWithChildren) {
return <tr className={styles.tr}>{children}</tr>
}

26
components/TempDesignSystem/Table/table.module.css Normal file
View File

@@ -0,0 +1,26 @@
.table {
border-radius: var(--Corner-radius-Medium);
border-collapse: collapse;
overflow: hidden;
}
.thead {
background-color: var(--Base-Background-Secondary-Normal, #f7e1d5);
}
.tbody {
background-color: var(--Base-Surface-Primary-light-Normal, #fff);
}
.tr:not(:last-of-type) {
border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider, #f0c1b6);
}
.th {
padding: var(--Spacing-x2) var(--Spacing-x3);
text-align: left;
}
.td {
padding: var(--Spacing-x3);
}