Time

This kit consist of large display and table display format. It includes and icon, and a time zone.

Summary

Default

Use this anywhere needed to display a certain timestamp

import React from 'react'
import Time from 'playbook-ui'

const TimeDefault = (props) => {
  return (
    <div>
      <Time
          date={new Date().getTime()}
          showTimezone={false}
      />
      <br />
      <Time
          date={new Date()}
          timeZone="America/New_York"
      />
      <br />
      <Time
          date={new Date().getTime()}
          showIcon
          showTimezone={false}
      />
      <br />
      <Time
          date={new Date()}
          showIcon
          timeZone="America/New_York"
      />
      <br />
      <br />
      <Time
          date={new Date()}
          showTimezone={false}
          size="md"
      />
      <br />
      <Time
          date={new Date()}
          size="md"
          timeZone="America/New_York"
      />
      <br />
      <Time
          date={new Date()}
          showIcon
          showTimezone={false}
          size="md"
      />
      <br />
      <Time
          date={new Date()}
          showIcon
          size="md"
          timeZone="America/New_York"
      />
    </div>
  )
}

export default TimeDefault

Sizes

import React, { Fragment } from 'react'
import Time from 'playbook-ui'

const TimeSizes = (props) => {
  return (
    <Fragment>
      <Time
          date={new Date()}
      />
      <br />
      <Time
          date={new Date()}
          size="md"
          timeZone="America/New_York"
      />
    </Fragment>
  )
}

export default TimeSizes

Timestamp Values

import React from 'react'
import Time from 'playbook-ui'

const TimeStamp = (props) => {
  return (
    <div>
      <Time
          date={new Date()}
          size="sm"
      />

      <br />

      <Time
          date={new Date().getTime()}
          size="sm"
      />
    </div>
  )
}

export default TimeStamp

Handling Timezones

Simply enter the timezone you would like to use and it will appear.

The list of supported timezones is exhaustive and we're most likely to only use timezones from the Americas so we've highlighted those in the examples.

However, if you need to support another timezone you should be able to Google a specific list, otherwise you can follow the string pattern and try entering a continent and a city.

Remember, this is just labeling the timezone, please verify the actual time for a specified timezone is rendering properly.

Format: <Continent>/<Large_City_Name>

import React from 'react'
import Time from 'playbook-ui'

const TimeTimezone = (props) => {
  const zones = {
    east: 'America/New_York',
    central: 'America/Chicago',
    mountain: 'America/Denver',
    west: 'America/Los_Angeles',
    asia: 'Asia/Tokyo',
  }
  return (
    <div>
      <h4>{'East Coast'}</h4>
      <Time
          date={new Date()}
          size="md"
          timeZone={zones.east}
      />

      <br />

      <h4>{'Central'}</h4>
      <Time
          date={new Date()}
          timeZone={zones.central}
      />

      <br />

      <h4>{'Mountain'}</h4>
      <Time
          date={new Date()}
          timeZone={zones.mountain}
      />

      <br />

      <h4>{'West Coast'}</h4>
      <Time
          date={new Date()}
          timeZone={zones.west}
      />

      <br />

      <h4>{'Tokyo, Japan'}</h4>
      <Time
          date={new Date()}
          timeZone={zones.asia}
      />

    </div>
  )
}

export default TimeTimezone

Alignment

import React from 'react'
import Time from 'playbook-ui'

const TimeAlign = (props) => {
  return (
    <div>
      <Time
          date={new Date()}
          size="md"
      />
      <br />
      <Time
          align="center"
          date={new Date()}
          size="md"
      />
      <br />
      <Time
          align="right"
          date={new Date()}
          size="md"
      />
    </div>
  )
}

export default TimeAlign

Unstyled

For alternative typography styles, you can pass a boolean prop called unstyled to the Time kit and wrap it in any of our typography kits (Title, Body, Caption, etc.). This will allow the Time kit to inherit any of our typography styles.

import React from 'react'
import Time from 'playbook-ui'
import Caption from 'playbook-ui'
import Title from 'playbook-ui'

const TimeUnstyled = (props) => {
  return (
    <>
      <Caption size="xs"
          text="Basic unstyled example"
      />
      <Time
          date={new Date()}
          showIcon
          showTimezone
          timeZone="America/New_York"
          unstyled
      />

      <br />

      <Caption size="xs"
          text="Example with wrapping typography kit"
      />
      <Title size={1}>
        <Time
            date={new Date()}
            showIcon
            showTimezone
            timeZone="America/New_York"
            unstyled
        />
      </Title>

      <br />

      <Caption size="xs"
          text="Example with icon + subcaption"
      />
      <Caption size="xs">
        <Time
            date={new Date()}
            showIcon
            showTimezone
            timeZone="America/New_York"
            unstyled
        />
      </Caption>

      <br />
    </>
  )
}

export default TimeUnstyled

Things To Avoid

Try to not use this as a small time stamp to display a status update.

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat