RubyGems - playbook_ui - Versions diffs - 13.30.0.pre.alpha.PLAY1328fixtimelinekitglobalpropsreact3096 → 13.30.0.pre.alpha.play1367contenttagnoninputkits3159 - Mend

playbook_ui 13.30.0.pre.alpha.PLAY1328fixtimelinekitglobalpropsreact3096 → 13.30.0.pre.alpha.play1367contenttagnoninputkits3159

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

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

@@ -32,13 +32,14 @@ const DraggableDefault = (props) => {
         <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 CHANGED Viewed

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

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

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

@@ -1,3 +1,5 @@
-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 use the 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.
-The dev must manage state as shown and pass in id to the Card for dragging to work.
+In addition to the above `dragId` is a REQUIRED prop to be passedd 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

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

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

@@ -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 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,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 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_dropdown/_dropdown.scss CHANGED Viewed

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