Improve typing

Author: Tomdango

src/util/LabelBlock.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Hint, { HintProps } from '../components/hint/Hint';
+import Label, { LabelProps } from '../components/label/Label';
+import ErrorMessage, { ErrorMessageProps } from '../components/error-message/ErrorMessage';
+
+interface LabelBlockProps {
+  elementId?: string;
+  label?: string;
+  labelProps?: LabelProps;
+  hint?: string;
+  hintProps?: HintProps;
+  error?: string | boolean;
+  errorProps?: ErrorMessageProps;
+}
+
+const LabelBlock: React.FC<LabelBlockProps> = ({
+  elementId,
+  label,
+  labelProps,
+  hint,
+  hintProps,
+  error,
+  errorProps,
+}) => (
+  <>
+    {label ? (
+      <Label id={elementId ? `${elementId}--label` : undefined} htmlFor={elementId} {...labelProps}>
+        {label}
+      </Label>
+    ) : null}
+    {hint ? (
+      <Hint id={elementId ? `${elementId}--hint` : undefined} {...hintProps}>
+        {hint}
+      </Hint>
+    ) : null}
+    {error && typeof error === 'string' ? (
+      <ErrorMessage id={elementId ? `${elementId}--error-message` : undefined} {...errorProps}>
+        {error}
+      </ErrorMessage>
+    ) : null}
+  </>
+);
+
+export default LabelBlock;

src/util/types/FormTypes.ts

@@ -0,0 +1,12 @@
+import { ErrorMessageProps } from '../../components/error-message/ErrorMessage';
+import { HintProps } from '../../components/hint/Hint';
+import { LabelProps } from '../../components/label/Label';
+
+export interface FormElementProps {
+  label?: string;
+  labelProps?: LabelProps;
+  error?: string;
+  errorProps?: ErrorMessageProps;
+  hint?: string;
+  hintProps?: HintProps
+}

src/util/types/NHSUKTypes.ts

@@ -0,0 +1,7 @@
+export type NHSUKSize = 's' | 'm' | 'l' | 'xl';
+
+export type InputWidth = '2' | '3' | '4' | '5' | '10';
+
+export type CareCardType = 'non-urgent' | 'urgent' | 'immediate';
+
+export type ColWidth = 'full' | 'three-quarters' | 'one-half' | 'two-thirds' | 'one-third' | 'one-quarter';