updates to elements and Trustee works with lookup API

d4lek · d4lek · commit 771b5c4544a4 · 2020-06-16T16:08:05.000+01:00
diff --git a/docs/Playground.js b/docs/Playground.js
@@ -1,6 +1,6 @@
 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) => {
@@ -11,13 +11,11 @@ export const Playground = (props) => {
 	);
 };
 
-console.log(process.env);
-
 export const experianApiGet = (endpoint) => {
 	return fetch(`https://api.edq.com/capture/address/v2/${endpoint}`, {
 		method: 'get',
 		headers: {
-			'Auth-Token': process.env.DOCZ_LOOKUP_API_URL,
+			'Auth-Token': process.env.GATSBY_LOOKUP_API_URL,
 		},
 	}).then((resp) => resp.json());
 };
diff --git a/packages/forms/src/elements/date/date.mdx b/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 |
diff --git a/packages/forms/src/elements/date/date.tsx b/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>
diff --git a/packages/forms/src/elements/input/input.module.scss b/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 {
diff --git a/packages/forms/src/elements/number/number.mdx b/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 |
diff --git a/packages/forms/src/elements/radio/radio.mdx b/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                    |
diff --git a/packages/forms/src/elements/select/select.mdx b/packages/forms/src/elements/select/select.mdx
@@ -8,14 +8,39 @@ import { Playground } from '@playground';
 import { Form } from 'react-final-form';
 import { FFSelect, Select } from './select';
 
-# Select Dropdown
+# Select
+
+Select component to select value from options.
+
+## When To Use
+
+- A dropdown menu for displaying choices - an elegant alternative to the native `<select>` element.
+- Utilizing Radio is recommended when there are fewer total options (less than 5).
 
 ## Usage
 
+`Inside your React project directory, run the following:`
+
+```js
+yarn add @tpr/forms
+```
+
+`or with npm`
+
+```js
+npm install @tpr/forms
+```
+
+`import items you wish to use from the library`
+
 ```js
 import { FFSelect } from '@tpr/forms';
 ```
 
+## Examples
+
+[CodeSandbox](https://codesandbox.io)
+
 <Playground>
 	{() => {
 		const FIELD_NAME = 'fruit';
@@ -53,3 +78,14 @@ import { FFSelect } 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                  |
+| checked  | true     | boolean | Specifies whether the checkbox is selected. |
diff --git a/packages/forms/src/elements/select/select.module.scss b/packages/forms/src/elements/select/select.module.scss
@@ -1,28 +1,5 @@
 @import '@tpr/theming/lib/variables.scss';
 
-.selectInput {
-	font-family: $fonts-sans-serif;
-	display: flex;
-	align-items: center;
-	width: 100%;
-	font-size: $font-size-2;
-	font-weight: $font-weight-1;
-	background: $white;
-	height: 40px;
-	outline: none;
-	padding: 0 5px;
-	cursor: default;
-}
-
-.selectInput:focus {
-	border: 4px solid $colors-neutral-7;
-	box-shadow: 0 0 0 3px $colors-warning-1;
-}
-
-.selectInput:disabled {
-	background: $colors-neutral-6;
-}
-
 .popup {
 	display: none;
 	flex: 0 0 auto;
@@ -56,10 +33,15 @@
 	display: flex;
 	align-items: center;
 	position: absolute;
-	background: $white;
+	background: none;
 	top: 9px;
 	right: 4px;
 	width: 30px;
 	height: 32px;
 	cursor: pointer;
+	outline: none;
+}
+
+.iconButton:disabled {
+	cursor: not-allowed;
 }
diff --git a/packages/forms/src/elements/select/select.tsx b/packages/forms/src/elements/select/select.tsx
@@ -78,14 +78,15 @@ export const Select: React.FC<SelectProps> = ({
 								onClick={() => toggleMenu()}
 								{...getInputProps()}
 							/>
-							<div
-								role="button"
+							<button
+								type="button"
+								disabled={disabled}
 								data-testid={`${testId}-button`}
 								className={styles.iconButton}
 								onClick={() => toggleMenu()}
 							>
 								<UnfoldMore />
-							</div>
+							</button>
 						</Flex>
 					</StyledInputLabel>
 					<Flex cfg={{ width }} className={styles.relative}>
diff --git a/packages/forms/src/elements/text/text.mdx b/packages/forms/src/elements/text/text.mdx
diff --git a/packages/layout/src/components/cards/trustee/views/address/AutoComplete.tsx b/packages/layout/src/components/cards/trustee/views/address/AutoComplete.tsx
diff --git a/packages/layout/src/components/cards/trustee/views/address/index.tsx b/packages/layout/src/components/cards/trustee/views/address/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,9 @@`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`.inputText:disabled {`
`22`		`- background: $colors-neutral-6;`
	`22`	`+ background: $colors-neutral-2;`
	`23`	`+ border-color: $colors-neutral-6;`
	`24`	`+ cursor: not-allowed;`
`23`	`25`	`}`
`24`	`26`
`25`	`27`	`.inputText-error {`