playbook_ui_docs 15.7.0.pre.alpha.play263313229 → 15.7.0.pre.alpha.play270013253

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx

@@ -1,80 +0,0 @@
-import React from 'react'
-
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const GaugeSizing = (props) => (
-  <div>
-    <Flex
-        align="center"
-        wrap
-        {...props}
-    >
-      <FlexItem
-          fixedSize="400px"
-          overflow="hidden"
-          shrink
-          {...props}
-      >
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={Highcharts.merge({}, gaugeTheme, {
-              series: [{ data: [{ name: "Point 1", y: 100 }] }],
-            })}
-        />
-      </FlexItem>
-      <FlexItem
-          fixedSize="300px"
-          overflow="hidden"
-          shrink
-          {...props}
-      >
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={Highcharts.merge({}, gaugeTheme, {
-              series: [{ data: [{ name: "Point 2", y: 75 }] }],
-            })}
-        />
-      </FlexItem>
-      <FlexItem
-          fixedSize="200px"
-          overflow="hidden"
-          shrink
-          {...props}
-      >
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={Highcharts.merge({}, gaugeTheme, {
-              series: [{ data: [{ name: "Point 3", y: 50 }] }],
-            })}
-        />
-      </FlexItem>
-      <FlexItem
-          fixedSize="125px"
-          overflow="hidden"
-          shrink
-          {...props}
-      >
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={Highcharts.merge({}, gaugeTheme, {
-              chart: {
-                height: "100%",
-              },
-              series: [{ data: [{ name: "Point 4", y: 25 }] }],
-            })}
-        />
-      </FlexItem>
-    </Flex>
-  </div>
-)
-
-export default GaugeSizing

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.md

@@ -1,2 +0,0 @@
-### Gauge resizes dynamically to fit whatever element it's placed within.
-#### Note: set `overflow` to hidden on the parent element when nesting gauges inside of a flex items to best respond to shrinking screens.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.html.erb

