playbook_ui 13.30.0 → 13.31.0.pre.alpha.PLAY882formpillprimaryandneutral3201

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

@@ -1,23 +1,19 @@
 import React, { useState } from "react";
-import { SelectableList, Draggable, DraggableProvider } from "../../";
+import { Flex, Image, Draggable, DraggableProvider } from "../../";
 
 // Initial items to be dragged
 const data = [
   {
-    id: "1",
-    text: "Task 1",
+    id: "21",
+    url: "https://unsplash.it/500/400/?image=633",
   },
   {
-    id: "2",
-    text: "Task 2",
+    id: "22",
+    url: "https://unsplash.it/500/400/?image=634",
   },
   {
-    id: "3",
-    text: "Task 3",
-  },
-  {
-    id: "4",
-    text: "Task 4",
+    id: "23",
+    url: "https://unsplash.it/500/400/?image=637",
   },
 ];
 
@@ -30,19 +26,19 @@ const DraggableDefault = (props) => {
         onReorder={(items) => setInitialState(items)}
     >
         <Draggable.Container {...props}>
-          <SelectableList variant="checkbox">
-            {initialState.map(({ id, text }) => (
-              <Draggable.Item id={id} 
+        <Flex>
+            {initialState.map(({ id, url }) => (
+              <Draggable.Item dragId={id} 
                   key={id}
               >
-                <SelectableList.Item
-                    label={text} 
-                    name={id} 
-                    value={id} 
+                <Image alt={id} 
+                    margin="xs"
+                    size="md" 
+                    url={url} 
                 />
               </Draggable.Item>
             ))}
-          </SelectableList>
+         </Flex>
         </Draggable.Container>
     </DraggableProvider>
     </>

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

@@ -1,4 +1,6 @@
-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 kit gives you a full subcomponent structure that allows it to be used with almost any kits.
 
-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.
+`DraggableProvider` = This provider manages all settings that allows drag and drop to function and must be used as the outermost wrapper. It has 2 REQUIRED props: `initialItems` (initial data) and `onReorder` (function that returns mutated data as items are reordered via drag and drop). Devs must manage state as shown.
+ 
+`Draggable.Container` = This specifies the container within which items can be dropped.
+`Draggable.Item` = This 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

@@ -113,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>
@@ -131,6 +132,7 @@ const DraggableMultipleContainer = (props) => {
                                   <Title paddingLeft="xs" 
                                       size={4}
                                       text={title}
+                                      {...props}
                                   />
                                 </Flex>
                               </FlexItem>
@@ -139,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_with_cards.jsx

@@ -36,29 +36,32 @@ const DraggableWithCards = (props) => {
     >
         <Draggable.Container  {...props}>
           {initialState.map(({ id, text }) => (
-              <Card
+              <Card dragId={id}
                   draggableItem
                   highlight={{ color: "primary", position: "side" }}
-                  id={id}
                   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>
                       <Caption 
                           size="xs" 
                           text="8:00A • Township Name • 90210" 
+                          {...props}
                       />
                   <Flex gap="xxs" 
                       spacing="between"
@@ -66,6 +69,7 @@ const DraggableWithCards = (props) => {
                     <Flex gap="xxs">
                       <Caption color="error" 
                           size="xs"
+                          {...props}
                       >
                         <Icon icon="house-circle-exclamation" />
                       </Caption>
@@ -78,14 +82,17 @@ 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>

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

@@ -1,3 +1,9 @@
-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. 
+For a simplified version of the Draggable API for the Card kit, you can do the following:
+
+Use `DraggableProvider` and manage state as shown.
+
+`Draggable.Container` creates the container within which the cards can be dragged and dropped. 
+
+The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggableItem` and `dragId` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `dragHandle` is also available to show the drag handle icon.
+
 
-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

@@ -30,11 +30,11 @@ const DraggableWithList = (props) => {
     <DraggableProvider initialItems={data}
         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,5 @@
-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.
+For a simplified version of the Draggable API for the List kit, you can do the following:
+
+Use `DraggableProvider` and manage state as shown.
+
+The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on List kit to show the drag handle icon.

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

@@ -29,16 +29,18 @@ const DraggableWithSelectableList = (props) => {
     <DraggableProvider initialItems={data}
         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,5 @@
+For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
+
+Use `DraggableProvider` and manage state as shown.
+
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.

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,7 +31,6 @@ const data = [
   },
 ];
 
-
 const DefaultDraggableKit = () => {
   const [initialState, setInitialState] = useState(data);
 
@@ -33,13 +39,11 @@ const DefaultDraggableKit = () => {
         initialItems={data}
         onReorder={(items) => setInitialState(items)}
     >
-      <Draggable
-          data={{ testid: testId }}
-      >
+      <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} 
@@ -55,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_dropdown/_dropdown.scss

@@ -96,6 +96,7 @@
         width: 100%;
       }
     }
+
     .close {
       display: none;
       animation-name: fadeOut;
@@ -111,6 +112,17 @@
       animation-timing-function: linear;
       animation-fill-mode: forwards;
     }
+
+    &.error {
+      [class*=pb_body_kit] {
+        margin-top: $space_xs / 2;
+      }
+
+      [class*="dropdown_trigger_wrapper"] {
+        border-color: $error;
+        box-shadow: none !important;
+      }
+    }
   }
 
   &.dark {
@@ -138,6 +150,12 @@
           color: $white;
         }
       }
+
+      &.error {
+        [class*="dropdown_trigger_wrapper"] {
+          border-color: $error_dark;
+        }
+      }
     }
     .pb_dropdown_container {
       background-color: $bg_dark !important;