bug fix for hero section (#1159)

* bug fix for hero section * small fixes * moved herosection components to course material --------- Co-authored-by: Maija Y <[email protected]>
rage · Jul 7, 2023 · eb391a4 · eb391a4
1 parent 0d158aa
commit eb391a4
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 41 deletions.
diff --git a/services/cms/src/blocks/HeroSection/HeroSectionEditor.tsx b/services/cms/src/blocks/HeroSection/HeroSectionEditor.tsx
@@ -75,7 +75,9 @@ const HeroSectionEditor: React.FC<
             `}
             tagName="h2"
             value={title}
-            onChange={(value: string) => setAttributes({ title: value })}
+            onChange={(value) => {
+              setAttributes({ title: value })
+            }}
             placeholder={"Hero section title..."}
           />
           <RichText

diff --git a/...rse-material/src/components/ContentRenderer/moocfi/CourseChapterGridBlock/ChapterGrid.tsx b/...rse-material/src/components/ContentRenderer/moocfi/CourseChapterGridBlock/ChapterGrid.tsx
@@ -6,13 +6,13 @@ import { useTranslation } from "react-i18next"
 import useTime from "../../../../hooks/useTime"
 import { fetchChaptersInTheCourse } from "../../../../services/backend"
 import ErrorBanner from "../../../../shared-module/components/ErrorBanner"
-import { CHAPTER_GRID_SCROLLING_DESTINATION_CLASSNAME_DOES_NOT_AFFECT_STYLING } from "../../../../shared-module/components/LandingPageHeroSection"
 import Spinner from "../../../../shared-module/components/Spinner"
 import useQueryParameter from "../../../../shared-module/hooks/useQueryParameter"
 import { baseTheme, headingFont, secondaryFont } from "../../../../shared-module/styles"
 import { respondToOrLarger } from "../../../../shared-module/styles/respond"
 import dontRenderUntilQueryParametersReady from "../../../../shared-module/utils/dontRenderUntilQueryParametersReady"
 import { stringToRandomNumber } from "../../../../shared-module/utils/strings"
+import { CHAPTER_GRID_SCROLLING_DESTINATION_CLASSNAME_DOES_NOT_AFFECT_STYLING } from "../../../LandingPageHeroSection"
 
 import Grid from "./Grid"
 

diff --git a/services/course-material/src/components/ContentRenderer/moocfi/HeroSectionBlock.tsx b/services/course-material/src/components/ContentRenderer/moocfi/HeroSectionBlock.tsx
@@ -3,9 +3,8 @@ import React, { useContext } from "react"
 import { BlockRendererProps } from ".."
 import PageContext from "../../../contexts/PageContext"
 import BreakFromCentered from "../../../shared-module/components/Centering/BreakFromCentered"
-import HeroSection, { HeroSectionProps } from "../../../shared-module/components/HeroSection"
 import withErrorBoundary from "../../../shared-module/utils/withErrorBoundary"
-
+import HeroSection, { HeroSectionProps } from "../../HeroSection"
 const HeroSectionBlock: React.FC<React.PropsWithChildren<BlockRendererProps<HeroSectionProps>>> = (
   props,
 ) => {

diff --git a/...ces/course-material/src/components/ContentRenderer/moocfi/LandingPageHeroSectionBlock.tsx b/...ces/course-material/src/components/ContentRenderer/moocfi/LandingPageHeroSectionBlock.tsx
@@ -2,10 +2,8 @@ import React from "react"
 
 import { BlockRendererProps, blockToRendererMap } from ".."
 import BreakFromCentered from "../../../shared-module/components/Centering/BreakFromCentered"
-import LandingPageHeroSection, {
-  LandingPageHeroSectionProps,
-} from "../../../shared-module/components/LandingPageHeroSection"
 import withErrorBoundary from "../../../shared-module/utils/withErrorBoundary"
+import LandingPageHeroSection, { LandingPageHeroSectionProps } from "../../LandingPageHeroSection"
 import DefaultBlock from "../DefaultBlock"
 
 const LandingPageHeroSectionBlock: React.FC<

diff --git a/shared-module/src/components/HeroSection.tsx → ...e-material/src/components/HeroSection.tsx b/shared-module/src/components/HeroSection.tsx → ...e-material/src/components/HeroSection.tsx
@@ -1,10 +1,13 @@
 import { css } from "@emotion/css"
 import styled from "@emotion/styled"
-import React from "react"
+import React, { useContext } from "react"
 
-import { baseTheme, headingFont } from "../styles"
-import { respondToOrLarger } from "../styles/respond"
-import { INCLUDE_THIS_HEADING_IN_HEADINGS_NAVIGATION_CLASS } from "../utils/constants"
+import { GlossaryContext } from "../contexts/GlossaryContext"
+import { respondToOrLarger } from "../shared-module//styles/respond"
+import { baseTheme, headingFont } from "../shared-module/styles"
+import { INCLUDE_THIS_HEADING_IN_HEADINGS_NAVIGATION_CLASS } from "../shared-module/utils/constants"
+
+import { parseText } from "./ContentRenderer/util/textParsing"
 
 interface TextBoxProps {
   fontColor?: string
@@ -92,6 +95,7 @@ const HeroSection: React.FC<React.PropsWithChildren<React.PropsWithChildren<Card
   const CENTER = "center"
   const LEFT = "left"
   const direction = alignCenter ? CENTER : LEFT
+  const { terms } = useContext(GlossaryContext)
   return (
     <div
       id="hero-section"
@@ -133,8 +137,11 @@ const HeroSection: React.FC<React.PropsWithChildren<React.PropsWithChildren<Card
     >
       <TextBox color={fontColor} direction={direction}>
         <span className="chapter">{label}</span>
-        <h1 className={INCLUDE_THIS_HEADING_IN_HEADINGS_NAVIGATION_CLASS}>{title}</h1>
-        <span>{subtitle}</span>
+        <h1
+          className={INCLUDE_THIS_HEADING_IN_HEADINGS_NAVIGATION_CLASS}
+          dangerouslySetInnerHTML={{ __html: parseText(title, terms).parsedText }}
+        />
+        <span dangerouslySetInnerHTML={{ __html: parseText(subtitle, terms).parsedText }} />
       </TextBox>
     </div>
   )

diff --git a/...src/components/LandingPageHeroSection.tsx → ...src/components/LandingPageHeroSection.tsx b/...src/components/LandingPageHeroSection.tsx → ...src/components/LandingPageHeroSection.tsx
@@ -1,13 +1,15 @@
 import { css } from "@emotion/css"
 import styled from "@emotion/styled"
-import React from "react"
+import React, { useContext } from "react"
 import { useTranslation } from "react-i18next"
 
-import DefaultSVG from "../img/hero-default-bg-image.svg"
-import { baseTheme } from "../styles"
-import { respondToOrLarger } from "../styles/respond"
+import { GlossaryContext } from "../contexts/GlossaryContext"
+import Button from "../shared-module/components/Button"
+import DefaultSVG from "../shared-module/img/hero-default-bg-image.svg"
+import { baseTheme } from "../shared-module/styles"
+import { respondToOrLarger } from "../shared-module/styles/respond"
 
-import Button from "./Button"
+import { parseText } from "./ContentRenderer/util/textParsing"
 
 export const CHAPTER_GRID_SCROLLING_DESTINATION_CLASSNAME_DOES_NOT_AFFECT_STYLING =
   "chapter-grid-scrolling-destination"
@@ -87,6 +89,7 @@ const LandingPageHeroSection: React.FC<
   React.PropsWithChildren<React.PropsWithChildren<CardProps>>
 > = ({ title, children, backgroundImage, backgroundColor, backgroundRepeatX, fontColor }) => {
   const { t } = useTranslation()
+  const { terms } = useContext(GlossaryContext)
   return (
     <div
       className={css`
@@ -107,7 +110,7 @@ const LandingPageHeroSection: React.FC<
     >
       {backgroundImage === undefined && <StyledSVG />}
       <TextBox color={fontColor}>
-        <h1>{title}</h1>
+        <h1 dangerouslySetInnerHTML={{ __html: parseText(title, terms).parsedText }} />
         <div className="hero-subtitle">{children}</div>
         <Button
           variant="primary"

diff --git a/shared-module/stories/HeroSection.stories.tsx b/shared-module/stories/HeroSection.stories.tsx