#65 Update docs

croz-ltd · Mar 8, 2023 · 3fbe4f1 · 3fbe4f1
1 parent 50b6a72
commit 3fbe4f1
Show file tree

Hide file tree

Showing 23 changed files with 226 additions and 212 deletions.
diff --git a/storybook/src/form-elements/CheckboxGroup.mdx b/storybook/src/form-elements/CheckboxGroup.mdx
@@ -11,14 +11,12 @@ If the `required` attribute is set to true, at least one checkbox must be select
 
 (for integration with Formik see docs [here](/docs/component-library-formik-elements-checkboxgroupfield--simple))
 
-## **Prerequisites for functioning**:
- - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
-
 <Stories includePrimary={true} />
 
 ## CheckboxGroup Props:
 
 <ArgsTable of={CheckboxGroup} />
 
 ## CheckboxGroup Tokens:
-<ThemeTokens component="CheckboxGroup"/>
+
+<ThemeTokens component="CheckboxGroup" />
diff --git a/storybook/src/form-elements/FormLayout.mdx b/storybook/src/form-elements/FormLayout.mdx
@@ -9,14 +9,12 @@ The `FormLayout` component makes creating forms easier by providing you with a f
 can be divided into sections with desired content and actions.
 
 The component has a couple of types to choose from, with each being unique in its visual representation of the component:
- - **Simple** (default) - provides a layout that supports sections.
- - **Card** - provides a layout with titles and/or subtitles on the left side and section's content on the right side with **only** section's content wrapped in a Card component.
- - **Full Width** - provides a layout with titles and/or subtitles on the left side and section's content on the right side, **both** wrapped in a Card component.
 
-**NOTE**: `FormLayout` gives you a template for making forms, you still need to wrap the component in Formik or other form-handling libraries.
+- **Simple** (default) - provides a layout that supports sections.
+- **Card** - provides a layout with titles and/or subtitles on the left side and section's content on the right side with **only** section's content wrapped in a Card component.
+- **Full Width** - provides a layout with titles and/or subtitles on the left side and section's content on the right side, **both** wrapped in a Card component.
 
-## **Prerequisites for functioning**:
- - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
+**NOTE**: `FormLayout` gives you a template for making forms, you still need to wrap the component in Formik or other form-handling libraries.
 
 ## Usage
 
@@ -55,4 +53,5 @@ of the documentation.
 <ArgsTable of={FormLayout.Section.Content} include={["removeSpacing"]} />
 
 ## Form Layout Tokens:
-<ThemeTokens component="FormLayout"/>
+
+<ThemeTokens component="FormLayout" />
diff --git a/storybook/src/form-elements/Input.mdx b/storybook/src/form-elements/Input.mdx
@@ -15,9 +15,6 @@ Standard form attributes are supported e.g. `required, disabled`, etc. as well a
 
 (for integration with Formik see docs [here](/docs/component-library-formik-elements-inputfield--with-label))
 
-## **Prerequisites for functioning**:
- - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
-
 ## Input disabled
 
 <Canvas>
@@ -129,4 +126,5 @@ where it is common for the user to want to clear the field value. However, in da
 <ArgsTable of={Input} />
 
 ## Input Tokens:
-<ThemeTokens component="Input"/>
+
+<ThemeTokens component="Input" />
diff --git a/storybook/src/form-elements/NumberInput.mdx b/storybook/src/form-elements/NumberInput.mdx
@@ -8,7 +8,6 @@ A `NumberInput` supports many of the same features as `Input`, but only accepts
 
 The field uses third party library `react-number-format` for formatting field value.
 
-
 ## Best practices
 
 `NumberInput` should be used for actual number values, such as counts and measures.
@@ -17,6 +16,10 @@ Do not use it for other digit-based values, such as telephone, credit card, and
 
 When applicable, set the most common choice as the default value. For example, airline, bus, train and other travel companies typically default the number of passengers to 1.
 
