Terra React Component Library

The Terra React Component Library is built using the Trimble SketchUp Terra Style Design System.

This version of Terra is used by Luna v. 0.x and MEP.

Terra React Storybook

You can find the Storybook site for Terra's React component library here.

Terra Design System Website

The design system website for Terra can be found here.

Getting Started

To get started with Terra, install it in your project from the command line with:

npm install --save terra-component-lib

To use components from Terra in your React project, destructure them in your component file. Example:

import { Button } from 'terra-component-lib';

You can then use the imported Terra component within your own application.

Components

Atoms

Button

Props -

• onClick (required) - function that determines the method called when the button is clicked taking an argument of the event object
• className - string that determines the type of button (see options), interpolates into component className, defaults to Primary 1
• text (required) - string that determines the inner text of the button element
• name - string used for the check box's name for parent state management
• url - string used for generating either an <a> tag (starts with http) or React Router <NavLink>

######className options -

• Primary 1 - "ter-button-primary--1"
• Primary 2 - "ter-button-primary--2"
• Primary 3 - "ter-button-primary--3"
• Primary 4 - "ter-button-primary--4"
• Primary 5 - "ter-button-primary--5"
• Secondary 1 - "ter-button-secondary--1"
• Secondary 2 - "ter-button-secondary--2"
• Secondary 3 - "ter-button-secondary--3"
• Secondary 4 - "ter-button-secondary--4"
• Secondary 5 - "ter-button-secondary--5"
• Small Button - "ter-button--small"

Example -

<Button
  text="Button"
  onClick={this.handleClickOne}
  className="ter-button--primary--1"
/>
<Button
  text="Button"
  onClick={this.handleClickTwo}
  className="ter-button--secondary--2 ter-button--small"
/>

ButtonLink

Props -

• url (required) - string that provides the markup necessary to populate the href of an <a> tag or the to of a React Router <NavLink>. The tag generated is based on the string the passed in. Anything starting with http will render an <a> tag while anything starting with / will render a <NavLink>.
• className (required) - string that determines the type of button (see options) - interpolates into component className - see options below
• text (required) - string that determines the inner text of the button element

######className options -

• Primary 1 - "ter-button-primary--1"
• Primary 2 - "ter-button-primary--2"
• Primary 3 - "ter-button-primary--3"
• Primary 4 - "ter-button-primary--4"
• Primary 5 - "ter-button-primary--5"
• Secondary 1 - "ter-button-secondary--1"
• Secondary 2 - "ter-button-secondary--2"
• Secondary 3 - "ter-button-secondary--3"
• Secondary 4 - "ter-button-secondary--4"
• Secondary 5 - "ter-button-secondary--5"
• Small Button - "ter-button--small"

Example -

<Button
  text="Button"
  url='www.hello.com'
  className="ter-button--primary--1"
/>
<Button
  text="Button"
  url='www.hello.com'
  className="ter-button--secondary--2 ter-button--small"
/>

Header

Props -

• text (required) - string for generating header text
• fontSize - string for determining font size, defaults to 'lg', see Terra documentation for variable syntax
• fontWeight - string for determing font weight, defaults to 'extra-bold', see Terra documentation for variable syntax
• color - string for determining color, defaults to 'black', see Terra documentation for variable syntax
• 'align' - string for determining alignment, defaults to 'center', see Terra documentation for variable syntax

Example -

<Header text='I am a Header' fontSize='xl' fontWeight='bold' color='brand-1' align='start' />

HeadshotDumpling

Props -

• image (required) - object with url and altText string key/values
• header (required) - text string for generating the primary text, generally a name
• subHeader - text string for generating the secondary text, generally location
• text - string for generating description/body text, generally job title
• filter - string for creating a filter for the image, accepts 'grayscale' and 'blue'

Example -

<HeaderShotDumpling
  image={{url:'./test.png', altText='alt text'}}
  header='Name'
  subHeader='Location'
  text='Incididunt veniam reprehenderit eu sit qui.'
  filter='blue'
/>

ArticleCard

Props -

