playbook_ui 14.22.0.pre.alpha.PLAY22578709 → 14.22.0.pre.alpha.PLAY22958842

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

@@ -1,36 +1,37 @@
 import React, { useState } from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 import Button from '../../pb_button/_button'
 
 const CircleChartLiveData = (props) => {
   const [data, setData] = useState([
     {
       name: 'Waiting for Calls',
-      value: 41,
+      y: 41,
     },
     {
       name: 'On Call',
-      value: 49,
+      y: 49,
     },
     {
       name: 'After Call',
-      value: 10,
+      y: 10,
     },
   ])
 
   const data2 = [
     {
       name: 'Waiting for Calls',
-      value: 48,
+      y: 48,
     },
     {
       name: 'On Call',
-      value: 12,
+      y: 12,
     },
     {
       name: 'After Call',
-      value: 140,
+      y: 140,
     },
   ]
 
@@ -38,6 +39,12 @@ const CircleChartLiveData = (props) => {
     setData(data2)
   }
 
+  const chartOptions = {
+    series: [{ data: data }],
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+
   return (
     <div>
       <Button
@@ -45,13 +52,12 @@ const CircleChartLiveData = (props) => {
           text="Update Value"
           {...props}
       />
-      <CircleChart
-          chartData={data}
-          id="circle-chart-live-data"
-          {...props}
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
       />
     </div>
   )
 }
 
-export default CircleChartLiveData
+export default CircleChartLiveData

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

@@ -1,32 +1,45 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const dataRounded = [
   {
     name: 'Waiting for Calls',
-    value: 41,
+    y: 41,
   },
   {
     name: 'On Call',
-    value: 49,
+    y: 49,
   },
   {
     name: 'After Call',
-    value: 10,
+    y: 10,
   },
 ]
 
-const CircleChartRounded = (props) => (
-  <div>
-    <CircleChart
-        chartData={dataRounded}
-        id="default-test-rounded"
-        innerSize="lg"
-        rounded
-        {...props}
-    />
-  </div>
-)
+const CircleChartRounded = () => {
+  const chartOptions = {
+    series: [{ data: dataRounded }],
+    plotOptions: {
+      pie: {
+        borderColor: null,
+        borderWidth: 20,
+        innerSize: '100%',
+      },
+    },
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
-export default CircleChartRounded
+export default CircleChartRounded

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

@@ -1,47 +1,61 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const dataWithLabels = [
   {
     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 CircleChartWithLabels = (props) => (
-  <div>
-    <CircleChart
-        chartData={dataWithLabels}
-        dataLabels
-        id="with-labels-example"
-        {...props}
-    />
-  </div>
-)
+const CircleChartWithLabels = () => {
+  const chartOptions = {
+    series: [{ data: dataWithLabels }],
+    plotOptions: {
+      pie: {
+        dataLabels: {
+          enabled: true,
+        }
+      }
+    }
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
-export default CircleChartWithLabels
+export default CircleChartWithLabels

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: "", originId: "" },
+  dragData: { id: "", initialGroup: "" },
   isDragging: "",
   activeContainer: ""
 };
@@ -60,8 +60,7 @@ export const DraggableProvider = ({
   onDragEnd,
   onDrop,
   onDragOver,
-  dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' },
-  providerId = 'default', // fallback provided for backward compatibility, so this does not become a required prop
+  dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' }
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -94,17 +93,15 @@ export const DraggableProvider = ({
   }, [state.items]);
 
   const handleDragStart = (id: string, container: string) => {
-    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container, originId: providerId } });
+    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
     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, originId: providerId } });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container } });
     }
     if (onDragEnter) onDragEnter(id, container);
   };
@@ -112,7 +109,6 @@ 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();
   };
 
