❤
npm
Sign UpSign In

@hubspot/ui-extensions
TypeScript icon, indicating that this package has built-in type declarations

0.0.1-beta.2 • Public • Published

UI Extensions

React components and utilities for extending HubSpot's UI.

TOC

Components

Alert

Import
import { Alert } from '@hubspot/ui-extensions';
Props

The Alert component accepts the following props:

export interface AlertProps {
  title: string;
  children?: ReactNode;
  variant?: 'info' | 'warning' | 'success' | 'error' | 'danger';
}
Prop Type Default Description
title string N/A The title text for the alert message.
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
const Extension = () => {
  return (
    <>
      <Alert title="Important Info" variant="info">
        This is an informative message.
      </Alert>
      <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>
    </>
  );
};

Button

Import
import { Button } from '@hubspot/ui-extensions';
Props
interface ButtonProps {
  children: string;
  onClick?: () => void;
  href?: string;
  disabled?: boolean;
  variant?: 'primary' | 'secondary' | 'destructive';
  type?: 'button' | 'reset' | 'submit';
}
Prop Type Default Description
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
const Extension = () => {
  return (
    <Button
      onClick={() => {
        console.log('Someone clicked on the button!');
      }}
      href="https://hubspot.com"
      variant="destructive"
      type="button"
    >
      Click me!
    </Button>
  );
};

ButtonRow

Import
import { ButtonRow } from '@hubspot/ui-extensions';
Props
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
const Extension = () => {
  return (
    <ButtonRow disableDropdown={false}>
      <Button
        onClick={() => {
          console.log('Regular button clicked');
        }}
      >
        Regular Button
      </Button>
      <Button
        onClick={() => {
          console.log('Reset button clicked');
        }}
        variant="destructive"
        type="reset"
      >
        Reset
      </Button>
      <Button
        onClick={() => {
          console.log('Submit button clicked');
        }}
        variant="primary"
        type="submit"
      >
        Submit
      </Button>
    </ButtonRow>
  );
};

Card

Import
import { Card } from '@hubspot/ui-extensions';
Props
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
const Extension = () => {
  return (
    <Card>
      <Button
        onClick={() => {
          console.log('Regular button clicked');
        }}
      >
        Regular Button
      </Button>
    </Card>
  );
};

DescriptionList

Import
import { DescriptionList } from '@hubspot/ui-extensions';
Props
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
direction 'row' | 'column' (optional) 'column' The direction the label/value pairs are placed in the description list container.
Usage
const Extension = () => {
  return (
    <DescriptionList direction="row">
      <DescriptionListItem label={'First Name'}>
        <Text>Alan</Text>
      </DescriptionListItem>
      <DescriptionListItem label={'Last Name'}>
        <Text>Turing</Text>
      </DescriptionListItem>
    </DescriptionList>
  );
};

DescriptionListItem

Import
import { DescriptionListItem } from '@hubspot/ui-extensions';
Props
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
const Extension = () => {
  return (
    <DescriptionList direction="row">
      <DescriptionListItem label={'First Name'}>
        <Text>Alan</Text>
      </DescriptionListItem>
      <DescriptionListItem label={'Last Name'}>
        <Text>Turing</Text>
      </DescriptionListItem>
    </DescriptionList>
  );
};

Divider

Import
import { Divider } from '@hubspot/ui-extensions';
Props
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
const Extension = () => {
  return <Divider distance="extra-large" />;
};

Form

