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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a4dfe0653d86e536e79e7cd2537477204d815b54a27255442ac5ba1d6df6ac6d
-  data.tar.gz: 8da9b6c0fb744f9a37347fdf3bec56a8c435a3aeeab1933d3441ef5cb6f846fb
+  metadata.gz: 9bec2adcbbd24c7d8dedcfd434368fd206154d30a3f22011db8fd8c17bd2002b
+  data.tar.gz: a5afc1f25e3609873b5bb0ba02d8c796ae9060cdd6aff33fcf103ec9fe88b7de
 SHA512:
-  metadata.gz: 478df642a3c3079adf7eb546dc8f3a938717d5bb0f50d32e8dd70ebac1f6c16909fa21e613a262e2c94dcafbd5649acb2a2d3daa682ddc5a3f7961986d5aac37
-  data.tar.gz: 0ed83b2e971d7bbf15df28168199a3a9d063abc043df74ea6ac1db4c95cbcfec79883f6c5cba1be43fe9fe9375d26f252ee07ed7f91781035837c8903314a766
+  metadata.gz: d754acdd73fd036d57ec1fcf6cd21891a5a872268448021ba01d407cdb7c60f990b1a1cfd3680cbd6801e367eb33d919a6725f2747b8f0ba10cbf6657803720f
+  data.tar.gz: 9bc1f39ec7aa9bcdf8fb27aa9ac0bb50919a4e94b1db0cae50233701639a78b9963c60b2e3c8c39363e2b9548b3909e167c7bcbd486163283f7d9fcf82b1fe18

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,14 @@ type CardPropTypes = {
   children: React.ReactChild[] | React.ReactChild | number,
   className?: string,
   data?: {[key: string]: 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,8 +85,11 @@ const Card = (props: CardPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
+    dragHandle = true,
+    draggableItem = false,
     highlight = {},
     htmlOptions = {},
+    id,
     selected = false,
     tag = 'div',
   } = props
@@ -113,15 +123,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 id={id} 
+            key={id}
+        >
+        <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/context/index.tsx

@@ -6,7 +6,7 @@ export const DraggableContext = () => {
   return useContext(DragContext);
 };
 
-export const DraggableProvider = ({ children, initialItems, onChange }: any) => {
+export const DraggableProvider = ({ children, initialItems, onReorder }: any) => {
   const [items, setItems] = useState([]);
   const [dragData, setDragData] = useState<{ [key: string]: any }>({});
   const [isDragging, setIsDragging] = useState("");
@@ -17,7 +17,7 @@ export const DraggableProvider = ({ children, initialItems, onChange }: any) =>
   }, [initialItems]);
 
   useEffect(() => {
-    onChange(items);
+    onReorder(items);
   }, [items]);
 
   const handleDragStart = (id: string, container: string) => {

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

@@ -27,7 +27,7 @@ const DraggableDefault = (props) => {
   return (
     <>
     <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
         <Draggable.Container {...props}>
           <SelectableList variant="checkbox">

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.

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

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.

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

@@ -13,15 +13,15 @@ import {
 // Initial items to be dragged
 const data = [
   {
-    id: "1",
+    id: "21",
     text: "Joe Black",
   },
   {
-    id: "2",
+    id: "22",
     text: "Nancy White",
   },
   {
-    id: "3",
+    id: "23",
     text: "Bill Green",
   },
 ];
@@ -32,52 +32,34 @@ const DraggableWithCards = (props) => {
   return (
     <DraggableProvider
         initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
         <Draggable.Container  {...props}>
           {initialState.map(({ id, text }) => (
-            <Draggable.Item id={id} 
-                key={id}
-			>
               <Card
-                  highlight={{ position: "side", color: "primary" }}
+                  draggableItem
+                  highlight={{ color: "primary", position: "side" }}
+                  id={id}
+                  key={id}
                   marginBottom="xs"
+                  padding="xs"
               >
                 <Flex alignItems="stretch" 
                     flexDirection="column"
-				>
+                >
                   <Flex gap="xs">
                     <Title size={4} 
                         text={text} 
-					/>
+                    />
                     <Badge 
                         text="35-12345" 
                         variant="primary" 
-					/>
+                    />
                   </Flex>
-
-                  <Flex 
-                      gap="sm" 
-                      spacing="between"
-                  >
-                    <Caption 
-                        size="xs" 
-                        text="8:00A" 
-					/>
-                    <Flex gap="xxs">
                       <Caption 
                           size="xs" 
-                          text="Township Name" 
-                      />
-                      <Caption size="xs" 
-                          text="•" 
+                          text="8:00A • Township Name • 90210" 
                       />
-                      <Caption size="xs" 
-                          text="90210" 
-                      />
-                    </Flex>
-                  </Flex>
-
                   <Flex gap="xxs" 
                       spacing="between"
                   >
@@ -109,7 +91,6 @@ const DraggableWithCards = (props) => {
                   </Flex>
                 </Flex>
               </Card>
-            </Draggable.Item>
           ))}
         </Draggable.Container>
     </DraggableProvider>

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

@@ -0,0 +1,3 @@
+For a simplified version of the Draggable API for the Card kit, You can use the the Card kit as the Draggable Item by using the `draggableItem` prop on Card. The dragHandle is added by default but this can be opted out off by setting `dragHandle` to false on the Card kit. 
+
+The dev must manage state as shown and pass in id to the Card for dragging to work.

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

@@ -4,19 +4,19 @@ import { DraggableProvider, List, ListItem } from "../../";
 // Initial items to be dragged
 const data = [
   {
-    id: "1",
+    id: "31",
     text: "Philadelphia",
   },
   {
-    id: "2",
+    id: "32",
     text: "New Jersey",
   },
   {
-    id: "3",
+    id: "33",
     text: "Maryland",
   },
   {
-    id: "4",
+    id: "34",
     text: "Connecticut",
   },
 ];
@@ -28,7 +28,7 @@ const DraggableWithList = (props) => {
   return (
     <>
     <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
         <List draggable
             {...props}

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

@@ -1 +1 @@
-For a simplified version of the Draggable API fro the List kit, use the DraggableProvider to wrap the List use the `draggable` prop on List. The dev must manage state as shown and pass in id to the ListItem.
+For a simplified version of the Draggable API for the List kit, use the DraggableProvider to wrap the List kit and use the `draggable` prop on List. The dev must manage state as shown and pass in id to the ListItem for dragging to work.

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

@@ -4,19 +4,19 @@ import { SelectableList, DraggableProvider } from "../../";
 // Initial items to be dragged
 const data = [
   {
-    id: "1",
+    id: "41",
     text: "Task 1",
   },
   {
-    id: "2",
+    id: "42",
     text: "Task 2",
   },
   {
-    id: "3",
+    id: "43",
     text: "Task 3",
   },
   {
-    id: "4",
+    id: "44",
     text: "Task 4",
   },
 ];
@@ -27,7 +27,7 @@ const DraggableWithSelectableList = (props) => {
   return (
     <>
     <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
           <SelectableList draggable 
               variant="checkbox"

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -31,12 +31,10 @@ const DefaultDraggableKit = () => {
   return (
     <DraggableProvider
         initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
       <Draggable
           data={{ testid: testId }}
-          draggableItems={data}
-          onDragChange={(items) => setInitialItems(items)}
       >
         <Draggable.Container>
           <SelectableList variant="checkbox">