@hubspot/ui-extensions 0.0.1-prealpha.2 → 0.0.1-prealpha.4

package/README.md

@@ -0,0 +1,1228 @@
+# ui-extensions-components
+
+## TOC
+
+- [Alert](#alert)
+- [Button](#button)
+- [ButtonRow](#buttonrow)
+- [Card](#card)
+- [DescriptionList](#descriptionlist)
+    - [DescriptionListItem](#descriptionlistitem)
+- [Divider](#divider)
+- [Form](#form)
+- [Heading](#heading)
+- [Image](#image)
+- [Input](#input)
+- [LoadingSpinner](#loadingspinner)
+- [ProgressBar](#progressbar)
+- [Select](#select)
+- [Stack](#stack)
+- [Statistics](#statistics)
+    - [StatisticsItem](#statisticsitem)
+    - [StatisticsTrend](#statisticstrend)
+- [Table](#table)
+    - [TableBody](#tablebody)
+    - [TableCell](#tablecell)
+    - [TableFooter](#tablefooter)
+    - [TableHead](#tablehead)
+    - [TableHeader](#tableheader)
+    - [TableRow](#tablerow)
+- [Tag](#tag)
+- [Text](#text)
+- [Tile](#tile)
+
+## Components
+
+### Alert
+
+##### Import
+
+```javascript
+import { Alert } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+The Alert component accepts the following props:
+
+```typescript
+export interface AlertProps {
+  title: string;
+  body?: string;
+  children?: ReactNode;
+  variant?: 'info' | 'warning' | 'success' | 'error' | 'danger';
+}
+```
+
+| 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 |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <>
+      <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"
+      />
+    </>
+  );
+};
+```
+
+### Button
+
+##### Import
+```javascript
+import { Button } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface ButtonProps {
+  text: string;
+  onClick?: () => void;
+  href?: string;
+  disabled?: boolean;
+  variant?: 'primary' | 'secondary' | 'destructive';
+  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.|
+| `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"
+    />
+  );
+}
+```
+
+### 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. |
+| `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');
+        }}
+      />
+      <Button
+        text="Reset"
+        onClick={() => {
+          console.log('Reset button clicked');
+        }}
+        variant="destructive"
+        type="reset"
+      />
+      <Button
+        text="Submit"
+        onClick={() => {
+          console.log('Submit button clicked');
+        }}
+        variant="primary"
+        type="submit"
+      />
+    </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. |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Card>
+      <Button
+        text="Regular Button"
+        onClick={() => {
+          console.log('Regular button clicked');
+        }}
+      />
+    </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. |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <DescriptionList direction="row">
+      <DescriptionListItem label={"First Name"}>
+          <Text text="Alan" />
+      </DescriptionListItem>
+      <DescriptionListItem label={"Last Name"}>
+          <Text text="Turing" />
+      </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 |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <DescriptionList direction="row">
+      <DescriptionListItem label={"First Name"}>
+          <Text text="Alan" />
+      </DescriptionListItem>
+      <DescriptionListItem label={"Last Name"}>
+          <Text text="Turing" />
+      </DescriptionListItem>
+    </DescriptionList>
+  );
+}
+```
+
+### Divider
+
+##### Import
+```javascript
+import { Divider } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface DividerProps {
+  distance?:
+    | 'flush'
+    | 'extra-small'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | '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. |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Divider distance="extra-large"/>
+  );
+}
+```
+
+### Form
+
+##### Import
+```javascript
+import { Form } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface FormProps {
+  children: ReactNode;
+  onSubmit?: () => void;
+  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 no arguments 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 (
+    <Form onSubmit={() => { console.log('Form submitted!')}} preventDefault={true}>
+      <Input {...} />
+      <Select {...} />
+      <Button
+        text="Submit"
+        onClick={() => {
+          console.log('Submit button clicked');
+        }}
+        variant="primary"
+        type="submit"
+      />
+    </Form>
+  );
+}
+```
+
+### Heading
+
+##### Import
+```javascript
+import { Heading } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface HeadingProps {
+  text: string;
+  format?: 'plaintext' | 'markdown';
+}
+```
+| 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/)`
+
+##### 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"/>
+    </>
+  );
+}
+```
+
+### Image
+##### Import
+
+
+```javascript
+import { Image } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+ interface ImageProps {
+  alt?: string;
+  href?: string;
+  onClick?: () => void;
+  src: string;
+  width?: number;
+}
+```
+
+| 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)|
+| `width` | `number(optional)` | The pixel width of the image |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Image
+      alt="A picture of an adorable black lab puppy, click on me to see in a new tab"
+      src="https://picsum.photos/id/237/200/300"
+      href="https://picsum.photos/id/237"
+      onClick={() => {
+        console.log('Someone clicked on the image!')
+      }}
+      width={200}
+    />
+  );
+}
+```
+
+### Input
+
+##### Import
+```javascript
+import { Input } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface InputProps {
+  label: string;
+  name: string;
+  value?: string;
+  required?: boolean;
+  readonly?: boolean;
+  description?: string;
+  tooltip?: string;
+  placeholder?: string;
+  error?: boolean;
+  errorMessage?: string;
+  onChange: (value: string) => void;
+  onInput: (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` | `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 stops typing.  |
+| `onInput` | `(value: string) => void` | `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. |
+
+##### Usage
+```javascript
+import { useState } from 'react';
+
+const Extension = () => {
+  const [ name, setName ] = useState('');
+  const [ validationMessage, setValidationMessage ] = useState('');
+  const [ isValid, setIsValid ] = useState(true);
+
+  return (
+    <Form>
+      <Input
+        label="First Name"
+        name="first-name"
+        tooltip="Please enter your first name"
+        description="Please enter your first name"
+        placeholder="First name"
+        required={true}
+        error={!isValid}
+        validationMessage={validationMessage}
+        onChange={(value) => {
+          setName(value)
+        }}
+        onInput={(value) => {
+          if(value !== 'Bill') {
+            setValidationMessage('This form only works for people named Bill');
+            setIsValid(false);
+          } else if (value === '') {
+            setValidationMessage('First name is required')
+            setIsValid(false);
+          } else {
+            setValidationMessage('Valid first name!')
+            setIsValid(true);
+          }
+        }}
+      />
+    </Form>
+  );
+}
+```
+
+### LoadingSpinner
+
+##### Import
+```javascript
+import { LoadingSpinner } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+export interface LoadingSpinnerProps {
+  label: string;
+  showLabel?: boolean;
+  size?: 'xs' | 'sm' | 'md';
+  layout?: 'inline' | 'centered';
+  grow?: boolean;
+}
+```
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `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%.|
+
+##### Usage
+```javascript
+const Extension = () => {
+  return <LoadingSpinner label="Loading..." />;
+}
+```
+### ProgressBar
+
+##### Import
+```javascript
+import { ProgressBar } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+ export interface ProgressBarProps {
+  title?: string;
+  showPercentage?: boolean;
+  value?: number;
+  valueMax?: number;
+  valueDescription?: string;
+  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.
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <ProgressBar
+      variant="warning"
+      value={50}
+      valueMax={200}
+      showPercentage={true}
+    />
+    );
+}
+```
+
+### Select
+
+##### Import
+```javascript
+import { Select } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface SelectProps {
+  label: string;
+  name: string;
+  value?: string | number | boolean;
+  required?: boolean;
+  readonly?: boolean;
+  description?: string;
+  tooltip?: string;
+  placeholder?: string;
+  error?: boolean;
+  errorMessage?: string;
+  onChange: (value: string) => void;
+  options: {
+    label: string;
+    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. |
+
+##### Usage
+```javascript
+const Extension = () => {
+  const [ name, setName ] = useState(null);
+  const [ validationMessage, setValidationMessage ] = useState('');
+  const [ isValid, setIsValid ] = useState(true);
+
+  const options = [
+    {label: 'Bill', value: 42},
+    {label: 'Ted', value: 43}
+  ];
+
+  return (
+    <Form>
+      <Select
+        label="Best Bill & Ted Character?"
+        name="best-char"
+        tooltip="Please choose"
+        description="Please choose"
+        placeholder="Bill or Ted?"
+        required={true}
+        error={!isValid}
+        validationMessage={validationMessage}
+        onChange={(value) => {
+          setName(value)
+          if(!value) {
+            setValidationMessage('This is required');
+            setIsValid(false);
+          } else {
+            setValidationMessage('Excellent!');
+            setIsValid(true);
+          }
+        }}
+        options={options}
+      />
+    </Form>
+  );
+}
+```
+
+### Stack
+
+##### Import
+```javascript
+import { Stack } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface StackProps {
+  distance?: 'flush' | 'small';
+  children?: ReactNode;
+}
+```
+| Prop | Type | Default | Description |
+| - | - | - | - |
+| `distance` | `'flush' \| 'small'` | `'small'`| Amount of padding between each child component passed as children |
+| `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 (
+    <Stack>
+      <Image {...} />
+      <Text {...} />
+    </Stack>
+    );
+}
+```
+
+### 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) |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Statistics>
+      <StatisticsItem {...} />
+      <StatisticsTrend {...} />
+    </Statistics>
+  );
+}
+```
+
+#### StatisticsItem
+
+##### Import
+```javascript
+import { StatisticsItem } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface StatisticsItemProps {
+  id?: string;
+  label: string;
+  number: string;
+  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) |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Statistics>
+      <StatisticsItem label="Sales" number={'30000'}>
+        <Text text="Big Numbers" />
+      </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 |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Statistics>
+      <StatisticsItem label="Item A Sales" number="10000">
+        <StatisticsTrend direction="decrease" value="200%" />
+      </StatisticsItem>
+      <StatisticsItem label="Item B Sales" number="100000">
+        <StatisticsTrend direction="increase" value="100%" />
+      </StatisticsItem>
+    </Statistics>
+  );
+}
+```
+
+
+### Table
+
+##### Import
+```javascript
+import { Table } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface TableProps {
+  children: ReactNode;
+  flush?: boolean;
+  bordered?: 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. 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. |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```
+### 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). |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </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.|
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </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). |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Series</TableHeader>
+          <TableHeader>Years on air</TableHeader>
+          <TableHeader>Emmys</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableFooter>
+        <TableRow>
+          <TableHeader>Totals</TableHeader>
+          <TableHeader>43</TableHeader>
+          <TableHeader>50</TableHeader>
+        </TableRow>
+      </TableFooter>
+      <TableBody>
+        <TableRow>
+          <TableCell>The Simpsons</TableCell>
+          <TableCell>28</TableCell>
+          <TableCell>31</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>M*A*S*H</TableCell>
+          <TableCell>11</TableCell>
+          <TableCell>14</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Arrested Development</TableCell>
+          <TableCell>4</TableCell>
+          <TableCell>5</TableCell>
+        </TableRow>
+      </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). |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </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.|
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </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.|
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Table bordered={true}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Phone</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Roger Federer</TableCell>
+          <TableCell>555-555-7866</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### Tag
+
+##### Import
+```javascript
+import { Tag } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface TagProps {
+  text: string;
+  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 |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <Tag
+      text="Success"
+      variant='success'
+      onClick={() => {
+        console.log('Tag clicked!');
+      }}
+    />
+  );
+}
+```
+
+### Text
+
+##### Import
+```javascript
+import { Text } from '@hubspot/ui-extensions';
+```
+
+##### Props
+```typescript
+interface TextProps {
+  format?: 'plaintext' | 'markdown';
+  text: string;
+  variant?: 'bodytext' | 'microcopy';
+}
+```
+| 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. If format is `"markdown"`, inline markdown elements (i.e. bold, italics, code, links) are supported |
+| `variant` | `'bodytext' \| 'microcopy'` | `'bodytext`| Type of text to display |
+
+#### 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/)`
+
+##### 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"/>
+    </>
+  );
+}
+```
+
+### 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. |
+
+##### Usage
+```javascript
+const Extension = () => {
+  return (
+    <>
+      <Tile flush={true}>
+        <Text text="No left padding" />
+      </Tile>
+      <Tile>
+        <Text text="Small amount of left padding" />
+      </Tile>
+    </>
+  );
+}
+
+
+```