Import
import { Form } from '@hubspot/ui-extensions';
Props
interface FormProps {
  children: ReactNode;
  onSubmit?: (event: RemoteEvent<FormInputValues>) => 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 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
const Extension = () => {
  return (
    <Form onSubmit={() => { console.log('Form submitted!')}} preventDefault={true}>
      <Input {...} />
      <Select {...} />
      <Button
        onClick={() => {
          console.log('Submit button clicked');
        }}
        variant="primary"
        type="submit"
      >
        Submit
      </Button>
    </Form>
  );
}

EmptyState

Import
import { EmptyState } from '@hubspot/ui-extensions';
Props
interface EmptyStateProps {
  children: ReactNode;
  flush?: boolean;
  imageWidth?: number;
  layout?: 'horizontal' | 'vertical';
  reverseOrder?: boolean;
  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.
flush boolean(optional) false Removes the default vertical margins for the component.
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.
Usage
const Extension = ({ data }) => {
  if (!data || !data.length) {
    return (
      <EmptyState title="Nothing here yet" layout="vertical" reverseOrder={true}>
        <Text>Go out there and get some leads!</Text>
      </EmptyState>
    )
  }

  return (
    <Stack>
      {data.map(...)}
    </Stack>
  );
}

ErrorState

Import
import { ErrorState } from '@hubspot/ui-extensions';
Props
interface ErrorStateProps {
  children: ReactNode;
  title?: string;
  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.
type 'error' | 'support' | 'lock' (optional) 'error' Sets the type of error image that will be shown.
Usage
const Extension = ({ data, error, fetchData }) => {
  if (error) {
    return (
      <ErrorState title="Trouble fetching properties." layout="vertical" reverseOrder={true}>
        <Stack>
          <Text>
            Please try again in a few moments.
          </Text>
          <Button onClick={fetchData}>
            Try again
          </Button>
        </Stack>
      </ErrorState>
    )
  }

  return (
    <Stack>
      {data.map(...)}
    </Stack>
  );
}

Heading

Import
import { Heading } from '@hubspot/ui-extensions';
Props
interface HeadingProps {
  children: ReactNode;
  inline?: boolean;
}
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
const Extension = () => {
  return <Heading>Plain text, nothing special here</Heading>;
};

Image

Import
import { Image } from '@hubspot/ui-extensions';
Props
interface ImageProps {
  alt?: string;
  href?: string;
  onClick?: () => void;
  src: string;
  width?: number;
  height?: number;
}
Prop Type Description
alt string(optional) The alt text for the image, similar to the alt attribute for the html img tag
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
width number(optional) The pixel width of the image
height number(optional) The pixel height of the image
Usage
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
import { Input } from '@hubspot/ui-extensions';
Props
interface InputProps {
  label: string;
  name: string;
  value?: string;
  required?: boolean;
  readOnly?: boolean;
  description?: string;
  tooltip?: string;
  placeholder?: string;
  error?: boolean;
  validationMessage?: string;
  onChange?: (value: string) => void;
  onInput?: (value: string) => void;
  onBlur?: (value: string) => void;
  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
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
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>
  );
};

Link

Import
import { Link } from '@hubspot/ui-extensions';
Props
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.
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.
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
const Extension = () => {
  return <Link href="https://app.hubspot.com/">HubSpot</Link>;
};

LoadingSpinner

Import
import { LoadingSpinner } from '@hubspot/ui-extensions';
Props
export interface LoadingSpinnerProps {
  label: string;
  showLabel?: boolean;
  size?: 'xs' | 'extra-small' | 'sm' | 'small' | 'md' | 'medium';
  layout?: 'inline' | 'centered';
}
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' | '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
const Extension = () => {
  return <LoadingSpinner label="Loading..." />;
};

NumberInput

Import
import { NumberInput } from '@hubspot/ui-extensions';
Props
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
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
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
import { ProgressBar } from '@hubspot/ui-extensions';
Props
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
const Extension = () => {
  return (
    <ProgressBar
      variant="warning"
      value={50}
      valueMax={200}
      showPercentage={true}
    />
  );
};

Select

Import
import { Select } from '@hubspot/ui-extensions';
Props
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
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
import { Stack } from '@hubspot/ui-extensions';
Props
interface StackProps {
  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' | '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
const Extension = () => {
  return (
    <Stack>
      <Image {...} />
      <Text {...} />
    </Stack>
    );
}

Statistics

Import
import { Statistics } from '@hubspot/ui-extensions';
Props
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 or StatisticsTrend
Usage
const Extension = () => {
  return (
    <Statistics>
      <StatisticsItem {...} />
      <StatisticsTrend {...} />
    </Statistics>
  );
}

StatisticsItem

Import
import { StatisticsItem } from '@hubspot/ui-extensions';
Props
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 or StatisticsTrend
Usage
const Extension = () => {
  return (
    <Statistics>
      <StatisticsItem label="Sales" number={'30000'}>
        <Text>Big Numbers</Text>
      </StatisticsItem>
    </Statistics>
  );
};

StatisticsTrend

Import
import { StatisticsTrend } from '@hubspot/ui-extensions';
Props
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
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
import { Table } from '@hubspot/ui-extensions';
Props
interface TableProps {
  children: ReactNode;
  flush?: boolean;
  bordered?: boolean;
  paginated?: boolean;
  // if paginated=true
  pageCount: number;
  onPageChange: (pageNumber: number) => void;
  showButtonLabels?: boolean;
  showFirstLastButtons?: boolean;
  maxVisiblePageButtons?: number;
  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, TableFooter, or 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.
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
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>
  );
};

// Paginated example

function generateData(count = 15) {
  const result = [];

  for (let index = 0; index < count; index++) {
    result.push({
      name: `Jane Doe ${index}`,
      email: `janedoemail${index}@hubspot.com`,
    });
  }

  return result;
}

function PaginatedTable() {
  const ITEMS_PER_PAGE = 10;
  const data = generateData(30);

  const [currentPage, setCurrentPage] = useState(1);
  const pageCount = data.length / ITEMS_PER_PAGE;

  const dataToDisplay = data.slice(
    (currentPage - 1) * ITEMS_PER_PAGE,
    currentPage * ITEMS_PER_PAGE
  );

  return (
    <Table
      paginated={true}
      pageCount={pageCount}
      page={currentPage}
      onPageChange={(nextPageNumber: number) => {
        setCurrentPage(nextPageNumber);
      }}
    >
      <TableHead>
        <TableRow>
          <TableHeader>Name</TableHeader>
          <TableHeader>Email</TableHeader>
        </TableRow>
      </TableHead>
      <TableBody>
        {dataToDisplay.map(({ name, email }) => {
          console.log(name, email);
          return (
            <TableRow key={email}>
              <TableCell>{name}</TableCell>
              <TableCell>{email}</TableCell>
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  );
}

TableBody

Import
import { TableBody } from '@hubspot/ui-extensions';
Props
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.
Usage
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
import { TableCell } from '@hubspot/ui-extensions';
Props
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
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
import { TableFooter } from '@hubspot/ui-extensions';
Props
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.
Usage
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
import { TableHead } from '@hubspot/ui-extensions';
Props
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.
Usage
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
import { TableHeader } from '@hubspot/ui-extensions';
Props
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
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
import { TableRow } from '@hubspot/ui-extensions';
Props
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
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
import { Tag } from '@hubspot/ui-extensions';
Props
interface TagProps {
  children: ReactNode;
  onClick?: () => void;
  variant?: 'default' | 'warning' | 'success' | 'error';
}
Prop Type Default Description
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
const Extension = () => {
  return (
    <Tag
      variant="success"
      onClick={() => {
        console.log('Tag clicked!');
      }}
    >
      Success
    </Tag>
  );
};

Text

Import
import { Text } from '@hubspot/ui-extensions';
Props
export interface TextFormatOptions {
  fontWeight?: 'regular' | 'bold' | 'demibold';
  italic?: boolean;
  lineDecoration?: 'none' | 'underline' | 'strikethrough';
}

export type TextProps = {
  variant?: 'bodytext' | 'microcopy';
  inline?: boolean;
  children: ReactNode;
  format?: TextFormatOptions;
};
Prop Type Default Description
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.

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}/>
Usage
const Extension = () => {
  return (
    <>
      <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
import { Textarea } from '@hubspot/ui-extensions';
Props
interface TextareaProps {
  label: string;
  name: string;
  value?: string;
  required?: boolean;
  readOnly?: boolean;
  description?: string;
  tooltip?: string;
  placeholder?: string;
  error?: boolean;
  validationMessage?: string;
  onChange?: (value: string) => void;
  onInput?: (value: string) => void;
  onBlur?: (value: string) => void;
  onFocus?: (value: string) => void;
  cols?: number;
  maxLength?: number;
  rows?: number;
  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
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.
Usage
import { useState } from 'react';

const Extension = () => {
  const [desciptiption, setDescription] = useState('');
  const [validationMessage, setValidationMessage] = useState('');
  const [isValid, setIsValid] = useState(true);

  return (
    <Form>
      <Textarea
        label="Description"
        name="description"
        tooltip="Provide as much detail as possible"
        description="Please include a link"
        placeholder="My desription"
        required={true}
        error={!isValid}
        validationMessage={validationMessage}
        onChange={value => {
          setDescription(value);
        }}
        onInput={value => {
          if (!value.includes('http')) {
            setValidationMessage('A link must be included.');
            setIsValid(false);
          } else {
            setValidationMessage('Valid description!');
            setIsValid(true);
          }
        }}
      />
    </Form>
  );
};

Tile

Import
import { Tile } from '@hubspot/ui-extensions';
Props
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
const Extension = () => {
  return (
    <>
      <Tile flush={true}>
        <Text>No left padding</Text>
      </Tile>
      <Tile>
        <Text>Small amount of left padding</Text>
      </Tile>
    </>
  );
};

ToggleGroup

Import
import { ToggleGroup } from '@hubspot/ui-extensions';
Props
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 strings. | | 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 strings. | | 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
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"
    />
  );
};

Readme

Keywords

none

Package Sidebar

Install

npm i @hubspot/ui-extensions@0.0.1-beta.2

Version

0.0.1-beta.2

License

MIT

Unpacked Size

89.3 kB

Total Files

16

Last publish

Collaborators

  • hemangthakkar
  • tamarayu
  • jyeager_hubspot
  • camdenphalen
  • bmatto_hs
  • elingyr
  • alonso-cadenas
  • jsines
  • tfinley_hs
  • mshannon_hs
  • bbriggs
  • arota-hubspot
  • bbarbosa-hubspot
  • service-ccs
  • kemmerle
  • banderson
  • also
  • rberdeen-hubspot
  • harminder01
  • bkrainer-hs
  • friss
  • jhilker
  • atanasiuk
  • ksvirkou-hubspot
  • kbreeman-hubspot
  • brodgers16
Try on RunKit
Report malware