playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx

@@ -1,48 +0,0 @@
-import React from 'react'
-
-import TreemapChart from '../_treemap_chart'
-
-const chartData = [
-  {
-    name: "Pepperoni",
-    parent: "Toppings",
-    value: 600,
-  }, {
-    name: "Cheese",
-    parent: "Toppings",
-    value: 510,
-  }, {
-    name: "Mushroom",
-    parent: "Toppings",
-    value: 330,
-  },{
-    name: "Onions",
-    parent: "Toppings",
-    value: 250,
-  }, {
-    name: "Olives",
-    parent: "Toppings",
-    value: 204,
-  }, {
-    name: "Pineapple",
-    parent: "Toppings",
-    value: 90,
-  }, {
-    name: "Pizza Toppings",
-    id: "Toppings",
-  },
-]
-
-const TreemapChartColors = (props) => (
-  <div>
-    <TreemapChart
-        chartData={chartData}
-        colors={["data-4", "data-7", "#8E6E53", "#124732"]}
-        id="treemap-colors"
-        title="Favored Pizza Toppings"
-        {...props}
-    />
-  </div>
-)
-
-export default TreemapChartColors

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_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_treemap_chart/docs/_treemap_chart_default.html.erb

@@ -1,37 +0,0 @@
-<% data = [
-  {
-    name: "Pepperoni",
-    parent: "Toppings",
-    value: 600,
-  }, {
-    name: "Cheese",
-    parent: "Toppings",
-    value: 510,
-  }, {
-    name: "Mushroom",
-    parent: "Toppings",
-    value: 330,
-  },{
-    name: "Onions",
-    parent: "Toppings",
-    value: 250,
-  }, {
-    name: "Olives",
-    parent: "Toppings",
-    value: 204,
-  }, {
-    name: "Pineapple",
-    parent: "Toppings",
-    value: 90,
-  }, {
-    name: "Pizza Toppings",
-    id: "Toppings",
-  },
-] %>
-
-
-<%= pb_rails("treemap_chart", props: {
-    chart_data: data,
-    id: "treemap-default",
-    title: "Favored Pizza Toppings",
-}) %>

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx

@@ -1,47 +0,0 @@
-import React from 'react'
-
-import TreemapChart from '../_treemap_chart'
-
-const chartData = [
-  {
-    name: "Pepperoni",
-    parent: "Toppings",
-    value: 600,
-  }, {
-    name: "Cheese",
-    parent: "Toppings",
-    value: 510,
-  }, {
-    name: "Mushroom",
-    parent: "Toppings",
-    value: 330,
-  },{
-    name: "Onions",
-    parent: "Toppings",
-    value: 250,
-  }, {
-    name: "Olives",
-    parent: "Toppings",
-    value: 204,
-  }, {
-    name: "Pineapple",
-    parent: "Toppings",
-    value: 90,
-  }, {
-    name: "Pizza Toppings",
-    id: "Toppings",
-  },
-]
-
-const TreemapChartDefault = (props) => (
-  <div>
-    <TreemapChart
-        chartData={chartData}
-        id="treemap-default"
-        title="Favored Pizza Toppings"
-        {...props}
-    />
-  </div>
-)
-
-export default TreemapChartDefault

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md

@@ -1,3 +0,0 @@
-Points are automatically arranged by their `value` size.
-
-By default, point colors are assigned sequentially from the global `data` colors. Note that data points without a value (such as parent nodes) will still take on the next available color.

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb

@@ -1,79 +0,0 @@
-<% data = [
-  {
-    name: "Evergreen",
-    id: "Evergreen",
-    color: "#0056CF",
-  }, {
-    name: "Pine",
-    id: "Pine",
-    parent: "Evergreen",
-    value: 300,
-    color: "#477BC4",
-  }, {
-    name: "Ponderosa Pine",
-    parent: "Pine",
-    value: 50,
-  }, {
-    name: "Scots Pine",
-    parent: "Pine",
-    value: 150,
-  }, {
-    name: "White Pine",
-    parent: "Pine",
-    value: 100,
-  }, {
-    name: "Douglas Fir",
-    parent: "Evergreen",
-    value: 150,
-  }, {
-    name: "Juniper",
-    parent: "Evergreen",
-    value: 80,
-  }, {
-    name: "Hemlock",
-    parent: "Evergreen",
-    value: 30,
-  }, {
-    name: "Deciduous",
-    id: "Deciduous",
-    color: "#F9BB00",
-  }, {
-    name: "Oak",
-    parent: "Deciduous",
-    value: 80,
-  }, {
-    name: "Maple",
-    id: "Maple",
-    parent: "Deciduous",
-    value: 180,
-    color: "#F7CE52",
-  }, {
-    name: "Red Maple",
-    parent: "Maple",
-    value: 80,
-  }, {
-    name: "Sugar Maple",
-    parent: "Maple",
-    value: 100,
-  }, {
-    name: "Beech",
-    parent: "Deciduous",
-    value: 50,
-  }, {
-    name: "Willow",
-    parent: "Deciduous",
-    value: 100,
-  }, {
-    name: "Juniper",
-    parent: "Deciduous",
-    value: 90,
-  },
-] %>
-
-<%= pb_rails("treemap_chart", props: {
-    chart_data: data,
-    drillable: true,
-    grouped: true,
-    id: "treemap-drillable",
-    title: "Drillable Grouped Tree Species",
-}) %>

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx

@@ -1,90 +0,0 @@
-import React from 'react'
-
-import TreemapChart from '../_treemap_chart'
-
-const chartData = [
-  {
-    name: "Evergreen",
-    id: "Evergreen",
-    color: "#0056CF",
-  }, {
-    name: "Pine",
-    id: "Pine",
-    parent: "Evergreen",
-    value: 300,
-    color: "#477BC4",
-  }, {
-    name: "Ponderosa Pine",
-    parent: "Pine",
-    value: 50,
-  }, {
-    name: "Scots Pine",
-    parent: "Pine",
-    value: 150,
-  }, {
-    name: "White Pine",
-    parent: "Pine",
-    value: 100,
-  }, {
-    name: "Douglas Fir",
-    parent: "Evergreen",
-    value: 150,
-  }, {
-    name: "Juniper",
-    parent: "Evergreen",
-    value: 80,
-  }, {
-    name: "Hemlock",
-    parent: "Evergreen",
-    value: 30,
-  }, {
-    name: "Deciduous",
-    id: "Deciduous",
-    color: "#F9BB00",
-  }, {
-    name: "Oak",
-    parent: "Deciduous",
-    value: 80,
-  }, {
-    name: "Maple",
-    id: "Maple",
-    parent: "Deciduous",
-    value: 180,
-    color: "#F7CE52",
-  }, {
-    name: "Red Maple",
-    parent: "Maple",
-    value: 80,
-  }, {
-    name: "Sugar Maple",
-    parent: "Maple",
-    value: 100,
-  }, {
-    name: "Beech",
-    parent: "Deciduous",
-    value: 50,
-  }, {
-    name: "Willow",
-    parent: "Deciduous",
-    value: 100,
-  }, {
-    name: "Juniper",
-    parent: "Deciduous",
-    value: 90,
-  },
-]
-
-const TreemapChartDrillable = (props) => (
-  <div>
-    <TreemapChart
-        chartData={chartData}
-        drillable
-        grouped
-        id="treemap-drillable"
-        title="Drillable Grouped Tree Species"
-        {...props}
-    />
-  </div>
-)
-
-export default TreemapChartDrillable

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md

@@ -1 +0,0 @@
-Adding the `drillable` prop allows the tree to be traversed up and down by clicking into each box. Relationships are established through the `chartData`, detailed in the <a href="#treemap-grouped-data">Grouped Data section above</a>.

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb

@@ -1,54 +0,0 @@
-<% data = [
-  {
-    name: 'Meat',
-    id: 'Meat',
-    color: "#0056CF",
-  }, {
-    name: 'Pepperoni',
-    parent: 'Meat',
-    value: 250,
-  }, {
-    name: 'Meatball',
-    parent: 'Meat',
-    value: 400,
-  }, {
-    name: "Anchovy",
-    parent: 'Meat',
-    value: 40,
-  }, {
-    name: 'Vegetarian',
-    id: 'Vegetarian',
-    color: "#F9BB00",
-  }, {
-    name: 'Onions',
-    parent: 'Vegetarian',
-    value: 300,
-  }, {
-    name: 'Pineapple',
-    parent: 'Vegetarian',
-    value: 90,
-  }, {
-    name: "Peppers",
-    parent: 'Vegetarian',
-    value: 80,
-  }, {
-    name: "Specialty",
-    id: "Specialty",
-    color: "#9E64E9",
-  },{
-    name: "Buffalo Chicken",
-    parent: "Specialty",
-    value: 400,
-  }, {
-    name: "Supreme",
-    parent: "Specialty",
-    value: 150,
-  }
-] %>
-
-<%= pb_rails("treemap_chart", props: {
-    chart_data: data,
-    grouped: true,
-    id: "treemap-grouped",
-    title: "Grouped Toppings",
-}) %>

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx

