Merge pull request #2 from EAVFW/kba/conditional-render

Kba/conditional render
EAVFW · Mar 1, 2024 · b1de702 · b1de702
2 parents ec08303 + ebc0f7e
commit b1de702
Show file tree

Hide file tree

Showing 50 changed files with 539 additions and 740 deletions.
diff --git a/packages/core/src/components/QuickForm.tsx b/packages/core/src/components/QuickForm.tsx
@@ -3,26 +3,25 @@ import React from "react";
 import { useQuickForm } from "../state/QuickFormContext";
 import { Ending, Submit } from "./index";
 import { Intro } from "./intro/Intro";
-import { SlideRenderer } from "./slide-renderer/SlideRenderer";
+import { SlideRenderer } from "./renderers/slide-renderer/SlideRenderer";
 
 export const QuickForm: React.FC = () => {
     const { state, setIntroVisited } = useQuickForm();
 
     if (state.isIntroSlide && typeof state.data.intro !== "undefined") {
-        return <Intro data={state.data.intro} errorMsg={state.errorMsg} onBtnClick={setIntroVisited} />
+        return <Intro model={state.data.intro} onBtnClick={setIntroVisited} />
     }
 
     if (state.isSubmitSlide)
-        return <Submit {...state.data.submit} />
+        return <Submit model={state.data.submit} />
 
     if (state.isEndingSlide) {
-        return <Ending data={state.data.ending} />
+        return <Ending model={state.data.ending} />
     }
 
     return (
         <div className="container">
             <SlideRenderer />
         </div>
     );
-}
-
+}
diff --git a/packages/core/src/components/button/Button.tsx b/packages/core/src/components/button/Button.tsx
@@ -64,7 +64,7 @@ const btnContainerStyle = {
 
     margin: '30px',
     marginTop: '16px',
-   
+
 };
 
 const buttonStyle = {

diff --git a/packages/core/src/components/divider/Divider.tsx b/packages/core/src/components/divider/Divider.tsx
@@ -12,5 +12,4 @@ export const Divider: React.FC<DividerProps> = ({ color }) => {
     };
 
     return <hr style={dividerStyle} />;
-};
-
+};
diff --git a/packages/core/src/components/ending/Ending.module.css b/packages/core/src/components/ending/Ending.module.css
diff --git a/packages/core/src/components/ending/Ending.tsx b/packages/core/src/components/ending/Ending.tsx
@@ -1,14 +1,12 @@
 "use client";
-import React, { useEffect } from "react";
+import React from "react";
 import { Heading, Paragraph } from "../index";
 import { ErrorIcon, Checkmark } from "../icons/index";
