2.9.7






Kits


Avatar

Default


Close
import React from "react"
import { Avatar } from "../../"

function AvatarDefault() {
  return (
    <div>
      <Avatar
          name="Terry Johnson"
          size="xs"
          status="online"
          url="https://randomuser.me/api/portraits/men/44.jpg"
      />
      <br/>
      <Avatar
          name="Terry Johnson"
          size="sm"
          status="online"
          url="https://randomuser.me/api/portraits/men/44.jpg"
      />
      <br/>
      <Avatar
          name="Terry Johnson"
          size="md"
          status="away"
          url="https://randomuser.me/api/portraits/men/44.jpg"
      />
      <br/>
      <Avatar
          name="Terry Johnson"
          size="lg"
          status="offline"
          url="https://randomuser.me/api/portraits/men/44.jpg"
      />
      <br/>
      <Avatar
          name="Terry Johnson"
          size="xl"
          status="offline"
          url="https://randomuser.me/api/portraits/men/44.jpg"
      />
    </div>
  )
}

export default AvatarDefault;
Monogram


Close
import React from "react"
import { Avatar } from "../../"

function AvatarDefault() {
  return (
    <div>
      <Avatar name="Terry Johnson" size="xs" />
      <Avatar name="Terry Johnson" size="sm" />
      <Avatar name="Terry Johnson" size="md" />
      <Avatar name="Terry Johnson" size="lg" />
      <Avatar name="Terry Johnson" size="xl" />
    </div>
  )
}

export default AvatarDefault;

Badge

Rectangle


Close
import React from "react"
import Badge from "../_badge.jsx"

function BadgeDefault() {
  return (
    <div>
      <Badge text="+1" variant="primary" />

      &nbsp;

      <Badge text="+4" variant="primary" />

      &nbsp;

      <Badge text="+1000" variant="primary" />
    </div>
  )
}

export default BadgeDefault;
Rounded


Close
import React from "react"
import Badge from "../_badge.jsx"

function BadgeRounded() {
  return (
    <div>
      <Badge text="+1" variant="primary" rounded />

      &nbsp;

      <Badge text="+4" variant="primary" rounded />

      &nbsp;

      <Badge text="+1000" variant="primary" rounded />
    </div>
  )
}

export default BadgeRounded;
Colors


Close
import React from "react"
import Badge from "../_badge.jsx"

function BadgeColors() {
  return (
    <div>
      <div>
        <Badge text="+1" variant="primary" rounded />

        &nbsp;

        <Badge text="+4" variant="primary" />

        &nbsp;

        <Badge text="+1000" variant="primary" />
      </div>

      <div>
        <Badge text="+1" variant="success" rounded />

        &nbsp;

        <Badge text="+4" variant="success" />

        &nbsp;

        <Badge text="+1000" variant="success" />
      </div>

      <div>
        <Badge text="+1" variant="warning" rounded />

        &nbsp;

        <Badge text="+4" variant="warning" />

        &nbsp;

        <Badge text="+1000" variant="warning" />
      </div>

      <div>
        <Badge text="+1" variant="error" rounded />

        &nbsp;

        <Badge text="+4" variant="error" />

        &nbsp;

        <Badge text="+1000" variant="error" />
      </div>

      <div>
        <Badge text="+1" variant="info" rounded />

        &nbsp;

        <Badge text="+4" variant="info" />

        &nbsp;

        <Badge text="+1000" variant="info" />
      </div>

      <div>
        <Badge text="+1" variant="neutral" rounded />

        &nbsp;

        <Badge text="+4" variant="neutral" />

        &nbsp;

        <Badge text="+1000" variant="neutral" />
      </div>
    </div>
  )
}

export default BadgeColors;

Bar Graph

Default


Close
import React from "react"
import { BarGraph } from "../../"

const chartData = [{
  name: 'Installation',
  data: [154175]
}, {
  name: 'Manufacturing',
  data: [40434]
}, {
  name: 'Sales & Distribution',
  data: [39387]
}, {
  name: 'Project Development',
  data: [34227]
}, {
  name: 'Other',
  data: [18111]
}]

const BarGraphDefault = () => (
  <div>
    <BarGraph
        axisTitle="Number of Employees"
        chartData={chartData}
        id="bar-test"
        pointStart={2012}
        subTitle="Source: thesolarfoundation.com"
        title="Solar Employment Growth by Sector, 2010-2016"
    />
  </div>
)

export default BarGraphDefault

Body

Light UI


