playbook_ui 11.11.0.pre.alpha.renderer1 → 11.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 87186c6f2089fba7fd9caad01934cbe9037ceb88f81bdc1c8562c2925580312c
-  data.tar.gz: ae086a8528f1ed1011116bd40d30ee2b726cb6f06db27f017d6da9417438ddc0
+  metadata.gz: d5a9c00dbcbcf3ec7e44832210e0e0c3651eeb4ab6aa9f92ae083799801e9681
+  data.tar.gz: 14929bd370f1f6452327ef413e98cb4b4d88318db6a805cb2f0f184662602a6d
 SHA512:
-  metadata.gz: e3718b986e0d2c1eeecbb0ed3323e921fe0ee307a36e728787ffcc6838ac3d155900546d4f419ffa55e961612a4d2316e49a4d41e1182975201f2f98e104a008
-  data.tar.gz: 83e882bb65924091cc7713e7f78cb18f65d6684367bda59b9550d5827b5393eea81bf5f72bea2a17abf9bfff112cd84fd7306f5645414013aa483c62ac53a356
+  metadata.gz: 960e28629efc7ac1daa28b7ddb79575cb5c5927f1dba68085f4e0e9c80ad24a3af3512b95f297e07a398e7f6c79b334e348832f76a66e89ac7b90e079fd5e389
+  data.tar.gz: d5369dadccd7f2c4f629f2f8b9d7e1436a6c67664acbb0f095e9b79b329baa63cb5c84cf5aa30fe3e86faac90bf78de2f25e7acf5eee3e6a51c872b802c6f38b

data/app/pb_kits/playbook/index.js

@@ -11,6 +11,7 @@ export { default as Badge } from './pb_badge/_badge'
 export { default as BarGraph } from './pb_bar_graph/_bar_graph'
 export { default as Body } from './pb_body/_body'
 export { default as BreadCrumbs } from './pb_bread_crumbs/_bread_crumbs'
+export { default as BreadCrumbItem } from './pb_bread_crumbs/_bread_crumb_item'
 export { default as Button } from './pb_button/_button'
 export { default as ButtonToolbar } from './pb_button_toolbar/_button_toolbar'
 export { default as Caption } from './pb_caption/_caption'

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx

