playbook_ui_docs 13.23.0 → 13.24.0.pre.alpha.PLAY1181circleiconkitfixsizingerrorglobalspacingprops2675

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2551238e0e39b464ae21f0564d14852da929defe1f380520ae00449c116a886d
-  data.tar.gz: 56c99772990210d2cab93af23ce4138a55f2ada2034d97abb26f54ce854e7085
+  metadata.gz: '057398763924484478ca4db22716d283880f43345445d1f01b53a8c9dfb60461'
+  data.tar.gz: 2deaa6ee0df66359fed5779d79fabd6eb0df3e66c4e20a20a2b5814548a4d19e
 SHA512:
-  metadata.gz: 991d70d46030520c81bcd566d7841c57d06b3374d2eeabd0c2020f2ef62f78685925e0d5dc8de17a989a0630a64f54eff6cfa6d316f3df9a999ba6b707be29c9
-  data.tar.gz: f8e3874aad138721909b1ee9de0f26ba1aa9bfe3a78e25645203b8d62c2d8548f89795494d0f6148c65e42f6199d0592402d8d5aa8d7de48447206a9a2419115
+  metadata.gz: 581b7126ac9d25f50b3418d4942378ce91e290d7af9ae7b38378c581c98aeae211ac4c373d5ffbf08c93bbcb52ee04879ab705473fbdeb59f0deb7c79e3147fa
+  data.tar.gz: 6f690f8e38ba0b729a9deddc7cfefc5dc55398a0d2fed73527aec3a343e809955d6cecc5e0793c8a12b2a4f9b05e036335b4192ba2563d1c0c6ae6fad654be13

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

@@ -0,0 +1,23 @@
+<% data = [{
+    name: 'Installation',
+    data: [-475, 400, -1000, 354, -856],
+    threshold: 0
+  }, {
+    name: 'Manufacturing',
+    data: [1475, 200, 1000, 654, -656],
+    threshold: 0
+  }, 
+  {
+    name: 'Sales & Distribution',
+    data: [1270, 100, -1200, 554, 756],
+    threshold: 0
+  }] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-default",
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Bar Graph with Negative Numbers',
+    legend: true,
+}) %>

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

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Installation',
+  data: [-475, 400, -1000, 354, -856],
+  threshold: 0
+}, {
+  name: 'Manufacturing',
+  data: [1475, 200, 1000, 654, -656],
+  threshold: 0
+}, 
+{
+  name: 'Sales & Distribution',
+  data: [1270, 100, -1200, 554, 756],
+  threshold: 0
+}]
+
+
+const BarGraphStacked = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        id="bar-default"
+        legend
+        title="Bar Graph with Negative Numbers"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphStacked

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

@@ -0,0 +1,26 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}, {
+    type: 'spline',
+    name: 'Percentage',
+    data: [48, 70, 25, 55, 72],
+    color: '#F9BB00',
+    yAxis: 1
+}] %>
+
+<% axis_titles = [{name: "Number of Installations"}, {name: "Percentage"}] %>
+
+<% axis_formats = [{format: ""}, {format: "{value}%"}] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_format: axis_formats,
+    axis_title: axis_titles,
+    chart_data: data,
+    id: "bar-spline",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    subtitle: 'Source: thesolarfoundation.com',
+    title: 'Bar Graph with Secondary Y-axis',
+    legend: true,
+}) %>

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

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Number of Installations',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  type: 'spline',
+  name: 'Percentage',
+  data: [48, 70, 25, 55, 72],
+  color: '#F9BB00',
+  yAxis: 1
+}]
+
+const axisTitles = [ {name: "Number of Installations"}, {name: "Percentage"}]
+
+const axisFormats = [{format: ""}, {format: "{value}%"}]
+
+const BarGraphSecondaryYAxis= (props) => (
+  <div>
+    <BarGraph
+        axisFormat={axisFormats}
+        axisTitle={axisTitles}
+        chartData={chartData}
+        id="bar-spline"
+        legend
+        title="Bar Graph with Secondary Y-axis"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphSecondaryYAxis

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

@@ -0,0 +1,3 @@
+Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passing` yAxis: 1` to the second node of your `chartData` array. 
+
+To customize the format and/or title of your secondary yAxis, pass your desired values as arrays through the `axisFormat` and `axisTitle` props, respectively.

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

@@ -0,0 +1,22 @@
+<% data = [{
+    name: 'Installation',
+    data: [1475, 200, 3000, 654, 656],
+  }, 
+  {
+    name: 'Manufacturing',
+    data: [1270, 800, 200, 454, 956],
+  }, {
+    name: 'Sales & Distribution',
+    data: [975, 1600, 1500, 924, 500],
+  }] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-default",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    stacking: "normal",
+    title: 'Bar Graph with Stacked Columns',
+    legend: true,
+}) %>

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

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Installation',
+  data: [1475, 200, 3000, 654, 656],
+}, 
+{
+  name: 'Manufacturing',
+  data: [1270, 800, 200, 454, 956],
+}, {
+  name: 'Sales & Distribution',
+  data: [975, 1600, 1500, 924, 500],
+}]
+
+
+const BarGraphStacked = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number Of Employees"
+        chartData={chartData}
+        id="bar-default"
+        legend
+        stacking="normal"
+        title="Bar Graph with Stacked Columns"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphStacked

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

