playbook_ui 15.0.0.pre.alpha.PLAY2420atfirstcolumnborderfix10658 → 15.0.0.pre.alpha.PLAY2422fixedconftoastaccessibility10327

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb

@@ -1,47 +0,0 @@
-<% chart_options = {
-    chart: {
-        type: 'bar'
-    },
-    title: {
-        text: 'Historic World Population by Region',
-        align: 'left'
-    },
-    subtitle: {
-        text: 'Source: <a ' +
-            'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
-            'target="_blank">Wikipedia.org</a>',
-        align: 'left'
-    },
-    xAxis: {
-        categories: ['Africa', 'America', 'Asia', 'Europe'],
-        lineWidth: 0
-    },
-    yAxis: {
-        title: {
-            text: '',
-        },
-    },
-    tooltip: {
-        valueSuffix: ' millions'
-    },
-    plotOptions: {
-        bar: {
-            dataLabels: {
-                enabled: true
-            },
-            groupPadding: 0.1
-        }
-    },
-    series: [{
-        name: 'Year 1990',
-        data: [631, 727, 3202, 721]
-    }, {
-        name: 'Year 2000',
-        data: [814, 841, 3714, 726]
-    }, {
-        name: 'Year 2018',
-        data: [1276, 1007, 4561, 746]
-    }],
-} %>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx

@@ -1,60 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
-
-const chartOptions = {
-    chart: {
-        type: 'bar'
-    },
-    title: {
-        text: 'Historic World Population by Region',
-        align: 'left'
-    },
-    subtitle: {
-        text: 'Source: <a ' +
-            'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
-            'target="_blank">Wikipedia.org</a>',
-        align: 'left'
-    },
-    xAxis: {
-        categories: ['Africa', 'America', 'Asia', 'Europe'],
-        lineWidth: 0
-    },
-    yAxis: {
-        title: {
-            text: '',
-        },
-    },
-    tooltip: {
-        valueSuffix: ' millions'
-    },
-    plotOptions: {
-        bar: {
-            dataLabels: {
-                enabled: true
-            },
-            groupPadding: 0.1
-        }
-    },
-    series: [{
-        name: 'Year 1990',
-        data: [631, 727, 3202, 721]
-    }, {
-        name: 'Year 2000',
-        data: [814, 841, 3714, 726]
-    }, {
-        name: 'Year 2018',
-        data: [1276, 1007, 4561, 746]
-    }],
-}
-
-
-const PbBarGraphHorizontal = () => (
-  <div>
-    <PbBarGraph
-        options={chartOptions}
-    />
-  </div>
-)
-
-export default PbBarGraphHorizontal

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb

