playbook_ui_docs 14.22.0.pre.alpha.PLAY22588587 → 14.22.0.pre.alpha.PLAY22958842

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6b29950eaf36cde8e41455fcb9b225c5a8fa790b6d0588652ab34486ef975988
-  data.tar.gz: 42bc8d2dc55415e52c1859cde301dd9ab2c5fcb9d22c75322014bb42cc6bb7f4
+  metadata.gz: 055bfc685f2870ce55caa91f1e2958fd05442019d22c2444b3dfdef511cc98e7
+  data.tar.gz: d825c54231c7bdfe7f37bd0e1c93dbf76f3ef3c7f94ff44e98c10766a7e4563a
 SHA512:
-  metadata.gz: ed13b007fa1aa2b04b67cc989f52b9131187badfcaf49606e01a3b36cb276272b3101ffd0c6e90178b6b038c220ac70e8108f86ad9deb16742a6b58856c9b042
-  data.tar.gz: f926d815792e4c619f3c54dce6d170e00556ddd89e1802e78856c271557eb69f418a45e1f80e83e40ce7c3cebf3c7f46382e7d93f7ccb1eeb95f1b26b9b1dad8
+  metadata.gz: 159b38a0258248c9c97587ca29009559cc5fcb910d59a093f75b56ecd2540e742b6ec771d9f9672f2c7f42216dcaf225e2cacb493f78fa62a5cd66babdccd4b9
+  data.tar.gz: e38cc9849abf0bf67536eabf9c53cb92d27ea4df8fd8190931f34ccb4dc1270be5e536c2548c88ec74000c1056517f381fb737c37bb3c054d41ebdd6f376f957

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx

@@ -0,0 +1,69 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Icon from "../../pb_icon/_icon"
+import Flex from "../../pb_flex/_flex"
+import Caption from "../../pb_caption/_caption"
+import Tooltip from "../../pb_tooltip/_tooltip"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableWithCustomHeader = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      header: () => (
+        <Flex alignItems="center" 
+            justifyContent="center"
+        >
+          <Caption marginRight="xs">New Enrollments</Caption>
+          <Tooltip placement="top" 
+              text="Whoa. I'm a Tooltip" 
+              zIndex={10}
+          >
+            <Icon cursor="pointer" 
+                icon="info"
+                size="xs" 
+            />
+          </Tooltip>
+        </Flex>
+      ),
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ];
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableWithCustomHeader

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md

@@ -0,0 +1 @@
+The optional `header` key/value pair can be used within `columnDefinitions` to render a custom header. This example shows an Icon and Tooltip being used but other kits can be used as well. 

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

@@ -41,6 +41,7 @@ examples:
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
+  - advanced_table_with_custom_header: Custom Header Cell
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_column_headers: Multi-Header Columns

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

@@ -38,4 +38,5 @@ export { default as AdvancedTableRowStyling } from './_advanced_table_row_stylin
 export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
 export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
 export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
-export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'
+export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'
+export { default as AdvancedTableCustomSort } from './_advanced_table_custom_sort.jsx'

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx

@@ -1,6 +1,10 @@
 import React from 'react'
+import colors from '../../tokens/exports/_colors.module.scss'
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+
 