Close
import React from "react"
import {Body} from "../../"

function BodyLight() {
  return (
    <div>
      <Body text="I am a body kit (Default)" />
      <Body color="light" text="I am a body kit (Light)" />
      <Body color="lighter" text="I am a body kit (Lighter)" />
      <br/>
      <br/>
      <Body status="negative" text="I am a body kit (Status: negative)" />
      <Body status="positive" text="I am a body kit (Status: positive)" />
    </div>
  )
}

export default BodyLight;
Dark UI


Close
import React from "react"
import {Body} from "../../"

function BodyDark() {
  return (
    <div>
      <Body dark text="I am a body kit (Default)" />
      <Body dark color="light" text="I am a body kit (Light)" />
      <Body dark color="lighter" text="I am a body kit (Lighter)" />
      <br/>
      <br/>
      <Body dark status="negative" text="I am a body kit (Status: negative)" />
      <Body dark status="positive" text="I am a body kit (Status: positive)" />
    </div>
  )
}

export default BodyDark;
Block


Close
import React from "react"
import {Body} from "../../"

function BodyBlock() {
  return (
    <div>
      <Body>
        I am a body kit
      </Body>
    </div>
  )
}

export default BodyBlock;

Button

Button Variants


Close
import React from 'react'
import {Button} from '../../'

const ButtonDefault = () => (
    <div>
        <Button
                onClick={() => console.log("button clicked!")}
                text="Button Primary"
        />
        <Button
                onClick={() => console.log("button clicked!")}
                text="Button Secondary"
                variant="secondary"
        />
        <Button
                onClick={() => console.log("button clicked!")}
                text="Button Link"
                variant="link"
        />
        <Button
                disabled
                onClick={() => console.log("button clicked!")}
                text="Button Disabled"
        />
    </div>
)

export default ButtonDefault
Button Variants Dark


Close
import React from 'react'
import {Button} from '../../'

const ButtonDefaultDark = () => (
    <div>
        <Button text="Button Primary" 
                dark
        />
        <Button
                text="Button Secondary"
                variant="secondary"
                dark
        />
        <Button
                text="Button Link"
                variant="link"
                dark
        />
        <Button
                text="Button Disabled"
                disabled
                dark
        />
    </div>
)

export default ButtonDefaultDark
Button Full Width


Close
import React from 'react'
import {Button} from '../../'

const ButtonFullWidth = () => (
    <div>
        <Button
                text="Button Full Width"
                fullWidth
        />
    </div>
)

export default ButtonFullWidth
Button Links


Close
import React from 'react'
import {Button} from '../../'

const ButtonLink = () => (
    <div>
        <Button
            link="https://google.com"
            text="A Tag Button"
        />
        <Button
            link="https://google.com"
            newWindow
            text="Open in New Window"
        />
        <Button
            disabled
            link="https://google.com"
            text="A Tag Button Disabled"
        />
    </div>
)

export default ButtonLink
Button Loading


Close
import React from 'react'
import {Button} from '../../'

const ButtonLoading = () => (
    <div>
        <Button
            loading
            text="Button Primary"
        />
        <Button
            loading
            text="Button Secondary"
            variant="secondary"
        />
        <Button
            loading
            text="A Tag Button Disabled"
            variant="link"
        />
    </div>
)

export default ButtonLoading
Button Block Content


Close
import React from 'react'
import {Button} from '../../'

const ButtonBlockContent = () => (
    <div>
        <Button
            fixedWidth
            icon="users"
            text="Button with Block Content"
        />
    </div>
)

export default ButtonBlockContent
Button Accessibility Options


Close
import React from 'react'
import {Button} from '../../'

const ButtonAccessibility = () => (
    <div>
        <Button
            aria={{label: "button"}}
            link="https://google.com"
            tag="a"
            text="Button with ARIA"
        />
    </div>
)

export default ButtonAccessibility
Button Additional Options


Close
import React from 'react'
import Button from '../_button.jsx'

const ButtonOptions = () => (
    <div>
        <Button
            htmlType="submit"
            text="Button with options"
            value="1234"
        />
    </div>
)

export default ButtonOptions

Caption

Light UI


Close
import React from "react"
import {Caption} from '../../'

function CaptionLight() {
  return (
    <div>
      <Caption text="Caption" />
      <Caption size="lg" text="Caption Large" />
      <Caption size="xs" text="Subcaption" />
    </div>
  )
}

export default CaptionLight;
Dark UI


