playbook_ui 12.19.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown638 → 12.19.0.pre.alpha.movemarkdown639

data/app/pb_kits/playbook/pb_badge/docs/_badge_colors.html.erb

@@ -1,106 +0,0 @@
-<div>
-  <%= pb_rails("badge", props: {
-    text: "+1",
-    variant: "primary",
-    rounded: true
-  }) %>
-
-  <%= pb_rails("badge", props: {
-    text: "+4",
-    variant: "primary"
-  }) %>
-
-  <%= pb_rails("badge", props: {
-    text: "+1000",
-    variant: "primary",
-  }) %>
-</div>
-
-<div>
-  <%= pb_rails("badge", props: {
-    text: "+1",
-    variant: "success",
-    rounded: true
-  }) %>
-
-  <%= pb_rails("badge", props: {
-    text: "+4",
-    variant: "success"
-  }) %>
-
-  <%= pb_rails("badge", props: {
-    text: "+1000",
-    variant: "success"
-  }) %>
-</div>
-
-<div>
-  <%= pb_rails("badge", props: {
-    text: "+1",
-    variant: "warning",
-    rounded: true
-  }) %>
-
-  <%= pb_rails("badge", props: {
-    text: "+4",
-    variant: "warning"
-  }) %>
-
-  <%= pb_rails("badge", props: {
-    text: "+1000",
-    variant: "warning"
-  }) %>
-</div>
-
-<div>
-  <%= pb_rails("badge", props: {
-    text: "+1",
-    variant: "error",
-    rounded: true
-  }) %>
-
-  <%= pb_rails("badge", props: {
-    text: "+4",
-    variant: "error"
-  }) %>
-
-  <%= pb_rails("badge", props: {
-    text: "+1000",
-    variant: "error"
-  }) %>
-</div>
-
-<div>
-  <%= pb_rails("badge", props: {
-    text: "+1",
-    variant: "info",
-    rounded: true
-  }) %>
-
-  <%= pb_rails("badge", props: {
-    text: "+4",
-    variant: "info"
-  }) %>
-
-  <%= pb_rails("badge", props: {
-    text: "+1000",
-    variant: "info"
-  }) %>
-</div>
-
-<div>
-  <%= pb_rails("badge", props: {
-    text: "+1",
-    rounded: true
-  }) %>
-
-  <%= pb_rails("badge", props: {
-    text: "+4",
-    variant: "neutral"
-  }) %>
-
-  <%= pb_rails("badge", props: {
-    text: "+1000",
-    variant: "neutral"
-  }) %>
-</div>

data/app/pb_kits/playbook/pb_badge/docs/_badge_colors.jsx

