playbook_ui 13.29.0.pre.alpha.testingcollapsibleissue3052 → 13.30.0.pre.alpha.PBNTR353draggablev53136

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a4dfe0653d86e536e79e7cd2537477204d815b54a27255442ac5ba1d6df6ac6d
-  data.tar.gz: 8da9b6c0fb744f9a37347fdf3bec56a8c435a3aeeab1933d3441ef5cb6f846fb
+  metadata.gz: 9d681e69c84f185b628e40d1d517d5cee70c28972186ee4b47b21641a4ca4637
+  data.tar.gz: 0c5933b2d3d51c8d8c891f4604f1f11447f1edcf5227446b68db72a4b169731e
 SHA512:
-  metadata.gz: 478df642a3c3079adf7eb546dc8f3a938717d5bb0f50d32e8dd70ebac1f6c16909fa21e613a262e2c94dcafbd5649acb2a2d3daa682ddc5a3f7961986d5aac37
-  data.tar.gz: 0ed83b2e971d7bbf15df28168199a3a9d063abc043df74ea6ac1db4c95cbcfec79883f6c5cba1be43fe9fe9375d26f252ee07ed7f91781035837c8903314a766
+  metadata.gz: 80a03f749ddd4bf241009567ecc83c161a4cbbefc6779d8db7c2b717242ff4ac536afb263715bae97bca4cfb73bbb2c29d11c8747592ea341bed2b4547572ae2
+  data.tar.gz: 9cdc6ecc0caeab5ee99f8846513121233f191f28c3b9dd1b9bf3c631133f707dbde9bec819db905663ca437fd2ba66a43e03a871e055e74874a61de87059ff00

data/app/pb_kits/playbook/_playbook.scss

@@ -62,6 +62,7 @@
 @import 'pb_multiple_users_stacked/multiple_users_stacked';
 @import 'pb_nav/nav';
 @import 'pb_online_status/online_status';
+@import 'pb_overlay/overlay';
 @import 'pb_pagination/pagination';
 @import 'pb_passphrase/passphrase';
 @import 'pb_person/person';

data/app/pb_kits/playbook/index.js

@@ -72,6 +72,7 @@ export { default as MultipleUsersStacked } from './pb_multiple_users_stacked/_mu
 export { default as Nav } from './pb_nav/_nav'
 export { default as NavItem } from './pb_nav/_item'
 export { default as OnlineStatus } from './pb_online_status/_online_status'
+export { default as Overlay} from './pb_overlay/_overlay'
 export { default as Passphrase } from './pb_passphrase/_passphrase'
 export { default as PbReactPopover } from './pb_popover/_popover'
 export { default as Person } from './pb_person/_person'

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb

@@ -0,0 +1,58 @@
+<% bar_graph_options = {
+    customOptions: {
+        chart: {
+            type: 'bar'
+        },
+        title: {
+            text: 'Historic World Population by Region',
+            align: 'left'
+        },
+        subtitle: {
+            text: 'Source: <a ' +
+                'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
+                'target="_blank">Wikipedia.org</a>',
+            align: 'left'
+        },
+        xAxis: {
+            categories: ['Africa', 'America', 'Asia', 'Europe'],
+            lineWidth: 0
+        },
+        yAxis: {
+            min: 0,
+            title: {
+                text: 'Population (millions)',
+                align: 'high'
+            },
+            labels: {
+                overflow: 'justify'
+            },
+        },
+        tooltip: {
+            valueSuffix: ' millions'
+        },
+        plotOptions: {
+            bar: {
+                dataLabels: {
+                    enabled: true
+                },
+                groupPadding: 0.1
+            }
+        },
+        series: [{
+            name: 'Year 1990',
+            data: [631, 727, 3202, 721]
+        }, {
+            name: 'Year 2000',
+            data: [814, 841, 3714, 726]
+        }, {
+            name: 'Year 2018',
+            data: [1276, 1007, 4561, 746]
+        }]
+    }
+} %>
+
+<%= pb_rails("bar_graph", props: {
+    id: "bar-horizontal",
+    y_axis_min: 0,
+    custom_options: bar_graph_options,
+}) %>

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

@@ -0,0 +1,68 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+
+const barGraphOptions = {
+    chart: {
+        type: 'bar'
+    },
+    title: {
+        text: 'Historic World Population by Region',
+        align: 'left'
+    },
+    subtitle: {
+        text: 'Source: <a ' +
+            'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
+            'target="_blank">Wikipedia.org</a>',
+        align: 'left'
+    },
+    xAxis: {
+        categories: ['Africa', 'America', 'Asia', 'Europe'],
+        lineWidth: 0
+    },
+    yAxis: {
+        min: 0,
+        title: {
+            text: 'Population (millions)',
+            align: 'high'
+        },
+        labels: {
+            overflow: 'justify'
+        },
+    },
+    tooltip: {
+        valueSuffix: ' millions'
+    },
+    plotOptions: {
+        bar: {
+            dataLabels: {
+                enabled: true
+            },
+            groupPadding: 0.1
+        }
+    },
+    series: [{
+        name: 'Year 1990',
+        data: [631, 727, 3202, 721]
+    }, {
+        name: 'Year 2000',
+        data: [814, 841, 3714, 726]
+    }, {
+        name: 'Year 2018',
+        data: [1276, 1007, 4561, 746]
+    }]
+}
+
+const BarGraphHorizontal = (props) => (
+  <div>
+    <BarGraph
+        customOptions={barGraphOptions}
+        id="bar-horizontal"
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphHorizontal

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

@@ -12,6 +12,7 @@ examples:
   - bar_graph_stacked: Stacked
   - bar_graph_negative_numbers: Negative Numbers
   - bar_graph_secondary_y_axis: Secondary Y-Axis
+  - bar_graph_horizontal: Custom Options From Highcharts
 
 
   react:
@@ -26,3 +27,4 @@ examples:
   - bar_graph_stacked: Stacked
   - bar_graph_negative_numbers: Negative Numbers
   - bar_graph_secondary_y_axis: Secondary Y-Axis
+  - bar_graph_horizontal: Custom Options From Highcharts

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

@@ -9,3 +9,4 @@ export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
 export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
 export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
 export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
+export { default as BarGraphHorizontal } from './_bar_graph_horizontal.jsx'

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -81,4 +81,9 @@
       }
     }
   }
+
+  .card_draggable_handle {
+    align-self: center;
+    color: $text_lt_light;
+  }
 }

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -8,6 +8,10 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
 