Close
import React from "react"
import {Caption} from '../../'

function CaptionDark() {
  return (
    <div>
      <Caption dark text="Caption" />
      <Caption dark size="lg" text="Caption Large" />
      <Caption dark size="xs" text="Subcaption" />
    </div>
  )
}

export default CaptionDark;

Card

Default


Close
import React from "react"
import Card from "../_card.jsx"

function CardLight() {
  return (
    <div>
      <Card>{`Card content`}</Card>
    </div>
  )
}

export default CardLight;
Selected


Close
import React from "react"
import Card from "../_card.jsx"

function CardSelected() {
  return (
    <div>
      <Card>{`Card content`}</Card>
      <br/>
      <Card selected>{`Card content`}</Card>
    </div>
  )
}

export default CardSelected
Padding Size


Close
import React from 'react'
import {Card} from '../../'

function CardPadding() {
  return (
    <div>
      <Card padding='none'>{`Card content`}</Card>
      <br/>
      <Card padding='xs'>{`Card content`}</Card>
      <br/>
      <Card padding='sm'>{`Card content`}</Card>
      <br/>
      <Card padding='md'>{`Card content`}</Card>
      <br/>
      <Card padding='lg'>{`Card content`}</Card>
      <br/>
      <Card padding='xl'>{`Card content`}</Card>
      <br/>
    </div>
  )
}

export default CardPadding
Shadow Size


Close
import React from 'react'
import {Card} from '../../'

function CardShadow() {
  return (
    <div>
      <Card shadow='none'>{`Card content`}</Card>
      <br/>
      <Card shadow='shallow'>{`Card content`}</Card>
      <br/>
      <Card shadow='default'>{`Card content`}</Card>
      <br/>
      <Card shadow='deep'>{`Card content`}</Card>
      <br/>
      <Card shadow='deeper'>{`Card content`}</Card>
      <br/>
      <Card shadow='deepest'>{`Card content`}</Card>
      <br/>
    </div>
  )
}

export default CardShadow
Content Size


Close
import React from 'react'
import {Card} from '../../'

function CardContent() {
  return (
    <div>
      <Card>{`Card content`}</Card>
      <br/>
      <Card>{`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.

Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.`}</Card>
      <br/>
    </div>
  )
}

export default CardContent

Checkbox

Default


Close
import React from 'react'
import {Checkbox} from '../../'

function CheckboxDefault() {
  return (
    <div>
      <Checkbox
          name='default name'
          text='Checkbox label'
          value='default value'
      />
    </div>
  )
}

export default CheckboxDefault;
Dark


Close
import React from 'react'
import {Checkbox} from '../../'

function CheckboxDark() {
  return (
    <div>
      <Checkbox
          dark
          name='default name'
          text='Checkbox label'
          value='default value'
      />
    </div>
  )
}

export default CheckboxDark;

Contact

Default


Close
import React from "react"
import {Contact} from "../../"

function ContactDefault() {
  return (
    <div>
      <Contact
        contactType="cell"
        contactValue="349-185-9988"
      />
      <Contact
        contactValue="5555555555"
      />
      <Contact
        contactType="email"
        contactValue="email@example.com"
      />
      <Contact
        contactType="work"
        contactValue="3245627482"
      />
    </div>
  )
}

export default ContactDefault
Detail Indicator


Close
import React from "react"
import {Contact} from "../../"

function ContactDefault() {
  return (
    <div>
      <Contact
        contactType="cell"
        contactValue="349-185-9988"
        contactDetail="Cell"
      />
      <Contact
        contactValue="5555555555"
        contactDetail="Home"
      />
      <Contact
        contactType="work"
        contactValue="3245627482"
        contactDetail="Work"
      />
    </div>
  )
}

export default ContactDefault

Currency

Small


Close
import React from "react"
import {Currency} from "../../"

function CurrencyDefault() {
  return (
    <div>
      <Currency
          label='Caption'
          value='2,000'
      />
      <Currency
          align='center'
          label='Caption'
          value='2,000'
      />
      <Currency
          align='right'
          label='Caption'
          value='2,000'
      />
    </div>
  )
}

export default CurrencyDefault;
Large


Close
import React from "react"
import {Currency} from "../../"

function CurrencyDefault() {
  return (
    <div>
      <Currency
          label='Caption'
          size='lg'
          value='2,000'
      />
      <Currency
          align='center'
          label='Caption'
          size='lg'
          value='2,000'
      />
      <Currency
          align='right'
          label='Caption'
          size='lg'
          value='2,000'
      />
    </div>
  )
}

