playbook_ui 15.3.0.pre.alpha.play262912095 → 15.3.0.pre.rc.0

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend.html.erb

@@ -1,24 +0,0 @@
-<% data = [{
-  name: 'Number of Installations',
-  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],    }] %>
-
-<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'] %>
-
-<% chart_options = {
-  series: data,
-  title: { text: "Line Graph with Legend" },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    min: 0,
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  legend: {
-    enabled: true,
-  },
-} %>
-
-<%= pb_rails("pb_line_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend.jsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
-
-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 PbLineGraphLegend = (props) => (
-  <div>
-    <PbLineGraph
-        options={chartOptions}
-        {...props}
-    />
-  </div>
-)
-
-export default PbLineGraphLegend

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_nonclickable.html.erb

@@ -1,39 +0,0 @@
-<% data = [{
-  name: 'Number of Installations',
-  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],    
-  }] %>
-
-<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'] %>
-
-<% chart_options = {
-  series: data,
-  title: { text: "Line Graph with Legend Non Clickable" },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: {
-    enabled: true
-  },
-} %>
-
-<%= pb_rails("pb_line_graph", props: {options: chart_options, id: "installations-chart"}) %>
-
-<script>
-// Prevent legend item click events from toggling series visibility
-document.addEventListener('click', function (e) {
-  var container = document.getElementById('installations-chart');
-  if (!container) return;
-
-  var legend = container.querySelector('.highcharts-legend');
-  if (legend && legend.contains(e.target)) {
-    e.stopImmediatePropagation();
-    e.preventDefault();
-  }
-}, true); 
-
-</script>

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_nonclickable.jsx

@@ -1,45 +0,0 @@
-import React from 'react'
-import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
-
-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 = {
-  title: {
-    text: 'Line Graph with Legend Non Clickable',
-  },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: {
-    enabled: true,
-    events: {
-      itemClick: function () {
-        return false;
-      }
-    }
-  },
-  series: data
-}
-
-const PbLineGraphLegendNonclickable = (props) => {
-  return (
-    <div>
-      <PbLineGraph
-          options={chartOptions}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default PbLineGraphLegendNonclickable

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.html.erb

@@ -1,86 +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],
-  }] %>
-
-<% categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'] %>
-
-
-<% chartOptionsFirst = {
-    title: { text: "Alignment of Legend" },
-    series: data,
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      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_line_graph", props: {options: chartOptionsFirst}) %>
-
-  <% chartOptionsSecond = {
-    title: { text: "Layout of Legend" },
-    series: data,
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: "Number of Employees",
-      },
-    },
-    legend: {
-      enabled: true,
-      layout: 'vertical'
-    },
-  } %>
-
-<%= pb_rails("title", props: {size: 4, text: "layout", padding_top: "sm", padding_bottom: "sm"})%>
-<%= pb_rails("pb_line_graph", props: {options: chartOptionsSecond}) %>
-
-  <% chartOptionsThird = {
-    title: { text: "Offset of Legend" },
-    series: data,
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: "Number of Employees",
-      },
-    },
-    legend: {
-      enabled: true,
-      layout: 'vertical',
-      x: 100,
-      y: 10
-    },
-  } %>
-
-<%= pb_rails("title", props: {size: 4, text: "x | y", padding_top: "sm", padding_bottom: "sm"})%>
-<%= pb_rails("pb_line_graph", props: {options: chartOptionsThird}) %>
-

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.jsx

@@ -1,116 +0,0 @@
-import React from 'react'
-import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
-import Title from '../../pb_title/_title'
-
-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']
-
-  const chartOptionsFirst = {
-    title: { text: "Alignment of Legend" },
-    series: data,
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: "Number of Employees",
-      },
-    },
-    legend: {
-      enabled: true,
-      align: 'right',
-      verticalAlign: 'top'
-    },
-  }
-
-  const chartOptionsSecond = {
-    title: { text: "Layout of Legend" },
-    series: data,
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: "Number of Employees",
-      },
-    },
-    legend: {
-      enabled: true,
-      layout: 'vertical'
-    },
-  }
-
-  const chartOptionsThird = {
-    title: { text: "Offset of Legend" },
-    series: data,
-    xAxis: {
-      categories: categories,
-    },
-    yAxis: {
-      min: 0,
-      title: {
-        text: "Number of Employees",
-      },
-    },
-    legend: {
-      enabled: true,
-      layout: 'vertical',
-      x: 100,
-      y: 10
-    },
-  }
-
-const PbLineGraphLegendPosition = (props) => (
-  <div>
-    <Title
-        paddingY="sm"
-        size={4}
-        tag="h4"
-        text="align | verticalAlign"
-    />
-    <PbLineGraph
-        options={chartOptionsFirst}
-        {...props}
-    /> 
-    <Title
-        paddingY="sm"
-        size={4}
-        tag="h4"
-        text="layout"
-    />
-    <PbLineGraph
-        options={chartOptionsSecond}
-        {...props}
-    /> 
-    <Title
-        paddingY="sm"
-        size={4}
-        tag="h4"
-        text="x | y"
-    />
-    <PbLineGraph
-        options={chartOptionsThird}
-        {...props}
-    />
-  </div>
-)
-
-export default PbLineGraphLegendPosition

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.md

@@ -1,11 +0,0 @@
-Highcharts provides many options for customizing the legend display. This example showcases the following:
-
-`align` can be used to align the legend left, right or center (defaults to center)
-
-`verticalAlign` can be used to place the legend above the graph. Options are top, middle, bottom with default set to bottom
-
-`layout` determines the position of the legend items. Options are horizontal, vertical or proximate with default set to horizontal `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 alignment. Negative x moves it to the left, positive x moves it to the right (defaults to 0)
-
-`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down (defaults to 0)

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

