Initial expandable content -block

services/cms/src/blocks/ExpandableContent/ExpandableContentEditor.tsx

@@ -0,0 +1,27 @@
+/* eslint-disable i18next/no-literal-string */
+import { InnerBlocks } from "@wordpress/block-editor"
+import { BlockEditProps } from "@wordpress/blocks"
+import React from "react"
+// import { useTranslation } from "react-i18next"
+
+import BlockPlaceholderWrapper from "../BlockPlaceholderWrapper"
+
+const ALLOWED_NESTED_BLOCKS = ["core/expandable-content-inner-block"]
+const ExpandableContentEditor: React.FC<
+  React.PropsWithChildren<BlockEditProps<Record<string, never>>>
+> = ({ clientId }) => {
+  //  const { t } = useTranslation()
+  return (
+    <BlockPlaceholderWrapper
+      id={clientId}
+      title={"Expandable content"}
+      explanation={"Expandable content"}
+    >
+      <div>
+        <InnerBlocks allowedBlocks={ALLOWED_NESTED_BLOCKS} />
+      </div>
+    </BlockPlaceholderWrapper>
+  )
+}
+
+export default ExpandableContentEditor

services/cms/src/blocks/ExpandableContent/ExpandableContentInnerBlock/ExpandableContentInnerBlockEditor.tsx

@@ -0,0 +1,39 @@
+/* eslint-disable i18next/no-literal-string */
+import { css } from "@emotion/css"
+import { InnerBlocks } from "@wordpress/block-editor"
+import { BlockEditProps } from "@wordpress/blocks"
+import React from "react"
+// import { useTranslation } from "react-i18next"
+
+import BlockPlaceholderWrapper from "../../BlockPlaceholderWrapper"
+
+import { ExpandableContentConfigurationProps } from "."
+
+import TextField from "@/shared-module/common/components/InputFields/TextField"
+
+const ALLOWED_NESTED_BLOCKS = [""]
+const ExpandableContentInnerBlockEditor: React.FC<
+  React.PropsWithChildren<BlockEditProps<ExpandableContentConfigurationProps>>
+> = ({ clientId, attributes, setAttributes }) => {
+  //  const { t } = useTranslation()
+  return (
+    <BlockPlaceholderWrapper
+      id={clientId}
+      title={"Expandable content"}
+      explanation={"Expandable content"}
+    >
+      <TextField
+        label="header"
+        placeholder="header"
+        value={attributes.name}
+        onChangeByValue={(value) => setAttributes({ name: value })}
+        className={css`
+          margin-bottom: 1rem !important;
+        `}
+      />
+      <InnerBlocks allowedBlocks={ALLOWED_NESTED_BLOCKS} />
+    </BlockPlaceholderWrapper>
+  )
+}
+
+export default ExpandableContentInnerBlockEditor

services/cms/src/blocks/ExpandableContent/ExpandableContentInnerBlock/ExpandableContentInnerBlockSave.tsx

@@ -0,0 +1,12 @@
+import { InnerBlocks } from "@wordpress/block-editor"
+import React from "react"
+
+const ExpandableContentInnerBlockSave: React.FC<unknown> = () => {
+  return (
+    <div>
+      <InnerBlocks.Content />
+    </div>
+  )
+}
+
+export default ExpandableContentInnerBlockSave

services/cms/src/blocks/ExpandableContent/ExpandableContentInnerBlock/index.tsx

@@ -0,0 +1,26 @@
+/* eslint-disable i18next/no-literal-string */
+import { BlockConfiguration } from "@wordpress/blocks"
+
+import { MOOCFI_CATEGORY_SLUG } from "../../../utils/Gutenberg/modifyGutenbergCategories"
+
+import ExpandableContentEditor from "./ExpandableContentInnerBlockEditor"
+import ExpandableContentSave from "./ExpandableContentInnerBlockSave"
+
+// eslint-disable-next-line i18next/no-literal-string
+const ExpandableContent = "ExpandableContent"
+
+export interface ExpandableContentConfigurationProps {
+  name: string
+}
+const ExpandableContentInnerBlockConfiguration: BlockConfiguration<ExpandableContentConfigurationProps> =
+  {
+    title: ExpandableContent,
+    description: ExpandableContent,
+    category: MOOCFI_CATEGORY_SLUG,
+    attributes: { name: { type: "string", default: "" } },
+    parent: ["moocfi/expandable-content"],
+    edit: ExpandableContentEditor,
+    save: ExpandableContentSave,
+  }
+
+export default ExpandableContentInnerBlockConfiguration

services/cms/src/blocks/ExpandableContent/ExpandableContentSave.tsx

@@ -0,0 +1,12 @@
+import { InnerBlocks } from "@wordpress/block-editor"
+import React from "react"
+
+const ExpendableContentSave: React.FC<unknown> = () => {
+  return (
+    <div>
+      <InnerBlocks.Content />
+    </div>
+  )
+}
+
+export default ExpendableContentSave

services/cms/src/blocks/ExpandableContent/index.tsx

@@ -0,0 +1,20 @@
+import { BlockConfiguration } from "@wordpress/blocks"
+
+import { MOOCFI_CATEGORY_SLUG } from "../../utils/Gutenberg/modifyGutenbergCategories"
+
+import ExpandableContentEditor from "./ExpandableContentEditor"
+import ExpandableContentSave from "./ExpandableContentSave"
+
+// eslint-disable-next-line i18next/no-literal-string
+const ExpandableContent = "ExpandableContent"
+
+const ExpandableContentConfiguration: BlockConfiguration = {
+  title: ExpandableContent,
+  description: ExpandableContent,
+  category: MOOCFI_CATEGORY_SLUG,
+  attributes: {},
+  edit: ExpandableContentEditor,
+  save: ExpandableContentSave,
+}
+
+export default ExpandableContentConfiguration