export default CurrencyDefault;

Dashboard Value

Full Example


Close
import React from "react"
import {DashboardValue} from "../../"

function DashboardValueDefault() {
  return (
    <div>
      <DashboardValue
          stat_label="Decreased Value"
          stat_value={{value: "1,428", unit: "appts"}}
          stat_change={{change: "decrease", value: "26.1"}} />

      <br/><br/>

      <DashboardValue
          stat_label="Increased Value"
          stat_value={{value: "938", unit: "homes"}}
          stat_change={{change: "increase", value: 56.1}} />

      <br/><br/>

      <DashboardValue
          stat_label="Neutral Value"
          stat_value={{value: "261", unit: "windows"}}
          stat_change={{value: 86}} />
    </div>
  )
}

export default DashboardValueDefault;
Align


Close
import React from "react"
import {DashboardValue} from "../../"

function DashboardValueAlign() {
  return (
    <div>
      <DashboardValue
          stat_label="Top Title Value"
          stat_value={{value: "1,428", unit: "appts"}}
          stat_change={{change: "decrease", value: "26.1"}} />

      <br/><br/>

      <DashboardValue
          align="center"
          stat_label="Top Title Value"
          stat_value={{value: "1,428", unit: "appts"}}
          stat_change={{change: "decrease", value: 56.1}} />

      <br/><br/>

      <DashboardValue
          align="right"
          stat_label="Top Title Value"
          stat_value={{value: "1,428", unit: "appts"}}
          stat_change={{change: "decrease", value: 86}} />
    </div>
  )
}

export default DashboardValueAlign;

Date

Default


Close
import React from "react"
import Date from "../../"

function DateDefault() {
  return (
    <div>
      <h1>{`Coming Soon...`}</h1>
    </div>
  )
}

export default DateDefault;

Date Range Inline

Default


Close
import React from "react"
import DateRangeInline from "../_date_range_inline.jsx"

function DateRangeInlineDefault() {
  return (
    <div>
      <DateRangeInline startDate={new Date('18 Jun 2019')} endDate={new Date('20 Mar 2020')} />
    </div>
  )
}

export default DateRangeInlineDefault;

Date Year Stacked

Default


Close
import React from "react"
import { DateYearStacked } from "../../"

function DateYearStackedDefault() {
  return (
    <div>
      <DateYearStacked date={new Date() } />
      <DateYearStacked align='center' date={new Date() } />
      <DateYearStacked align='right' date={new Date() } />
    </div>
  )
}

export default DateYearStackedDefault;
Dark


Close
import React from "react"
import { DateYearStacked } from "../../"

function DateYearStackedDark() {
  return (
    <div>
      <DateYearStacked date={new Date() } dark />
      <DateYearStacked align='center' date={new Date() } dark />
      <DateYearStacked align='right' date={new Date() } dark />
    </div>
  )
}

export default DateYearStackedDark

Distribution Bar

Default


Close
import React from "react"
import DistributionBar from "../_distribution_bar.jsx"

function DistributionBarDefault() {
  return (
    <React.Fragment>
      <div>
        <DistributionBar
          widths={[1,2,3,4,5,3,3,7]}
        />
      </div>
      <br/>
      <br/>
      <div>
        <DistributionBar
          size='sm'
          widths={[1,2,3,4,5,3,3,7]}
        />
      </div>
    </React.Fragment>
  )
}

export default DistributionBarDefault;

Fixed Confirmation Toast

Default


Close
import React from "react"
import {FixedConfirmationToast} from "../../"

function FixedConfirmationToastDefault() {
  return (
    <div>
      <div>
        <FixedConfirmationToast text="Error Message" status="error" />
      </div>

      <br/><br/>

      <div>
        <FixedConfirmationToast text="Items Successfully Moved" status="success" />
      </div>

      <br/><br/>

      <div>
        <FixedConfirmationToast text="Scan to Assign Selected Items" status="neutral" />
      </div>
    </div>
  )
}

export default FixedConfirmationToastDefault;

Hashtag

Hashtag Types


Close
import React from "react"
import {Hashtag} from "../../"

function HashtagDefault() {
  return (
    <div>
      <Hashtag
          text="470297"
          type="project"
          url="https://google.com"
      />
      <br/><br/>
      <Hashtag
          text="123456"
          type="home"
          url="https://google.com"
      />
      <br/><br/>
      <Hashtag
          text="654321"
          type="default"
          url="https://google.com"
      />
    </div>
  )
}