@@ -1,20 +0,0 @@
-examples:
-  
-  rails:
-  - pb_line_graph_default: Default
-  - pb_line_graph_legend: Legend
-  - pb_line_graph_legend_position: Legend Position
-  - pb_line_graph_legend_nonclickable: Legend NonClickable
-  - pb_line_graph_height: Height
-  - pb_line_graph_colors: Color Overrides
-  
-  
-  react:
-  - pb_line_graph_default: Default
-  - pb_line_graph_legend: Legend
-  - pb_line_graph_legend_position: Legend Position
-  - pb_line_graph_legend_nonclickable: Legend NonClickable
-  - pb_line_graph_height: Height
-  - pb_line_graph_colors: Color Overrides
-  
-  

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

@@ -1,6 +0,0 @@
-export { default as PbLineGraphDefault } from './_pb_line_graph_default.jsx'
-export { default as PbLineGraphLegend } from './_pb_line_graph_legend.jsx'
-export { default as PbLineGraphLegendPosition } from './_pb_line_graph_legend_position.jsx'
-export { default as PbLineGraphLegendNonclickable } from './_pb_line_graph_legend_nonclickable.jsx'
-export { default as PbLineGraphHeight } from './_pb_line_graph_height.jsx'
-export { default as PbLineGraphColors } from './_pb_line_graph_colors.jsx'

data/app/pb_kits/playbook/pb_pb_line_graph/pbLineGraphTheme.ts

@@ -1,125 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const pbLineGraphTheme = {
-  title: {
-    text: "",
-    style: {
-      color: colors.text_lt_default,
-      fontFamily: typography.font_family_base,
-      fontWeight: typography.bold,
-      fontSize: typography.heading_3,
-    },
-  },
-  subtitle: {
-    text: "" ,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_lt_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_base,
-    },
-  },
-  chart: {
-    type: "line",
-  },
-  tooltip: {
-    backgroundColor: {
-      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-      stops: [
-        [0, colors.bg_dark],
-        [1, colors.bg_dark],
-      ],
-    },
-    followPointer: true,
-    shadow: false,
-    borderWidth: 0,
-    borderRadius: 10,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_default,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-  },
-  plotOptions: {
-    line: {
-      dataLabels: {
-        enabled: false,
-      },
-    },
-  },
-  credits: { enabled: false },
-  legend: { 
-    enabled: false,
-    itemStyle: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_lt_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-    itemHoverStyle: {
-      color: colors.text_lt_default,
-    },
-    itemHiddenStyle: {
-      color: colors.text_lt_lighter,
-    },
-  },
-  colors: [
-    colors.data_1,
-    colors.data_2,
-    colors.data_3,
-    colors.data_4,
-    colors.data_5,
-    colors.data_6,
-    colors.data_7,
-  ],
-  xAxis: {
-    gridLineWidth: 0,
-    lineColor: colors.border_light,
-    tickColor: colors.border_light,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        color: colors.text_lt_default,
-        fontFamily: typography.font_family_base,
-        fontWeight: typography.regular,
-        fontSize: typography.heading_4,
-      },
-    },
-  },
-  yAxis: {
-    alternateGridColor: undefined as string | undefined,
-    minorTickInterval: null as number | null,
-    gridLineColor: colors.border_light,
-    minorGridLineColor: colors.border_light,
-    lineWidth: 0,
-    tickWidth: 0,
-    tickPixelInterval: 50,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-  },
-}
-
-export default pbLineGraphTheme;

data/app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.html.erb

@@ -1 +0,0 @@
-<%= react_component('PbLineGraph', object.react_props) %>

data/app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.rb

@@ -1,25 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbPbLineGraph
-    class PbLineGraph < ::Playbook::KitBase
-      prop :options, default: {}
-
-      def react_props
-        {
-          className: classname,
-          data: data,
-          options: options,
-          id: id,
-        }
-      end
-
-      def classname
-        # Highcharts react needs classname attached to the container div,
-        # we pass an empty string here to avoid conflicts, classname is built in the TSX
-        # We still need generate_classnames to retain ability to pass in custom classnames or global props
-        generate_classname("")
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.test.jsx

@@ -1,110 +0,0 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-
-import { PbLineGraph } from 'playbook-ui'
-
-beforeEach(() => {
-  // Silences error logs within the test suite.
-  jest.spyOn(console, 'error');
-  jest.spyOn(console, 'warn');
-  console.error.mockImplementation(() => {});
-  console.warn.mockImplementation(() => {});
-});
-
-afterEach(() => {
-  console.error.mockRestore();
-  console.warn.mockRestore();
-});
-
-const seriesData = [{
-  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: seriesData,
-  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
-  subtitle: { text: "Source: thesolarfoundation.com" },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-}
-
-const testId = 'pblinegraph1';
-
-test('Kit to exist', () => {
-  render(
-  <PbLineGraph 
-      data={{testid: testId}} 
-      options={chartOptions} 
-  />
-)
-
-  expect(screen.getByTestId(testId)).toBeInTheDocument()
-})
-
-test('Kit to apply base classname', () => {
-  render(
-    <PbLineGraph 
-        data={{testid: testId}} 
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('pb_pb_line_graph')
-})
-
-test('Kit to have custom class', () => {
-  render(
-    <PbLineGraph 
-        className='custom-class'
-        data={{testid: testId}} 
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('custom-class')
-})
-
-test('Kit to apply global props', () => {
-  render(
-    <PbLineGraph 
-        data={{testid: testId}} 
-        margin="lg"
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('m_lg')
-})
-
-test('kit to apply id', () => {
-  render(
-    <PbLineGraph 
-        data={{testid: testId}} 
-        id='line-graph-id'
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveAttribute('id', 'line-graph-id')
-})