FW-6250 render draft js or html (#686)

* Add missing fields to map widget form

* Upgrade dompurify and testcafe

* If not draft-js fall back to sanitized html

* Delete unused LandingAbout component

* Fix typo

* Adjust styling

* Update landing page data to HTML

* Remove unused component and superfluous config of flex

* Styling tweaks to LandingBanner in keeping with designs

* Adjust text size on tiles for different screen sizes

* Delete unused Topics component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fv-web",
-  "version": "0.12.0",
+  "version": "0.17.0",
   "description": "A React.js front-end for the FirstVoices API.",
   "main": "index.js",
   "repository": {
@@ -64,7 +64,7 @@
     "mini-css-extract-plugin": "^2.9.2",
     "mochawesome": "^7.1.3",
     "prettier": "^2.8.8",
-    "testcafe": "^3.6.2",
+    "testcafe": "^3.7.0",
     "testcafe-blink-diff": "^0.5.8",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^5.0.4"
@@ -105,7 +105,7 @@
     "core-js": "^3.39.0",
     "css-loader": "^7.1.2",
     "cssnano": "^7.0.5",
-    "dompurify": "^3.1.6",
+    "dompurify": "^3.2.0",
     "draft-js": "^0.11.7",
     "howler": "^2.2.3",
     "html-webpack-plugin": "^5.6.3",

src/assets/main.css

@@ -22,6 +22,9 @@
   .wysiwyg div {
     @apply my-4;
   }
+  .wysiwyg p {
+    @apply my-4;
+  }
 }
 
 /* These component rules can be over-ridden using utility classes. 

src/components/LandingBanner/LandingBannerPresentation.js

@@ -7,42 +7,39 @@ import getIcon from 'common/utils/getIcon'
 
 function LandingBannerPresentation({ data }) {
   const { title, image, text, links } = data?.settings
-  const { height } = window.screen
 
   return (
-    <section
-      id="LandingBannerPresentation"
-      className="md:min-h-screen md:pb-4 bg-blumine-700"
-    >
+    <section id="LandingBannerPresentation" className="bg-white">
       <div
-        className="h-72 md:h-screen md:bg-right flex flex-col justify-end"
+        className="h-96 lg:h-fit xl:h-screen bg-right pt-16 pb-10 md:pb-20 px-4 md:px-20"
         style={{
           backgroundImage: `url(${image})`,
           backgroundRepeat: 'no-repeat',
           backgroundPosition: 'right 20% top',
           backgroundSize: 'cover',
         }}
       >
-        <div
-          className={`${
-            height > 420 ? 'flex' : 'hidden'
-          } pb-8 px-12 md:px-20 items-end`}
-        >
-          <img src={title} alt="Live Your Language" className="h-36 md:h-80" />
+        <div className="h-full">
+          <div className="flex h-full bg-transparent items-end">
+            <div className="grid grid-cols-1 gap-4 lg:gap-6 pb-4 lg:pb-10">
+              <img
+                src={title}
+                alt="Live Your Language"
+                className="h-36 lg:h-80"
+              />
+              <div className="text-white lg:text-3xl text-left lg:w-4/5">
+                {text}
+              </div>
+            </div>
+          </div>
         </div>
-        <p className="hidden md:block bg-transparent text-white text-xs md:text-3xl px-12 md:px-20 pb-24 text-center md:text-left lg:w-4/5">
-          {text}
-        </p>
       </div>
-      <p className="md:hidden bg-blumine-700 text-white text-xs px-10 leading-6 py-6 text-center">
-        {text}
-      </p>
       <div className="md:flex justify-center">
-        <ul className="md:flex md:-mt-20 justify-center md:w-11/12">
+        <ul className="md:flex -mt-10 md:-mt-20 justify-center md:w-full md:px-20">
           {links?.map((link) => (
             <li
               key={link?.id}
-              className={`bg-${link?.backgroundColor} px-4 py-2 text-white text-center z-10 md:pt-8 md:pb-12 md:w-1/3`}
+              className={`bg-${link?.backgroundColor} px-4 py-4 text-white text-center z-10 md:pt-8 md:pb-12 md:w-1/3`}
               style={{
                 backgroundImage: `url(${link?.backgroundImage})`,
                 backgroundRepeat: 'no-repeat',
@@ -53,9 +50,12 @@ function LandingBannerPresentation({ data }) {
               {link?.url && (
                 <Link to={link?.url} className="flex-col items-center">
                   <p className="flex justify-center">
-                    {getIcon(`${link?.icon}`, 'fill-current h-12 w-12')}
+                    {getIcon(
+                      `${link?.icon}`,
+                      'fill-current h-10 w-10 lg:h-12 lg:w-12',
+                    )}
                   </p>
-                  <p className="p-2 md:text-2xl">{link?.urlLabel}</p>
+                  <p className="p-2 md:text-lg lg:text-2xl">{link?.urlLabel}</p>
                   <p className="text-xs md:text-sm w-1/2 mx-auto my-2">
                     {link?.info}
                   </p>
@@ -69,9 +69,12 @@ function LandingBannerPresentation({ data }) {
                   className="flex-col items-center"
                 >
                   <p className="flex justify-center">
-                    {getIcon(`${link?.icon}`, 'fill-current h-12 w-12')}
+                    {getIcon(
+                      `${link?.icon}`,
+                      'fill-current h-10 w-10 lg:h-12 lg:w-12',
+                    )}
                   </p>
-                  <p className="p-2 md:text-2xl">{link?.urlLabel}</p>
+                  <p className="p-2 md:text-lg lg:text-2xl">{link?.urlLabel}</p>
                   <p className="text-xs md:text-sm w-1/2 mx-auto my-2">
                     {link?.info}
                   </p>

src/components/LandingPage/LandingPageData.js

@@ -19,7 +19,7 @@ function LandingPageData() {
       image: Elders,
       title: 'WHY FIRSTVOICES?',
       textWithFormatting:
-        '{"blocks":[{"key":"","text":"FirstVoices is an internationally recognized online platform for Indigenous communities to share and promote their languages, oral cultures and linguistic histories.","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"","text":"FirstVoices provides state-of-the-art technologies, training and technical support to community language champions.","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"faghd","text":"Language champions collaborate with Indigenous Elders, youth and speakers to create and share language resources like words, phrases, songs and stories.","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{}}',
+        '<p>FirstVoices is an internationally recognized online platform for Indigenous communities to share and promote their languages, oral cultures and linguistic histories.</p><p>FirstVoices provides state-of-the-art technologies, training and technical support to community language champions.</p><p>Language champions collaborate with Indigenous Elders, youth and speakers to create and share language resources like words, phrases, songs and stories.</p>',
     },
   }
 
@@ -28,14 +28,14 @@ function LandingPageData() {
     type: WIDGET_TEXT,
     settings: {
       mockData: true,
-      bg: 'jade-500',
+      bgColor: 'jade-500',
       bgImage,
       image: Img,
       title: 'ABOUT FIRSTVOICES',
       url: `https://${FIRSTVOICESLINK}/about`,
       urlLabel: 'Learn more',
       textWithFormatting:
-        '{"blocks":[{"key":"3euvg","text":"On FirstVoices, interactive language learning resources are uploaded to secure, community-owned sites. ","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"cnh18","text":"Any content available on FirstVoices is gathered, uploaded and curated by teams of people from that language community. Ownership and copyright of all language content on FirstVoices is maintained by the contributing community. ","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}},{"key":"40rem","text":"FirstVoices is an initiative of the First Peoples’ Cultural Council and is funded by the First Peoples’ Cultural Foundation.","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{}}',
+        '<p>On FirstVoices, interactive language learning resources are uploaded to secure, community-owned sites.</p><p>Any content available on FirstVoices is gathered, uploaded and curated by teams of people from that language community. Ownership and copyright of all language content on FirstVoices is maintained by the contributing community.</p><p>FirstVoices is an initiative of the First Peoples’ Cultural Council and is funded by the First Peoples’ Cultural Foundation.</p>',
     },
   }
 
@@ -55,14 +55,6 @@ function LandingPageData() {
       backgroundImage: languages,
     },
   }
-  // const rssFeed =
-  //   'https://firstvoices.atlassian.net/wiki/createrssfeed.action?types=blogpost&blogpostSubTypes=attachment&spaces=conf_all&title=FirstVoices+Blog+RSS+Feed&labelString%3D&excludedSpaceKeys%3D&sort=modified&maxResults=10&timeSpan=1000&showContent=true&confirm=Create+RSS+Feed'
-
-  // const MAX_ARTICLES = 3
-  // const [articles, setArticles] = useState()
-  // useEffect(() => {
-  //   const loadArticles = api.blog.get(rssFeed)
-  // })
 
   return {
     whyData,

src/components/SanitizedHtml/SanitizedHtml.js

@@ -17,20 +17,20 @@ const Sanitize = (content) =>
     ADD_ATTR: ['allow', 'allowfullscreen', 'frameborder', 'scrolling'],
   })
 
-function SanitizedHtml({ text = '', className, tagName = 'div' }) {
+function SanitizedHtml({ htmlString = '', className, tagName = 'div' }) {
   const Tag = tagName
   return (
     <Tag
       className={className}
-      dangerouslySetInnerHTML={{ __html: Sanitize(text) }}
+      dangerouslySetInnerHTML={{ __html: Sanitize(htmlString) }}
     />
   )
 }
 
 // PROPTYPES
 const { string } = PropTypes
 SanitizedHtml.propTypes = {
-  text: string,
+  htmlString: string,
   className: string,
   tagName: string,
 }