export default HashtagDefault;

Home Address Street

Default


Close
import React from "react"
import {HomeAddressStreet} from "../../"

function HomeAddressStreetDefault() {
  return (
    <HomeAddressStreet
        address="70 Prospect Ave"
        addressCont="Apt M18"
        city="West Chester"
        homeId={8250263}
        houseStyle="Colonial"
        state="PA"
        zipcode="19382"
        territory="PHL"
    />
  )
}

export default HomeAddressStreetDefault;
Modified


Close
import React from "react"
import {HomeAddressStreet} from "../../"

function HomeAddressStreetModified() {
  return (
    <HomeAddressStreet
        address="70 Prospect Ave"
        city="West Chester"
        addressCont="M18"
        homeId={8250263}
        state="PA"
        zipcode="19382"
        territory="PHL"
    />
  )
}

export default HomeAddressStreetModified;
Dark


Close
import React from "react"
import {HomeAddressStreet} from "../../"

function HomeAddressStreetDark() {
  return (
    <HomeAddressStreet
        address="70 Prospect Ave"
        addressCont="Apt M18"
        city="West Chester"
        dark
        homeId={8250263}
        state="PA"
        zipcode="19382"
        territory="PHL"
    />
  )
}

export default HomeAddressStreetDark;

Icon

Icon Default


Close
import React from "react"
import {Icon} from "../../"

function IconDefault() {
  return (
    <div>
      <Icon icon="user" fixedWidth />
    </div>
  )
}

export default IconDefault;
Icon Rotate


Close
import React from "react"
import {Icon} from "../../"

function IconRotate() {
  return (
    <div>
      <Icon icon="user" rotation={90} size="2x" fixedWidth />
      <Icon icon="user" rotation={180} size="2x" fixedWidth />
      <Icon icon="user" rotation={270} size="2x" fixedWidth />
    </div>
  )
}

export default IconRotate;
Icon Flip


Close
import React from "react"
import {Icon} from "../../"

function IconFlip() {
  return (
    <div>
      <Icon icon="question-circle" flip="horizontal" size="2x" fixedWidth />
      <Icon icon="question-circle" flip="vertical" size="2x" fixedWidth />
      <Icon icon="question-circle" flip="both" size="2x" fixedWidth />
    </div>
  )
}

export default IconFlip;
Icon Animation


Close
import React from "react"
import {Icon} from "../../"

function IconAnimate() {
  return (
    <div>
      <p><Icon icon="spinner" size="2x" spin fixedWidth /> <span>Spin</span></p>
      <br/>
      <p><Icon icon="spinner" size="2x" pulse fixedWidth /> <span>Pulse</span></p>
    </div>
  )
}

export default IconAnimate;
Icon Pull


Close
import React from "react"
import {Icon} from "../../"

function IconPull() {
  return (
    <div>
      <Icon icon="arrow-left" pull="left" size="2x" fixedWidth />
      <Icon icon="arrow-right" pull="right" size="2x" fixedWidth />
    </div>
  )
}

export default IconPull;
Icon Border


Close
import React from "react"
import {Icon} from "../../"

function IconBorder() {
  return (
    <div>
      <Icon icon="user" size="2x" border fixedWidth />
    </div>
  )
}

export default IconBorder;
Icon Sizes


Close
import React from "react"
import {Icon} from "../../"

function IconSizes() {
  return (
    <div>
      <p><Icon icon="user" size="lg" /> <span>Large</span></p>
      <p><Icon icon="user" size="sm" /> <span>Small</span></p>
      <p><Icon icon="user" size="xs" /> <span>XSmall</span></p>

      <br/><br/>

      <p><Icon icon="user" size="1x" /> <span>1x</span></p>
      <p><Icon icon="user" size="2x" /> <span>2x</span></p>
      <p><Icon icon="user" size="3x" /> <span>3x</span></p>
      <p><Icon icon="user" size="4x" /> <span>4x</span></p>
      <p><Icon icon="user" size="5x" /> <span>5x</span></p>
      <p><Icon icon="user" size="6x" /> <span>6x</span></p>
      <p><Icon icon="user" size="7x" /> <span>7x</span></p>
      <p><Icon icon="user" size="8x" /> <span>8x</span></p>
      <p><Icon icon="user" size="9x" /> <span>9x</span></p>
      <p><Icon icon="user" size="10x" /> <span>10x</span></p>
    </div>
  )
}

