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

data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban_responsive.html.erb

@@ -0,0 +1,57 @@
+<%= pb_rails("layout", props: {layout: "kanban", responsive: true}) do %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'Queued'}) %>
+    <%= pb_rails("card") do %>
+      Runway Ticket #1
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'In Progress'}) %>
+    <%= pb_rails("card") do %>
+      Runway Ticket #4
+    <% end %>
+    <%= pb_rails("card") do %>
+      Runway Ticket #5
+    <% end %>
+    <%= pb_rails("card") do %>
+      Runway Ticket #6
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'Validation'}) %>
+    <%= pb_rails("card") do %>
+      Runway Ticket #7
+    <% end %>
+    <%= pb_rails("card") do %>
+      Runway Ticket 8
+    <% end %>
+    <%= pb_rails("card") do %>
+      Runway Ticket #9
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'Done'}) %>
+    <%= pb_rails("card") do %>
+      More
+    <% end %>
+    <%= pb_rails("card") do %>
+      Stuff
+    <% end %>
+    <%= pb_rails("card") do %>
+      Here
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'Backlog'}) %>
+    <%= pb_rails("card") do %>
+      Lots 
+    <% end %>
+    <%= pb_rails("card") do %>
+      of
+    <% end %>
+    <%= pb_rails("card") do %>
+      Stuff
+    <% end %>
+  <% end %>
+
+<% end %>

data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban_responsive.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { Caption, Card, Layout } from '../../'
+
+const LayoutKanbanResponsive = () => {
+  return (
+    <div>
+      <Layout
+          layout="kanban"
+          responsive
+      >
+        <Layout.Body>
+          <Caption>{'Queue'}</Caption>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+        </Layout.Body>
+        <Layout.Body>
+          <Caption>{'In Progress'}</Caption>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+        </Layout.Body>
+        <Layout.Body>
+          <Caption>{'Validation'}</Caption>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+        </Layout.Body>
+        <Layout.Body>
+          <Caption>{'Done'}</Caption>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+        </Layout.Body>
+        <Layout.Body>
+          <Caption>{'Another Column'}</Caption>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+          <Card>{'Card content'}</Card>
+        </Layout.Body>
+      </Layout>
+    </div>
+  )
+}
+
+export default LayoutKanbanResponsive

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

@@ -4,8 +4,13 @@ examples:
   - layout_transparent: Transparent
   - layout_sizes: Sizes
   - layout_sizes_dark: Sizes Dark
+  - layout_collection: Collection Layout
+  - layout_kanban: Kanban Layout
+
   react:
   - layout_colors: Colors
   - layout_transparent: Transparent
   - layout_sizes: Sizes
   - layout_sizes_dark: Sizes Dark
+  - layout_collection: Collection Layout
+  - layout_kanban: Kanban Layout

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

@@ -2,3 +2,6 @@ export { default as LayoutColors } from './_layout_colors.jsx'
 export { default as LayoutTransparent } from './_layout_transparent.jsx'
 export { default as LayoutSizes } from './_layout_sizes.jsx'
 export { default as LayoutSizesDark } from './_layout_sizes_dark.jsx'
+export { default as LayoutCollection } from './_layout_collection.jsx'
+export { default as LayoutKanban } from './_layout_kanban.jsx'
+export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.jsx'

data/app/pb_kits/playbook/pb_layout/layout.rb

@@ -21,14 +21,30 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                   values: %w[light dark gradient],
                   default: "light"
+      prop :layout, type: Playbook::Props::Enum,
+            values: %w[sidebar collection kanban],
+            default: "sidebar"
+
+      prop :responsive, type: Playbook::Props::Boolean, default: false
 
       def classname
-        first_class = generate_classname("pb_layout_kit", "size_#{size}", position, variant, transparent_class)
-        [first_class, full_class, collapse_class].reject(&:empty?).join(" ")
+        case layout
+	        when "collection" 
+            generate_classname("pb_layout_kit", layout)
+          when "kanban"
+            generate_classname("pb_layout_kit", layout, responsive_class)
+	        else
+	          first_class = generate_classname("pb_layout_kit_sidebar","size_#{size}", position, variant, transparent_class)
+	          [first_class, full_class, collapse_class].reject(&:empty?).join(" ")
+        end
       end
 
     private
 
+      def responsive_class
+        responsive ? "responsive" : ""
+      end
+
       def full_class
         full ? "full" : ""
       end
@@ -42,4 +58,4 @@ module Playbook
       end
     end
   end
-end
+end

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

@@ -1,34 +1,36 @@
 /* @flow */
 
 import React from 'react'
+import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
-import {
-  Body,
-  Title,
-} from '../'
+import { Body, Title } from '../'
 
 type LegendProps = {
-  color?: 'data_1' | 'data_2' | 'data_3' | 'data_4' | 'data_5' | 'data_6' | 'data_7',
+  color?: | "data_1"
+    | "data_2"
+    | "data_3"
+    | "data_4"
+    | "data_5"
+    | "data_6"
+    | "data_7",
   dark?: Boolean,
   prefixText?: String,
   text: String,
 }
 
-const Legend = ({
-  color = 'data_1',
-  dark = false,
-  prefixText,
-  text,
-}: LegendProps) => {
+const Legend = (props: LegendProps) => {
+  const { color = 'data_1', dark = false, prefixText, text } = props
   const darkClass = dark ? 'dark' : 'light'
-  const bodyCSS = buildCss('pb_legend_kit', color, darkClass)
+  const bodyCSS = classnames(
+    buildCss('pb_legend_kit', color, darkClass),
+    spacing(props)
+  )
 
   return (
     <div className={bodyCSS}>
-      <Body
-          color={dark ? 'lighter' : 'light'}
-      >
+      <Body color={dark ? 'lighter' : 'light'}>
         <span className="pb_legend_indicator_circle" />
         <If condition={prefixText}>
           <Title

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 = {
@@ -21,6 +22,7 @@ type LineGraphProps = {
   title: String,
   type?: String,
   legend?: Boolean,
+  toggleLegendClick?: Boolean,
   height?: String,
 }
 
@@ -29,6 +31,8 @@ export default class LineGraph extends React.Component {
     className: 'pb_bar_graph',
     gradient: false,
     type: 'line',
+    legend: false,
+    toggleLegendClick: true,
   }
 
   componentDidMount() {
@@ -45,6 +49,7 @@ export default class LineGraph extends React.Component {
       title,
       type,
       legend,
+      toggleLegendClick,
       height,
     } = this.props
 
@@ -60,6 +65,7 @@ export default class LineGraph extends React.Component {
       yAxisMin: yAxisMin,
       yAxisMax: yAxisMax,
       legend: legend,
+      toggleLegendClick: toggleLegendClick,
       height: height,
     })
   }
@@ -71,7 +77,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/_line_graph_legend_nonclickable.html.erb

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

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.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 LineGraphLegendNonclickable = () => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="line-test-3"
+        legend
+        title="Line Graph with Legend Non Clickable"
+        toggleLegendClick={false}
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+    />
+  </div>
+)
+
+export default LineGraphLegendNonclickable

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

@@ -1,12 +1,14 @@
 examples:
-  
+
   rails:
   - line_graph_default: Default
   - line_graph_legend: Legend
+  - line_graph_legend_nonclickable: Legend Nonclickable
   - line_graph_height: Height
-  
-  
+
+
   react:
   - line_graph_default: Default
   - line_graph_legend: Legend
+  - line_graph_legend_nonclickable: Legend Nonclickable
   - line_graph_height: Height

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

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

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

@@ -21,6 +21,8 @@ module Playbook
       prop :y_axis_max, type: Playbook::Props::Numeric
       prop :legend, type: Playbook::Props::Boolean,
                     default: false
+      prop :toggle_legend_click, type: Playbook::Props::Boolean,
+                                 default: true
       prop :height
 
       def chart_type
@@ -40,6 +42,7 @@ module Playbook
           yAxisMin: y_axis_min,
           yAxisMax: y_axis_max,
           legend: legend,
+          toggleLegendClick: toggle_legend_click,
           height: height,
         }.to_json.html_safe
       end

data/app/pb_kits/playbook/pb_list/_item.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:li,
-                id: object.id,
-                data: object.data,
+                aria: object.aria,
                 class: object.classname,
+                data: object.data,
+                id: object.id,
                 tabindex: object.tabindex
   ) do %>
     <%= capture(&object.children) %>

data/app/pb_kits/playbook/pb_list/_list.html.erb

@@ -1,10 +1,10 @@
 <%= content_tag(:div, class: object.list_classname) do %>
   <%= content_tag(:"#{object.ordered_class}",
-                  id: object.id,
-                  data: object.data,
+                  aria: object.aria,
                   class: object.classname,
+                  data: object.data,
+                  id: object.id,
                   role: object.role,
-                  aria: object.aria,
                   tabindex: object.tabindex
     ) do %>
       <%= capture(&object.children) %>

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

@@ -1,40 +1,88 @@
 /* @flow */
 
 import React, { type Node } from 'react'
-
-import { buildCss } from '../utilities/props'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 
 type ListProps = {
-  borderless: boolean,
+  aria?: object,
+  borderless: Boolean,
+  className?: String,
   children: Array<Node> | Node,
-  dark: boolean,
-  layout: '' | 'left' | 'right',
-  ordered: boolean,
-  size: '' | 'large',
-  xpadding: boolean,
+  dark: Boolean,
+  data?: object,
+  id?: String,
+  layout: "" | "left" | "right",
+  ordered: Boolean,
+  role?: String,
+  tabIndex?: String,
+  size?: String,
+  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 {
+    aria = {},
+    borderless = false,
+    children,
+    className,
+    dark = false,
+    data = {},
+    id,
+    layout = '',
+    ordered = false,
+    role,
+    size = '',
+    tabIndex,
+    xpadding = false,
+  } = props
+
+  const layoutClass = {
+    left: 'layout_left',
+    right: 'layout_right',
+    default: '',
+  }
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_list_kit', layoutClass[layout], size, {
+      dark: dark,
+      borderless: borderless,
+      ordered: ordered,
+      xpadding: xpadding,
+    }), className,
+    spacing(props)
+  )
 
   return (
-    <div className={classes}>
-      <ul>
-        {children}
-      </ul>
+    <div
+        className={classes}
+    >
+      <If condition={ordered}>
+        <ol
+            {...ariaProps}
+            {...dataProps}
+            className={className}
+            id={id}
+            role={role}
+            tabIndex={tabIndex}
+        >
+          {children}
+        </ol>
+        <Else />
+        <ul
+            {...ariaProps}
+            {...dataProps}
+            className={className}
+            id={id}
+            role={role}
+            tabIndex={tabIndex}
+        >
+          {children}
+        </ul>
+      </If>
     </div>
   )
 }