Sha256: 6fd0da1bf33a6989112bd90c4c6fc3aab48d672def12b020cbfc6b09ce0693c0

Contents?: true

Size: 1.29 KB

Versions: 26

Compression:

Stored size: 1.29 KB

Contents

/* @flow */

import React from 'react'
import classnames from 'classnames'

import { buildCss } from '../utilities/props'

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 = ({
  className,
  dark = false,
  endDate,
  startDate,
}: DateRangeStackedProps) => {
  const css = classnames(className, buildCss('pb_date_range_stacked'))

  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

26 entries across 26 versions & 1 rubygems

Version Path
playbook_ui-4.17.0.pre.alpha1 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.16.0 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.15.0 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.14.0 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.15.1.alpha1 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.13.1 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.13.0 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.12.0 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.11.0 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.11.0.pre.alpha3 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.11.0.pre.alpha.pre.2 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.10.0 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.10.0.pre.alpha1 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.9.0.pre.alpha1 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.9.0 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.8.2 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.8.1 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.7.1 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.7.0 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
playbook_ui-4.6.1 app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx