playbook_ui 13.30.0 → 13.31.0.pre.alpha.PBNTR342navtabbing3231

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 11ed59c33255cb5af32fdc3180c3fa48f6ba570eb896e4409699a19e8d461cdc
-  data.tar.gz: 61ed0816ffcf97e5383e7ab42497523610ec8b19907a175964adfc7c732702ea
+  metadata.gz: 95dba07c052c9b9d3491424bdf2908367af2b50de54c1756e138b1d02af36839
+  data.tar.gz: 6c3bc969a17fb601e49801039eaabe6c01ec82bd1bf749e7b9ed5ce1a8dd26bf
 SHA512:
-  metadata.gz: ab9a4635ef513699914e2817e96faa8d7b2b756234453fc1aafedfb062f88926c163d1b373999d65cb718272da327e7fd798beba2a6cfd95f84ca2b458e55cf9
-  data.tar.gz: 56798ee732587d6ae51b38671125c00364e2595084bf42ab632460c6b38d968e9961dc731187b656d5238e8616e37fafca86f1ec577c8662e545a9dc19552a08
+  metadata.gz: ff157ecdf68142cbae35c2b96dd95691899efa3d22c56a9998b244eec4fcefa8d7391a06e194ed46724c396e2c9ad1ec4df5b4ebd6386afe44ff9249fe5c6ade
+  data.tar.gz: b3a700df6a7b34a517fdf15664d4a849e9c384d9f7f0a2b0d4606982d58ff28419cdd4be059a7cf1f689efc9e5a62aebf18be13e6e2418357a300126ed87893f

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb

@@ -0,0 +1,59 @@
+<%# Example sort method for demonstration purposes %>
+<% if params["sort"] %>
+  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
+  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
+  <% @table_data.sort! do |a, b|
+    value_a = a[sort_param]
+    value_b = b[sort_param]
+
+    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
+    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
+
+    sort_direction * (value_a <=> value_b)
+  end %>
+<% end %>
+
+<% 
+  column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      sort_menu: [
+        { item: "Year", link: "?sort=year_asc#table-sort", active: params["sort"] == "year_asc", direction: "asc" },
+        { item: "Year", link: "?sort=year_desc#table-sort", active: params["sort"] == "year_desc", direction: "desc" }
+      ],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+  ]
+
+  subrow_headers = ["Quarter", "Month", "Day"]
+%>
+
+<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.md

@@ -0,0 +1,6 @@
+Optionally enable sorting by passing `sort_menu` to any `column_definition`(s). Sort options are determined by an array of `item` objects passed to the `sort_menu` prop. 
+
+</br>
+<div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div>
+
+This example uses a custom sort method that may need to be modified or replaced within your project.

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -2,14 +2,15 @@ examples:
   rails:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
+  - advanced_table_beta_sort: Enable Sorting
   react:
   - advanced_table_default: Default (Required Props)
   - advanced_table_loading: Loading State
-  - advanced_table_sort: enable Sorting
+  - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
-  - advanced_table_inline_row_loading: inline Row Loading
+  - advanced_table_inline_row_loading: Inline Row Loading

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -1,11 +1,11 @@
 <%= pb_content_tag do %>
-        <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
+        <%= pb_rails("table/table_row", props: { tag: "div" }) do %>
             <% object.column_definitions.each_with_index do |item, index| %>
-                <%= pb_rails("table/table_header", props: { tag:"div", id:item[:accessor], classname:object.th_classname}) do %>
-                    <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", text_align:"end" }) do %>
+                <%= pb_rails("table/table_header", props: { tag: "div", id: item[:accessor], classname: object.th_classname, sort_menu: item[:sort_menu] }) do %>
+                    <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", text_align: "end" }) do %>
                         <% if index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") %>
                             <button class="gray-icon toggle-all-icon" onclick="expandAllRows(this)">
-                                <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right:"xs" }) %>
+                                <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
                             </button>
                         <% end %>
                         <%= item[:label] %>

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -6,9 +6,9 @@
 @import "../tokens/typography";
 
 $pb_button_sizes: (
-  "sm":   0.75rem,
-  "md":   0.875rem,
-  "lg":   1.125rem,
+  "sm":   $font_smaller,
+  "md":   $font_small,
+  "lg":   ($font_large - 2px),
 );
 
 [class*=pb_button_kit]{

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -9,7 +9,7 @@
 
 $pb_button_size: 40px;
 $pb_button_v_padding: 7px;
-$pb_button_h_padding: 34px;
+$pb_button_h_padding: 28px;
 $pb_button_hover_darken: 4%;
 $pb_button_border_width: 0px;
 
@@ -27,13 +27,14 @@ $pb_button_border_width: 0px;
   text-rendering: optimizeLegibility;
   font-size: $font_small;
   font-weight: $bold;
+  letter-spacing: $lspace_loose;
   text-align: center;
   text-decoration: none;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;
   border-style: solid;
-  border-radius: $border_rad_light;
+  border-radius: $border_rad_heavy;
   min-height: $pb_button_size;
   line-height: 1.5;
   padding: $pb_button_v_padding $pb_button_h_padding;

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -24,7 +24,7 @@ $pb_dark_caption_colors: (
   color: $text_lt_light;
   text-transform: uppercase;
   font-size: $font_size;
-  letter-spacing: $lspace_looser;
+  letter-spacing: $lspace_loosest;
 }
 
 @mixin caption_color($color: $text_lt_light) {

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

@@ -20,6 +20,7 @@ type CardPropTypes = {
   children: React.ReactChild[] | React.ReactChild | number,
   className?: string,
   data?: {[key: string]: string},
+  dragId?: string,
   draggableItem?: boolean,
   dragHandle?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -85,11 +86,11 @@ const Card = (props: CardPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
+    dragId,
     dragHandle = true,
     draggableItem = false,
     highlight = {},
     htmlOptions = {},
-    id,
     selected = false,
     tag = 'div',
   } = props
@@ -126,8 +127,8 @@ const Card = (props: CardPropTypes): React.ReactElement => {
     <>
     {
       draggableItem ? (
-        <Draggable.Item id={id} 
-            key={id}
+        <Draggable.Item dragId={dragId} 
+            key={dragId}
         >
         <Tag
             {...ariaProps}

data/app/pb_kits/playbook/pb_collapsible/index.js

@@ -14,7 +14,12 @@ export default class PbCollapsible extends PbEnhancedElement {
     this.element.addEventListener('click', () => {
       this.toggleElement(this.target)
     })
-    this.displayDownArrow()
+     // Check the initial state of the collapsible content and set the arrow accordingly
+     if (this.target.classList.contains('is-visible')) {
+      this.displayUpArrow()
+    } else {
+      this.displayDownArrow()
+    }
     // Listen for a custom event to toggle the collapsible
     document.addEventListener(`${this.target.id}`, () => {
       this.toggleElement(this.target)

data/app/pb_kits/playbook/pb_dashboard/commonSettings.js

@@ -53,7 +53,7 @@ const adjustAxisStyle = (axis) => {
   /* Change axis label styles */
   axis.labels.style.fontFamily = typography.font_family_base
   axis.labels.style.color = colors.charcoal
-  axis.labels.style.fontWeight = typography.light
+  axis.labels.style.fontWeight = typography.regular
   axis.labels.style.fontSize = typography.font_small
 }
 

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -33,7 +33,7 @@ const highchartsDarkTheme: ThemeProps = {
     style: {
       color: colors.text_dk_default,
       fontFamily: typography.font_family_base,
-      fontWeight: typography.regular,
+      fontWeight: typography.bold,
       fontSize: typography.heading_3,
     },
   },

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -34,7 +34,7 @@ const highchartsTheme: ThemeProps = {
     style: {
       color: colors.text_lt_default,
       fontFamily: typography.font_family_base,
-      fontWeight: typography.regular,
+      fontWeight: typography.bold,
       fontSize: typography.heading_3,
     },
   },

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default_swift.md

@@ -0,0 +1,33 @@
+![Date-Time-Stacked-Default](https://github.com/powerhome/playbook/assets/54749071/b877dd01-32fa-49ff-af2d-1f8d819f6f39)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBDateTimeStacked(
+    timeZoneIdentifier: "EDT",
+    isLowercase: true,
+    isMonthStacked: true,
+    isMonthBold: true
+  )
+  PBDateTimeStacked(
+    timeZoneIdentifier: "EDT",
+    isYearDisplayed: true,
+    isLowercase: true,
+    isMonthStacked: true,
+    isMonthBold: true,
+    isYearBold: true,
+    dateVariant: .standard
+  )
+  PBDateTimeStacked(
+    timeZoneIdentifier: "GMT+9",
+    isLowercase: true,
+    isMonthStacked: true,
+    isMonthBold: true
+  )
+  PBDateTimeStacked(
+    timeZoneIdentifier: "MDT",
+    isLowercase: true,
+    isMonthStacked: true,
+    isMonthBold: true
+  )
+}
+```

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_props_swift.md

@@ -0,0 +1,18 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **dateTime** | `Date` | Takes a date type to calculate the current date | `Date()` |  |
+| **timeDate** | `Date` | Takes a date type to calculate the current time | `Date()` |  |
+| **timeZoneIdentifier** | `String` | A string value that is used in a function to get the correct time in the corrresponding time zone. This value is also used to display the time zone next to the time |  |  |
+| **isYearDisplayed** | `Bool` | Determines whether or not the year is displayed with the month and day | `false` | `true` `false` |
+| **isLowercase** | `Bool` | Determines whether or not am/pm is capitalized | `false` | `true` `false` |
+| **isMonthStacked** | `Bool` | Determines whether or not the value for month is stacked over the date | `false` | `true` `false` |
+| **isMonthBold** | `Bool` | Determines whether or not the month is in bold | `false` | `true` `false` |
+| **isYearBold** | `Bool` | Determines whether or not the year is in bold | `false` | `true` `false` |
+| **dateAlignment** | `HorizontalAlignment` | Sets alignment of date | `.trailing` | `leading` `center` `trailing` |
+| **timeAlignment** | `HorizontalAlignment` | Sets alignment of the time zone | `.leading` | `leading` `center` `trailing` |
+| **dateVariant** | `Variant` | Allows user to choose the style in which the date is displayed | `.short(showIcon: false)` | `.short(showIcon: false)` `.dayDate(showYear: false)` `.standard` ` .withIcon(isStandard: true)` `.withIcon(isStandard: false)` |
+| **timeVariant** | `Variant` | Allows user to choose the style in which the time is displayed | `.time` | `.time` `.iconTimeZone` `.withTimeZoneHeader` |
+| **dateSize** | `String` | Allows user to choose the size of the date that is being displayed  | `.title4` | `title4` `body` `caption` `large` `subcaption` |
+| **timeStyle** | `PBFont` | Allows user to choose the size of the time that is being displayed | `.caption` | `body` `caption` `large` `subcaption`|
+| **timeZoneStyle** | `PBFont` | Allows user to choose the size of the time zone that is being displayed | `.caption` | `body` `caption` `large` `subcaption`|

data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml

@@ -2,6 +2,11 @@ examples:
 
   rails:
   - date_time_stacked_default: Default
-
+  
   react:
   - date_time_stacked_default: Default
+  
+  swift:
+  - date_time_stacked_default_swift: Default
+  - date_time_stacked_props_swift: ""
+

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx

@@ -4,7 +4,10 @@ import { DateYearStacked } from '../../'
 const DateYearStackedDefault = (props) => {
   return (
     <div>
-      <DateYearStacked date={new Date()} />
+      <DateYearStacked
+          date={new Date()}
+          {...props}
+      />
       <DateYearStacked
           align="center"
           date={new Date()}

data/app/pb_kits/playbook/pb_draggable/_draggable.scss

@@ -1,11 +1,9 @@
 @import "../tokens/colors";
+@import "../tokens/opacity";
 
 .pb_draggable_container {
   .is_dragging {
-    opacity: 40%;
-  }
-  .active {
-    opacity: 60%;
+    opacity: $opacity_4;
   }
   .pb_draggable_item:hover {
     cursor: grab;

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -1,90 +1,124 @@
-import React, { createContext, useState, useContext, useEffect } from "react";
+import React, { createContext, useReducer, useContext, useEffect, useMemo } from "react";
+import { InitialStateType, ActionType, DraggableProviderType } from "./types";
+
+const initialState: InitialStateType = {
+  items: [],
+  dragData: { id: "", initialGroup: "" },
+  isDragging: "",
+  activeContainer: ""
+};
+
+const reducer = (state: InitialStateType, action: ActionType) => {
+  switch (action.type) {
+    case 'SET_ITEMS':
+      return { ...state, items: action.payload };
+    case 'SET_DRAG_DATA':
+      return { ...state, dragData: action.payload };
+    case 'SET_IS_DRAGGING':
+      return { ...state, isDragging: action.payload };
+    case 'SET_ACTIVE_CONTAINER':
+      return { ...state, activeContainer: action.payload };
+    case 'CHANGE_CATEGORY':
+      return {
+        ...state,
+        items: state.items.map(item =>
+          item.id === action.payload.itemId
+            ? { ...item, container: action.payload.container }
+            : item
+        )
+      };
+    case 'REORDER_ITEMS': {
+      const { dragId, targetId } = action.payload;
+      const newItems = [...state.items];
+      const draggedItem = newItems.find(item => item.id === dragId);
+      const draggedIndex = newItems.indexOf(draggedItem);
+      const targetIndex = newItems.findIndex(item => item.id === targetId);
+
+      newItems.splice(draggedIndex, 1);
+      newItems.splice(targetIndex, 0, draggedItem);
 
+      return { ...state, items: newItems };
+    }
+    default:
+      return state;
+  }
+};
+
+// Context and Provider
 const DragContext = createContext<any>({});
 
 export const DraggableContext = () => {
   return useContext(DragContext);
 };
 
-export const DraggableProvider = ({ children, initialItems, onReorder }: any) => {
-  const [items, setItems] = useState([]);
-  const [dragData, setDragData] = useState<{ [key: string]: any }>({});
-  const [isDragging, setIsDragging] = useState("");
-  const [activeContainer, setActiveContainer] = useState("");
+export const DraggableProvider = ({ 
+  children, 
+  initialItems, 
+  onReorder,
+  onDragStart, 
+  onDragEnter, 
+  onDragEnd, 
+  onDrop, 
+  onDragOver 
+}: DraggableProviderType) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
 
   useEffect(() => {
-    setItems(initialItems);
+    dispatch({ type: 'SET_ITEMS', payload: initialItems });
   }, [initialItems]);
 
   useEffect(() => {
-    onReorder(items);
-  }, [items]);
+    onReorder(state.items);
+  }, [state.items]);
 
   const handleDragStart = (id: string, container: string) => {
-    setDragData({ id: id, initialGroup: container });
-    setIsDragging(id);
+    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
+    dispatch({ type: 'SET_IS_DRAGGING', payload: id });
+    if (onDragStart) onDragStart(id, container);
   };
 
   const handleDragEnter = (id: string, container: string) => {
-    if (dragData?.id !== id) {
-      const newItems = [...items];
-      const draggedItem = newItems.find((item) => item.id === dragData.id);
-      const draggedIndex = newItems.indexOf(draggedItem);
-      const targetIndex = newItems.findIndex((item) => item.id === id);
-
-      newItems.splice(draggedIndex, 1);
-      newItems.splice(targetIndex, 0, draggedItem);
-
-      setItems(newItems);
-      setDragData({ id: dragData.id, initialGroup: container });
+    if (state.dragData.id !== id) {
+      dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container } });
     }
+    if (onDragEnter) onDragEnter(id, container);
   };
 
   const handleDragEnd = () => {
-    setIsDragging("");
-    setActiveContainer("");
+    dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
+    dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+    if (onDragEnd) onDragEnd();
   };
 
   const changeCategory = (itemId: string, container: string) => {
-    const updatedItems = items.map((item) => {
-      if (item.id === itemId) {
-        return { ...item, container: container };
-      }
-      return item;
-    });
-
-    setItems(updatedItems);
+    dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId, container } });
   };
 
   const handleDrop = (container: string) => {
-    setIsDragging("");
-    setActiveContainer("");
-    const selected = dragData.id;
-    changeCategory(selected, container);
+    dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
+    dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+    changeCategory(state.dragData.id, container);
+    if (onDrop) onDrop(container);
   };
 
   const handleDragOver = (e: Event, container: string) => {
     e.preventDefault();
-    setActiveContainer(container);
+    dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
+    if (onDragOver) onDragOver(e, container);
   };
 
-  
-
-  const contextValue = {
-    items,
-    setItems,
-    dragData,
-    setDragData,
-    isDragging,
-    setIsDragging,
-    activeContainer,
-    setActiveContainer,
+  const contextValue = useMemo(() => ({
+    items: state.items,
+    dragData: state.dragData,
+    isDragging: state.isDragging,
+    activeContainer: state.activeContainer,
     handleDragStart,
     handleDragEnter,
     handleDragEnd,
     handleDrop,
-    handleDragOver,
-  };
+    handleDragOver
+  }), [state]);
 
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>

data/app/pb_kits/playbook/pb_draggable/context/types.ts

@@ -0,0 +1,31 @@
+export interface ItemType {
+    id: string;
+    container: string;
+    [key: string]: any;
+  }
+  
+  export interface InitialStateType {
+    items: ItemType[];
+    dragData: { id: string; initialGroup: string };
+    isDragging: string;
+    activeContainer: string;
+  }
+  
+  export type ActionType =
+    | { type: 'SET_ITEMS'; payload: ItemType[] }
+    | { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
+    | { type: 'SET_IS_DRAGGING'; payload: string }
+    | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
+    | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
+    | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } };
+
+    export interface DraggableProviderType {
+      children: React.ReactNode;
+      initialItems: ItemType[];
+      onReorder: (items: ItemType[]) => void;
+      onDragStart?: (id: string, container: string) => void; 
+      onDragEnter?: (id: string, container: string) => void;
+      onDragEnd?: () => void; 
+      onDrop?: (container: string) => void; 
+      onDragOver?: (e: Event, container: string) => void;
+    }

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>