playbook_ui 4.17.0.pre.alpha1 → 5.0.1.pre.alpha1

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_timeline/_item.html.erb

@@ -0,0 +1,28 @@
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+  
+  <div class="pb_timeline_item_left_block">
+    <% if object.date.present? %>
+      <%= pb_rails("date_stacked", props: { 
+        date: object.date, 
+        size: "sm",
+        align: "center"
+      }) %>
+    <% end %>
+  </div>
+
+  <div class="pb_timeline_item_step">
+    <%= pb_rails("icon_circle", props: {
+      icon: object.icon,
+      variant: object.icon_color,
+      size: "xs"
+    }) %> 
+    <div class="pb_timeline_item_connector"></div>
+  </div>
+  <div class="pb_timeline_item_right_block">
+    <%= capture(&object.children) %>
+  </div>
+
+<% end %>

data/app/pb_kits/playbook/pb_timeline/_item.jsx

@@ -0,0 +1,54 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildCss } from '../utilities/props'
+import { DateStacked, IconCircle } from '..'
+
+type ItemProps = {
+  className?: string,
+  children?: Array<React.Node>,
+  date?: Date,
+  icon?: string,
+  iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
+  lineStyle?: 'solid' | 'dotted',
+}
+
+const TimelineItem = ({
+  className,
+  children,
+  date,
+  icon = 'user',
+  iconColor = 'default',
+  lineStyle = 'solid',
+
+}: ItemProps) => {
+  const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
+
+  return (
+    <div className={classnames(timelineItemCss, className)}>
+      <div className="pb_timeline_item_left_block">
+        <If condition={date}>
+          <DateStacked
+              align="center"
+              date={date}
+              size="sm"
+          />
+        </If>
+      </div>
+      <div className="pb_timeline_item_step">
+        <IconCircle
+            icon={icon}
+            size="xs"
+            variant={iconColor}
+        />
+        <div className="pb_timeline_item_connector" />
+      </div>
+      <div className="pb_timeline_item_right_block">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default TimelineItem

data/app/pb_kits/playbook/pb_timeline/_timeline.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+    <%= capture(&object.children) %>
+<% end %>

data/app/pb_kits/playbook/pb_timeline/_timeline.jsx

@@ -0,0 +1,43 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import TimelineItem from './_item.jsx'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+
+type TimelineProps = {
+  aria?: object,
+  children?: Array<React.ReactChild>,
+  className?: String,
+  data?: String,
+  id?: String,
+  orientation?: String,
+  showDate?: Boolean,
+}
+
+const Timeline = ({
+  aria = {},
+  className,
+  children,
+  data = {},
+  orientation = 'horizontal',
+  showDate = false,
+}: TimelineProps) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const dateStyle = showDate === true ? '_with_date' : ''
+  const timelineCss = buildCss('pb_timeline_kit', `_${orientation}`, dateStyle)
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(timelineCss, className)}
+    >
+      {children}
+    </div>
+  )
+}
+
+Timeline.Item = TimelineItem
+
+export default Timeline

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -0,0 +1,271 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/opacity";
+@import "../tokens/typography";
+
+$connector_width: 2px;
+$icon_margin: $space_xs/2;
+$icon_height: 28px;
+$height_from_top: $icon_height/2 - $connector_width/2;
+
+@mixin pb_timeline_line_solid($width, $height, $margin) {
+    width: $width;
+    height: $height;
+    background-color: $border_light;
+    margin: $margin;
+    flex-grow: 1;
+}
+
+@mixin pb_timeline_line_dotted_horizontal($width, $height, $margin) {
+    width: $width;
+    height: $height;
+    background: repeating-linear-gradient(to right, $border_light 0px ,$border_light 2px, transparent 3px, transparent 10px);
+    margin: $margin;
+    flex-grow: 1;
+}
+
+@mixin pb_timeline_line_dotted_vertical($width, $height, $margin) {
+    width: $width;
+    height: $height;
+    background: repeating-linear-gradient(0deg, $border_light 0px ,$border_light 2px, transparent 3px, transparent 10px);
+    margin: $margin;
+    flex-grow: 1;
+}
+
+@mixin flex_wrapper($flex_direction) {
+    display: flex;
+    flex-direction: $flex_direction;
+}
+
+[class^=pb_timeline_kit] {
+    &[class*=_horizontal] {
+        @include flex_wrapper(row);
+        width: 100%;
+        >div {
+            &:last-child {
+                flex-basis: auto !important;
+                [class=pb_timeline_item_step] {
+                    [class=pb_timeline_item_connector] {
+                        opacity: 0;
+                    }
+                }
+                [class=pb_timeline_item_right_block] {
+                    display: block;
+                    width: 100%;
+                    overflow: hidden;
+                    white-space: nowrap;
+                }
+            }
+        }
+        [class*=pb_timeline_item_kit] {
+            &[class*=_solid] {
+                flex-basis: 100%;
+                [class=pb_timeline_item_left_block] {
+                    height: 0px;
+                }
+                [class=pb_timeline_item_step] {
+                    @include flex_wrapper(row);
+                    margin-top: $space_xs;
+                    margin-bottom: $space_xs;
+                    [class=pb_timeline_item_connector] {
+                        @include pb_timeline_line_solid($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                    }
+                }
+            }
+            &[class*=_dotted] {
+                flex-basis: 100%;
+                [class=pb_timeline_item_left_block] {
+                    height: 0;
+                }
+                [class=pb_timeline_item_step] {
+                    @include flex_wrapper(row);
+                    margin-top: $space_xs;
+                    margin-bottom: $space_xs;
+                    [class=pb_timeline_item_connector] {
+                        @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                    }
+                }
+            }
+        }
+        &[class*=_with_date] {
+            @include flex_wrapper(row);
+            width: 100%;
+            >div {
+                &:last-child {
+                    flex-basis: auto !important;
+                    [class=pb_timeline_item_step] {
+                        [class=pb_timeline_item_connector] {
+                            opacity: 0;
+                        }
+                    }
+                    [class=pb_timeline_item_right_block] {
+                        display: block;
+                        width: 100%;
+                        overflow: hidden;
+                        white-space: nowrap;
+                    }
+                }
+            }
+            [class*=pb_timeline_item_kit] {
+                &[class*=_solid] {
+                    flex-basis: 100%;
+                    [class=pb_timeline_item_left_block] {
+                        @include flex_wrapper(column);
+                        height: 55px;
+                        justify-content: flex-end;
+                        [class=pb_date_stacked_kit_center_sm] {
+                            [class=pb_date_stacked_day_month] {
+                                [class=pb_caption_kit_md] {
+                                    text-align: left;
+                                }
+                                [class=pb_title_kit_4] {
+                                    text-align: left;
+                                }
+                            }
+                        }
+                    }
+                    [class=pb_timeline_item_step] {
+                        @include flex_wrapper(row);
+                        margin-top: $space_xs;
+                        margin-bottom: $space_xs;
+                        [class=pb_timeline_item_connector] {
+                            @include pb_timeline_line_solid($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                        }
+                    }
+                }
+                &[class*=_dotted] {
+                    flex-basis: 100%;
+                    [class=pb_timeline_item_left_block] {
+                        height: 55px;
+                        [class=pb_date_stacked_kit_center_sm] {
+                            [class=pb_date_stacked_day_month] {
+                                [class=pb_caption_kit_md] {
+                                    text-align: left;
+                                }
+                                [class=pb_title_kit_4] {
+                                    text-align: left;
+                                }
+                            }
+                        }
+                    }
+                    [class=pb_timeline_item_step] {
+                        @include flex_wrapper(row);
+                        margin-top: $space_xs;
+                        margin-bottom: $space_xs;
+                        [class=pb_timeline_item_connector] {
+                            @include pb_timeline_line_dotted_horizontal($connector_width, $connector_width, $height_from_top $icon_margin 0 $icon_margin );
+                        }
+                    }
+                }
+            } 
+        }
+    }
+    &[class*=_vertical] {
+        @include flex_wrapper(column);
+        align-items: flex-start;
+        align-self: auto;
+        >div:last-child {
+            [class=pb_timeline_item_step] {
+                [class=pb_timeline_item_connector] {
+                    opacity: 0;
+                }
+            }
+        }
+        [class*=pb_timeline_item_kit] {
+            @include flex_wrapper(row);
+            &[class*=_solid] {
+                flex-basis: 100%;
+                [class=pb_timeline_item_step] {
+                    @include flex_wrapper(column);
+                    align-content: flex-start;
+                    margin-right: $space_sm;
+                    margin-left: $space_sm;
+                    [class=pb_timeline_item_connector] {
+                        @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                    }
+                }
+                [class=pb_timeline_item_left_block] {
+                    margin-bottom: $space_lg;
+                    width: 0px;
+                }
+                [class=pb_timeline_item_right_block] {
+                    @include flex_wrapper(column);
+                    margin-bottom: $space_lg;
+                }
+            }
+            &[class*=_dotted] {
+                flex-basis: 100%;
+                [class=pb_timeline_item_step] {
+                    @include flex_wrapper(column);
+                    margin-right: $space_sm;
+                    margin-left: $space_sm;
+                    [class=pb_timeline_item_connector] {
+                        @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                    }
+                }
+                [class=pb_timeline_item_left_block] {
+                    margin-bottom: $space_lg;
+                    width: 0px;
+                }
+                [class=pb_timeline_item_right_block] {
+                    @include flex_wrapper(column);
+                    margin-bottom: $space_lg;
+                }
+            }
+        }
+        &[class*=_with_date] {
+            @include flex_wrapper(column);
+            align-items: flex-start;
+            align-self: auto;
+            >div:last-child {
+                [class=pb_timeline_item_step] {
+                    [class=pb_timeline_item_connector] {
+                        opacity: 0;
+                    }
+                }
+            }
+            [class*=pb_timeline_item_kit] {
+                @include flex_wrapper(row);
+                &[class*=_solid] {
+                    flex-basis: 100%;
+                    [class=pb_timeline_item_step] {
+                        @include flex_wrapper(column);
+                        align-content: flex-start;
+                        margin-right: $space_sm;
+                        margin-left: $space_sm;
+                        [class=pb_timeline_item_connector] {
+                            @include pb_timeline_line_solid($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                        }
+                    }
+                    [class=pb_timeline_item_left_block] {
+                        margin-bottom: $space_lg;
+                        width: $space_lg;
+                    }
+                    [class=pb_timeline_item_right_block] {
+                        @include flex_wrapper(column);
+                        margin-bottom: $space_lg;
+                    }
+                }
+                &[class*=_dotted] {
+                    flex-basis: 100%;
+                    [class=pb_timeline_item_step] {
+                        @include flex_wrapper(column);
+                        margin-right: $space_sm;
+                        margin-left: $space_sm;
+                        [class=pb_timeline_item_connector] {
+                            @include pb_timeline_line_dotted_vertical($connector_width, $connector_width, $icon_margin 0 $icon_margin $height_from_top);
+                        }
+                    }
+                    [class=pb_timeline_item_left_block] {
+                        margin-bottom: $space_lg;
+                        width: $space_lg;
+                    }
+                    [class=pb_timeline_item_right_block] {
+                        @include flex_wrapper(column);
+                        margin-bottom: $space_lg;
+                    }
+                }
+            }
+        }
+    }
+}