@hubspot/ui-extensions 0.0.1-prealpha.7 → 0.1.0

package/README.md

@@ -1,4 +1,6 @@
-# ui-extensions-components
+# UI Extensions
+
+React components and utilities for extending HubSpot's UI.
 
 ## TOC
 
@@ -7,31 +9,35 @@
 - [ButtonRow](#buttonrow)
 - [Card](#card)
 - [DescriptionList](#descriptionlist)
-    - [DescriptionListItem](#descriptionlistitem)
+  - [DescriptionListItem](#descriptionlistitem)
 - [Divider](#divider)
 - [Form](#form)
+- [EmptyState](#emptystate)
+- [ErrorState](#errorstate)
 - [Heading](#heading)
 - [Image](#image)
 - [Input](#input)
 - [Link](#link)
 - [LoadingSpinner](#loadingspinner)
+- [NumberInput](#numberInput)
 - [ProgressBar](#progressbar)
 - [Select](#select)
 - [Stack](#stack)
 - [Statistics](#statistics)
-    - [StatisticsItem](#statisticsitem)
-    - [StatisticsTrend](#statisticstrend)
+  - [StatisticsItem](#statisticsitem)
+  - [StatisticsTrend](#statisticstrend)
 - [Table](#table)
-    - [TableBody](#tablebody)
-    - [TableCell](#tablecell)
-    - [TableFooter](#tablefooter)
-    - [TableHead](#tablehead)
-    - [TableHeader](#tableheader)
-    - [TableRow](#tablerow)
+  - [TableBody](#tablebody)
+  - [TableCell](#tablecell)
+  - [TableFooter](#tablefooter)
+  - [TableHead](#tablehead)
+  - [TableHeader](#tableheader)
+  - [TableRow](#tablerow)
 - [Tag](#tag)
 - [Text](#text)
 - [Textarea](#textarea)
 - [Tile](#tile)
+- [ToggleGroup](#togglegroup)
 
 ## Components
 
@@ -50,7 +56,6 @@ The Alert component accepts the following props:
 ```typescript
 export interface AlertProps {
   title: string;
-  body?: string;
   children?: ReactNode;
   variant?: 'info' | 'warning' | 'success' | 'error' | 'danger';
 }
@@ -59,7 +64,6 @@ export interface AlertProps {
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `title` | `string` | `N/A` | The title text for the alert message. |
-| `body` | `string(optional)` | `N/A` | The main content of the alert message. If not provided, the children prop is used. |
 | `children` | `ReactNode(optional)` | `N/A` | The main content of the alert message when the body prop is not provided. |
 | `variant` | `'info' \| 'warning' \| 'success' \|'error' \| 'danger'` `(optional)` | `'info'` | Sets the color variation of the alert |
 
@@ -72,22 +76,18 @@ const Extension = () => {
       <Alert title="Important Info" variant="info">
         This is an informative message.
       </Alert>
-      <Alert
-        title="Success"
-        body="Operation completed successfully."
-        variant="success"
-      />
-      <Alert title="Warning" body="Proceed with caution." variant="warning" />
-      <Alert
-        title="Error"
-        body="Something went wrong. Please try again."
-        variant="error"
-      />
-      <Alert
-        title="Danger"
-        body="This action cannot be undone. Be careful."
-        variant="danger"
-      />
+      <Alert title="Success"variant="success">
+        Operation completed successfully.
+      </Alert>
+      <Alert title="Warning" variant="warning" >
+        Proceed with caution.
+      </Alert>
+      <Alert title="Error" variant="error" >
+        Something went wrong. Please try again.
+      </Alert>
+      <Alert title="Danger" variant="danger" >
+        This action cannot be undone. Be careful.
+      </Alert>
     </>
   );
 };
@@ -96,14 +96,16 @@ const Extension = () => {
 ### Button
 
 ##### Import
+
 ```javascript
 import { Button } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface ButtonProps {
-  text: string;
+  children: string;
   onClick?: () => void;
   href?: string;
   disabled?: boolean;
@@ -111,194 +113,219 @@ interface ButtonProps {
   type?: 'button' | 'reset' | 'submit';
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `text` | `string` | `N/A` | The displayable text for the Button |
-| `onClick` | `() => void` `(optional)` | `N/A` | A function that will be invoked when the button is clicked.  It receives no arguments and it's return value is ignored|
-| `href` | `string(optional)`| `N/A` | A URL that will be opened when the button is clicked.  If the value is a URL external to HubSpot it will be opened in a new tab. |
-| `disabled` | `boolean(optional)` | `N/A` | Determines if the button should be disabled or not.|
+| --- | --- | --- | --- |
+| `children` | `string` | `N/A` | The displayable text for the Button |
+| `onClick` | `() => void` `(optional)` | `N/A` | A function that will be invoked when the button is clicked. It receives no arguments and it's return value is ignored |
+| `href` | `string(optional)` | `N/A` | A URL that will be opened when the button is clicked. If the value is a URL external to HubSpot it will be opened in a new tab. |
+| `disabled` | `boolean(optional)` | `N/A` | Determines if the button should be disabled or not. |
 | `variant` | `'primary' \| 'secondary' \| 'destructive'` `(optional)` | `'secondary'` | Sets the color variation of the button |
 | `type` | `'button' \| 'reset' \| 'submit'` `(optional)` | `'button'` | Sets the HTML attribute "role" of the button |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
     <Button
-      text="Click me!"
       onClick={() => {
         console.log('Someone clicked on the button!');
       }}
       href="https://hubspot.com"
       variant="destructive"
       type="button"
-    />
+    >
+      Click me!
+    </Button>
   );
-}
+};
 ```
 
 ### ButtonRow
 
 ##### Import
+
 ```javascript
 import { ButtonRow } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface ButtonRowProps {
   children: ReactNode;
   disableDropdown?: boolean;
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
 | `disableDropdown` | `boolean(optional)` | `false` | Disables the dropdown list of buttons that appears the the children expand beyond the horizontal space |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
     <ButtonRow disableDropdown={false}>
       <Button
-        text="Regular Button"
         onClick={() => {
           console.log('Regular button clicked');
         }}
-      />
+      >
+        Regular Button
+      </Button>
       <Button
-        text="Reset"
         onClick={() => {
           console.log('Reset button clicked');
         }}
         variant="destructive"
         type="reset"
-      />
+      >
+        Reset
+      </Button>
       <Button
-        text="Submit"
         onClick={() => {
           console.log('Submit button clicked');
         }}
         variant="primary"
         type="submit"
-      />
+      >
+        Submit
+      </Button>
     </ButtonRow>
   );
-}
+};
 ```
 
 ### Card
 
 ##### Import
+
 ```javascript
 import { Card } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface CardProps {
   children: ReactNode;
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `children` | `ReactNode`| `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
     <Card>
       <Button
-        text="Regular Button"
         onClick={() => {
           console.log('Regular button clicked');
         }}
-      />
+      >
+        Regular Button
+      </Button>
     </Card>
   );
-}
+};
 ```
 
 ### DescriptionList
 
 ##### Import
+
 ```javascript
 import { DescriptionList } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface DescriptionListProps {
   children: ReactNode;
   direction?: 'row' | 'column';
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. The children should be [DescriptionListItem](#descriptionlistitem) |
-| `direction` | `'row' \| 'column'` `(optional)` | `'column'`|  The direction the label/value pairs are placed in the description list container. |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. The children should be [DescriptionListItem](#descriptionlistitem) |
+| `direction` | `'row' \| 'column'` `(optional)` | `'column'` | The direction the label/value pairs are placed in the description list container. |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
     <DescriptionList direction="row">
-      <DescriptionListItem label={"First Name"}>
-          <Text text="Alan" />
+      <DescriptionListItem label={'First Name'}>
+        <Text>Alan</Text>
       </DescriptionListItem>
-      <DescriptionListItem label={"Last Name"}>
-          <Text text="Turing" />
+      <DescriptionListItem label={'Last Name'}>
+        <Text>Turing</Text>
       </DescriptionListItem>
     </DescriptionList>
   );
-}
+};
 ```
 
 #### DescriptionListItem
 
 ##### Import
+
 ```javascript
 import { DescriptionListItem } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface DescriptionListItemProps {
   children: ReactNode;
   label: string;
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `children` | `ReactNode`| `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. |
-| `label` | `string` | `N/A` |  Text to be displayed as the label |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+| `label` | `string` | `N/A` | Text to be displayed as the label |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
     <DescriptionList direction="row">
-      <DescriptionListItem label={"First Name"}>
-          <Text text="Alan" />
+      <DescriptionListItem label={'First Name'}>
+        <Text>Alan</Text>
       </DescriptionListItem>
-      <DescriptionListItem label={"Last Name"}>
-          <Text text="Turing" />
+      <DescriptionListItem label={'Last Name'}>
+        <Text>Turing</Text>
       </DescriptionListItem>
     </DescriptionList>
   );
-}
+};
 ```
 
 ### Divider
 
 ##### Import
+
 ```javascript
 import { Divider } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface DividerProps {
   distance?:
@@ -310,27 +337,29 @@ interface DividerProps {
     | 'extra-large';
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `distance` | `'flush'\| 'extra-small' \| 'small' \| 'medium' \| 'large'\| 'extra-large'` `(optional)`| `'small'` | The size of the padding above and below the divider. |
+| --- | --- | --- | --- |
+| `distance` | `'flush'\| 'extra-small' \| 'small' \| 'medium' \| 'large'\| 'extra-large'` `(optional)` | `'small'` | The size of the padding above and below the divider. |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
-  return (
-    <Divider distance="extra-large"/>
-  );
-}
+  return <Divider distance="extra-large" />;
+};
 ```
 
 ### Form
 
 ##### Import
+
 ```javascript
 import { Form } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface FormProps {
   children: ReactNode;
@@ -338,13 +367,15 @@ interface FormProps {
   preventDefault?: boolean;
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. |
-| `onSubmit` | `function(optional)` | `N/A`| A function that will be called when the form is submitted. It will receive a `RemoteEvent` as argument and it's return value will be ignored. |
-| `preventDefault` | `boolean(optional)` | `false`| If set to `true` `event.preventDefault()` will be invoked before your `onSubmit` function is called, preventing the default html form behavior. |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+| `onSubmit` | `function(optional)` | `N/A` | A function that will be called when the form is submitted. It will receive a `RemoteEvent` as argument and it's return value will be ignored. |
+| `preventDefault` | `boolean(optional)` | `false` | If set to `true` `event.preventDefault()` will be invoked before your `onSubmit` function is called, preventing the default html form behavior. |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
@@ -352,13 +383,14 @@ const Extension = () => {
       <Input {...} />
       <Select {...} />
       <Button
-        text="Submit"
         onClick={() => {
           console.log('Submit button clicked');
         }}
         variant="primary"
         type="submit"
-      />
+      >
+        Submit
+      </Button>
     </Form>
   );
 }
@@ -367,11 +399,13 @@ const Extension = () => {
 ### EmptyState
 
 ##### Import
+
 ```javascript
 import { EmptyState } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface EmptyStateProps {
   children: ReactNode;
@@ -382,22 +416,24 @@ interface EmptyStateProps {
   title?: string;
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
 | `flush` | `boolean(optional)` | `false` | Removes the default vertical margins for the component. |
-| `imageWidth` | `number(optional)` | `250`| The max-width for the image container. |
+| `imageWidth` | `number(optional)` | `250` | The max-width for the image container. |
 | `layout` | `'horizontal' \| 'vertical'` `(optional)` | `'horizontal'` | Sets the layout direction for the content. |
 | `reverseOrder` | `boolean(optional)` | `false` | Swaps the visual order of the text (primary) and image (secondary) content. This ensures the primary content is still presented first to assistive technology. |
-| `title` | `string(optional)` | `Intl("All is not lost.")` | The text for the title header rendered above the `children`. |
+| `title` | `string(optional)` | `Intl('All is not lost.')` | The text for the title header rendered above the `children`. |
 
 ##### Usage
+
 ```javascript
 const Extension = ({ data }) => {
   if (!data || !data.length) {
     return (
       <EmptyState title="Nothing here yet" layout="vertical" reverseOrder={true}>
-        <Text text="Go out there and get some leads!" />
+        <Text>Go out there and get some leads!</Text>
       </EmptyState>
     )
   }
@@ -413,11 +449,13 @@ const Extension = ({ data }) => {
 ### ErrorState
 
 ##### Import
+
 ```javascript
 import { ErrorState } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface ErrorStateProps {
   children: ReactNode;
@@ -425,21 +463,27 @@ interface ErrorStateProps {
   type?: 'error' | 'support' | 'lock';
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. |
-| `title` | `string(optional)` | `Intl("All is not lost.")` | The text for the title header rendered above the `children`. |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+| `title` | `string(optional)` | `Intl('All is not lost.')` | The text for the title header rendered above the `children`. |
 | `type` | `'error' \| 'support' \| 'lock'` `(optional)` | `'error'` | Sets the type of error image that will be shown. |
 
 ##### Usage
+
 ```javascript
 const Extension = ({ data, error, fetchData }) => {
   if (error) {
     return (
       <ErrorState title="Trouble fetching properties." layout="vertical" reverseOrder={true}>
         <Stack>
-          <Text text="Please try again in a few moments." />
-          <Button text="Try again" onClick={fetchData} />
+          <Text>
+            Please try again in a few moments.
+          </Text>
+          <Button onClick={fetchData}>
+            Try again
+          </Button>
         </Stack>
       </ErrorState>
     )
@@ -456,78 +500,65 @@ const Extension = ({ data, error, fetchData }) => {
 ### Heading
 
 ##### Import
+
 ```javascript
 import { Heading } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface HeadingProps {
-  text: string;
-  format?: 'plaintext' | 'markdown';
+  children: ReactNode;
+  inline?: boolean;
 }
 ```
-| Prop | Type | Default | Description |
-| - | - | - | - |
-| `text` | `string` | `N/A`| Text to be displayed as heading text. If format is `"markdown"`, inline markdown elements (i.e. bold, italics, code, links) are supported|
-| `format` | `'plaintext' \| 'markdown'` `(optional)` | `'plaintext'`| Type of formatting for the display text. |
-
-#### Markdown
-Markdown syntax supported in the component:
 
-- bold text: `**like this**` or `__like this__`
-- italicized text: `*like this*` or `_like this_`
-- inline code: `` `like this` ``
-- links: `[visible anchor text](https://www.hubspot.com/)`
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `string` | `N/A` | Text to be displayed as heading text. |
+| `inline` | `boolean(optional)` | `false` | Determines if the text will break line or share the space. |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
-  return (
-    <>
-      <Heading text="Plain text, nothing special here"/>
-      <Heading text="**It's a Bold Strategy Cotton, lets see if it pays off for them.**" format="markdown"/>
-    </>
-  );
-}
+  return <Heading>Plain text, nothing special here</Heading>;
+};
 ```
 
 ### Image
-##### Import
 
+##### Import
 
 ```javascript
 import { Image } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
- interface ImageProps {
+interface ImageProps {
   alt?: string;
   href?: string;
   onClick?: () => void;
   src: string;
   width?: number;
+  height?: number;
 }
 ```
 
-| Prop | Type |  Description |
-| - | - | - |
+| Prop | Type | Description |
+| --- | --- | --- |
 | `alt` | `string(optional)` | The alt text for the image, similar to the `alt` attribute for the html [img tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) |
 | `href` | `string(optional)` | If provided, it will be used as a href that will be opened in a new tag when the image is clicked |
 | `onClick` | `function(optional)` | A function that will be called when the image is clicked on. This function will receive no arguments any returned values will be ignored. |
-| `src` | | `string` | The url to the image to display, similar to [img tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes)|
-| `width` | `number(optional)` | The pixel width of the image |
-
-| Prop | Type |  Description |
-| - | - | - |
-| `alt` | `string(optional)` | The alt text for the image, similar to the `alt` attribute for the html [img tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) |
-| `href` | `string(optional)` | If provided, it will be used as a href that will be opened in a new tag when the image is clicked |
-| `onClick` | `function(optional)` | A function that will be called when the image is clicked on. This function will receive no arguments any returned values will be ignored. |
-| `src` | | `string` | The url to the image to display, similar to [img tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes)|
+| `src` | `string` | The url to the image to display, similar to [img tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) |
 | `width` | `number(optional)` | The pixel width of the image |
+| `height` | `number(optional)` | The pixel height of the image |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
@@ -536,22 +567,24 @@ const Extension = () => {
       src="https://picsum.photos/id/237/200/300"
       href="https://picsum.photos/id/237"
       onClick={() => {
-        console.log('Someone clicked on the image!')
+        console.log('Someone clicked on the image!');
       }}
       width={200}
     />
   );
-}
+};
 ```
 
 ### Input
 
 ##### Import
+
 ```javascript
 import { Input } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface InputProps {
   label: string;
@@ -570,31 +603,33 @@ interface InputProps {
   onFocus?: (value: string) => void;
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `label` | `string` | `N/A`| The label text to display for the form input element |
-| `name` | `string` | `N/A`| The unique identifier for the input element, this could be thought of as the HTML5 [Input element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) |
-| `value` | `string(optional)` | `''`| The value of the input |
-| `required` | `boolean(optional)` | `false`| Determines if the required indicator should be displayed |
-| `readOnly` | `boolean(optional)` | `false`| Determines if the field is editable or not. |
-| `description` | `string(optional)` | `N/A`| Instructional message to display to the user to help understand the purpose of the input. |
-| `tooltip` | `string(optional)` | `N/A`| Text that will appear in a tooltip next to the input label. |
-| `placeholder` | `string(optional)` | `N/A`| Text that appears in the input when it has no value set. |
-| `error` | `boolean(optional)` | `false`| If set to true, `validationMessage` is displayed as an error message, if it was provided. The input will also render it's error state to let the user know there is an error.  If false, `validationMessage` is displayed as a success message. |
-| `validationMessage` | `string(optional)` | `''`| The text to show if the input has an error. |
-| `onChange` | `(value: string) => void(optional)` | `N/A`| A callback function that is invoked when the value is committed.  Currently these times are `onBlur` of the input and when the user submits the form.  |
-| `onInput` | `(value: string) => void(optional)` | `N/A`| A function that is called and passed the value every time the field is edited by the user.  It is recommended that you do not use this value to update state, that is what `onChange` should be used for. Instead this should be used for validation. |
-| `onBlur` | `(value: string) => void(optional)` | `N/A`| A function that is called and passed the value every time the field loses focus. |
-| `onFocus` | `(value: string) => void(optional)` | `N/A`| A function that is called and passed the value every time the field gets focused. |
+| --- | --- | --- | --- |
+| `label` | `string` | `N/A` | The label text to display for the form input element |
+| `name` | `string` | `N/A` | The unique identifier for the input element, this could be thought of as the HTML5 [Input element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) |
+| `value` | `string(optional)` | `''` | The value of the input |
+| `required` | `boolean(optional)` | `false` | Determines if the required indicator should be displayed |
+| `readOnly` | `boolean(optional)` | `false` | Determines if the field is editable or not. |
+| `description` | `string(optional)` | `N/A` | Instructional message to display to the user to help understand the purpose of the input. |
+| `tooltip` | `string(optional)` | `N/A` | Text that will appear in a tooltip next to the input label. |
+| `placeholder` | `string(optional)` | `N/A` | Text that appears in the input when it has no value set. |
+| `error` | `boolean(optional)` | `false` | If set to true, `validationMessage` is displayed as an error message, if it was provided. The input will also render it's error state to let the user know there is an error. If false, `validationMessage` is displayed as a success message. |
+| `validationMessage` | `string(optional)` | `''` | The text to show if the input has an error. |
+| `onChange` | `(value: string) => void(optional)` | `N/A` | A callback function that is invoked when the value is committed. Currently these times are `onBlur` of the input and when the user submits the form. |
+| `onInput` | `(value: string) => void(optional)` | `N/A` | A function that is called and passed the value every time the field is edited by the user. It is recommended that you do not use this value to update state, that is what `onChange` should be used for. Instead this should be used for validation. |
+| `onBlur` | `(value: string) => void(optional)` | `N/A` | A function that is called and passed the value every time the field loses focus. |
+| `onFocus` | `(value: string) => void(optional)` | `N/A` | A function that is called and passed the value every time the field gets focused. |
 
 ##### Usage
+
 ```javascript
 import { useState } from 'react';
 
 const Extension = () => {
-  const [ name, setName ] = useState('');
-  const [ validationMessage, setValidationMessage ] = useState('');
-  const [ isValid, setIsValid ] = useState(true);
+  const [name, setName] = useState('');
+  const [validationMessage, setValidationMessage] = useState('');
+  const [isValid, setIsValid] = useState(true);
 
   return (
     <Form>
@@ -607,95 +642,180 @@ const Extension = () => {
         required={true}
         error={!isValid}
         validationMessage={validationMessage}
-        onChange={(value) => {
-          setName(value)
+        onChange={value => {
+          setName(value);
         }}
-        onInput={(value) => {
-          if(value !== 'Bill') {
+        onInput={value => {
+          if (value !== 'Bill') {
             setValidationMessage('This form only works for people named Bill');
             setIsValid(false);
           } else if (value === '') {
-            setValidationMessage('First name is required')
+            setValidationMessage('First name is required');
             setIsValid(false);
           } else {
-            setValidationMessage('Valid first name!')
+            setValidationMessage('Valid first name!');
             setIsValid(true);
           }
         }}
       />
     </Form>
   );
-}
+};
 ```
 
 ### Link
 
 ##### Import
+
 ```javascript
 import { Link } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 export interface LinkProps {
   href: string;
   variant?: 'primary' | 'destructive' | 'light' | 'dark';
   children: ReactNode;
+  onClick?: () => void;
 }
 ```
+
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `href` | `string`| `N/A` | A URL that will be opened when the link is clicked.  If the value is a URL external to HubSpot it will be opened in a new tab. |
+| `href` | `string` | `N/A` | A URL that will be opened when the link is clicked. If the value is a URL external to HubSpot it will be opened in a new tab. |
 | `variant` | `'primary' \| 'light' \| 'dark' \| 'destructive'` `(optional)` | `'primary'` | Sets the color variation of the link |
-| `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component. |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. |
+| `onClick` | `() => void` `(optional)` | `N/A` | A function that will be invoked when the link is clicked. It receives no arguments and it's return value is ignored |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
-  return <Link href="https://app.hubspot.com/">HubSpot</Link>
-}
+  return <Link href="https://app.hubspot.com/">HubSpot</Link>;
+};
 ```
+
 ### LoadingSpinner
 
 ##### Import
+
 ```javascript
 import { LoadingSpinner } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 export interface LoadingSpinnerProps {
   label: string;
   showLabel?: boolean;
-  size?: 'xs' | 'sm' | 'md';
+  size?: 'xs' | 'extra-small' | 'sm' | 'small' | 'md' | 'medium';
   layout?: 'inline' | 'centered';
-  grow?: boolean;
 }
 ```
+
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `label` | `string` | `N/A`| The companion text for the loading spinner. |
+| `label` | `string` | `N/A` | The companion text for the loading spinner. |
 | `showLabel` | `boolean(optional)` | `false` | if `true`, the label will be visible alongside the loading spinner. |
-| `size` | `'xs'\| 'sm' \| 'md'` `(optional)`| `'sm'` | The size of the loading spinner icon. |
-| `layout` | `'inline'\| 'centered'` `(optional)`| `N/A` | Use the `centered` option for layout as a convenience for the common pattern of filling the space of its parent. |
-| `grow` | `boolean(optional)` | `false` | if `true`, sets the height and width of the loading spinner to 100%.|
+| `size` | `'xs' \| 'sm' \| 'md' \| 'extra-small' \| 'small' \| 'medium'` `(optional)` | `'sm'` | The size of the loading spinner icon. |
+| `layout` | `'inline'\| 'centered'` `(optional)` | `N/A` | Use the `centered` option for layout as a convenience for the common pattern of filling the space of its parent. |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return <LoadingSpinner label="Loading..." />;
+};
+```
+### NumberInput
+
+##### Import
+
+```javascript
+import { NumberInput } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+export interface NumberInputProps {
+  label: string;
+  name: string;
+  value?: number;
+  required?: boolean;
+  readOnly?: boolean;
+  description?: string;
+  tooltip?: string;
+  placeholder?: string;
+  error?: boolean;
+  defaultValue?: number;
+  validationMessage?: string;
+  onChange?: (value: number) => void;
+  onInput?: (value: number) => void;
+  onBlur?: (value: number) => void;
+  onFocus?: (value: number) => void;
+  min?: number;
+  max?: number;
+  precision?: number;
+  formatStyle?: 'decimal' | 'percentage';
 }
 ```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` | `string` | `N/A` | The label text to display for the form input element |
+| `name` | `string` | `N/A` | The unique identifier for the input element, this could be thought of as the HTML5 [Input element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name) |
+| `value` | `number(optional)` | `''` | The value of the input |
+| `required` | `boolean(optional)` | `false` | Determines if the required indicator should be displayed |
+| `readOnly` | `boolean(optional)` | `false` | Determines if the field is editable or not. |
+| `description` | `string(optional)` | `N/A` | Instructional message to display to the user to help understand the purpose of the input. |
+| `tooltip` | `string(optional)` | `N/A` | Text that will appear in a tooltip next to the input label. |
+| `placeholder` | `string(optional)` | `N/A` | Text that appears in the input when it has no value set. |
+| `error` | `boolean(optional)` | `false` | If set to true, `validationMessage` is displayed as an error message, if it was provided. The input will also render it's error state to let the user know there is an error. If false, `validationMessage` is displayed as a success message. |
+| `validationMessage` | `string(optional)` | `''` | The text to show if the input has an error. |
+| `onChange` | `(value: number) => void(optional)` | `N/A` | A callback function that is invoked when the value is committed. Currently these times are `onBlur` of the input and when the user submits the form. |
+| `onInput` | `(value: number) => void(optional)` | `N/A` | A function that is called and passed the value every time the field is edited by the user. It is recommended that you do not use this value to update state, that is what `onChange` should be used for. Instead this should be used for validation. |
+| `onBlur` | `(value: number) => void(optional)` | `N/A` | A function that is called and passed the value every time the field loses focus. |
+| `onFocus` | `(value: number) => void(optional)` | `N/A` | A function that is called and passed the value every time the field gets focused. |
+| `min` | `number(optional)` | `N/A` | Sets the lower bound of your input. |
+| `max` | `number(optional)` | `N/A` | Sets the upper bound of your input. |
+| `precision` | `number(optional)` | `N/A` | Represents the number of digits to the right of the decimal point. |
+| `precision` | `number(optional)` | `N/A` | Represents the number of digits to the right of the decimal point. |
+| `formatStyle` | `'decimal' \| 'percentage'` | `'decimal'` | Formats the input as a decimal point number or a percentage. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  const [portalCount, setPortalCount] = useState(0);
+  return (
+    <NumberInput
+      label={'HubSpot Portal Count'}
+      name="portalsNumber"
+      description={'Number of active portals'}
+      placeholder={'number of portals'}
+      value={portalCount}
+      onChange={value => setPortalCount(value)}
+    />
+  );
+};
+```
+
 ### ProgressBar
 
 ##### Import
+
 ```javascript
 import { ProgressBar } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
- export interface ProgressBarProps {
+export interface ProgressBarProps {
   title?: string;
   showPercentage?: boolean;
   value?: number;
@@ -704,16 +824,18 @@ import { ProgressBar } from '@hubspot/ui-extensions';
   variant?: 'success' | 'danger' | 'warning';
 }
 ```
+
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `title` | `string(optional)` | `N/A` | Text to be displayed in the progressbar title. |
-| `showPercentage` | `boolean(optional)` | `false` | Toggles the display of the completion percentage.  |
-| `value` | `number(optional)` | `0` | The value of the progress indicator.
-| `valueMax` | `number(optional)` | `100` | The maximum value of the progress.
-| `valueDescription` | `string(optional)` | `N/A` | Text that explains the current state of the `value` prop. Renders to the right of `title`. **Example: "10,000 of 7,500"**
-| `variant` | `'success' \| 'danger' \| 'warning'`  | `'success'` | The type of progressbar to display. Defaults to success.
+| `showPercentage` | `boolean(optional)` | `false` | Toggles the display of the completion percentage. |
+| `value` | `number(optional)` | `0` | The value of the progress indicator. |
+| `valueMax` | `number(optional)` | `100` | The maximum value of the progress. |
+| `valueDescription` | `string(optional)` | `N/A` | Text that explains the current state of the `value` prop. Renders to the right of `title`. **Example: "10,000 of 7,500"** |
+| `variant` | `'success' \| 'danger' \| 'warning'` | `'success'` | The type of progressbar to display. Defaults to success. |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
@@ -723,18 +845,20 @@ const Extension = () => {
       valueMax={200}
       showPercentage={true}
     />
-    );
-}
+  );
+};
 ```
 
 ### Select
 
 ##### Import
+
 ```javascript
 import { Select } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface SelectProps {
   label: string;
@@ -753,33 +877,34 @@ interface SelectProps {
     value: string | number | boolean;
   }[];
 }
-
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `label` | `string` | `N/A`| The label text to display for the select element |
-| `name` | `string` | `N/A`| The unique identifier for the select element. |
-| `value` | `string \| number \| boolean` | `''`| The value of the select input. |
-| `required` | `boolean` | `false`| Determines if the required indicator should be displayed |
-| `readOnly` | `boolean` | `false`| Determines if the field is editable or not. |
-| `description` | `string` | `N/A`| Instructional message to display to the user to help understand the purpose of the input. |
-| `tooltip` | `string` | `N/A`| Text that will appear in a tooltip next to the input label. |
-| `placeholder` | `string` | `N/A`| Text that appears in the input when it has no value set. |
-| `error` | `boolean(optional)` | `false`| If set to true, `validationMessage` is displayed as an error message, if it was provided. The input will also render it's error state to let the user know there is an error.  If false, `validationMessage` is displayed as a success message. |
-| `validationMessage` | `string(optional)` | `''`| The text to show if the input has an error. |
-| `onChange` | `(value: string) => void` | `N/A`| Function that is called with the new value when it is updated. |
-| `options` | `Array<{label: string; value: string \| number \| boolean}>` | `N/A`| Array of options to be displayed in the select. `label` will be used as the display text in the dropdown list and `value` should be a **unique** identifier. `value` is the data that will be submitted with the form. |
+| --- | --- | --- | --- |
+| `label` | `string` | `N/A` | The label text to display for the select element |
+| `name` | `string` | `N/A` | The unique identifier for the select element. |
+| `value` | `string \| number \| boolean` | `''` | The value of the select input. |
+| `required` | `boolean` | `false` | Determines if the required indicator should be displayed |
+| `readOnly` | `boolean` | `false` | Determines if the field is editable or not. |
+| `description` | `string` | `N/A` | Instructional message to display to the user to help understand the purpose of the input. |
+| `tooltip` | `string` | `N/A` | Text that will appear in a tooltip next to the input label. |
+| `placeholder` | `string` | `N/A` | Text that appears in the input when it has no value set. |
+| `error` | `boolean(optional)` | `false` | If set to true, `validationMessage` is displayed as an error message, if it was provided. The input will also render it's error state to let the user know there is an error. If false, `validationMessage` is displayed as a success message. |
+| `validationMessage` | `string(optional)` | `''` | The text to show if the input has an error. |
+| `onChange` | `(value: string) => void` | `N/A` | Function that is called with the new value when it is updated. |
+| `options` | `Array<{label: string; value: string \| number \| boolean}>` | `N/A` | Array of options to be displayed in the select. `label` will be used as the display text in the dropdown list and `value` should be a **unique** identifier. `value` is the data that will be submitted with the form. |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
-  const [ name, setName ] = useState(null);
-  const [ validationMessage, setValidationMessage ] = useState('');
-  const [ isValid, setIsValid ] = useState(true);
+  const [name, setName] = useState(null);
+  const [validationMessage, setValidationMessage] = useState('');
+  const [isValid, setIsValid] = useState(true);
 
   const options = [
-    {label: 'Bill', value: 42},
-    {label: 'Ted', value: 43}
+    { label: 'Bill', value: 42 },
+    { label: 'Ted', value: 43 },
   ];
 
   return (
@@ -793,9 +918,9 @@ const Extension = () => {
         required={true}
         error={!isValid}
         validationMessage={validationMessage}
-        onChange={(value) => {
-          setName(value)
-          if(!value) {
+        onChange={value => {
+          setName(value);
+          if (!value) {
             setValidationMessage('This is required');
             setIsValid(false);
           } else {
@@ -807,31 +932,46 @@ const Extension = () => {
       />
     </Form>
   );
-}
+};
 ```
 
 ### Stack
 
 ##### Import
+
 ```javascript
 import { Stack } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface StackProps {
-  distance?: 'flush' | 'small' | 'extra-small' | 'medium' | 'large';
+  distance?:
+    | 'flush'
+    | 'small'
+    | 'extra-small'
+    | 'medium'
+    | 'large'
+    | 'extra-large'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl';
   direction?: 'row' | 'column';
   children?: ReactNode;
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `distance` | `'flush' \| 'extra-small' \| 'small' \| 'medium' \| 'large'` | `'small'`| Amount of space between each child component passed as children |
-| `direction` | `'row' \| 'column'` | `'column'`| Stacks elements in the vertical or horizontal direction. |
-| `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. |
+| --- | --- | --- | --- |
+| `distance` | `'flush' \| 'extra-small' \| 'small' \| 'medium' \| 'large' \| 'extra-large' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'small'` | Amount of space between each child component passed as children |
+| `direction` | `'row' \| 'column'` | `'column'` | Stacks elements in the vertical or horizontal direction. |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
@@ -846,21 +986,25 @@ const Extension = () => {
 ### Statistics
 
 ##### Import
+
 ```javascript
 import { Statistics } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface StatisticsProps {
   children: ReactNode;
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. These children should be [StatisticsItem](#statisticsitem) or [StatisticsTrend](#statisticstrend) |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. These children should be [StatisticsItem](#statisticsitem) or [StatisticsTrend](#statisticstrend) |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
@@ -875,11 +1019,13 @@ const Extension = () => {
 #### StatisticsItem
 
 ##### Import
+
 ```javascript
 import { StatisticsItem } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface StatisticsItemProps {
   id?: string;
@@ -888,46 +1034,52 @@ interface StatisticsItemProps {
   children: ReactNode;
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `id` | `string(optional)` | `N/A`| The unique identifier |
-| `label` | `string` | `N/A`| The text to be used as a label |
-| `number` | `string` | `N/A`| Fully formatted string to be displayed as the item's primary number |
-| `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. These children should be [Text](#text) or [StatisticsTrend](#statisticstrend) |
+| --- | --- | --- | --- |
+| `id` | `string(optional)` | `N/A` | The unique identifier |
+| `label` | `string` | `N/A` | The text to be used as a label |
+| `number` | `string` | `N/A` | Fully formatted string to be displayed as the item's primary number |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. These children should be [Text](#text) or [StatisticsTrend](#statisticstrend) |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
     <Statistics>
       <StatisticsItem label="Sales" number={'30000'}>
-        <Text text="Big Numbers" />
+        <Text>Big Numbers</Text>
       </StatisticsItem>
     </Statistics>
   );
-}
+};
 ```
 
 #### StatisticsTrend
 
 ##### Import
+
 ```javascript
 import { StatisticsTrend } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface StatisticsTrendProps {
   value: string;
   direction: 'increase' | 'decrease';
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `value` | `string` | `N/A`| Formatted string to be displayed as trend value |
-| `direction` | `'increase' \| 'decrease'` | `N/A`| Direction in which the trend arrow should be displayed |
+| --- | --- | --- | --- |
+| `value` | `string` | `N/A` | Formatted string to be displayed as trend value |
+| `direction` | `'increase' \| 'decrease'` | `N/A` | Direction in which the trend arrow should be displayed |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
@@ -940,18 +1092,19 @@ const Extension = () => {
       </StatisticsItem>
     </Statistics>
   );
-}
+};
 ```
 
-
 ### Table
 
 ##### Import
+
 ```javascript
 import { Table } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface TableProps {
   children: ReactNode;
@@ -967,26 +1120,27 @@ interface TableProps {
   page?: number;
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. These children should be [TableHead](#tablehead), [TableFooter](#tablefooter), or [TableBody](#tablebody) |
-| `flush` | `boolean(optional)` | `false`| If true the table will not have bottom margin. |
-| `bordered` | `boolean(optional)` | `true`| If false the table will not haver borders around its content. |
-| `paginated` | `boolean(optional)` | `false`| If true, the table will display the paginator component and consumer will have to provide extra pagination props. |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. These children should be [TableHead](#tablehead), [TableFooter](#tablefooter), or [TableBody](#tablebody) |
+| `flush` | `boolean(optional)` | `false` | If true the table will not have bottom margin. |
+| `bordered` | `boolean(optional)` | `true` | If false the table will not haver borders around its content. |
+| `paginated` | `boolean(optional)` | `false` | If true, the table will display the paginator component and consumer will have to provide extra pagination props. |
 
 **Props for paginated=true**
 
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `pageCount` | `number` | `N/A`| The total number of pages available |
-| `onPageChange` | `onPageChange: (pageNumber: number) => void` |`N/A`| A function that will be invoked when the pagination button is clicked.  It receives the new page number as argument. |
+| --- | --- | --- | --- |
+| `pageCount` | `number` | `N/A` | The total number of pages available |
+| `onPageChange` | `onPageChange: (pageNumber: number) => void` | `N/A` | A function that will be invoked when the pagination button is clicked. It receives the new page number as argument. |
 | `showButtonLabels` | `boolean(optional)` | `true` | if `false`, it hides the text labels for the First/Prev/Next/Last buttons. The button labels will still be accessible for screen readers. |
 | `showFirstLastButtons` | `boolean(optional)` | `false` | if `true`, it displays the First page and Last page buttons. |
 | `maxVisiblePageButtons` | `number(optional)` | `5` | Changes how many page buttons are shown. |
 | `page` | `number(optional)` | `N/A` | Denotes the current page. |
 
-
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
@@ -1005,8 +1159,7 @@ const Extension = () => {
       </TableBody>
     </Table>
   );
-}
-
+};
 
 // Paginated example
 
@@ -1065,24 +1218,29 @@ function PaginatedTable() {
   );
 }
 ```
+
 ### TableBody
 
 ##### Import
+
 ```javascript
 import { TableBody } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface TableBodyProps {
   children: ReactNode;
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. These children should be [TableRow](#tablerow). |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. These children should be [TableRow](#tablerow). |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
@@ -1101,26 +1259,31 @@ const Extension = () => {
       </TableBody>
     </Table>
   );
-}
+};
 ```
+
 ### TableCell
 
 ##### Import
+
 ```javascript
 import { TableCell } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface TableCellProps {
   children: ReactNode;
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components.|
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
@@ -1139,26 +1302,31 @@ const Extension = () => {
       </TableBody>
     </Table>
   );
-}
+};
 ```
+
 ### TableFooter
 
 ##### Import
+
 ```javascript
 import { TableFooter } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface TableFooterProps {
   children: ReactNode;
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. These children should be [TableRow](#tablerow). |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. These children should be [TableRow](#tablerow). |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
@@ -1196,27 +1364,31 @@ const Extension = () => {
       </TableBody>
     </Table>
   );
-}
+};
 ```
 
 ### TableHead
 
 ##### Import
+
 ```javascript
 import { TableHead } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface TableHeadProps {
   children: ReactNode;
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. These children should be [TableHeader](#tableheader). |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. These children should be [TableHeader](#tableheader). |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
@@ -1235,26 +1407,31 @@ const Extension = () => {
       </TableBody>
     </Table>
   );
-}
+};
 ```
+
 ### TableHeader
 
 ##### Import
+
 ```javascript
 import { TableHeader } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface TableHeaderProps {
   children: ReactNode;
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components.|
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
@@ -1273,26 +1450,31 @@ const Extension = () => {
       </TableBody>
     </Table>
   );
-}
+};
 ```
+
 ### TableRow
 
 ##### Import
+
 ```javascript
 import { TableRow } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface TableRowProps {
   children: ReactNode;
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components.|
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
@@ -1311,100 +1493,128 @@ const Extension = () => {
       </TableBody>
     </Table>
   );
-}
+};
 ```
 
 ### Tag
 
 ##### Import
+
 ```javascript
 import { Tag } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface TagProps {
-  text: string;
+  children: ReactNode;
   onClick?: () => void;
   variant?: 'default' | 'warning' | 'success' | 'error';
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `text` | `string` | `N/A`| Text to be displayed in the tag. |
-| `onClick` | `() => void` `(optional)` | `N/A` | A function that will be invoked when the `Tag` is clicked.  It receives no arguments and it's return value is ignored. |
-| `variant` | `'default' \| 'warning' \| 'success' \| 'error'` `(optional)` | `'default'`| The color variation of the tag to display |
+| --- | --- | --- | --- |
+| `children` | `string` | `N/A` | Text to be displayed in the tag. |
+| `onClick` | `() => void` `(optional)` | `N/A` | A function that will be invoked when the `Tag` is clicked. It receives no arguments and it's return value is ignored. |
+| `variant` | `'default' \| 'warning' \| 'success' \| 'error'` `(optional)` | `'default'` | The color variation of the tag to display |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
     <Tag
-      text="Success"
-      variant='success'
+      variant="success"
       onClick={() => {
         console.log('Tag clicked!');
       }}
-    />
+    >
+      Success
+    </Tag>
   );
-}
+};
 ```
 
 ### Text
 
 ##### Import
+
 ```javascript
 import { Text } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
-interface TextProps {
-  format?: 'plaintext' | 'markdown';
-  text: string;
+export interface TextFormatOptions {
+  fontWeight?: 'regular' | 'bold' | 'demibold';
+  italic?: boolean;
+  lineDecoration?: 'none' | 'underline' | 'strikethrough';
+}
+
+export type TextProps = {
   variant?: 'bodytext' | 'microcopy';
+  inline?: boolean;
   children: ReactNode;
-  tagName?: 'p' | 'span' | 'small';
-}
+  format?: TextFormatOptions;
+};
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `format` | `'plaintext' \| 'markdown'` `(optional)`| `'plaintext'`| Type of formatting for the display text. |
-| `text` | `string` | `N/A`| Text to be displayed as body text iff format is `"markdown"`. Inline markdown elements (i.e. bold, italics, code, links) are supported |
-| `children` | `string` | `N/A`| Text to be displayed as body text iff format is `"plaintext"`. |
-| `variant` | `'bodytext' \| 'microcopy'` | `'bodytext`| Type of text to display |
-| `tagName` | `'p' \| 'small' \| 'span'` | `'bodytext`| Type of text element(tag) to display. |
+| --- | --- | --- | --- |
+| `format` | `'TextFormatOptions'` `(optional)` | `N/A` | Type of formatting options for the text. |
+| `children` | `string` | `N/A` | Text to be displayed as body text. |
+| `variant` | `'bodytext' \| 'microcopy'` | `'bodytext'` | Type of text to display |
+| `inline` | `boolean(optional)` | `false` | If `false` the text component will not insert a line break. |
 
-#### Markdown
-Markdown syntax supported in the component:
+#### Format Options
+
+- bold text: `{ fontWeight: 'bold' }`
+- semibold text: `{ fontWeight: 'demibold' }`
+- italicized text: `{ italic: true }`
+- strikethrough text: `{ lineDecoration: 'strikethrough' }`
+- underlined text: `{ lineDecoration: 'underline' }`
+- inline text: `<Text inline={true}/>`
 
-- bold text: `**like this**` or `__like this__`
-- italicized text: `*like this*` or `_like this_`
-- inline code: `` `like this` ``
-- links: `[visible anchor text](https://www.hubspot.com/)`
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
     <>
-      <Text text="**Bold**" format="markdown"/>
-      <Text text="*Italics*" format="markdown"/>
-      <Text text="**Not Bold because format isn't markdown**"/>
-      <Text text="This is going to be small" variant="microcopy"/>
+      <Text>Plain text</Text>
+      <Text format={{ fontWeight: 'bold' }}>Bold</Text>
+      <Text format={{ italic: true }}>Italics</Text>
+      <Text format={{ fontWeight: 'bold', italic: true }}>
+        Bold and Italic text
+      </Text>
+      <Text format={{ lineDecoration: 'strikethrough' }}>
+        Strikethrough Text
+      </Text>
+      <Text variant="microcopy">
+        Microcopy text
+        <Text inline={true} format={{ fontWeight: 'bold' }}>
+          with inner bold
+        </Text>
+      </Text>
     </>
   );
-}
+};
 ```
 
 ### Textarea
 
 ##### Import
+
 ```javascript
 import { Textarea } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface TextareaProps {
   label: string;
@@ -1427,35 +1637,37 @@ interface TextareaProps {
   resize?: 'vertical' | 'horizontal' | 'both' | 'none';
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `label` | `string` | `N/A`| The label text to display for the textarea element |
-| `name` | `string` | `N/A`| The unique identifier for the textarea element, this could be thought of as the HTML5 [Textarea element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#name) |
-| `value` | `string(optional)` | `''`| The value of the textarea |
-| `required` | `boolean(optional)` | `false`| Determines if the required indicator should be displayed |
-| `readOnly` | `boolean(optional)` | `false`| Determines if the field is editable or not. |
-| `description` | `string(optional)` | `N/A`| Instructional message to display to the user to help understand the purpose of the textarea. |
-| `tooltip` | `string(optional)` | `N/A`| Text that will appear in a tooltip next to the textarea label. |
-| `placeholder` | `string(optional)` | `N/A`| Text that appears in the textarea when it has no value set. |
-| `error` | `boolean(optional)` | `false`| If set to true, `validationMessage` is displayed as an error message, if it was provided. The textarea will also render it's error state to let the user know there is an error.  If false, `validationMessage` is displayed as a success message. |
-| `validationMessage` | `string(optional)` | `''`| The text to show if the textarea has an error. |
-| `onChange` | `(value: string) => void(optional)` | `N/A` | A callback function that is invoked when the value is committed.  Currently these times are `onBlur` of the textarea and when the user submits the form.  |
-| `onInput` | `(value: string) => void(optional)` | `N/A`| A function that is called and passed the value every time the field is edited by the user.  It is recommended that you do not use this value to update state, that is what `onChange` should be used for. Instead this should be used for validation. |
-| `onBlur` | `(value: string) => void(optional)` | `N/A`| A function that is called and passed the value every time the field loses focus. |
-| `onFocus` | `(value: string) => void(optional)` | `N/A`| A function that is called and passed the value every time the field gets focused. |
+| --- | --- | --- | --- |
+| `label` | `string` | `N/A` | The label text to display for the textarea element |
+| `name` | `string` | `N/A` | The unique identifier for the textarea element, this could be thought of as the HTML5 [Textarea element's name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#name) |
+| `value` | `string(optional)` | `''` | The value of the textarea |
+| `required` | `boolean(optional)` | `false` | Determines if the required indicator should be displayed |
+| `readOnly` | `boolean(optional)` | `false` | Determines if the field is editable or not. |
+| `description` | `string(optional)` | `N/A` | Instructional message to display to the user to help understand the purpose of the textarea. |
+| `tooltip` | `string(optional)` | `N/A` | Text that will appear in a tooltip next to the textarea label. |
+| `placeholder` | `string(optional)` | `N/A` | Text that appears in the textarea when it has no value set. |
+| `error` | `boolean(optional)` | `false` | If set to true, `validationMessage` is displayed as an error message, if it was provided. The textarea will also render it's error state to let the user know there is an error. If false, `validationMessage` is displayed as a success message. |
+| `validationMessage` | `string(optional)` | `''` | The text to show if the textarea has an error. |
+| `onChange` | `(value: string) => void(optional)` | `N/A` | A callback function that is invoked when the value is committed. Currently these times are `onBlur` of the textarea and when the user submits the form. |
+| `onInput` | `(value: string) => void(optional)` | `N/A` | A function that is called and passed the value every time the field is edited by the user. It is recommended that you do not use this value to update state, that is what `onChange` should be used for. Instead this should be used for validation. |
+| `onBlur` | `(value: string) => void(optional)` | `N/A` | A function that is called and passed the value every time the field loses focus. |
+| `onFocus` | `(value: string) => void(optional)` | `N/A` | A function that is called and passed the value every time the field gets focused. |
 | `cols` | `number(optional)` | `N/A` | The visible width of the text control, in average character widths. |
 | `rows` | `number(optional)` | `N/A` | The number of visible text lines for the control. |
 | `maxLength` | `number(optional)` | `N/A` | The maximum number of characters (UTF-16 code units) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters. |
-| `resize` | `'vertical' \| 'horizontal' \| 'both' \| 'none'` `(optional)`| `'vertical'` | Sets whether an element is resizable, and if so, in which directions. |
+| `resize` | `'vertical' \| 'horizontal' \| 'both' \| 'none'` `(optional)` | `'vertical'` | Sets whether an element is resizable, and if so, in which directions. |
 
 ##### Usage
+
 ```javascript
 import { useState } from 'react';
 
 const Extension = () => {
-  const [ desciptiption, setDescription ] = useState('');
-  const [ validationMessage, setValidationMessage ] = useState('');
-  const [ isValid, setIsValid ] = useState(true);
+  const [desciptiption, setDescription] = useState('');
+  const [validationMessage, setValidationMessage] = useState('');
+  const [isValid, setIsValid] = useState(true);
 
   return (
     <Form>
@@ -1468,58 +1680,137 @@ const Extension = () => {
         required={true}
         error={!isValid}
         validationMessage={validationMessage}
-        onChange={(value) => {
-          setDescription(value)
+        onChange={value => {
+          setDescription(value);
         }}
-        onInput={(value) => {
+        onInput={value => {
           if (!value.includes('http')) {
             setValidationMessage('A link must be included.');
             setIsValid(false);
           } else {
-            setValidationMessage('Valid description!')
+            setValidationMessage('Valid description!');
             setIsValid(true);
           }
         }}
       />
     </Form>
   );
-}
+};
 ```
 
-
 ### Tile
 
 ##### Import
+
 ```javascript
 import { Tile } from '@hubspot/ui-extensions';
 ```
 
 ##### Props
+
 ```typescript
 interface TileProps {
   children: ReactNode;
   flush?: boolean;
 }
 ```
+
 | Prop | Type | Default | Description |
-| - | - | - | - |
-| `children` | `ReactNode` | `N/A`| Sets the content that will render inside the component.  This prop is passed implicitly by providing sub-components. |
-| `flush` | `boolean(optional)` | `false`| If true the content of the Tile will have no left or right padding. |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+| `flush` | `boolean(optional)` | `false` | If true the content of the Tile will have no left or right padding. |
 
 ##### Usage
+
 ```javascript
 const Extension = () => {
   return (
     <>
       <Tile flush={true}>
-        <Text text="No left padding" />
+        <Text>No left padding</Text>
       </Tile>
       <Tile>
-        <Text text="Small amount of left padding" />
+        <Text>Small amount of left padding</Text>
       </Tile>
     </>
   );
-}
+};
+```
+
+### ToggleGroup
+
+##### Import
+
+```javascript
+import { ToggleGroup } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+type ToggleGroupProps = {
+  toggleType: 'checkboxList' | 'radioButtonList';
+  name: string;
+  label: string;
+  value?: string | string[];
+  onChange?: (value: string) => void | (value: string[]) => void;
+  validationMessage?: string;
+  required?: boolean;
+  tooltip?: string;
+  error?: boolean;
+  options: {
+    label: string;
+    value: string;
+    initialIsChecked?: boolean;
+    readonly?: boolean;
+    description?: string;
+  }[];
+  inline?: boolean;
+  variant?: 'default' | 'small';
+};
+
+```
 
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `toggleType` | `'radioButtonList' \| 'checkboxList'` | `N/A` | The type of toggles that will be shown. `'checkboxList'` is a multi-select and `'radioButtonList'` is a single select | ; |
+| `name` | `string` | `N/A` | The unique identifier for the toggle group element. |
+| `label` | `string` | `N/A` | The label text to display for the toggle group element. |
+| `options` | `Array<{ label: string; value: string; initialIsChecked?: boolean; readonly?: boolean; description?: string }>` | `N/A` |  |
+| `value` | `string \| string[]` `(optional)` | `N/A` | The value of the toggle group. If `toggleType` is `'radioButtonList'`, this should be a `string`. If `toggleType` is `'checkboxList'` this should be an array of `string`s. |
+| `onChange` | `(value: string) => void \| (value: string[]) => void` `(optional)` | `N/A` | A function that is called with the new value or values when it is updated. If `toggleType` is `'radioButtonList'`, the function will be called with the `value` that is a `string`. If `toggleType` is `'checkboxList'` the function will be called with the `value` that is an array of `string`s. |
+| `required` | `boolean(optional)` | `false` | Determines if the required indicator should be displayed |
+| `tooltip` | `string` | `N/A` | Text that will appear in a tooltip next to the toggle group label. |
+| `error` | `boolean(optional)` | `false` | If set to true, `validationMessage` is displayed as an error message, if it was provided. The input will also render it's error state to let the user know there is an error. If false, `validationMessage` is displayed as a success message. |
+| `validationMessage` | `string(optional)` | `''` | The text to show if the input has an error. |
+| `inline` | `boolean(optional)` | `false` | Determines of the options are stacked vertically or share a line horizontally. |
+| `variant` | `'default' \| 'small'` `(optional)` | `default` | The size variation of the individual options. |
+
+##### Usage
+
+```javascript
+const options = [1, 2, 3, 4].map(n => ({
+  label: `Option ${n}`,
+  value: `${n}`,
+  initialIsChecked: n === 2,
+  readonly: false,
+  description: `This is option ${n}`,
+}));
 
+const Extension = () => {
+  return (
+    <ToggleGroup
+      name="toggle-checkboxes"
+      label="Toggle these things"
+      error={false}
+      options={options}
+      tooltip="Here's a secret tip."
+      validationMessage="Make sure you do the thing correctly."
+      required={false}
+      inline={false}
+      toggleType="checkboxList"
+      variant="default"
+    />
+  );
+};
 ```