@@ -1,25 +0,0 @@
-<% chart_data = [{
-    name: 'Number of Installations',
-    data: [1475,200,3000,654,656]
-}] %>
-
-<% chart_options = {
-  series: chart_data,
-  title: {
-    text: 'Bar Graph with Legend',
-  },
-  xAxis: {
-    categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-   legend: {
-        enabled: true
-    },
-}
-%>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
-
-const chartData = [{
-  name: 'Number of Installations',
-  data: [1475, 200, 3000, 654, 656],
-}]
-
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: 'Bar Graph with Legend',
-  },
-  xAxis: {
-    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: { enabled: true },
-}
-
-const PbBarGraphLegend = () => {
-  
-  return (
-    <div>
-      <PbBarGraph
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-export default PbBarGraphLegend

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
-
-const chartData = [{
-  name: 'Number of Installations',
-  data: [1475, 200, 3000, 654, 656],
-}]
-
-const chartOptions = {
-    title: {
-      text: 'Bar Graph with Legend Non Clickable',
-    },
-    xAxis: {
-      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-    },
-    yAxis: {
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-    legend: {
-      enabled: true,
-      events: {
-        itemClick: function () {
-          return false;
-        }
-      }
-    },
-  series: chartData
-}
-
-const PbBarGraphLegendNonClickable = () => {
-
-  return (
-    <div>
-      <PbBarGraph
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-
-export default PbBarGraphLegendNonClickable

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb

@@ -1,100 +0,0 @@
-<% chart_data = [{
-    name: 'Installation',
-    data: [1475]
-}, {
-    name: 'Manufacturing',
-    data: [4434]
-}, {
-    name: 'Sales & Distribution',
-    data: [3387]
-}, {
-    name: 'Project Development',
-    data: [3227]
-}, {
-    name: 'Other',
-    data: [1111]
-}] %>
-
-<% chart_options_right = {
-  series: chart_data,
-  title: {
-    text: 'Alignment of Legend',
-  },
-  xAxis: {
-    categories: ['Jan'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: {
-    enabled: true,
-    align: 'right',
-    verticalAlign: 'top',
-  },
-}
-%>
-
-<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
-
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options_right}) %>
-
-
-<% chart_options_center = {
-  series: chart_data,
-  title: {
-    text: 'Layout of Legend',
-  },
-  xAxis: {
-    categories: ['Jan'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: {
-    enabled: true,
-    align: 'center',
-    verticalAlign: 'bottom',
-    layout: 'vertical',
-
-  },
-}
-%>
-
-<%= pb_rails("title", props: {size: 4, text: "layout", padding_top: "sm", padding_bottom: "sm"})%>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options_center}) %>
-
-<% chart_options_left = {
-  series: chart_data,
-  title: {
-    text: 'Offset of Legend',
-  },
-  xAxis: {
-    categories: ['Jan'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: {
-    enabled: true,
-    align: 'center',
-    verticalAlign: 'bottom',
-    layout: 'vertical',
-    x: 100,
-    y: 10,
-
-  },
-}
-%>
-
-<%= pb_rails("title", props: {size: 4, text: "x | y", padding_top: "sm", padding_bottom: "sm"})%>
-
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options_left}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx

@@ -1,126 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-import Title from "../../pb_title/_title"
-
-
-const chartData = [{
-  name: 'Installation',
-  data: [1475],
-}, {
-  name: 'Manufacturing',
-  data: [4434],
-}, {
-  name: 'Sales & Distribution',
-  data: [3387],
-}, {
-  name: 'Project Development',
-  data: [3227],
-}, {
-  name: 'Other',
-  data: [1111],
-}]
-
-const alignChartOptions = {
-  series: chartData,
-  title: {
-    text: 'Alignment of Legend',
-  },
-  subtitle: {
-    text: 'Source: thesolarfoundation.com',
-  },
-  xAxis: {
-    categories: ['Jan'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: { 
-    enabled: true,
-    verticalAlign: 'top',
-    align: 'right',
-   },
-}
-
-const layoutChartOptions = {
-  series: chartData,
-  title: {
-    text: 'Layout of Legend',
-  },
-  xAxis: {
-    categories: ['Jan'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: { 
-    enabled: true,
-    layout: 'vertical',
-   },
-}
-
-const offsetChartOptions = {
-  series: chartData,
-  title: {
-    text: 'Offset of Legend',
-  },
-  xAxis: {
-    categories: ['Jan'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: {
-    enabled: true,
-    layout: 'vertical',
-    x: 100,
-    y: 10,
-  },
-}
-
-const PbBarGraphLegendPosition = () => {
-
-  return (
-  <div>
-    <Title
-        paddingBottom="sm"
-        paddingTop="sm"
-        size={4}
-        tag="h4"
-        text="align | verticalAlign"
-    />
-    <PbBarGraph 
-        options={alignChartOptions}
-    />
-
-    <Title
-        paddingBottom="sm"
-        paddingTop="sm"
-        size={4}
-        tag="h4"
-        text="layout"
-    />
-    <PbBarGraph 
-        options={layoutChartOptions}
-    />
-
-    <Title
-        paddingBottom="sm"
-        paddingTop="sm"
-        size={4}
-        tag="h4"
-        text="x | y"
-    />
-    <PbBarGraph 
-        options={offsetChartOptions}
-    />
-  </div>
-)
-}
-
-export default PbBarGraphLegendPosition

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb

@@ -1,32 +0,0 @@
-<% chart_data = [{
-    name: 'Installation',
-    data: [-475, 400, -1000, 354, -856],
-    threshold: 0
-  }, {
-    name: 'Manufacturing',
-    data: [1475, 200, 1000, 654, -656],
-    threshold: 0
-  }, 
-  {
-    name: 'Sales & Distribution',
-    data: [1270, 100, -1200, 554, 756],
-    threshold: 0
-  }] %>
-  
-<% chart_options = {
-  series: chart_data,
-  title: {
-    text: "Bar Graph with Negative Numbers",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  legend: { enabled: true },
-} %>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
-
-const chartData = [{
-  name: 'Installation',
-  data: [-475, 400, -1000, 354, -856],
-  threshold: 0
-}, {
-  name: 'Manufacturing',
-  data: [1475, 200, 1000, 654, -656],
-  threshold: 0
-},
-{
-  name: 'Sales & Distribution',
-  data: [1270, 100, -1200, 554, 756],
-  threshold: 0
-}]
-
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Negative Numbers",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  legend: { enabled: true },
-};
-
-
-const PbBarGraphStacked = () => {
-
-  return(
-    <div>
-      <PbBarGraph
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-
-export default PbBarGraphStacked

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb

@@ -1,68 +0,0 @@
-<% chart_data = [{
-    name: 'Number of Installations',
-    data: [1475,200,3000,654,656]
-}, {
-    type: 'spline',
-    name: 'Percentage',
-    data: [48, 70, 25, 55, 72],
-    color: '#F9BB00',
-    yAxis: 1
-}] %>
-
-
-<% chart_options = {
-series: chart_data,
-  title: {
-    text: "Bar Graph with Secondary Y-axis",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: [{
-  format: "{value}%",
-    labels: {
-      style: {
-        fontFamily: "Power Centra",
-        color: "#C1CDD6",
-        fontWeight: "bold",
-        fontSize: "12px",
-      },
-    },
-    title: {
-      text: "Number of Employees",
-      style: {
-             fontFamily: "Power Centra",
-        color: "#C1CDD6",
-        fontWeight: "bold",
-        fontSize: "12px",
-      },
-    },
-  }, {
-    labels: {
-      style: {
-            fontFamily: "Power Centra",
-            color: "#C1CDD6",
-            fontWeight: "bold",
-            fontSize: "12px",
-      },
-    },
-    title: {
-      text: "Percentage",
-      style: {
-        fontFamily: "Power Centra",
-        color: "#C1CDD6",
-        fontWeight: "bold",
-        fontSize: "12px",
-      },
-    },
-
-    opposite: true,
-    min: 0,
-    max: 100
-  }],
-  legend: { enabled: true },
-}
-%>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>
-

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx

@@ -1,81 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
-
-const chartData = [{
-  name: 'Number of Installations',
-  data: [1475, 200, 3000, 654, 656],
-}, {
-  type: 'spline',
-  name: 'Percentage',
-  data: [48, 70, 25, 55, 72],
-  color: '#F9BB00',
-  yAxis: 1
-}]
-
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Secondary Y-axis",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: [{
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      text: "Number of Employees",
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-  }, {
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      text: "Percentage",
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-
-    opposite: true,
-    min: 0,
-    max: 100
-  }],
-  legend: { enabled: true },
-}
-
-const PbBarGraphSecondaryYAxis = () => {
-
-  return (
-    <div>
-      <PbBarGraph
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-
-export default PbBarGraphSecondaryYAxis

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb

@@ -1,31 +0,0 @@
-<% chart_data = [{
-    name: 'Number of Installations',
-    data: [1475,200,3000,654,656]
-}, {
-    type: 'spline',
-    name: 'Trend Line',
-    data: [1975, 600, 2500, 924, 500],
-    color: '#F9BB00',
-}] %>
-
-<% chart_options = {
-  series: chart_data,
-  title: {
-    text: 'Bar Graph with Spline',
-  },
-  subtitle: {
-    text: 'Source: thesolarfoundation.com',
-  },
-  xAxis: {
-    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-    legend: { enabled: true },
-}
-%>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>