playbook_ui 13.29.0.pre.alpha.PBNTR329draggablev33060 → 13.29.0.pre.alpha.removeduplicatekitexampleclass3063

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 036170dadbbd8b05c35417170d192e64d34f892e7253cddbb57d4c7f0ce85434
-  data.tar.gz: db3c4d9d19bc7ffc2ece4579e08ce0bb61ad0d58d363411bd06aa73e09d1c741
+  metadata.gz: 380bc9dbd82972a5698de51d570cdfa2487487e31ae0f45b412dfb9d1279e886
+  data.tar.gz: be0a2d1f71353e2b24d0f2741bff4febb39ac02734390403c54fe2ebd3a89312
 SHA512:
-  metadata.gz: 4db2db76e7bf5efa142e6cf98f086b8d4ad9c06a52e160084dfce38fa1f65918c03617b29f1d70af22d5e0d2929c642d047fb530558bf42a58489fcbea0961e4
-  data.tar.gz: afb25d863537751a54cb64f7aaa8780c56153582942f2a2e4657a1312f87cd7aefd7b284c14949260a69382880c278b682aaa6e11ac23980ccaee315f4c9d4f5
+  metadata.gz: 929cda18e0b40680958fb5191785efd526c02d7fff5a04a2007d27ab9913425f6c2068d3084e66572056d7b6e22bac471dccf8f081bcb4000fe3673080b232ad
+  data.tar.gz: 01eb9044256743a84f1d3b34439ef8402db96f39e2c175b65996381307a7f467cdbb352a98afc634ab30996195a818691a59340846ba2a1c23b4c879d825383b

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -81,9 +81,4 @@
       }
     }
   }
-
-  .card_draggable_handle {
-    align-self: center;
-    color: $text_lt_light;
-  }
 }

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -8,10 +8,6 @@ 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",
@@ -20,14 +16,11 @@ 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,
@@ -85,11 +78,8 @@ const Card = (props: CardPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
-    dragHandle = true,
-    draggableItem = false,
     highlight = {},
     htmlOptions = {},
-    id,
     selected = false,
     tag = 'div',
   } = props
@@ -123,52 +113,15 @@ const Card = (props: CardPropTypes): React.ReactElement => {
   const Tag = tagOptions.includes(tag) ? tag : 'div'
 
   return (
-    <>
-    {
-      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>
-              )
-      }
-    </>
+    <Tag
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classnames(cardCss, globalProps(props), className)}
+    >
+      {subComponentTags('Header')}
+      {nonHeaderChildren}
+    </Tag>
   )
 }
 

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 # rubocop:disable Style/CaseLikeIf
-
 module Playbook
   module PbDocs
     class KitExample < Playbook::KitBase
@@ -12,6 +11,8 @@ module Playbook
       prop :type, type: Playbook::Props::Enum, values: %w[rails react swift], default: "rails"
       prop :dark, type: Playbook::Props::Boolean, default: false
 
+      include PlaybookWebsite::Markdown::Helper
+
       def example
         if type == "rails"
           render inline: source
@@ -60,6 +61,7 @@ module Playbook
                                            .gsub("'../..'", "'playbook-ui'")
                                            .gsub(%r{from "../.*}, "from 'playbook-ui'")
                                            .gsub(%r{from '../.*}, "from 'playbook-ui'")
+                                           .gsub("'../../../../../../playbook-website/app/javascript/scripts/custom-icons'", "'your-directory/custom-icons.js'")
         stringified_code = dark ? stringified_code.gsub("{...props}", "dark") : stringified_code.gsub(/\s*{...props}\s*\n/, "\n")
         if stringified_code.include?("props: { ")
           stringified_code = stringified_code.gsub("props: {", "props: {dark: true,") if type == "rails" && dark

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, onReorder }: any) => {
+export const DraggableProvider = ({ children, initialItems, onChange }: 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, onReorder }: any) =>
   }, [initialItems]);
 
   useEffect(() => {
-    onReorder(items);
+    onChange(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}
-        onReorder={(items) => setInitialState(items)}
+        onChange={(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 `onReorder` 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 `onChange` 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: "11",
+    id: "1",
     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: "12",
+    id: "2",
     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: "13",
+    id: "3",
     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: "14",
+    id: "4",
     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: "15",
+    id: "5",
     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: "16",
+    id: "6",
     container: "In Progress",
     title: "Task 6",
     description: "Release",
@@ -83,7 +83,7 @@ const DraggableMultipleContainer = (props) => {
 
   return (
     <DraggableProvider initialItems={data}
-        onReorder={(items) => setInitialState(items)}
+        onChange={(items) => setInitialState(items)}
     >
       <Flex
           justifyContent="center"

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: "21",
+    id: "1",
     text: "Joe Black",
   },
   {
-    id: "22",
+    id: "2",
     text: "Nancy White",
   },
   {
-    id: "23",
+    id: "3",
     text: "Bill Green",
   },
 ];
@@ -32,34 +32,52 @@ const DraggableWithCards = (props) => {
   return (
     <DraggableProvider
         initialItems={data}
-        onReorder={(items) => setInitialState(items)}
+        onChange={(items) => setInitialState(items)}
     >
         <Draggable.Container  {...props}>
           {initialState.map(({ id, text }) => (
+            <Draggable.Item id={id} 
+                key={id}
+			>
               <Card
-                  draggableItem
-                  highlight={{ color: "primary", position: "side" }}
-                  id={id}
-                  key={id}
+                  highlight={{ position: "side", color: "primary" }}
                   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="8:00A • Township Name • 90210" 
+                          text="Township Name" 
+                      />
+                      <Caption size="xs" 
+                          text="•" 
                       />
+                      <Caption size="xs" 
+                          text="90210" 
+                      />
+                    </Flex>
+                  </Flex>
+
                   <Flex gap="xxs" 
                       spacing="between"
                   >
@@ -91,6 +109,7 @@ const DraggableWithCards = (props) => {
                   </Flex>
                 </Flex>
               </Card>
+            </Draggable.Item>
           ))}
         </Draggable.Container>
     </DraggableProvider>

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: "31",
+    id: "1",
     text: "Philadelphia",
   },
   {
-    id: "32",
+    id: "2",
     text: "New Jersey",
   },
   {
-    id: "33",
+    id: "3",
     text: "Maryland",
   },
   {
-    id: "34",
+    id: "4",
     text: "Connecticut",
   },
 ];
@@ -28,7 +28,7 @@ const DraggableWithList = (props) => {
   return (
     <>
     <DraggableProvider initialItems={data}
-        onReorder={(items) => setInitialState(items)}
+        onChange={(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 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 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.

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: "41",
+    id: "1",
     text: "Task 1",
   },
   {
-    id: "42",
+    id: "2",
     text: "Task 2",
   },
   {
-    id: "43",
+    id: "3",
     text: "Task 3",
   },
   {
-    id: "44",
+    id: "4",
     text: "Task 4",
   },
 ];
@@ -27,7 +27,7 @@ const DraggableWithSelectableList = (props) => {
   return (
     <>
     <DraggableProvider initialItems={data}
-        onReorder={(items) => setInitialState(items)}
+        onChange={(items) => setInitialState(items)}
     >
           <SelectableList draggable 
               variant="checkbox"

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

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