From 1a40a1653278b8b1386d250af961140687580d34 Mon Sep 17 00:00:00 2001
From: Sam Yeager <samantha.yeager@lifeomic.com>
Date: Sat, 9 Jul 2022 16:52:11 -0700
Subject: [PATCH 01/10] refactor: add right margin to inputs

---
 src/components/NumberFormat/UnitNumberFormatField.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/NumberFormat/UnitNumberFormatField.tsx b/src/components/NumberFormat/UnitNumberFormatField.tsx
index fa55c851..3292117b 100644
--- a/src/components/NumberFormat/UnitNumberFormatField.tsx
+++ b/src/components/NumberFormat/UnitNumberFormatField.tsx
@@ -12,6 +12,7 @@ const useStyles = makeStyles(
     textField: {
       marginTop: theme.spacing(2),
       marginBottom: theme.spacing(1),
+      marginRight: theme.spacing(2),
     },
   }),
   { name: UnitNumberFormatFieldStylesKey }

From d9aa92f1008634738cd56547cc1ebbcccd8bf665 Mon Sep 17 00:00:00 2001
From: Sam Yeager <samantha.yeager@lifeomic.com>
Date: Sat, 9 Jul 2022 16:53:12 -0700
Subject: [PATCH 02/10] refactor: rename phone number input story

---
 .../NumberFormat/PhoneNumberFormatField.stories.tsx           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/stories/components/NumberFormat/PhoneNumberFormatField.stories.tsx b/stories/components/NumberFormat/PhoneNumberFormatField.stories.tsx
index 525d931c..78fb5c7e 100644
--- a/stories/components/NumberFormat/PhoneNumberFormatField.stories.tsx
+++ b/stories/components/NumberFormat/PhoneNumberFormatField.stories.tsx
@@ -18,8 +18,8 @@ const PhoneNumberFormatFieldStory: React.FC = () => {
   );
 };
 
