playbook_ui 14.23.0.pre.alpha.play23129273 → 14.23.0.pre.rc.0

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

@@ -1,8 +1,6 @@
 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'
+
+import LineGraph from '../_line_graph'
 
 const data = [{
   name: 'Installation',
@@ -21,36 +19,19 @@ const data = [{
   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>
-  )
-}
+const LineGraphColors = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
+        id="line-colors"
+        title="Line Graph with Custom Data Colors"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
-export default LineGraphColors
+export default LineGraphColors

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

@@ -1,7 +1,6 @@
 import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+
+import LineGraph from '../_line_graph'
 
 const data = [{
   name: 'Installation',
@@ -20,33 +19,19 @@ const data = [{
   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>
-  )
-}
+const LineGraphDefault = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="line-default"
+        subTitle="Source: thesolarfoundation.com"
+        title="Solar Employment Growth by Sector, 2010-2016"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
 export default LineGraphDefault

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

@@ -1,70 +1,38 @@
 import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+import LineGraph from '../_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', '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
+const LineGraphDefault = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        height="300px"
+        id="line-fixed-height"
+        title="Fixed Height (300px)"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
+        yAxisMin={0}
+        {...props}
+    />
+
+    <br />
+    <br />
+
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        height="50%"
+        id="line-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 LineGraphDefault

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

@@ -1,43 +1,24 @@
 import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+import LineGraph from '../../pb_line_graph/_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 LineGraphLegend = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="line-test-2"
+        legend
+        title="Line Graph with Legend"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
-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
+export default LineGraphLegend

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

@@ -1,49 +1,24 @@
 import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+import LineGraph from '../../pb_line_graph/_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 LineGraphLegendNonclickable = (props) => (
+  <div>
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="line-test-3"
+        legend
+        title="Line Graph with Legend Non Clickable"
+        toggleLegendClick={false}
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        {...props}
+    />
+  </div>
+)
 
-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 LineGraphLegendNonclickable = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default LineGraphLegendNonclickable
+export default LineGraphLegendNonclickable

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

@@ -1,7 +1,5 @@
 import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+import LineGraph from '../../pb_line_graph/_line_graph'
 import Title from '../../pb_title/_title'
 
 const data = [{
@@ -21,109 +19,66 @@ const data = [{
   data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
 }]
 
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
-
-const LineGraphLegendPosition = (props) => {
-  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 optionsFirst = Highcharts.merge({}, lineGraphTheme, chartOptionsFirst)
-  const optionsSecond = Highcharts.merge({}, lineGraphTheme, chartOptionsSecond)
-  const optionsThird = Highcharts.merge({}, lineGraphTheme, chartOptionsThird)
-
-  return (
-    <div>
-      <Title
-          paddingY="sm"
-          size={4}
-          tag="h4"
-          text="align | verticalAlign"
-          {...props}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsFirst}
-      />
-      
-      <Title
-          paddingY="sm"
-          size={4}
-          tag="h4"
-          text="layout"
-          {...props}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsSecond}
-      />
-      
-      <Title
-          paddingY="sm"
-          size={4}
-          tag="h4"
-          text="x | y"
-          {...props}
-      />
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={optionsThird}
-      />
-    </div>
-  )
-}
+const LineGraphLegendPosition = (props) => (
+  <div>
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="align | verticalAlign"
+    />
+    <LineGraph
+        align='right'
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="legend-position-line"
+        legend
+        title="Alignment of Legend"
+        verticalAlign="top"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        yAxisMin={0}
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="layout"
+    />
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="legend-position-line-1"
+        layout="vertical"
+        legend
+        title="Layout of Legend"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        yAxisMin={0}
+        {...props}
+    />
+    <Title
+        paddingBottom="sm"
+        paddingTop="sm"
+        size={4}
+        tag="h4"
+        text="x | y"
+    />
+    <LineGraph
+        axisTitle="Number of Employees"
+        chartData={data}
+        id="legend-position-line-2"
+        layout="vertical"
+        legend
+        title="Offset of Legend"
+        x={100}
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']}
+        y={10}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
 
 export default LineGraphLegendPosition

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

@@ -1,14 +1,17 @@
 ##### Prop
 
 `align` **Type**: String | **Values**: left | center | right (defaults to center)
-`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults to bottom)
+`verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
 `layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
 `x` **Type**: Number (defaults to 0)
 `y` **Type**: Number (defaults to 0)
 
-`layout` determines the position of the legend items
+- 
+
+- `layout` determines the position of the legend items
 `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
+- `x` offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
+
 
-`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down.
+- `y` offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.

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

@@ -0,0 +1,52 @@
+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 baseOptions = {
+  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 LineGraphPbStyles = () => {
+  const options = Highcharts.merge({}, lineGraphTheme, baseOptions)
+
+  return(
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
+
+export default LineGraphPbStyles

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

@@ -0,0 +1 @@
+You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.

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

@@ -11,6 +11,7 @@ examples:
 
   react:
   - line_graph_default: Default
+  - line_graph_pb_styles: Playbook Styles
   - line_graph_legend: Legend
   - line_graph_legend_position: Legend Position
   - line_graph_legend_nonclickable: Legend Nonclickable

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

@@ -4,3 +4,4 @@ export { default as LineGraphLegendPosition } from './_line_graph_legend_positio
 export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
 export { default as LineGraphHeight } from './_line_graph_height.jsx'
 export { default as LineGraphColors } from './_line_graph_colors.jsx'
+export { default as LineGraphPbStyles } from './_line_graph_pb_styles.jsx'

data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts

@@ -50,21 +50,7 @@ const lineGraphTheme = {
     },
   },
   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,
-    },
-  },
+  legend: { enabled: false },
   colors: [
     colors.data_1,
     colors.data_2,
@@ -102,7 +88,6 @@ const lineGraphTheme = {
     minorGridLineColor: colors.border_light,
     lineWidth: 0,
     tickWidth: 0,
-    tickPixelInterval: 50,
     labels: {
       style: {
         fontFamily: typography.font_family_base,

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -134,10 +134,6 @@ const Pagination = ( props: PaginationProps) => {
     className
   )
 
-  if (total <= 1) {
-    return null;
-  }
-
   return (
     <div 
         {...ariaProps}

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md

@@ -3,6 +3,4 @@ Our Pagination kit depends on the <a href="https://github.com/mislav/will_pagina
 
 Once you have perfomed the paginated query in your controller file you can use our kit (see code example below) instead of `<%= will_paginate @users %>` in your view file.
 
-You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.
-
-Note: If the total page count is 0 or 1, the Pagination kit will not be displayed as there aren't multiple pages to navigate.
+You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.