Merge pull request #35 from episerver/feature/AFORM-3563-Add-submit-b…

…utton-react-component

Add submit button react component

samples/sample-react-app/src/App.css

@@ -1,6 +1,7 @@
 .App {
   text-align: left;
   padding: 20px;
+  width: 60%;
 }
 
 .App-logo {

src/@optimizely/forms-react/src/components/ElementWrapper.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react";
 
 export interface ElementWrapperProps{
-    className: string
+    className?: string
     isVisible: boolean,
     children: ReactNode
 }

src/@optimizely/forms-react/src/components/elements/ChoiceElementBlock.tsx

@@ -16,7 +16,7 @@ export const ChoiceElementBlock = (props: ChoiceElementBlockProps) => {
         <ElementWrapper className={`FormChoice ${validatorClasses}`} isVisible={checkVisible()}>
             <fieldset aria-describedby={`${element.key}_desc`}>
 
-                {isNullOrEmpty(element.properties.label) && 
+                {!isNullOrEmpty(element.properties.label) && 
                     <legend className="Form__Element__Caption">{element.properties.label}</legend>
                 }
 

src/@optimizely/forms-react/src/components/elements/SubmitButtonElementBlock.tsx

@@ -0,0 +1,35 @@
+import { SubmitButton, isNullOrEmpty } from "@optimizely/forms-sdk";
+import React from "react";
+import { useElement } from "../../hooks/useElement";
+import ElementWrapper from "../ElementWrapper";
+
+interface SubmitButtonElementBlockProps{
+    element: SubmitButton
+}
+
+export const SubmitButtonElementBlock = (props: SubmitButtonElementBlockProps) => {
+    const { element } = props;
+    const { validatorClasses, extraAttr, checkVisible } = useElement(element);
+    //TODO: Need to get submittable status from API
+    const buttonDisableState = false;
+
+    return (
+        <ElementWrapper isVisible={checkVisible()}>
+            <button id={element.key}
+                name="submit"
+                type="submit"
+                value={element.key}
+                {...extraAttr}
+                disabled={buttonDisableState}
+                className={isNullOrEmpty(element.properties.image) 
+                    ? `Form__Element FormExcludeDataRebind FormSubmitButton ${validatorClasses}` 
+                    : `Form__Element FormExcludeDataRebind FormSubmitButton FormImageSubmitButton ${validatorClasses}`
+                }
+            >
+                {isNullOrEmpty(element.properties.image) ? element.properties.label : (
+                    <img src={element.properties.image} alt={element.properties.label} />
+                )}
+            </button>
+        </ElementWrapper>
+    );
+}

src/@optimizely/forms-react/src/components/elements/index.ts

@@ -10,6 +10,7 @@ import { UrlElementBlock } from "./UrlElementBlock";
 import { ImageChoiceElementBlock } from "./ImageChoiceElementBlock";
 import { FileUploadElementBlock } from "./FileUploadElementBlock";
 import { ResetButtonElementBlock } from "./ResetButtonElementBlock";
+import { SubmitButtonElementBlock } from "./SubmitButtonElementBlock";
 
 export const components: Record<string, any> = {
     TextboxElementBlock,
@@ -23,5 +24,6 @@ export const components: Record<string, any> = {
     UrlElementBlock,
     ImageChoiceElementBlock,
     FileUploadElementBlock,
-    ResetButtonElementBlock
+    ResetButtonElementBlock,
+    SubmitButtonElementBlock
 };

src/@optimizely/forms-sdk/src/models/elements/SubmitButton.ts

@@ -8,5 +8,6 @@ export interface SubmitButton extends ButtonBase {
 }
 
 export interface SubmitButtonProperties extends ButtonBaseProperties, ConditionProperties {
-
+    finalizeForm: boolean;
+    image: string;
 }