-import BarGraph from '../_bar_graph'
 
 const chartData = [{
   name: 'Installation',
@@ -19,19 +23,33 @@ const chartData = [{
   data: [1111, 677, 3245, 500, 200],
 }]
 
-const BarGraphColors = (props) => (
-  <div>
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        colors={['data-4', 'data-5', 'data-6', 'data-7', 'data-8']}
-        id="bar-colors"
-        title="Bar Graph with Custom Data Colors"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
-    />
-  </div>
-)
+const chartOptions = {
+  series: chartData,
+  title: {
+    text: "Bar Graph with Custom Data Colors",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+  colors: [colors.data_4, colors.data_5, colors.data_6, colors.data_7, colors.data_8],
+}
+
+const BarGraphColors = () => {
+  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
 export default BarGraphColors

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
 
-import BarGraph from '../_bar_graph'
 
 const chartData = [{
   name: 'Installation',
@@ -19,19 +21,35 @@ const chartData = [{
   data: [1111, 677, 3245, 500, 200],
 }]
 
-const BarGraphDefault = (props) => (
-  <div>
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        id="bar-default"
-        subTitle="Source: thesolarfoundation.com"
-        title="Solar Employment Growth by Sector, 2010-2016"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
-    />
-  </div>
-)
+const chartOptions = {
+  series: chartData,
+  title: {
+    text: 'Solar Employment Growth by Sector, 2010-2016',
+  },
+  subtitle: {
+    text: 'Source: thesolarfoundation.com',
+  },
+  xAxis: {
+    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+  },
+  yAxis: {
+    title: {
+      text: 'Number of Employees',
+    },
+  },
+}
+
+const BarGraphDefault = () => {
+  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
 export default BarGraphDefault

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx

@@ -1,39 +1,69 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
 
-import BarGraph from '../_bar_graph'
 
 const chartData = [{
   name: 'Number of Installations',
   data: [1475, 200, 3000, 654, 656],
 }]
 
-const BarGraphDefault = (props) => (
+const pixelHeightChartOptions = {
+  chart: {
+    height: "300"
+  },
+  series: chartData,
+  title: {
+    text: "Fixed Height (300px)",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+};
+
+const percentageHeightChartOptions = {
+  chart: {
+    height: "50%"
+  },
+  series: chartData,
+  title: {
+    text: "Percentage Height (50%)",
+  },
+  xAxis: {
+    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+};
+
+const pixelOptions = Highcharts.merge({}, barGraphTheme, pixelHeightChartOptions)
+
+const percentageOptions = Highcharts.merge({}, barGraphTheme, percentageHeightChartOptions)
+
+const BarGraphHeight = () => (
   <div>
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        height="300"
-        id="bar-fixed-height"
-        title="Fixed Height (300px)"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
-        yAxisMin={0}
-        {...props}
-    />
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={pixelOptions}
+      />
 
     <br />
     <br />
 
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        height="50%"
-        id="bar-percentage-height"
-        title="Percentage Height (50%)"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
-        yAxisMin={0}
-        {...props}
+    <HighchartsReact
+        highcharts={Highcharts}
+        options={percentageOptions}
     />
   </div>
 )
 
-export default BarGraphDefault
+export default BarGraphHeight

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md

@@ -0,0 +1,3 @@
+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_bar_graph/docs/_bar_graph_horizontal.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
 
-import BarGraph from '../_bar_graph'
 
-
-const barGraphOptions = {
+const chartOptions = {
     chart: {
         type: 'bar'
     },
@@ -22,13 +23,8 @@ const barGraphOptions = {
         lineWidth: 0
     },
     yAxis: {
-        min: 0,
         title: {
-            text: 'Population (millions)',
-            align: 'high'
-        },
-        labels: {
-            overflow: 'justify'
+            text: '',
         },
     },
     tooltip: {
@@ -51,16 +47,16 @@ const barGraphOptions = {
     }, {
         name: 'Year 2018',
         data: [1276, 1007, 4561, 746]
-    }]
+    }],
 }
 
-const BarGraphHorizontal = (props) => (
+const options = Highcharts.merge({}, barGraphTheme, chartOptions)
+
+const BarGraphHorizontal = () => (
   <div>
-    <BarGraph
-        customOptions={barGraphOptions}
-        id="bar-horizontal"
-        yAxisMin={0}
-        {...props}
+    <HighchartsReact
+        highcharts={Highcharts}
+        options={options}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx

@@ -1,24 +1,40 @@
 import React from 'react'
-import BarGraph from "../../pb_bar_graph/_bar_graph"
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+
 
 const chartData = [{
   name: 'Number of Installations',
   data: [1475, 200, 3000, 654, 656],
 }]
 
-const BarGraphLegend = (props) => (
-  <div>
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        id="bar-test-2"
-        legend
-        title="Bar Graph with Legend"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
-    />
-  </div>
-)
+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 BarGraphLegend = () => {
+  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
+  
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 export default BarGraphLegend

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx

@@ -1,25 +1,48 @@
 import React from 'react'
-import BarGraph from "../../pb_bar_graph/_bar_graph"
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+
 
 const chartData = [{
   name: 'Number of Installations',
   data: [1475, 200, 3000, 654, 656],
 }]
 
-const BarGraphLegendNonClickable = (props) => (
-  <div>
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        id="bar-test-3"
-        legend
-        title="Bar Graph with Legend Non Clickable"
-        toggleLegendClick={false}
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        yAxisMin={0}
-        {...props}
-    />
-  </div>
-)
+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 BarGraphLegendNonClickable = () => {
+  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
 export default BarGraphLegendNonClickable

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx

@@ -1,8 +1,11 @@
 import React from 'react'
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
 
-import BarGraph from "../../pb_bar_graph/_bar_graph"
 import Title from "../../pb_title/_title"
 
+
 const chartData = [{
   name: 'Installation',
   data: [1475],
@@ -20,7 +23,76 @@ const chartData = [{
   data: [1111],
 }]
 
-const BarGraphLegendPosition = (props) => (
+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 BarGraphLegendPosition = () => {
+  const alignOptions = Highcharts.merge({}, barGraphTheme, alignChartOptions)
+  const layoutOptions = Highcharts.merge({}, barGraphTheme, layoutChartOptions)
+  const offsetOptions = Highcharts.merge({}, barGraphTheme, offsetChartOptions)
+
+
+  return (
   <div>
     <Title
         paddingBottom="sm"
@@ -29,19 +101,11 @@ const BarGraphLegendPosition = (props) => (
         tag="h4"
         text="align | verticalAlign"
     />
-    <BarGraph
-        align='right'
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        id="legend-position-bar"
-        legend
-        paddingBottom="sm"
-        title="Alignment of Legend"
-        verticalAlign="top"
-        xAxisCategories={['Jan']}
-        yAxisMin={0}
-        {...props}
+    <HighchartsReact 
+        highcharts={Highcharts}
+        options={alignOptions}
     />
+
     <Title
         paddingBottom="sm"
         paddingTop="sm"
@@ -49,19 +113,11 @@ const BarGraphLegendPosition = (props) => (
         tag="h4"
         text="layout"
     />
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        id="legend-position-bar-1"
-        layout="vertical"
-        legend
-        paddingBottom="sm"
-        paddingTop="sm"
-        title="Layout of Legend"
-        xAxisCategories={['Jan']}
-        yAxisMin={0}
-        {...props}
+    <HighchartsReact 
+        highcharts={Highcharts}
+        options={layoutOptions}
     />
+
     <Title
         paddingBottom="sm"
         paddingTop="sm"
@@ -69,20 +125,12 @@ const BarGraphLegendPosition = (props) => (
         tag="h4"
         text="x | y"
     />
-    <BarGraph
-        axisTitle="Number of Employees"
-        chartData={chartData}
-        id="legend-position-bar-2"
-        layout="vertical"
-        legend
-        title="Offset of Legend"
-        x={100}
-        xAxisCategories={['Jan']}
-        y={10}
-        yAxisMin={0}
-        {...props}
+    <HighchartsReact 
+        highcharts={Highcharts}
+        options={offsetOptions}
     />
   </div>
 )
+}
 
 export default BarGraphLegendPosition