+## **Prerequisites for functioning**:
+
+- Intl Provider (details [here](/docs/component-library-intl-intl--basic))
+
 <Stories includePrimary={true} />
 
 ## Number Input Props:

diff --git a/storybook/src/form-elements/RadioGroup.mdx b/storybook/src/form-elements/RadioGroup.mdx
@@ -3,7 +3,6 @@ import { ArgsTable, Story, Canvas } from "@storybook/addon-docs";
 import { RadioGroup } from "@tiller-ds/form-elements";
 import { ThemeTokens } from "../utils";
 
-
 # Radio Group
 
 A `RadioGroup` is a form element that lets users select a single choice from a list of at least two options. The user can only select one radio option at a time.
@@ -15,9 +14,6 @@ Radio groups should:
 - Include at most 6 options. If there's a chance the Radio might later expand to include more than 6 options, use a Select instead.
 - List options in a rational order that makes logical sense.
 
-## **Prerequisites for functioning**:
- - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
-
 ## With Help Text
 
 You can provide additional information about the group with the use of help text.
@@ -70,4 +66,5 @@ You can control the radio with the `value` and `onChange` props:
 <ArgsTable of={RadioGroup} />
 
 ## RadioGroup Tokens:
+
 <ThemeTokens component="RadioGroup" />
diff --git a/storybook/src/form-elements/Slider.mdx b/storybook/src/form-elements/Slider.mdx
@@ -3,7 +3,6 @@ import { ArgsTable, Stories } from "@storybook/addon-docs";
 import { Slider } from "@tiller-ds/form-elements";
 import { ThemeTokens } from "../utils";
 
-
 # Slider
 
 Sliders allow users to make selections from a range of values.
@@ -14,14 +13,12 @@ They are ideal for adjusting settings such as volume, brightness, or applying im
 
 You can change the default step increment with `step` prop.
 
-## **Prerequisites for functioning**:
- - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
-
 <Stories includePrimary={true} />
 
 ## Slider Props:
 
 <ArgsTable of={Slider} />
 
 ## Slider Tokens:
-<ThemeTokens component="Slider"/>
+
+<ThemeTokens component="Slider" />
diff --git a/storybook/src/form-elements/Textarea.mdx b/storybook/src/form-elements/Textarea.mdx
@@ -15,10 +15,8 @@ Use `textareaClassname` prop to provide className for the textarea container.
 
 Standard form attributes are supported e.g. `required`, `disabled`, etc.
 
-## **Prerequisites for functioning**:
- - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
-
 ## When not to use:
+
 Users can find open-ended questions difficult to answer.
 
 It might be better to break up one complex question into a series of simple ones,
@@ -36,4 +34,5 @@ In this case, you should use the `Input` component.
 <ArgsTable of={Textarea} />
 
 ## Textarea Tokens:
-<ThemeTokens component="Textarea"/>
+
+<ThemeTokens component="Textarea" />
diff --git a/storybook/src/form-elements/Toggle.mdx b/storybook/src/form-elements/Toggle.mdx
@@ -13,15 +13,12 @@ They are commonly used for “on/off” switches.
 
 Use `labels` with a toggle so the action is clear. Labels should be three words or less and appear on the side of a toggle.
 
-## **Prerequisites for functioning**:
- - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
-
-
 <Stories includePrimary={true} />
 
 ## Toggle Props:
 
 <ArgsTable of={Toggle} />
 
 ## Toggle Tokens:
-<ThemeTokens component="Toggle"/>
+
+<ThemeTokens component="Toggle" />
diff --git a/storybook/src/formik-elements/CheckboxGroupField.mdx b/storybook/src/formik-elements/CheckboxGroupField.mdx
@@ -3,7 +3,6 @@ import { Stories, ArgsTable } from "@storybook/addon-docs";
 import { CheckboxGroup } from "@tiller-ds/form-elements";
 import { ThemeTokens } from "../utils";
 
-
 # Checkbox Group Field
 
 The `CheckboxGroupField` component is used for displaying a group of checkbox fields with a label and an optional help text.