@@ -1,14 +0,0 @@
-<% data = [
-  {
-    name: 'Score',
-    value: 780,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-title",
-  chart_data: data,
-  min: 300,
-  max: 850,
-  title: "Credit Score",
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data = [{ name: "Score", y: 780 }]
-
-const baseOptions = {
-  title: {
-    text: "Credit Score",
-  },
-  yAxis: {
-    min: 300,
-    max: 850,
-  },
-  series: [{ data: data }],
-};
-
-const GaugeTitle = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          id="gauge-title"
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugeTitle;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.html.erb

@@ -1,29 +0,0 @@
-<% data1 = [
-  {
-    name: 'Data Used',
-    value: 32,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-units1",
-  chart_data: data1,
-  title: "Data Usage",
-  suffix: "GB"
-}) %>
-
-<% data2 = [
-  {
-    name: 'Sales to Date',
-    value: 65,
-  }
-]%>
-
-<%= pb_rails("gauge", props: {
-  id: "gauge-units2",
-  chart_data: data2,
-  title: "Sales Goal",
-  prefix: "$",
-  suffix: "k",
-
-}) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx

@@ -1,72 +0,0 @@
-import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data1 = [
-  { name: 'Data Used', y: 32 },
-]
-const data2 = [
-  { name: 'Sales to Date', y: 65 },
-]
-
-const baseOptions1 = {
-  title: {
-    text: "Data Usage",
-  },
-  series: [{ data: data1 }],
-  plotOptions: {
-    solidgauge: {
-      dataLabels: {
-        format:
-          `<span class="fix">{y:,f}</span>` +
-          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">GB</span>`,
-      },
-    },
-  },
-};
-const baseOptions2 = {
-  title: {
-    text: "Sales Goal",
-  },
-  series: [{ data: data2 }],
-  plotOptions: {
-    solidgauge: {
-      dataLabels: {
-        format:
-          `<span y="28" style="fill: ${colors.text_lt_light}; font-size: ${typography.text_base};">$</span>` +
-          `<span class="fix" y="38">{y:,f}</span>` +
-          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">k</span>`,
-      },
-    },
-  },
-};
-
-const GaugeUnits = () => {
-  const options1 = Highcharts.merge({}, gaugeTheme, baseOptions1);
-  const options2 = Highcharts.merge({}, gaugeTheme, baseOptions2);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          id="gauge-units1"
-          options={options1}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          id="gauge-units2"
-          options={options2}
-      />
-    </div>
-  );
-};
-
-export default GaugeUnits;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units_react.md

@@ -1 +0,0 @@
-Use custom CSS with classes or inline styles (as shown in these docs) to customize the appearance of prefix and suffix units.

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

@@ -1,27 +0,0 @@
-examples:
-
-  rails:
-  - gauge_default: Default
-  - gauge_disable_animation: Disable Animation
-  - gauge_title: Title
-  - gauge_units: Units
-  - gauge_full_circle: Full Circle
-  - gauge_min_max: Min Max Labels
-  - gauge_sizing: Sizing
-  - gauge_height: Height
-  - gauge_colors: Color Overrides
-  - gauge_complex: Complex
-
-
-  react:
-  - gauge_default: Default
-  - gauge_disable_animation: Disable Animation
-  - gauge_title: Title
-  - gauge_units: Units
-  - gauge_full_circle: Full Circle
-  - gauge_min_max: Min Max Labels
-  - gauge_sizing: Sizing
-  - gauge_height: Height
-  - gauge_live_data: Live Data
-  - gauge_colors: Color Overrides
-  - gauge_complex: Complex

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

@@ -1,11 +0,0 @@
-export { default as GaugeDefault } from './_gauge_default.jsx'
-export { default as GaugeDisableAnimation } from './_gauge_disable_animation.jsx'
-export { default as GaugeFullCircle } from './_gauge_full_circle.jsx'
-export { default as GaugeHeight } from './_gauge_height.jsx'
-export { default as GaugeMinMax } from './_gauge_min_max.jsx'
-export { default as GaugeSizing } from './_gauge_sizing.jsx'
-export { default as GaugeTitle } from './_gauge_title.jsx'
-export { default as GaugeUnits } from './_gauge_units.jsx'
-export { default as GaugeLiveData } from './_gauge_live_data.jsx'
-export { default as GaugeColors } from './_gauge_colors.jsx'
-export { default as GaugeComplex } from './_gauge_complex.jsx'

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

@@ -1 +0,0 @@
-**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import lineGraphTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

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

@@ -1,26 +0,0 @@
-<% data = [{
-    name: 'Installation',
-    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
-}, {
-    name: 'Manufacturing',
-    data: [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434]
-}, {
-    name: 'Sales & Distribution',
-    data: [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387]
-}, {
-    name: 'Project Development',
-    data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227]
-}, {
-    name: 'Other',
-    data: [nil, nil, nil, 3112, 4989, 5816, 15274, 18111]
-}] %>
-
-<%= pb_rails("line_graph", props: { 
-    id: "line-colors", 
-    gradient: false, 
-    chart_data: data, 
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Line Graph with Custom Data Colors', 
-    axis_title: 'Number of Employees',
-    colors: ['data-4', 'data-5', 'data-6', 'data-7', 'data-8']
-}) %>

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

