RubyGems - playbook_ui_docs - Versions diffs - 14.22.0.pre.alpha.popoverkittransitionpoppertofloatingui8781 → 14.22.0.pre.alpha.testdialog8898 - Mend

playbook_ui_docs 14.22.0.pre.alpha.popoverkittransitionpoppertofloatingui8781 → 14.22.0.pre.alpha.testdialog8898

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 704d01da3888a6cf02969a583cd5dd19db7e3e91d882e0a7a6a1f50e175e5bb9
-  data.tar.gz: 36b9fee9ce35049cd977fdf30bd95f9758afbb07b660df1356c990bfc22b87e0
+  metadata.gz: 71bef40d3e7d58c7a5558ceb72dc1371bf759b6aed98d3f49a2e784b634fd59b
+  data.tar.gz: 88fe130e7d308d3a402f216a8abce373c67e4e76069427e4b9b2e19e35a19f07
 SHA512:
-  metadata.gz: db12dbbfd2234e6469f96584ed34b5eaff6ba3922d5ab633d0d7685878fcc08f214e134052d601c4b27d2cd3be1e2ae3cbc70840da0f9fa2b4361199211534ec
-  data.tar.gz: c5a5b215490e4a0be36cb65ee4c065d9995719c40911514bccc949c8398bea375d9341db984cac2f3c7aadc5e6f87e7bbe2eeb83bcc7658e5d822beb7c4af257
+  metadata.gz: a7ea9754f2b79d84eecde9bc0912846c6598e5ddcdad7b40011e088c9fcd1d821709379d1951ba4eb2efd8fea712c717fdd0782aca4133cee88fe1d6ac2c8cc6
+  data.tar.gz: f7d5ee9dcda45e0e6e0d81ea60c84a4261ff1c43e2eff09dae44e1f4476c46f847fe551e854146ce924a0e34fd84327e7cd2ccd5eb8429e13d8d5157a357cea4

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

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

data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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} RENAMED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ Custom data colors allow for color customization to match the needs of business requirements.
2	+ 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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