Skip to content
This repository was archived by the owner on Mar 4, 2024. It is now read-only.

Commit c683508

Browse files
authored
Merge pull request #1 from ecmwf-projects/COPDS-1308
Copds 1308
2 parents dc23519 + 6978232 commit c683508

File tree

9 files changed

+17017
-1712
lines changed

9 files changed

+17017
-1712
lines changed
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react'
2+
import { render, screen } from '@testing-library/react'
3+
4+
import { HtmlBlock } from '../../../src/components'
5+
6+
describe('type html', () => {
7+
it('it renders correctly', () => {
8+
render(
9+
<HtmlBlock
10+
block={{
11+
type: 'html',
12+
id: 'test-id-1',
13+
content:
14+
'<div>This is a raw HTML</div><p>With more HTML</p>',
15+
}}
16+
/>,
17+
)
18+
19+
screen.getByText('This is a raw HTML')
20+
screen.getByText('With more HTML')
21+
})
22+
it('it renders correctly without content', () => {
23+
render(
24+
<HtmlBlock
25+
block={{
26+
type: 'html',
27+
id: 'test-id-1',
28+
content: null as unknown as string,
29+
}}
30+
/>,
31+
)
32+
})
33+
})

package-lock.json

Lines changed: 6988 additions & 1709 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@ecmwf-projects/cads-blocks-library",
33
"description": "CADS Blocks library for webportal",
44
"private": false,
5-
"version": "1.0.1",
5+
"version": "2.0.0-0",
66
"repository": {
77
"type": "git",
88
"url": "[email protected]:ecmwf-projects/cads-blocks-library.git"
@@ -23,7 +23,7 @@
2323
"build": "tsc",
2424
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
2525
"lint:fix": "eslint --fix 'src/**/*.{jsx,ts,tsx}'",
26-
"format": "prettier --write src//**/*.{ts,tsx,css} --config ./.prettierrc",
26+
"format": "prettier --write src//**/*.{ts,tsx} --config ./.prettierrc",
2727
"preview": "vite preview",
2828
"prepare": "husky install",
2929
"lint-staged": "npm run lint && npm run format",
@@ -36,6 +36,7 @@
3636
"devDependencies": {
3737
"@babel/preset-env": "^7.22.9",
3838
"@babel/preset-react": "^7.22.5",
39+
"@ladle/react": "^3.2.2",
3940
"@rollup/plugin-typescript": "^11.1.2",
4041
"@testing-library/dom": "^9.3.1",
4142
"@testing-library/jest-dom": "^5.17.0",

src/components/GenerateBlocks.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,15 @@ import {
2222
ButtonBlockInterface,
2323
LayoutSectionBlocksMix,
2424
MarkdownBlockInterface,
25+
HtmlBlockInteface,
2526
} from '../models'
27+
import { HtmlBlock } from './blocks/HtmlBlock'
2628

2729
const generateBlockByType = {
2830
['markdown']: (block: MarkdownBlockInterface, markdownParsingOptions: MarkdownToJSX.Options) => (
2931
<MarkdownBlock block={block} markdownParsingOptions={markdownParsingOptions} />
3032
),
33+
['html']: (block: HtmlBlockInteface) => <HtmlBlock block={block} />,
3134
['table']: (block: TableBlock) => <Table block={block} />,
3235
['thumb-markdown']: (
3336
block: ThumbMarkdownBlock,
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react'
2+
import { HtmlBlock } from './HtmlBlock';
3+
4+
export const HtmlBlockStory = () => (<div style={
5+
{
6+
width: '100%',
7+
height: '100%',
8+
}
9+
}>
10+
<HtmlBlock
11+
block={{
12+
'id': 'html',
13+
'type': 'html',
14+
'content': `<div>This is an HTML</div> <b>inside</b> <p>an HTML block</p>`
15+
}}
16+
/>
17+
</div>);

src/components/blocks/HtmlBlock.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react'
2+
3+
import styled from 'styled-components'
4+
5+
import { HtmlBlockInteface, } from '../../models'
6+
7+
export const HtmlBlock = ({
8+
block,
9+
}: {
10+
block: HtmlBlockInteface
11+
}) => (
12+
<Content data-stylizable="block html-content">
13+
{block?.content && (
14+
<ContentWrapper dangerouslySetInnerHTML={{ __html: block.content }} />
15+
)}
16+
</Content>
17+
)
18+
19+
const Content = styled.div`
20+
display: flex;
21+
margin: 0;
22+
flex-direction: column;
23+
justify-content: flex-start;
24+
`
25+
26+
const ContentWrapper = styled.div`
27+
width: 100%;
28+
height: 100%;
29+
`

src/components/blocks/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@ export * from './LinkBlock'
44
export * from './Markdown'
55
export * from './Section'
66
export * from './Table'
7+
export * from './HtmlBlock'
78
export * from './ThumbMarkdown'

src/models/datasets.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export enum LayoutBlockTypes {
33
'button',
44
'link',
55
'markdown',
6+
'html',
67
'section',
78
'table',
89
'thumb-markdown',
@@ -17,6 +18,10 @@ export interface MarkdownBlockInterface extends GenericBlock {
1718
content: string
1819
}
1920

21+
export interface HtmlBlockInteface extends GenericBlock {
22+
content: string
23+
}
24+
2025
export type TableBlockHeadings = {
2126
id: string
2227
label: string
@@ -38,7 +43,7 @@ export interface TableBlock extends GenericBlock {
3843
export interface SectionBlock extends GenericBlock {
3944
title: string
4045
open: boolean
41-
blocks: (MarkdownBlockInterface | LinkBlockInterface | ButtonBlockInterface)[]
46+
blocks: (HtmlBlockInteface | MarkdownBlockInterface | LinkBlockInterface | ButtonBlockInterface)[]
4247
}
4348

4449
export type ImageThumb = {
@@ -79,6 +84,7 @@ export interface ButtonBlockInterface extends GenericBlock {
7984

8085
export type LayoutSectionBlock =
8186
| MarkdownBlockInterface
87+
| HtmlBlockInteface
8288
| TableBlock
8389
| ThumbMarkdownBlock
8490
| LinkBlockInterface
@@ -88,6 +94,7 @@ export type LayoutSectionBlock =
8894

8995
export type LayoutSectionBlocksMix = MarkdownBlockInterface &
9096
TableBlock &
97+
HtmlBlockInteface &
9198
ThumbMarkdownBlock &
9299
LinkBlockInterface &
93100
SectionBlock &

0 commit comments

Comments
 (0)