From b6415d22bffcb98dd58ba9445749fccab674cc4f Mon Sep 17 00:00:00 2001
From: Richard Walker <digitalsadhu@gmail.com>
Date: Tue, 27 Sep 2022 10:28:40 +1300
Subject: [PATCH] fix: add missing optional props to forms

---
 packages/combobox/docs/Combobox.mdx           | 29 +++++++++++++++++++
 packages/combobox/src/component.tsx           |  2 ++
 packages/combobox/src/props.ts                |  3 ++
 .../combobox/stories/Combobox.stories.tsx     | 29 +++++++++++++++++++
 packages/select/docs/Select.mdx               | 12 ++++++++
 packages/select/src/component.tsx             |  7 +++--
 packages/select/stories/Select.stories.tsx    |  2 ++
 packages/textarea/docs/TextArea.mdx           |  8 +++++
 packages/textarea/src/component.tsx           |  3 +-
 packages/textarea/src/props.ts                |  3 ++
 .../textarea/stories/TextArea.stories.tsx     |  4 +++
 packages/textfield/docs/TextField.mdx         | 11 +++++++
 packages/textfield/src/component.tsx          |  3 +-
 packages/textfield/src/props.ts               |  3 ++
 .../textfield/stories/Textfield.stories.tsx   |  6 ++++
 15 files changed, 120 insertions(+), 5 deletions(-)

diff --git a/packages/combobox/docs/Combobox.mdx b/packages/combobox/docs/Combobox.mdx
index ee2a4db1..22094d8e 100644
--- a/packages/combobox/docs/Combobox.mdx
+++ b/packages/combobox/docs/Combobox.mdx
@@ -279,6 +279,35 @@ function Example() {
 }
 ```
 
+### Optional prop
+
+Add the optional prop to indicate that the combobox field is not required. 
+
+```jsx example
+function Example() {
+  const [value, setValue] = useState('');
+
+  return (
+    <Combobox
+      label="Choose a fruit"
+      optional
+      value={value}
+      onChange={(val) => setValue(val)}
+      onSelect={(val) => {
+        alert(val);
+        setValue('');
+      }}
+      options={[
+        { value: 'Apple' },
+        { value: 'Banana' },
+        { value: 'Orange' },
+        { value: 'Pineapple' },
+      ]}
+    />
+  );
+}
+```
+
 ## Combobox Props
 
 ```props packages/combobox/src/component.tsx
diff --git a/packages/combobox/src/component.tsx b/packages/combobox/src/component.tsx
index bc41b851..53caf9c3 100644
--- a/packages/combobox/src/component.tsx
+++ b/packages/combobox/src/component.tsx
@@ -60,6 +60,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       onChange,
       onFocus,
       onBlur,
+      optional,
       ...rest
     } = props;
 
@@ -183,6 +184,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
       id,
       value: navigationValueOrInputValue,
       label,
+      optional,
       invalid,
       helpText,
       placeholder,
diff --git a/packages/combobox/src/props.ts b/packages/combobox/src/props.ts
index 25d7b5b5..4817236b 100644
--- a/packages/combobox/src/props.ts
+++ b/packages/combobox/src/props.ts
@@ -114,6 +114,9 @@ export type ComboboxProps = {
 
   /** For affix use */
   children?: React.ReactNode;
+
+  /** Whether to show optional text */
+  optional?: boolean;
 } & Omit<
   React.PropsWithoutRef<JSX.IntrinsicElements['input']>,
   'onChange' | 'type' | 'value' | 'label'
diff --git a/packages/combobox/stories/Combobox.stories.tsx b/packages/combobox/stories/Combobox.stories.tsx
index ae3c0c10..946e432b 100644
--- a/packages/combobox/stories/Combobox.stories.tsx
+++ b/packages/combobox/stories/Combobox.stories.tsx
@@ -327,3 +327,32 @@ export const AsyncFetch = () => {
     </Combobox>
   );
 };