export default IconSizes;
Icon Default Dark


Close
import React from "react"
import {Icon} from "../../"

function IconDefaultDark() {
  return (
    <div>
      <Icon icon="user" fixedWidth />
    </div>
  )
}

export default IconDefaultDark;

Icon Circle

Default


Close
import React from "react"
import {IconCircle} from "../../"

function IconCircleDefault() {
  return (
    <div>
      <IconCircle />
    </div>
  )
}

export default IconCircleDefault

Icon Value

Default


Close
import React from "react"
import {IconValue} from "../../"

function IconValueDefault() {
  return (
    <h1>{`Coming Soon...`}</h1>
  )
}

export default IconValueDefault

Image

Default


Close
import React from "react"
import {Image} from "../../"

function DefaultImage() {
  return (
    <div>
      <Image url="https://unsplash.it/500/400/?image=634" />
    </div>
  )
}

export default DefaultImage

Label Pill

Default


Close
import React from "react"
import {LabelPill} from "../../"

function LabelPillDefault() {
  return (
    <h1>{`Coming Soon...`}</h1>
  )
}

export default LabelPillDefault

Label Value

Default


Close
import React from "react"
import {LabelValue} from "../../"

function LabelValueDefault() {
  return (
    <h1>{`Coming Soon...`}</h1>
  )
}

export default LabelValueDefault

Layout

Extra Small


Close
import React from "react"
import Layout from "../_layout.jsx"
import Sidebar from "../_sidebar.jsx"
import Body from "../_body.jsx"

function LayoutXs() {
  return (
    <Layout position="left" size="xs" collapse="sm">
      <Sidebar>{`Side`}</Sidebar>
      <Body>{`Body`}</Body>
    </Layout>
  )
}

export default LayoutXs;

Line Graph

Default


Close
import React from "react"
import {LineGraph} from "../../"

const data = [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]

const LineGraphDefault = () => (
  <div>
    <LineGraph
        axisTitle="Number of Employees"
        chartData={data}
        id="line-test"
        pointStart={1}
        subTitle="Source: thesolarfoundation.com"
        title="Solar Employment Growth by Sector, 2010-2016"
    />
  </div>
)

export default LineGraphDefault

List

Default


Close
import React from "react"
import {
  ListItem,
  List,
} from "../../"


function ListDefault() {
  return (
    <h1>{`Coming Soon...`}</h1>
  )
}

export default ListDefault;

Loading Inline

Default


Close
import React from "react"
import {LoadingInline} from "../../"

function LoadingInlineLight() {
  return (
    <div>
      <LoadingInline />
      <LoadingInline align="center" />
      <LoadingInline align="right" />
    </div>
  )
}

export default LoadingInlineLight;
Default


Close
import React from "react"
import {LoadingInline} from "../../"

function LoadingInlineDark() {
  return (
    <div>
      <LoadingInline dark />
      <LoadingInline dark align="center" />
      <LoadingInline dark align="right" />
    </div>
  )
}

export default LoadingInlineDark;

Message

Default


Close
import React from "react"
import Message from "../../"

function MessageDefault() {
  return (
    <h1>{`Coming Soon...`}</h1>
  )
}

export default MessageDefault

Online Status

Default


Close
import React from "react"
import {OnlineStatus} from "../../"

function OnlineStatusDefault() {
  return (
    <h1>{`Coming Soon...`}</h1>
  )
}

export default OnlineStatusDefault

Person

Default


Close
import React from "react"
import {Person} from "../../"

function PersonDefault() {
  return (
    <Person
      firstName="Kyle"
      lastName="Fadigan"
    />
  )
}

export default PersonDefault;

Person Contact

Default


Close
import React from "react"
import {PersonContact} from "../../"

function PersonContactDefault() {
  return (
    <div>
      <PersonContact
        firstName="Pauline"
        lastName="Smith"
        contacts={[
          {
            contactType: "email",
            contactValue: "email@example.com",
          },
          {
            contactValue: "5555555555",
          },
          {
            contactType: "work",
            contactValue: "3245627482",
          }
        ]}
      />
    </div>
  )
}

export default PersonContactDefault;
Multiple People


Close
import React from "react"
import {PersonContact} from "../../"

