playbook_ui 4.15.0 → 4.18.0

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.html.erb

@@ -0,0 +1,15 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+}] %>
+
+<%= pb_rails("line_graph", props: { 
+    id: "line-test-2", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug'],
+    title: 'Line Graph with Legend', 
+    axis_title: 'Number of Employees',
+    legend: true
+}) %>
+

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { LineGraph } from '../..'
+
+const data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}]
+
+const LineGraphLegend = () => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="bar-test-2"
+        legend
+        title="Line Graph with Legend"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        yAxisMin={0}
+    />
+  </div>
+)
+
+export default LineGraphLegend

data/app/pb_kits/playbook/pb_line_graph/docs/example.yml

@@ -2,7 +2,11 @@ examples:
   
   rails:
   - line_graph_default: Default
+  - line_graph_legend: Legend
+  - line_graph_height: Height
   
   
   react:
-  - line_graph_default: Default
+  - line_graph_default: Default
+  - line_graph_legend: Legend
+  - line_graph_height: Height

data/app/pb_kits/playbook/pb_line_graph/docs/index.js

@@ -1 +1,3 @@
 export { default as LineGraphDefault } from './_line_graph_default.jsx'
+export { default as LineGraphLegend } from './_line_graph_legend.jsx'
+export { default as LineGraphHeight } from './_line_graph_height.jsx'

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -19,6 +19,10 @@ module Playbook
                                 default:[]
       prop :y_axis_min, type: Playbook::Props::Numeric
       prop :y_axis_max, type: Playbook::Props::Numeric
+      prop :legend, type: Playbook::Props::Boolean,
+                    default: false
+      prop :height
+
       def chart_type
         gradient ? "area" : "line"
       end
@@ -35,6 +39,8 @@ module Playbook
           xAxisCategories: x_axis_categories,
           yAxisMin: y_axis_min,
           yAxisMax: y_axis_max,
+          legend: legend,
+          height: height,
         }.to_json.html_safe
       end
 

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

@@ -1,40 +1,43 @@
 /* @flow */
 
 import React, { type Node } from 'react'
-
+import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type ListProps = {
   borderless: boolean,
   children: Array<Node> | Node,
   dark: boolean,
-  layout: '' | 'left' | 'right',
+  layout: "" | "left" | "right",
   ordered: boolean,
-  size: '' | 'large',
+  size: "" | "large",
   xpadding: boolean,
 }
 
-const List = ({
-  borderless = false,
-  children,
-  dark = false,
-  layout = '',
-  ordered = false,
-  size = '',
-  xpadding = false,
-}: ListProps) => {
-  const classes = buildCss('pb_list_kit', layout, size, {
-    'dark': dark,
-    'borderless': borderless,
-    'ordered': ordered,
-    'xpadding': xpadding,
-  })
+const List = (props: ListProps) => {
+  const {
+    borderless = false,
+    children,
+    dark = false,
+    layout = '',
+    ordered = false,
+    size = '',
+    xpadding = false,
+  } = props
+  const classes = classnames(
+    buildCss('pb_list_kit', layout, size, {
+      dark: dark,
+      borderless: borderless,
+      ordered: ordered,
+      xpadding: xpadding,
+    }),
+    spacing(props)
+  )
 
   return (
     <div className={classes}>
-      <ul>
-        {children}
-      </ul>
+      <ul>{children}</ul>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_list/docs/_description.md

@@ -1 +1,7 @@
-Lists display a vertical set of related content.
+Lists display a vertical set of related content.
+
+ **Layout Prop**
+ 
+ - Setting the `layout` prop to either `left` or `right` creates a 2 column layout on the the list/item kit. This is useful if you need 2 things on the same line in a list.
+ - Using `layout:'left'` will make the first column shrink and the second column grow and align to the left.
+ - Using `layout:'right'` will make the first column grow and push the second column to the right.

data/app/pb_kits/playbook/pb_list/docs/_list_layout_left.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false,layout: "left"}) do %>
+    <% 5.times do%>
+        <%= pb_rails("list/item") do %>
+            <%= pb_rails("title", props:{text: "Label", size:4})%>
+            <%= pb_rails("currency", props: { label: "Caption",amount: "2,000.50",size: "sm",}) %>
+        <% end %>
+    <%end%>
+<% end %>

data/app/pb_kits/playbook/pb_list/docs/_list_layout_right.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false,layout: "right"}) do %>
+    <% 5.times do%>
+        <%= pb_rails("list/item") do %>
+            <%= pb_rails("title", props:{text: "Label", size:4})%>
+            <%= pb_rails("currency", props: { label: "Caption",amount: "2,000.50",size: "sm",}) %>
+        <% end %>
+    <%end%>
+<% end %>

data/app/pb_kits/playbook/pb_list/docs/example.yml

@@ -5,6 +5,8 @@ examples:
   - list_ordered: Ordered
   - list_borderless: Borderless
   - list_xpadding: Horizontal Padding
+  - list_layout_left: Layout Left
+  - list_layout_right: Layout Right
   - list_dark: Dark Default
   - list_dark_lg: Dark Large
   - list_dark_ordered: Dark Ordered

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

@@ -1,33 +1,35 @@
 /* @flow */
 
 import React from 'react'
+import classnames from 'classnames'
+import { Body, Icon } from '../'
 
-import {
-  Body,
-  Icon,
-} from '../'
+import { spacing } from '../utilities/spacing.js'
 
 type LoadingInlineProps = {
-  align?: 'left' | 'center' | 'right',
+  align?: "left" | "center" | "right",
   className?: String,
   dark?: Boolean,
   data?: String,
   id?: String,
 }
 
