RubyGems - playbook_ui - Versions diffs - 13.29.0 → 13.30.0.pre.alpha.PBNTR353draggablev53136 - Mend

playbook_ui 13.29.0 → 13.30.0.pre.alpha.PBNTR353draggablev53136

Files changed (58) hide show

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

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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}