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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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