@@ -1,56 +0,0 @@
-import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import colors from '../../tokens/exports/_colors.module.scss'
-
-const data = [{
-  name: 'Installation',
-  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
-}, {
-  name: 'Manufacturing',
-  data: [24916, 28064, 29742, 40851, 50590, 65282, 70121, 85434],
-}, {
-  name: 'Sales & Distribution',
-  data: [11744, 17722, 16005, 19771, 25185, 28377, 36147, 43387],
-}, {
-  name: 'Project Development',
-  data: [5332, 6344, 7988, 12169, 15112, 14452, 22400, 30227],
-}, {
-  name: 'Other',
-  data: [null, null, null, 3112, 4989, 5816, 15274, 18111],
-}]
-
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const LineGraphColors = () => {
-  const chartOptions = {
-    title: {
-      text: 'Line Graph with Custom Data Colors',
-    },
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-    series: data,
-    colors: [colors.data_4, colors.data_5, "#144075", colors.data_7, colors.data_8]
-  }
-
-  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default LineGraphColors

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors_rails.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_line_graph/docs/_line_graph_colors_react.md

@@ -1,3 +0,0 @@
-
-Custom data colors allow for color customization to match the needs of business requirements. 
-Import the colors from Playbook's tokens, then set custom colors in the colors array using the desired color variables. Hex colors are also available `eg: #CA0095`.

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

@@ -1,26 +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("line_graph", props: { 
-    id: "line-default", 
-    gradient: false, 
-    chart_data: data, 
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Solar Employment Growth by Sector, 2010-2016', 
-    subtitle: 'Source: thesolarfoundation.com', 
-    axis_title: 'Number of Employees' 
-}) %>

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

@@ -1,52 +0,0 @@
-import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-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 categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const chartOptions = {
-  series: data,
-  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
-  subtitle: { text: "Source: thesolarfoundation.com" },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-}
-
-const LineGraphDefault = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)
-
-  return(
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default LineGraphDefault

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

@@ -1,26 +0,0 @@
-<% data = [{
-    name: 'Number of Installations',
-    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
-}] %>
-
-<%= pb_rails("line_graph", props: { 
-    id: "line-fixed-height", 
-    gradient: false, 
-    chart_data: data, 
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Fixed Height (300px)', 
-    axis_title: 'Number of Employees',
-    height: '300'
-}) %>
-
-<br /><br />
-
-<%= pb_rails("line_graph", props: { 
-    id: "line-precentage-height", 
-    gradient: false, 
-    chart_data: data, 
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Percentage Height (50%)', 
-    axis_title: 'Number of Employees',
-    height: '50%'
-}) %>

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

@@ -1,70 +0,0 @@
-import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const data = [{
-  name: 'Number of Installations',
-  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
-}]
-
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const LineGraphHeight = () => {
-  const chartOptionsFirst = {
-    title: {
-      text: 'Fixed Height (300px)',
-    },
-    chart: {
-      height: '300px'
-    },
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-    series: data
-  }
-
-  const chartOptionsSecond = {
-    title: {
-      text: 'Percentage Height (50%)',
-    },
-    chart: {
-      height: '50%'
-    },
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-    series: data
-  }
-
-  const optionsFirst = Highcharts.merge({}, lineGraphTheme, chartOptionsFirst)
-  const optionsSecond = Highcharts.merge({}, lineGraphTheme, chartOptionsSecond)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsFirst}
-      />
-
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsSecond}
-      />
-    </div>
-  )
-}
-
-export default LineGraphHeight

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.md

@@ -1,3 +0,0 @@
-By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
-
-Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

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

@@ -1,15 +0,0 @@
-<% data = [{
-    name: 'Number of Installations',
-    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
-}] %>
-
-<%= pb_rails("line_graph", props: { 
-    id: "line-test-2", 
-    gradient: false, 
-    chart_data: data, 
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug'],
-    title: 'Line Graph with Legend', 
-    axis_title: 'Number of Employees',
-    legend: true
-}) %>
-

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

@@ -1,43 +0,0 @@
-import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const data = [{
-  name: 'Number of Installations',
-  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
-}]
-
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
-
-const chartOptions = {
-  series: data,
-  title: { text: "Line Graph with Legend" },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    min: 0,
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  legend: {
-    enabled: true,
-  },
-}
-
-const LineGraphLegend = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)
-
-  return(
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default LineGraphLegend

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,
-}) %>
-