@@ -0,0 +1 @@
+The `stacking` prop can be used for a stacked bar graph. The prop allows for `normal` or `percent` as options. 

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

@@ -9,6 +9,9 @@ examples:
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
   - bar_graph_custom: Custom Overrides
+  - bar_graph_stacked: Stacked
+  - bar_graph_negative_numbers: Negative Numbers
+  - bar_graph_secondary_y_axis: Secondary Y-Axis
 
 
   react:
@@ -20,3 +23,6 @@ examples:
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
   - bar_graph_custom: Custom Overrides
+  - bar_graph_stacked: Stacked
+  - bar_graph_negative_numbers: Negative Numbers
+  - bar_graph_secondary_y_axis: Secondary Y-Axis

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

@@ -6,3 +6,6 @@ export { default as BarGraphHeight } from './_bar_graph_height.jsx'
 export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
 export { default as BarGraphColors } from './_bar_graph_colors.jsx'
 export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
+export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
+export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
+export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+
+import {
+  Button,
+} from '../..'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+  { label: 'Amaranth', value: '#9F2B68' },
+  { label: 'Key Lime', value: '#DAF7A6' },
+  { label: 'Turquois', value: '#00FFD0' },
+]
+
+const TypeaheadCustomMenuList = (props) => {
+  const defaultColorOptions = options.slice(0, 3)
+  const [colorOptions, setColorOptions] = useState(defaultColorOptions)
+
+  const moreToLoad = colorOptions.length == defaultColorOptions.length
+  const loadColors = moreToLoad ? () => setColorOptions(options) : () => setColorOptions(defaultColorOptions)
+
+  const menuListProps = {
+    footer: (<Button
+        margin="sm"
+        onClick={loadColors}
+        text={`Load ${moreToLoad ? "More" : "Less"}`}
+             />)
+  }
+
+  const MenuList = (props) => (
+    <Typeahead.MenuList
+        {...menuListProps}
+        {...props}
+    />
+  )
+
+  return (
+    <Typeahead
+        components={{ MenuList }}
+        label="Colors"
+        options={colorOptions}
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadCustomMenuList

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -46,7 +46,7 @@ const TypeaheadWithHighlight = (props) => {
       if (!inputValue.length) return text
       return text.replace(
         new RegExp(inputValue, 'gi'),
-        highlighted => `<mark>${highlighted}</mark>`
+        (highlighted) => `<mark>${highlighted}</mark>`
       )
     }
     return (

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

@@ -22,3 +22,4 @@ examples:
     - typeahead_createable: Createable
     - typeahead_async_createable: Createable (+ Async Data)
     - typeahead_error_state: Error State
+    - typeahead_custom_menu_list: Custom MenuList

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

@@ -9,3 +9,4 @@ export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
 export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
 export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
 export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
+export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'