playbook_ui_docs 14.23.0.pre.rc.2 → 14.23.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 190428db0e7442d7e696e0d449a2d347fa86dcdab8d6be86dbfab8693b50b856
-  data.tar.gz: dc907972424b05d67da04273e4fed3d03bdecdb6da34cc6cc6c6bea0c9d85a76
+  metadata.gz: d28518474ad1f35bda950e166683d8e9646878fd44d6d7c6c20c0f1f5990bf93
+  data.tar.gz: 58ffcf9e3dde3729e37a5d709581c8a95483d471e9cd061c789189c7f51cac31
 SHA512:
-  metadata.gz: 279d78a480b1460fa9f6ddc11ebf7cff297549f8a94aad0b911d9f3d0012f5486248b73bf515c5aed8d6b194d06c6fd818eff63cf7e589f1802bdcaf6694f1c9
-  data.tar.gz: 517667dd5a348b793e94a968be189f14a1999106f8cc74efdce213d0b42e468ab3a5d1196a7e0c97a4f47be8e7850558ec4d1ecf83ee909aa8d88deecff3c0d8
+  metadata.gz: 12822d1bc4c0e59136659dea23364442540ad5ba18592dccceb32ee518f5e05049af56b2beabdf02c8ef4615f36677685c2f85f9d345104b46a5761084c2d8c9
+  data.tar.gz: 1bcc7355fa64d2dfb032b2391a2facf50366f9e11b158c77f4ab91bf7998739bb61db87bdf9c8ada0ffdfa83337a2a376467869f4cb35a5d0019e6ba11a94b58

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

@@ -12,7 +12,6 @@ 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)
@@ -21,10 +20,11 @@ examples:
   - advanced_table_scrollbar_none: Advanced Table Scrollbar None
   - 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
@@ -38,30 +38,31 @@ 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/_description.md

@@ -1 +1 @@
-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.
+**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.

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_body/docs/_body_truncate_react.md

@@ -0,0 +1,4 @@
+##### Prop
+`truncate` | **Type**: Enum | **Values**: 1 | 2 | 3 | 4 | 5
+
+The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.

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

@@ -1,43 +1,88 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 import Title from '../../pb_title/_title'
 
 const dataWithABlock = [
   {
     name: 'Waiting for Calls',
-    value: 41,
+    y: 41,
   },
   {
     name: 'On Call',
-    value: 49,
+    y: 49,
   },
   {
     name: 'After Call',
-    value: 10,
+    y: 10,
   },
 ]
 
-const CircleChartBlock = (props) => (
+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)
 
-  <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>
-)
+  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>
+  )
+}
 
-export default CircleChartBlock
+export default CircleChartBlock

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

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

data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors.md → _circle_chart_colors_rails.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_colors_react.md

@@ -0,0 +1,2 @@
+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 plotOptions.pie.colors array using the desired color variables. Hex colors are also available `eg: #CA0095`.

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

@@ -1,31 +1,43 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const data = [
   {
     name: 'Waiting for Calls',
-    value: 41,
+    y: 41,
   },
   {
     name: 'On Call',
-    value: 49,
+    y: 49,
   },
   {
     name: 'After Call',
-    value: 10,
+    y: 10,
   },
 ]
 
-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>
-)
+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>
+  )
+}
 
-export default CircleChartCustomTooltip
+export default CircleChartCustomTooltip

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

