playbook_ui_docs 15.7.0.pre.alpha.play270013253 → 15.7.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 767af47c68b5e570620e35d1feafa78c91573d4dd2c74c5f8ea371869c6e93ab
-  data.tar.gz: 7ee77b84642df3e99c7a41925b00834a059d803179593eef3a1e94235c648cda
+  metadata.gz: 86cac1b084d7644b08a83ccc30d77d6e5a072b03f702bc39fbe54fca2375c0ef
+  data.tar.gz: a657791558e817dded0e0ed774d9c8bc1fa9877fc3c0df7c2bda5e675d0c430d
 SHA512:
-  metadata.gz: 5b3ce531d99a080c19e3e75e160c71f99ce63107b58b5a9d92f2a6dc564ad33c88a7aea2f821a11634c72f7daf87f12ed065bac5ac14b38275ed9c43e8d9292f
-  data.tar.gz: f9fc323fcefa8b423980a341e357a61c28cc7e166f68de2624d73057ec59bf22228a702b4111bb6f3101d30ae49479dd6491adb17c1111cdc2a9fedd0a6dbb50
+  metadata.gz: 86ea32ba5c989798a00cb54e2ac00b5f8533651b0d63914125f88a11b9955c42bd42183647ead80a3b5669749d340f1ecf9e7f8b3e3894ac27142549c3219fdb
+  data.tar.gz: ee6e185fac0c4b613ac121cfd6dec2b9329f03393281002fc27e45c46fdc097b7aa72da2ad1a34370a13d857dd1d2ad3b37661689187908497a36bc622b7d073

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb

@@ -8,26 +8,16 @@
       accessor: "newEnrollments",
       label: "New Enrollments",
       column_styling: { 
-        cell_background_color: "error_subtle",
-        header_background_color: "error_subtle"
+        cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
       }
     },
     {
       accessor: "scheduledMeetings",
       label: "Scheduled Meetings",
-      column_styling: { 
-        cell_background_color: "info_subtle",
-      }
     },
     {
       accessor: "attendanceRate",
       label: "Attendance Rate",
-      column_styling: { 
-        cell_background_color: "info",
-        header_background_color: "info",
-        header_font_color: "white",
-        font_color: "white"
-      }
     },
     {
       accessor: "completedClasses",
@@ -36,6 +26,10 @@
     {
       accessor: "classCompletionRate",
       label: "Class Completion Rate",
+      column_styling: { 
+        cell_background_color: "category_1",
+        font_color: "white"
+      }
     },
     {
       accessor: "graduatedStudents",

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

@@ -1,7 +1 @@
-`column_styling` can also be used to control the background color on all cells in a given column. Use the following key/values pairs to achieve this:
-
-1)  `cell_background_color`:  use this to control the background color of all cells in the given column
-2) `font_color`: use this to control font color for all cells in the given column if needed, for example if using a darker background color
-3) `header_background_color`: use this to control the background color of the column header
-4) `header_font_color`: use this to control font color for the header in the given column if needed, for example if using a darker background color.
-
+`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here. Use `font_color` to achieve better contrast between cell content and background for darker backgrounds.

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

@@ -26,8 +26,7 @@ examples:
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
   - advanced_table_padding_control_rails: Padding Control using Column Styling
-  - advanced_table_background_control_rails: Column Styling Background Color
-  - advanced_table_background_colors_rails: Column Styling Individual Cell Background Color
+  - advanced_table_background_control_rails: Background Control using Column Styling
   - advanced_table_column_border_color_rails: Column Group Border Color
 
 
@@ -76,8 +75,6 @@ examples:
   - advanced_table_padding_control_per_row: Padding Control using Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
-  - advanced_table_column_styling_background: Column Styling Background Color
-  - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
   - advanced_table_fullscreen: Fullscreen

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

@@ -45,6 +45,4 @@ export { default as AdvancedTableWithCustomHeaderMultiHeader } from './_advanced
 export { default as AdvancedTableSortPerColumn } from './_advanced_table_sort_per_column.jsx'
 export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced_table_sort_per_column_for_multi_column.jsx'
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
-export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
-export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
-export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
+export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb

@@ -0,0 +1,26 @@
+<% data = [{
+    name: 'Installation',
+    data: [1475,200,3000,654,656]
+}, {
+    name: 'Manufacturing',
+    data: [4434,524,2320,440,500]
+}, {
+    name: 'Sales & Distribution',
+    data: [3387,743,1344,434,440,]
+}, {
+    name: 'Project Development',
+    data: [3227,878,999,780,1000]
+}, {
+    name: 'Other',
+    data: [1111,677,3245,500,200]
+}] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-colors",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Bar Graph with Custom Data Colors',
+    colors: ['data-4', 'data-5', 'data-6', 'data-7', 'data-8']
+}) %>

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

@@ -0,0 +1,55 @@
+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";
+
+
+
+const chartData = [{
+  name: 'Installation',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  name: 'Manufacturing',
+  data: [4434, 524, 2320, 440, 500],
+}, {
+  name: 'Sales & Distribution',
+  data: [3387, 743, 1344, 434, 440],
+}, {
+  name: 'Project Development',
+  data: [3227, 878, 999, 780, 1000],
+}, {
+  name: 'Other',
+  data: [1111, 677, 3245, 500, 200],
+}]
+
+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_colors.md

@@ -0,0 +1,2 @@
+Custom data `colors` allow for color customization to match the needs of business requirements.
+Pass the prop colors and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb

@@ -0,0 +1,42 @@
+<% data = [{
+  name: 'Role',
+  data: [0, 200, 300, 654, 656],
+}, {
+  name: 'Company',
+  data: [150, 524, 320, 440, 500],
+}] %>
+
+<% bar_graph_options = {
+  customOptions: {
+    yAxis: {
+      tickInterval: 5,
+    },
+    xAxis: {
+      categories: [
+        raw(pb_rails("icon", props: { icon: "frown", color: "error", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "frown", color: "warning", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "frown-open", color: "neutral", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "smile", color: "category_7", size: "2x" })),
+        raw(pb_rails("icon", props: { icon: "smile-beam", color: "success", size: "2x" }))
+      ],
+      labels: {
+        useHTML: true,
+        sytle: {
+          fontSize: '1.4em',
+        },
+        y: 42,
+      },
+    },
+    legend: {
+      itemMarginTop: 62,
+    },
+  } 
+} %>
+
+<%= pb_rails("bar_graph", props: {
+    chart_data: data,
+    id: "bar-default",
+    legend: true,
+    title: 'Bar Graph with Custom Overrides',
+    custom_options: bar_graph_options
+}) %>

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

@@ -0,0 +1,2 @@
+The `custom_options` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
+ It's important to note that certain options may require specific script imports to function properly.

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb

@@ -0,0 +1,26 @@
+<% data = [{
+    name: 'Installation',
+    data: [1475,200,3000,654,656]
+}, {
+    name: 'Manufacturing',
+    data: [4434,524,2320,440,500]
+}, {
+    name: 'Sales & Distribution',
+    data: [3387,743,1344,434,440,]
+}, {
+    name: 'Project Development',
+    data: [3227,878,999,780,1000]
+}, {
+    name: 'Other',
+    data: [1111,677,3245,500,200]
+}] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-default",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    subtitle: 'Source: thesolarfoundation.com',
+    title: 'Solar Employment Growth by Sector, 2010-2016',
+}) %>

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

@@ -0,0 +1,55 @@
+import React from 'react'
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+
+
+const chartData = [{
+  name: 'Installation',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  name: 'Manufacturing',
+  data: [4434, 524, 2320, 440, 500],
+}, {
+  name: 'Sales & Distribution',
+  data: [3387, 743, 1344, 434, 440],
+}, {
+  name: 'Project Development',
+  data: [3227, 878, 999, 780, 1000],
+}, {
+  name: 'Other',
+  data: [1111, 677, 3245, 500, 200],
+}]
+
+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.html.erb

@@ -0,0 +1,26 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-fixed-height",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Fixed Height (300px)',
+    height: '300'
+}) %>
+
+<br /><br />
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-percentage-height",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Percentage Height (50%)',
+    height: '50%'
+}) %>

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

@@ -0,0 +1,69 @@
+import React from 'react'
+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 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>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={pixelOptions}
+      />
+
+    <br />
+    <br />
+
+    <HighchartsReact
+        highcharts={Highcharts}
+        options={percentageOptions}
+    />
+  </div>
+)
+
+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.html.erb

@@ -0,0 +1,58 @@
+<% bar_graph_options = {
+    customOptions: {
+        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: {
+            min: 0,
+            title: {
+                text: 'Population (millions)',
+                align: 'high'
+            },
+            labels: {
+                overflow: 'justify'
+            },
+        },
+        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("bar_graph", props: {
+    id: "bar-horizontal",
+    y_axis_min: 0,
+    custom_options: bar_graph_options,
+}) %>

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

@@ -0,0 +1,64 @@
+import React from 'react'
+import barGraphTheme from '../barGraphTheme';
+import Highcharts from "highcharts";
+import HighchartsReact from "highcharts-react-official";
+
+
+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 options = Highcharts.merge({}, barGraphTheme, chartOptions)
+
+const BarGraphHorizontal = () => (
+  <div>
+    <HighchartsReact
+        highcharts={Highcharts}
+        options={options}
+    />
+  </div>
+)
+
+export default BarGraphHorizontal

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.html.erb

@@ -0,0 +1,14 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-test-2",
+    y_axis_min: 0,
+    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Bar Graph with Legend',
+    legend: true,
+}) %>

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

@@ -0,0 +1,40 @@
+import React from 'react'
+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 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.html.erb

@@ -0,0 +1,15 @@
+<% data = [{
+    name: 'Number of Installations',
+    data: [1475,200,3000,654,656]
+}] %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-test-3",
+    y_axis_min: 0,
+    x_axis_categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    title: 'Bar Graph with Legend Non Clickable',
+    legend: true,
+    toggle_legend_click: false,
+}) %>

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

@@ -0,0 +1,48 @@
+import React from 'react'
+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 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