playbook_ui_docs 14.23.0 → 14.24.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d28108345083b5bb0083369d7668364f699bb2a6ec6f047603a9e06366e2e337
-  data.tar.gz: d7a3004f9cff82f33a7cbcdb44ec881a577199f270264bf962b7ceb686f0adc0
+  metadata.gz: fe503f434bb822601177c12c9e8e0d4c143ad4ac22a985a81b6f3df008fda245
+  data.tar.gz: f552b7bf50c81eb4501849a600e57eaeb07ab57698f8463f3d026b4232916029
 SHA512:
-  metadata.gz: e6d3157b2d294b6f84894fa24f9d803222c38df20a8af76920e1ee18f782f7a97383d0587e88e3a627eea4987e9db286b040ffed512ef1e32874d5e471040c4b
-  data.tar.gz: b62b6090d9262bee0d96f10e190bc891ca550e3f687561329a571e2ed6cd87f98a1a7cceebbd77c7c7392dbddb52f605b2c884507d97a83956278c99bb9f37f1
+  metadata.gz: a85ac4d9dba896769d36788128cac894a042fa2e21c386d8e53c3818230821bd89a86ca5fe24a9d48b9789ee851808bb4d07b2f70e2bce4be76f285d5f04b101
+  data.tar.gz: 673c6944fbc1af2bb8c7638b62d6e081de0a3f29179b3c09bc4976fcff9ff27965b21648408dc4add15b5d25091a8e832a8c3c4aef274371f2407c80abb47c08

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

@@ -0,0 +1,46 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      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",
+    }
+] %>
+
+<% row_styling = [
+  {
+    row_id: "1",
+    background_color: "#F9BB00",
+  },
+  {
+    row_id: "8",
+    background_color: "#0056CF",
+    font_color: "white",
+    expand_button_color: "white",
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "row-styling", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>

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

@@ -0,0 +1,7 @@
+The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `row_styling` gives you 3 optional controls:
+
+- `background_color` : use this to control the background color of the row
+- `font_color`: use this to control font color for each row if needed, for example if using a darker background color.
+- `expand_button_color`: use this to control the color of the expand icon if needed, for example if using a darker background color.
+
+**NOTE:** Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function.

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

@@ -1 +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. 
+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/_advanced_table_with_custom_header_rails.html.erb

@@ -0,0 +1,51 @@
+<%
+  column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      header: ->(cell, label) {
+        capture do
+          pb_rails("flex", props: { align_items: "center", justify_content: "center" }) do
+            pb_rails("caption", props: { margin_right: "xs", text: "New Enrollments" }) +
+            pb_rails("icon", props: { id: "tooltip-interact", icon: "info", size: "xs" }) +
+            pb_rails("tooltip", props: {
+              trigger_element_id: "tooltip-interact",
+              tooltip_id: "example-custom-tooltip",
+              position: "top",
+              z_index: "10"
+            }) do
+              "Whoa. I'm a Tooltip"
+            end
+          end
+        end
+      }
+    },
+    {
+      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",
+    }
+  ]
+%>
+
+<%= pb_rails("advanced_table", props: { id: "custom_header_table", table_data: @table_data, column_definitions: column_definitions }) %>

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

@@ -0,0 +1 @@
+The optional `header` item can be used within `column_definitions` 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

@@ -10,6 +10,7 @@ examples:
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
+  - advanced_table_with_custom_header_rails: Custom Header Cell
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_no_subrows: Table with No Subrows or Expansion
@@ -18,6 +19,7 @@ examples:
   - advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
+  - advanced_table_row_styling: Row Styling
   - advanced_table_column_styling_rails: Column Styling
   - advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
   - advanced_table_column_border_color_rails: Column Group Border Color

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

@@ -1,7 +1,7 @@
 ##### 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)

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md

@@ -1,7 +1,7 @@
 ##### 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)

data/app/pb_kits/playbook/pb_gauge/docs/_description.md

@@ -0,0 +1 @@
+**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import gaugeTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx

@@ -1,19 +1,36 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+import colors from '../../tokens/exports/_colors.module.scss'
 
-const data = [
-  { name: 'Name', value: 67 },
-]
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
-const GaugeColors = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        id="gauge-colors"
-        {...props}
-        colors={['data-7']}
-    />
-  </div>
-)
+const data = [{ name: "Name", y: 67 }]
 
-export default GaugeColors
+const baseOptions = {
+  series: [{ data: data }],
+  plotOptions: {
+    solidgauge: {
+      borderColor: colors.data_7,
+    }
+  },
+};
+
+const GaugeColors = () => {
+  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GaugeColors;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors_react.md

@@ -0,0 +1,2 @@
+Custom data colors allow for color customization to match the needs of business requirements.
+Pass the prop `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. Hex colors are also available `eg: #CA0095`

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx

@@ -2,14 +2,44 @@ import React from "react";
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
-import Gauge from '../../pb_gauge/_gauge'
 import Card from '../../pb_card/_card'
 import Caption from '../../pb_caption/_caption'
 import Body from '../../pb_body/_body'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
 import Title from '../../pb_title/_title'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
-const data = [{ name: "Name", value: 10 }];
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
+
+const data = [{ name: "Name", y: 10 }];
+
+const baseOptions = {
+  series: [{ data: data }],
+  chart: {
+    height: "150",
+  },
+  plotOptions: {
+    series: {
+      animation: false,
+    },
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
+      },
+    },
+  },
+};
+
+const options = Highcharts.merge({}, gaugeTheme, baseOptions);
 
 const GaugeComplex = (props) => (
   <Flex
@@ -100,13 +130,9 @@ const GaugeComplex = (props) => (
                   shrink
                   {...props}
               >
-                <Gauge
-                    chartData={data}
-                    disableAnimation
-                    height="150"
-                    id="gauge-complex"
-                    suffix="%"
-                    {...props}
+                <HighchartsReact
+                    highcharts={Highcharts}
+                    options={options}
                 />
                </FlexItem>
             </Flex>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex_react.md

@@ -0,0 +1 @@
+We are able to wrap the Highcharts Gauge kit within Playbook kits (such as Flex and Card components).

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx

@@ -1,18 +1,30 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
 
-const data = [
-  { name: 'Name', value: 45 },
-]
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
-const GaugeDefault = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        id="gauge-default"
-        {...props}
-    />
-  </div>
-)
+const data = [{ name: "Name", y: 45 }]
 
-export default GaugeDefault
+const baseOptions = {
+  series: [{ data: data }],
+};
+
+const GaugeDefault = () => {
+  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GaugeDefault;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx

@@ -1,19 +1,36 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
 
-const data = [
-  { name: 'Participants', value: 84 },
-]
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
-const GaugeDisableAnimation = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        disableAnimation
-        id="gauge-disable-animation"
-        {...props}
-    />
-  </div>
-)
+const data = [{ name: "Participants", y: 84 }]
 
-export default GaugeDisableAnimation
+const baseOptions = {
+  series: [{ data: data }],
+  plotOptions: {
+    series: {
+      animation: false,
+    },
+  },
+};
+
+const GaugeDisableAnimation = () => {
+  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+
+  return (
+    <div>
+      <HighchartsReact
+          disableAnimation
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GaugeDisableAnimation;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx

@@ -1,21 +1,49 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
-const data = [
-  { name: 'Capacity', value: 75 },
-]
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
-const GaugeFullCircle = (props) => (
-  <div>
-    <Gauge
-        chartData={data}
-        fullCircle
-        id="gauge-full-circle"
-        suffix="%"
-        title="Seating Capacity"
-        {...props}
-    />
-  </div>
-)
+const data = [{ name: "Capacity", y: 75 }]
 
-export default GaugeFullCircle
+const baseOptions = {
+  title: {
+    text: "Seating Capacity",
+  },
+  series: [{ data: data }],
+  pane: {
+    startAngle: 0,
+    endAngle: 360,
+  },
+  plotOptions: {
+    solidgauge: {
+      dataLabels: {
+        format:
+          `<span class="fix">{y:,f}</span>` +
+          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
+      },
+    },
+  },
+};
+
+const GaugeFullCircle = () => {
+  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          id="gauge-full-circle"
+          options={options}
+      />
+    </div>
+  );
+};
+
+export default GaugeFullCircle;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx

@@ -1,25 +1,62 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
-const GaugeHeight = (props) => (
-  <div>
-    <Gauge
-        chartData={[ { name: 'Pixels', value: 400 } ]}
-        height="400"
-        id="gauge-height-px"
-        suffix="px"
-        title="Fixed Height in Pixels"
-        {...props}
-    />
-    <Gauge
-        chartData={[ { name: 'Percentage', value: 45 } ]}
-        height="45%"
-        id="gauge-height-percent"
-        suffix="%"
-        title="Height as Percentage of Width"
-        {...props}
-    />
-  </div>
-)
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
-export default GaugeHeight
+const GaugeHeight = () => {
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={Highcharts.merge({}, gaugeTheme, {
+            title: {
+              text: "Fixed Height in Pixels",
+            },
+            chart: {
+              height: "400",
+            },
+            series: [{ data: [{ name: "Pixels", y: 400 }] }],
+            plotOptions: {
+              solidgauge: {
+                dataLabels: {
+                  format:
+                    `<span class="fix">{y:,f}</span>` +
+                    `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">px</span>`,
+                },
+              },
+            },
+          })}
+      />
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={Highcharts.merge({}, gaugeTheme, {
+            title: {
+              text: "Height as Percentage of Width",
+            },
+            chart: {
+              height: "45%",
+            },
+            series: [{ data: [{ name: "Percentage", y: 45 }] }],
+            plotOptions: {
+              solidgauge: {
+                dataLabels: {
+                  format:
+                    `<span class="fix">{y:,f}</span>` +
+                    `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">%</span>`,
+                },
+              },
+            },
+          })}
+      />
+    </div>
+  );
+};
+
+export default GaugeHeight;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx

@@ -1,15 +1,31 @@
-import React, { useState } from 'react'
-
+import React, { useState, useRef } from 'react'
 import Button from '../../pb_button/_button'
-import Gauge from '../../pb_gauge/_gauge'
+import gaugeTheme from '../gaugeTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+import HighchartsMore from "highcharts/highcharts-more"
+import SolidGauge from "highcharts/modules/solid-gauge"
+
+HighchartsMore(Highcharts);
+SolidGauge(Highcharts);
 
 const GaugeLiveData = (props) => {
   const [value, setValue] = useState(50)
   const [name, setName] = useState('Name')
+  const chartRef = useRef(null)
+
+  const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters']
 
   const updateValue = () => {
-    setValue(Math.floor(Math.random() * 100))
+    const newValue = Math.floor(Math.random() * 100)
+    setValue(newValue)
+
+    const chart = chartRef.current?.chart
+    if (chart) {
+      chart.series[0].points[0].update(newValue)
+    }
   }
+
   const updateName = () => {
     let index = namesArray.indexOf(name)
     if (namesArray.indexOf(name) == 5) {
@@ -18,8 +34,23 @@ const GaugeLiveData = (props) => {
       index += 1
     }
     setName(namesArray[index])
+
+    const chart = chartRef.current?.chart
+    if (chart) {
+      chart.series[0].points[0].update({ name: namesArray[index] })
+    }
   }
-  const namesArray = ['Name', 'Windows', 'Doors', 'Roofing', 'Siding', 'Gutters']
+
+  const options = Highcharts.merge({}, gaugeTheme,
+    {
+      title: {
+        text: name,
+      },
+      series: [{
+        data: [{ name: name, y: value }]
+      }]
+    }
+  )
 
   return (
     <div>
@@ -33,10 +64,10 @@ const GaugeLiveData = (props) => {
           text="Update Name"
           {...props}
       />
-      <Gauge
-          chartData={[{ name: name, value: value }]}
-          id="gauge-live-data"
-          {...props}
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+          ref={chartRef}
       />
     </div>
   )