• image (required) - object with url and altText string key/values
• header (required) - text string for generating the primary text, generally a name
• link (required) - string of a URL to link the card to
• category (required) - string for generating category of node text

Example -

<ArticleCard
  link="/#"
  header="This is an article card"
  category="Category"
  image={{url:'./test.png', altText='alt text'}}
/>

EventCard

Props -

• header (required) - text string for generating the primary text, generally an event name
• date (required) - text string for a date
• venue (required) - text string for a venue
• location (required) - text string for a location
• ctaOne (required) - object with a url and text string key/values
• ctaTw0 - object with a url and text string key/values

Example -

<EventCard
  header="This is an event card"
  date="May 25, 2019"
  venue="Venue"
  location="Location"
  ctaOne={ url: "/", text: "Register" }
  ctaTwo={ url: "/", text: "Event Website" }
/>

HeadshotDumplingContainer

Props -

• dumplings (required) - an array of objects used for generating <HeadshotDumplings>. Each object requires the image and header key/values with options for subHeader and text.
• filter - Used for setting the default filter type for all dumplings in the container.

Example -

const dumplings = [
  {
    image: {
      url: "./jeffshot.png",
      altText: "Jeff Goldblum"
    },
    header: "Jeffrey Lynn Goldblum",
    subHeader: "United States",
    text: "Actor, Musician, International Man of Mystery"
  },
  {
    image: {
      url: "./jeffshot.png",
      altText: "Jeff Goldblum"
    },
    header: "Jeffrey Lynn Goldblum",
    subHeader: "United States",
    text: "Actor, Musician, International Man of Mystery"
  }
]

<HeadshotDumplingContainer dumplings={dumplings} variant='grayscale' />

SubHeader

Props -

• text (required) - string for generating header text
• fontSize - string for determining font size, defaults to 'md', see Terra documentation for variable syntax
• fontWeight - string for determing font weight, defaults to 'normal', see Terra documentation for variable syntax
• color - string for determining color, defaults to 'gray-7', see Terra documentation for variable syntax
• 'align' - string for determining alignment, defaults to 'center', see Terra documentation for variable syntax

Example -

<SubHeader text='I am a Header' fontSize='xl' fontWeight='bold' color='brand-1' align='start' />

Text

Props -

• text (required) - string for generating header text
• fontSize - string for determining font size, defaults to 'base', see Terra documentation for variable syntax
• fontWeight - string for determing font weight, defaults to 'normal', see Terra documentation for variable syntax
• color - string for determining color, defaults to 'black', see Terra documentation for variable syntax
• 'align' - string for determining alignment, defaults to 'start', see Terra documentation for variable syntax

Example -

<Text text='I am text' fontSize='xl' fontWeight='bold' color='brand-1' align='start' />

Tooltip

Props -

• direction (required)- string indicating the direction that the Tooltip will render relative to its hover text
• toolTipLabel (required)- string used for generating the text that the user will hover over to display the Tooltip
• children (required)- components rendered inside the Tooltip, should be nested within the component itself

######direction options -

• Up - "up"
• Down - "down"
• Right - "right"
• Left - "left"

Example -

<Tooltip direction="up" tooltipLabel="I am a tooltip">
  <p>I am the inner content within a tooltip</p>
  <a href='www.link.com'>Link</a>
</Tooltip>

Molecules

Accordion

Props -

• AccordionFold (required) - child component that needs to be imported with Accordion that you use to render its inner content. Each AccordionFold takes a single prop of header set equal to a string.
• defaultActive - number indicating the index of the active accordion 'fold' on load.

Example -

<Accordion defaultActive=[0] >
  <AccordionFold header="Fold Two">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
  </AccordionFold>
  <AccordionFold header="Fold Two">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
  </AccordionFold>
</Accordion>

Alert

Props -

• onClick (required) - determines the method called when the 'close' button is clicked
• text (required) - determines the text displayed in the alert
• type - determines the type of alert

Example -

<Alert onClick={this.closeAlert} text="Warning Alert!" type="warning" />

ArticleCard

Props -

• link - (required) - url string for the article's link
• header - **(required) - string for generating header text
• category - **(required) - string for generating category text
• image - object with url and altText strings for generating an <img> element

Example -

<ArticleCard link='/#' header='Header Text' category='category text' image={{url: '/#', altText: 'description}}

Breadcrumbs

Props -

• breadcrumbs (required) - an array of objects for generating breadcrumb text and url strings.

Example -

<Breadcrumbs
  breadcrumbs=[{text: 'link one', url:'www.example.com'}, {text: 'link two', url:'www.link.com}]
/>

Card

Props -

• image (required) - object consisting of a url and altText key/value pairs (strings) used to create a link to the image location and the alt description text for the image
• fallbackImage - reference to a fallback image to be used if the original image source is broken
• header (required) - string used to determine the title for the card
• text - an array of strings used to generate body text
• button - an object consisting of an onClick function, a text string, and a name string used for populating a <Button> component.
• buttonLink - an object consisting of url and text strings for populating a <ButtonLink> component
• link - an object consisting of a url and text strings as key/values for an <a> element
• category - string used for labeling the card's category
• insertHTML - boolean that indicates whether the text prop should be inserted as innerHTML (true) or simply passed as a text string to a <p> tag.
• motion - boolean that indicates whether to use the react-reveal library to render the component inside a <Fade> component.
• motionDirection - string indicating the direction that the component should travel from as it fades in
• motionDelay - string in milliseconds indicating how long the delay should be before motion occurs
• motionDistance - string indicating the distance that the component travels during motion

Example -

<Card
  title="I am a card title"
  text={["I am sample card text", "So am I"]}
  image={url:"www.cat.com/cat.png", altText:"a cat"}}
  link={{url:"www.iamalink.com", text:"link to a link"}}
  button={{onClick: this.buttonClick, text: 'button', name: 'buttonOne'}}
  buttonLink={{url: '/home', text: 'Home'}}
  category="cats"
/>

Checkbox

Props -

• label (required) - string used for the check box's label
• name (required) - string used for the check box's name for parent state management
• checked (required) - boolean used to indicate whether or not the checkbox is checked, you should use whatever state property cooresponds to the component's name
• handleChange (required) - function called when the checkbox is changed, best used for changing the checked state, takes a single argument of the the event object.

Example -

<Checkbox
  label='check box'
  name='checkBoxOne'
  handleChange={this.toggleCheckBox}
  checked={this.state.checkBoxOne}
/>

CTALinkSection

Props -

• ctas (required) - a single object containing data for three different CTAs. ctaOne and ctaTwo are keys within the object that have their own key/values of text for generating the cta's text, className for determining the button type to generate (see <ButtonLink>), and url for generating a link, The third key is for the subCTA, which has text and url strings.

Example -

const ctas = {
  ctaOne: {
    text: 'Home',
    className='ter-button--primary--1',
    url: '/'
  },
  ctaTwo: {
    text: 'About',
    className='ter-button--secondary--1',
    url: '/about'
  },
  subCTA: {
    text; 'Contact',
    url: '/contact'
  }
}

<CTALinkSection ctas={ctas} />

CTARow

Props -

• ctaOne (required) - object consisting of url and text strings for generating a <ButtonLink>
• ctaTwo (required) - object consisting of url and text strings for generating a <ButtonLink>

Example -

const ctaOne = {
  url: '/test/two',
  text: 'Test 1'
}

const ctaTwo = {
  url: '/test/one',
  text: 'Test 2'
}

<CTARow ctaOne={ctaOne} ctaTwo={ctaTwo} />

CTASection

Props -

• ctas (required) - a single object containing data for three different CTAs. ctaOne and ctaTwo are keys within the object that have their own key/values of text for generating the cta's text, className for determining the button type to generate (see <Button>), and onClick for the associated called function, and name for parent component association with the clicked button (again, see <Button>), The third key is for the subCTA, which has text and url strings for generating a simple <a> tag.

Example -

const ctas = {
  ctaOne: {
    text: 'Home',
    className='ter-button--primary--1',
    onClick: this.homeButtonClick,
    name: 'homeBtn'
  },
  ctaTwo: {
    text: 'About',
    className='ter-button--secondary--1',
    onClick: this.aboutButtonClick,
    name: 'aboutBtn'
  },
  subCTA: {
    text; 'Contact',
    url: '/contact'
  }
}

<CTASection ctas={ctas} />

Dropdown

Props -

• options (required) - array of strings used for generating dropdown options
• handleSelection (required) - function used for changing the currently selection, takes two arguments of the new selection and the component's name prop
• selection (required) - string indicating the current dropdown
• defaultText (required) - string indicating the default text in the selected field
• name (required) - string used for parent processing of the component

Example -

<Dropdown
  options={['red', 'blue', 'yellow']}
  handleSelection={this.selectColor}
  selection={this.state.color}
  defaultText='Select a color'
  name='color'
/>

Dumpling

Props -

• title (required) - string that is used to generate the title text
• link (required) - object with a url key/value pair used to provide the href value for the <a> tag or to for a <NavLink>
• size (required) - string used to indicate the dumpling size ('small' or 'large')
• icon - object used for generating the Icon component within the dumpling with type and size key/value pairs
• image - object used for generating an <img> tag with url and altText key/value pairs
• motion - boolean that indicates whether to use the react-reveal library to render the component inside a <Fade> component.
• motionDirection - string indicating the direction that the component should travel from as it fades in.
• motionDelay - string in milliseconds indicating how long the delay should be before motion occurs
• motionDistance - string indicating the distance that the component travels during motion

Examples -

<Dumpling
  image={{ url: "./1-to-1.png", altText: "1-to-1 image" }}
  size="small"
  title="Dumplin'"
  link={{ url: "#" }}
/>

<Dumpling
  icon={{ type: "enclosed-check-dark-48px", size: "48px" }}
  size="small"
  title="Dumplin'"
  link={{ url: "#" }}
/>

EventCard

Props -

• header (required) - string used for generating header text
• date (required) - string used for generating date text
• venue (required) - string used for generating venue text
• location (required) - string used for generating location text
• ctaOne - object used for generating a cta requiring url and text strings
• ctaTwo - object used for generating a cta requiring url and text strings
• motion - boolean that indicates whether to use the react-reveal library to render the component inside a <Fade> component.
• motionDirection - string indicating the direction that the component should travel from as it fades in.
• motionDelay - string in milliseconds indicating how long the delay should be before motion occurs
• motionDistance - string indicating the distance that the component travels during motion

Example -

<EventCard
  header='header'
  date='01/01/01'
  venue='building name'
  location='city name'
  ctaOne={{url: '/#', text: 'button one'}}
  ctaTwo={{url: '/#', text: 'button two'}}
/>

Filter

Props -

• title (required) - string used to generate the title text for the filter bar when closed (i.e.: 'Filter by:', etc.)
• options (required) - array of strings used for generating checkbox labels and checkbox names, the latter of which is passed up with the event object via toggleCheckBox()
• selections (required) - array of strings used for indicating which of the checkboxes are selected. Cooresponds to the options array strings
• toggleCheckBox (required) - function used toggling the individual filter check boxes on and off. Takes a single argument of the event object.

Example -

const filter = ['cats', 'dogs', 'bats', 'frogs']

<Filter
  title='Filter by species'
  options={filter}
  toggleCheckBox={this.toggleAnimalFilter}
  selection={this.state.animalSelections}
>

FilterAndSort

Props -

• filterOne (required) - an object consisting of a title string, selections array strings, and options array of strings for populating a <Filter> component
• filterTwo - an object consisting of a title string, selections array strings, and options array of strings for populating a <Filter> component
• sort (required) - an object consisting of an options array of strings, a handleSelection method, a selection string, a defaultText string, and a name string for populating a <Select> component
• toggleFilter (required) - a function for adding and removing filters. Passes up either 'filterOneSelections' or 'filterTwoSelections' as well as the cooresponding checkbox label

Example -

const filterOne = {
  title: 'animals',
  selections: this.state.filterOneSelections,
  options: ['dog', 'cat', 'fox']
}

const filterTwo = {
  title: 'colors',
  selections: this.state.filterTwoSelections,
  options: ['red', 'yellow', 'blue']
}

const sort = {
  options: ['alphabetical', 'length'],
  handleSelection: this.selectSort,
  selection: this.state.sortSelection,
  defaultText: 'Sort by',
  name: 'sortSelection'
}

<FilterAndSort
  filterOne={filterOne}
  filterTwo={filterTwo}
  sort={sort}
  toggleFilter={this.toggleFilter}
/>

Icon

Props -

• type - string indicating the type of icon rendered
• size - string indicating icon size

######type options -

• open caret - "open-caret-[UP/DOWN/RIGHT/LEFT]-[8/16/32]px"

Example -

<Icon type="open-caret-right-dark-8px" size="8px" />

IconListItem

Props -

• header (required) - a string for generating the component's header text
• text (required) - a string for generating the component's body text
• insertHTML - boolean that indicates whether the text prop should be inserted as innerHTML (true) or simply passed as a text string to a <p> tag.
• motion - boolean that indicates whether to use the react-reveal library to render the component inside a <Fade> component.
• motionDirection - string indicating the direction that the component should travel from as it fades in.
• motionDelay - string in milliseconds indicating how long the delay should be before motion occurs
• motionDistance - string indicating the distance that the component travels during motion

Example -

<IconListItem header='I am a header' text='Minim id sint ad sunt.' />

LinkCard -

Props -

• header (required) - string for generating header text
• text (required) - string for generating body text
• link (required) - object consisting of url and text key/value pairs as strings for generating an <a> tag

Example -

const link =
  {
    url: '/purchase',
    text: 'Buy me now!'
  }

<LinkCard
  header='Link Card'
  text='Minim irure excepteur officia sit mollit veniam amet sint velit ad do laboris.'
  link={link}
/>

LinkTile

Props -

• content (required) - an object taking header, text, and link key/value pairs. header and text are strings. link is an object consisting of a url string.
• motion - boolean that indicates whether to use the react-reveal library to render the component inside a <Fade> component.
• motionDirection - string indicating the direction that the component should travel from as it fades in.
• motionDelay - string in milliseconds indicating how long the delay should be before motion occurs
• motionDistance - string indicating the distance that the component travels during motion

Example -

const content = {
  header: 'Link Tile',
  text: 'Do tempor occaecat culpa proident cillum velit eiusmod commodo elit occaecat elit.'
  link: {
    url: "http://www.yahoo.com",
  }
}

<LinkTile content={content} />

LogoDumpling

Props -

• image (required) - object containing url and altText key/value strings for generating an <img> element
• text (required) - string used for generating the dumpling's text
• motion - boolean that indicates whether to use the react-reveal library to render the component inside a <Fade> component.
• motionDirection - string indicating the direction that the component should travel from as it fades in.
• motionDelay - string in milliseconds indicating how long the delay should be before motion occurs
• motionDistance - string indicating the distance that the component travels during motion

Example -

const image = {
  url: './image.png',
  altText: 'image description'
}

<LogoDumpling image={image} text='Company Name' />

LogoDumplingContainer

Props -

• dumplings (required) - array of objects consisting of the image and text attributes for a <LogoDumpling> component

• motion - boolean that indicates whether to use the react-reveal library to render the component inside a <Fade> component.

• motionDirection - string indicating the direction that the component should travel from as it fades in.

• motionDelay - boolean indicating whether to stagger the effect of successive card fades

• motionDistance - string indicating the distance that the component travels during motion

Example -

const dumplings = [
  {
    image: {
      url: './image.png',
      altText: 'description'
    },
    text: 'Company Name
  },
  {
    image: {
      url: './image.png',
      altText: 'description'
    },
    text: 'Company Name
  },
  {
    image: {
      url: './image.png',
      altText: 'description'
    },
    text: 'Company Name
  }
]

<LogoDumplingContainer dumplings={dumplings} />

Modal

Props -

• className - string interpolated into the className of the component for styling options: use with caution.

• header - string used for the modal's header

• name - string used for the check box's name for parent state management

• text - string used for the modal's text

• closeModal (required) - function used to no longer render the modal, takes an argument of the name passed down in props

• buttonOne - object consisting or url, text, and className strings for populating a <ButtonLink> component

• buttonTwo - object consisting or url, text, and className strings for populating a <ButtonLink> component

Example -

<Modal
  className=''
  header='Modal Title'
  text='Hello. I am a modal'
  closeModal={this.closeModal}
  buttonOne={{onClick={this.buttonOneClick}, text='button one', className='ter-button-primary--1'}}
  buttonTwo={{onClick={this.buttonTwoClick}, text='button two', className='ter-button-secondary--1'}
/>

MultipleSearchSelect

Props -

• defaultText (required) - string used to populate the search field before any selections are made
• options (required) - an array of strings used to generate options for selection
• selection (required) - an array of string used to provide the currently selected options
• handleSelect (required) - function used to add an option to the selection array, takes two arguments of the selection and the component's name
• removeSelection (required) - function used to remove an option from the selection array, takes two arguments of the selection and the component's name
• name (required) - string used for labeling the array for parent component processing

Example -

<MultipleSearchSelect
  defaultText='I am a multiple search select component'
  options=['dog', 'cat', 'bird', 'turtle']
  selection={this.state.multipleSearchSelectOne}
  handleSelect={this.addMultiSearchSelectOption}
  removeSelection={this.removeMultiSearchSelectOption}
  name='multipleSearchSelectOne'
/>

Notification

Props -

• text (required) - string used for notification content
• type (required) - string used for indicating notification type
• onClick (required) - function used for calling a method to close the notification and no longer render it, takes no arguments

Example -

<Notification
  text='Hello. I am a notification'
  type='default'
  onClick={this.closeNotification}
/>

Pagination

Props -

• pages (required) - number indicating the total number of pages accessible via the component
• activePage (required) - number indicating the index of the current page in the Pagination array - i.e. passing in 0 would display the first page
• handleClick (required) - function used to set the new index of the currently displayed item in the Pagination array, takes arguments of the new index and the component's name
• name - string used for the check box's name for parent state management

Example -

<Pagination pages={4} activePage={0} handleClick={this.setPage} />

PricingCard

Props -

• product (required) - string used for generating the product name
• version (required) - string used for generating the product version/subtitle
• description (required) - string used for generating product description
• cost (required) - string used for generating product cost
• currency (required) - string used for indicating currency type
• buttonLink (required) - object consisting of url and text strings to direct the user to the purchase page.
• motion - boolean that indicates whether to use the react-reveal library to render the component inside a <Fade> component.
• motionDirection - string indicating the direction that the component should travel from as it fades in.
• motionDelay - string in milliseconds indicating how long the delay should be before motion occurs
• motionDistance - string indicating the distance that the component travels during motion

Example -

const link = {
  url: '/purchase',
  text; 'Purchase'
}

<PricingCard
  product='SketchUp'
  version='Pro'
  description='Velit excepteur dolore sunt ea nostrud eu duis tempor aliquip consequat elit duis.'
  cost='$119/yr'
  currecny='USD'
  buttonLink={link}
>

Radios

Props -

• radios (required)- an array of strings used to label each individual radio button
• selected (required)- string used to indicate the currently selected radio button, generally same as name
• selectRadio (required)- function used to change the currently selected radio button in the parent component, takes two arguments of the new selected radio button and the component's name
• name (required)- string used to name the radio component for processing in the parent component, should be unique

Example -

<Radios
  radios={['radio one', 'radio two', 'radio three]}
  selectRadio={this.selectRadio}
  selected={this.state.selectedRadio}
  name="selectedRadio"
/>

SearchBar

Props -

• searchItems - an array of strings used for generating predictive text
• handleSubmit (required) - function passed down for passing up the search string, takes two arguments of the field's search string and the name prop
• placeholder - string used for generating a custom string of placeholder text, defaults to Search
• predictiveSearch - boolean used to tell the component whether or not to produce a list of predictive search items
• name - string used to name the radio component for processing in the parent component, should be unique

Example -

<SearchBar searchItems={}
  searchItems={['dogs', 'cats', 'frogs', 'birds']}
  handleSubmit={this.setSearchString}
  placeholder='I am custom placeholder text'
  predictiveSearch={true}
/>

SearchSelect

Props -

• defaultText (required) - string used for generating the default text in the selected field
• options (required) - array of strings to select from
• selection (required) - string indicating the currently-selected string
• handleSelect (required) - function used for changing the currently selected string, takes two arguments of the newly selected item as a string and the name prop
• name - string used to name the radio component for processing in the parent component, should be unique

Example -

<SearchSelect
  defaultText='Select an animal'
  options={'dog', 'cat', 'turtle'}
  selection={this.state.selectedAnimal}
  handleSelect={this.selectAnimal}
/>

Select

Props -

• options (required) - array of strings used for generating select options
• handleSelection (required) - function used for changing the currently selection, takes two arguments of the new selection and the component's name prop
• selection (required) - string indicating the current select
• defaultText (required) - string indicating the default text in the selected field
• name (required) - string used for parent processing of the component

Example -

<Select
  options={['red', 'blue', 'yellow']}
  handleSelection={this.selectColor}
  selection={this.state.color}
  defaultText='Select a color'
  name='color'
/>

Table

Props -

• data (required) - object containing the information to be rendered in the table with head and body keys. Each key is assigned to an array for each row.
• loose - boolean that when set to true will add the ter-table--loose class to the component

Example -

const tableDataSource = {
  head: ['column one', 'column two', 'column three],
  body: [
    ['R1/C1', 'R1/C2', 'R1/C3],
    ['R2/C1', 'R2/C2', 'R2/C3],
    ['R3/C1', 'R3/C2', 'R3/C3]
  ]
}

<Table
  data={tableDataSource}
  loose={true}
/>

Tabs

Props -

• TabsPanel (required) - child element of Tabs that generates the content within an individual tab. Takes a single prop of name as a string.
• theme - string indicating the theme used for the tab organism. Current options are 'default' and 'brand-regular'

Example -

<Tabs selected={0} fullWidth={false}>
  <TabsPanel name="First">
    <h3>First Tab</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
      lobortis augue ligula, eget gravida tellus lacinia id. Sed ultricies
      mi malesuada tincidunt dapibus. Donec porta ligula sagittis elit
      sollicitudin.
    </p>
  </TabsPanel>
  <TabsPanel name="Second">
    <h3>Second Tab</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
      lobortis augue ligula, eget gravida tellus lacinia id. Sed ultricies
      mi malesuada tincidunt dapibus. Donec porta ligula sagittis elit
      sollicitudin.
    </p>
  </TabsPanel>
  <TabsPanel name="Third">
    <h3>Third Tab</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
      lobortis augue ligula, eget gravida tellus lacinia id. Sed ultricies
      mi malesuada tincidunt dapibus. Donec porta ligula sagittis elit
      sollicitudin.
    </p>
  </TabsPanel>
</Tabs>

TextArea

Props -

• label - string used for the label element of the input
• inputChange (required) - function that determines what happens when the input value has changed, takes two arguments of the event object and the component's name prop
• value (required) - string for the value of the input
• name - string used for parent processing of the component

Example -

<TextArea
  label="Form Item Label"
  placeholder="test placeholder text"
  value={this.state.textArea}
/>

TextInput

Props -

• label - string used for the label element of the input
• placeholder - optional string used to determine the placeholder text for an input
• inputChange (required) - function that determines what happens when the input value has changed, takes a single argument of the event object
• value (required) - string for the value of the input
• status - object that is passed into the component to provied an error or success state, accompanied by a message. Both the className and message are required in the object. Example below:

  { className: "error", message: "error!" }

• name (required) - string used as the field name, returned in the event object

Example -

<TextInput
  label="Form Item Label"
  placeholder="test placeholder text"
  name="test"
  status=""
  value={this.state.test}
/>