+
+export const Optional = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <>
+      <p>
+        When the user clicks inside the text box the current value will be
+        selected (like the URL bar in browsers).
+      </p>
+      <Combobox
+        value={value}
+        onChange={(val) => setValue(val)}
+        onSelect={(val) => {
+          setValue(val);
+          action('select')(val);
+        }}
+        label="Stillingstittel"
+        optional
+        options={[
+          { value: 'Product manager' },
+          { value: 'Produktledelse' },
+          { value: 'Prosessoperatør' },
+          { value: 'Prosjekteier' },
+        ]}
+      />
+    </>
+  );
+};
\ No newline at end of file
diff --git a/packages/select/docs/Select.mdx b/packages/select/docs/Select.mdx
index d22620d9..d4b5fa26 100644
--- a/packages/select/docs/Select.mdx
+++ b/packages/select/docs/Select.mdx
@@ -62,6 +62,18 @@ Select for accessibility. If the field is labeled by a separate element, an
 `aria-labelledby` prop should be provided using the id of the labeling element
 instead.
 
+### Optional
+
+Add the optional prop to indicate that the select is not required. 
+
+```jsx example
+<Select label="Berries" optional>
+  <option value="s">Strawberries</option>
+  <option value="r">Raspberries</option>
+  <option value="c">Cloudberries</option>
+</Select>
+```
+
 ## Hint text
 
 Selects can provide additional context with `hint` if the label and placeholder
diff --git a/packages/select/src/component.tsx b/packages/select/src/component.tsx
index 95fd9058..59f10b6a 100644
--- a/packages/select/src/component.tsx
+++ b/packages/select/src/component.tsx
@@ -4,7 +4,7 @@ import { classNames } from '@chbphone55/classnames';
 import type { SelectProps } from './props';
 
 const setup = (props) => {
-  const { className, invalid, id, hint, always, label, style, ...rest } = props;
+  const { className, invalid, id, hint, always, label, style, optional, ...rest } = props;
 
   const helpId = hint ? `${id}__hint` : undefined;
 
@@ -24,6 +24,7 @@ const setup = (props) => {
         'aria-invalid': invalid,
         id,
       },
+      optional,
       help:
         always || invalid
           ? {
@@ -45,11 +46,11 @@ const setup = (props) => {
 function Select(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {
   const id = useId(props.id);
   const { attrs, classes } = setup({ ...props, id });
-  const { div, label, select, help } = attrs;
+  const { div, label, select, help, optional } = attrs;
 
   return (
     <div className={classes} {...div}>
-      {label.children && <label {...label} />}
+      {label.children && <label htmlFor={label.htmlFor}>{label.children}{optional && <span className="pl-8 font-normal text-14 text-gray-500"> (valgfritt)</span>}</label>}
       <div className="input--select__wrap">
         <select ref={ref} {...select} />
       </div>
diff --git a/packages/select/stories/Select.stories.tsx b/packages/select/stories/Select.stories.tsx
index a8e80b1d..bf1687ac 100644
--- a/packages/select/stories/Select.stories.tsx
+++ b/packages/select/stories/Select.stories.tsx
@@ -61,3 +61,5 @@ export const noLabel = () => (
     </FabricSelect>
   </div>
 );
+
+export const optional = () => <Select optional />;
\ No newline at end of file
diff --git a/packages/textarea/docs/TextArea.mdx b/packages/textarea/docs/TextArea.mdx
index 474d8983..85b12269 100644
--- a/packages/textarea/docs/TextArea.mdx
+++ b/packages/textarea/docs/TextArea.mdx
@@ -56,6 +56,14 @@ TextArea for accessibility. If the field is labeled by a separate element, an
 `aria-labelledby` prop must be provided using the id of the labeling element
 instead.
 
+### Optional
+
+Add the optional prop to indicate that the textarea is not required. 
+
+```jsx example
+<TextField label="Description" optiona />
+```
+
 ## Help text
 
 TextAreas can provide additional context with `helpText` if the label and
diff --git a/packages/textarea/src/component.tsx b/packages/textarea/src/component.tsx
index cbef30b5..54ca3002 100644
--- a/packages/textarea/src/component.tsx
+++ b/packages/textarea/src/component.tsx
@@ -22,6 +22,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
       readOnly,
       style,
       value,
+      optional,
       ...rest
     } = props;
 
@@ -48,7 +49,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         })}
         style={style}
       >
-        {label && <label htmlFor={id}>{label}</label>}
+        {label && <label htmlFor={id}>{label}{optional && <span className="pl-8 font-normal text-14 text-gray-500"> (valgfritt)</span>}</label>}
         <textarea
           {...rest}
           aria-describedby={helpId}
diff --git a/packages/textarea/src/props.ts b/packages/textarea/src/props.ts
index 7ac9be68..4e3e563c 100644
--- a/packages/textarea/src/props.ts
+++ b/packages/textarea/src/props.ts
@@ -62,6 +62,9 @@ export type TextAreaProps = {
 
   /** The current value (controlled). */
   value?: string;
+
+  /** Whether to show optional text */
+  optional?: boolean;
 } & Omit<
   React.PropsWithoutRef<JSX.IntrinsicElements['textarea']>,
   // omit these, otherwise they seem to form a union type (in the prop table docs)
diff --git a/packages/textarea/stories/TextArea.stories.tsx b/packages/textarea/stories/TextArea.stories.tsx
index b96466c4..9f5b2b71 100644
--- a/packages/textarea/stories/TextArea.stories.tsx
+++ b/packages/textarea/stories/TextArea.stories.tsx
@@ -61,3 +61,7 @@ export const minimumRows3 = () => (
 export const maximumRows3 = () => (
   <TextArea label="Description" maximumRows={3} />
 );
+
+export const optional = () => (
+  <TextArea label="Description" optional />
+);
diff --git a/packages/textfield/docs/TextField.mdx b/packages/textfield/docs/TextField.mdx
index 7f0d7831..fe145498 100644
--- a/packages/textfield/docs/TextField.mdx
+++ b/packages/textfield/docs/TextField.mdx
@@ -58,6 +58,17 @@ TextField for accessibility. If the field is labeled by a separate element, an
 `aria-labelledby` prop must be provided using the id of the labeling element
 instead.
 
+### Optional
+
+Add the optional prop to indicate that the textfield is not required. 
+
+```jsx example
+<TextField
+  label="Telefonnummer"
+  optional
+/>
+```
+
 ## Help text
 
 TextFields can provide additional context with `helpText` if the label and
diff --git a/packages/textfield/src/component.tsx b/packages/textfield/src/component.tsx
index 86a2b2e5..56a665a3 100644
--- a/packages/textfield/src/component.tsx
+++ b/packages/textfield/src/component.tsx
@@ -16,6 +16,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       readOnly,
       type = 'text',
       style,
+      optional,
       ...rest
     } = props;
 
@@ -46,7 +47,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             'input--is-read-only': readOnly,
           })}
         >