@@ -1,65 +0,0 @@
-import React from 'react'
-
-import TreemapChart from '../_treemap_chart'
-
-const chartData = [
-  {
-    name: 'Meat',
-    id: 'Meat',
-    color: "#0056CF",
-  }, {
-    name: 'Pepperoni',
-    parent: 'Meat',
-    value: 250,
-  }, {
-    name: 'Meatball',
-    parent: 'Meat',
-    value: 400,
-  }, {
-    name: "Anchovy",
-    parent: 'Meat',
-    value: 40,
-  }, {
-    name: 'Vegetarian',
-    id: 'Vegetarian',
-    color: "#F9BB00",
-  }, {
-    name: 'Onions',
-    parent: 'Vegetarian',
-    value: 300,
-  }, {
-    name: 'Pineapple',
-    parent: 'Vegetarian',
-    value: 90,
-  }, {
-    name: "Peppers",
-    parent: 'Vegetarian',
-    value: 80,
-  }, {
-    name: "Specialty",
-    id: "Specialty",
-    color: "#9E64E9",
-  },{
-    name: "Buffalo Chicken",
-    parent: "Specialty",
-    value: 400,
-  }, {
-    name: "Supreme",
-    parent: "Specialty",
-    value: 150,
-  }
-]
-
-const TreemapChartGroupedData = (props) => (
-  <div>
-    <TreemapChart
-        chartData={chartData}
-        grouped
-        id="treemap-grouped-data"
-        title="Grouped Toppings"
-        {...props}
-    />
-  </div>
-)
-
-export default TreemapChartGroupedData

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md

@@ -1,3 +0,0 @@
-Data can be grouped into distinct segments by specifying the relationship in the `chartData`. For a point to be a parent, it needs an `id` of type `string` included in its object. Any other data points may then reference that `id` as their `parent` value to establish the tree structure.
-
-Parents can also be passed a custom color to be applied to all of its child points.

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb

@@ -1,37 +0,0 @@
-<% data = [
-  {
-    name: "Pepperoni",
-    parent: "Toppings",
-    value: 600,
-  }, {
-    name: "Cheese",
-    parent: "Toppings",
-    value: 510,
-  }, {
-    name: "Mushroom",
-    parent: "Toppings",
-    value: 330,
-  },{
-    name: "Onions",
-    parent: "Toppings",
-    value: 250,
-  }, {
-    name: "Olives",
-    parent: "Toppings",
-    value: 204,
-  }, {
-    name: "Pineapple",
-    parent: "Toppings",
-    value: 90,
-  }, {
-    name: "Pizza Toppings",
-    id: "Toppings",
-  },
-] %>
-
-<%= pb_rails("treemap_chart", props: {
-    chart_data: data,
-    id: "treemap-tooltip",
-    title: "Favored Pizza Toppings",
-    tooltip_html: "<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>",
-}) %>

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx

@@ -1,48 +0,0 @@
-import React from 'react'
-
-import TreemapChart from '../_treemap_chart'
-
-const chartData = [
-  {
-    name: "Pepperoni",
-    parent: "Toppings",
-    value: 600,
-  }, {
-    name: "Cheese",
-    parent: "Toppings",
-    value: 510,
-  }, {
-    name: "Mushroom",
-    parent: "Toppings",
-    value: 330,
-  },{
-    name: "Onions",
-    parent: "Toppings",
-    value: 250,
-  }, {
-    name: "Olives",
-    parent: "Toppings",
-    value: 204,
-  }, {
-    name: "Pineapple",
-    parent: "Toppings",
-    value: 90,
-  }, {
-    name: "Pizza Toppings",
-    id: "Toppings",
-  },
-]
-
-const TreemapChartTooltip = (props) => (
-  <div>
-    <TreemapChart
-        chartData={chartData}
-        id="treemap-tooltip"
-        title="Favored Pizza Toppings"
-        tooltipHtml= '<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>'
-        {...props}
-    />
-  </div>
-)
-
-export default TreemapChartTooltip

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md