@@ -121,8 +117,6 @@ 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);
@@ -130,8 +124,6 @@ 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,16 +6,14 @@ export interface ItemType {
 
 export interface InitialStateType {
   items: ItemType[];
-  dragData: { id: string; initialGroup: string, originId?: string };
+  dragData: { id: string; initialGroup: string };
   isDragging: string;
   activeContainer: string;
 }
 
 export type ActionType =
   | { type: 'SET_ITEMS'; payload: ItemType[] }
-  | { type: 'SET_DRAG_DATA'; payload: {
-    originId: string; id: string; initialGroup: string 
-} }
+  | { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
   | { type: 'SET_IS_DRAGGING'; payload: string }
   | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
   | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
@@ -37,5 +35,4 @@ 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_tooltip/docs/_tooltip_click_open.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("button", props: { 
+  text: "Click to Open",
+  id: "click-tooltip-trigger-1",
+  variant: "primary"
+}) %>
+
+<%= pb_rails("tooltip", props: {
+  trigger_element_selector: "#click-tooltip-trigger-1",
+  tooltip_id: "click-tooltip-1",
+  position: "top",
+  use_click_to_open: true
+}) do %>
+  Tooltip opened by click! Click trigger again to close.
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md

@@ -0,0 +1 @@
+Set the prop `use_click_to_open` as `true` so that the tooltip will only appear when an item is clicked rather than hovered over.

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

@@ -9,6 +9,7 @@ examples:
   - tooltip_with_icon_circle: Icon Circle Tooltip
   - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
+  - tooltip_click_open: Click to Open
 
   react:
   - tooltip_default_react: Default

data/app/pb_kits/playbook/pb_tooltip/index.js

@@ -19,60 +19,75 @@ export default class PbTooltip extends PbEnhancedElement {
     }
     
     this.triggerElements.forEach((trigger) => {
-      const method = this.triggerMethod
+      const method = this.effectiveTriggerMethod
       const interactionEnabled = this.tooltipInteraction
 
       if (method === 'click') {
-        trigger.addEventListener('click', () => {
-          this.showTooltip(trigger)
-        })
-      } else {
-        trigger.addEventListener('mouseenter', () => {
-          clearSafeZoneListener(this)
-          clearTimeout(this.mouseleaveTimeout)
-          this.currentTrigger = trigger
-          const delayOpen = this.delayOpen ? parseInt(this.delayOpen) : TOOLTIP_TIMEOUT
-          this.mouseenterTimeout = setTimeout(() => {
-            this.showTooltip(trigger)
-            if (interactionEnabled) {
-              this.checkCloseTooltip(trigger)
+        trigger.addEventListener('click', (e) => {
+          if (this.useClickToOpen) {
+            e.preventDefault()
+            if (this.isTooltipVisible()) {
+              this.hideTooltip()
+            } else {
+              this.showTooltip(trigger)
             }
-          }, delayOpen)
+          } else {
+            this.showTooltip(trigger)
+          }
         })
+      } else {
+        if (!this.useClickToOpen) {
+          trigger.addEventListener('mouseenter', () => {
+            clearSafeZoneListener(this)
+            clearTimeout(this.mouseleaveTimeout)
+            this.currentTrigger = trigger
+            const delayOpen = this.delayOpen ? parseInt(this.delayOpen) : TOOLTIP_TIMEOUT
+            this.mouseenterTimeout = setTimeout(() => {
+              this.showTooltip(trigger)
+              if (interactionEnabled) {
+                this.checkCloseTooltip(trigger)
+              }
+            }, delayOpen)
+          })
 
-        trigger.addEventListener('mouseleave', () => {
-          clearTimeout(this.mouseenterTimeout)
-          if (this.delayClose) {
-            const delayClose = parseInt(this.delayClose)
-            this.mouseleaveTimeout = setTimeout(() => {
+          trigger.addEventListener('mouseleave', () => {
+            clearTimeout(this.mouseenterTimeout)
+            if (this.delayClose) {
+              const delayClose = parseInt(this.delayClose)
+              this.mouseleaveTimeout = setTimeout(() => {
+                if (interactionEnabled) {
+                  this.attachSafeZoneListener()
+                } else {
+                  this.hideTooltip()
+                }
+              }, delayClose)
+            } else {
               if (interactionEnabled) {
                 this.attachSafeZoneListener()
               } else {
                 this.hideTooltip()
               }
-            }, delayClose)
-          } else {
-            if (interactionEnabled) {
-              this.attachSafeZoneListener()
-            } else {
-              this.hideTooltip()
             }
-          }
-        })
-
-        if (interactionEnabled) {
-          this.tooltip.addEventListener('mouseenter', () => {
-            clearSafeZoneListener(this)
           })
 
-          this.tooltip.addEventListener('mouseleave', () => {
-            this.attachSafeZoneListener()
-          })
+          if (interactionEnabled) {
+            this.tooltip.addEventListener('mouseenter', () => {
+              clearSafeZoneListener(this)
+            })
+
+            this.tooltip.addEventListener('mouseleave', () => {
+              this.attachSafeZoneListener()
+            })
+          }
         }
       }
     })
   }
 
+  isTooltipVisible() {
+    return this.tooltip && this.tooltip.classList.contains('show')
+  }
+
   attachSafeZoneListener() {
     clearSafeZoneListener(this)
     this.safeZoneHandler = (e) => {
@@ -145,7 +160,7 @@ export default class PbTooltip extends PbEnhancedElement {
 
     this.tooltip.classList.add('show')
 
-    if (this.triggerMethod === 'click') {
+    if (this.effectiveTriggerMethod === 'click' && !this.useClickToOpen) {
       clearTimeout(this.autoHideTimeout)
       this.autoHideTimeout = setTimeout(() => {
         this.hideTooltip()
@@ -224,6 +239,14 @@ export default class PbTooltip extends PbEnhancedElement {
     return this.element.dataset.pbTooltipTriggerMethod || 'hover'
   }
 
+  get useClickToOpen() {
+    return this.element.dataset.pbTooltipUseClickToOpen === 'true'
+  }
+
+  get effectiveTriggerMethod() {
+    return this.useClickToOpen ? 'click' : this.triggerMethod
+  }
+
   get tooltipInteraction() {
     return this.element.dataset.pbTooltipInteraction === 'true'
   }

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -21,6 +21,8 @@ module Playbook
       prop :trigger_method, type: Playbook::Props::Enum,
                             values: %w[hover click],
                             default: "hover"
+      prop :use_click_to_open, type: Playbook::Props::Boolean,
+                               default: false
       prop :width
 
       def classname
@@ -46,6 +48,10 @@ module Playbook
         out
       end
 
+      def effective_trigger_method
+        use_click_to_open ? "click" : (trigger_method || "hover")
+      end
+
       def data
         data = Hash(values[:data]).merge(
           pb_tooltip_kit: true,
@@ -54,8 +60,9 @@ module Playbook
           pb_tooltip_trigger_element_id: trigger_element_id,
           pb_tooltip_tooltip_id: tooltip_id,
           pb_tooltip_show_tooltip: true,
-          pb_tooltip_trigger_method: trigger_method,
-          pb_tooltip_interaction: interaction
+          pb_tooltip_trigger_method: effective_trigger_method,
+          pb_tooltip_interaction: interaction,
+          pb_tooltip_use_click_to_open: use_click_to_open
         )
         data = data.merge(pb_tooltip_delay_open: delay_open) if delay_open
         data = data.merge(pb_tooltip_delay_close: delay_close) if delay_close