Sha256: e38f4a1439744c403043de9b04c47fdd38025316274537133074133f325ebd87

Contents?: true

Size: 1.39 KB

Versions: 155

Compression:

Stored size: 1.39 KB

Contents

/* @flow */

import React from 'react'
import classnames from 'classnames'
import { buildCss } from '../utilities/props'
import { globalProps } from '../utilities/globalProps.js'

import { Body, DateYearStacked, Flex, FlexItem, Icon } from '../'

type DateRangeStackedProps = {
  className?: string | array<string>,
  data?: string,
  dark?: boolean,
  endDate: string,
  id?: string,
  startDate: string,
}

const DateRangeStacked = (props: DateRangeStackedProps) => {
  const { className, dark = false, endDate, startDate } = props
  const css = classnames(
    buildCss('pb_date_range_stacked'),
    globalProps(props),
    className
  )

  return (
    <div className={css}>
      <Flex vertical="center">
        <FlexItem>
          <DateYearStacked
              align="right"
              dark={dark}
              date={startDate}
          />
        </FlexItem>
        <FlexItem>
          <div>
            <Body
                color="light"
                tag="span"
            >
              <Icon
                  className="pb_date_range_stacked_arrow"
                  fixedWidth
                  icon="long-arrow-right"
              />
            </Body>
          </div>
        </FlexItem>
        <FlexItem>
          <DateYearStacked
              dark={dark}
              date={endDate}
          />
        </FlexItem>
      </Flex>
    </div>
  )
}

export default DateRangeStacked

Version data entries

155 entries across 155 versions & 1 rubygems

Version Path
playbook_ui-8.2.1 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.1.3 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.4.0.alpha.dependencies.2 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.4.0.alpha.dependencies.1 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.2.0.pre.alpha4 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.2.0.pre.alpha3 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.2.0 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.1.2 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.1.0.pre.alpha1 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.0.3 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.2.0.pre.alpha2 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.1.1 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.0.2 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.2.0.pre.alpha1 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.1.0 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.0.1 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.0.0 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.0.0.pre.alpha5 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.0.0.pre.alpha4 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-8.0.0.pre.alpha1 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx