RubyGems - playbook_ui - Versions diffs - 11.4.0.pre.alpha.rubytheme2 → 11.5.0.pre.alpha.datepicker1 - Mend

playbook_ui 11.4.0.pre.alpha.rubytheme2 → 11.5.0.pre.alpha.datepicker1

Files changed (92) hide show

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx DELETED Viewed

@@ -1,155 +0,0 @@
-/* @flow */
-import React from 'react'
-import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps'
-import { buildCss } from '../utilities/props'
-import DateTime from '../pb_kit/dateTime'
-import Body from '../pb_body/_body'
-import Caption from '../pb_caption/_caption'
-import Icon from '../pb_icon/_icon'
-type DateRangeInlineProps = {
-  className?: string,
-  id?: string,
-  data?: string,
-  align?: "left" | "center" | "vertical",
-  size?: "sm" | "xs",
-  dark?: boolean,
-  icon?: boolean,
-  startDate?: date,
-  endDate?: date
-}
-const dateTimestamp = (dateValue, includeYear) => {
-  const date = new DateTime({ value: dateValue })
-  if (includeYear) {
-    return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`
-  } else {
-    return `${date.toMonth()} ${date.toDay()}`
-  }
-}
-const dateTimeIso = (dateValue) => {
-  const date = new DateTime({ value: dateValue })
-  return date.toIso()
-}
-const DateRangeInline = (props: DateRangeInlineProps) => {
-  const {
-    icon = false,
-    dark = false,
-    size = 'sm',
-    align = 'left',
-    startDate,
-    endDate,
-    className,
-  } = props
-  const iconContent = () => {
-    return (
-      <If condition={icon}>
-        <Body
-            color="light"
-            key={Math.random()}
-            tag="span"
-        >
-          <Icon
-              className="pb_date_range_inline_icon"
-              dark={dark}
-              fixedWidth
-              icon="calendar-alt"
-              size={size}
-              tag="span"
-          />
-        </Body>
-      </If>
-    )
-  }
-  const dateInCurrentYear = () => {
-    const currentDate = new Date()
-    return startDate.getFullYear() == endDate.getFullYear() && startDate.getFullYear() == currentDate.getFullYear()
-  }
-  const dateRangeClasses =  buildCss('pb_date_range_inline_kit', align)
-  const renderTime = (date) => {
-    return (
-      <time dateTime={dateTimeIso(date)}>
-        <Choose>
-          <When condition={dateInCurrentYear()}>
-            {` ${dateTimestamp(date, false)} `}
-          </When>
-          <Otherwise>
-            {` ${dateTimestamp(date, true)} `}
-          </Otherwise>
-        </Choose>
-      </time>
-    )
-  }
-  return (
-    <div className={classnames(dateRangeClasses, globalProps(props), className)}>
-      <div className="pb_date_range_inline_wrapper">
-        <If condition={size == 'xs'}>
-          {iconContent()}
-          <Caption
-              dark={dark}
-              tag="span"
-          >
-            {renderTime(startDate)}
-          </Caption>
-          <Caption
-              dark={dark}
-              tag="span"
-          >
-            <Icon
-                className="pb_date_range_inline_arrow"
-                fixedWidth
-                icon="long-arrow-right"
-            />
-          </Caption>
-          <Caption
-              dark={dark}
-              tag="span"
-          >
-            {renderTime(endDate)}
-          </Caption>
-        </If>
-        <If condition={size == 'sm'}>
-          {iconContent()}
-          <Body
-              dark={dark}
-              tag="span"
-          >
-            {renderTime(startDate)}
-          </Body>
-          <Body
-              color="light"
-              dark={dark}
-              tag="span"
-          >
-            <Icon
-                className="pb_date_range_inline_arrow"
-                dark={dark}
-                fixedWidth
-                icon="long-arrow-right"
-            />
-          </Body>
-          <Body
-              dark={dark}
-              tag="span"
-          >
-            {renderTime(endDate)}
-          </Body>
-        </If>
-      </div>
-    </div>
-  )
-}
-export default DateRangeInline

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx DELETED Viewed

@@ -1,127 +0,0 @@
-/* @flow */
-import React from 'react'
-import classnames from 'classnames'
-import { joinPresent, titleize } from '../utilities/text'
-import { globalProps } from '../utilities/globalProps'
-import Body from '../pb_body/_body'
-import Hashtag from '../pb_hashtag/_hashtag'
-import Title from '../pb_title/_title'
-type HomeAddressStreetProps = {
-  address: string,
-  addressCont: string,
-  city: string,
-  className?: string,
-  dark?: boolean,
-  emphasis: "street" | "city",
-  homeId: number,
-  houseStyle: string,
-  homeUrl: string,
-  newWindow: Boolean,
-  state: string,
-  zipcode: string,
-  territory: string,
-}
-const HomeAddressStreet = (props: HomeAddressStreetProps) => {
-  const {
-    address,
-    addressCont,
-    city,
-    className,
-    dark = false,
-    emphasis = 'street',
-    homeId,
-    homeUrl,
-    newWindow,
-    houseStyle,
-    state,
-    zipcode,
-    territory,
-  } = props
-  const classes = (className, dark) =>
-    classnames(
-      {
-        'pb_home_address_street': !dark,
-        'pb_home_address_street_dark': dark,
-      },
-      globalProps(props),
-      className
-    )
-  return (
-    <div className={classes(className, dark)}>
-      {
-        <Choose>
-          <When condition={emphasis == 'street'}>
-            <div>
-              <Title
-                  className="pb_home_address_street_address"
-                  dark={dark}
-                  size={4}
-              >
-                {joinPresent([titleize(address), houseStyle], ' · ')}
-              </Title>
-              <Title
-                  className="pb_home_address_street_address"
-                  dark={dark}
-                  size={4}
-              >
-                {titleize(addressCont)}
-              </Title>
-              <Body color="light">
-                {`${titleize(city)}, ${state} ${zipcode}`}
-              </Body>
-            </div>
-          </When>
-          <When condition={emphasis == 'city'}>
-            <div>
-              <Body color="light">
-                {joinPresent([titleize(address), houseStyle], ' · ')}
-              </Body>
-              <Body color="light">{titleize(addressCont)}</Body>
-              <div>
-                <Title
-                    className="pb_home_address_street_address"
-                    dark={dark}
-                    size={4}
-                    tag="span"
-                >
-                  {`${titleize(city)}, ${state}`}
-                </Title>
-                <Body
-                    color="light"
-                    tag="span"
-                >
-                  {` ${zipcode}`}
-                </Body>
-              </div>
-            </div>
-          </When>
-        </Choose>
-      }
-      <If condition={homeId}>
-        <Hashtag
-            classname="home-hashtag"
-            dark={dark}
-            newWindow={newWindow}
-            text={homeId}
-            type="home"
-            url={homeUrl || '#'}
-        />
-      </If>
-      <Body
-          color="light"
-          tag="span"
-      >
-        <small>{territory}</small>
-      </Body>
-    </div>
-  )
-}
-export default HomeAddressStreet

data/app/pb_kits/playbook/pb_label_value/_label_value.jsx DELETED Viewed

@@ -1,155 +0,0 @@
-/* @flow */
-import React from 'react'
-import classnames from 'classnames'
-import DateTime from '../pb_kit/dateTime'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-import Body from '../pb_body/_body'
-import Caption from '../pb_caption/_caption'
-import Flex from '../pb_flex/_flex'
-import Icon from '../pb_icon/_icon'
-import Title from '../pb_title/_title'
-type LabelValueProps = {
-  active?: boolean,
-  aria?: object,
-  className?: string,
-  dark?: boolean,
-  data?: object,
-  date?: date,
-  id?: string,
-  label: string,
-  value?: string,
-  variant?: "default" | "details",
-  icon?: string,
-  description?: string,
-  title?: string,
-}
-const dateString = (value: DateTime) => {
-  const month = value.toMonthNum()
-  const day = value.toDay()
-  return ` · ${month}/${day}`
-}
-const LabelValue = (props: LabelValueProps) => {
-  const {
-    active = false,
-    aria = {},
-    className,
-    dark = false,
-    data = {},
-    date,
-    description,
-    icon,
-    id,
-    label,
-    title,
-    value,
-    variant = 'default',
-  } = props
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const formattedDate = new DateTime({ value: date })
-  const variantClass = variant === 'details' ? 'details' : ''
-  const classes = classnames(buildCss('pb_label_value_kit', variantClass), globalProps(props), className)
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        description={description}
-        icon={icon}
-        id={id}
-        title={title}
-    >
-      <Caption
-          dark={dark}
-          text={label}
-      />
-      <If condition={variant === 'details'}>
-        <Flex
-            inline
-            vertical="center"
-        >
-          <If condition={icon}>
-            <Body
-                color="light"
-                dark={dark}
-                marginRight="xs"
-            >
-              <Icon
-                  dark={dark}
-                  fixedWidth
-                  icon={icon}
-              />
-            </Body>
-          </If>
-          <If condition={description}>
-            <Body
-                color="light"
-                dark={dark}
-                marginRight="xs"
-                text={description}
-            />
-          </If>
-          <Choose>
-            <When condition={active === true}>
-              <Flex
-                  inline
-                  vertical="center"
-              >
-                <If condition={title}>
-                  <Title
-                      dark={dark}
-                      size={4}
-                      text={title}
-                      variant="link"
-                  />
-                </If>
-                <If condition={date}>
-                  <Title
-                      dark={dark}
-                      marginLeft="xs"
-                      size={4}
-                      text={' ' + dateString(formattedDate)}
-                      variant="link"
-                  />
-                </If>
-              </Flex>
-            </When>
-            <Otherwise>
-              <If condition={title}>
-                <Title
-                    dark={dark}
-                    size={4}
-                    text={title}
-                />
-              </If>
-              <If condition={date}>
-                <Title
-                    dark={dark}
-                    marginLeft="xs"
-                    size={4}
-                    text={' ' + dateString(formattedDate)}
-                />
-              </If>
-            </Otherwise>
-          </Choose>
-        </Flex>
-        <Else />
-        <Body
-            dark={dark}
-            text={value}
-        />
-      </If>
-    </div>
-  )
-}
-export default LabelValue