-          {label && <label htmlFor={id}>{label}</label>}
+          {label && <label htmlFor={id}>{label}{optional && <span className="pl-8 font-normal text-14 text-gray-500"> (valgfritt)</span>}</label>}
           <div className="relative">
             <input
               {...rest}
diff --git a/packages/textfield/src/props.ts b/packages/textfield/src/props.ts
index 5845ec42..c74462b4 100644
--- a/packages/textfield/src/props.ts
+++ b/packages/textfield/src/props.ts
@@ -77,6 +77,9 @@ export type TextFieldProps = {
 
   /** The current value (controlled). */
   value?: string;
+
+  /** Mark label to indicate that filling in this field is optional */
+  optional?: boolean;
 } & Omit<
   React.PropsWithoutRef<JSX.IntrinsicElements['input']>,
   // omit these, otherwise they seem to form a union type (in the prop table docs)
diff --git a/packages/textfield/stories/Textfield.stories.tsx b/packages/textfield/stories/Textfield.stories.tsx
index 46afc31e..68d39a6c 100644
--- a/packages/textfield/stories/Textfield.stories.tsx
+++ b/packages/textfield/stories/Textfield.stories.tsx
@@ -84,3 +84,9 @@ export const invalid = () => (
     <TextField helpText="Error text" invalid />
   </div>
 );
+
+export const optional = () => (
+  <div className="flex flex-col space-y-48">
+    <TextField label="Address" optional />
+  </div>
+);