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

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,58 +32,44 @@ 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" }}
+              <Card dragId={id}
+                  draggableItem
+                  highlight={{ color: "primary", position: "side" }}
+                  key={id}
                   marginBottom="xs"
+                  padding="xs"
+                  {...props}
               >
                 <Flex alignItems="stretch" 
                     flexDirection="column"
-				>
+                >
                   <Flex gap="xs">
                     <Title size={4} 
-                        text={text} 
-					/>
+                        text={text}
+                        {...props} 
+                    />
                     <Badge 
                         text="35-12345" 
                         variant="primary" 
-					/>
+                        {...props}
+                    />
                   </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" 
+                          {...props}
                       />
-                      <Caption size="xs" 
-                          text="90210" 
-                      />
-                    </Flex>
-                  </Flex>
-
                   <Flex gap="xxs" 
                       spacing="between"
                   >
                     <Flex gap="xxs">
                       <Caption color="error" 
                           size="xs"
+                          {...props}
                       >
                         <Icon icon="house-circle-exclamation" />
                       </Caption>
@@ -96,20 +82,22 @@ const DraggableWithCards = (props) => {
                       <Badge rounded 
                           text="Schedule QA" 
                           variant="warning" 
+                          {...props}
                        />
                       <Badge rounded 
                           text="Flex" 
-                          variant="primary" 
+                          variant="primary"
+                          {...props} 
                       />
                       <Badge rounded 
                           text="R99" 
                           variant="primary" 
+                          {...props}
                       />
                     </Flex>
                   </Flex>
                 </Flex>
               </Card>
-            </Draggable.Item>
           ))}
         </Draggable.Container>
     </DraggableProvider>

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