+import Icon from '../pb_icon/_icon'
+import Flex from '../pb_flex/_flex'
+import Draggable from '../pb_draggable/_draggable'
+
 type CardPropTypes = {
   aria?: {[key: string]: string},
   background?: BackgroundColors | ProductColors | "none",
@@ -16,11 +20,15 @@ type CardPropTypes = {
   children: React.ReactChild[] | React.ReactChild | number,
   className?: string,
   data?: {[key: string]: string},
+  dragId?: string,
+  draggableItem?: boolean,
+  dragHandle?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   highlight?: {
     position?: "side" | "top",
     color?: string,
   },
+  id?: string,
   length?: number,
   padding?: string,
   selected?: boolean,
@@ -78,6 +86,9 @@ const Card = (props: CardPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
+    dragId,
+    dragHandle = true,
+    draggableItem = false,
     highlight = {},
     htmlOptions = {},
     selected = false,
@@ -113,15 +124,52 @@ const Card = (props: CardPropTypes): React.ReactElement => {
   const Tag = tagOptions.includes(tag) ? tag : 'div'
 
   return (
-    <Tag
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classnames(cardCss, globalProps(props), className)}
-    >
-      {subComponentTags('Header')}
-      {nonHeaderChildren}
-    </Tag>
+    <>
+    {
+      draggableItem ? (
+        <Draggable.Item dragId={dragId} 
+            key={dragId}
+        >
+        <Tag
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classnames(cardCss, globalProps(props), className)}
+        >
+          {subComponentTags('Header')}
+          {
+            dragHandle ? (
+              <Flex>
+                <span className="card_draggable_handle">
+                  <Icon 
+                      icon="grip-dots-vertical"
+                      paddingRight="xs"
+                      verticalAlign="middle"
+                  />
+                </span>
+                <div style={{width: '100%'}}>
+                  {nonHeaderChildren}
+                </div>
+              </Flex>
+              ) : (
+                nonHeaderChildren
+              )
+          }
+        </Tag>
+        </Draggable.Item>
+        ) : (
+          <Tag
+              {...ariaProps}
+              {...dataProps}
+              {...htmlProps}
+              className={classnames(cardCss, globalProps(props), className)}
+            >
+              {subComponentTags('Header')}
+              {nonHeaderChildren}
+            </Tag>
+              )
+      }
+    </>
   )
 }
 

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -46,16 +46,20 @@ type CircleChartProps = {
   borderWidth?: number;
 };
 
-// Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
+
+
 const alignBlockElement = (event: any) => {
-  const itemToMove = document.querySelector(
+  const itemToMove = document.querySelector<HTMLElement>(
     `#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`
-  ) as HTMLElement;
+  );
   const chartContainer = document.querySelector(`#${event.target.renderTo.id}`);
-  if (itemToMove !== null) {
+
+  if (itemToMove !== null && chartContainer !== null) {
     itemToMove.style.height = `${event.target.chartHeight}px`;
     itemToMove.style.width = `${event.target.chartWidth}px`;
-    chartContainer.firstChild.before(itemToMove);
+    if (chartContainer.firstChild !== null) {
+      chartContainer.firstChild.before(itemToMove);
+    }
   }
 };
 

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -37,7 +37,6 @@
 </div>
 
 <%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {
-        dialogHelper()
-    })
+    window.addEventListener("DOMContentLoaded", () => dialogHelper())
+    window.addEventListener("turbo:frame-load", () => dialogHelper())
 <% end %>

data/app/pb_kits/playbook/pb_draggable/_draggable.scss

@@ -1,11 +1,9 @@
 @import "../tokens/colors";
+@import "../tokens/opacity";
 
 .pb_draggable_container {
   .is_dragging {
-    opacity: 40%;
-  }
-  .active {
-    opacity: 60%;
+    opacity: $opacity_4;
   }
   .pb_draggable_item:hover {
     cursor: grab;

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

@@ -1,90 +1,110 @@
-import React, { createContext, useState, useContext, useEffect } from "react";
+import React, { createContext, useReducer, useContext, useEffect, useMemo } from "react";
+import { InitialStateType, ActionType, DraggableProviderType } from "./types";
+
+const initialState: InitialStateType = {
+  items: [],
+  dragData: { id: "", initialGroup: "" },
+  isDragging: "",
+  activeContainer: ""
+};
+
+const reducer = (state: InitialStateType, action: ActionType) => {
+  switch (action.type) {
+    case 'SET_ITEMS':
+      return { ...state, items: action.payload };
+    case 'SET_DRAG_DATA':
+      return { ...state, dragData: action.payload };
+    case 'SET_IS_DRAGGING':
+      return { ...state, isDragging: action.payload };
+    case 'SET_ACTIVE_CONTAINER':
+      return { ...state, activeContainer: action.payload };
+    case 'CHANGE_CATEGORY':
+      return {
+        ...state,
+        items: state.items.map(item =>
+          item.id === action.payload.itemId
+            ? { ...item, container: action.payload.container }
+            : item
+        )
+      };
+    case 'REORDER_ITEMS': {
+      const { dragId, targetId } = action.payload;
+      const newItems = [...state.items];
+      const draggedItem = newItems.find(item => item.id === dragId);
+      const draggedIndex = newItems.indexOf(draggedItem);
+      const targetIndex = newItems.findIndex(item => item.id === targetId);
+
+      newItems.splice(draggedIndex, 1);
+      newItems.splice(targetIndex, 0, draggedItem);
 
+      return { ...state, items: newItems };
+    }
+    default:
+      return state;
+  }
+};
+
+// Context and Provider
 const DragContext = createContext<any>({});
 
 export const DraggableContext = () => {
   return useContext(DragContext);
 };
 
-export const DraggableProvider = ({ children, initialItems, onChange }: any) => {
-  const [items, setItems] = useState([]);
-  const [dragData, setDragData] = useState<{ [key: string]: any }>({});
-  const [isDragging, setIsDragging] = useState("");
-  const [activeContainer, setActiveContainer] = useState("");
+export const DraggableProvider = ({ children, initialItems, onReorder }: DraggableProviderType) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
 
   useEffect(() => {
-    setItems(initialItems);
+    dispatch({ type: 'SET_ITEMS', payload: initialItems });
   }, [initialItems]);
 
   useEffect(() => {
-    onChange(items);
-  }, [items]);
+    onReorder(state.items);
+  }, [state.items]);
 
   const handleDragStart = (id: string, container: string) => {
-    setDragData({ id: id, initialGroup: container });
-    setIsDragging(id);
+    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
+    dispatch({ type: 'SET_IS_DRAGGING', payload: id });
   };
 
   const handleDragEnter = (id: string, container: string) => {
-    if (dragData?.id !== id) {
-      const newItems = [...items];
-      const draggedItem = newItems.find((item) => item.id === dragData.id);
-      const draggedIndex = newItems.indexOf(draggedItem);
-      const targetIndex = newItems.findIndex((item) => item.id === id);
-
-      newItems.splice(draggedIndex, 1);
-      newItems.splice(targetIndex, 0, draggedItem);
-
-      setItems(newItems);
-      setDragData({ id: dragData.id, initialGroup: container });
+    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 } });
     }
   };
 
   const handleDragEnd = () => {
-    setIsDragging("");
-    setActiveContainer("");
+    dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
+    dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
   };
 
   const changeCategory = (itemId: string, container: string) => {
-    const updatedItems = items.map((item) => {
-      if (item.id === itemId) {
-        return { ...item, container: container };
-      }
-      return item;
-    });
-
-    setItems(updatedItems);
+    dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId, container } });
   };
 
   const handleDrop = (container: string) => {
-    setIsDragging("");
-    setActiveContainer("");
-    const selected = dragData.id;
-    changeCategory(selected, container);
+    dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
+    dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+    changeCategory(state.dragData.id, container);
   };
 
   const handleDragOver = (e: Event, container: string) => {
     e.preventDefault();
-    setActiveContainer(container);
+    dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
   };
 