@@ -1,160 +0,0 @@
-import React from 'react'
-import Badge from '../_badge'
-
-const BadgeColors = (props) => {
-  return (
-    <div>
-      <div>
-        <Badge
-            rounded
-            text="+1"
-            variant="primary"
-            {...props}
-        />
-
-        &nbsp;
-
-        <Badge
-            text="+4"
-            variant="primary"
-            {...props}
-        />
-
-        &nbsp;
-
-        <Badge
-            text="+1000"
-            variant="primary"
-            {...props}
-        />
-      </div>
-
-      <div>
-        <Badge
-            rounded
-            text="+1"
-            variant="success"
-            {...props}
-        />
-
-        &nbsp;
-
-        <Badge
-            text="+4"
-            variant="success"
-            {...props}
-        />
-
-        &nbsp;
-
-        <Badge
-            text="+1000"
-            variant="success"
-            {...props}
-        />
-      </div>
-
-      <div>
-        <Badge
-            rounded
-            text="+1"
-            variant="warning"
-            {...props}
-        />
-
-        &nbsp;
-
-        <Badge
-            text="+4"
-            variant="warning"
-            {...props}
-        />
-
-        &nbsp;
-
-        <Badge
-            text="+1000"
-            variant="warning"
-            {...props}
-        />
-      </div>
-
-      <div>
-        <Badge
-            rounded
-            text="+1"
-            variant="error"
-            {...props}
-        />
-
-        &nbsp;
-
-        <Badge
-            text="+4"
-            variant="error"
-            {...props}
-        />
-
-        &nbsp;
-
-        <Badge
-            text="+1000"
-            variant="error"
-            {...props}
-        />
-      </div>
-
-      <div>
-        <Badge
-            rounded
-            text="+1"
-            variant="info"
-            {...props}
-        />
-
-        &nbsp;
-
-        <Badge
-            text="+4"
-            variant="info"
-            {...props}
-        />
-
-        &nbsp;
-
-        <Badge
-            text="+1000"
-            variant="info"
-            {...props}
-        />
-      </div>
-
-      <div>
-        <Badge
-            rounded
-            text="+1"
-            variant="neutral"
-            {...props}
-        />
-
-        &nbsp;
-
-        <Badge
-            text="+4"
-            variant="neutral"
-            {...props}
-        />
-
-        &nbsp;
-
-        <Badge
-            text="+1000"
-            variant="neutral"
-            {...props}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default BadgeColors

data/app/pb_kits/playbook/pb_badge/docs/_badge_default.html.erb

@@ -1,16 +0,0 @@
-<div>
-  <%= pb_rails("badge", props: {
-    text: "+1",
-    variant: "primary"
-  }) %>
-
-  <%= pb_rails("badge", props: {
-    text: "+4",
-    variant: "primary"
-  }) %>
-
-  <%= pb_rails("badge", props: {
-    text: "+1000",
-    variant: "primary"
-  }) %>
-</div>

data/app/pb_kits/playbook/pb_badge/docs/_badge_default.jsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import Badge from '../_badge'
-
-const BadgeDefault = (props) => {
-  return (
-    <div>
-      <Badge
-          text="+1"
-          variant="primary"
-          {...props}
-      />
-
-      &nbsp;
-
-      <Badge
-          text="+4"
-          variant="primary"
-          {...props}
-      />
-
-      &nbsp;
-
-      <Badge
-          text="+1000"
-          variant="primary"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default BadgeDefault

data/app/pb_kits/playbook/pb_badge/docs/_badge_rounded.html.erb

@@ -1,19 +0,0 @@
-<div>
-  <%= pb_rails("badge", props: {
-    text: "+1",
-    variant: "primary",
-    rounded: true
-  }) %>
-
-  <%= pb_rails("badge", props: {
-    text: "+4",
-    variant: "primary",
-    rounded: true
-  }) %>
-
-  <%= pb_rails("badge", props: {
-    text: "+1000",
-    variant: "primary",
-    rounded: true
-  }) %>
-</div>

data/app/pb_kits/playbook/pb_badge/docs/_badge_rounded.jsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import Badge from '../_badge'
-
-const BadgeRounded = (props) => {
-  return (
-    <div>
-      <Badge
-          rounded
-          text="+1"
-          variant="primary"
-          {...props}
-      />
-
-      &nbsp;
-
-      <Badge
-          rounded
-          text="+4"
-          variant="primary"
-          {...props}
-      />
-
-      &nbsp;
-
-      <Badge
-          rounded
-          text="+1000"
-          variant="primary"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default BadgeRounded

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

@@ -1 +0,0 @@
-Badges can be used for notification, tags, and status. They are used for count and numbers.

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

@@ -1,11 +0,0 @@
-examples:
-  rails:
-  - badge_default: Rectangle
-  - badge_rounded: Rounded
-  - badge_colors: Colors
- 
-
-  react:
-  - badge_default: Rectangle
-  - badge_rounded: Rounded
-  - badge_colors: Colors

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

@@ -1,3 +0,0 @@
-export { default as BadgeDefault } from './_badge_default'
-export { default as BadgeRounded } from './_badge_rounded'
-export { default as BadgeColors } from './_badge_colors'

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

@@ -1,26 +0,0 @@
-<% data = [{
-    name: 'Installation',
-    data: [1475,200,3000,654,656]
-}, {
-    name: 'Manufacturing',
-    data: [4434,524,2320,440,500]
-}, {
-    name: 'Sales & Distribution',
-    data: [3387,743,1344,434,440,]
-}, {
-    name: 'Project Development',
-    data: [3227,878,999,780,1000]
-}, {
-    name: 'Other',
-    data: [1111,677,3245,500,200]
-}] %>
-
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id: "bar-colors",
-    y_axis_min: 0,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Bar Graph with Custom Data Colors',
-    colors: ['data-4', 'data-5', 'data-6', 'data-7', 'data-8']
-}) %>

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

@@ -1,37 +0,0 @@
-import React from 'react'
-
-import BarGraph from '../_bar_graph'
-
-const chartData = [{
-  name: 'Installation',
-  data: [1475, 200, 3000, 654, 656],
-}, {
-  name: 'Manufacturing',
-  data: [4434, 524, 2320, 440, 500],
-}, {
-  name: 'Sales & Distribution',
-  data: [3387, 743, 1344, 434, 440],
-}, {
-  name: 'Project Development',
-  data: [3227, 878, 999, 780, 1000],
-}, {
-  name: 'Other',
-  data: [1111, 677, 3245, 500, 200],
-}]
-
-const BarGraphColors = (props) => (
-  <div>
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
-        id="bar-colors"
-        title="Bar Graph with Custom Data Colors"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
-    />
-  </div>
-)
-
-export default BarGraphColors

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

@@ -1,2 +0,0 @@
-Custom data `colors` allow for color customization to match the needs of business requirements.
-Pass the prop colors and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`

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

@@ -1,26 +0,0 @@
-<% data = [{
-    name: 'Installation',
-    data: [1475,200,3000,654,656]
-}, {
-    name: 'Manufacturing',
-    data: [4434,524,2320,440,500]
-}, {
-    name: 'Sales & Distribution',
-    data: [3387,743,1344,434,440,]
-}, {
-    name: 'Project Development',
-    data: [3227,878,999,780,1000]
-}, {
-    name: 'Other',
-    data: [1111,677,3245,500,200]
-}] %>
-
-<%= 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'],
-    subtitle: 'Source: thesolarfoundation.com',
-    title: 'Solar Employment Growth by Sector, 2010-2016',
-}) %>

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

@@ -1,37 +0,0 @@
-import React from 'react'
-
-import BarGraph from '../_bar_graph'
-
-const chartData = [{
-  name: 'Installation',
-  data: [1475, 200, 3000, 654, 656],
-}, {
-  name: 'Manufacturing',
-  data: [4434, 524, 2320, 440, 500],
-}, {
-  name: 'Sales & Distribution',
-  data: [3387, 743, 1344, 434, 440],
-}, {
-  name: 'Project Development',
-  data: [3227, 878, 999, 780, 1000],
-}, {
-  name: 'Other',
-  data: [1111, 677, 3245, 500, 200],
-}]
-
-const BarGraphDefault = (props) => (
-  <div>
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        id="bar-default"
-        subTitle="Source: thesolarfoundation.com"
-        title="Solar Employment Growth by Sector, 2010-2016"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
-    />
-  </div>
-)
-
-export default BarGraphDefault

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

@@ -1,26 +0,0 @@
-<% data = [{
-    name: 'Number of Installations',
-    data: [1475,200,3000,654,656]
-}] %>
-
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id: "bar-fixed-height",
-    y_axis_min: 0,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Fixed Height (300px)',
-    height: '300'
-}) %>
-
-<br /><br />
-
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id: "bar-percentage-height",
-    y_axis_min: 0,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Percentage Height (50%)',
-    height: '50%'
-}) %>

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

@@ -1,39 +0,0 @@
-import React from 'react'
-
-import BarGraph from '../_bar_graph'
-
-const chartData = [{
-  name: 'Number of Installations',
-  data: [1475, 200, 3000, 654, 656],
-}]
-
-const BarGraphDefault = (props) => (
-  <div>
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        height="300"
-        id="bar-fixed-height"
-        title="Fixed Height (300px)"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
-        yAxisMin={0}
-        {...props}
-    />
-
-    <br />
-    <br />
-
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        height="50%"
-        id="bar-percentage-height"
-        title="Percentage Height (50%)"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
-        yAxisMin={0}
-        {...props}
-    />
-  </div>
-)
-
-export default BarGraphDefault

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

@@ -1,14 +0,0 @@
-<% data = [{
-    name: 'Number of Installations',
-    data: [1475,200,3000,654,656]
-}] %>
-
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id: "bar-test-2",
-    y_axis_min: 0,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Bar Graph with Legend',
-    legend: true,
-}) %>

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

@@ -1,24 +0,0 @@
-import React from 'react'
-import { BarGraph } from '../..'
-
-const chartData = [{
-  name: 'Number of Installations',
-  data: [1475, 200, 3000, 654, 656],
-}]
-
-const BarGraphLegend = (props) => (
-  <div>
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        id="bar-test-2"
-        legend
-        title="Bar Graph with Legend"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
-    />
-  </div>
-)
-
-export default BarGraphLegend

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

@@ -1,15 +0,0 @@
-<% data = [{
-    name: 'Number of Installations',
-    data: [1475,200,3000,654,656]
-}] %>
-
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id: "bar-test-3",
-    y_axis_min: 0,
-    x_axis_categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Bar Graph with Legend Non Clickable',
-    legend: true,
-    toggle_legend_click: false,
-}) %>

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

@@ -1,25 +0,0 @@
-import React from 'react'
-import { BarGraph } from '../..'
-
-const chartData = [{
-  name: 'Number of Installations',
-  data: [1475, 200, 3000, 654, 656],
-}]
-
-const BarGraphLegendNonClickable = (props) => (
-  <div>
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        id="bar-test-3"
-        legend
-        title="Bar Graph with Legend Non Clickable"
-        toggleLegendClick={false}
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
-    />
-  </div>
-)
-
-export default BarGraphLegendNonClickable