-const LoadingInline = ({
-  align = 'left',
-}: LoadingInlineProps) => (
-  <div className={`pb_loading_inline_kit_${align}`}>
-    <Body color="light">
-      <Icon
-          fixedWidth
-          icon="spinner"
-          pulse
-      />
-      {' Loading'}
-    </Body>
-  </div>
-)
+const LoadingInline = (props: LoadingInlineProps) => {
+  const { align = 'left' } = props
+  return (
+    <div
+        className={classnames(`pb_loading_inline_kit_${align}`, spacing(props))}
+    >
+      <Body color="light">
+        <Icon
+            fixedWidth
+            icon="spinner"
+            pulse
+        />
+        {' Loading'}
+      </Body>
+    </div>
+  )
+}
 
 export default LoadingInline

data/app/pb_kits/playbook/pb_logistic/_logistic.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

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

@@ -3,7 +3,9 @@
 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 { spacing } from '../utilities/spacing.js'
 
 const dateString = (value: DateTime) => {
   const month = value.toMonthNum()
@@ -13,25 +15,39 @@ const dateString = (value: DateTime) => {
 }
 
 type LogisticProps = {
+  aria?: object,
+  className?: String,
   dark?: Boolean,
+  data?: object,
   date: String,
+  id?: String,
   link?: String,
-  projectName: String,
-  projectNumber: Number,
+  projectName?: String,
+  projectNumber?: Number,
 }
 
-const Logistic = ({
-  dark = false,
-  date,
-  link,
-  projectName,
-  projectNumber,
-}: LogisticProps) => {
+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, spacing(props))
 
   return (
     <div
-        className={classnames('pb_logistic_kit')}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       <Body color="light">
         <Caption text="Project" />
@@ -85,7 +101,6 @@ const Logistic = ({
                 />
               </Otherwise>
             </Choose>
-
           </Otherwise>
         </Choose>
       </Body>

data/app/pb_kits/playbook/pb_message/_message.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

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

@@ -1,31 +1,53 @@
 /* @flow */
 
 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'
 
 type MessageProps = {
+  aria: object,
   avatarName?: String,
   avatarStatus?: String,
   avatarUrl?: String,
+  className?: String,
+  data?: object,
+  id?: String,
   label?: String,
   message: String,
   timestamp?: String,
 }
 
-const Message = ({
-  avatarName = '',
-  avatarUrl = '',
-  label = '',
-  message = '',
-  timestamp = '',
-  avatarStatus = null,
-}: MessageProps) => {
+const Message = (props: MessageProps) => {
+  const {
+    aria = {},
+    avatarName,
+    avatarStatus = null,
+    avatarUrl,
+    className,
+    data = {},
+    id,
+    label,
+    message,
+    timestamp,
+  } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const shouldDisplayAvatar = avatarUrl || avatarName
-  const classes = shouldDisplayAvatar ? 'pb_message_kit_avatar' : 'pb_message_kit'
+  const baseClassName = shouldDisplayAvatar
+    ? 'pb_message_kit_avatar'
+    : 'pb_message_kit'
+
+  const classes = classnames(buildCss(baseClassName), className, spacing(props))
 
   return (
-    <div className={classes}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <If condition={shouldDisplayAvatar}>
         <Avatar
             imageUrl={avatarUrl}

data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx

@@ -4,7 +4,6 @@ import { Message } from '../../'
 const MessageDefault = () => {
   return (
     <div>
-
       <Message
           avatarName="Mike Bishop"
           avatarStatus="online"
@@ -31,7 +30,7 @@ const MessageDefault = () => {
       <Message
           avatarName="Lisa Thompson"
           avatarUrl="https://randomuser.me/api/portraits/women/39.jpg"
-          message="To processs your order, I will need your full name."
+          message="To process your order, I will need your full name."
           timestamp="4 hours ago"
       />
 

data/app/pb_kits/playbook/pb_message/message.rb

@@ -25,7 +25,7 @@ module Playbook
     private
 
       def avatar_class
-        avatar_name ? "avatar" : nil
+        valid? ? "avatar" : nil
       end
     end
   end

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx

@@ -2,9 +2,9 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
 import { buildCss } from '../utilities/props'
 import { Avatar } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 type MultipleUsersProps = {
   className?: String,
@@ -14,19 +14,19 @@ type MultipleUsersProps = {
   users: Array<Object>,
 }
 
-const MultipleUsers = ({
-  className,
-  id,
-  maxDisplayedUsers = 4,
-  reverse = false,
-  users,
-}: MultipleUsersProps) => {
-  const displayCount = users.length > maxDisplayedUsers ? maxDisplayedUsers - 1 : users.length
+const MultipleUsers = (props: MultipleUsersProps) => {
+  const { className, id, maxDisplayedUsers = 4, reverse = false, users } = props
+  const displayCount =
+    users.length > maxDisplayedUsers ? maxDisplayedUsers - 1 : users.length
   const usersToDisplay = users.slice(0, displayCount)
 
   return (
     <div
-        className={classnames(className, buildCss('pb_multiple_users_kit', reverse && 'reverse'))}
+        className={classnames(
+        className,
+        buildCss('pb_multiple_users_kit', reverse && 'reverse'),
+        spacing(props)
+      )}
         id={id}
     >
       {usersToDisplay.map((avatarData, index) => (