RubyGems - playbook_ui - Versions diffs - 6.0.1 → 6.1.0.pre.alpha1 - Mend

playbook_ui 6.0.1 → 6.1.0.pre.alpha1

Files changed (205) hide show

data/app/pb_kits/playbook/pb_hashtag/_hashtag.jsx CHANGED

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 import { Badge } from '../'
 import { buildCss } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type HashtagProps = {
   className?: String,
@@ -32,7 +32,7 @@ const Hashtag = (props: HashtagProps) => {
         className={classnames(
         className,
         buildCss('pb_hashtag_kit', { dark: dark }),
-        spacing(props)
+        globalProps(props)
       )}
     >
       <a href={url}>

data/app/pb_kits/playbook/pb_highlight/_highlight.jsx CHANGED

@@ -3,7 +3,7 @@
 import Highlighter from 'react-highlight-words'
 import React from 'react'
 import classnames from 'classnames'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type HighlightProps = {
   className?: String,
@@ -27,7 +27,7 @@ const Highlight = (props: HighlightProps) => {
     <Highlighter
         autoEscape
         data={data}
-        highlightClassName={classnames(className, spacing(props))}
+        highlightClassName={classnames(className, globalProps(props))}
         highlightTag="span"
         id={id}
         searchWords={highlightedText}

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx CHANGED

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 import { joinPresent, titleize } from '../utilities/text'
 import { Body, Hashtag, Title } from '../'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type HomeAddressStreetProps = {
   address: String,
@@ -45,7 +45,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
         'pb_home_address_street': !dark,
         'pb_home_address_street_dark': dark,
       },
-      spacing(props)
+      globalProps(props)
     )
   return (
     <div className={classes(className, dark)}>

data/app/pb_kits/playbook/pb_icon/_icon.jsx CHANGED

@@ -2,7 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type IconProps = {
   aria?: Object,
@@ -72,7 +72,7 @@ const Icon = (props: IconProps) => {
       [`fa-pull-${pull}`]: pull,
       [`fa-rotate-${rotation}`]: rotation,
     },
-    spacing(props)
+    globalProps(props)
   )
   return (

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx CHANGED

@@ -6,7 +6,7 @@ import classnames from 'classnames'
 import { Icon } from '../'
 import { buildCss } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type IconCircleProps = {
   className?: string,
@@ -27,7 +27,7 @@ const IconCircle = (props: IconCircleProps) => {
   const css = buildCss('pb_icon_circle_kit', size, variant)
   return (
-    <div className={classnames(className, css, spacing(props))}>
+    <div className={classnames(className, css, globalProps(props))}>
       <Icon icon={icon} />
     </div>
   )

data/app/pb_kits/playbook/pb_icon_value/_icon_value.jsx CHANGED

@@ -6,7 +6,7 @@ import { Body, Icon } from '../'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type IconValueProps = {
   align?: "left" | "center" | "right",
@@ -36,7 +36,7 @@ const IconValue = (props: IconValueProps) => {
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(className, pbCss, spacing(props))}
+        className={classnames(className, pbCss, globalProps(props))}
         id={id}
     >
       <Body color="light">

data/app/pb_kits/playbook/pb_image/_image.jsx CHANGED

@@ -2,8 +2,8 @@
 import React from 'react'
 import classnames from 'classnames'
+import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
 type ImageProps = {
   alt?: String,
@@ -25,7 +25,7 @@ const Image = (props: ImageProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
-  const classes = classnames(buildCss('pb_image lazyload blur_up'), className, spacing(props))
+  const classes = classnames(buildCss('pb_image lazyload blur_up'), className, globalProps(props))
   const dataProps = buildDataProps(data)
   return (

data/app/pb_kits/playbook/pb_kit/dateTime.js CHANGED

@@ -74,7 +74,11 @@ export default class DateTime {
   }
   toTime() {
-    return this.value.strftime('%I:%M')
+    const time = this.value.strftime('%I:%M')
+    // strftime adds a leading 0 on single hour times. ie 08:31.
+    // this removes that 0 to match the rails kit.
+    return time.charAt() === '0' ? time.slice(1) : time
   }
   toTimezone() {

data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx CHANGED

@@ -2,7 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
@@ -30,7 +30,7 @@ const LabelPill = (props: LabelPillProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const css = classnames(['pb_label_pill_kit', className], spacing(props))
+  const css = classnames(['pb_label_pill_kit', className], globalProps(props))
   return (
     <div

data/app/pb_kits/playbook/pb_label_value/_label_value.jsx CHANGED

@@ -4,8 +4,8 @@ import React from 'react'
 import classnames from 'classnames'
 import DateTime from '../pb_kit/dateTime.js'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
 import { Body, Caption, Flex, Icon, Title } from '../'
-import { spacing } from '../utilities/spacing.js'
 type LabelValueProps = {
   aria?: object,
@@ -53,7 +53,7 @@ const LabelValue = (props: LabelValueProps) => {
   const themeStyle = dark === true ? '_dark' : ''
   const css = classnames(
     ['pb_label_value_kit' + themeStyle, className],
-    spacing(props)
+    globalProps(props)
   )
   return (

data/app/pb_kits/playbook/pb_layout/_layout.jsx CHANGED

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type LayoutPropTypes = {
   aria?: object,
@@ -46,7 +46,7 @@ type LayoutFooterProps = {
 const Side = (props: LayoutSideProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_sidebar', className, spacing(props))}>
+    <div className={classnames('layout_sidebar', className, globalProps(props))}>
       {children}
     </div>
   )
@@ -56,7 +56,7 @@ const Side = (props: LayoutSideProps) => {
 const Body = (props: LayoutBodyProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_body', className, spacing(props))}>
+    <div className={classnames('layout_body', className, globalProps(props))}>
       {children}
     </div>
   )
@@ -66,7 +66,7 @@ const Body = (props: LayoutBodyProps) => {
 const Header = (props: LayoutHeaderProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_header', className, spacing(props))}>
+    <div className={classnames('layout_header', className, globalProps(props))}>
       {children}
     </div>
   )
@@ -76,7 +76,7 @@ const Header = (props: LayoutHeaderProps) => {
 const Footer = (props: LayoutFooterProps) => {
   const { children, className } = props
   return (
-    <div className={classnames('layout_footer', className, spacing(props))}>
+    <div className={classnames('layout_footer', className, globalProps(props))}>
       {children}
     </div>
   )
@@ -148,7 +148,7 @@ const Layout = (props: LayoutPropTypes) => {
         layoutCss,
         layoutCollapseCss,
         className,
-        spacing(props)
+        globalProps(props)
       )}
     >
       {subComponentTags('Side')}

data/app/pb_kits/playbook/pb_legend/_legend.jsx CHANGED

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 import { Body, Title } from '../'
@@ -41,7 +41,7 @@ const Legend = (props: LegendProps) => {
   const darkClass = dark ? 'dark' : 'light'
   const bodyCSS = classnames(
     buildCss('pb_legend_kit', color, darkClass), className,
-    spacing(props)
+    globalProps(props)
   )
   return (

data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx CHANGED

@@ -2,7 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 import { pbChart } from '../'
 type LineGraphProps = {
@@ -77,7 +77,7 @@ export default class LineGraph extends React.Component<LineGraphProps> {
     return (
       <div
-          className={classnames(className, spacing(this.props))}
+          className={classnames(className, globalProps(this.props))}
           id={id}
       />
     )

data/app/pb_kits/playbook/pb_list/_list.jsx CHANGED

@@ -3,7 +3,7 @@
 import React, { type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type ListProps = {
   aria?: object,
@@ -53,7 +53,7 @@ const List = (props: ListProps) => {
       ordered: ordered,
       xpadding: xpadding,
     }), className,
-    spacing(props)
+    globalProps(props)
   )
   return (

data/app/pb_kits/playbook/pb_list/_list_item.jsx CHANGED

@@ -3,7 +3,7 @@
 import React, { type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type ListItemProps = {
   aria?: object,
@@ -28,7 +28,7 @@ const ListItem = (props: ListItemProps) => {
   const dataProps = buildDataProps(data)
   const classes = classnames(
     buildCss('pb_item_kit'), className,
-    spacing(props)
+    globalProps(props)
   )
   return (

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx CHANGED

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { Body, Icon } from '../'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type LoadingInlineProps = {
   align?: "left" | "center" | "right",
@@ -18,7 +18,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
   const { align = 'left' } = props
   return (
     <div
-        className={classnames(`pb_loading_inline_kit_${align}`, spacing(props))}
+        className={classnames(`pb_loading_inline_kit_${align}`, globalProps(props))}
     >
       <Body color="light">
         <Icon

data/app/pb_kits/playbook/pb_logistic/_logistic.jsx ADDED

@@ -0,0 +1,111 @@
+/* @flow */
+import React from 'react'
+import classnames from 'classnames'
+import DateTime from '../pb_kit/dateTime.js'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { Body, Caption, Icon, Title } from '../'
+import { globalProps } from '../utilities/globalProps.js'
+const dateString = (value: DateTime) => {
+  const month = value.toMonthNum()
+  const day = value.toDay()
+  return ` · ${month}/${day}`
+}
+type LogisticProps = {
+  aria?: object,
+  className?: String,
+  dark?: Boolean,
+  data?: object,
+  date: String,
+  id?: String,
+  link?: String,
+  projectName?: String,
+  projectNumber?: Number,
+}
+const Logistic = (props: LogisticProps) => {
+  const { aria = {},
+    className,
+    dark = false,
+    data = {},
+    date,
+    id,
+    link,
+    projectName,
+    projectNumber } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const formattedDate = new DateTime({ value: date })
+  const classes = classnames(buildCss('pb_logistic_kit', { dark: dark }), className, globalProps(props))
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <Body color="light">
+        <Caption text="Project" />
+        <Icon
+            fixedWidth
+            icon="home"
+        />
+        {` ${projectNumber}`}
+        <Choose>
+          <When condition={link}>
+            <a
+                className="pb_logistic_kit_links"
+                href={link}
+            >
+              <Choose>
+                <When condition={date}>
+                  <Title
+                      size={4}
+                      tag="span"
+                      text={' ' + projectName + dateString(formattedDate)}
+                  />
+                </When>
+                <Otherwise>
+                  <Title
+                      size={4}
+                      tag="span"
+                      text={' ' + projectName}
+                  />
+                </Otherwise>
+              </Choose>
+            </a>
+          </When>
+          <Otherwise>
+            <Choose>
+              <When condition={date}>
+                <Title
+                    dark={dark}
+                    size={4}
+                    tag="span"
+                    text={' ' + projectName + dateString(formattedDate)}
+                />
+              </When>
+              <Otherwise>
+                <Title
+                    dark={dark}
+                    size={4}
+                    tag="span"
+                    text={' ' + projectName}
+                />
+              </Otherwise>
+            </Choose>
+          </Otherwise>
+        </Choose>
+      </Body>
+    </div>
+  )
+}
+export default Logistic

data/app/pb_kits/playbook/pb_message/_message.jsx CHANGED

@@ -4,7 +4,7 @@ import React from 'react'
 import { Avatar, Body, Caption } from '../'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type MessageProps = {
   aria: object,
@@ -39,7 +39,7 @@ const Message = (props: MessageProps) => {
     ? 'pb_message_kit_avatar'
     : 'pb_message_kit'
-  const classes = classnames(buildCss(baseClassName), className, spacing(props))
+  const classes = classnames(buildCss(baseClassName), className, globalProps(props))
   return (
     <div