services/cms/src/blocks/index.tsx

@@ -17,6 +17,8 @@ import ExerciseSlides from "./Exercise/ExerciseSlides"
 import ExerciseTask from "./Exercise/ExerciseTask"
 import ExerciseCustomView from "./ExerciseCustomView"
 import ExerciseInChapter from "./ExerciseInChapter"
+import ExpendableContent from "./ExpandableContent"
+import ExpendableContentInnerBlock from "./ExpandableContent/ExpandableContentInnerBlock"
 import Glossary from "./Glossary"
 import HeroSection from "./HeroSection"
 import HightlightBox from "./HighlightBox"
@@ -68,6 +70,9 @@ export const blockTypeMapForPages = [
   ["moocfi/exercise-custom-view-block", ExerciseCustomView],
   ["moocfi/partners", PartnersBlock],
   ["moocfi/top-level-pages", TopLevelPage],
+  ["moocfi/expandable-content", ExpendableContent],
+  ["moocfi/expandable-content-inner-block", ExpendableContentInnerBlock],
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ] as Array<[string, BlockConfiguration<Record<string, any>>]>
 

services/course-material/src/components/ContentRenderer/index.tsx

@@ -45,6 +45,8 @@ import CourseProgressBlock from "./moocfi/CourseProgressBlock"
 import ExerciseBlock from "./moocfi/ExerciseBlock"
 import ExerciseCustomViewBlock from "./moocfi/ExerciseCustomViewBlock"
 import ExerciseInChapterBlock from "./moocfi/ExerciseInChapterBlock/index"
+import ExpandableContentBlock from "./moocfi/ExpandableContentBlock/ExpandableContentBlock"
+import ExpandableContentInnerBlock from "./moocfi/ExpandableContentBlock/ExpandableContentInnerBlock"
 import GlossaryBlock from "./moocfi/Glossary"
 import HeroSectionBlock from "./moocfi/HeroSectionBlock"
 import HighlightBox from "./moocfi/HighglightBox"
@@ -159,6 +161,8 @@ export const blockToRendererMap: { [blockName: string]: any } = {
   "moocfi/author-inner-block": AuthorInnerBlock,
   "moocfi/research-consent-question": ResearchConsentQuestionBlock,
   "moocfi/exercise-custom-view-block": ExerciseCustomViewBlock,
+  "moocfi/expandable-content": ExpandableContentBlock,
+  "moocfi/expandable-content-inner-block": ExpandableContentInnerBlock,
 }
 
 const highlightedBlockStyles = css`

services/course-material/src/components/ContentRenderer/moocfi/ExpandableContentBlock/ExpandableContentBlock.tsx

@@ -0,0 +1,38 @@
+import { css } from "@emotion/css"
+import React from "react"
+
+import { BlockRendererProps } from "../.."
+import InnerBlocks from "../../util/InnerBlocks"
+
+import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
+
+interface ExpandableContentBlockProps {
+  name: string
+}
+
+const ExpandableContentBlock: React.FC<
+  React.PropsWithChildren<BlockRendererProps<ExpandableContentBlockProps>>
+> = (props) => {
+  return (
+    <div
+      className={css`
+        display: flex;
+        flex-direction: column;
+        border-bottom: 2px solid gray;
+        margin: 0;
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          margin-top: 0;
+        }
+      `}
+    >
+      {<InnerBlocks parentBlockProps={props} />}
+    </div>
+  )
+}
+
+export default withErrorBoundary(ExpandableContentBlock)

services/course-material/src/components/ContentRenderer/moocfi/ExpandableContentBlock/ExpandableContentInnerBlock.tsx

@@ -0,0 +1,67 @@
+import { css } from "@emotion/css"
+import { MinusCircle, PlusCircle } from "@vectopus/atlas-icons-react"
+import React, { useState } from "react"
+
+import { BlockRendererProps } from "../.."
+import InnerBlocks from "../../util/InnerBlocks"
+
+import Button from "@/shared-module/common/components/Button"
+import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
+
+interface ExpandableContentInnerBlockProps {
+  name: string
+}
+
+const ExpandableContentInnerBlock: React.FC<
+  React.PropsWithChildren<BlockRendererProps<ExpandableContentInnerBlockProps>>
+> = (props) => {
+  const heading = props.data.attributes.name
+
+  const [x, setX] = useState(0)
+  return (
+    <div
+      className={css`
+        display: flex;
+        flex-direction: column;
+        padding: 2rem;
+        border: 2px solid gray;
+        border-bottom: 0;
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+          margin-top: 0;
+        }
+
+        border-left: ${x === 1 ? "4px solid black" : "2px solid gray"};
+      `}
+      role="presentation"
+      onKeyDown={() => (x === 0 ? setX(1) : setX(0))}
+      onClick={() => (x === 0 ? setX(1) : setX(0))}
+    >
+      <div
+        className={css`
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          width: 100%;
+        `}
+      >
+        <div>{heading}</div>
+        <Button variant={"icon"} size={"small"}>
+          {x == 0 ? <PlusCircle /> : <MinusCircle />}
+        </Button>
+      </div>
+
+      {x == 1 && <InnerBlocks parentBlockProps={props} />}
+    </div>
+  )
+}
+
+const exported = withErrorBoundary(ExpandableContentInnerBlock)
+// @ts-expect-error: Custom property
+exported.dontUseDefaultBlockMargin = true
+
+export default exported