From 39cd6ddc0057805ce8a8af6977728db3ef841b07 Mon Sep 17 00:00:00 2001
From: Shayne Marc Enzo Ahchoon
 <32307964+shayneahchoon@users.noreply.github.com>
Date: Mon, 13 May 2024 10:42:00 +0100
Subject: [PATCH] WSTEAM1-969: Add Checkbox (#11610)

* WSTEAM1-969: Add Checkbox

* WSTEAM1-969: Merge conflicts

* WSTEAM1-969: Refactor

* WSTEAM1-969: Update snapshots

* WSTEAM1-969: Update margin
---
 .../send/[id]/FormField/Checkbox.tsx          |  32 +++--
 .../send/[id]/FormField/EmailInput.tsx        |  27 +++--
 .../send/[id]/FormField/FieldLabel.tsx        |   5 +-
 .../[service]/send/[id]/FormField/File.tsx    |  29 +++--
 .../send/[id]/FormField/Telephone.tsx         |  27 +++--
 .../send/[id]/FormField/TextArea.tsx          |  27 +++--
 .../send/[id]/FormField/TextInput.tsx         |  27 +++--
 .../__snapshots__/index.test.tsx.snap         | 114 +++++++++++++-----
 .../[service]/send/[id]/FormField/index.tsx   |   3 +-
 .../[service]/send/[id]/FormField/styles.ts   |  41 ++++++-
 .../pages/[service]/send/[id]/types.ts        |   1 +
 11 files changed, 231 insertions(+), 102 deletions(-)

diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/Checkbox.tsx b/ws-nextjs-app/pages/[service]/send/[id]/FormField/Checkbox.tsx
index 2abf38d6307..d97326a7961 100644
--- a/ws-nextjs-app/pages/[service]/send/[id]/FormField/Checkbox.tsx
+++ b/ws-nextjs-app/pages/[service]/send/[id]/FormField/Checkbox.tsx
@@ -1,5 +1,8 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { InputProps } from '../types';
+import Label from './FieldLabel';
+import styles from './styles';
 
 export default ({
   id,
@@ -7,18 +10,25 @@ export default ({
   handleChange,
   inputState,
   describedBy,
+  label,
 }: InputProps) => {
   const { isValid, value = false, required } = inputState;
   return (
-    <input
-      id={id}
-      name={name}
-      type="checkbox"
-      checked={value as boolean}
-      onChange={e => handleChange(e.target.name, e.target.checked)}
-      aria-invalid={!isValid}
-      aria-required={required}
-      aria-describedby={describedBy}
-    />
+    <div css={[styles.checkboxContainer]}>
+      <input
+        css={[styles.checkbox, styles.focusIndicator]}
+        id={id}
+        name={name}
+        type="checkbox"
+        checked={value as boolean}
+        onChange={e => handleChange(e.target.name, e.target.checked)}
+        aria-invalid={!isValid}
+        aria-required={required}
+        aria-describedby={describedBy}
+      />
+      <Label id={id} css={[styles.checkboxLabel]}>
+        {label}
+      </Label>
+    </div>
   );
 };
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/EmailInput.tsx b/ws-nextjs-app/pages/[service]/send/[id]/FormField/EmailInput.tsx
index c1d75dfe47d..4acda5fd14c 100644
--- a/ws-nextjs-app/pages/[service]/send/[id]/FormField/EmailInput.tsx
+++ b/ws-nextjs-app/pages/[service]/send/[id]/FormField/EmailInput.tsx
@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { InputProps } from '../types';
+import Label from './FieldLabel';
 import styles from './styles';
 
 export default ({
@@ -9,19 +10,23 @@ export default ({
   handleChange,
   inputState,
   describedBy,
+  label,
 }: InputProps) => {
   const { isValid, value = '', required } = inputState;
   return (
-    <input
-      css={[styles.textField, styles.focusIndicator]}
-      id={id}
-      name={name}
-      type="email"
-      value={value as string}
-      onChange={e => handleChange(e.target.name, e.target.value)}
-      aria-invalid={!isValid}
-      aria-required={required}
-      aria-describedby={describedBy}
-    />
+    <>
+      <Label id={id}>{label}</Label>
+      <input
+        css={[styles.textField, styles.focusIndicator]}
+        id={id}
+        name={name}
+        type="email"
+        value={value as string}
+        onChange={e => handleChange(e.target.name, e.target.value)}
+        aria-invalid={!isValid}
+        aria-required={required}
+        aria-describedby={describedBy}
+      />
+    </>
   );
 };
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/FieldLabel.tsx b/ws-nextjs-app/pages/[service]/send/[id]/FormField/FieldLabel.tsx
index ac5851d22ad..ce145023305 100644
--- a/ws-nextjs-app/pages/[service]/send/[id]/FormField/FieldLabel.tsx
+++ b/ws-nextjs-app/pages/[service]/send/[id]/FormField/FieldLabel.tsx
@@ -8,8 +8,9 @@ import styles from './styles';
 export default ({
   id,
   children,
-}: PropsWithChildren<{ id: InputProps['id'] }>) => (
-  <Text as="label" htmlFor={id} css={styles.fieldLabel}>
+  className,
+}: PropsWithChildren<{ id: InputProps['id']; className?: string }>) => (
+  <Text as="label" className={className} htmlFor={id} css={styles.fieldLabel}>
     {children}
   </Text>
 );
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/File.tsx b/ws-nextjs-app/pages/[service]/send/[id]/FormField/File.tsx
index 8d0bd3ddac0..7589b31cfcd 100644
--- a/ws-nextjs-app/pages/[service]/send/[id]/FormField/File.tsx
+++ b/ws-nextjs-app/pages/[service]/send/[id]/FormField/File.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { InputProps } from '../types';
+import Label from './FieldLabel';
 
 export default ({
   id,
@@ -7,20 +8,24 @@ export default ({
   handleChange,
   inputState,
   describedBy,
+  label,
 }: InputProps) => {
   const { isValid, required } = inputState;
   return (
-    <input
-      id={id}
-      name={name}
-      type="file"
-      onChange={e =>
-        e.target.files && handleChange(e.target.name, e.target.files)
-      }
-      multiple
-      aria-invalid={!isValid}
-      aria-required={required}
-      aria-describedby={describedBy}
-    />
+    <>
+      <Label id={id}>{label}</Label>
+      <input
+        id={id}
+        name={name}
+        type="file"
+        onChange={e =>
+          e.target.files && handleChange(e.target.name, e.target.files)
+        }
+        multiple
+        aria-invalid={!isValid}
+        aria-required={required}
+        aria-describedby={describedBy}
+      />
+    </>
   );
 };
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/Telephone.tsx b/ws-nextjs-app/pages/[service]/send/[id]/FormField/Telephone.tsx
index 7b6a3eacd83..fe68739a956 100644
--- a/ws-nextjs-app/pages/[service]/send/[id]/FormField/Telephone.tsx
+++ b/ws-nextjs-app/pages/[service]/send/[id]/FormField/Telephone.tsx
@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { InputProps } from '../types';
+import Label from './FieldLabel';
 import styles from './styles';
 
 export default ({
@@ -9,19 +10,23 @@ export default ({
   handleChange,
   inputState,
   describedBy,
+  label,
 }: InputProps) => {
   const { isValid, value = '', required } = inputState;
   return (
-    <input
-      id={id}
-      css={[styles.textField, styles.focusIndicator]}
-      name={name}
-      type="tel"
-      value={value as string}
-      onChange={e => handleChange(e.target.name, e.target.value)}
-      aria-invalid={!isValid}
-      aria-required={required}
-      aria-describedby={describedBy}
-    />
+    <>
+      <Label id={id}>{label}</Label>
+      <input
+        id={id}
+        css={[styles.textField, styles.focusIndicator]}
+        name={name}
+        type="tel"
+        value={value as string}
+        onChange={e => handleChange(e.target.name, e.target.value)}
+        aria-invalid={!isValid}
+        aria-required={required}
+        aria-describedby={describedBy}
+      />
+    </>
   );
 };
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/TextArea.tsx b/ws-nextjs-app/pages/[service]/send/[id]/FormField/TextArea.tsx
index 7a39a0da190..b889ca1e885 100644
--- a/ws-nextjs-app/pages/[service]/send/[id]/FormField/TextArea.tsx
+++ b/ws-nextjs-app/pages/[service]/send/[id]/FormField/TextArea.tsx
@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { InputProps } from '../types';
+import Label from './FieldLabel';
 import styles from './styles';
 
 export default ({
@@ -9,20 +10,24 @@ export default ({
   handleChange,
   inputState,
   describedBy,
+  label,
 }: InputProps) => {
   const { isValid, value = '', required } = inputState;
 
   return (
-    <textarea
-      id={id}
-      css={[styles.textField, styles.textArea, styles.focusIndicator]}
-      name={name}
-      value={value as string}
-      onChange={e => handleChange(e.target.name, e.target.value)}
-      aria-invalid={!isValid}
-      aria-required={required}
-      aria-describedby={describedBy}
-      rows={4}
-    />
+    <>
+      <Label id={id}>{label}</Label>
+      <textarea
+        id={id}
+        css={[styles.textField, styles.textArea, styles.focusIndicator]}
+        name={name}
+        value={value as string}
+        onChange={e => handleChange(e.target.name, e.target.value)}
+        aria-invalid={!isValid}
+        aria-required={required}
+        aria-describedby={describedBy}
+        rows={4}
+      />
+    </>
   );
 };
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/TextInput.tsx b/ws-nextjs-app/pages/[service]/send/[id]/FormField/TextInput.tsx
index 665eaafc1ca..cfb826130c7 100644
--- a/ws-nextjs-app/pages/[service]/send/[id]/FormField/TextInput.tsx
+++ b/ws-nextjs-app/pages/[service]/send/[id]/FormField/TextInput.tsx
@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { InputProps } from '../types';
+import Label from './FieldLabel';
 import styles from './styles';
 
 export default ({
@@ -9,19 +10,23 @@ export default ({
   handleChange,
   inputState,
   describedBy,
+  label,
 }: InputProps) => {
   const { isValid, value = '', required } = inputState;
   return (
-    <input
-      css={[styles.textField, styles.focusIndicator]}
-      id={id}
-      name={name}
-      type="text"
-      value={value as string}
-      onChange={e => handleChange(e.target.name, e.target.value)}
-      aria-invalid={!isValid}
-      aria-required={required}
-      aria-describedby={describedBy}
-    />
+    <>
+      <Label id={id}>{label}</Label>
+      <input
+        css={[styles.textField, styles.focusIndicator]}
+        id={id}
+        name={name}
+        type="text"
+        value={value as string}
+        onChange={e => handleChange(e.target.name, e.target.value)}
+        aria-invalid={!isValid}
+        aria-required={required}
+        aria-describedby={describedBy}
+      />
+    </>
   );
 };
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/__snapshots__/index.test.tsx.snap b/ws-nextjs-app/pages/[service]/send/[id]/FormField/__snapshots__/index.test.tsx.snap
index 9b663b12e90..35734f0e21c 100644
--- a/ws-nextjs-app/pages/[service]/send/[id]/FormField/__snapshots__/index.test.tsx.snap
+++ b/ws-nextjs-app/pages/[service]/send/[id]/FormField/__snapshots__/index.test.tsx.snap
@@ -5,9 +5,8 @@ exports[`FormField should render a checkbox input with an associated label 1`] =
   margin-top: 1rem;
 }
 
-.emotion-0 textarea,
-.emotion-0 input {
-  display: block;
+.emotion-0:nth-child(n+2) {
+  margin-top: 2rem;
 }
 
 .emotion-0:nth-child(5) {
@@ -24,6 +23,56 @@ exports[`FormField should render a checkbox input with an associated label 1`] =
 }
 
 .emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.emotion-2 {
+  display: inline-block;
+  -webkit-flex: initial;
+  -ms-flex: initial;
+  flex: initial;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  box-sizing: border-box;
+  border: solid 0.0625rem #141414;
+  margin-bottom: 0.5rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+}
+
+.emotion-2:checked::after {
+  content: "";
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 117.65 98.87'%3E%3Cpath d='M96.64 0L46.11 60.23 17.63 36.34 0 57.35l28.47 23.89 21.01 17.63 17.63-21.01 50.54-60.22L96.64 0z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  -webkit-background-position: 50%;
+  background-position: 50%;
+  -webkit-background-size: 0.889rem;
+  background-size: 0.889rem;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-2:focus {
+  outline: 0.1875rem solid #FFFFFF;
+  box-shadow: 0 0 0 0.1875rem #000000;
+  outline-offset: 0.1875rem;
+}
+
+.emotion-3 {
   color: #141414;
   font-size: 0.9375rem;
   line-height: 1.25rem;
@@ -32,17 +81,23 @@ exports[`FormField should render a checkbox input with an associated label 1`] =
   font-weight: 400;
   display: inline-block;
   margin-bottom: 0.5rem;
+  -webkit-flex: auto;
+  -ms-flex: auto;
+  flex: auto;
+  -webkit-margin-start: 1rem;
+  margin-inline-start: 1rem;
+  cursor: pointer;
 }
 
 @media (min-width: 20rem) and (max-width: 37.4375rem) {
-  .emotion-1 {
+  .emotion-3 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
 }
 
 @media (min-width: 37.5rem) {
-  .emotion-1 {
+  .emotion-3 {
     font-size: 1rem;
     line-height: 1.25rem;
   }
@@ -52,20 +107,25 @@ exports[`FormField should render a checkbox input with an associated label 1`] =
   <div
     class="emotion-0"
   >
-    <label
+    <div
       class="emotion-1"
-      for="testCheckboxID"
     >
-      This is a text field
-    </label>
-    <input
-      aria-describedby="testCheckboxID-error"
-      aria-invalid="false"
-      aria-required="false"
-      id="testCheckboxID"
-      name="testCheckboxID"
-      type="checkbox"
-    />
+      <input
+        aria-describedby="testCheckboxID-error"
+        aria-invalid="false"
+        aria-required="false"
+        class="emotion-2"
+        id="testCheckboxID"
+        name="testCheckboxID"
+        type="checkbox"
+      />
+      <label
+        class="emotion-3"
+        for="testCheckboxID"
+      >
+        This is a text field
+      </label>
+    </div>
   </div>
 </div>
 `;
@@ -75,9 +135,8 @@ exports[`FormField should render a tel input with an associated label 1`] = `
   margin-top: 1rem;
 }
 
-.emotion-0 textarea,
-.emotion-0 input {
-  display: block;
+.emotion-0:nth-child(n+2) {
+  margin-top: 2rem;
 }
 
 .emotion-0:nth-child(5) {
@@ -179,9 +238,8 @@ exports[`FormField should render a text input with an associated label 1`] = `
   margin-top: 1rem;
 }
 
-.emotion-0 textarea,
-.emotion-0 input {
-  display: block;
+.emotion-0:nth-child(n+2) {
+  margin-top: 2rem;
 }
 
 .emotion-0:nth-child(5) {
@@ -283,9 +341,8 @@ exports[`FormField should render a textarea input with an associated label 1`] =
   margin-top: 1rem;
 }
 
-.emotion-0 textarea,
-.emotion-0 input {
-  display: block;
+.emotion-0:nth-child(n+2) {
+  margin-top: 2rem;
 }
 
 .emotion-0:nth-child(5) {
@@ -387,9 +444,8 @@ exports[`FormField should render an email input with an associated label 1`] = `
   margin-top: 1rem;
 }
 
-.emotion-0 textarea,
-.emotion-0 input {
-  display: block;
+.emotion-0:nth-child(n+2) {
+  margin-top: 2rem;
 }
 
 .emotion-0:nth-child(5) {
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/index.tsx b/ws-nextjs-app/pages/[service]/send/[id]/FormField/index.tsx
index 90098c3a9f7..817eab59852 100644
--- a/ws-nextjs-app/pages/[service]/send/[id]/FormField/index.tsx
+++ b/ws-nextjs-app/pages/[service]/send/[id]/FormField/index.tsx
@@ -10,7 +10,6 @@ import Checkbox from './Checkbox';
 import Telephone from './Telephone';
 import TextArea from './TextArea';
 import File from './File';
-import Label from './FieldLabel';
 import InvalidMessageBox from './InvalidMessageBox';
 
 const FormComponents: Record<
@@ -61,8 +60,8 @@ const FormField = ({
 
   return (
     <div css={styles.formField}>
-      <Label id={id}>{label}</Label>
       <Component
+        label={label}
         id={id}
         name={id}
         handleChange={handleChange}
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/FormField/styles.ts b/ws-nextjs-app/pages/[service]/send/[id]/FormField/styles.ts
index 2ac734d11c8..edf6e81a958 100644
--- a/ws-nextjs-app/pages/[service]/send/[id]/FormField/styles.ts
+++ b/ws-nextjs-app/pages/[service]/send/[id]/FormField/styles.ts
@@ -2,11 +2,13 @@ import { focusIndicatorThickness } from '#app/components/ThemeProvider/focusIndi
 import pixelsToRem from '#app/utilities/pixelsToRem';
 import { Theme, css } from '@emotion/react';
 
+const CHECK_IMG = `data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 117.65 98.87'%3E%3Cpath d='M96.64 0L46.11 60.23 17.63 36.34 0 57.35l28.47 23.89 21.01 17.63 17.63-21.01 50.54-60.22L96.64 0z'/%3E%3C/svg%3E`;
+
 export default {
   formField: ({ spacings, palette, mq }: Theme) =>
     css({
-      'textarea, input': {
-        display: 'block',
+      '&:nth-child(n+2)': {
+        marginTop: `${spacings.QUADRUPLE}rem`,
       },
 
       marginTop: `${spacings.DOUBLE}rem`,
@@ -45,8 +47,43 @@ export default {
       ...fontVariants.sansRegular,
       ...fontSizes.pica,
     }),
+  checkboxContainer: () =>
+    css({
+      display: 'flex',
+      flexWrap: 'nowrap',
+    }),
+
   textArea: () =>
     css({
       resize: 'none',
     }),
+  checkboxLabel: ({ spacings }: Theme) =>
+    css({
+      flex: 'auto',
+      marginInlineStart: `${spacings.DOUBLE}rem`,
+      cursor: 'pointer',
+    }),
+  checkbox: ({ palette, spacings }: Theme) =>
+    css({
+      display: 'inline-block',
+      flex: 'initial',
+      flexShrink: 0,
+      width: '30px',
+      height: '30px',
+      cursor: 'pointer',
+      boxSizing: 'border-box',
+      border: `solid 0.0625rem ${palette.GREY_10}`,
+      marginBottom: `${spacings.FULL}rem`,
+      appearance: 'none',
+      '&:checked::after': {
+        content: '""',
+        backgroundImage: `url("${CHECK_IMG}")`,
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: '50%',
+        backgroundSize: '0.889rem',
+        display: 'inline-block',
+        width: '100%',
+        height: '100%',
+      },
+    }),
 };
diff --git a/ws-nextjs-app/pages/[service]/send/[id]/types.ts b/ws-nextjs-app/pages/[service]/send/[id]/types.ts
index e68819fa92e..2e0780eaeb4 100644
--- a/ws-nextjs-app/pages/[service]/send/[id]/types.ts
+++ b/ws-nextjs-app/pages/[service]/send/[id]/types.ts
@@ -25,6 +25,7 @@ export type OnChangeHandler = (
 export type InputProps = {
   id: string;
   name: string;
+  label: string;
   handleChange: (name: OnChangeInputName, value: OnChangeInputValue) => void;
   inputState: FieldData;
   describedBy: string;