playbook_ui 14.22.0.pre.rc.7 → 14.23.0.pre.alpha.PLAY2205atborderbug9085

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

@@ -1,32 +1,41 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const dataWithLegend = [{
   name: 'Bugs',
-  value: 8,
-
+  y: 8,
 },
 {
   name: 'Chores',
-  value: 1,
-
+  y: 1,
 },
 {
   name: 'Stories',
-  value: 12,
-},
-]
+  y: 12,
+}]
+
+const CircleChartWithLegendKit = () => {
+  const chartOptions = {
+    series: [{ data: dataWithLegend }],
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
 
-const CircleChartWithLegendKit = (props) => (
-  <div>
-    <CircleChart
-        chartData={dataWithLegend}
-        id="with-legend-example"
-        legend
-        {...props}
-    />
-  </div>
-)
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
-export default CircleChartWithLegendKit
+export default CircleChartWithLegendKit

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

@@ -1,47 +1,55 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const dataWithTitle = [
   {
     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 CircleChartWithLegendKit = (props) => (
-  <div>
-    <CircleChart
-        chartData={dataWithTitle}
-        id="with-title-example"
-        title="Active Users on Social Media"
-        {...props}
-    />
-  </div>
-)
+const CircleChartWithTitle = () => {
+  const chartOptions = {
+    title: { text: "Active Users on Social Media" },
+    series: [{ data: dataWithTitle }],
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
-export default CircleChartWithLegendKit
+export default CircleChartWithTitle

data/app/pb_kits/playbook/pb_circle_chart/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 circleChartTheme.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_circle_chart/docs/example.yml

@@ -14,7 +14,6 @@ examples:
 
   react:
   - circle_chart_default: Default Style
-  - circle_chart_pb_styles: Playbook Styles
   - circle_chart_live_data: Live Data
   - circle_chart_rounded: Rounded Corners
   - circle_chart_block: Accepts Any Block

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

@@ -9,4 +9,3 @@ export { default as CircleChartLegendPosition } from './_circle_chart_legend_pos
 export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
 export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
 export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
-export { default as CircleChartPbStyles } from "./_circle_chart_pb_styles.jsx"

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -3,7 +3,7 @@ import { InitialStateType, ActionType, DraggableProviderType } from "./types";
 
 const initialState: InitialStateType = {
   items: [],
-  dragData: { id: "", initialGroup: "" },
+  dragData: { id: "", initialGroup: "", originId: "" },
   isDragging: "",
   activeContainer: ""
 };
@@ -60,7 +60,8 @@ export const DraggableProvider = ({
   onDragEnd,
   onDrop,
   onDragOver,
-  dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' }
+  dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' },
+  providerId = 'default', // fallback provided for backward compatibility, so this does not become a required prop
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -93,15 +94,17 @@ export const DraggableProvider = ({
   }, [state.items]);
 
   const handleDragStart = (id: string, container: string) => {
-    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
+    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container, originId: providerId } });
     dispatch({ type: 'SET_IS_DRAGGING', payload: id });
     if (onDragStart) onDragStart(id, container);
   };
 
   const handleDragEnter = (id: string, container: string) => {
+    if (state.dragData.originId !== providerId) return; // Ignore drag events from other providers
+
     if (state.dragData.id !== id) {
       dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
-      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container } });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
     }
     if (onDragEnter) onDragEnter(id, container);
   };
@@ -109,6 +112,7 @@ export const DraggableProvider = ({
   const handleDragEnd = () => {
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+    dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
     if (onDragEnd) onDragEnd();
   };
 
@@ -117,6 +121,8 @@ export const DraggableProvider = ({
   };
 
   const handleDrop = (container: string) => {
+    if (state.dragData.originId !== providerId) return; // Ignore drop events from other providers
+
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     changeCategory(state.dragData.id, container);
@@ -124,6 +130,8 @@ export const DraggableProvider = ({
   };
 
   const handleDragOver = (e: Event, container: string) => {
+     if (state.dragData.originId !== providerId) return; // Ignore drag over events from other providers
+
     e.preventDefault();
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
     if (onDragOver) onDragOver(e, container);

data/app/pb_kits/playbook/pb_draggable/context/types.ts

@@ -6,14 +6,16 @@ export interface ItemType {
 
 export interface InitialStateType {
   items: ItemType[];
-  dragData: { id: string; initialGroup: string };
+  dragData: { id: string; initialGroup: string, originId?: string };
   isDragging: string;
   activeContainer: string;
 }
 
 export type ActionType =
   | { type: 'SET_ITEMS'; payload: ItemType[] }
-  | { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
+  | { type: 'SET_DRAG_DATA'; payload: {
+    originId: string; id: string; initialGroup: string 
+} }
   | { type: 'SET_IS_DRAGGING'; payload: string }
   | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
   | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
@@ -35,4 +37,5 @@ export type ActionType =
     onDrop?: (container: string) => void;
     onDragOver?: (e: Event, container: string) => void;
     dropZone?: DropZoneConfig | string; // Can accept string for backward compatibility
+    providerId?: string;
   }

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;