playbook_ui 14.23.0.pre.alpha.PLAY2243customindeterminatemaincheckboxlabels9046 → 14.23.0.pre.alpha.PLAY2283multiheaderverticalbordersdoc9335

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

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

@@ -1,6 +1,7 @@
 import React from 'react'
-
-import LineGraph from '../_line_graph'
+import lineGraphTheme from '../lineGraphTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const data = [{
   name: 'Installation',
@@ -19,19 +20,33 @@ const data = [{
   data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
 }]
 
-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>
-)
+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.jsx

@@ -1,38 +1,70 @@
 import React from 'react'
-import LineGraph from '../_line_graph'
+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 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
+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

@@ -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_line_graph/docs/_line_graph_legend.jsx

@@ -1,24 +1,43 @@
 import React from 'react'
-import LineGraph from '../../pb_line_graph/_line_graph'
+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 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 categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
 
-export default LineGraphLegend
+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.jsx

@@ -1,24 +1,49 @@
 import React from 'react'
-import LineGraph from '../../pb_line_graph/_line_graph'
+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 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 categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug']
 
-export default LineGraphLegendNonclickable
+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

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

@@ -1,5 +1,7 @@
 import React from 'react'
-import LineGraph from '../../pb_line_graph/_line_graph'
+import lineGraphTheme from '../lineGraphTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 import Title from '../../pb_title/_title'
 
 const data = [{
@@ -19,66 +21,109 @@ const data = [{
   data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
 }]
 
-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>
-)
+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>
+  )
+}
 
 export default LineGraphLegendPosition

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

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

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

@@ -11,7 +11,6 @@ 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,4 +4,3 @@ 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,7 +50,21 @@ const lineGraphTheme = {
     },
   },
   credits: { enabled: false },
-  legend: { 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,
@@ -88,6 +102,7 @@ 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_multi_level_select/_helper_functions.tsx

@@ -143,7 +143,8 @@ export const recursiveCheckParent = (
 
 export const getExpandedItems = (
   treeData: { [key: string]: string }[],
-  selectedIds: string[]
+  selectedIds: string[],
+  showCheckedChildren = true
 ): any[] => {
   const expandedItems: any[] = [];
 
@@ -152,19 +153,27 @@ export const getExpandedItems = (
       const item = items[i];
       const itemAncestors = [...ancestors, item];
 
+      // Always honor explicit expanded: true
       if (item.expanded) {
         expandedItems.push(item.id);
       }
-      if (selectedIds && selectedIds.length && selectedIds.includes(item.id)) {
-        expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
+
+      // Only expand based on selected items if showCheckedChildren is true
+      if (showCheckedChildren) {
+        if (selectedIds && selectedIds.length && selectedIds.includes(item.id)) {
+          expandedItems.push(...itemAncestors.map((ancestor: any) => ancestor.id));
+        }
+        if (Array.isArray(item.children)) {
+          const hasCheckedChildren = item.children.some(
+            (child: { [key: string]: string }) => child.checked
+          );
+          if (hasCheckedChildren) {
+            expandedItems.push(...itemAncestors.map((ancestor: any) => ancestor.id));
+          }
+        }
       }
+
       if (Array.isArray(item.children)) {
-        const hasCheckedChildren = item.children.some(
-          (child: { [key: string]: string }) => child.checked
-        );
-        if (hasCheckedChildren) {
-          expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
-        }
         traverse(item.children, itemAncestors);
       }
     }

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -47,6 +47,7 @@ type MultiLevelSelectProps = {
   name?: string
   required?: boolean
   returnAllSelected?: boolean
+  showCheckedChildren?: boolean
   treeData?: { [key: string]: string; }[] | any
   onChange?: (event: { target: { name?: string; value: any } }) => void
   onSelect?: (prop: { [key: string]: any }) => void
@@ -71,6 +72,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     label,
     required = false,
     returnAllSelected = false,
+    showCheckedChildren = true,
     treeData,
     onChange = () => null,
     onSelect = () => null,
@@ -104,7 +106,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
   // State for default return
   const [defaultReturn, setDefaultReturn] = useState([]);
   // Get expanded items from treeData
-  const initialExpandedItems = getExpandedItems(treeData, selectedIds);
+  const initialExpandedItems = getExpandedItems(treeData, selectedIds, showCheckedChildren);
   // Initialize state with expanded items
   const [expanded, setExpanded] = useState(initialExpandedItems);