@@ -1,3 +0,0 @@
-A custom tooltip format can be specified. The desired format can be passed as a `string` of custom HTML to the `tooltipHtml` prop.
-
-`{point.name}` and `{point.value}` are useful values that can be referenced for each point in the graph.

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

@@ -1,15 +0,0 @@
-examples:
-
-  rails:
-  - treemap_chart_default: Default
-  - treemap_chart_grouped_data: Grouped Data
-  - treemap_chart_drillable: Drillable
-  - treemap_chart_colors: Color Overrides
-  - treemap_chart_tooltip: Tooltip Customization
-
-  react:
-  - treemap_chart_default: Default
-  - treemap_chart_grouped_data: Grouped Data
-  - treemap_chart_drillable: Drillable
-  - treemap_chart_colors: Color Overrides
-  - treemap_chart_tooltip: Tooltip Customization

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

@@ -1,5 +0,0 @@
-export { default as TreemapChartDefault } from './_treemap_chart_default.jsx'
-export { default as TreemapChartGroupedData } from './_treemap_chart_grouped_data.jsx'
-export { default as TreemapChartDrillable } from './_treemap_chart_drillable.jsx'
-export { default as TreemapChartColors } from './_treemap_chart_colors.jsx'
-export { default as TreemapChartTooltip } from './_treemap_chart_tooltip.jsx'

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx

@@ -1,62 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { components } from 'react-select'
-
-import Badge from '../../pb_badge/_badge'
-import FormPill from '../../pb_form_pill/_form_pill'
-
-type Props = {
-  data: object,
-  multiValueTemplate: any,
-  removeProps: any,
-  selectProps: any,
-}
-
-const MultiValue = (props: Props) => {
-  const { removeProps } = props
-  const { imageUrl, label } = props.data
-  const { multiKit } = props.selectProps
-
-  const formPillProps = {
-    marginRight: 'xs',
-    name: label,
-  }
-
-  if (typeof imageUrl === 'string') formPillProps.avatarUrl = imageUrl
-
-  return (
-    <components.MultiValueContainer
-        className="text_input_multivalue_container"
-        {...props}
-    >
-      <If condition={multiKit === 'badge'}>
-        <Badge
-            closeProps={removeProps}
-            removeIcon
-            text={label}
-            variant="primary"
-        />
-        <Else />
-        <If condition={imageUrl}>
-          <FormPill
-              avatarUrl={imageUrl}
-              closeProps={removeProps}
-              marginRight="xs"
-              name={label}
-              size={multiKit === 'smallPill' ? 'small' : ''}
-          />
-          <Else />
-          <FormPill
-              closeProps={removeProps}
-              marginRight="xs"
-              size={multiKit === 'smallPill' ? 'small' : ''}
-              text={label}
-          />
-        </If>
-      </If>
-    </components.MultiValueContainer>
-  )
-}
-
-export default MultiValue

data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx

@@ -1,39 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { components } from 'react-select'
-
-import User from '../../pb_user/_user'
-
-const Option = (props: any) => {
-  const {
-    imageUrl,
-  } = props.data
-  const { valueComponent } = props.selectProps
-
-  return (
-    <components.Option {...props}>
-      <div>
-        <Choose>
-          <When condition={!valueComponent && imageUrl}>
-            <User
-                align="left"
-                avatarUrl={imageUrl}
-                dark={props.selectProps.dark}
-                name={props.label}
-                orientation="horizontal"
-            />
-          </When>
-          <When condition={valueComponent}>
-            { valueComponent(props.data) }
-          </When>
-          <Otherwise>
-            {props.label}
-          </Otherwise>
-        </Choose>
-      </div>
-    </components.Option>
-  )
-}
-
-export default Option

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

@@ -1 +0,0 @@
-Typeahead is auto suggestion or completion based on what the user is starting to type, gets refined as the user types more.

data/app/pb_kits/playbook/pb_typeahead/docs/_footer.md

@@ -1,2 +0,0 @@
-### Things to Avoid
-Avoid using on questionaires, surverys, text input and textarea when users answers/inputs will be individualized.