@@ -7,6 +7,7 @@ import { globalProps } from '../utilities/globalProps'
 import pbChart from '../plugins/pb_chart'
 
 type BarGraphProps = {
+  align?: "left" | "right" | "center",
   axisTitle: string,
   dark?: Boolean,
   xAxisCategories: array,
@@ -26,19 +27,29 @@ type BarGraphProps = {
   toggleLegendClick?: boolean,
   height?: string,
   colors: array,
+  layout?: "horizontal" | "vertical" | "proximate",
+  verticalAlign?: "top" | "middle" | "bottom",
+  x?: number,
+  y?: number,
 }
 
 export default class BarGraph extends React.Component<BarGraphProps> {
   static defaultProps = {
+    align: "center",
     className: 'pb_bar_graph',
     dark: false,
     type: 'column',
     legend: false,
     toggleLegendClick: true,
+    layout: "horizontal",
+    verticalAlign: "bottom",
+    x: 0,
+    y: 0,
   }
 
   componentDidMount() {
     const {
+      align,
       axisTitle,
       dark,
       xAxisCategories,
@@ -55,9 +66,14 @@ export default class BarGraph extends React.Component<BarGraphProps> {
       height,
       toggleLegendClick,
       colors  = [],
+      layout,
+      verticalAlign,
+      x,
+      y,
     } = this.props
 
     new pbChart(`.${className}`, {
+      align,
       axisTitle: axisTitle,
       dark,
       chartData: chartData,
@@ -70,9 +86,13 @@ export default class BarGraph extends React.Component<BarGraphProps> {
       xAxisCategories: xAxisCategories,
       yAxisMin: yAxisMin,
       yAxisMax: yAxisMax,
-      legend: legend,
+      legend,
       toggleLegendClick: toggleLegendClick,
       height: height,
+      layout,
+      verticalAlign,
+      x,
+      y,
     })
   }
 

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -3,6 +3,9 @@
 module Playbook
   module PbBarGraph
     class BarGraph < Playbook::KitBase
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[left right center],
+                   default: "center"
       prop :axis_title
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
@@ -23,6 +26,14 @@ module Playbook
       prop :height
       prop :colors, type: Playbook::Props::Array,
                     default: []
+      prop :layout, type: Playbook::Props::Enum,
+                    values: %w[horizontal vertical proximate],
+                    default: "horizontal"
+      prop :vertical_align, type: Playbook::Props::Enum,
+                            values: %w[top middle bottom],
+                            default: "bottom"
+      prop :x, type: Playbook::Props::Numeric
+      prop :y, type: Playbook::Props::Numeric
 
       def chart_type
         orientation == "horizontal" ? "bar" : "column"
@@ -30,13 +41,14 @@ module Playbook
 
       def chart_options
         {
+          align: align,
           id: id,
           className: classname,
           chartData: chart_data,
           dark: dark ? "dark" : "",
           type: chart_type,
           title: title,
-          subtitle: subtitle,
+          subTitle: subtitle,
           axisTitle: axis_title,
           pointStart: point_start,
           xAxisCategories: x_axis_categories,
@@ -46,6 +58,10 @@ module Playbook
           toggleLegendClick: toggle_legend_click,
           height: height,
           colors: colors,
+          layout: layout,
+          verticalAlign: vertical_align,
+          x: x,
+          y: y,
         }
       end
 

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.html.erb

@@ -0,0 +1,62 @@
+<% data = [{
+    name: 'Installation',
+    data: [1475]
+}, {
+    name: 'Manufacturing',
+    data: [4434]
+}, {
+    name: 'Sales & Distribution',
+    data: [3387]
+}, {
+    name: 'Project Development',
+    data: [3227]
+}, {
+    name: 'Other',
+    data: [1111]
+}] %>
+
+<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id:"legend-position-bar",
+    y_axis_min: 0,
+    x_axis_categories:['Jan'],
+    title: 'Alignment of Legend',
+    legend: true,
+    align: 'right',
+    vertical_align: 'top',
+    padding_bottom: "sm",
+}) %>
+
+<%= pb_rails("title", props: {size: 4, text: "layout", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id:"legend-position-bar-1",
+    y_axis_min: 0,
+    x_axis_categories:['Jan'],
+    title: 'Layout of Legend',
+    legend: true,
+    layout: 'vertical',
+    padding_top: "sm",
+    padding_bottom: "sm",
+}) %>
+
+<%= pb_rails("title", props: {size: 4, text: "x | y", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id:"legend-position-bar-2",
+    y_axis_min: 0,
+    x_axis_categories:['Jan'],
+    title: 'Offset of Legend',
+    legend: true,
+    layout: "vertical",
+    x: 100,
+    y: 10,
+    padding_top: "sm",
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { BarGraph, Title } from '../..'
+
+const chartData = [{
+  name: 'Installation',
+  data: [1475],
+}, {
+  name: 'Manufacturing',
+  data: [4434],
+}, {
+  name: 'Sales & Distribution',
+  data: [3387],
+}, {
+  name: 'Project Development',
+  data: [3227],
+}, {
+  name: 'Other',
+  data: [1111],
+}]
+
+const BarGraphLegendPosition = (props) => (
+  <div>
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="align | verticalAlign"
+    />
+    <BarGraph
+        align='right'
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="legend-position-bar"
+        legend
+        paddingBottom="sm"
+        title="Alignment of Legend"
+        verticalAlign="top"
+        xAxisCategories={['Jan']}
+        yAxisMin={0}
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="layout"
+    />
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="legend-position-bar-1"
+        layout="vertical"
+        legend
+        paddingBottom="sm"
+        paddingTop="sm"
+        title="Layout of Legend"
+        xAxisCategories={['Jan']}
+        yAxisMin={0}
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="x | y"
+    />
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="legend-position-bar-2"
+        layout="vertical"
+        legend
+        title="Offset of Legend"
+        x={100}
+        xAxisCategories={['Jan']}
+        y={10}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphLegendPosition

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md

@@ -0,0 +1,17 @@
+##### Prop
+
+`align` **Type**: String | **Values**: left | center | right (defaults to center)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
+`layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
+`x` **Type**: Number (defaults to 0)
+`y` **Type**: Number (defaults to 0)
+
+- 
+
+- `layout` determines the position of the legend items
+`layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
+
+- `x` offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
+
+
+- `y` offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - bar_graph_default: Default
   - bar_graph_legend: Legend
+  - bar_graph_legend_position: Legend Position
   - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
   - bar_graph_spline: Spline
@@ -12,6 +13,7 @@ examples:
   react:
   - bar_graph_default: Default
   - bar_graph_legend: Legend
+  - bar_graph_legend_position: Legend Position
   - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
   - bar_graph_spline: Spline

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

@@ -1,5 +1,6 @@
 export { default as BarGraphDefault } from './_bar_graph_default.jsx'
 export { default as BarGraphLegend } from './_bar_graph_legend.jsx'
+export { default as BarGraphLegendPosition } from './_bar_graph_legend_position.jsx'
 export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_clickable.jsx'
 export { default as BarGraphHeight } from './_bar_graph_height.jsx'
 export { default as BarGraphSpline } from './_bar_graph_spline.jsx'

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -1,4 +1,5 @@
 @import "./button_mixins";
+@import "../tokens/colors";
 
 $pb_button_sizes: (
   "sm":   0.75rem,
@@ -28,6 +29,11 @@ $pb_button_sizes: (
   }
   &[class*=_link]  {
     @include pb_button_link;
+    @media (hover:hover) {
+      &:hover {
+        @include pb_button_hover(mix($primary_action, $white, 3%));
+      }
+    } 
   }
 
   // Disabled =================

data/app/pb_kits/playbook/pb_button/docs/_button_default.html.erb

@@ -1,5 +1,5 @@
-<%= pb_rails("button", props: { text: "Button Primary" }) %>
-<%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary" }) %>
-<%= pb_rails("button", props: { text: "Button Link", variant: "link" }) %>
-<%= pb_rails("button", props: { text: "Button Disabled", disabled: true }) %>
+<%= pb_rails("button", props: { text: "Button Primary", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button Link", variant: "link", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button Disabled", disabled: true, margin_right: "lg" }) %>
 

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx

@@ -1,32 +1,33 @@
-import React from 'react'
-import { Button } from '../../'
+import React from "react"
+import { Button } from "../../"
 
 const ButtonDefault = (props) => (
   <div>
     <Button
-        marginRight="xl"
-        onClick={() => alert('button clicked!')}
-        text="Button Primary"
+        marginRight='lg'
+        onClick={() => alert("button clicked!")}
+        text='Button Primary'
         {...props}
-    />
-    {' '}
+    />{" "}
     <Button
-        onClick={() => alert('button clicked!')}
-        text="Button Secondary"
-        variant="secondary"
+        marginRight='lg'
+        onClick={() => alert("button clicked!")}
+        text='Button Secondary'
+        variant='secondary'
         {...props}
-    />
-    {' '}
+    />{" "}
     <Button
-        onClick={() => alert('button clicked!')}
-        text="Button Link"
-        variant="link"
+        marginRight='lg'
+        onClick={() => alert("button clicked!")}
+        text='Button Link'
+        variant='link'
         {...props}
     />
     <Button
         disabled
-        onClick={() => alert('button clicked!')}
-        text="Button Disabled"
+        marginRight='lg'
+        onClick={() => alert("button clicked!")}
+        text='Button Disabled'
         {...props}
     />
   </div>

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx

@@ -9,6 +9,7 @@ import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 import pbChart from '../plugins/pb_chart'
 type CircleChartProps = {
+  align?: "left" | "right" | "center",
   aria: Object,
   chartData?: array,
   children: Node,
@@ -32,10 +33,15 @@ type CircleChartProps = {
   tooltipHtml: string,
   useHtml: boolean,
   zMin: number,
+  layout?: "horizontal" | "vertical" | "proximate",
+  verticalAlign?: "top" | "middle" | "bottom",
+  x?: number,
+  y?: number,
 }
 
 const CircleChart = (props: CircleChartProps) => {
   const {
+    align = 'center',
     aria = {},
     chartData = [{}],
     children,
@@ -60,6 +66,10 @@ const CircleChart = (props: CircleChartProps) => {
       '<b>{point.y}</b>',
     useHtml = false,
     zMin = null,
+    layout = 'horizontal',
+    verticalAlign = 'bottom',
+    x = 0,
+    y = 0,
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -78,6 +88,7 @@ const CircleChart = (props: CircleChartProps) => {
     })
 
     new pbChart('.selector', {
+      align,
       id,
       colors,
       borderColor: roundedBorderColor,
@@ -98,6 +109,10 @@ const CircleChart = (props: CircleChartProps) => {
       innerSize: innerSizeFormat(innerSize),
       zMin,
       startAngle,
+      layout,
+      verticalAlign,
+      x,
+      y,
     })
   }, [])
 

data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb

@@ -5,6 +5,9 @@
 module Playbook
   module PbCircleChart
     class CircleChart < Playbook::KitBase
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[left right center],
+                   default: "center"
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
       prop :style, type: Playbook::Props::Enum,
@@ -31,6 +34,14 @@ module Playbook
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :colors, type: Playbook::Props::Array,
                     default: []
+      prop :layout, type: Playbook::Props::Enum,
+                    values: %w[horizontal vertical proximate],
+                    default: "horizontal"
+      prop :vertical_align, type: Playbook::Props::Enum,
+                            values: %w[top middle bottom],
+                            default: "bottom"
+      prop :x, type: Playbook::Props::Numeric
+      prop :y, type: Playbook::Props::Numeric
 
       def chart_type
         style == "variablepie" ? "variablepie" : "pie"
@@ -64,6 +75,7 @@ module Playbook
 
       def chart_options
         {
+          align: align,
           id: id,
           colors: colors,
           borderColor: rounded_border_color,
@@ -84,6 +96,10 @@ module Playbook
           innerSize: inner_size_format,
           zMin: z_min,
           startAngle: start_angle,
+          layout: layout,
+          verticalAlign: vertical_align,
+          x: x,
+          y: y,
         }.to_json.html_safe
       end
 

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb

@@ -0,0 +1,86 @@
+<% data = [{
+    name: 'Waiting for Calls',
+    value: 41,
+  },
+  {
+    name: 'On Call',
+    value: 49,
+  },
+  {
+    name: 'After call',
+    value: 10,
+  }
+] %>
+
+<% data_1 = [{
+    name: 'Bugs',
+    value: 8,
+  },
+  {
+    name: 'Chores',
+    value: 1,
+  },
+  {
+    name: 'Stories',
+    value: 12,
+  }
+] %>
+
+<% data_2 = [{
+    name: 'Queued',
+    value: 7,
+  },
+  {
+    name: 'In Progress',
+    value: 6,
+
+  },
+  {
+    name: 'Validation',
+    value: 3,
+  },
+  {
+    name: 'Done',
+    value: 6,
+  },
+] %>
+
+
+<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("circle_chart", props: {
+    style: "pie",
+    chart_data: data,
+    legend: true,
+    id: "legend-position-circle",
+    title: 'Alignment of Legend',
+    align: 'right',
+    vertical_align: 'top',
+    padding_bottom: "sm",
+}) %>
+
+<%= pb_rails("title", props: {size: 4, text: "layout", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("circle_chart", props: {
+    style: "pie",
+    chart_data: data_1,
+    legend: true,
+    id: "legend-position-circle-1",
+    title: 'Layout of Legend',
+    layout: 'vertical',
+    padding_top: "sm",
+    padding_bottom: "sm",
+}) %>
+
+<%= pb_rails("title", props: {size: 4, text: "x | y", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("circle_chart", props: {
+    style: "pie",
+    chart_data: data_2,
+    legend: true,
+    title: 'Offset of Legend',
+    id: "legend-position-circle-2",
+    x: 100,
+    y: 10,
+    padding_top: "sm",
+}) %>