fix(cwp-template-aws): update theme form layout

webiny · Feb 4, 2023 · 518ff62 · 518ff62
1 parent dc7a870
commit 518ff62
Show file tree

Hide file tree

Showing 25 changed files with 90 additions and 90 deletions.
diff --git a/apps/theme/layouts/forms/DefaultFormLayout.tsx b/apps/theme/layouts/forms/DefaultFormLayout.tsx
@@ -16,7 +16,7 @@ const Wrapper = styled.div`
     width: 100%;
     padding: 0 5px 5px 5px;
     box-sizing: border-box;
-    background-color: ${theme.styles.colors.color6};
+    background-color: ${theme.styles.colors["color6"]};
 `;
 
 /**
@@ -47,7 +47,6 @@ const DefaultFormLayout: FormLayoutComponent = ({
     /**
      * Once the data is successfully submitted, we show a success message.
      */
-
     const submitForm = async (data: Record<string, any>): Promise<void> => {
         setLoading(true);
         const result = await submit(data);
@@ -62,7 +61,7 @@ const DefaultFormLayout: FormLayoutComponent = ({
     }
 
     return (
-        /* "onSubmit" callback gets triggered once all of the fields are valid. */
+        /* "onSubmit" callback gets triggered once all the fields are valid. */
         /* We also pass the default values for all fields via the getDefaultValues callback. */
         <Form onSubmit={submitForm} data={getDefaultValues()}>
             {({ submit }) => (

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/Cell.tsx b/apps/theme/layouts/forms/DefaultFormLayout/Cell.tsx
@@ -3,10 +3,10 @@ import theme from "../../../theme";
 
 export const Cell = styled.div`
   width: 100%;
-  background-color: ${theme.styles.colors.color6};
+  background-color: ${theme.styles.colors["color6"]};
   padding: 15px;
 
-  ${theme.breakpoints.desktop} {
+  ${theme.breakpoints["desktop"]} {
     &:first-of-type {
       padding-left: 0;
     }

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/Row.tsx b/apps/theme/layouts/forms/DefaultFormLayout/Row.tsx
@@ -5,5 +5,5 @@ export const Row = styled.div`
     display: flex;
     width: 100%;
     padding: 0;
-    background-color: ${theme.styles.colors.color6};
+    background-color: ${theme.styles.colors["color6"]};
 `;
diff --git a/apps/theme/layouts/forms/DefaultFormLayout/SubmitButton.tsx b/apps/theme/layouts/forms/DefaultFormLayout/SubmitButton.tsx
@@ -4,7 +4,7 @@ import styled from "@emotion/styled";
 import theme from "./../../../theme";
 
 export const Wrapper = styled.div([
-    theme.styles.elements.button.primary,
+    theme.styles.elements["button"]["primary"],
     {
         ".button-body": {
             width: "100%",

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/SuccessMessage.tsx b/apps/theme/layouts/forms/DefaultFormLayout/SuccessMessage.tsx
@@ -28,8 +28,8 @@ const CheckmarkIcon = styled(({ className }) => (
     height: 100px;
 `;
 
-const Heading = styled.div(theme.styles.typography.heading1);
-const Message = styled.div(theme.styles.typography.paragraph1);
+const Heading = styled.div(theme.styles.typography["heading1"]);
+const Message = styled.div(theme.styles.typography["paragraph1"]);
 
 const Wrapper = styled.div`
     width: 100%;

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/TermsOfServiceSection.tsx b/apps/theme/layouts/forms/DefaultFormLayout/TermsOfServiceSection.tsx
@@ -21,7 +21,7 @@ interface Props {
 
 const RteFieldLabel = styled(FieldLabel)`
     .rte-block-paragraph {
-        ${theme.styles.typography.paragraph1};
+        ${theme.styles.typography["paragraph1"]};
         margin: 0;
     }
 `;

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/fields/Checkbox.tsx b/apps/theme/layouts/forms/DefaultFormLayout/fields/Checkbox.tsx
@@ -16,15 +16,15 @@ export const CheckboxGroup = styled.div`
 
 export const CheckboxButton = styled.input`
     margin-left: 0;
-    background-color: ${theme.styles.colors.color5};
+    background-color: ${theme.styles.colors["color5"]};
     min-width: 25px;
     width: 25px;
     height: 25px;
     -webkit-appearance: none;
     border-radius: ${theme.styles.borderRadius};
 
     &:focus {
-        border-color: ${theme.styles.colors.color2};
+        border-color: ${theme.styles.colors["color2"]};
         box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
         outline: none;
     }

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/fields/Input.tsx b/apps/theme/layouts/forms/DefaultFormLayout/fields/Input.tsx
@@ -14,17 +14,17 @@ interface InputProps {
 }
 
 const StyledInput = styled.input`
-    border: 1px solid ${theme.styles.colors.color5};
-    background-color: ${theme.styles.colors.color5};
+    border: 1px solid ${theme.styles.colors["color5"]};
+    background-color: ${theme.styles.colors["color5"]};
     width: 100%;
     padding: 10px;
     border-radius: ${theme.styles.borderRadius};
     box-sizing: border-box;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    ${theme.styles.typography.paragraph1};
+    ${theme.styles.typography["paragraph1"]};
 
     &:focus {
-        border-color: ${theme.styles.colors.color2};
+        border-color: ${theme.styles.colors["color2"]};
         box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
         outline: none;
     }

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/fields/Radio.tsx b/apps/theme/layouts/forms/DefaultFormLayout/fields/Radio.tsx
@@ -21,15 +21,15 @@ const RadioGroup = styled.div`
 const RadioButton = styled.input`
     margin-left: 0;
     line-height: 100%;
-    background-color: ${theme.styles.colors.color5};
+    background-color: ${theme.styles.colors["color5"]};
     min-width: 25px;
     width: 25px;
     height: 25px;
     border-radius: 50%;
     -webkit-appearance: none;
 
     &:focus {
-        border-color: ${theme.styles.colors.color2};
+        border-color: ${theme.styles.colors["color2"]};
         box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
         outline: none;
     }

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/fields/Select.tsx b/apps/theme/layouts/forms/DefaultFormLayout/fields/Select.tsx
@@ -12,9 +12,9 @@ interface SelectProps {
 }
 
 const StyledSelect = styled.select`
-    ${theme.styles.typography.paragraph1};
-    border: 1px solid ${theme.styles.colors.color5};
-    background-color: ${theme.styles.colors.color5};
+    ${theme.styles.typography["paragraph1"]};
+    border: 1px solid ${theme.styles.colors["color5"]};
+    background-color: ${theme.styles.colors["color5"]};
     width: 100%;
     padding: 10px;
     border-radius: ${theme.styles.borderRadius};
@@ -28,7 +28,7 @@ const StyledSelect = styled.select`
     background-position: center right;
 
     &:focus {
-        border-color: ${theme.styles.colors.color2};
+        border-color: ${theme.styles.colors["color2"]};
         box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
         outline: none;
     }

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/fields/Textarea.tsx b/apps/theme/layouts/forms/DefaultFormLayout/fields/Textarea.tsx
@@ -12,17 +12,17 @@ interface TextareaProps {
 }
 
 const StyledTextarea = styled.textarea`
-    border: 1px solid ${theme.styles.colors.color5};
-    background-color: ${theme.styles.colors.color5};
+    border: 1px solid ${theme.styles.colors["color5"]};
+    background-color: ${theme.styles.colors["color5"]};
     width: 100%;
     padding: 10px;
     border-radius: ${theme.styles.borderRadius};
     box-sizing: border-box;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    ${theme.styles.typography.paragraph1};
+    ${theme.styles.typography["paragraph1"]};
 
     &:focus {
-        border-color: ${theme.styles.colors.color2};
+        border-color: ${theme.styles.colors["color2"]};
         box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
         outline: none;
     }

diff --git a/apps/theme/layouts/forms/DefaultFormLayout/fields/components/Field.tsx b/apps/theme/layouts/forms/DefaultFormLayout/fields/components/Field.tsx
@@ -4,6 +4,6 @@ import theme from "../../../../../theme";
 export const Field = styled.div`
     width: 100%;
     box-sizing: border-box;
-    ${theme.styles.typography.paragraph1};
+    ${theme.styles.typography["paragraph1"]};
     background-color: var(--webiny-theme-color-surface, #ffffff);
 `;
diff --git a/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldLabel.tsx b/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldLabel.tsx
@@ -5,7 +5,7 @@ export const FieldLabel = styled.label`
     width: 100%;
     display: inline-block;
     margin: 0 0 5px 1px;
-    ${theme.breakpoints.mobile} {
+    ${theme.breakpoints["mobile-landscape"]} {
         text-align: left !important;
     }
 `;
diff --git a/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldMessage.tsx b/apps/theme/layouts/forms/DefaultFormLayout/fields/components/FieldMessage.tsx
@@ -5,8 +5,9 @@ import theme from "../../../../../theme";
 const Wrapper = styled.div<{ isInvalid: boolean }>`
   margin-left: 2px;
   margin-top: 5px;
-  ${theme.styles.typography.paragraph2};
-  color: ${props => (props.isInvalid ? theme.styles.colors.color1 : theme.styles.colors.color2)};
+  ${theme.styles.typography["paragraph2"]};
+  color: ${props =>
+      props.isInvalid ? theme.styles.colors["color1"] : theme.styles.colors["color2"]};
 
   ${theme.breakpoints["mobile-landscape"]} {
     text-align: left !important;

diff --git a/packages/cwp-template-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout.tsx b/packages/cwp-template-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout.tsx
@@ -31,7 +31,9 @@ const DefaultFormLayout: FormLayoutComponent = ({
     submit,
     formData,
     ReCaptcha,
-    TermsOfService
+    reCaptchaEnabled,
+    TermsOfService,
+    termsOfServiceEnabled
 }) => {
     // Is the form in loading (submitting) state?
     const [loading, setLoading] = useState(false);
@@ -59,7 +61,7 @@ const DefaultFormLayout: FormLayoutComponent = ({
     }
 
     return (
-        /* "onSubmit" callback gets triggered once all of the fields are valid. */
+        /* "onSubmit" callback gets triggered once all the fields are valid. */
         /* We also pass the default values for all fields via the getDefaultValues callback. */
         <Form onSubmit={submitForm} data={getDefaultValues()}>
             {({ submit }) => (
@@ -74,8 +76,8 @@ const DefaultFormLayout: FormLayoutComponent = ({
                         </Row>
                     ))}
 
-                    <TermsOfServiceSection component={TermsOfService} />
-                    <ReCaptchaSection component={ReCaptcha} />
+                    {termsOfServiceEnabled && <TermsOfServiceSection component={TermsOfService} />}
+                    {reCaptchaEnabled && <ReCaptchaSection component={ReCaptcha} />}
 
                     <SubmitButton onClick={submit} loading={loading}>
                         {formData.settings.submitButtonLabel || "Submit"}

diff --git a/...emplate-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/SuccessMessage.tsx b/...emplate-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/SuccessMessage.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { FbFormModel } from "@webiny/app-form-builder/types";
 import { RichTextRenderer } from "@webiny/react-rich-text-renderer";
 import styled from "@emotion/styled";
-import { typography } from "../../../theme";
+import theme from "./../../../theme";
 
 const DEFAULT_MESSAGE = "Thank you for your submission!";
 
@@ -28,12 +28,8 @@ const CheckmarkIcon = styled(({ className }) => (
     height: 100px;
 `;
 
-const Heading = styled.div`
-    ${typography.heading1};
-`;
-const Message = styled.div`
-    ${typography.paragraph1};
-`;
+const Heading = styled.div(theme.styles.typography["heading1"]);
+const Message = styled.div(theme.styles.typography["paragraph1"]);
 
 const Wrapper = styled.div`
     width: 100%;

diff --git a/...-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/TermsOfServiceSection.tsx b/...-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/TermsOfServiceSection.tsx
@@ -13,15 +13,15 @@ import {
     TermsOfServiceChildrenFunction
 } from "@webiny/app-page-builder-elements/renderers/form/types";
 import styled from "@emotion/styled";
-import { typography } from "../../../theme";
+import theme from "../../../theme";
 
 interface Props {
     component: TermsOfServiceComponent;
 }
 
 const RteFieldLabel = styled(FieldLabel)`
     .rte-block-paragraph {
-        ${typography.paragraph1};
+        ${theme.styles.typography["paragraph1"]};
         margin: 0;
     }
 `;

diff --git a/...mplate-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/Checkbox.tsx b/...mplate-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/Checkbox.tsx
@@ -5,7 +5,7 @@ import { Field } from "./components/Field";
 import { FieldMessage } from "./components/FieldMessage";
 import { FieldLabel } from "./components/FieldLabel";
 import styled from "@emotion/styled";
-import { colors, borderRadius } from "../../../../theme";
+import theme from "../../../../theme";
 
 export const CheckboxGroup = styled.div`
     align-items: center;
@@ -16,15 +16,15 @@ export const CheckboxGroup = styled.div`
 
 export const CheckboxButton = styled.input`
     margin-left: 0;
-    background-color: ${colors.color5};
+    background-color: ${theme.styles.colors["color5"]};
     min-width: 25px;
     width: 25px;
     height: 25px;
     -webkit-appearance: none;
-    border-radius: ${borderRadius};
+    border-radius: ${theme.styles.borderRadius};
 
     &:focus {
-        border-color: ${colors.color2};
+        border-color: ${theme.styles.colors["color2"]};
         box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
         outline: none;
     }

diff --git a/...-template-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/Input.tsx b/...-template-aws/template/common/apps/theme/layouts/forms/DefaultFormLayout/fields/Input.tsx
@@ -6,25 +6,25 @@ import styled from "@emotion/styled";
 import { FieldMessage } from "./components/FieldMessage";
 import { FieldLabel } from "./components/FieldLabel";
 import { Field } from "./components/Field";
-import { colors, borderRadius, typography } from "../../../../theme";
+import theme from "../../../../theme";
 
 interface InputProps {
     field: FormRenderFbFormModelField;
     type?: string;
 }
 
 const StyledInput = styled.input`
-    border: 1px solid ${colors.color5};
-    background-color: ${colors.color5};
+    border: 1px solid ${theme.styles.colors["color5"]};
+    background-color: ${theme.styles.colors["color5"]};
     width: 100%;
     padding: 10px;
-    border-radius: ${borderRadius};
+    border-radius: ${theme.styles.borderRadius};
     box-sizing: border-box;
     transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-    ${typography.paragraph1};
+    ${theme.styles.typography["paragraph1"]};
 
     &:focus {
-        border-color: ${colors.color2};
+        border-color: ${theme.styles.colors["color2"]};
         box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
         outline: none;
     }