Merge pull request #82 from thepensionsregulator/feature-address-lookup-api

Feature address lookup api

Author: d4lek

.gitignore

@@ -65,7 +65,8 @@ docs.json
 .docz/public
 .idea/
 
-
+# Env variables
+.env
 
 junit.xml
 

docs/Playground.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Playground as DoczPlayground } from 'docz';
-import { CssResets } from '../packages/theming/src';
+import { CssResets } from '../packages/theming/src/theming';
+import fetch from 'node-fetch';
 
 export const Playground = (props) => {
 	return (
@@ -9,3 +10,12 @@ export const Playground = (props) => {
 		</CssResets>
 	);
 };
+
+export const experianApiGet = (endpoint) => {
+	return fetch(`https://api.edq.com/capture/address/v2/${endpoint}`, {
+		method: 'get',
+		headers: {
+			'Auth-Token': process.env.GATSBY_LOOKUP_API_URL,
+		},
+	}).then((resp) => resp.json());
+};

package.json

@@ -54,6 +54,7 @@
 		"jest": "^26.0.1",
 		"lerna": "^3.19.0",
 		"lerna-changelog": "^1.0.0",
+		"node-fetch": "^2.6.0",
 		"node-sass": "^4.14.0",
 		"npm-run-all": "^4.1.5",
 		"prettier": "^2.0.4",

packages/forms/src/elements/checkbox/checkbox.module.scss

@@ -26,8 +26,9 @@
 }
 
 .hint {
-	color: $colors-neutral-7;
+	color: $colors-neutral-6;
 	font-size: $font-size-2;
+	font-weight: $font-weight-2;
 	margin-top: $space-2;
-	margin-left: 50px;
+	margin-left: 60px;
 }

packages/forms/src/elements/checkbox/checkbox.tsx

@@ -38,7 +38,7 @@ export const Checkbox: React.FC<Partial<CheckboxIconProps>> = ({
 				) : (
 					<CheckboxBlank className={styles.checkbox} />
 				)}
-				<P cfg={{ ml: 2 }}>{label}</P>
+				<P cfg={{ ml: 4, fontWeight: 3 }}>{label}</P>
 			</label>
 			{hint && <P className={styles.hint}>{hint}</P>}
 		</StyledInputLabel>

packages/forms/src/elements/date/date.mdx

@@ -10,23 +10,35 @@ import { FFInputDate } from './date';
 import { validate } from '../../validation';
 import { renderFields } from '../../renderFields';
 
-# Date
+# Date Input
+
+To input a date.
+
+## When To Use
+
+- By entering date number in each input box, you can create a date object.
 
 ## Usage
 
+`Inside your React project directory, run the following:`
+
 ```js
-import { FFInputDate } from '@tpr/forms';
+yarn add @tpr/forms
 ```
 
-## Usage
+`or with npm`
+
+```js
+npm install @tpr/forms
+```
 
-Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum nostrum omnis ea unde totam, est
-consectetur odio! Harum vitae, sed totam aperiam consequuntur nostrum repudiandae non nemo porro,
-dolorem nulla corrupti hic consectetur eaque fuga illo numquam modi similique ipsam recusandae! Harum,
-possimus suscipit. Quibusdam totam, fugiat officiis qui nisi tempora. Accusantium corrupti similique
-et at ipsum, eveniet tempore nostrum quasi est unde modi impedit quaerat suscipit aspernatur ratione
-quo corporis? Cum dignissimos adipisci itaque sint tempore, saepe dolorem fugit quia placeat officiis
-earum rerum aspernatur similique commodi voluptates? Id ut ab cum doloremque magnam illo ipsa officia nulla ipsum.
+`import items you wish to use from the library`
+
+```js
+import { FFInputDate } from '@tpr/forms';
+```
+
+## Examples
 
 [CodeSandbox](https://codesandbox.io/s/nice-dream-xs3zp)
 
@@ -59,3 +71,15 @@ earum rerum aspernatur similique commodi voluptates? Id ut ab cum doloremque mag
 		);
 	}}
 </Playground>
+
+## API
+
+### Props
+
+| Property | Required | Type    | Description                                  |
+| -------- | -------- | ------- | -------------------------------------------- |
+| cfg      | false    | object  | FlexProps & SpaceProps                       |
+| disabled | false    | boolean | Disable checkbox                             |
+| testId   | false    | string  | data attribute for testers                   |
+| label    | true     | string  | Checkbox description                         |
+| hint     | false    | string  | More detailed description about the checkbox |

packages/forms/src/elements/date/date.tsx

