playbook_ui 4.15.1.alpha1 → 4.18.1

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

@@ -1,7 +1,8 @@
 /* @flow */
 
 import React from 'react'
-
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 import { pbChart } from '../'
 
 type LineGraphProps = {
@@ -20,6 +21,8 @@ type LineGraphProps = {
   subTitle?: String,
   title: String,
   type?: String,
+  legend?: Boolean,
+  height?: String,
 }
 
 export default class LineGraph extends React.Component<LineGraphProps> {
@@ -42,6 +45,8 @@ export default class LineGraph extends React.Component {
       subTitle,
       title,
       type,
+      legend,
+      height,
     } = this.props
 
     new pbChart(`.${className}`, {
@@ -55,6 +60,8 @@ export default class LineGraph extends React.Component {
       xAxisCategories: xAxisCategories,
       yAxisMin: yAxisMin,
       yAxisMax: yAxisMax,
+      legend: legend,
+      height: height,
     })
   }
 
@@ -65,7 +72,7 @@ export default class LineGraph extends React.Component {
 
     return (
       <div
-          className={className}
+          className={classnames(className, spacing(this.props))}
           id={id}
       />
     )

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

@@ -1 +1,3 @@
-Line graphs are used to show changes in data over time. The default height of line graph is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.

+Line graphs are used to show changes in data over time. The default height of line graph is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.

+
+For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.

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

@@ -16,11 +16,11 @@
 }] %>
 
 <%= pb_rails("line_graph", props: { 
-        id: "line-test", 
-        gradient: false, 
-        chart_data: data, 
-        x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-        title: 'Solar Employment Growth by Sector, 2010-2016', 
-        subtitle: 'Source: thesolarfoundation.com', 
-        axis_title: 'Number of Employees' 
-    }) %>
+    id: "line-default", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Solar Employment Growth by Sector, 2010-2016', 
+    subtitle: 'Source: thesolarfoundation.com', 
+    axis_title: 'Number of Employees' 
+}) %>

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

@@ -23,7 +23,7 @@ const LineGraphDefault = () => (
     <LineGraph
         axisTitle="Number of Employees"
         chartData={data}
-        id="bar-test"
+        id="line-default"
         subTitle="Source: thesolarfoundation.com"
         title="Solar Employment Growth by Sector, 2010-2016"
         xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}

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

@@ -0,0 +1,26 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+}] %>
+
+<%= pb_rails("line_graph", props: { 
+    id: "line-fixed-height", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Fixed Height (300px)', 
+    axis_title: 'Number of Employees',
+    height: '300'
+}) %>
+
+<br /><br />
+
+<%= pb_rails("line_graph", props: { 
+    id: "line-precentage-height", 
+    gradient: false, 
+    chart_data: data, 
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Percentage Height (50%)', 
+    axis_title: 'Number of Employees',
+    height: '50%'
+}) %>

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import { LineGraph } from '../../'
+
+const data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}]
+
+const LineGraphDefault = () => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="line-fixed-height"
+        title="Fixed Height (300px)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+    />
+
+    <br />
+    <br />
+
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        height="50%"
+        id="line-percentage-height"
+        title="Percentage Height (50%)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+    />
+  </div>
+)
+
+export default LineGraphDefault

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>