playbook_ui_docs 14.22.0.pre.alpha.play2253rowlevelcoloringadvancedtablerails8971 → 14.22.0.pre.alpha.play2261highchartsbargraphimportedstyles8730

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4425e1d05c8714a7db681e3d702a2327ee682dc98f6c0443ed396bacbf911d21
-  data.tar.gz: d51d67771742c983cddddef4ccc2d2af6db70e2973e0b2a326d449a44b8955ba
+  metadata.gz: 3491e5ef8982f4fbe511b56403c66744cbf949884c9e89857005622dcd2e8d69
+  data.tar.gz: a8448d740f0b1997124182820bde98f02454b6826b33d45230b6c324c1346edd
 SHA512:
-  metadata.gz: 62309a3b8af790d19ea0165efcf9b73f2d61f43b9ec5fafb54ae5995a5642a0f808567c966b41f3890eeab24d4aa034158ca4ed7b409af213f49d45c6889c180
-  data.tar.gz: a931f310f1de57194896191132fcbaf7bb54bce5f9480364a91339b8c298d655b1c393157ebb6e88bada707c0e921e5327210ad10452035682097bce0915ca63
+  metadata.gz: 19f24771920158c8f101854f6f9e454c3314c3ce818715f8e44fa600e300c5de8ee10b552881e911c46f3144742e495c800e360f418bb379b37d1876f93e1efa
+  data.tar.gz: b497ce73018b9b8d48a1dfe256e7fd49c9b64b35b282bf1e41900320b459f2bc779a32db0fa542f56ca78c030e1c7cf21c78b3e36336cc25a483bec64dba0b91

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

@@ -12,20 +12,19 @@ examples:
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+  - advanced_table_column_border_color_rails: Column Group Border Color
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
   - 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
-
 
   react:
   - advanced_table_default: Default (Required Props)
+  - advanced_table_loading: Loading State
   - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
   - advanced_table_custom_sort: Custom Sort
@@ -39,31 +38,30 @@ examples:
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
   - advanced_table_sticky_columns: Sticky Columns
   - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
+  - 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_loading: Loading State
-  - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
+  - advanced_table_column_border_color: Column Group Border Color
   - advanced_table_no_subrows: Table with No Subrows or Expansion
-  - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
   - advanced_table_inline_editing: Inline Cell Editing
+  - advanced_table_fullscreen: Fullscreen
   - advanced_table_column_visibility: Column Visibility Control
   - advanced_table_column_visibility_with_state: Column Visibility Control With State
   - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
   - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
+  - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - advanced_table_row_styling: Row Styling
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
-  - advanced_table_column_border_color: Column Group Border Color
-  - advanced_table_fullscreen: Fullscreen
   - advanced_table_infinite_scroll: Infinite Scroll

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

