playbook_ui 12.18.0.pre.alpha.play786multilevelselectimprovements627 → 12.19.0.pre.alpha.movemarkdown637

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

@@ -1,16 +0,0 @@
-<% 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

@@ -1,24 +0,0 @@
-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

@@ -1,62 +0,0 @@
-<% 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

@@ -1,83 +0,0 @@
-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

@@ -1,17 +0,0 @@
-##### 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

@@ -1,18 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<%= 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

@@ -1,23 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<%= 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

@@ -1,18 +0,0 @@
-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

@@ -1,8 +0,0 @@
-<%= 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

@@ -1,89 +0,0 @@
-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

@@ -1,8 +0,0 @@
-<%= 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

@@ -1,88 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<%= 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

@@ -1,23 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<%= 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

@@ -1,23 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<%= 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

@@ -1,23 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,9 +0,0 @@
-<%= 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

@@ -1,23 +0,0 @@
-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