diff --git a/samples/sample-react-app/src/App.css b/samples/sample-react-app/src/App.css index b6bf9c4..4a32f5a 100644 --- a/samples/sample-react-app/src/App.css +++ b/samples/sample-react-app/src/App.css @@ -1,6 +1,7 @@ .App { text-align: left; padding: 20px; + width: 60%; } .App-logo { diff --git a/src/@optimizely/forms-react/src/components/ElementWrapper.tsx b/src/@optimizely/forms-react/src/components/ElementWrapper.tsx index 1eb6b10..a4c9ce0 100644 --- a/src/@optimizely/forms-react/src/components/ElementWrapper.tsx +++ b/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 } diff --git a/src/@optimizely/forms-react/src/components/elements/ChoiceElementBlock.tsx b/src/@optimizely/forms-react/src/components/elements/ChoiceElementBlock.tsx index 3da4165..ee51432 100644 --- a/src/@optimizely/forms-react/src/components/elements/ChoiceElementBlock.tsx +++ b/src/@optimizely/forms-react/src/components/elements/ChoiceElementBlock.tsx @@ -16,7 +16,7 @@ export const ChoiceElementBlock = (props: ChoiceElementBlockProps) => {
- {isNullOrEmpty(element.properties.label) && + {!isNullOrEmpty(element.properties.label) && {element.properties.label} } diff --git a/src/@optimizely/forms-react/src/components/elements/SubmitButtonElementBlock.tsx b/src/@optimizely/forms-react/src/components/elements/SubmitButtonElementBlock.tsx new file mode 100644 index 0000000..78f9c28 --- /dev/null +++ b/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 ( + + + + ); +} \ No newline at end of file diff --git a/src/@optimizely/forms-react/src/components/elements/index.ts b/src/@optimizely/forms-react/src/components/elements/index.ts index efa4c88..472e0d7 100644 --- a/src/@optimizely/forms-react/src/components/elements/index.ts +++ b/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 = { TextboxElementBlock, @@ -23,5 +24,6 @@ export const components: Record = { UrlElementBlock, ImageChoiceElementBlock, FileUploadElementBlock, - ResetButtonElementBlock + ResetButtonElementBlock, + SubmitButtonElementBlock }; \ No newline at end of file diff --git a/src/@optimizely/forms-sdk/src/models/elements/SubmitButton.ts b/src/@optimizely/forms-sdk/src/models/elements/SubmitButton.ts index 61392fd..1ed626e 100644 --- a/src/@optimizely/forms-sdk/src/models/elements/SubmitButton.ts +++ b/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; } \ No newline at end of file