@@ -0,0 +1,5 @@
+For a simplified version of the Draggable API for the Card kit, You can use the Card kit as the Draggable Item by using the `draggableItem` prop. The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the Card kit. 
+
+In addition to the above, `dragId` is a REQUIRED prop to be passed to the Card kit when implementing dragging.
+
+The dev must manage state as shown.

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,13 +28,13 @@ const DraggableWithList = (props) => {
   return (
     <>
     <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
-        <List draggable
+        <List enableDrag
             {...props}
         >
             {initialState.map(({ id, text }) => (
-                <ListItem id={id}
+                <ListItem dragId={id}
                     key={id}
                 >
                     {text}

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

@@ -1 +1,7 @@
-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 `enableDrag` prop. 
+
+In addition to the above, `dragId` is a REQUIRED prop to be passed to the List kit when implementing dragging.
+
+The dev must manage state as shown.
+
+The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the List kit.

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,18 +27,20 @@ const DraggableWithSelectableList = (props) => {
   return (
     <>
     <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
-          <SelectableList draggable 
-              variant="checkbox"
+          <SelectableList enableDrag
+              variant="radio"
               {...props}
               >
             {initialState.map(({ id, text }) => (
-                <SelectableList.Item id={id}
+                <SelectableList.Item 
+                    dragId={id}
                     key={id}
                     label={text} 
-                    name={id} 
+                    name="radio-test" 
                     value={id}
+                    {...props}
                 />
             ))}
           </SelectableList>

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

@@ -0,0 +1,7 @@
+For a simplified version of the Draggable API for the SelectableList kit, use the DraggableProvider to wrap the SelectableList kit and use the `enableDrag` prop. 
+
+In addition to the above, `dragId` is a REQUIRED prop to be passed to the SelectableList kit when implementing dragging.
+
+The dev must manage state as shown.
+
+The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the SelectableList kit.

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

@@ -1,9 +1,16 @@
-import React, {useState} from "react"
-import { render, screen } from "../utilities/test-utils"
+import React, { useState } from "react";
+import { render, screen } from "../utilities/test-utils";
 
-import { Draggable, DraggableProvider, SelectableList } from '../'
+import {
+  Draggable,
+  DraggableProvider,
+  SelectableList,
+  List,
+  ListItem,
+  Card,
+} from "../";
 
-const testId = 'draggable'
+const testId = "draggable";
 
 const data = [
   {
@@ -24,24 +31,19 @@ const data = [
   },
 ];
 
-
 const DefaultDraggableKit = () => {
   const [initialState, setInitialState] = useState(data);
 
   return (
     <DraggableProvider
         initialItems={data}
-        onChange={(items) => setInitialState(items)}
+        onReorder={(items) => setInitialState(items)}
     >
-      <Draggable
-          data={{ testid: testId }}
-          draggableItems={data}
-          onDragChange={(items) => setInitialItems(items)}
-      >
+      <Draggable data={{ testid: testId }}>
         <Draggable.Container>
           <SelectableList variant="checkbox">
             {initialState.map(({ id, text }) => (
-              <Draggable.Item id={id} 
+              <Draggable.Item dragId={id} 
                   key={id}
               >
                 <SelectableList.Item label={text} 
@@ -57,9 +59,132 @@ const DefaultDraggableKit = () => {
   );
 };
 
-test('generated default kit and classname', () => {
-render(<DefaultDraggableKit/>)
-const kit = screen.getByTestId(testId)
-expect(kit).toBeInTheDocument()
-expect(kit).toHaveClass('pb_draggable')
-})
+const DraggableKitWithList = () => {
+  const [initialState, setInitialState] = useState(data);
+  return (
+    <div data-testid="draggable">
+      <DraggableProvider
+          initialItems={data}
+          onReorder={(items) => setInitialState(items)}
+      >
+        <List enableDrag>
+          {initialState.map(({ id, text }) => (
+            <ListItem dragId={id} 
+                key={id}
+            >
+              {text}
+            </ListItem>
+          ))}
+        </List>
+      </DraggableProvider>
+    </div>
+  );
+};
+
+const DraggableKitWithSelectableList = () => {
+  const [initialState, setInitialState] = useState(data);
+  return (
+    <div data-testid="draggable">
+      <DraggableProvider
+          initialItems={data}
+          onReorder={(items) => setInitialState(items)}
+      >
+        <SelectableList enableDrag>
+          {initialState.map(({ id, text }) => (
+            <SelectableList.Item
+                dragId={id}
+                key={id}
+                label={text}
+                name={id}
+                value={id}
+            />
+          ))}
+        </SelectableList>
+      </DraggableProvider>
+    </div>
+  );
+};
+
+const DraggableKitWithCard = () => {
+  const [initialState, setInitialState] = useState(data);
+  return (
+    <div data-testid="draggable">
+      <DraggableProvider
+          initialItems={data}
+          onReorder={(items) => setInitialState(items)}
+      >
+        <Draggable.Container>
+          {initialState.map(({ id, text }) => (
+            <Card dragId={id} 
+                draggableItem 
+                key={id}
+            >
+              {text}
+            </Card>
+          ))}
+        </Draggable.Container>
+      </DraggableProvider>
+    </div>
+  );
+};
+
+test("generated default kit and classname", () => {
+  render(<DefaultDraggableKit />);
+  const kit = screen.getByTestId(testId);
+  expect(kit).toBeInTheDocument();
+  expect(kit).toHaveClass("pb_draggable");
+});
+
+test("generated Draggable Container", () => {
+  render(<DefaultDraggableKit />);
+  const kit = screen.getByTestId(testId);
+
+  const container = kit.querySelector(".pb_draggable_container");
+  expect(container).toBeInTheDocument();
+});
+
+test("generated Draggable Item", () => {
+  render(<DefaultDraggableKit />);
+  const kit = screen.getByTestId(testId);
+
+  const item = kit.querySelector(".pb_draggable_item");
+  expect(item).toBeInTheDocument();
+});
+
+test("Attached draggable HTML attributes", () => {
+  render(<DefaultDraggableKit />);
+  const kit = screen.getByTestId(testId);
+
+  const item = kit.querySelector(".pb_draggable_item");
+  expect(item).toHaveAttribute("draggable");
+});
+
+test("generated dragHandle with List", () => {
+  render(<DraggableKitWithList />);
+  const kit = screen.getByTestId(testId);
+
+  const list = kit.querySelector(".pb_list_kit");
+  expect(list).toBeInTheDocument();
+  const dragHandle = list.querySelector(".fa-grip-dots-vertical");
+  expect(dragHandle).toBeInTheDocument();
+});
+
+test("generated dragHandle with SelectableList", () => {
+  render(<DraggableKitWithSelectableList />);
+  const kit = screen.getByTestId(testId);
+
+  const selectabellist = kit.querySelector(".pb_selectable_list_kit");
+  expect(selectabellist).toBeInTheDocument();
+  const dragHandle = selectabellist.querySelector(".fa-grip-dots-vertical");
+  expect(dragHandle).toBeInTheDocument();
+});
+
+test("generated dragHandle with Card", () => {
+  render(<DraggableKitWithCard />);
+  const kit = screen.getByTestId(testId);
+
+  const card = kit.querySelector(".pb_card_kit_deselected_border_radius_md");
+  expect(card).toBeInTheDocument();
+  const dragHandle = card.querySelector(".fa-grip-dots-vertical");
+  expect(dragHandle).toBeInTheDocument();
+});

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx

@@ -17,10 +17,11 @@ type DraggableItemProps = {
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
+  dragId?: string;
 };
 
 const DraggableItem = (props: DraggableItemProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id } = props;
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId } = props;
 
   const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
     DraggableContext();
@@ -31,7 +32,7 @@ const DraggableItem = (props: DraggableItemProps) => {
 
   const classes = classnames(
     buildCss("pb_draggable_item"),
-    `${isDragging === id ? "is_dragging" : ""}`,
+    `${isDragging === dragId ? "is_dragging" : ""}`,
     globalProps(props),
     className
   );
@@ -44,10 +45,10 @@ const DraggableItem = (props: DraggableItemProps) => {
         className={classes}
         draggable
         id={id}
-        key={id}
+        key={dragId}
         onDragEnd={() => handleDragEnd()}
-        onDragEnter={() => handleDragEnter(id, container)}
-        onDragStart={() => handleDragStart(id, container)}
+        onDragEnter={() => handleDragEnter(dragId, container)}
+        onDragStart={() => handleDragStart(dragId, container)}
     >
       {children}
     </div>

data/app/pb_kits/playbook/pb_list/_list.tsx

@@ -10,7 +10,7 @@ type ListProps = {
   className?: string;
   children: React.ReactNode[] | React.ReactNode;
   dark?: boolean;
-  draggable?: boolean;
+  enableDrag?: boolean;
   data?: Record<string, unknown>;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
@@ -32,7 +32,7 @@ const List = (props: ListProps) => {
     className,
     dark = false,
     data = {},
-    draggable = false,
+    enableDrag = false,
     htmlOptions = {},
     id,
     layout = "",
@@ -54,7 +54,7 @@ const List = (props: ListProps) => {
   const childrenWithProps = React.Children.map(
     children,
     (child: React.ReactElement) => {
-      return React.cloneElement(child, { text, variant, draggable });
+      return React.cloneElement(child, { text, variant, enableDrag });
     }
   );
   const ariaProps = buildAriaProps(aria);
@@ -74,7 +74,7 @@ const List = (props: ListProps) => {
   return (
     <>
     {
-      draggable ? (
+      enableDrag ? (
         <Draggable.Container>
      <div className={classes}>
       {ordered ? (

data/app/pb_kits/playbook/pb_list/_list_item.tsx

@@ -11,6 +11,7 @@ type ListItemProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   data?: Record<string, unknown>,
+  dragId?: string,
   dragHandle?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -23,7 +24,8 @@ const ListItem = (props: ListItemProps) => {
     children,
     className,
     data = {},
-    draggable = false,
+    enableDrag,
+    dragId, 
     dragHandle = true,
     htmlOptions = {},
     id,
@@ -42,8 +44,10 @@ const ListItem = (props: ListItemProps) => {
   return (
     <>
     {
-      draggable ? (
-        <Draggable.Item id={id}>
+      enableDrag ? (
+        <Draggable.Item 
+            dragId={dragId}
+        >
         <li
             {...ariaProps}
             {...dataProps}

data/app/pb_kits/playbook/pb_overlay/_overlay.scss

@@ -0,0 +1,72 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+
+$overlay_sizes: (
+  full: 100%,
+  xxs: $space_xxs,
+  xs: $space_xs,
+  sm: $space_sm,
+  md: $space_md,
+  lg: $space_lg,
+  xl: $space_xl,
+);
+
+$overlay_positions: left, right, top, bottom, x, y;
+
+$overlay_colors: (
+  card_light: $card_light,
+  card_dark: $card_dark,
+  bg_dark: $bg_dark,
+  bg_light: $bg_light,
+);
+
+@mixin overlay($direction, $size, $color) {
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  z-index: 1;
+  content: "";
+
+  @if $direction == "left" {
+    inset: 0 auto 0 0;
+    background: linear-gradient(to right, $color 0%, transparent 100%);
+    width: $size;
+  }
+  @if $direction == "right" {
+    inset: 0 0 0 auto;
+    background: linear-gradient(to left, $color 0%, transparent 100%);
+    width: $size;
+  }
+  @if $direction == "top" {
+    inset: 0 0 auto 0;
+    background: linear-gradient(to bottom, $color 0%, transparent 100%);
+    height: $size;
+  }
+  @if $direction == "bottom" {
+    inset: auto 0 0 0;
+    background: linear-gradient(to top, $color 0%, transparent 100%);
+    height: $size;
+  }
+}
+
+[class^=pb_overlay] {
+  position: relative;
+  @each $color_name, $color in $overlay_colors {
+    .overlay_#{$color_name} {
+      @each $name, $size in $overlay_sizes {
+        @each $position in $overlay_positions {
+          &_#{$position}_#{$name} {
+            @include overlay($position, $size, $color);
+          }
+        }
+      }
+    }
+  }
+
+  .overlay_linear_gradient {
+    inset: 0;
+    position: absolute;
+    pointer-events: none;
+    z-index: 1;
+  }
+}

data/app/pb_kits/playbook/pb_overlay/_overlay.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import OverlayPercentage from './subcomponents/_overlay_percentage'
+import OverlayToken from './subcomponents/_overlay_token'
+
+export type OverlayChildrenProps = {
+    children: React.ReactNode[] | React.ReactNode,
+    color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
+    position: string,
+    size: string,
+}
+
+type OverlayProps = {
+    aria?: { [key: string]: string },
+    className?: string,
+    children: React.ReactNode[] | React.ReactNode,
+    color: "card_light" | "bg_light" | "card_dark" | "bg_dark",
+    data?: { [key: string]: string },
+    htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
+    id?: string,
+    layout: { [key: string]: string },
+}
+
+const Overlay = (props: OverlayProps) => {
+    const {
+        aria = {},
+        className,
+        children,
+        color = "card_light",
+        data = {},
+        htmlOptions = {},
+        id,
+        layout = { "bottom": "full" },
+    } = props
+
+    const ariaProps = buildAriaProps(aria)
+    const dataProps = buildDataProps(data)
+    const classes = classnames(buildCss('pb_overlay'), globalProps(props), className)
+    const htmlProps = buildHtmlProps(htmlOptions)
+
+    const getPosition = () => {
+        return Object.keys(layout)[0]
+    }
+
+    const getSize = () => {
+        return Object.values(layout)[0]
+    }
+
+    const isSizePercentage = getSize().includes("%")
+
+    return (
+        <div
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+        >
+            {isSizePercentage ?
+                OverlayPercentage({
+                    children,
+                    color,
+                    position: getPosition(),
+                    size: getSize()
+                }) : OverlayToken({
+                    children,
+                    color,
+                    position: getPosition(),
+                    size: getSize()
+                })
+            }
+        </div>
+    )
+}
+
+export default Overlay