From eb391a4305021451837f88fdf51fe3820c2374e5 Mon Sep 17 00:00:00 2001
From: Maija <51128208+Maijjay@users.noreply.github.com>
Date: Fri, 7 Jul 2023 10:12:20 +0300
Subject: [PATCH] bug fix for hero section (#1159)

* bug fix for hero section

* small fixes

* moved herosection components to course material

---------

Co-authored-by: Maija Y <maija.ylitalo@helsinki.fi>
---
 .../blocks/HeroSection/HeroSectionEditor.tsx  |  4 +++-
 .../CourseChapterGridBlock/ChapterGrid.tsx    |  2 +-
 .../moocfi/HeroSectionBlock.tsx               |  3 +--
 .../moocfi/LandingPageHeroSectionBlock.tsx    |  4 +---
 .../src/components/HeroSection.tsx            | 19 +++++++++++-----
 .../src/components/LandingPageHeroSection.tsx | 15 ++++++++-----
 shared-module/stories/HeroSection.stories.tsx | 22 -------------------
 7 files changed, 28 insertions(+), 41 deletions(-)
 rename {shared-module => services/course-material}/src/components/HeroSection.tsx (85%)
 rename {shared-module => services/course-material}/src/components/LandingPageHeroSection.tsx (86%)
 delete mode 100644 shared-module/stories/HeroSection.stories.tsx

diff --git a/services/cms/src/blocks/HeroSection/HeroSectionEditor.tsx b/services/cms/src/blocks/HeroSection/HeroSectionEditor.tsx
index e145e1c088db..f5bd08bab0f9 100644
--- 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/services/course-material/src/components/ContentRenderer/moocfi/CourseChapterGridBlock/ChapterGrid.tsx b/services/course-material/src/components/ContentRenderer/moocfi/CourseChapterGridBlock/ChapterGrid.tsx
index 776062ee9e95..0912a31f5886 100644
--- a/services/course-material/src/components/ContentRenderer/moocfi/CourseChapterGridBlock/ChapterGrid.tsx
+++ b/services/course-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
index c557315bdac9..0d1d075a7a10 100644
--- 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/services/course-material/src/components/ContentRenderer/moocfi/LandingPageHeroSectionBlock.tsx b/services/course-material/src/components/ContentRenderer/moocfi/LandingPageHeroSectionBlock.tsx
index 6ceadde5c5f5..2a39b14bd370 100644
--- a/services/course-material/src/components/ContentRenderer/moocfi/LandingPageHeroSectionBlock.tsx
+++ b/services/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 b/services/course-material/src/components/HeroSection.tsx
similarity index 85%
rename from shared-module/src/components/HeroSection.tsx
rename to services/course-material/src/components/HeroSection.tsx
index bf75226cd14d..678f7a6a3eef 100644
--- a/shared-module/src/components/HeroSection.tsx
+++ b/services/course-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/shared-module/src/components/LandingPageHeroSection.tsx b/services/course-material/src/components/LandingPageHeroSection.tsx
similarity index 86%
rename from shared-module/src/components/LandingPageHeroSection.tsx
rename to services/course-material/src/components/LandingPageHeroSection.tsx
index d6e2a0caf149..270fac52fd56 100644
--- a/shared-module/src/components/LandingPageHeroSection.tsx
+++ b/services/course-material/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
deleted file mode 100644
index 3657ed3f0d58..000000000000
--- a/shared-module/stories/HeroSection.stories.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/* eslint-disable i18next/no-literal-string */
-import { Meta, Story } from "@storybook/react"
-import React from "react"
-
-import HeroSection from "../src/components/HeroSection"
-
-export default {
-  title: "Components/HeroSection",
-  component: HeroSection,
-} as Meta
-
-const Component = HeroSection
-
-type ComponentProps = React.ComponentProps<typeof Component>
-
-const Template: Story<ComponentProps> = (args: ComponentProps) => <Component {...args} />
-
-export const Primary: Story<ComponentProps> = Template.bind({})
-Primary.args = {
-  children: "HeroSection",
-  title: "Introduction to Calculus",
-}