@@ -1,3 +1,5 @@
-A custom tooltip format can be specified. The desired format can be passed as a `string` of custom HTML to the `tooltipHtml` prop.
-
+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.
 `{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,30 +1,38 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const data = [
   {
     name: 'Waiting for Calls',
-    value: 41,
+    y: 41,
   },
   {
     name: 'On Call',
-    value: 49,
+    y: 49,
   },
   {
     name: 'After Call',
-    value: 10,
+    y: 10,
   },
 ]
 
-const CircleChartDefault = (props) => (
-  <div>
-    <CircleChart
-        chartData={data}
-        id="circle-chart-default"
-        {...props}
-    />
-  </div>
-)
+const chartOptions = {
+  series: [{ data: data }],
+}
+
+const CircleChartDefault = () => {
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  );
+};
 
-export default CircleChartDefault
+export default CircleChartDefault;

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

@@ -1,122 +1,152 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const dataFirst = [
   {
     name: 'Bugs',
-    value: 8,
+    y: 8,
   },
   {
     name: 'Chores',
-    value: 1,
+    y: 1,
   },
   {
     name: 'Stories',
-    value: 12,
+    y: 12,
   },
 ]
 
 const dataSecond = [
   {
     name: 'Queued',
-    value: 7,
+    y: 7,
   },
   {
     name: 'In Progress',
-    value: 6,
+    y: 6,
   },
   {
     name: 'Validation',
-    value: 3,
+    y: 3,
   },
   {
     name: 'Done',
-    value: 6,
+    y: 6,
   },
 ]
 
 const dataThird = [
   {
     name: '1 Point Tickets',
-    value: 2,
+    y: 2,
   },
   {
     name: '3 Point Tickets',
-    value: 5,
+    y: 5,
   },
   {
     name: '5 Point Tickets',
-    value: 6,
+    y: 6,
   },
   {
     name: '8 Point Tickets',
-    value: 3,
+    y: 3,
   },
   {
     name: '13 Point Tickets',
-    value: 1,
+    y: 1,
   },
 ]
+
 const dataFourth = [
   {
     name: 'Facebook',
-    value: 2498,
+    y: 2498,
   },
   {
     name: 'YouTube',
-    value: 2000,
+    y: 2000,
   },
   {
     name: 'WhatsApp',
-    value: 2000,
+    y: 2000,
   },
   {
     name: 'Facebook Messenger',
-    value: 1300,
+    y: 1300,
   },
   {
     name: 'WeChat',
-    value: 1165,
+    y: 1165,
   },
   {
     name: 'Instagram',
-    value: 1000,
+    y: 1000,
   },
   {
     name: 'Tik Tok',
-    value: 800,
+    y: 800,
   },
 ]
 
-const CircleChartInnerSizes = (props) => (
-  <div>
-    <CircleChart
-        chartData={dataFirst}
-        id="with-innersize-sm"
-        innerSize="sm"
-        {...props}
-    />
-    <CircleChart
-        chartData={dataSecond}
-        id="with-innersize-md"
-        innerSize="md"
-        {...props}
-    />
-    <CircleChart
-        chartData={dataThird}
-        id="with-innersize-lg"
-        innerSize="lg"
-        {...props}
-    />
-    <CircleChart
-        chartData={dataFourth}
-        className="poop"
-        id="with-innersize-none "
-        innerSize="none"
-        {...props}
-    />
-  </div>
-)
+const CircleChartInnerSizes = () => {
+  const chartOptionsSmall = {
+    series: [{ 
+      data: dataFirst,
+      innerSize: '35%'
+    }],
+  }
+
+  const chartOptionsMedium = {
+    series: [{ 
+      data: dataSecond,
+      innerSize: '50%'
+    }],
+  }
+
+  const chartOptionsLarge = {
+    series: [{ 
+      data: dataThird,
+      innerSize: '85%'
+    }],
+  }
+
+  const chartOptionsNone = {
+    series: [{ 
+      data: dataFourth,
+      innerSize: '0%'
+    }],
+  }
+
+  const optionsSmall = Highcharts.merge({}, circleChartTheme, chartOptionsSmall)
+  const optionsMedium = Highcharts.merge({}, circleChartTheme, chartOptionsMedium)
+  const optionsLarge = Highcharts.merge({}, circleChartTheme, chartOptionsLarge)
+  const optionsNone = Highcharts.merge({}, circleChartTheme, chartOptionsNone)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={optionsSmall}
+      />
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={optionsMedium}
+      />
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={optionsLarge}
+      />
+      <div className="poop">
+        <HighchartsReact
+            highcharts={Highcharts}
+            options={optionsNone}
+        />
+      </div>
+    </div>
+  )
+}
 
-export default CircleChartInnerSizes
+export default CircleChartInnerSizes