playbook_ui 4.17.0.pre.alpha1 → 4.17.0

data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx

@@ -4,7 +4,7 @@ import { Table, TableRow } from '../../'
 const TableSideHighlight = () => {
   return (
     <div>
-      <Table size="md">
+      <Table size="sm">
         <thead>
           <tr>
             <th>{'Product colors'}</th>
@@ -15,22 +15,22 @@ const TableSideHighlight = () => {
           </tr>
         </thead>
         <tbody>
-          <TableRow sideHighlightColor="windows">
-            <td>{'Windows'}</td>
+          <TableRow sideHighlightColor="solar">
+            <td>{'Solar'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="siding">
-            <td>{'Siding'}</td>
+          <TableRow sideHighlightColor="roofing">
+            <td>{'Roofing'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
-          <TableRow sideHighlightColor="doors">
-            <td>{'Doors'}</td>
+          <TableRow sideHighlightColor="gutters">
+            <td>{'Gutters'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
@@ -48,7 +48,7 @@ const TableSideHighlight = () => {
 
       <br />
 
-      <Table size="md">
+      <Table size="sm">
         <thead>
           <tr>
             <th>{'Status colors'}</th>
@@ -89,6 +89,50 @@ const TableSideHighlight = () => {
           </TableRow>
         </tbody>
       </Table>
+
+      <br />
+
+      <Table size="sm">
+        <thead>
+          <tr>
+            <th>{'Category Colors'}</th>
+            <th>{'Column 2'}</th>
+            <th>{'Column 3'}</th>
+            <th>{'Column 4'}</th>
+            <th>{'Column 5'}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <TableRow sideHighlightColor="category_1">
+            <td>{'Category Color 1'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </TableRow>
+          <TableRow sideHighlightColor="category_2">
+            <td>{'Category Color 2'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </TableRow>
+          <TableRow sideHighlightColor="category_3">
+            <td>{'Category Color 3'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </TableRow>
+          <TableRow sideHighlightColor="none">
+            <td>{'None'}</td>
+            <td>{'Value 2'}</td>
+            <td>{'Value 3'}</td>
+            <td>{'Value 4'}</td>
+            <td>{'Value 5'}</td>
+          </TableRow>
+        </tbody>
+      </Table>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.md

@@ -1 +1,3 @@
-Side highlight can pass status and product colors.
+Side highlight can take product, status, and category colors. To view full list of colors, visit <a href="https://playbook.powerapp.cloud/utilities" target="_blank">token colors</a>.
+
+Note: Only use category colors for categories. Do not mix it with product or status colors.

data/app/pb_kits/playbook/pb_text_input/_text_input.jsx

@@ -1,10 +1,8 @@
 /* @flow */
 import React from 'react'
 import classnames from 'classnames'
-import {
-  Body,
-  Caption,
-} from '../'
+import { Body, Caption } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 import {
   buildAriaProps,
@@ -62,7 +60,7 @@ const TextInput = ({
           dark={dark}
           text={label}
       />
-      <div className="text_input_wrapper">
+      <div className={classnames('text_input_wrapper', spacing(props))}>
         <If condition={children}>
           {children}
           <Else />

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -20,7 +20,7 @@ class TextInputDefault extends React.Component {
     return (
       <div>
         <TextInput
-            aria={{ something: 'hello' }}
+            aria={{ label: 'hello' }}
             data={{ say: 'hi', yell: 'go' }}
             id="unique-id"
             label="First Name"

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -4,6 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { Body, Caption } from '../'
 import type { InputCallback } from '../types.js'
+import { spacing } from '../utilities/spacing.js'
 
 type TextareaProps = {
   className?: String,
@@ -42,7 +43,7 @@ const Textarea = ({
   const resizeClass = ` resize_${resize}`
 
   return (
-    <div className={classnames(textareaClass, className, errorClass, resizeClass)}>
+    <div className={classnames(textareaClass, className, errorClass, resizeClass, spacing(props))}>
       <Caption
           dark={dark}
           text={label}

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx

@@ -4,18 +4,19 @@ import React from 'react'
 import classnames from 'classnames'
 import { Body, Caption, Icon } from '../'
 import DateTime from '../pb_kit/dateTime.js'
+import { spacing } from '../utilities/spacing.js'
 
 type TimeRangeInlineProps = {
   className?: String,
   id?: String,
   data?: String,
-  alignment?: 'left' | 'center' | 'vertical',
-  size?: 'sm' | 'xs',
+  alignment?: "left" | "center" | "vertical",
+  size?: "sm" | "xs",
   dark?: Boolean,
   icon?: Boolean,
   timezone?: Boolean,
   startTime: String,
-  endTime: String
+  endTime: String,
 }
 
 const timezoneString = (dateValue) => {
@@ -33,16 +34,17 @@ const dateTimeIso = (dateValue) => {
   return date.toIso()
 }
 
-const TimeRangeInline = ({
-  className,
-  alignment = 'left',
-  size = 'sm',
-  dark = false,
-  icon = false,
-  timezone = false,
-  startTime,
-  endTime,
-}: TimeRangeInlineProps) => {
+const TimeRangeInline = (props: TimeRangeInlineProps) => {
+  const {
+    className,
+    alignment = 'left',
+    size = 'sm',
+    dark = false,
+    icon = false,
+    timezone = false,
+    startTime,
+    endTime,
+  } = props
   const separator = `${'—'}`
 
   const iconContent = () => {
@@ -61,7 +63,9 @@ const TimeRangeInline = ({
   }
 
   return (
-    <div className={classnames('pb_time_range_inline_kit_' + alignment, className)}>
+    <div
+        className={classnames('pb_time_range_inline_kit_' + alignment, className, spacing(props))}
+    >
       <div className="pb_time_range_inline_wrapper">
         <If condition={size == 'xs'}>
           <Caption
@@ -69,7 +73,11 @@ const TimeRangeInline = ({
               tag="span"
           >
             {iconContent()}
-            <time dateTime={dateTimeIso(startTime)}>{` ${dateTimestamp(startTime)} `}</time>
+            <time dateTime={dateTimeIso(startTime)}>
+              {` ${dateTimestamp(
+              startTime
+            )} `}
+            </time>
           </Caption>
           <Caption
               className="pb_time_range_inline_dash"
@@ -82,7 +90,11 @@ const TimeRangeInline = ({
               dark={dark}
               tag="span"
           >
-            <time dateTime={dateTimeIso(endTime)}>{` ${dateTimestamp(endTime)} `}</time>
+            <time dateTime={dateTimeIso(endTime)}>
+              {` ${dateTimestamp(
+              endTime
+            )} `}
+            </time>
           </Caption>
           <If condition={timezone}>
             <Caption
@@ -100,7 +112,11 @@ const TimeRangeInline = ({
               tag="span"
           >
             {iconContent()}
-            <time dateTime={dateTimeIso(startTime)}>{` ${dateTimestamp(startTime)} `}</time>
+            <time dateTime={dateTimeIso(startTime)}>
+              {` ${dateTimestamp(
+              startTime
+            )} `}
+            </time>
           </Body>
           <Body
               className="pb_time_range_inline_dash"
@@ -113,7 +129,11 @@ const TimeRangeInline = ({
               dark={dark}
               tag="span"
           >
-            <time dateTime={dateTimeIso(endTime)}>{` ${dateTimestamp(endTime)} `}</time>
+            <time dateTime={dateTimeIso(endTime)}>
+              {` ${dateTimestamp(
+              endTime
+            )} `}
+            </time>
           </Body>
           <If condition={timezone}>
             <Body

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx

@@ -6,6 +6,7 @@ import classnames from 'classnames'
 import DateTime from '../pb_kit/dateTime.js'
 import { buildCss } from '../utilities/props'
 import { Body, Caption } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 const Components = {
   body: Body,
@@ -18,19 +19,19 @@ type TimeStackedProps = {
   data?: String,
   date: String,
   id?: String,
-  align?: 'left' | 'center' | 'right',
-  tag?: 'body' | 'caption',
+  align?: "left" | "center" | "right",
+  tag?: "body" | "caption",
 }
 
-const TimeStacked = ({
-  className,
-  dark = false,
-  date,
-  tag = 'body',
-}: TimeStackedProps) => {
-  const classes = classnames(className, buildCss('pb_time_stacked_kit', {
-    'dark': dark,
-  }))
+const TimeStacked = (props: TimeStackedProps) => {
+  const { className, dark = false, date, tag = 'body' } = props
+  const classes = classnames(
+    className,
+    buildCss('pb_time_stacked_kit', {
+      dark: dark,
+    }),
+    spacing(props)
+  )
 
   const tagClasses = classnames(buildCss('pb_time_stacked_kit', tag))
 

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx

@@ -3,14 +3,11 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import {
-  Caption,
-} from '../'
+import { Caption } from '../'
 
-import {
-  buildCss,
-  buildDataProps,
-} from '../utilities/props'
+import { buildCss, buildDataProps } from '../utilities/props'
+
+import { spacing } from '../utilities/spacing.js'
 
 type TimestampProps = {
   id?: String,
@@ -19,19 +16,15 @@ type TimestampProps = {
   text?: String,
 }
 
-const Timestamp = ({
-  id,
-  className,
-  data = {},
-  text,
-}: TimestampProps) => {
+const Timestamp = (props: TimestampProps) => {
+  const { id, className, data = {}, text } = props
   const dataProps = buildDataProps(data)
   const pbCss = buildCss('pb_timestamp_kit')
 
   return (
     <div
         {...dataProps}
-        className={classnames(className, pbCss)}
+        className={classnames(className, pbCss, spacing(props))}
         id={id}
     >
       <Caption

data/app/pb_kits/playbook/pb_title/_title.jsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 type TitleProps = {
   className?: String,
@@ -9,13 +10,10 @@ type TitleProps = {
   dark?: Boolean,
   size?: 1 | 2 | 3 | 4,
   text?: String,
-  tag?: 'h1' | 'h2' | 'h3',
+  tag?: "h1" | "h2" | "h3",
 }
 
-const tagCSS = ({
-  dark = false,
-  size = 3,
-}) => {
+const tagCSS = ({ dark = false, size = 3 }) => {
   let css = ''
 
   css += `_${size}`
@@ -25,18 +23,19 @@ const tagCSS = ({
 }
 
 const Title = (props: TitleProps) => {
-  const {
-    className,
-    children,
-    text,
-    tag = 'h3',
-  } = props
+  const { children, className, tag = 'h3', text } = props
 
   const Tag = `${tag}`
 
   return (
-    <Tag className={classnames(`pb_title_kit${tagCSS(props)}`, className)}>
-      { text || children }
+    <Tag
+        className={classnames(
+        `pb_title_kit${tagCSS(props)}`,
+        className,
+        spacing(props),
+      )}
+    >
+      {text || children}
     </Tag>
   )
 }

data/app/pb_kits/playbook/pb_title/docs/_title_light.html.erb

@@ -2,7 +2,7 @@
 
 <br/>
 
-<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
+<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %> 
 <%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>

data/app/pb_kits/playbook/pb_title_count/_title_count.jsx

@@ -1,39 +1,60 @@
 /* @flow */
+
 import React from 'react'
+import classnames from 'classnames'
+
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+
 import { Body, Title } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 type TitleCountProps = {
+  align: "center" | "left" | "right",
+  aria?: object,
   className?: String,
-  data?: String,
+  count?: Numeric,
+  data?: object,
   id?: String,
   title?: String,
-  count?: Number,
-  size?: String
-}
+  size?: "lg" | "sm",
+};
+
+const TitleCount = (props: TitleCountProps) => {
+  const {
+    align = 'left',
+    aria = {},
+    className,
+    data = {},
+    count,
+    id,
+    title,
+    size = 'sm' } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
 
-const TitleCount = ({
-  className = 'pb_title_count_kit',
-  data,
-  count,
-  id,
-  title,
-  size,
-}: TitleCountProps) => (
-  <div
-      className={className}
-      data={data}
-      id={id}
-  >
-    <Title
-        className="pb_title_count_text"
-        size={size == 'lg' ? 3 : 4}
-        text={title}
-    />
-    <Body
-        color="light"
-        text={`${count}`}
-    />
-  </div>
-)
+  const css = classnames(buildCss('pb_title_count_kit', align, size), className, spacing(props))
+
+  const formatCount = count.toLocaleString()
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+        id={id}
+    >
+      <Title
+          className={title !== undefined ? 'pb_title_count_text' : ''}
+          size={size === 'lg' ? 3 : 4}
+          text={title}
+      />
+
+      <Body color="light">
+        <If condition={count}>{formatCount}</If>
+      </Body>
+
+    </div>
+  )
+}
 
 export default TitleCount