@@ -13,9 +12,6 @@ This is a **field** component, which means it is differs from `CheckboxGroup` by
 
 Props are described in detail on the [Checkbox Group Field Props section](#checkbox-group-field-props) of the documentation.
 
-## **Prerequisites for functioning**:
- - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
-
 ## Usage
 
 Primarily for use in forms, checkbox group field are descriptive and visually more appealing versions of displaying your checkboxes,
@@ -29,18 +25,20 @@ without having to manually add the title and group the checkboxes.
 ## Accessibility
 
 - Ensure that the `vertical` prop is used on mobile displays if your checkbox group contains a lot of items to avoid
-overflowing.
+  overflowing.
 
 <Stories includePrimary={true} />
 
 ## Checkbox Group Field Props:
 
 `CheckboxGroupField` component has the same props as `CheckboxGroup` component,
 **except**:
- - `value` - inferred from field name
- - `onChange` - handled by Formik
 
-<ArgsTable of={ CheckboxGroup } exclude={["value", "onChange"]} />
+- `value` - inferred from field name
+- `onChange` - handled by Formik
+
+<ArgsTable of={CheckboxGroup} exclude={["value", "onChange"]} />
 
 ## Checkbox Group Tokens:
-<ThemeTokens component="CheckboxGroup"/>
+
+<ThemeTokens component="CheckboxGroup" />
diff --git a/storybook/src/formik-elements/DragZoneField.mdx b/storybook/src/formik-elements/DragZoneField.mdx
@@ -1,4 +1,4 @@
-import {ArgsTable, Stories} from "@storybook/addon-docs";
+import { ArgsTable, Stories } from "@storybook/addon-docs";
 
 import { DragZone } from "@tiller-ds/upload";
 import { ThemeTokens } from "../utils";
@@ -19,15 +19,13 @@ currently in the file list. `useFileUpload` hook also provides a list of the upl
 This is a **field** component, which means it is differs from `DragZone` by having a provided logic for seamless
 wrapping of the component inside Formik for easier form creation.
 
-## **Prerequisites for functioning**:
- - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
-
 ## useFileUpload details
 
 `useFileUpload` is used as an actual logic what is currently in the file list. It can be initialized with the file
 list previously fetched from the backend.
 
 It can be used in two ways:
+
 1. as a controlled file list where you must manually update which files are currently uploaded
 2. as an uncontrolled file list where you specify default update handler and do not think about anything else
 
@@ -42,13 +40,13 @@ function MyUploadComponent() {
 
   React.useEffect(() => {
     fileUploadHookValue.onUpdateCallback((added, removed) => {
-      setUploadedFileIds(oldFileIds => {
+      setUploadedFileIds((oldFileIds) => {
         let newFileIds = [...oldFileIds];
         if (added !== undefined) {
           newFileIds.push(added);
         }
         if (removed !== undefined) {
-          newFileIds = newFileIds.filter(id => id !== removed);
+          newFileIds = newFileIds.filter((id) => id !== removed);
         }
         // update internal file id list with correct updated list
         fileUploadHookValue.onUploadedFileIds(newFileIds);
@@ -57,13 +55,7 @@ function MyUploadComponent() {
     });
   }, []);
 
-  return (
-    <DragZone
-      title="Upload files"
-      url="/api/upload-file"
-      hook={fileUploadHookValue}
-    />
-  );
+  return <DragZone title="Upload files" url="/api/upload-file" hook={fileUploadHookValue} />;
 }
 ```
 
@@ -73,13 +65,7 @@ This is a bit tedious, so if you do not have a valid reason to store a list your
 function MyShorterUploadComponent() {
   const fileUploadHookValue = useFileUpload([], true);
 
-  return (
-    <DragZone
-      title="Upload files"
-      url="/api/upload-file"
-      hook={fileUploadHookValue}
-    />
-  );
+  return <DragZone title="Upload files" url="/api/upload-file" hook={fileUploadHookValue} />;
 }
 ```
 
@@ -105,25 +91,23 @@ If your backend saves more information, you can extend the `File` type with your
 
 ```tsx
 type Document = {
-   size: number;
-   uploadDate: string;
-   fileType: FileType;
-   author: string;
+  size: number;
+  uploadDate: string;
+  fileType: FileType;
+  author: string;
 } & File;
 
 function MyBetterUploaderComponent() {
   const fileUploadHookValue = useFileUpload<Document>([], true);
 
   return (
     <>
-      <DragZone
-        title="Upload files"
-        url="/api/upload-file-but-better"
-        hook={fileUploadHookValue}
-      />
+      <DragZone title="Upload files" url="/api/upload-file-but-better" hook={fileUploadHookValue} />
       <div>
-        {fileUploadHookValue.uploadedFiles.map(doc => (
-          <p>{doc.name}, {doc.size}MB, author: {doc.author}</p>
+        {fileUploadHookValue.uploadedFiles.map((doc) => (
+          <p>
+            {doc.name}, {doc.size}MB, author: {doc.author}
+          </p>
         ))}
       </div>
     </>
@@ -138,4 +122,5 @@ function MyBetterUploaderComponent() {
 <ArgsTable of={DragZone} />
 
 ## Drag Zone Tokens:
-<ThemeTokens component="DragZone"/>
+
+<ThemeTokens component="DragZone" />
diff --git a/storybook/src/formik-elements/InputField.mdx b/storybook/src/formik-elements/InputField.mdx
@@ -3,7 +3,7 @@ import { Meta, ArgsTable, Story, Canvas, Stories } from "@storybook/addon-docs";
 import { InputField } from "@tiller-ds/formik-elements";
 import { ThemeTokens } from "../utils";
 
-<Meta title="Docs|InputField" component={ InputField } />
+<Meta title="Docs|InputField" component={InputField} />
 
 # Input Field
 
@@ -17,9 +17,6 @@ of the documentation.
 
 You can customize the `InputField` component in the [InputField Factory](#input-field-factory).
 
-## **Prerequisites for functioning**:
- - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
-
 ## Usage
 
 - Use `InputField` in a form as a way to allow the user to enter a value associated with a key, such as entering their name in a field labeled name.
@@ -45,10 +42,10 @@ using **controls**.
 To create your custom Input Field component:
 
 - Switch to the `Canvas` section of the Storybook and navigate to `Input Field Factory` story
-of the Input Field.
+  of the Input Field.
 - Modify props using controls.
 - When you're happy with what you've created, switch back to the `Docs` section, and you will be automatically
-navigated to your created Input Field.
+  navigated to your created Input Field.
 - After you click the `Show code` button below your custom Input Field, the code of the Input Field will be generated.
 
 ### Result:
@@ -64,4 +61,5 @@ navigated to your created Input Field.
 <ArgsTable of={InputField} />
 
 ## Input Tokens:
-<ThemeTokens component="Input"/>
+
+<ThemeTokens component="Input" />
diff --git a/storybook/src/formik-elements/NumberInputField.mdx b/storybook/src/formik-elements/NumberInputField.mdx
@@ -11,9 +11,6 @@ The field uses third party library `react-number-format` for formatting field va
 This is a **field** component, which means it is differs from `NumberInput` by having a provided logic for seamless
 wrapping of the component inside Formik for easier form creation.
 
-## **Prerequisites for functioning**:
- - Intl Provider (details [here](/docs/component-library-intl-intl--basic))
-
 ## Best practices
 
 `NumberInputField` should be used for actual number values, such as counts and measures.
@@ -22,6 +19,10 @@ Do not use it for other digit-based values, such as telephone, credit card, and
 
 When applicable, set the most common choice as the default value. For example, airline, bus, train and other travel companies typically default the number of passengers to 1.
 
+## **Prerequisites for functioning**:
+
+- Intl Provider (details [here](/docs/component-library-intl-intl--basic))
+
 <Stories includePrimary={true} />
 
 ## Number Input Field Props: