playbook_ui 4.18.1 → 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

@@ -5,9 +5,12 @@ examples:
   - 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

@@ -3,3 +3,5 @@ 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

@@ -22,13 +22,17 @@ module Playbook
                   values: %w[light dark gradient],
                   default: "light"
       prop :layout, type: Playbook::Props::Enum,
-            values: %w[sidebar collection],
+            values: %w[sidebar collection kanban],
             default: "sidebar"
 
+      prop :responsive, type: Playbook::Props::Boolean, default: false
+
       def classname
         case layout
-	        when "collection"
-	          generate_classname("pb_layout_kit", 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(" ")
@@ -37,6 +41,10 @@ module Playbook
 
     private
 
+      def responsive_class
+        responsive ? "responsive" : ""
+      end
+
       def full_class
         full ? "full" : ""
       end
@@ -50,4 +58,4 @@ module Playbook
       end
     end
   end
-end
+end

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

@@ -22,6 +22,7 @@ type LineGraphProps = {
   title: String,
   type?: String,
   legend?: Boolean,
+  toggleLegendClick?: Boolean,
   height?: String,
 }
 
@@ -30,6 +31,8 @@ export default class LineGraph extends React.Component {
     className: 'pb_bar_graph',
     gradient: false,
     type: 'line',
+    legend: false,
+    toggleLegendClick: true,
   }
 
   componentDidMount() {
@@ -46,6 +49,7 @@ export default class LineGraph extends React.Component {
       title,
       type,
       legend,
+      toggleLegendClick,
       height,
     } = this.props
 
@@ -61,6 +65,7 @@ export default class LineGraph extends React.Component {
       yAxisMin: yAxisMin,
       yAxisMax: yAxisMax,
       legend: legend,
+      toggleLegendClick: toggleLegendClick,
       height: height,
     })
   }

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

@@ -2,42 +2,87 @@
 
 import React, { type Node } from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+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,
+  dark: Boolean,
+  data?: object,
+  id?: String,
   layout: "" | "left" | "right",
-  ordered: boolean,
-  size: "" | "large",
-  xpadding: boolean,
+  ordered: Boolean,
+  role?: String,
+  tabIndex?: String,
+  size?: String,
+  xpadding: Boolean,
 }
 
 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', layout, size, {
+    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>
   )
 }

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

@@ -1,26 +1,49 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+/* @flow */
 
-const propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
+import React, { type Node } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
+
+type ListItemProps = {
+  aria?: object,
+  children: Array<Node> | Node,
+  className?: String,
+  data?: object,
+  id?: String,
+  tabIndex?: String,
 }
 
-class ListItem extends Component {
-  render() {
-    const {
-      children,
-    } = this.props
-    return (
-      <li className="pb_item_kit">
+const ListItem = (props: ListItemProps) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    id,
+    tabIndex,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_item_kit'), className,
+    spacing(props)
+  )
+
+  return (
+    <>
+      <li
+          {...ariaProps}
+          {...dataProps}
+          className={classes}
+          id={id}
+          tabIndex={tabIndex}
+      >
         {children}
       </li>
-    )
-  }
+    </>
+  )
 }
 
-ListItem.propTypes = propTypes
-
 export default ListItem