playbook_ui 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665

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,24 @@
+import React from 'react'
+import { LineGraph } from '../..'
+
+const data = [{
+  name: 'Number of Installations',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}]
+
+const LineGraphLegendNonclickable = (props) => (
+  <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']}
+        {...props}
+    />
+  </div>
+)
+
+export default LineGraphLegendNonclickable

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

@@ -0,0 +1,62 @@
+<% data = [{
+    name: 'Installation',
+    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+}, {
+    name: 'Manufacturing',
+    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
+}, {
+    name: 'Sales & Distribution',
+    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
+}, {
+    name: 'Project Development',
+    data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227]
+}, {
+    name: 'Other',
+    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
+}] %>
+
+<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
+
+<%= pb_rails("line_graph", props: {
+    id: "legend-position-line",
+    gradient: false,
+    chart_data: data,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug'],
+    title: 'Alignment of Legend',
+    axis_title: 'Number of Employees',
+    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("line_graph", props: {
+    id: "legend-position-line-1",
+    gradient: false,
+    chart_data: data,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug'],
+    title: 'Layout of Legend',
+    axis_title: 'Number of Employees',
+    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("line_graph", props: {
+    id: "legend-position-line-2",
+    gradient: false,
+    chart_data: data,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug'],
+    title: 'Offset of Legend',
+    axis_title: 'Number of Employees',
+    legend: true,
+    layout: "vertical",
+    x: 100,
+    y: 10,
+    padding_top: "sm",
+}) %>

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

@@ -0,0 +1,83 @@
+import React from 'react'
+import { LineGraph, Title } from '../..'
+
+const data = [{
+  name: 'Installation',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}, {
+  name: 'Manufacturing',
+  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
+}, {
+  name: 'Sales & Distribution',
+  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
+}, {
+  name: 'Project Development',
+  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
+}, {
+  name: 'Other',
+  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
+}]
+
+const LineGraphLegendPosition = (props) => (
+  <div>
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="align | verticalAlign"
+    />
+    <LineGraph
+        align='right'
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="legend-position-line"
+        legend
+        title="Alignment of Legend"
+        verticalAlign="top"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        yAxisMin={0}
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="layout"
+    />
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="legend-position-line-1"
+        layout="vertical"
+        legend
+        title="Layout of Legend"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        yAxisMin={0}
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="x | y"
+    />
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="legend-position-line-2"
+        layout="vertical"
+        legend
+        title="Offset of Legend"
+        x={100}
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        y={10}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default LineGraphLegendPosition

data/app/pb_kits/playbook/pb_line_graph/docs/_line_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_line_graph/docs/example.yml

@@ -0,0 +1,18 @@
+examples:
+
+  rails:
+  - line_graph_default: Default
+  - line_graph_legend: Legend
+  - line_graph_legend_position: Legend Position
+  - line_graph_legend_nonclickable: Legend Nonclickable
+  - line_graph_height: Height
+  - line_graph_colors: Color Overrides
+
+
+  react:
+  - line_graph_default: Default
+  - line_graph_legend: Legend
+  - line_graph_legend_position: Legend Position
+  - line_graph_legend_nonclickable: Legend Nonclickable
+  - line_graph_height: Height
+  - line_graph_colors: Color Overrides

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

@@ -0,0 +1,6 @@
+export { default as LineGraphDefault } from './_line_graph_default.jsx'
+export { default as LineGraphLegend } from './_line_graph_legend.jsx'
+export { default as LineGraphLegendPosition } from './_line_graph_legend_position.jsx'
+export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
+export { default as LineGraphHeight } from './_line_graph_height.jsx'
+export { default as LineGraphColors } from './_line_graph_colors.jsx'

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

@@ -0,0 +1,9 @@
+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_borderless.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("list", props: {ordered: false, dark: false, borderless: true}) do %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_list/docs/_list_borderless.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import List from '../_list'
+import ListItem from '../_list_item'
+
+const ListBorderless = (props) => {
+  return (
+    <>
+      <List
+          borderless
+          {...props}
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListBorderless

data/app/pb_kits/playbook/pb_list/docs/_list_default.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_list/docs/_list_default.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import List from '../_list'
+import ListItem from '../_list_item'
+
+const ListDefault = () => {
+  return (
+    <>
+      <List>
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListDefault

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_left.jsx

@@ -0,0 +1,89 @@
+import React from 'react'
+
+import List from '../_list'
+import ListItem from '../_list_item'
+import Currency from '../../pb_currency/_currency'
+import Title from '../../pb_title/_title'
+
+const ListLayoutLeft = (props) => {
+  return (
+    <>
+      <List
+          layout="left"
+          {...props}
+      >
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+              {...props}
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+              {...props}
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+              {...props}
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+              {...props}
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+              {...props}
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+              {...props}
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+              {...props}
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+              {...props}
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+              {...props}
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+              {...props}
+          />
+        </ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListLayoutLeft

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/_list_layout_right.jsx

@@ -0,0 +1,88 @@
+import React from 'react'
+
+import List from '../_list'
+import ListItem from '../_list_item'
+
+import Currency from '../../pb_currency/_currency'
+import Title from '../../pb_title/_title'
+
+const ListLayoutRight = (props) => {
+  return (
+    <>
+      <List
+          layout="right"
+          {...props}
+      >
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+              {...props}
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+              {...props}
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+              {...props}
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+              {...props}
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+              {...props}
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+              {...props}
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+              {...props}
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+              {...props}
+          />
+        </ListItem>
+
+        <ListItem>
+          <Title
+              size={4}
+              text="Label"
+          />
+          <Currency
+              amount="2,000.50"
+              label="Caption"
+              size="sm"
+          />
+        </ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListLayoutRight

data/app/pb_kits/playbook/pb_list/docs/_list_lg.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false, size: "large"}) do %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_list/docs/_list_lg.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import List from '../_list'
+import ListItem from '../_list_item'
+
+const ListLg = (props) => {
+  return (
+    <>
+      <List
+          size="large"
+          {...props}
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListLg

data/app/pb_kits/playbook/pb_list/docs/_list_ordered.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("list", props: {ordered: true, dark: false, borderless: false}) do %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_list/docs/_list_ordered.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import List from '../_list'
+import ListItem from '../_list_item'
+
+const ListOrdered = (props) => {
+  return (
+    <>
+      <List
+          ordered
+          {...props}
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListOrdered

data/app/pb_kits/playbook/pb_list/docs/_list_xpadding.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false, xpadding: true}) do %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<%= pb_rails("list/item") do %> List Item <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_list/docs/_list_xpadding.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import List from '../_list'
+import ListItem from '../_list_item'
+
+const ListXpadding = (props) => {
+  return (
+    <>
+      <List
+          xpadding
+          {...props}
+      >
+        <ListItem>{'Item 1'}</ListItem>
+        <ListItem>{'Item 2'}</ListItem>
+        <ListItem>{'Item 3'}</ListItem>
+        <ListItem>{'Item 4'}</ListItem>
+        <ListItem>{'Item 5'}</ListItem>
+      </List>
+    </>
+  )
+}
+
+export default ListXpadding

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

@@ -0,0 +1,18 @@
+examples:
+  rails:
+  - list_default: Default
+  - list_lg: Large
+  - list_ordered: Ordered
+  - list_borderless: Borderless
+  - list_xpadding: Horizontal Padding
+  - list_layout_left: Layout Left
+  - list_layout_right: Layout Right
+ 
+  react:
+  - list_default: Default
+  - list_lg: Large
+  - list_ordered: Ordered
+  - list_borderless: Borderless
+  - list_xpadding: Horizontal Padding
+  - list_layout_left: Layout Left
+  - list_layout_right: Layout Right

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

@@ -0,0 +1,7 @@
+export { default as ListDefault } from './_list_default.jsx'
+export { default as ListXpadding } from './_list_xpadding.jsx'
+export { default as ListLayoutRight } from './_list_layout_right.jsx'
+export { default as ListLayoutLeft } from './_list_layout_left.jsx'
+export { default as ListLg } from './_list_lg.jsx'
+export { default as ListOrdered } from './_list_ordered.jsx'
+export { default as ListBorderless } from './_list_borderless.jsx'

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

@@ -0,0 +1 @@
+The loading kit is used to indicate to users that a page is still loading, or an action is still being processed.

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_light.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("loading_inline") %>
+
+<%= pb_rails("loading_inline", props: {
+	align: "center"
+}) %>
+
+<%= pb_rails("loading_inline", props: {
+	align: "right"
+}) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_light.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import LoadingInline from '../_loading_inline'
+
+const LoadingInlineLight = (props) => {
+  return (
+    <div>
+      <LoadingInline
+          {...props}
+      />
+      <LoadingInline
+          align="center"
+          {...props}
+      />
+      <LoadingInline
+          align="right"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default LoadingInlineLight