-  
-
-  const contextValue = {
-    items,
-    setItems,
-    dragData,
-    setDragData,
-    isDragging,
-    setIsDragging,
-    activeContainer,
-    setActiveContainer,
+  const contextValue = useMemo(() => ({
+    items: state.items,
+    dragData: state.dragData,
+    isDragging: state.isDragging,
+    activeContainer: state.activeContainer,
     handleDragStart,
     handleDragEnter,
     handleDragEnd,
     handleDrop,
-    handleDragOver,
-  };
+    handleDragOver
+  }), [state]);
 
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>

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

@@ -0,0 +1,26 @@
+export interface ItemType {
+    id: string;
+    container: string;
+    [key: string]: any;
+  }
+  
+  export interface InitialStateType {
+    items: ItemType[];
+    dragData: { id: string; initialGroup: string };
+    isDragging: string;
+    activeContainer: string;
+  }
+  
+  export type ActionType =
+    | { type: 'SET_ITEMS'; payload: ItemType[] }
+    | { 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 } }
+    | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } };
+
+    export interface DraggableProviderType {
+      children: React.ReactNode;
+      initialItems: ItemType[];
+      onReorder: (items: ItemType[]) => void;
+    }

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx

@@ -27,18 +27,19 @@ const DraggableDefault = (props) => {
   return (
     <>
     <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
         <Draggable.Container {...props}>
           <SelectableList variant="checkbox">
             {initialState.map(({ id, text }) => (
-              <Draggable.Item id={id} 
+              <Draggable.Item dragId={id} 
                   key={id}
               >
                 <SelectableList.Item
                     label={text} 
                     name={id} 
                     value={id} 
+                    {...props}
                 />
               </Draggable.Item>
             ))}

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md

@@ -1,4 +1,4 @@
-To use the Draggable kit, you must use the DraggableProvider and pass in `initialItems`. The `onChange` is a function that returns the data as it changes as items are reordered. Use this to manage state as shown.
+To use the Draggable kit, you must use the DraggableProvider and pass in `initialItems`. The `onReorder` is a function that returns the data as it changes as items are reordered. Use this to manage state as shown.
 
 The `Draggable.Container` specifies the container within which items can be dropped.
-The `Draggable.Item` specifies the items that can be dragged and dropped. `Draggable.Item` requires `id` to be passed in as shown.
+The `Draggable.Item` specifies the items that can be dragged and dropped. `dragId` is a REQUIRED prop for Draggable.Item.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx

@@ -18,7 +18,7 @@ const containers = ["To Do", "In Progress", "Done"];
 // Initial items to be dragged
 const data = [
   {
-    id: "1",
+    id: "11",
     container: "To Do",
     title: "Task 1",
     description: "Bug fixes",
@@ -26,7 +26,7 @@ const data = [
     assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
   },
   {
-    id: "2",
+    id: "12",
     container: "To Do",
     title: "Task 2",
     description: "Documentation",
@@ -34,7 +34,7 @@ const data = [
     assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
   },
   {
-    id: "3",
+    id: "13",
     container: "In Progress",
     title: "Task 3",
     description: "Add a variant",
@@ -42,7 +42,7 @@ const data = [
     assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
   },
   {
-    id: "4",
+    id: "14",
     container: "To Do",
     title: "Task 4",
     description: "Add jest tests",
@@ -50,7 +50,7 @@ const data = [
     assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
   },
   {
-    id: "5",
+    id: "15",
     container: "Done",
     title: "Task 5",
     description: "Alpha testing",
@@ -58,7 +58,7 @@ const data = [
     assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
   },
   {
-    id: "6",
+    id: "16",
     container: "In Progress",
     title: "Task 6",
     description: "Release",
@@ -83,7 +83,7 @@ const DraggableMultipleContainer = (props) => {
 
   return (
     <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
       <Flex
           justifyContent="center"
@@ -92,6 +92,7 @@ const DraggableMultipleContainer = (props) => {
           {containers?.map((container) => (
             <Draggable.Container 
                 container={container}
+                htmlOptions={{style:{ width: "200px", height: "70vh"}}}
                 key={container} 
                 padding="sm"
             >
@@ -112,12 +113,13 @@ const DraggableMultipleContainer = (props) => {
                       }) => (
                         <Draggable.Item 
                             container={container}
-                            id={id} 
+                            dragId={id} 
                             key={id}
                         >
                           <Card
                               marginBottom="sm"
                               padding="sm"
+                              {...props}
                           >
                             <Flex justify="between">
                               <FlexItem>
@@ -130,6 +132,7 @@ const DraggableMultipleContainer = (props) => {
                                   <Title paddingLeft="xs" 
                                       size={4}
                                       text={title}
+                                      {...props}
                                   />
                                 </Flex>
                               </FlexItem>
@@ -138,10 +141,12 @@ const DraggableMultipleContainer = (props) => {
                                   rounded
                                   text={badgeProperties(container).text}
                                   variant={badgeProperties(container).color}
+                                  {...props}
                               />
                             </Flex>
                             <Body paddingTop="xs"
                                 text={description} 
+                                {...props}
                             />
                           </Card>
                         </Draggable.Item>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md

@@ -0,0 +1 @@
+The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.