3.5.0






Kits


Avatar

Default


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

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

export default AvatarDefault
Monogram


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

const 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'

const 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'

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

      &nbsp;

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

      &nbsp;

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

export default BadgeRounded
Colors


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

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

        &nbsp;

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

        &nbsp;

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

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

        &nbsp;

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

        &nbsp;

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

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

        &nbsp;

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

        &nbsp;

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

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

        &nbsp;

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

        &nbsp;

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

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

        &nbsp;

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

        &nbsp;

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

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

        &nbsp;

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

        &nbsp;

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

export default BadgeColors
Dark


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

const BadgeDark = () => {
  return (
    <div>
      <div>
        <Badge
            dark
            rounded
            text="+1"
            variant="primary"
        />

        &nbsp;

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

        &nbsp;

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

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

        &nbsp;

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

        &nbsp;

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

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

        &nbsp;

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

        &nbsp;

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

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

        &nbsp;

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

        &nbsp;

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

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

        &nbsp;

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

        &nbsp;

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

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

        &nbsp;

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

        &nbsp;

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

export default BadgeDark

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 '../../'

const 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 '../../'

const BodyDark = () => {
  return (
    <div>
      <Body
          dark
          text="I am a body kit (Default)"
      />
      <Body
          color="light"
          dark
          text="I am a body kit (Light)"
      />
      <Body
          color="lighter"
          dark
          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 '../../'

const 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={() => alert('button clicked!')}
        text="Button Primary"
    />
    <Button
        onClick={() => alert('button clicked!')}
        text="Button Secondary"
        variant="secondary"
    />
    <Button
        onClick={() => alert('button clicked!')}
        text="Button Link"
        variant="link"
    />
    <Button
        disabled
        onClick={() => alert('button clicked!')}
        text="Button Disabled"
    />
  </div>
)

export default ButtonDefault
Button Variants Dark


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

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

export default ButtonDefaultDark
Button Full Width


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

const ButtonFullWidth = () => (
  <div>
    <Button
        fullWidth
        text="Button Full Width"
    />
  </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 '../../'

const 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 '../../'

const 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'

const CardLight = () => {
  return (
    <div>
      <Card>{'Card content'}</Card>
    </div>
  )
}

export default CardLight
Highlight Cards


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

const CardHighlight = () => {
  return (
    <div>
      <Card highlight={{ position: 'side', color: 'windows' }}>
        {'Card content'}
      </Card>

      <br />

      <Card highlight={{ position: 'top', color: 'warning' }}>
        {'Card content'}
      </Card>
    </div>
  )
}

export default CardHighlight
Selected


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

const 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 '../../'

const 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 '../../'

const 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 '../../'

const 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
Separator Card


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

const CardSeparator = () => {
  return (
    <Card padding="none">
      <Body>{'Header'}</Body>
      <SectionSeparator variant="card" />
      <Body>
        {
          '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.'
        }
      </Body>
      <SectionSeparator variant="card" />
      <Body>{'Footer'}</Body>
    </Card>
  )
}

export default CardSeparator

Checkbox

Default


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

const 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 '../../'

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

export default CheckboxDark
Custom Checkbox


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

const CheckboxCustom = () => {
  return (
    <div>
      <Checkbox text="Custom Checkbox">
        <input
            name="custom-name"
            type="checkbox"
            value="custom-value"
        />
      </Checkbox>
    </div>
  )
}

export default CheckboxCustom
Default w/ Error


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

const CheckboxError = () => {
  return (
    <div>
      <Checkbox
          error
          name="default name"
          text="Checkbox label"
          value="default value"
      />
    </div>
  )
}

export default CheckboxError
Dark w/ Error


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

const CheckboxDarkError = () => {
  return (
    <div>
      <Checkbox
          dark
          error
          name="default name"
          text="Checkbox label"
          value="default value"
      />
    </div>
  )
}

export default CheckboxDarkError

Circle Icon Button

Default


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

const CircleIconButtonDefault = () => (
  <div>
    <CircleIconButton
        icon="plus"
        variant="primary"
    />

    <br />

    <CircleIconButton
        icon="pen"
        variant="secondary"
    />

    <br />

    <CircleIconButton
        disabled
        icon="times"
    />

    <br />

    <CircleIconButton
        icon="user"
        variant="link"
    />
  </div>
)

export default CircleIconButtonDefault
Dark


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

const CircleIconButtonDark = () => (
  <div>
    <CircleIconButton
        dark
        icon="plus"
        variant="primary"
    />

    <br />

    <CircleIconButton
        dark
        icon="pen"
        variant="secondary"
    />

    <br />

    <CircleIconButton
        dark
        disabled
        icon="times"
    />

    <br />

    <CircleIconButton
        dark
        icon="user"
        variant="link"
    />
  </div>
)

export default CircleIconButtonDark

Contact

Default


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

const 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 '../../'

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

export default ContactDefault

Currency

Small


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

const 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 '../../'

const 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 '../../'

const DashboardValueDefault = () => {
  return (
    <div>
      <DashboardValue
          statChange={{ change: 'decrease', value: '26.1' }}
          statLabel="Decreased Value"
          statValue={{ value: '1,428', unit: 'appts' }}
      />

      <br />
      <br />

      <DashboardValue
          statChange={{ change: 'increase', value: 56.1 }}
          statLabel="Increased Value"
          statValue={{ value: '938', unit: 'homes' }}
      />

      <br />
      <br />

      <DashboardValue
          statChange={{ value: 86 }}
          statLabel="Neutral Value"
          statValue={{ value: '261', unit: 'windows' }}
      />
    </div>
  )
}

export default DashboardValueDefault
Align


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

const DashboardValueAlign = () => {
  return (
    <div>
      <DashboardValue
          statChange={{ change: 'decrease', value: '26.1' }}
          statLabel="Top Title Value"
          statValue={{ value: '1,428', unit: 'appts' }}
      />

      <br />
      <br />

      <DashboardValue
          align="center"
          statChange={{ change: 'decrease', value: 56.1 }}
          statLabel="Top Title Value"
          statValue={{ value: '1,428', unit: 'appts' }}
      />

      <br />
      <br />

      <DashboardValue
          align="right"
          statChange={{ change: 'decrease', value: 86 }}
          statLabel="Top Title Value"
          statValue={{ value: '1,428', unit: 'appts' }}
      />
    </div>
  )
}

export default DashboardValueAlign

Date

Default


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

const DateDefault = () => {
  return (
    <div>
      <Date
          size="lg"
          value="1995-12-25"
      />

      <br />

      <Date value="17 Mar 69" />

      <br />

      <Date
          size="xs"
          value="2020-04-20T04:20:00.000Z"
      />
    </div>
  )
}

export default DateDefault

Date Range Inline

Default


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

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

export default DateRangeInlineDefault

Date Stacked

Default


Close
import React from 'react'
import DateStacked from '../_date_stacked.jsx'

const DateStackedDefault = () => {
  return (
    <div>

      <DateStacked
          align="left"
          date={new Date()}
          size="sm"
      />

      <br />

      <DateStacked
          date={new Date()}
          size="md"
      />

    </div>
  )
}

export default DateStackedDefault
Not Current Year


Close
import React from 'react'
import DateStacked from '../_date_stacked.jsx'

const DateStackedNotCurrentYear = () => {
  return (
    <div>

      <DateStacked
          date={new Date('20 Mar 2018')}
          size="sm"
      />

      <br />

      <DateStacked
          date={new Date('20 Mar 2018')}
          size="md"
      />

    </div>
  )
}

export default DateStackedNotCurrentYear
Day & Month Reverse


Close
import React from 'react'
import DateStacked from '../_date_stacked.jsx'

const DateStackedDefault = () => {
  return (
    <div>

      <DateStacked
          align="left"
          date={new Date()}
          reverse
          size="sm"
      />

      <br />

      <DateStacked
          date={new Date()}
          reverse
          size="md"
      />

    </div>
  )
}

export default DateStackedDefault
Sizes


Close
import React from 'react'
import DateStacked from '../_date_stacked.jsx'

const DateStackedSizes = () => {
  return (
    <div>
      <DateStacked
          date={new Date()}
          size="sm"
      />
      <br />
      <DateStacked
          date={new Date()}
          size="md"
      />
    </div>
  )
}

export default DateStackedSizes
Alignment


Close
import React from 'react'
import DateStacked from '../_date_stacked.jsx'

const DateStackedAlign = () => {
  return (
    <div>
      <DateStacked
          date={new Date()}
          size="sm"
      />

      <br />

      <DateStacked
          align="center"
          date={new Date()}
      />

      <br />

      <DateStacked
          align="right"
          date={new Date()}
      />

      <br />

      <DateStacked
          date={new Date()}
          size="md"
      />

      <br />

      <DateStacked
          align="center"
          date={new Date()}
          size="md"
      />

      <br />

      <DateStacked
          align="right"
          date={new Date()}
          size="md"
      />

    </div>
  )
}

export default DateStackedAlign
Dark


Close
import React from 'react'
import DateStacked from '../_date_stacked.jsx'

const DateStackedDark = () => {
  return (
    <div>
      <DateStacked
          dark
          date={new Date()}
          size="sm"
      />

      <br />

      <DateStacked
          dark
          date={new Date()}
          size="md"
      />
    </div>
  )
}

export default DateStackedDark

Date Year Stacked

Default


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

const 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 '../../'

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

export default DateYearStackedDark

Distribution Bar

Default


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

const 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 '../../'

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

      <br />
      <br />

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

      <br />
      <br />

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

export default FixedConfirmationToastDefault
Multi Line


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

const FixedConfirmationToastMultiLine = () => {
  return (
    <div>
      <FixedConfirmationToast
          status="tip"
          text={'Scan to Assign Selected Items.\n Click X to close at any time'}
      />
    </div>
  )
}

export default FixedConfirmationToastMultiLine

Hashtag

Hashtag Types


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

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

export default HashtagDefault
Dark


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

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

export default HashtagDark

Home Address Street

Default


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

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

export default HomeAddressStreetDefault
Modified


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

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

export default HomeAddressStreetModified
Dark


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

const HomeAddressStreetDark = () => {
  return (
    <HomeAddressStreet
        address="70 Prospect Ave"
        addressCont="Apt M18"
        city="West Chester"
        dark
        homeId={8250263}
        homeUrl="https://powerhrg.com/"
        state="PA"
        territory="PHL"
        zipcode="19382"
    />
  )
}

export default HomeAddressStreetDark

Icon

Icon Default


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

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

export default IconDefault
Icon Rotate


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

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

export default IconRotate
Icon Flip


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

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

export default IconFlip
Icon Animation


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

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

export default IconAnimate
Icon Pull


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

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

export default IconPull
Icon Border


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

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

export default IconBorder
Icon Sizes


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

const 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 '../../'

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

export default IconDefaultDark

Icon Circle

Default


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

const IconCircleDefault = () => {
  return (
    <div>
      <IconCircle
          icon="rocket"
          size="md"
      />
    </div>
  )
}

export default IconCircleDefault
Size


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

const IconCircleSize = () => {
  return (
    <div>
      <IconCircle
          icon="rocket"
          size="sm"
      />
      <br />
      <IconCircle
          icon="rocket"
          size="md"
      />
      <br />
      <IconCircle
          icon="rocket"
          size="lg"
      />
      <br />
      <IconCircle
          icon="rocket"
          size="xl"
      />
    </div>
  )
}

export default IconCircleSize
Color


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

const IconCircleColor = () => {
  return (
    <div>
      <IconCircle
          icon="rocket"
          size="sm"
          variant="royal"
      />
      <br />
      <IconCircle
          icon="rocket"
          size="sm"
          variant="blue"
      />
      <br />
      <IconCircle
          icon="rocket"
          size="sm"
          variant="purple"
      />
      <br />
      <IconCircle
          icon="rocket"
          size="sm"
          variant="teal"
      />
      <br />
      <IconCircle
          icon="rocket"
          size="sm"
          variant="red"
      />
      <br />
      <IconCircle
          icon="rocket"
          size="sm"
          variant="yellow"
      />
      <br />
      <IconCircle
          icon="rocket"
          size="sm"
          variant="green"
      />
    </div>
  )
}

export default IconCircleColor

Icon Value

Default


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

const IconValueDefault = () => {
  return (
    <div>
      <IconValue
          icon="clipboard"
          text="33-123456"
      />

      <br />

      <IconValue
          icon="heart"
          text="93"
      />

      <br />

      <IconValue
          icon="clock"
          text="15min"
      />
    </div>
  )
}

export default IconValueDefault

Image

Default


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

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

export default DefaultImage

Label Pill

Default


Close
import React from 'react'

const LabelPillDefault = () => {
  return (
    <h1>{'Coming Soon...'}</h1>
  )
}

export default LabelPillDefault

Label Value

Default


Close
import React from 'react'

const LabelValueDefault = () => {
  return (
    <h1>{'Coming Soon...'}</h1>
  )
}

export default LabelValueDefault

Layout

Default


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

const LayoutDefault = () => {
  return (
    <div>
      <Layout>
        {'This is great!'}
      </Layout>
    </div>
  )
}

export default LayoutDefault

Legend

Default


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

const products = ['Windows', 'Doors', 'Roofing', 'Siding', 'Solar Gutters', 'Insulation', 'Other']

const LegendDefault = () => (
  <div>
    {
      products.map((product, i) => (
        <Legend
            color={`data_${i + 1}`}
            key={`legend_${i + 1}`}
            text={product}
        />
      ))
    }
  </div>
)

export default LegendDefault
With Prefix Text


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

const LegendPrefix = () => (
  <div>
    <Legend
        color="data_3"
        prefixText="10"
        text="Windows"
    />
  </div>
)

export default LegendPrefix
Dark Mode


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

const products = ['Windows', 'Doors', 'Roofing', 'Siding', 'Solar Gutters', 'Insulation', 'Other']

const LegendDark = () => (
  <div>
    {
      products.map((product, i) => (
        <Legend
            color={`data_${i + 1}`}
            dark
            key={`legend_${i + 1}`}
            text={product}
        />
      ))
    }
  </div>
)

export default LegendDark
Dark Mode with Prefix Text


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

const LegendDarkPrefix = () => (
  <div>
    <Legend
        color="data_3"
        dark
        prefixText="10"
        text="Windows"
    />
  </div>
)

export default LegendDarkPrefix

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 { List, ListItem } from '../../'

const ListDefault = () => {
  return (
    <>
      <List>
        <ListItem>{'Item 1'}</ListItem>
        <ListItem>{'Item 2'}</ListItem>
        <ListItem>{'Item 3'}</ListItem>
      </List>
    </>
  )
}

export default ListDefault
Dark


Close
import React from 'react'

import { List, ListItem } from '../../'

const ListDark = () => {
  return (
    <>
      <List
          borderless
          dark
          layout="right"
          ordered
          size="large"
          xpadding
      >
        <ListItem>{'Item 1'}</ListItem>
        <ListItem>{'Item 2'}</ListItem>
        <ListItem>{'Item 3'}</ListItem>
      </List>
    </>
  )
}

export default ListDark

Loading Inline

Default


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

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

export default LoadingInlineLight
Default


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

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

export default LoadingInlineDark

Message

Default


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

const MessageDefault = () => {
  return (
    <div>

      <Message
          avatarName="Mike Bishop"
          avatarStatus="online"
          avatarUrl="https://randomuser.me/api/portraits/men/50.jpg"
          label="Message"
          message="How can we assist you today?"
          timestamp="20 seconds ago"
      />

      <br />
      <br />

      <Message
          avatarName="Wade Winningham"
          avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
          label="Support"
          message="We will escalate this issue to a Senior Support agent."
          timestamp="9 minutes ago"
      />

      <br />
      <br />

      <Message
          avatarName="Lisa Thompson"
          avatarUrl="https://randomuser.me/api/portraits/women/39.jpg"
          message="To processs your order, I will need your full name."
          timestamp="4 hours ago"
      />

      <br />
      <br />

      <Message
          avatarName="Becca Jacobs"
          avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
          label="Application"
          message="Application for Kate Smith is waiting for your approval"
          timestamp="2 days ago"
      />

      <br />
      <br />

      <Message
          avatarName="Timothy Wenhold"
          label="Complaint"
          message="We are so sorry you had a bad experience!"
          timestamp="2 days ago"
      />

      <br />
      <br />

      <Message
          label="Support"
          message="Please hold for one moment, I will check with my manager."
          timestamp="2 days ago"
      />

    </div>
  )
}

export default MessageDefault

Multiple Users

Default


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

const MultipleUsersDefault = () => {
  return (
    <div>
      <MultipleUsers
          users={[
        {
          name: 'Patrick Welch',
          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
        },
        {
          name: 'Lucille Sanchez',
          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
        },
        {
          name: 'Beverly Reyes',
          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
        },
        {
          name: 'Keith Craig',
          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
        },
        {
          name: 'Alicia Cooper',
          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
        },
      ]}
      />

      <br />
      <br />

      <MultipleUsers
          users={[
        {
          name: 'Shawn Palmer',
          imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
        },
        {
          name: 'Andrew Murray Cooper Craig',
        },
      ]}
      />
    </div>
  )
}

export default MultipleUsersDefault
Reverse


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

const MultipleUsersReverse = () => {
  return (
    <div>
      <MultipleUsers
          reverse
          users={[
          {
            name: 'Patrick Welch',
            imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
          },
          {
            name: 'Lucille Sanchez',
            imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
          },
          {
            name: 'Beverly Reyes',
            imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
          },
          {
            name: 'Keith Craig',
            imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
          },
          {
            name: 'Alicia Cooper',
            imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
          },
        ]}
      />

      <br />
      <br />

      <MultipleUsers
          reverse
          users={[
          {
            name: 'Shawn Palmer',
            imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
          },
          {
            name: 'Andrew Murray',
          },
        ]}
      />
    </div>
  )
}

export default MultipleUsersReverse

Multiple Users Stacked

Default


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

const MultipleUsersStackedDefault = () => {
  return (
    <div>
      <MultipleUsersStacked
          users={[
        {
          name: 'Patrick Welch',
          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
        },
      ]}
      />
      <br />
      <br />
      <MultipleUsersStacked
          users={[
        {
          name: 'Patrick Welch',
          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
        },
        {
          name: 'Lucille Sanchez',
          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
        },
      ]}
      />
      <br />
      <br />
      <MultipleUsersStacked
          users={[
        {
          name: 'Patrick Welch',
          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
        },
        {
          name: 'Lucille Sanchez',
          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
        },
        {
          name: 'Beverly Reyes',
          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
        },
        {
          name: 'Keith Craig',
          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
        },
        {
          name: 'Alicia Cooper',
          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
        },
      ]}
      />
    </div>
  )
}

export default MultipleUsersStackedDefault

Nav

Default


Close
import React from 'react'
import { Nav } from '../../'
import NavItem from '../_item.jsx'

const DefaultNav = () => (
  <Nav
      link="#"
      orientation="vertical"
      title="Title example"
  >
    <NavItem
        active
        link="#"
        text="Active Nav Item using text prop"
    />
    <NavItem
        link="#"
        text="Nav Item using text prop"
    />
    <NavItem
        link="#"
        text="Nav Item using text prop"
    />
  </Nav>
)

export default DefaultNav
Horizontal Nav


Close
import React from 'react'
import { Nav } from '../../'
import NavItem from '../_item.jsx'

const HorizontalNav = () => {
  return (
    <Nav
        link="#"
        orientation="horizontal"
        title="Title example"
    >
      <NavItem
          active
          link="#"
          text="Active Nav Item using text prop"
      />
      <NavItem
          link="#"
          text="Nav Item using text prop"
      />
      <NavItem
          link="#"
          text="Nav Item using text prop"
      />
    </Nav>
  )
}

export default HorizontalNav
Block Nav


Close
import React from 'react'
import { Nav } from '../../'
import NavItem from '../_item.jsx'

const BlockNav = () => {
  return (
    <Nav
        link="#"
        orientation="vertical"
        title="Title example"
    >
      <NavItem
          active
          link="#"
      >
        {'Active Nav Item using text prop'}
      </NavItem>
      <NavItem link="#">{'Nav Item using text prop'}</NavItem>
      <NavItem link="#">{'Nav Item using text prop'}</NavItem>
    </Nav>
  )
}

export default BlockNav
Without Title


Close
import React from 'react'
import { Nav } from '../../'
import NavItem from '../_item.jsx'

const BlockNoTitleNav = () => {
  return (
    <Nav
        link="#"
        orientation="vertical"
    >
      <NavItem
          active
          link="#"
      >
        {'Active Nav Item using text prop'}
      </NavItem>
      <NavItem link="#">{'Nav Item using text prop'}</NavItem>
      <NavItem link="#">{'Nav Item using text prop'}</NavItem>
    </Nav>
  )
}

export default BlockNoTitleNav

Online Status

Default


Close
import React from 'react'

const OnlineStatusDefault = () => {
  return (
    <h1>{'Coming Soon...'}</h1>
  )
}

export default OnlineStatusDefault

Person

Default


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

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

export default PersonDefault

Person Contact

Default


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

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

export default PersonContactDefault
Multiple People


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

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

export default PersonContactMultiple
With Detail


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

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

export default PersonContactWithDetail

Pill

Default


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

const 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"
      />

      <br />
      <br />

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

export default PillDefault

Progress Pills

Default


Close

import React from 'react'
import ProgressPills from '../_progress_pills.jsx'

const ProgressPillsDefault = () => {
  return (
    <div>
      <ProgressPills
          active={2}
          steps={3}
      />

    </div>
  )
}

export default ProgressPillsDefault
Status


Close

import React from 'react'
import ProgressPills from '../_progress_pills.jsx'

const ProgressPillsStatus = () => {
  return (
    <div>
      <ProgressPills
          active={2}
          steps={3}
          title="Status:"
          value="Orientation"
      />

    </div>
  )
}

export default ProgressPillsStatus
Dark


Close

import React from 'react'
import ProgressPills from '../_progress_pills.jsx'

const ProgressPillsDark = () => {
  return (
    <div>
      <ProgressPills
          active={2}
          dark
          steps={3}
          title="Status:"
          value="Orientation"
      />

    </div>
  )
}

export default ProgressPillsDark

Progress Simple

Default


Close
import React from 'react'

const ProgressSimpleDefault = () => {
  return (
    <h1>{'Coming Soon...'}</h1>
  )
}

export default ProgressSimpleDefault

Radio

Default


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

const RadioDefault = () => {
  return (
    <div>
      <Radio
          label="Power"
          name="Group2"
          value="Power"
      />
      <br />
      <Radio
          checked
          label="Nitro"
          name="Group2"
          value="Nitro"
      />
      <br />
      <Radio
          label="Google"
          name="Group2"
          value="Google"
      />
    </div>
  )
}
export default RadioDefault
Dark


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

const RadioDark = () => {
  return (
    <div>
      <Radio
          dark
          label="Power"
          name="Group1"
          value="Power"
      />
      <br />
      <Radio
          checked
          dark
          label="Nitro"
          name="Group1"
          value="Nitro"
      />
      <br />
      <Radio
          dark
          label="Google"
          name="Group1"
          value="Google"
      />
    </div>
  )
}
export default RadioDark
Custom


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

const RadioCustom = () => {
  return (
    <div>
      <Radio
          className="my_custom_class"
          label="Custom Power"
      >
        <input
            name="custom"
            type="radio"
            value="power"
        />
      </Radio>
      <br />
      <Radio
          className="my_custom_class"
          label="Custom Nitro"
      >
        <input
            checked
            name="custom"
            type="radio"
            value="nitro"
        />
      </Radio>
      <br />
      <Radio
          className="my_custom_class"
          label="Custom Google"
      >
        <input
            name="custom"
            type="radio"
            value="google"
        />
      </Radio>
    </div>
  )
}
export default RadioCustom
With Error


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

const RadioError = () => {
  return (
    <div>
      <Radio
          error
          label="Power"
          name="Group2"
          value="Power"
      />
    </div>
  )
}
export default RadioError
Dark With Error


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

const RadioDarkError = () => {
  return (
    <div>
      <Radio
          dark
          error
          label="Power"
          name="Group2"
          value="Power"
      />
    </div>
  )
}
export default RadioDarkError

Section Separator

Text Separator


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

const SectionSeparatorText = () => {
  return (
    <SectionSeparator text="Title Separator" />
  )
}

export default SectionSeparatorText
Line Separator


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

const SectionSeparatorLine = () => {
  return (
    <SectionSeparator />
  )
}

export default SectionSeparatorLine
Background Variant


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

const SectionSeparatorTextBackground = () => {
  return (
    <SectionSeparator
        text="Title Separator"
        variant="background"
    />
  )
}

export default SectionSeparatorTextBackground

Select

Default


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

const SelectDefault = () => {
  return (
    <div>
      <Select
          label="Favorite Food"
          name="food"
          options={[
          {
            value: '1',
            valueText: 'Burgers',
          },
          {
            value: '2',
            selected: true,
            valueText: 'Pizza',
          },
          {
            value: '3',
            valueText: 'Tacos',
          },
        ]}
      />
    </div>
  )
}

export default SelectDefault
Blank Selection Text


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

const SelectBlank = () => {
  return (
    <div>
      <Select
          blankSelection="Select One..."
          label="Where do you live"
          name="location"
          options={[
          {
            value: 'USA',
          },
          {
            value: 'Canada',
          },
          {
            value: 'Brazil',
          },
          {
            value: 'Philippines',
          },
        ]}
      />
    </div>
  )
}

export default SelectBlank
Disabled Options


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

const SelectDisabledOptions = () => {
  return (
    <div>
      <Select
          label="Favorite Coffee"
          name="coffee"
          options={[
          {
            value: '1',
            disabled: true,
            valueText: 'Espresso',
          },
          {
            value: '2',
            selected: true,
            valueText: 'Americano',
          },
          {
            value: '3',
            disabled: true,
            valueText: 'Cappuccino',
          },
          {
            value: '4',
            valueText: 'Mocha',
          },
          {
            value: '5',
            valueText: 'Flat White',
          },
          {
            value: '6',
            valueText: 'Latte',
          },
        ]}
      />
    </div>
  )
}

export default SelectDisabledOptions
Disabled Select Field


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

const SelectDisabled = () => {
  return (
    <div>
      <Select
          disabled
          label="Favorite Dessert"
          name="dessert"
          options={[
          {
            value: 'Apple Pie',
          },
          {
            value: 'Cookies',
          },
          {
            value: 'Ice Cream',
          },
          {
            value: 'Brownies',
          },
        ]}
      />
    </div>
  )
}

export default SelectDisabled
Required Select Field


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

const SelectRequired = () => {
  return (
    <div>
      <Select
          blankSelection="Select One..."
          label="Which shoe do you tie first?"
          name="shoe"
          options={[
          {
            value: 'Left',
          },
          {
            value: 'Right',
          },
          {
            value: 'I go without laces',
          },
        ]}
          required
      />
    </div>
  )
}

export default SelectRequired
Equal option value and value text


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

const SelectValueTextSame = () => {
  return (
    <div>
      <Select
          label="Favorite Sport"
          name="sports"
          options={[
          {
            value: 'Football',
          },
          {
            value: 'Baseball',
          },
          {
            value: 'Basketball',
          },
          {
            value: 'Hockey',
          },
        ]}
      />
    </div>
  )
}

export default SelectValueTextSame
Custom Select


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

const SelectCustomSelect = () => {
  return (
    <div>
      <Select label="Favorite Holiday">
        <select
            id="holiday"
            name="holiday"
        >
          <option value="1">{'Christmas'}</option>
          <option value="2">{'Thanksgiving'}</option>
          <option value="3">{'Halloween'}</option>
          <option value="4">{'Fourth of July'}</option>
        </select>
      </Select>
    </div>
  )
}

export default SelectCustomSelect
Dark Select


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

const SelectDark = () => {
  return (
    <div>
      <Select
          dark
          label="Favorite Food"
          name="food"
          options={[
          {
            value: '1',
            valueText: 'Burgers',
          },
          {
            value: '2',
            selected: true,
            valueText: 'Pizza',
          },
          {
            value: '3',
            valueText: 'Tacos',
          },
        ]}
      />
    </div>
  )
}

export default SelectDark
Select w/ Error


Close
import React from 'react'
import { Body, Select } from '../..'

const SelectError = () => {
  return (
    <div>
      <Select
          error="Please make a valid selection"
          label="Favorite Food"
          name="food"
          options={[
          {
            value: '1',
            valueText: 'Burgers',
          },
          {
            value: '2',
            selected: true,
            valueText: 'Pizza',
          },
          {
            value: '3',
            valueText: 'Tacos',
          },
        ]}
      />
      <Body
          error="Please make a valid selection"
          status="negative"
      />
    </div>
  )
}

export default SelectError
Select Dark w/ Error


Close
import React from 'react'
import { Body, Select } from '../..'

const SelectDarkError = () => {
  return (
    <div>
      <Select
          dark
          error="Please make a valid selection"
          label="Favorite Food"
          name="food"
          options={[
          {
            value: '1',
            valueText: 'Burgers',
          },
          {
            value: '2',
            selected: true,
            valueText: 'Pizza',
          },
          {
            value: '3',
            valueText: 'Tacos',
          },
        ]}
      />
      <Body
          dark
          error="Please make a valid selection"
          status="negative"
      />
    </div>
  )
}

export default SelectDarkError

Selectable Card

Default


Close
import React from 'react'
import SelectableCard from '../_selectable_card.jsx'

class SelectableCardDefault extends React.Component {
  state = {
    selectedWithIcon: true,
    selectedWithoutIcon: true,
    unselected: false,
  }

  handleSelect = (event) => {
    this.setState({
      [event.target.id]: event.target.checked,
    })
  }

  render() {
    return (
      <div className="pb--doc-demo-row">

        <SelectableCard
            checked={this.state.selectedWithIcon}
            icon
            inputId="selectedWithIcon"
            name="selectedWithIcon"
            onChange={this.handleSelect}
            value="selectedWithIcon"
        >
          {'Selected, with icon'}
        </SelectableCard>

        <SelectableCard
            checked={this.state.selectedWithoutIcon}
            icon={false}
            inputId="selectedWithoutIcon"
            name="selectedWithoutIcon"
            onChange={this.handleSelect}
            value="selectedWithoutIcon"
        >
          {'Selected, without icon'}
        </SelectableCard>

        <SelectableCard
            checked={this.state.unselected}
            inputId="unselected"
            name="unselected"
            onChange={this.handleSelect}
            value="unselected"
        >
          {'Unselected'}
        </SelectableCard>

        <SelectableCard
            checked={this.state.disabled}
            disabled
            inputId="disabled"
            name="disabled"
            onChange={this.handleSelect}
            value="disabled"
        >
          {'Disabled'}
        </SelectableCard>

      </div>
    )
  }
}

export default SelectableCardDefault
Single Select


Close
import React from 'react'
import SelectableCard from '../_selectable_card.jsx'

class SelectableCardSingleSelect extends React.Component {
  state = {
    selected: null,
  }

  handleSelect = (event) => {
    this.setState({
      selected: event.target.value,
    })
  }

  render() {
    return (
      <div className="pb--doc-demo-row">

        <SelectableCard
            checked={this.state.selected === 'male'}
            inputId="male1"
            multi={false}
            name="gender"
            onChange={this.handleSelect.bind(this)}
            value="male"
        >
          {'Male'}
        </SelectableCard>

        <SelectableCard
            checked={this.state.selected === 'female'}
            inputId="female1"
            multi={false}
            name="gender"
            onChange={this.handleSelect.bind(this)}
            value="female"
        >
          {'Female'}
        </SelectableCard>

        <SelectableCard
            checked={this.state.selected === 'other'}
            inputId="other1"
            multi={false}
            name="gender"
            onChange={this.handleSelect.bind(this)}
            value="other"
        >
          {'Other'}
        </SelectableCard>

      </div>
    )
  }
}

export default SelectableCardSingleSelect
Block


Close
import React from 'react'
import {
  Body,
  SelectableCard,
  Title,
} from '../../'

class SelectableCardBlock extends React.Component {
  state = {
    block: true,
    tag: false,
  }

  handleSelect = (event) => {
    this.setState({
      [event.target.id]: event.target.checked,
    })
  }

  render() {
    return (
      <div className="pb--doc-demo-row">

        <SelectableCard
            checked={this.state.block}
            inputId="block"
            name="block"
            onChange={this.handleSelect}
            value="block"
        >
          <Title
              size={4}
              text="Block"
          />
          <Body tag="span">{'This uses block'}</Body>
        </SelectableCard>

        <SelectableCard
            checked={this.state.tag}
            inputId="tag"
            name="tag"
            onChange={this.handleSelect}
            text="This passes text through the tag"
            value="tag"
        />

      </div>
    )
  }
}

export default SelectableCardBlock
Dark


Close
import React from 'react'
import SelectableCard from '../_selectable_card.jsx'

class SelectableCardDark extends React.Component {
  state = {
    selectedWithIconDark: true,
    selectedWithoutIconDark: true,
    unselectedDark: false,
  }

  handleSelect = (event) => {
    this.setState({
      [event.target.id]: event.target.checked,
    })
  }

  render() {
    return (
      <div className="pb--doc-demo-row">

        <SelectableCard
            checked={this.state.selectedWithIconDark}
            dark
            icon
            inputId="selectedWithIconDark"
            name="selectedWithIconDark"
            onChange={this.handleSelect}
            value="selectedWithIconDark"
        >
          {'Selected, with icon'}
        </SelectableCard>

        <SelectableCard
            checked={this.state.selectedWithoutIconDark}
            dark
            icon={false}
            inputId="selectedWithoutIconDark"
            name="selectedWithoutIconDark"
            onChange={this.handleSelect}
            value="selectedWithoutIconDark"
        >
          {'Selected, without icon'}
        </SelectableCard>

        <SelectableCard
            checked={this.state.unselectedDark}
            dark
            inputId="unselectedDark"
            name="unselectedDark"
            onChange={this.handleSelect}
            value="unselectedDark"
        >
          {'Unselected'}
        </SelectableCard>

        <SelectableCard
            dark
            disabled
            inputId="disabled_dark"
            name="disabled_dark"
            onChange={this.handleSelect}
            value="disabled_dark"
        >
          {'Unselected'}
        </SelectableCard>

      </div>
    )
  }
}

export default SelectableCardDark

Source

Default


Close
import React from 'react'

const SourceDefault = () => {
  return (
    <h1>{'Coming Soon...'}</h1>
  )
}

export default SourceDefault

Star Rating

Default


Close
import React from 'react'

const StarRatingDefault = () => {
  return (
    <h1>{'Coming Soon...'}</h1>
  )
}

export default StarRatingDefault

Stat Change

Default


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

const 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 '../../'

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

export default StatValueDefault
Unit Value


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

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

export default StatValueUnit

Table

Small


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

const TableSm = () => {
  return (
    <Table 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'}</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 '../../'

const TableMd = () => {
  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 TableMd
Large


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

const TableLg = () => {
  return (
    <Table size="lg">
      <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 Off


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

const TableContainer = () => {
  return (
    <Table
        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 TableContainer
Disable Hover


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

const TableDisableHover = () => {
  return (
    <Table
        disableHover
        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 '../../'

const TableMultiline = () => {
  return (
    <Table 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 TableMultiline
Force Single Line


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

const TableSingleLine = () => {
  return (
    <Table
        singleLine
        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
Data Table


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

const TableDataTable = () => {
  return (
    <Table dataTable>
      <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 TableDataTable
Table Dark


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

const TableDark = () => {
  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 TableDark
Table Container Off Dark


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

const TableContainerDark = () => {
  return (
    <Table
        container={false}
        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 {
  Caption,
  TextInput,
  Title,
} from '../../'

class TextInputDefault extends React.Component {
  state = {
    firstName: '',
  }

  render() {
    const handleOnChange = ({ target }) => this.setState({ firstName: target.value })

    const {
      firstName,
    } = this.state

    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"
            placeholder="Enter phone number"
            type="phone"
        />
        <TextInput
            label="Email Address"
            placeholder="Enter email address"
            type="email"
        />
        <TextInput
            label="Zip Code"
            placeholder="Enter zip code"
            type="number"
        />

        <br />
        <br />

        <Title>{'Event Handler Props'}</Title>

        <br />
        <Caption>{'onChange'}</Caption>

        <br />

        <TextInput
            label="First Name"
            onChange={handleOnChange}
            placeholder="Enter first name"
            value={firstName}
        />

        <If condition={firstName !== ''}>
          {`First name is: ${firstName}`}
        </If>
      </div>
    )
  }
}

export default TextInputDefault
Dark


Close
import React from 'react'
import {
  Caption,
  TextInput,
  Title,
} from '../../'

class TextInputDark extends React.Component {
    state = {
      firstName: '',
    }

    render() {
      const handleOnChange = ({ target }) => this.setState({ firstName: target.value })

      const {
        firstName,
      } = this.state

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

          <br />
          <br />

          <Title dark>{'Event Handler Props'}</Title>

          <br />
          <Caption>{'onChange'}</Caption>

          <br />

          <TextInput
              dark
              label="First Name"
              onChange={handleOnChange}
              placeholder="Enter first name"
              value={firstName}
          />

          <If condition={firstName !== ''}>
            {`First name is: ${firstName}`}
          </If>
        </div>
      )
    }
}

export default TextInputDark
With Error


Close
import React from 'react'
import {
  TextInput,
} from '../..'

const TextInputError = () => (
  <div>
    <TextInput
        error="Please enter a valid email address"
        label="Email Address"
        placeholder="Enter email address"
        type="email"
    />
  </div>
)

export default TextInputError
Dark With Error


Close
import React from 'react'
import {
  TextInput,
} from '../..'

const TextInputDarkError = () => (
  <div>
    <TextInput
        dark
        error="Please enter a valid email address"
        label="Email Address"
        placeholder="Enter email address"
        type="email"
    />
  </div>
)

export default TextInputDarkError
Custom


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

const TextInputCustom = () => {
  return (
    <div>
      <TextInput
          label="Custom Label"
      >
        <input
            name="custom-name"
            placeholder="custom-placeholder"
            type="text"
        />
      </TextInput>
    </div>
  )
}

export default TextInputCustom

Textarea

Default


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

const TextareaDefault = () => {
  return (
    <div>
      <Textarea
          label="Label"
          rows={4}
      />

      <br />

      <Textarea
          label="Label"
          placeholder="Placeholder text"
      />

      <br />

      <Textarea
          label="Label"
          name="comment"
          placeholder="Placeholder text"
          value="Default value text"
      />

    </div>
  )
}

export default TextareaDefault
Custom Textarea Input


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

const TextareaCustom = () => {
  return (
    <div>
      <Textarea label="Label">
        <textarea
            className="my_custom_class"
            name="custom_textarea"
            rows={4}
        >
          {'Content goes here.'}
        </textarea>
      </Textarea>
    </div>
  )
}

export default TextareaCustom
Dark


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

const TextareaDark = () => {
  return (
    <div>
      <Textarea
          dark
          label="Label"
          rows={4}
      />

      <br />

      <Textarea
          dark
          label="Label"
          placeholder="Placeholder text"
      />

      <br />

      <Textarea
          dark
          label="Label"
          name="comment"
          placeholder="Placeholder text"
          value="Default value text"
      />

    </div>
  )
}

export default TextareaDark
Textarea w/ Error


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

const TextareaError = () => {
  return (
    <div>
      <Textarea
          error="This field has an error!"
          label="Label"
          name="comment"
          placeholder="Placeholder text"
          value="Default value text"
      />

    </div>
  )
}

export default TextareaError
Textarea w/ Error


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

const TextareaDarkError = () => {
  return (
    <div>
      <Textarea
          dark
          error="This field has an error!"
          label="Label"
          name="comment"
          placeholder="Placeholder text"
          value="Default value text"
      />

    </div>
  )
}

export default TextareaDarkError

Time

Default


Close
import React from 'react'

const TimeDefault = () => {
  return (
    <h1>{'Coming Soon...'}</h1>
  )
}

export default TimeDefault

Timestamp

Default


Close
import React from 'react'

const TimestampDefault = () => {
  return (
    <h1>{'Coming Soon...'}</h1>
  )
}

export default TimestampDefault

Title

Light UI


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

const 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 '../../'

const 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'

const TitleCountDefault = () => {
  return (
    <h1>{'Coming Soon...'}</h1>
  )
}

export default TitleCountDefault

Title Detail

Default


Close
import React from 'react'

const TitleDetailDefault = () => {
  return (
    <h1>{'Coming Soon...'}</h1>
  )
}

export default TitleDetailDefault

Toggle

Default


Close
// @flow

import React, { useState } from 'react'
import { Toggle } from '../../'

const Example = () => {
  const [toggle1, setToggle1] = useState(false)
  const [toggle2, setToggle2] = useState(false)

  return (
    <>
      <Toggle
          checked={toggle1}
          name="toggle1"
          onChange={(event) => setToggle1(event.target.value)}
          onCheck={(event) => alert(`${event.target.name} checked!`)}
          onUncheck={(event) => alert(`${event.target.name} unchecked!`)}
      />

      <br />

      <Toggle
          checked={toggle2}
          name="toggle2"
          onChange={(event) => setToggle2(event.target.value)}
          onCheck={(event) => alert(`${event.target.name} checked!`)}
          onUncheck={(event) => alert(`${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 '../../'

const UserDefault = () => {
  return (
    <div className="pb--doc-demo-row">

      <div>
        <User
            align="center"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Anna Black"
            orientation="vertical"
            size="lg"
            title="Remodeling Consultant"
        />
      </div>

      <div>
        <User
            align="left"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Anna Black"
            orientation="horizontal"
            title="Remodeling Consultant"
        />
      </div>

      <div>
        <User
            align="left"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Anna Black"
            orientation="horizontal"
        />

        <br />

        <User
            align="left"
            avatar
            name="Anna Black"
            orientation="horizontal"
        />
      </div>

    </div>
  )
}

export default UserDefault
With Territory


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

const UserWithTerritory = () => {
  return (
    <div className="pb--doc-demo-row">

      <div>
        <User
            align="center"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Anna Black"
            orientation="vertical"
            size="lg"
            territory="PHL"
            title="Remodeling Consultant"
        />
      </div>

      <div>
        <User
            align="left"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Anna Black"
            orientation="horizontal"
            territory="PHL"
            title="Remodeling Consultant"
        />
      </div>

      <div>
        <User
            align="center"
            name="Anna Black"
            orientation="horizontal"
            size="sm"
            territory="PHL"
            title="Remodeling Consultant"
        />

        <br />

        <User
            align="left"
            name="Anna Black"
            orientation="horizontal"
            size="lg"
            territory="PHL"
            title="Remodeling Consultant"
        />
      </div>

    </div>
  )
}

export default UserWithTerritory
Text Only


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

const UserTextOnly = () => {
  return (
    <div className="pb--doc-demo-row">
      <User
          align="center"
          name="Anna Black"
          orientation="horizontal"
          size="lg"
          title="Remodeling Consultant"
      />
      <User
          align="left"
          name="Anna Black"
          orientation="horizontal"
          title="Remodeling Consultant"
      />
    </div>
  )
}

export default UserTextOnly
Horizontal Size


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

const UserDefault = () => {
  return (
    <div className="pb--doc-demo-row">
      <User
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          size="sm"
          title="Remodeling Consultant"
      />

      <User
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          size="md"
          title="Remodeling Consultant"
      />

      <User
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          size="lg"
          title="Remodeling Consultant"
      />
    </div>
  )
}

export default UserDefault
Vertical Size


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

const UserVerticalSize = () => {
  return (
    <div>
      <User
          align="center"
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          orientation="vertical"
          size="sm"
          title="Remodeling Consultant"
      />
      <br />
      <br />
      <User
          align="center"
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          orientation="vertical"
          size="md"
          title="Remodeling Consultant"
      />
      <br />
      <br />
      <User
          align="center"
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          orientation="vertical"
          size="lg"
          title="Remodeling Consultant"
      />
    </div>
  )
}

export default UserVerticalSize

User Badge

Default


Close
import React from 'react'

const UserBadgeDefault = () => {
  return (
    <h1>{'Coming Soon...'}</h1>
  )
}

export default UserBadgeDefault