@@ -135,7 +100,7 @@ exports[`sortTags should match a snapshot and be of correct type for the returne exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag h1 1`] = `Test Text
@@ -144,7 +109,7 @@ exports[`sortTags should match a snapshot and be of correct type for the returne exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag h2 1`] = `Test Text
@@ -152,7 +117,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag hr 1`] = `
@@ -160,7 +124,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag i 1`] = ` @@ -170,7 +133,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag li 1`] = `@@ -180,7 +142,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag ol 1`] = ` @@ -190,7 +151,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag p 1`] = `
@@ -200,7 +160,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag pre 1`] = `
@@ -210,7 +169,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag u 1`] = ` @@ -220,7 +178,6 @@ exports[`sortTags should match a snapshot and be of correct type for the returne exports[`sortTags should match a snapshot and be of correct type for the returned component from domTag ul 1`] = `diff --git a/packages/elements/src/components/HtmlRender/__tests__/index.tsx b/packages/elements/src/components/HtmlRender/__tests__/index.tsx index d22d8d1080..6a1142be31 100644 --- a/packages/elements/src/components/HtmlRender/__tests__/index.tsx +++ b/packages/elements/src/components/HtmlRender/__tests__/index.tsx @@ -122,11 +122,11 @@ describe('getChildren', () => { describe('getAttributes', () => { it('should get the tag attributes if there are any, kill any styles add an index as key', () => { - const attributes = { - style: 'width: 100px', - id: 'my-id', - src: 'some-src', - } + const attributes = [ + { key: 'id', value: 'my-id' }, + { key: 'src', value: 'some-src' }, + { key: 'style', value: 'width: "10px"' }, + ] const index = 0 const expected = { id: 'my-id', diff --git a/packages/elements/src/components/HtmlRender/html-render.stories.tsx b/packages/elements/src/components/HtmlRender/html-render.stories.tsx index 92c40bcac3..82228ec3c2 100644 --- a/packages/elements/src/components/HtmlRender/html-render.stories.tsx +++ b/packages/elements/src/components/HtmlRender/html-render.stories.tsx @@ -5,6 +5,7 @@ import { HTMLRender } from '.' const html = `
heading h1
heading h2
+ Bold with entitiesbold@@ -12,6 +13,7 @@ const html = `underlinepre tagstrike+
- bullet points
diff --git a/packages/elements/src/components/HtmlRender/index.tsx b/packages/elements/src/components/HtmlRender/index.tsx index f864cf7b7f..7f12b3b6b9 100644 --- a/packages/elements/src/components/HtmlRender/index.tsx +++ b/packages/elements/src/components/HtmlRender/index.tsx @@ -9,7 +9,11 @@ export interface HTMLRenderProps { className?: string } -export const HTMLRender: React.SFC= ({ html, diffing = false, className = '' }: HTMLRenderProps) => { +export const HTMLRender: React.SFC = ({ + html, + diffing = false, + className = 'html-render', +}: HTMLRenderProps) => { const jsonElements = parse(html) return {renderer(jsonElements, diffing)} } diff --git a/packages/elements/src/components/HtmlRender/utils.tsx b/packages/elements/src/components/HtmlRender/utils.tsx index ce15a4887b..689448df93 100644 --- a/packages/elements/src/components/HtmlRender/utils.tsx +++ b/packages/elements/src/components/HtmlRender/utils.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { H4, H5 } from '../Typography' +import { H4, H5, H6 } from '../Typography' export interface Element { type: string @@ -10,7 +10,10 @@ export interface Element { } const sortContentType = (domItem: Element, index: number, diffing: boolean) => { - return domItem.type === 'text' ? domItem.content || null : rendererModule.sortTags(domItem, index, diffing) + // using DOMParse to parse HTML entities like + return domItem.type === 'text' + ? new DOMParser().parseFromString(domItem.content || '', 'text/html').documentElement.textContent || null + : rendererModule.sortTags(domItem, index, diffing) } const getChildren = (domTag: Element, diffing: boolean) => { @@ -20,8 +23,16 @@ const getChildren = (domTag: Element, diffing: boolean) => { } const getAttributes = (domTag: Element, index: number) => { - const attributes = domTag.attributes || {} - return { ...attributes, style: {}, key: index } + const attributes = domTag.attributes || [] + // convert to react-compatible props + const reactPropsAttributes = Array.from(attributes as { [key: string]: any }[]).reduce( + (acc, { key, value }) => ({ + ...acc, + [key]: value, + }), + {}, + ) + return { ...reactPropsAttributes, key: index, style: {} } } const sortTags = (domTag: Element, index: number, diffing: boolean) => { @@ -34,7 +45,11 @@ const sortTags = (domTag: Element, index: number, diffing: boolean) => { case 'p': return{children}
case 'a': - return {children} + return ( + + {children} + + ) case 'b': return {children} case 'u': @@ -49,6 +64,8 @@ const sortTags = (domTag: Element, index: number, diffing: boolean) => { return{children}
case 'h2': return{children}
+ case 'h6': + return{children}
case 'i': return {children} case 'strike': diff --git a/packages/elements/src/styles/components/html-render.scss b/packages/elements/src/styles/components/html-render.scss new file mode 100644 index 0000000000..35e81491b7 --- /dev/null +++ b/packages/elements/src/styles/components/html-render.scss @@ -0,0 +1,20 @@ +@import '../base/colors.scss'; + +.html-render { + & a { + color: $reapit-mid-blue; + font-weight: bold; + } + & ul, + & ol { + margin-top: 0; + margin-left: 0; + list-style-position: inside; + & li div { + display: inline-block; + } + } + & p { + margin: 1rem 0; + } +} diff --git a/packages/elements/src/styles/index.scss b/packages/elements/src/styles/index.scss index 44c31a0e4e..eea8b5b1b1 100644 --- a/packages/elements/src/styles/index.scss +++ b/packages/elements/src/styles/index.scss @@ -32,3 +32,4 @@ @import './components/notification.scss'; @import './components/upload-progress.scss'; @import './components/dropdown-select.scss'; +@import './components/html-render.scss'; diff --git a/packages/elements/src/styles/vendor/pell.scss b/packages/elements/src/styles/vendor/pell.scss index 6278003435..158d8008a9 100644 --- a/packages/elements/src/styles/vendor/pell.scss +++ b/packages/elements/src/styles/vendor/pell.scss @@ -14,6 +14,7 @@ $pell-content-padding: 10px !default; border-radius: 0; overflow: hidden; color: $black; + height: 180px; &--is-danger { border: 1px solid $reapit-red; @@ -24,6 +25,8 @@ $pell-content-padding: 10px !default; outline: none; padding: $pell-content-padding; min-height: $pell-content-height; + height: 75%; + overflow-y: scroll; box-sizing: border-box; background-color: $white; @@ -31,11 +34,20 @@ $pell-content-padding: 10px !default; box-shadow: 0 0 0 0.125em rgba(35, 164, 222, 0.25); } + p { + margin: 1rem 0; + } + + a { + color: $reapit-mid-blue; + font-weight: bold; + } + h1 { display: block; - font-size: 2em; - margin-block-start: 0.67em; - margin-block-end: 0.67em; + font-size: 3rem; + margin-block-start: 0.67rem; + margin-block-end: 0.67rem; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; @@ -43,9 +55,19 @@ $pell-content-padding: 10px !default; h2 { display: block; - font-size: 1.5em; - margin-block-start: 0.83em; - margin-block-end: 0.83em; + font-size: 2.5rem; + margin-block-start: 0.83rem; + margin-block-end: 0.83rem; + margin-inline-start: 0px; + margin-inline-end: 0px; + font-weight: bold; + } + + h6 { + display: block; + font-size: 1rem; + margin-block-start: 0.83rem; + margin-block-end: 0.83rem; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; @@ -66,6 +88,8 @@ $pell-content-padding: 10px !default; background-color: $white; border-bottom: 1px solid $grey; padding-left: 8px; + min-height: $pell-button-height; + height: 25%; } .pell-button { diff --git a/packages/elements/src/tests/badges/badge-branches.svg b/packages/elements/src/tests/badges/badge-branches.svg index 83425e4d6d..f06a38b897 100644 --- a/packages/elements/src/tests/badges/badge-branches.svg +++ b/packages/elements/src/tests/badges/badge-branches.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/packages/elements/src/tests/badges/badge-functions.svg b/packages/elements/src/tests/badges/badge-functions.svg index 873b73dc00..85e1e96737 100644 --- a/packages/elements/src/tests/badges/badge-functions.svg +++ b/packages/elements/src/tests/badges/badge-functions.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/packages/elements/src/tests/badges/badge-lines.svg b/packages/elements/src/tests/badges/badge-lines.svg index 354672e6b8..298b94a7b3 100644 --- a/packages/elements/src/tests/badges/badge-lines.svg +++ b/packages/elements/src/tests/badges/badge-lines.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/packages/elements/src/tests/badges/badge-statements.svg b/packages/elements/src/tests/badges/badge-statements.svg index 84474b83ab..0d530fb661 100644 --- a/packages/elements/src/tests/badges/badge-statements.svg +++ b/packages/elements/src/tests/badges/badge-statements.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/packages/geo-diary/src/tests/badges/badge-branches.svg b/packages/geo-diary/src/tests/badges/badge-branches.svg index df74ce7f38..0edb0ed13a 100644 --- a/packages/geo-diary/src/tests/badges/badge-branches.svg +++ b/packages/geo-diary/src/tests/badges/badge-branches.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/geo-diary/src/tests/badges/badge-functions.svg b/packages/geo-diary/src/tests/badges/badge-functions.svg index 2d5651c6b0..1ea3d37ae5 100644 --- a/packages/geo-diary/src/tests/badges/badge-functions.svg +++ b/packages/geo-diary/src/tests/badges/badge-functions.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/geo-diary/src/tests/badges/badge-lines.svg b/packages/geo-diary/src/tests/badges/badge-lines.svg index d3fdd87a0c..fe6d765a55 100644 --- a/packages/geo-diary/src/tests/badges/badge-lines.svg +++ b/packages/geo-diary/src/tests/badges/badge-lines.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/geo-diary/src/tests/badges/badge-statements.svg b/packages/geo-diary/src/tests/badges/badge-statements.svg index 8cf520cfd6..259fe655b7 100644 --- a/packages/geo-diary/src/tests/badges/badge-statements.svg +++ b/packages/geo-diary/src/tests/badges/badge-statements.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/lifetime-legal/src/tests/badges/badge-branches.svg b/packages/lifetime-legal/src/tests/badges/badge-branches.svg index 5f09a4a1d5..2f3c50ba7f 100644 --- a/packages/lifetime-legal/src/tests/badges/badge-branches.svg +++ b/packages/lifetime-legal/src/tests/badges/badge-branches.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/lifetime-legal/src/tests/badges/badge-functions.svg b/packages/lifetime-legal/src/tests/badges/badge-functions.svg index d190e8880b..cf054ef37d 100644 --- a/packages/lifetime-legal/src/tests/badges/badge-functions.svg +++ b/packages/lifetime-legal/src/tests/badges/badge-functions.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/lifetime-legal/src/tests/badges/badge-lines.svg b/packages/lifetime-legal/src/tests/badges/badge-lines.svg index 2ffb61ddaa..a5cdb8e49b 100644 --- a/packages/lifetime-legal/src/tests/badges/badge-lines.svg +++ b/packages/lifetime-legal/src/tests/badges/badge-lines.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/lifetime-legal/src/tests/badges/badge-statements.svg b/packages/lifetime-legal/src/tests/badges/badge-statements.svg index 7260adc429..ae50f399e8 100644 --- a/packages/lifetime-legal/src/tests/badges/badge-statements.svg +++ b/packages/lifetime-legal/src/tests/badges/badge-statements.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/marketplace/src/components/ui/diff-render-html.tsx b/packages/marketplace/src/components/ui/diff-render-html.tsx index 4c21ea15dc..6695ac1c00 100644 --- a/packages/marketplace/src/components/ui/diff-render-html.tsx +++ b/packages/marketplace/src/components/ui/diff-render-html.tsx @@ -8,7 +8,6 @@ export interface DiffRenderHTMLProps { } const DiffRenderHTML = ({ currentString, changedString }: DiffRenderHTMLProps) => { - console.log(currentString, changedString) const isDiff = currentString !== changedString return (diff --git a/packages/marketplace/src/styles/blocks/diff-render-html.scss b/packages/marketplace/src/styles/blocks/diff-render-html.scss index eb45616e32..af07421541 100644 --- a/packages/marketplace/src/styles/blocks/diff-render-html.scss +++ b/packages/marketplace/src/styles/blocks/diff-render-html.scss @@ -8,6 +8,24 @@ color: $black; display: flex; align-items: center; + + & a { + color: $reapit-mid-blue; + font-weight: bold; + } + + & ul, + & ol { + margin-top: 0; + margin-left: 0; + list-style-position: inside; + & li div { + display: inline-block; + } + } + & p { + margin: 1rem 0; + } } .green { diff --git a/packages/marketplace/src/tests/badges/badge-lines.svg b/packages/marketplace/src/tests/badges/badge-lines.svg index 54b68c254b..b4b6b01b63 100644 --- a/packages/marketplace/src/tests/badges/badge-lines.svg +++ b/packages/marketplace/src/tests/badges/badge-lines.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/packages/marketplace/src/tests/badges/badge-statements.svg b/packages/marketplace/src/tests/badges/badge-statements.svg index 57b56bfdcb..81fc7449c4 100644 --- a/packages/marketplace/src/tests/badges/badge-statements.svg +++ b/packages/marketplace/src/tests/badges/badge-statements.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/packages/smb-onboarder/src/tests/badges/badge-branches.svg b/packages/smb-onboarder/src/tests/badges/badge-branches.svg index 4d573bf8e6..de2c16937b 100644 --- a/packages/smb-onboarder/src/tests/badges/badge-branches.svg +++ b/packages/smb-onboarder/src/tests/badges/badge-branches.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/smb-onboarder/src/tests/badges/badge-functions.svg b/packages/smb-onboarder/src/tests/badges/badge-functions.svg index dc8f3c869b..fe55805dd8 100644 --- a/packages/smb-onboarder/src/tests/badges/badge-functions.svg +++ b/packages/smb-onboarder/src/tests/badges/badge-functions.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/smb-onboarder/src/tests/badges/badge-lines.svg b/packages/smb-onboarder/src/tests/badges/badge-lines.svg index a584cb676a..66d7062bdb 100644 --- a/packages/smb-onboarder/src/tests/badges/badge-lines.svg +++ b/packages/smb-onboarder/src/tests/badges/badge-lines.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/smb-onboarder/src/tests/badges/badge-statements.svg b/packages/smb-onboarder/src/tests/badges/badge-statements.svg index 22984a95a2..2dfcd00acd 100644 --- a/packages/smb-onboarder/src/tests/badges/badge-statements.svg +++ b/packages/smb-onboarder/src/tests/badges/badge-statements.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file