-storiesOf('Form Components/Phone Input', module).add(
-  'Default',
+storiesOf('Form Components/Number Format', module).add(
+  'Phone Number',
   () => <PhoneNumberFormatFieldStory />,
   { readme: { content: defaultMd } }
 );

From d384936c6890da79bd4e9d03f45220b7b5ffbd50 Mon Sep 17 00:00:00 2001
From: Sam Yeager <samantha.yeager@lifeomic.com>
Date: Sat, 9 Jul 2022 16:56:22 -0700
Subject: [PATCH 03/10] feat: add unitNumberFormat story

---
 .../UnitNumberFormatField.stories.tsx         | 46 +++++++++++
 .../NumberFormat/unitNumberFormat.md          | 77 +++++++++++++++++++
 2 files changed, 123 insertions(+)
 create mode 100644 stories/components/NumberFormat/UnitNumberFormatField.stories.tsx
 create mode 100644 stories/components/NumberFormat/unitNumberFormat.md

diff --git a/stories/components/NumberFormat/UnitNumberFormatField.stories.tsx b/stories/components/NumberFormat/UnitNumberFormatField.stories.tsx
new file mode 100644
index 00000000..8dce75b1
--- /dev/null
+++ b/stories/components/NumberFormat/UnitNumberFormatField.stories.tsx
@@ -0,0 +1,46 @@
+import { Container } from '../../storyComponents/Container';
+import { UnitNumberFormatField } from '../../../src/components/NumberFormat';
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import md from './unitNumberFormat.md';
+
+const UnitNumberFormatFieldStory: React.FC = () => {
+  const [value, setValue] = React.useState(56);
+
+  return (
+    <Container containerStyles={{ flexWrap: 'wrap' }}>
+      <UnitNumberFormatField
+        label="Some Unit"
+        value={value}
+        units={'unit'}
+        onChange={(value) => setValue(value)}
+      />
+      <UnitNumberFormatField
+        label="Shortform Unit"
+        value={value}
+        units={'in'}
+        onChange={(value) => setValue(value)}
+      />
+      <UnitNumberFormatField
+        label="Longform Unit"
+        value={value}
+        units={'inches'}
+        onChange={(value) => setValue(value)}
+      />
+      <UnitNumberFormatField
+        label="Prefix Unit, 2 Decimals"
+        value={value}
+        units={'£'}
+        prefixUnits
+        decimalScale={2}
+        onChange={(value) => setValue(value)}
+      />
+    </Container>
+  );
+};
+
+storiesOf('Form Components/Number Format', module).add(
+  'Unit Input',
+  () => <UnitNumberFormatFieldStory />,
+  { readme: { content: md } }
+);
diff --git a/stories/components/NumberFormat/unitNumberFormat.md b/stories/components/NumberFormat/unitNumberFormat.md
new file mode 100644
index 00000000..a38b5aba
--- /dev/null
+++ b/stories/components/NumberFormat/unitNumberFormat.md
@@ -0,0 +1,77 @@
+# Unit Number Format Field
+
+An input component for entering a number pre- or postfixed with a unit string; it extends the [Chroma TextField component](https://lifeomic.github.io/chroma-react/?path=/story/form-components-textfield--all).
+
+<!-- STORY -->
+
+## Import
+
+```js
+import { UnitNumberFormatField } from '@lifeomic/chroma-react/components/NumberFormat';
+```
+
+## Usage
+
+```jsx
+<UnitNumberFormatField
+  value={someValue}
+  onChange={(value) => {
+    handleChange(value);
+  }}
+  units="in"
+  label="Length"
+/>
+```
+
+### Label
+
+The label to display for the element.
+
+```jsx
+<UnitNumberFormatField label="Volume" />
+```
+
+### Has Error
+
+Sets an error style on the element.
+
+```jsx
+<UnitNumberFormatField label="Length" hasError />
+```
+
+### Error Message
+
+Caption, error text to display underneath the element when an error occurs. For
+the message to be displayed `hasError` must be set as well.
+
+```jsx
+<UnitNumberFormatField label="Speed" hasError errorMessage="Invalid speed" />
+```
+
+### Disabled
+
+Applies the disabled state to the element.
+
+```jsx
+<UnitNumberFormatField label="Pressure" disabled />
+```
+
+**REMINDER:** If you use `disabled`, screenreaders will not announce the text
+inside of the TextField to the user, and will completely skip over this element.
+
+### Read Only
+
+Applies the read only state to the element.
+
+```jsx
+<UnitNumberFormatField label="Phone" readOnly />
+```
+
+### Accessibility
+
+- Similar to `<TextField />`, as it extends that component
+
+## Links
+
+- [Component Source](https://github.com/lifeomic/chroma-react/blob/master/src/components/NumberFormat/UnitNumberFormatField.tsx)
+- [Story Source](https://github.com/lifeomic/chroma-react/blob/master/stories/components/NumberFormat/UnitNumberFormatFieldStory.stories.tsx)

From 855fa63fd646606a9104129f42cd4efc000b431a Mon Sep 17 00:00:00 2001
From: Sam Yeager <samantha.yeager@lifeomic.com>
Date: Sat, 9 Jul 2022 17:02:55 -0700
Subject: [PATCH 04/10] feat: add priceFormatField story

---
 .../NumberFormat/PriceFormatField.stories.tsx | 39 ++++++++++
 .../components/NumberFormat/priceFormat.md    | 76 +++++++++++++++++++
 2 files changed, 115 insertions(+)
 create mode 100644 stories/components/NumberFormat/PriceFormatField.stories.tsx
 create mode 100644 stories/components/NumberFormat/priceFormat.md

diff --git a/stories/components/NumberFormat/PriceFormatField.stories.tsx b/stories/components/NumberFormat/PriceFormatField.stories.tsx
new file mode 100644
index 00000000..690d8ab1
--- /dev/null
+++ b/stories/components/NumberFormat/PriceFormatField.stories.tsx
@@ -0,0 +1,39 @@
+import { Container } from '../../storyComponents/Container';
+import { PriceFormatField } from '../../../src/components/NumberFormat';
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import md from './priceFormat.md';
+
+const PriceFormatFieldStory: React.FC = () => {
+  const [price, setPrice] = React.useState(5000);
+  const [priceMin, setPriceMin] = React.useState(500);
+  const [priceMax, setPriceMax] = React.useState(10000);
+
+  return (
+    <Container containerStyles={{ flexWrap: 'wrap' }}>
+      <PriceFormatField
+        label="Price"
+        value={price}
+        onChange={(value) => setPrice(value)}
+      />
+      <PriceFormatField
+        label="Price (min $5.00)"
+        value={priceMin}
+        min={500}
+        onChange={(value) => setPriceMin(value)}
+      />
+      <PriceFormatField
+        label="Price (max $100.00)"
+        value={priceMax}
+        max={10000}
+        onChange={(value) => setPriceMax(value)}
+      />
+    </Container>
+  );
+};
+
+storiesOf('Form Components/Number Format', module).add(
+  'Price',
+  () => <PriceFormatFieldStory />,
+  { readme: { content: md } }
+);
diff --git a/stories/components/NumberFormat/priceFormat.md b/stories/components/NumberFormat/priceFormat.md
new file mode 100644
index 00000000..9aec57dc
--- /dev/null
+++ b/stories/components/NumberFormat/priceFormat.md
@@ -0,0 +1,76 @@
+# Price Format Field
+
+An input component for entering a number in some currency; it extends the [Chroma TextField component](https://lifeomic.github.io/chroma-react/?path=/story/form-components-textfield--all). Currently only accommodates USD (\$).
+
+<!-- STORY -->
+
+## Import
+
+```js
+import { PriceFormatField } from '@lifeomic/chroma-react/components/NumberFormat';
+```
+
+## Usage
+
+```jsx
+<PriceFormatField
+  value={someValue}
+  onChange={(value) => {
+    handleChange(value);
+  }}
+  label="Monthly Costs"
+/>
+```
+
+### Label
+
+The label to display for the element.
+
+```jsx
+<PriceFormatField label="Groceries" />
+```
+
+### Has Error
+
+Sets an error style on the element.
+
+```jsx
+<PriceFormatField label="Phone Bill" hasError />
+```
+
+### Error Message
+
+Caption, error text to display underneath the element when an error occurs. For
+the message to be displayed `hasError` must be set as well.
+
+```jsx
+<PriceFormatField label="Cost" hasError errorMessage="This is required!" />
+```
+
+### Disabled
+
+Applies the disabled state to the element.
+
+```jsx
+<PriceFormatField label="Rent" disabled />
+```
+
+**REMINDER:** If you use `disabled`, screenreaders will not announce the text
+inside of the TextField to the user, and will completely skip over this element.
+
+### Read Only
+
+Applies the read only state to the element.
+
+```jsx
+<PriceFormatField label="Total" readOnly />
+```
+
+### Accessibility
+
+- Similar to `<TextField />`, as it extends that component
+
+## Links
+
+- [Component Source](https://github.com/lifeomic/chroma-react/blob/master/src/components/NumberFormat/PriceFormatField.tsx)
+- [Story Source](https://github.com/lifeomic/chroma-react/blob/master/stories/components/NumberFormat/PriceFormatFieldStory.stories.tsx)

From cf85957290beaf27e01eefb9d672a7dab2836b3c Mon Sep 17 00:00:00 2001
From: Sam Yeager <samantha.yeager@lifeomic.com>
Date: Sat, 9 Jul 2022 17:06:42 -0700
Subject: [PATCH 05/10] feat: add percentFormatField story

---
 .../PercentFormatField.stories.tsx            | 39 ++++++++++
 .../components/NumberFormat/percentFormat.md  | 76 +++++++++++++++++++
 2 files changed, 115 insertions(+)
 create mode 100644 stories/components/NumberFormat/PercentFormatField.stories.tsx
 create mode 100644 stories/components/NumberFormat/percentFormat.md

diff --git a/stories/components/NumberFormat/PercentFormatField.stories.tsx b/stories/components/NumberFormat/PercentFormatField.stories.tsx
new file mode 100644
index 00000000..313ceb80
--- /dev/null
+++ b/stories/components/NumberFormat/PercentFormatField.stories.tsx
@@ -0,0 +1,39 @@
+import { Container } from '../../storyComponents/Container';
+import { PercentFormatField } from '../../../src/components/NumberFormat';
+import { storiesOf } from '@storybook/react';
+import * as React from 'react';
+import md from './percentFormat.md';
+
+const PercentFormatFieldStory: React.FC = () => {
+  const [percent, setPercent] = React.useState(10);
+  const [percentMin, setPercentMin] = React.useState(10);
+  const [percentMax, setPercentMax] = React.useState(10);
+
+  return (
+    <Container containerStyles={{ flexWrap: 'wrap' }}>
+      <PercentFormatField
+        label="Percent"
+        value={percent}
+        onChange={(value) => setPercent(value)}
+      />
+      <PercentFormatField
+        label="Percent (min 5%)"
+        value={percentMin}
+        min={5}
+        onChange={(value) => setPercentMin(value)}
+      />
+      <PercentFormatField
+        label="Percent (max 75%)"
+        value={percentMax}
+        max={75}
+        onChange={(value) => setPercentMax(value)}
+      />
+    </Container>
+  );
+};
+
+storiesOf('Form Components/Number Format', module).add(
+  'Percent',
+  () => <PercentFormatFieldStory />,
+  { readme: { content: md } }
+);
diff --git a/stories/components/NumberFormat/percentFormat.md b/stories/components/NumberFormat/percentFormat.md
new file mode 100644
index 00000000..6b66876e
--- /dev/null
+++ b/stories/components/NumberFormat/percentFormat.md
@@ -0,0 +1,76 @@
+# Percent Format Field
+
+An input component for entering a number postfixed with a %; it extends the [Chroma TextField component](https://lifeomic.github.io/chroma-react/?path=/story/form-components-textfield--all).
+
+<!-- STORY -->
+
+## Import
+
+```js
+import { PercentFormatField } from '@lifeomic/chroma-react/components/NumberFormat';
+```
+
+## Usage
+
+```jsx
+<PercentFormatField
+  value={someValue}
+  onChange={(value) => {
+    handleChange(value);
+  }}
+  label="Tax"
+/>
+```
+
+### Label
+
+The label to display for the element.
+
+```jsx
+<PercentFormatField label="Win Rate" />
+```
+
+### Has Error
+
+Sets an error style on the element.
+
+```jsx
+<PercentFormatField label="Bonus" hasError />
+```
+
+### Error Message
+
+Caption, error text to display underneath the element when an error occurs. For
+the message to be displayed `hasError` must be set as well.
+
+```jsx
+<PercentFormatField label="Percent" hasError errorMessage="This is required!" />
+```
+
+### Disabled
+
+Applies the disabled state to the element.
+
+```jsx
+<PercentFormatField label="Population" disabled />
+```
+
+**REMINDER:** If you use `disabled`, screenreaders will not announce the text
+inside of the TextField to the user, and will completely skip over this element.
+
+### Read Only
+
+Applies the read only state to the element.
+
+```jsx
+<PercentFormatField label="Sales Tax" readOnly />
+```
+
+### Accessibility
+
+- Similar to `<TextField />`, as it extends that component
+
+## Links
+
+- [Component Source](https://github.com/lifeomic/chroma-react/blob/master/src/components/NumberFormat/PercentFormatField.tsx)
+- [Story Source](https://github.com/lifeomic/chroma-react/blob/master/stories/components/NumberFormat/PercentFormatFieldStory.stories.tsx)

From 07d1b7676860b2edd78fc5f944ad394d9addc096 Mon Sep 17 00:00:00 2001
From: Sam Yeager <samantha.yeager@lifeomic.com>
Date: Wed, 3 Aug 2022 11:14:02 -0700
Subject: [PATCH 06/10] feat: add all props to  unitNumberFormat story

---
 .../UnitNumberFormatField.stories.tsx         | 40 +++++++++++---
 .../NumberFormat/unitNumberFormat.md          | 53 +++++++++++++------
 2 files changed, 70 insertions(+), 23 deletions(-)

diff --git a/stories/components/NumberFormat/UnitNumberFormatField.stories.tsx b/stories/components/NumberFormat/UnitNumberFormatField.stories.tsx
index 8dce75b1..7bd45864 100644
--- a/stories/components/NumberFormat/UnitNumberFormatField.stories.tsx
+++ b/stories/components/NumberFormat/UnitNumberFormatField.stories.tsx
@@ -6,41 +6,65 @@ import md from './unitNumberFormat.md';
 
 const UnitNumberFormatFieldStory: React.FC = () => {
   const [value, setValue] = React.useState(56);
+  const [min, setMin] = React.useState(20);
+  const [max, setMax] = React.useState(99);
 
   return (
     <Container containerStyles={{ flexWrap: 'wrap' }}>
       <UnitNumberFormatField
         label="Some Unit"
         value={value}
-        units={'unit'}
+        units="unit"
         onChange={(value) => setValue(value)}
       />
       <UnitNumberFormatField
         label="Shortform Unit"
         value={value}
-        units={'in'}
+        units="in"
         onChange={(value) => setValue(value)}
       />
       <UnitNumberFormatField
         label="Longform Unit"
         value={value}
-        units={'inches'}
+        units="inches"
         onChange={(value) => setValue(value)}
       />
       <UnitNumberFormatField
-        label="Prefix Unit, 2 Decimals"
+        label="Prefix Unit"
         value={value}
-        units={'£'}
+        units="(in) "
         prefixUnits
+        onChange={(value) => setValue(value)}
+      />
+      <UnitNumberFormatField
+        label="2 Decimal Places"
+        value={value}
+        units="mg"
         decimalScale={2}
         onChange={(value) => setValue(value)}
       />
+      <UnitNumberFormatField
+        label="Weight (min 10)"
+        value={min}
+        units="kg"
+        min={10}
+        onChange={(value) => setMin(value)}
+      />
+      <UnitNumberFormatField
+        label="Weight (max 100)"
+        value={max}
+        units="kg"
+        max={100}
+        onChange={(value) => setMax(value)}
+      />
     </Container>
   );
 };
 
-storiesOf('Form Components/Number Format', module).add(
-  'Unit Input',
+storiesOf('Form Components/Number Format Field', module).add(
+  'Unit',
   () => <UnitNumberFormatFieldStory />,
-  { readme: { content: md } }
+  {
+    readme: { content: md },
+  }
 );
diff --git a/stories/components/NumberFormat/unitNumberFormat.md b/stories/components/NumberFormat/unitNumberFormat.md
index a38b5aba..bfd7e508 100644
--- a/stories/components/NumberFormat/unitNumberFormat.md
+++ b/stories/components/NumberFormat/unitNumberFormat.md
@@ -18,6 +18,9 @@ import { UnitNumberFormatField } from '@lifeomic/chroma-react/components/NumberF
   onChange={(value) => {
     handleChange(value);
   }}
+  onBlur={() => {
+    doSomething();
+  }}
   units="in"
   label="Length"
 />
@@ -31,40 +34,60 @@ The label to display for the element.
 <UnitNumberFormatField label="Volume" />
 ```
 
-### Has Error
+### Value
+
+Required prop; sets value variable from element value.
+
+```jsx
+<UnitNumberFormatField value={someValue} />
+```
+
+### Units
 
-Sets an error style on the element.
+Required prop; displays the units of the input value within the input.
 
 ```jsx
-<UnitNumberFormatField label="Length" hasError />
+<UnitNumberFormatField units="mL" />
 ```
 
-### Error Message
+### onChange
 
-Caption, error text to display underneath the element when an error occurs. For
-the message to be displayed `hasError` must be set as well.
+Required prop; function that runs when the value changes.
 
 ```jsx
-<UnitNumberFormatField label="Speed" hasError errorMessage="Invalid speed" />
+<UnitNumberFormatField onChange={() => doSomething())} />
 ```
 
-### Disabled
+### Minimum Value
 
-Applies the disabled state to the element.
+Sets a min value for the element. Defaults to 0.
 
 ```jsx
-<UnitNumberFormatField label="Pressure" disabled />
+<UnitNumberFormatField min={10} />
 ```
 
-**REMINDER:** If you use `disabled`, screenreaders will not announce the text
-inside of the TextField to the user, and will completely skip over this element.
+### Maximum Value
+
+Sets a max value for the element. Defaults to Number.MAX_SAFE_INTEGER.
+
+```jsx
+<UnitNumberFormatField max={100} />
+```
+
+### Decimal Scale
+
+Sets the number of decimal places for the value. Defaults to 0.
+
+```jsx
+<UnitNumberFormatField decimalScale={2} />
+```
 
-### Read Only
+### Prefix Units
 
-Applies the read only state to the element.
+Boolean. When active units are prefixed instead of postfixed.
 
 ```jsx
-<UnitNumberFormatField label="Phone" readOnly />
+<UnitNumberFormatField prefixUnits />
 ```
 
 ### Accessibility

From 551f760d8b07a1119e2a4d69754e3968f90b95e4 Mon Sep 17 00:00:00 2001
From: Sam Yeager <samantha.yeager@lifeomic.com>
Date: Wed, 3 Aug 2022 11:23:36 -0700
Subject: [PATCH 07/10] feat: add all props to percent number format field
 story

---
 .../PercentFormatField.stories.tsx            |  2 +-
 .../components/NumberFormat/percentFormat.md  | 34 ++++++++-----------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/stories/components/NumberFormat/PercentFormatField.stories.tsx b/stories/components/NumberFormat/PercentFormatField.stories.tsx
index 313ceb80..50a3bdd9 100644
--- a/stories/components/NumberFormat/PercentFormatField.stories.tsx
+++ b/stories/components/NumberFormat/PercentFormatField.stories.tsx
@@ -32,7 +32,7 @@ const PercentFormatFieldStory: React.FC = () => {
   );
 };
 
-storiesOf('Form Components/Number Format', module).add(
+storiesOf('Form Components/Number Format Field', module).add(
   'Percent',
   () => <PercentFormatFieldStory />,
   { readme: { content: md } }
diff --git a/stories/components/NumberFormat/percentFormat.md b/stories/components/NumberFormat/percentFormat.md
index 6b66876e..c9d2aea9 100644
--- a/stories/components/NumberFormat/percentFormat.md
+++ b/stories/components/NumberFormat/percentFormat.md
@@ -1,6 +1,6 @@
 # Percent Format Field
 
-An input component for entering a number postfixed with a %; it extends the [Chroma TextField component](https://lifeomic.github.io/chroma-react/?path=/story/form-components-textfield--all).
+An input component for entering a number as a percent; it leverages the [Chroma Unit Input](https://lifeomic.github.io/chroma-react/?path=/story/form-components-number-format--unit-input) with '%' postfixed as the unit.
 
 <!-- STORY -->
 
@@ -14,11 +14,11 @@ import { PercentFormatField } from '@lifeomic/chroma-react/components/NumberForm
 
 ```jsx
 <PercentFormatField
+  label="Tax"
   value={someValue}
   onChange={(value) => {
     handleChange(value);
   }}
-  label="Tax"
 />
 ```
 
@@ -27,43 +27,39 @@ import { PercentFormatField } from '@lifeomic/chroma-react/components/NumberForm
 The label to display for the element.
 
 ```jsx
-<PercentFormatField label="Win Rate" />
+<PercentFormatField label="Lose Rate" />
 ```
 
-### Has Error
+### Value
 
-Sets an error style on the element.
+Required prop; sets value variable from element value.
 
 ```jsx
-<PercentFormatField label="Bonus" hasError />
+<PercentFormatField value={someValue} />
 ```
 
-### Error Message
+### onChange
 
-Caption, error text to display underneath the element when an error occurs. For
-the message to be displayed `hasError` must be set as well.
+Required prop; function that runs when the value changes.
 
 ```jsx
-<PercentFormatField label="Percent" hasError errorMessage="This is required!" />
+<PercentFormatField onChange={() => doSomething())} />
 ```
 
-### Disabled
+### Minimum Value
 
-Applies the disabled state to the element.
+Sets a min value for the element. Defaults to 0.
 
 ```jsx
-<PercentFormatField label="Population" disabled />
+<PercentFormatField min={10} />
 ```
 
-**REMINDER:** If you use `disabled`, screenreaders will not announce the text
-inside of the TextField to the user, and will completely skip over this element.
-
-### Read Only
+### Maximum Value
 
-Applies the read only state to the element.
+Sets a max value for the element. Defaults to Number.MAX_SAFE_INTEGER.
 
 ```jsx
-<PercentFormatField label="Sales Tax" readOnly />
+<PercentFormatField max={100} />
 ```
 
 ### Accessibility

From 4ca4b38559b1455b3a5a6e789b3ddae0f22cb8be Mon Sep 17 00:00:00 2001
From: Sam Yeager <samantha.yeager@lifeomic.com>
Date: Wed, 3 Aug 2022 11:30:53 -0700
Subject: [PATCH 08/10] feat: add all props to Price Format Field

---
 .../NumberFormat/PriceFormatField.stories.tsx |  2 +-
 .../components/NumberFormat/priceFormat.md    | 32 ++++++++-----------
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/stories/components/NumberFormat/PriceFormatField.stories.tsx b/stories/components/NumberFormat/PriceFormatField.stories.tsx
index 690d8ab1..7b0850de 100644
--- a/stories/components/NumberFormat/PriceFormatField.stories.tsx
+++ b/stories/components/NumberFormat/PriceFormatField.stories.tsx
@@ -32,7 +32,7 @@ const PriceFormatFieldStory: React.FC = () => {
   );
 };
 
-storiesOf('Form Components/Number Format', module).add(
+storiesOf('Form Components/Number Format Field', module).add(
   'Price',
   () => <PriceFormatFieldStory />,
   { readme: { content: md } }
diff --git a/stories/components/NumberFormat/priceFormat.md b/stories/components/NumberFormat/priceFormat.md
index 9aec57dc..3ba681d3 100644
--- a/stories/components/NumberFormat/priceFormat.md
+++ b/stories/components/NumberFormat/priceFormat.md
@@ -1,6 +1,6 @@
 # Price Format Field
 
-An input component for entering a number in some currency; it extends the [Chroma TextField component](https://lifeomic.github.io/chroma-react/?path=/story/form-components-textfield--all). Currently only accommodates USD (\$).
+An input component for entering a number as a monetary value in pennies; it leverages the [Chroma Unit Input](https://lifeomic.github.io/chroma-react/?path=/story/form-components-number-format--unit-input). Currently only implements \$USD, with '\$' prefixed as the unit.
 
 <!-- STORY -->
 
@@ -14,11 +14,11 @@ import { PriceFormatField } from '@lifeomic/chroma-react/components/NumberFormat
 
 ```jsx
 <PriceFormatField
+  label="Monthly Costs"
   value={someValue}
   onChange={(value) => {
     handleChange(value);
   }}
-  label="Monthly Costs"
 />
 ```
 
@@ -30,40 +30,36 @@ The label to display for the element.
 <PriceFormatField label="Groceries" />
 ```
 
-### Has Error
+### Value
 
-Sets an error style on the element.
+Required prop; sets value variable from element value.
 
 ```jsx
-<PriceFormatField label="Phone Bill" hasError />
+<PriceFormatField value={someValue} />
 ```
 
-### Error Message
+### onChange
 
-Caption, error text to display underneath the element when an error occurs. For
-the message to be displayed `hasError` must be set as well.
+Required prop; function that runs when the value changes.
 
 ```jsx
-<PriceFormatField label="Cost" hasError errorMessage="This is required!" />
+<PriceFormatField onChange={() => doSomething())} />
 ```
 
-### Disabled
+### Minimum Value
 
-Applies the disabled state to the element.
+Sets a min value for the element. Defaults to 0.
 
 ```jsx
-<PriceFormatField label="Rent" disabled />
+<PriceFormatField min={10} />
 ```
 
-**REMINDER:** If you use `disabled`, screenreaders will not announce the text
-inside of the TextField to the user, and will completely skip over this element.
-
-### Read Only
+### Maximum Value
 
-Applies the read only state to the element.
+Sets a max value for the element. Defaults to Number.MAX_SAFE_INTEGER.
 
 ```jsx
-<PriceFormatField label="Total" readOnly />
+<PriceFormatField max={100} />
 ```
 
 ### Accessibility

From bed5473a1027f0e7335a496393693d0624cf7464 Mon Sep 17 00:00:00 2001
From: Sam Yeager <samantha.yeager@lifeomic.com>
Date: Wed, 3 Aug 2022 11:35:42 -0700
Subject: [PATCH 09/10] refactor: move phone input to new story group name

---
 .../NumberFormat/PhoneNumberFormatField.stories.tsx       | 2 +-
 stories/components/NumberFormat/phoneNumberFormat.md      | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/stories/components/NumberFormat/PhoneNumberFormatField.stories.tsx b/stories/components/NumberFormat/PhoneNumberFormatField.stories.tsx
index 78fb5c7e..f6ab1fad 100644
--- a/stories/components/NumberFormat/PhoneNumberFormatField.stories.tsx
+++ b/stories/components/NumberFormat/PhoneNumberFormatField.stories.tsx
@@ -18,7 +18,7 @@ const PhoneNumberFormatFieldStory: React.FC = () => {
   );
 };
 
-storiesOf('Form Components/Number Format', module).add(
+storiesOf('Form Components/Number Format Field', module).add(
   'Phone Number',
   () => <PhoneNumberFormatFieldStory />,
   { readme: { content: defaultMd } }
diff --git a/stories/components/NumberFormat/phoneNumberFormat.md b/stories/components/NumberFormat/phoneNumberFormat.md
index 85182408..eed6fb92 100644
--- a/stories/components/NumberFormat/phoneNumberFormat.md
+++ b/stories/components/NumberFormat/phoneNumberFormat.md
@@ -1,6 +1,6 @@
 # Phone Number Format Field
 
-An input component for entering a phone number, it extends the Chroma TextField component. Uses [react-phone-number-input](https://gitlab.com/catamphetamine/react-phone-number-input#readme).
+An input component for entering a phone number, it extends the Chroma TextField component. Leverages the [react-phone-number-input](https://gitlab.com/catamphetamine/react-phone-number-input#readme).
 
 <!-- STORY -->
 
@@ -52,7 +52,11 @@ Caption, error text to display underneath the element when an error occurs. For
 the message to be displayed `hasError` must be set as well.
 
 ```jsx
-<PhoneNumberFormatField label="Phone" hasError errorMessage="This is required!" />
+<PhoneNumberFormatField
+  label="Phone"
+  hasError
+  errorMessage="This is required!"
+/>
 ```
 
 ### Disabled

From 4363b440d1e785a2637a69756020cde2964d5705 Mon Sep 17 00:00:00 2001
From: Sam Yeager <samantha.yeager@lifeomic.com>
Date: Wed, 3 Aug 2022 11:43:32 -0700
Subject: [PATCH 10/10] refactor: add textfield link to phone number input

---
 stories/components/NumberFormat/phoneNumberFormat.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/components/NumberFormat/phoneNumberFormat.md b/stories/components/NumberFormat/phoneNumberFormat.md
index eed6fb92..221796e1 100644
--- a/stories/components/NumberFormat/phoneNumberFormat.md
+++ b/stories/components/NumberFormat/phoneNumberFormat.md
@@ -1,6 +1,6 @@
 # Phone Number Format Field
 
-An input component for entering a phone number, it extends the Chroma TextField component. Leverages the [react-phone-number-input](https://gitlab.com/catamphetamine/react-phone-number-input#readme).
+An input component for entering a phone number, it extends the [Chroma TextField component](https://lifeomic.github.io/chroma-react/?path=/story/form-components-textfield--all).. Leverages [react-phone-number-input](https://gitlab.com/catamphetamine/react-phone-number-input#readme).
 
 <!-- STORY -->