-import styles from "./Ending.module.css";
-import classNames from "classnames";
 import { useQuickForm } from "../../state/QuickFormContext";
 import { EndingModel } from "../../model";
 
 type EndingProps = {
-    data: EndingModel;
+    model: EndingModel;
 }
 
 const endingStyles: React.CSSProperties = {
@@ -17,40 +15,35 @@ const endingStyles: React.CSSProperties = {
     flexDirection: 'column'
 }
 
-export const Ending: React.FC<EndingProps> = ({ data }) => {
+export const Ending: React.FC<EndingProps> = ({ model }) => {
     const { state } = useQuickForm();
+    const { text, paragraph } = model;
     const submitStatus = state.submitStatus;
 
-    useEffect(() => {
-        console.log("Ending rendered..", submitStatus, classNames(styles.svgcolor), "test");
-
-    }, [submitStatus]);
-
     return (
         <div style={endingStyles}>
             {submitStatus.isSubmitError &&
                 <>
-                    <ErrorIcon classNames={classNames(styles.endingSvg)} />
+                    <ErrorIcon color={'var(--on-surface)'} />
                     <Heading>Der skete en fejl, prøv igen</Heading>
                 </>
             }
             {submitStatus.isSubmitSuccess &&
                 <>
-                    <Checkmark classNames={classNames(styles.endingSvg)} />
-                    {data.text &&
+                    <Checkmark color={'var(--on-surface)'} />
+                    {text &&
                         <Heading style={{ marginTop: '10px' }}>
-                            {data.text}
+                            {text}
                         </Heading>
                     }
 
-                    {data.paragraph &&
+                    {paragraph &&
                         <Paragraph style={{ marginTop: '10px' }}>
-                            {data.paragraph}
+                            {paragraph}
                         </Paragraph>
                     }
                 </>
             }
         </div>
     );
-}
-
+}
diff --git a/packages/core/src/components/heading/Heading.tsx b/packages/core/src/components/heading/Heading.tsx
@@ -1,8 +1,7 @@
 import { HeadingNumberDisplayProvider, registerQuickFormService, resolveQuickFormService } from "../../services/QuickFormServices";
 import { useQuickForm } from "../../state/QuickFormContext";
 import { ImArrowRightIcon } from "../../components/icons";
-import React, { CSSProperties } from "react";
-import classNames from "classnames";
+import React from "react";
 import { ReactNode } from "react";
 
 type HeadingProps = {
@@ -22,8 +21,6 @@ export function Heading({ children, label, style = {} }: HeadingProps) {
         color: 'var(--on-surface)',
     }
 
-    console.log("shouldDisplayNumber", shouldDisplayNumber);
-
     return (
         <h1 style={{ ...style, ...headingStyles }}>
             <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
@@ -37,18 +34,6 @@ export function Heading({ children, label, style = {} }: HeadingProps) {
 
 }
 
-const rootStyles: CSSProperties = {
-    position: "absolute",
-    left: 0,
-    translate: "-110px",
-    justifyContent: 'end',
-    width: '100px',
-    display: "flex",
-    alignItems: "center",
-    fontSize: "22px",
-    top: "11px"
-};
-
 const defaultHeadingNumberDisplayProvider: HeadingNumberDisplayProvider = () => {
     let { state } = useQuickForm();
     return !(state.isEndingSlide || state.isIntroSlide || state.isSubmitSlide)

diff --git a/packages/core/src/components/icons/ArrowDownIcon.tsx b/packages/core/src/components/icons/ArrowDownIcon.tsx
@@ -1,10 +1,6 @@
 import React from "react";
 
-interface ArrowDownProps {
-    className?: string;
-}
-
-export const ArrowDownIcon: React.FC<ArrowDownProps> = ({ className }) => {
+export const ArrowDownIcon: React.FC<IconProps> = ({ className }) => {
     return (
         <div className={className}>
             <svg
@@ -25,4 +21,4 @@ export const ArrowDownIcon: React.FC<ArrowDownProps> = ({ className }) => {
             </svg>
         </div>
     );
-};
+};
diff --git a/packages/core/src/components/icons/ArrowUpIcon.tsx b/packages/core/src/components/icons/ArrowUpIcon.tsx
@@ -1,10 +1,6 @@
 import React from "react";
 
-interface ArrowUpIconProps {
-    className?: string;
-}
-
-export const ArrowUpIcon: React.FC<ArrowUpIconProps> = ({ className }) => {
+export const ArrowUpIcon: React.FC<IconProps> = ({ className }) => {
     return (
         <div className={className}>
             <svg
@@ -25,5 +21,4 @@ export const ArrowUpIcon: React.FC<ArrowUpIconProps> = ({ className }) => {
             </svg>
         </div>
     );
-};
-
+};
diff --git a/packages/core/src/components/icons/Checkmark.tsx b/packages/core/src/components/icons/Checkmark.tsx
@@ -1,10 +1,6 @@
 import React from "react";
 
-type CheckmarkProps = {
-    classNames?: string;
-}
-
-export const Checkmark: React.FC<CheckmarkProps> = ({ classNames }) => {
+export const Checkmark: React.FC<IconProps> = ({ color = "green" }) => {
     return (
         <div style={{ textAlign: 'center' }}>
             <svg
@@ -15,15 +11,13 @@ export const Checkmark: React.FC<CheckmarkProps> = ({ classNames }) => {
                 xmlns="http://www.w3.org/2000/svg"
             >
                 <path
-                    className={`${classNames}`}
+                    stroke={color}
                     d="M20 6L9 17L4 12"
-                    stroke="green"
                     strokeWidth="2"
                     strokeLinecap="round"
                     strokeLinejoin="round"
                 />
             </svg>
         </div>
     );
-}
-
+}
diff --git a/packages/core/src/components/icons/ErrorIcon.tsx b/packages/core/src/components/icons/ErrorIcon.tsx
@@ -1,43 +1,37 @@
 import React from "react";
 
-type ErrorIconProps = {
-    classNames?: string;
-}
-
-export const ErrorIcon: React.FC<ErrorIconProps> = ({ classNames }) => {
+export const ErrorIcon: React.FC<IconProps> = ({ style, color = "red", size = 100 }) => {
     return (
         <div style={{ textAlign: 'center' }}>
             <svg
-                width="100"
-                height="100"
+                width={size}
+                height={size}
                 viewBox="0 0 24 24"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
+                style={style}
             >
                 <circle
-                    className={`${classNames}`}
                     cx="12"
                     cy="12"
                     r="10"
-                    stroke="red"
+                    stroke={color}
                     strokeWidth="2"
                 />
                 <line
-                    className={`${classNames}`}
                     x1="6"
                     y1="6"
                     x2="18"
                     y2="18"
-                    stroke="red"
+                    stroke={color}
                     strokeWidth="2"
                 />
                 <line
-                    className={`${classNames}`}
                     x1="18"
                     y1="6"
                     x2="6"
                     y2="18"
-                    stroke="red"
+                    stroke={color}
                     strokeWidth="2"
                 />
             </svg>

diff --git a/packages/core/src/components/icons/ImArrowRightIcon.tsx b/packages/core/src/components/icons/ImArrowRightIcon.tsx
@@ -1,15 +1,11 @@
 import React from "react";
 
-interface ImArrowRightProps {
-    size?: string;
-}
-
-export const ImArrowRightIcon: React.FC<ImArrowRightProps> = ({ size = '20px' }) => {
+export const ImArrowRightIcon: React.FC<IconProps> = ({ size = '20px' }) => {
     return (
         <>
             <svg viewBox="0 0 448 512" height={size} width={size}>
                 <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
             </svg>
         </>
     );
-};
+};
diff --git a/packages/core/src/components/icons/RightArrow.tsx b/packages/core/src/components/icons/RightArrow.tsx
@@ -1,17 +1,11 @@
 import React from "react";
 
-interface RightArrowProps {
-    className?: string;
-    size?: string;
-}
-
-export const RightArrow: React.FC<RightArrowProps> = ({ className, size = '16px' }) => {
+export const RightArrow: React.FC<IconProps> = ({ className, size = '16px' }) => {
     return (
         <div className={className}>
             <svg viewBox="0 0 448 512" height={size} width={size}>
                 <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
             </svg>
         </div>
     );
-};
-
+};
diff --git a/packages/core/src/components/icons/iconProps.ts b/packages/core/src/components/icons/iconProps.ts
@@ -0,0 +1,10 @@
+type IconProps = {
+    style?: React.CSSProperties;
+    color?: string;
+    backgroundColor?: string;
+    size?: number;
+    textColor?: string;
+    className?: string;
+    opacity?: number;
+    hoverColor?:string;
+}
diff --git a/packages/core/src/components/intro/Intro.tsx b/packages/core/src/components/intro/Intro.tsx
@@ -5,35 +5,34 @@ import { IntroModel } from "../../model";
 import { useHandleEnterKeypress } from "../../hooks";
 
 type IntroProps = {
-    data: IntroModel;
-    errorMsg: string;
+    model: IntroModel;
     onBtnClick: React.Dispatch<void>;
 }
 
-export const Intro: React.FC<IntroProps> = ({ data, errorMsg, onBtnClick }) => {
+export const Intro: React.FC<IntroProps> = ({ model, onBtnClick }) => {
+    const { text, paragraph, buttonText } = model;
 
     /* Listens to enter key pressed */
     useHandleEnterKeypress("intro", false, onBtnClick);
 
     return (
         <div style={introStyling}>
             <Heading >
-                {data.text}
+                {text}
             </Heading>
             <Paragraph style={{ marginTop: '10px' }}>
-                {data.paragraph}
+                {paragraph}
             </Paragraph>
             <Button
                 onClick={() => onBtnClick()}
-                visible={errorMsg === ""}
                 showPressEnter={true}
                 style={{
                     fontSize: '1.8rem',
                     fontWeight: '500',
                     padding: '10px 14px'
                 }}
             >
-                {data.buttonText}
+                {buttonText}
             </Button>
         </div>
     )

diff --git a/packages/core/src/components/question-number/QuestionNumber.tsx b/packages/core/src/components/question-number/QuestionNumber.tsx
@@ -12,7 +12,6 @@ registerQuickFormService("headingNumberDisplayProvider", defaultHeadingNumberDis
 
 export const QuestionNumber: React.FC<{ questionNum?: number }> = ({ questionNum }) => {
     const shouldDisplayNumber = resolveQuickFormService("headingNumberDisplayProvider")();
-    console.log("shouldDisplay", shouldDisplayNumber);
     if (!shouldDisplayNumber) {
         return null
     }