WSTEAM1-969: Add Checkbox (#11610)

* WSTEAM1-969: Add Checkbox * WSTEAM1-969: Merge conflicts * WSTEAM1-969: Refactor * WSTEAM1-969: Update snapshots * WSTEAM1-969: Update margin
bbc · May 13, 2024 · 39cd6dd · 39cd6dd
1 parent 2637ba8
commit 39cd6dd
Show file tree

Hide file tree

Showing 11 changed files with 231 additions and 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
@@ -1,24 +1,34 @@
-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,
   name,
   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
@@ -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
@@ -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
@@ -1,26 +1,31 @@
 import React from 'react';
 import { InputProps } from '../types';
+import Label from './FieldLabel';
 
 export default ({
   id,
   name,
   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
@@ -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
@@ -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
@@ -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}
+      />
+    </>
   );
 };