function PersonContactMultiple() {
  return (
    <div>
      <PersonContact
        firstName="Harvey"
        lastName="Walters"
        contacts={[
          {
            contactType: "email",
            contactValue: "email@example.com",
          },
          {
            contactValue: "5555555555",
          },
          {
            contactType: "work",
            contactValue: "3245627482",
          }
        ]}
      />
      <PersonContact
        firstName="Brenda"
        lastName="Walters"
        contacts={[
          {
            contactValue: "5555555555",
          }
        ]}
      />
    </div>
  )
}

export default PersonContactMultiple;
With Detail


Close
import React from "react"
import {PersonContact} from "../../"

function PersonContactWithDetail() {
  return (
    <div>
      <PersonContact
        firstName="Harvey"
        lastName="Walters"
        contacts={[
          {
            contactType: "email",
            contactValue: "email@example.com",
          },
          {
            contactValue: "5555555555",
            contactDetail: "Home",
          },
          {
            contactType: "work",
            contactValue: "3245627482",
            contactDetail: "Work",
          }
        ]}
      />
    </div>
  )
}

export default PersonContactWithDetail;

Pill

Default


Close
import React from "react"
import Pill from "../_pill.jsx"

function PillDefault() {
  return (
    <div>
      <Pill text="default" />

      <br/><br/>

      <Pill text="success" variant="success" />

      <br/><br/>

      <Pill text="error" variant="error" />

      <br/><br/>

      <Pill text="warning" variant="warning" />

      <br/><br/>

      <Pill text="info" variant="info" />

      <br/><br/>

      <Pill text="neutral" variant="neutral" />
    </div>
  )
}

export default PillDefault;

Progress Simple

Default


Close
import React from "react"
import {ProgressSimple} from "../../"

function ProgressSimpleDefault() {
  return (
    <h1>{`Coming Soon...`}</h1>
  )
}

export default ProgressSimpleDefault;

Section Separator

Default


Close
import React from "react"
import {SectionSeparator} from "../../"

function SectionSeparatorDefault() {
  return (
    <h1>{`Coming Soon...`}</h1>
  )
}

export default SectionSeparatorDefault;

Source

Default


Close
import React from "react"
import {Source} from "../../"

function SourceDefault() {
  return (
    <h1>{`Coming Soon...`}</h1>
  )
}

export default SourceDefault;

Star Rating

Default


Close
import React from "react"
import {StarRating} from "../../"

function StarRatingDefault() {
  return (
    <h1>{`Coming Soon...`}</h1>
  )
}

export default StarRatingDefault

Stat Change

Default


Close
import React from "react"
import {StatChange} from "../../"

function StatChangeDefault() {
  return (
    <div>
      <StatChange change="increase" value="28.4" />

      <br/>

      <StatChange change="decrease" value={6.1} />

      <br/>

      <StatChange change="neutral" value={98} />
    </div>
  )
}

export default StatChangeDefault;

Stat Value

Default


Close
import React from "react"
import {StatValue} from "../../"

function StatValueDefault() {
  return (
    <StatValue value={1048} />
  )
}

export default StatValueDefault;
Unit Value


Close
import React from "react"
import StatValue from "../_stat_value.jsx"

function StatValueUnit() {
  return (
    <StatValue value="5,294" unit="appt" />
  )
}

export default StatValueUnit;

Table

Small


Close
import React from "react"
import {Table} from "../../"