@@ -47,6 +47,7 @@ type DateInputFieldProps = {
 	maxInt: number;
 	meta: any;
 	label: string;
+	disabled?: boolean;
 };
 const DateInputField: React.FC<DateInputFieldProps> = ({
 	small = true,
@@ -59,12 +60,14 @@ const DateInputField: React.FC<DateInputFieldProps> = ({
 	setMonth,
 	onBlur,
 	meta,
+	disabled,
 }) => {
 	return (
 		<label className={small ? styles.inputSmall : styles.inputLarge}>
 			<P cfg={{ fontSize: 2, fontWeight: 3, mb: 1 }}>{label}</P>
 			<Input
 				type="number"
+				disabled={disabled}
 				aria-label={ariaLabel}
 				data-testid={testId}
 				value={value}
@@ -85,7 +88,7 @@ const DateInputField: React.FC<DateInputFieldProps> = ({
 
 type InputDateProps = FieldRenderProps<string> & FieldExtraProps;
 export const InputDate: React.FC<InputDateProps> = memo(
-	({ label, hint, required, input, meta, testId = 'field', cfg }) => {
+	({ label, hint, required, input, meta, testId = 'field', cfg, disabled }) => {
 		// react-final-form types says it's a string, incorrect, it's a date object.
 		const { dd, mm, yyyy } = transformDate(meta.initial);
 		const [{ dd: day, mm: month, yyyy: year }, setState] = useReducer(
@@ -137,6 +140,7 @@ export const InputDate: React.FC<InputDateProps> = memo(
 						setMonth={(mm: number) => setState({ mm })}
 						onBlur={input.onBlur}
 						meta={meta}
+						disabled={disabled}
 					/>
 					<DateInputField
 						label="Month"
@@ -148,6 +152,7 @@ export const InputDate: React.FC<InputDateProps> = memo(
 						setMonth={(mm: number) => setState({ mm })}
 						onBlur={input.onBlur}
 						meta={meta}
+						disabled={disabled}
 					/>
 					<DateInputField
 						label="Year"
@@ -160,6 +165,7 @@ export const InputDate: React.FC<InputDateProps> = memo(
 						setMonth={(mm: number) => setState({ mm })}
 						onBlur={input.onBlur}
 						meta={meta}
+						disabled={disabled}
 					/>
 				</Flex>
 			</StyledInputLabel>

packages/forms/src/elements/input/input.module.scss

@@ -19,7 +19,9 @@
 }
 
 .inputText:disabled {
-	background: $colors-neutral-6;
+	background: $colors-neutral-2;
+	border-color: $colors-neutral-6;
+	cursor: not-allowed;
 }
 
 .inputText-error {

packages/forms/src/elements/number/number.mdx

@@ -12,15 +12,35 @@ import { renderFields } from '../../renderFields';
 
 # Number Input
 
+Enter a number within certain range with the mouse or keyboard.
+
+## When To Use
+
+- When a numeric value needs to be provided
+
 ## Usage
 
+`Inside your React project directory, run the following:`
+
 ```js
-import { Form, FFInputNumber } from '@tpr/forms';
+yarn add @tpr/forms
 ```
 
-[CodeSandbox](https://codesandbox.io)
+`or with npm`
 
-Example using field level validation
+```js
+npm install @tpr/forms
+```
+
+`import items you wish to use from the library`
+
+```js
+import { FFInputNumber } from '@tpr/forms';
+```
+
+## Examples
+
+[CodeSandbox](https://codesandbox.io)
 
 <Playground>
 	<Form onSubmit={(values) => console.log(values)}>
@@ -81,3 +101,15 @@ import { Form, validate, renderFields } from '@tpr/forms';
 		);
 	}}
 </Playground>
+
+## API
+
+### Props
+
+| Property | Required | Type    | Description                                  |
+| -------- | -------- | ------- | -------------------------------------------- |
+| cfg      | false    | object  | FlexProps & SpaceProps                       |
+| disabled | false    | boolean | Disable checkbox                             |
+| testId   | false    | string  | data attribute for testers                   |
+| label    | true     | string  | Checkbox description                         |
+| hint     | false    | string  | More detailed description about the checkbox |

packages/forms/src/elements/radio/radio.mdx

@@ -8,23 +8,36 @@ import { Playground } from '@playground';
 import { Form } from 'react-final-form';
 import { FFRadioButton } from './radio';
 
-# Radio Button
+# Radio
+
+Radio.
+
+## When To Use
+
+- Used to select a single state from multiple options.
+- The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them.
 
 ## Usage
 
+`Inside your React project directory, run the following:`
+
 ```js
-import { FFRadioButton } from '@tpr/forms';
+yarn add @tpr/forms
 ```
 
-## Usage
+`or with npm`
+
+```js
+npm install @tpr/forms
+```
 
-Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum nostrum omnis ea unde totam, est
-consectetur odio! Harum vitae, sed totam aperiam consequuntur nostrum repudiandae non nemo porro,
-dolorem nulla corrupti hic consectetur eaque fuga illo numquam modi similique ipsam recusandae! Harum,
-possimus suscipit. Quibusdam totam, fugiat officiis qui nisi tempora. Accusantium corrupti similique
-et at ipsum, eveniet tempore nostrum quasi est unde modi impedit quaerat suscipit aspernatur ratione
-quo corporis? Cum dignissimos adipisci itaque sint tempore, saepe dolorem fugit quia placeat officiis
-earum rerum aspernatur similique commodi voluptates? Id ut ab cum doloremque magnam illo ipsa officia nulla ipsum.
+`import items you wish to use from the library`
+
+```js
+import { FFRadioButton } from '@tpr/forms';
+```
+
+## Examples
 
 [CodeSandbox](https://codesandbox.io/s/lively-wood-rxcpu)
 
@@ -75,3 +88,17 @@ earum rerum aspernatur similique commodi voluptates? Id ut ab cum doloremque mag
 		);
 	}}
 </Playground>
+
+## API
+
+### Props
+
+| Property | Required | Type                 | Description                                                     |
+| -------- | -------- | -------------------- | --------------------------------------------------------------- |
+| cfg      | false    | object               | FlexProps & SpaceProps                                          |
+| disabled | false    | boolean              | Disable checkbox                                                |
+| testId   | false    | string               | data attribute for testers                                      |
+| checked  | true     | boolean              | Specifies whether the checkbox is selected.                     |
+| onChange | true     | function(evt: Event) | The callback function that is triggered when the state changes. |
+| label    | true     | string               | Checkbox description                                            |
+| hint     | false    | string               | More detailed description about the checkbox                    |