@@ -1,9 +1,9 @@
 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 barGraphTheme from '../barGraphTheme';
 
 
 const chartData = [{

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

@@ -1,8 +1,8 @@
 import React from 'react'
-import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
+import barGraphTheme from '../barGraphTheme';
 
 const chartData = [{
   name: 'Installation',

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

@@ -1,8 +1,8 @@
 import React from 'react'
-import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
+import barGraphTheme from '../barGraphTheme';
 
 const chartData = [{
   name: 'Number of Installations',

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

@@ -1,8 +1,8 @@
 import React from 'react'
-import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
+import barGraphTheme from '../barGraphTheme';
 
 const chartOptions = {
     chart: {

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

@@ -1,8 +1,8 @@
 import React from 'react'
-import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
+import barGraphTheme from '../barGraphTheme';
 
 const chartData = [{
   name: 'Number of Installations',

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

@@ -1,8 +1,8 @@
 import React from 'react'
-import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
+import barGraphTheme from '../barGraphTheme';
 
 const chartData = [{
   name: 'Number of Installations',

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

@@ -1,10 +1,10 @@
 import React from 'react'
-import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
 import Title from "../../pb_title/_title"
 
+import barGraphTheme from '../barGraphTheme';
 
 const chartData = [{
   name: 'Installation',

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

@@ -1,8 +1,9 @@
 import React from 'react'
-import barGraphTheme from '../barGraphTheme';
+
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
+import barGraphTheme from '../barGraphTheme';
 
 const chartData = [{
   name: 'Installation',

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

@@ -1,9 +1,9 @@
 import React from 'react'
-import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts"
 import HighchartsReact from "highcharts-react-official"
 
 
+import barGraphTheme from '../barGraphTheme';
 import colors from '../../tokens/exports/_colors.module.scss'
 import typography from '../../tokens/exports/_typography.module.scss'
 

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

@@ -1,8 +1,9 @@
 import React from 'react'
-import barGraphTheme from '../barGraphTheme';
+
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
+import barGraphTheme from '../barGraphTheme';
 
 const chartData = [{
   name: 'Number of Installations',

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

@@ -1,8 +1,8 @@
 import React from 'react'
-import barGraphTheme from '../barGraphTheme';
 import Highcharts from "highcharts";
 import HighchartsReact from "highcharts-react-official";
 
+import barGraphTheme from '../barGraphTheme';
 
 const chartData = [{
   name: 'Installation',

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

@@ -1 +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 BarGraphTheme.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.
+To apply Playbook styles to your Highchart, import BarGraphTheme.ts 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_body/docs/_body_truncate.jsx

@@ -19,7 +19,7 @@ const BodyTruncate = (props) => {
       <Body
           marginBottom="md"
           text={lorem}
-          truncate={1}
+          truncate="1"
           {...props}
       />
 
@@ -30,7 +30,7 @@ const BodyTruncate = (props) => {
       <Body
           marginBottom="md"
           text={lorem}
-          truncate={2}
+          truncate="2"
           {...props}
       />
 
@@ -40,7 +40,7 @@ const BodyTruncate = (props) => {
       />
       <Body
           text={lorem}
-          truncate={3}
+          truncate="3"
           {...props}
       />
     </Flex>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx

@@ -1,88 +1,43 @@
 import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+
+import CircleChart from '../_circle_chart'
 import Title from '../../pb_title/_title'
 
 const dataWithABlock = [
   {
     name: 'Waiting for Calls',
-    y: 41,
+    value: 41,
   },
   {
     name: 'On Call',
-    y: 49,
+    value: 49,
   },
   {
     name: 'After Call',
-    y: 10,
+    value: 10,
   },
 ]
 
-const CircleChartBlock = (props) => {
-  const chartOptions = {
-    series: [{
-      data: dataWithABlock,
-      innerSize: '100%',
-      borderWidth: 20,
-      borderColor: null,
-    }],
-    chart: {
-      events: {
-        render: function() {
-          const chart = this;
-          const blockElement = document.querySelector('.pb-circle-chart-block');
-          if (blockElement) {
-            blockElement.style.width = chart.chartWidth + 'px';
-            blockElement.style.height = chart.chartHeight + 'px';
-          }
-        },
-        redraw: function() {
-          const chart = this;
-          const blockElement = document.querySelector('.pb-circle-chart-block');
-          if (blockElement) {
-            blockElement.style.width = chart.chartWidth + 'px';
-            blockElement.style.height = chart.chartHeight + 'px';
-          }
-        }
-      }
-    }
-  }
-
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+const CircleChartBlock = (props) => (
 
-  return (
-    <div>
-      <div style={{ position: 'relative' }}>
-        <HighchartsReact
-            highcharts={Highcharts}
-            options={options}
-        />
-        <div 
-            className="pb-circle-chart-block"
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              zIndex: 1,
-              textAlign: 'center',
-              pointerEvents: 'none'
-          }}
-        >
-          <Title
-              size={1}
-              tag="div"
-              {...props}
-          >
-            {'83'}
-          </Title>
-        </div>
-      </div>
-    </div>
-  )
-}
+  <div>
+    <CircleChart
+        chartData={dataWithABlock}
+        id="chart-with-a-block"
+        innerSize="lg"
+        marginTop="xl"
+        rounded
+        {...props}
+    >
+      <Title
+          size={1}
+          tag="div"
+          {...props}
+      >
+        {'83'}
+      </Title>
+    </CircleChart>
+  </div>
+)
 
-export default CircleChartBlock
+export default CircleChartBlock

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx

@@ -1,44 +1,31 @@
 import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import colors from '../../tokens/exports/_colors.module.scss'
+
+import CircleChart from '../_circle_chart'
 
 const dataWithColors = [
   {
     name: 'Waiting for Calls',
-    y: 41,
+    value: 41,
   },
   {
     name: 'On Call',
-    y: 49,
+    value: 49,
   },
   {
     name: 'After Call',
-    y: 10,
+    value: 10,
   },
 ]
 
-const CircleChartColors = () => {
-  const chartOptions = {
-    series: [{ data: dataWithColors }],
-    plotOptions: {
-      pie: {
-        colors: ["#144075", colors.data_4, colors.data_2]
-      }
-    }
-  }
-
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const CircleChartColors = (props) => (
+  <div>
+    <CircleChart
+        chartData={dataWithColors}
+        colors={['data-6', 'data-4', 'data-2']}
+        id="colors-example"
+        {...props}
+    />
+  </div>
+)
 
-export default CircleChartColors
+export default CircleChartColors

data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors_rails.md → _circle_chart_colors.md}

@@ -1,2 +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`.
+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_circle_chart/docs/_circle_chart_custom_tooltip.jsx

@@ -1,43 +1,31 @@
 import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+
+import CircleChart from '../_circle_chart'
 
 const data = [
   {
     name: 'Waiting for Calls',
-    y: 41,
+    value: 41,
   },
   {
     name: 'On Call',
-    y: 49,
+    value: 49,
   },
   {
     name: 'After Call',
-    y: 10,
+    value: 10,
   },
 ]
 
-const CircleChartCustomTooltip = () => {
-  const chartOptions = {
-    series: [{ data: data }],
-    tooltip: {
-      headerFormat: null,
-      pointFormat: '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>',
-      useHTML: true,
-    },
-  }
-
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
+const CircleChartCustomTooltip = (props) => (
+  <div>
+    <CircleChart
+        chartData={data}
+        id="circle-chart-default"
+        tooltipHtml= '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>'
+        {...props}
+    />
+  </div>
+)
 
-export default CircleChartCustomTooltip
+export default CircleChartCustomTooltip

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

@@ -1,5 +1,3 @@
-Custom tooltip formatting is configured through the tooltip object in the chart options: 
-`headerFormat` **Type**: String | when set to null will disable the header.
-`pointFormat` **Type**: String | defines the HTML template for each data point and supports custom HTML when `useHTML` is enabled.
-`useHTML` **Type**: boolean (default false) | enables HTML rendering in tooltips.
+A custom tooltip format can be specified. The desired format can be passed as a `string` of custom HTML to the `tooltipHtml` prop.
+
 `{point.name}` and `{point.y}` are useful values that can be referenced for each point in the graph.

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx

@@ -1,38 +1,30 @@
 import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
+
+import CircleChart from '../_circle_chart'
 
 const data = [
   {
     name: 'Waiting for Calls',
-    y: 41,
+    value: 41,
   },
   {
     name: 'On Call',
-    y: 49,
+    value: 49,
   },
   {
     name: 'After Call',
-    y: 10,
+    value: 10,
   },
 ]
 
-const chartOptions = {
-  series: [{ data: data }],
-}
-
-const CircleChartDefault = () => {
-  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
+const CircleChartDefault = (props) => (
+  <div>
+    <CircleChart
+        chartData={data}
+        id="circle-chart-default"
+        {...props}
+    />
+  </div>
+)
 
-export default CircleChartDefault;
+export default CircleChartDefault