function TableSm() {
  return (
    <Table size="sm" container={false}>
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableSm;
Medium


Close
import React from "react"
import {Table} from "../../"

function TableMd() {
  return (
    <Table size="md" container={false}>
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableMd;
Large


Close
import React from "react"
import {Table} from "../../"

function TableLg() {
  return (
    <Table size="lg" container={false}>
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableLg;
Table Container


Close
import React from "react"
import {Table} from "../../"

function TableContainer() {
  return (
    <Table
        size="md"
    >
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableContainer;
Disable Hover


Close
import React from "react"
import {Table} from "../../"

function TableDisableHover() {
  return (
    <Table disable_hover container={false}
        size="md"
    >
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableDisableHover;
Multi-line


Close
import React from "react"
import {Table} from "../../"

function TableMultiline() {
  return (
    <Table size="sm" container={false}>
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}<br/>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}<br/>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}<br/>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableMultiline;
Force Single Line


Close
import React from "react"
import {Table} from "../../"

function TableSingleLine() {
  return (
    <Table single_line container={false}
        size="sm"
    >
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}<br/>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}<br/>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}<br/>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableSingleLine;
Table Dark


Close
import React from "react"
import {Table} from "../../"

function TableDark() {
  return (
    <Table dark container={false}
        size="md"
    >
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableDark;
Table Container Dark


Close
import React from "react"
import {Table} from "../../"

function TableContainerDark() {
  return (
    <Table
        dark
        size="md"
    >
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableContainerDark;

Text Input

Default


Close
import React from "react"
import {TextInput} from "../../"

function TextInputDefault() {
  return (
    <div>
      <TextInput label="First Name" placeholder="Enter first name" value="Timothy Wenhold" />
      <TextInput label="Last Name" placeholder="Enter last name" />
      <TextInput label="Phone Number" type="phone" placeholder="Enter phone number" />
      <TextInput label="Email Address" type="email" placeholder="Enter email address" />
      <TextInput label="Zip Code" type="number" placeholder="Enter zip code" />
    </div>
  )
}

export default TextInputDefault

Time

Default


Close
import React from "react"
import {Time} from "../../"

function TimeDefault() {
  return (
    <h1>{`Coming Soon...`}</h1>
  )
}

export default TimeDefault;

Timestamp

Default


Close
import React from "react"
import {Timestamp} from "../../"

function TimestampDefault() {
  return (
    <h1>{`Coming Soon...`}</h1>
  )
}

export default TimestampDefault

Title

Light UI


Close
import React from "react"
import {Title} from "../../"

function TitleLight() {
  return (
    <div>
      <Title text="Default Title"/><br/>
      <Title size={4} tag="h4" text="Title 4" />
      <Title size={3} tag="h3" text="Title 3" />
      <Title size={2} tag="h2" text="Title 2" />
      <Title size={1} tag="h1" text="Title 1" />
    </div>
  )
}

export default TitleLight;
Dark UI


Close
import React from "react"
import {Title} from "../../"

function TitleDark() {
  return (
    <div>
      <Title dark size={4} tag="h4" text="Title 4" />
      <Title dark size={3} tag="h3" text="Title 3" />
      <Title dark size={2} tag="h2" text="Title 2" />
      <Title dark size={1} tag="h1" text="Title 1" />
    </div>
  )
}

export default TitleDark;

Title Count

Default


Close
import React from "react"
import {TitleCount} from "../../"

function TitleCountDefault() {
  return (
    <h1>{`Coming Soon...`}</h1>
  )
}

export default TitleCountDefault;

Title Detail

Default


Close
import React from "react"
import {TitleDetail} from "../../"

function TitleDetailDefault() {
  return (
    <h1>{`Coming Soon...`}</h1>
  )
}

export default TitleDetailDefault;

Toggle

Default


Close
// @flow

import React from "react"
import { Toggle } from "../../"

class Example extends React.Component {
  state = {
    toggle1: false,
    toggle2: true,
  }

  handleChange = event => {
    this.setState({
      [event.target.name]: event.target.checked
    })
  }

  render() {
    return (
      <>
        <Toggle
            checked={this.state.toggle1}
            name="toggle1"
            onChange={this.handleChange}
            onCheck={event => console.log(`${event.target.name} checked!`)}
            onUncheck={event => console.log(`${event.target.name} unchecked!`)}
        />

        <br />

        <Toggle
            checked={this.state.toggle2}
            name="toggle2"
            onChange={this.handleChange}
            onCheck={event => console.log(`${event.target.name} checked!`)}
            onUncheck={event => console.log(`${event.target.name} unchecked!`)}
        />
      </>
    )
  }
}

export default Example
Toggle Accessibility


Close
// @flow

import React from "react"
import { Toggle } from "../.."

const Example = () => {
  return (
    <Toggle aria={{ label: "toggle", expanded: false }} />
  )
}

export default Example
Toggle Data Props


Close
// @flow

import React from "react"
import { Toggle } from "../.."

const Example = () => {
  return (
    <Toggle
        checked
        data={{ id: "the-toggle", expanded: true }}
    />
  )
}

export default Example

User

Default


Close
import React from "react"
import {User} from "../../"

function UserDefault() {
  return (
    <h1>{`Coming Soon...`}</h1>
  )
}

export default UserDefault;

User Badge

Default


Close
import React from "react"
import {UserBadge} from "../../"

function UserBadgeDefault() {
  return (
    <h1>{`Coming Soon...`}</h1>
  )
}

export default UserBadgeDefault;

Vertical Nav

Default


Close
import React from "react"
import {VerticalNav} from "../../"
import VerticalNavItem from "../_item.jsx"

function DefaultNav() {
  return (
    <h1>{`Coming Soon...`}</h1>
  )
}

export default DefaultNav;