playbook_ui 14.13.0.pre.alpha.PLAY1856doc6166 → 14.13.0.pre.alpha.PLAY1873rails86087

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx

@@ -1,77 +1,42 @@
-import React, { useState, useEffect } from "react"
-import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
 
-const DrawerMenu = () => {
-  const [isSmallScreen, setIsSmallScreen] = useState(false)
-  const navItems = ["Overview", "Albums", "Similar Artists"]
+const useDrawer = (visible = false) => {
+  const [opened, setOpened] = useState(visible);
+  const toggle = () => setOpened(!opened);
 
-  useEffect(() => {
-    const mediaQuery = window.matchMedia("(max-width: 992px)")
-    const updateScreen = (e) => setIsSmallScreen(e.matches)
-    updateScreen(mediaQuery)
-    mediaQuery.addEventListener('change', updateScreen)
-    return () => mediaQuery.removeEventListener('change', updateScreen)
-  }, [])
+  return [opened, toggle];
+};
+
+const DrawerBreakpoints = () => {
+  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
 
   return (
-    <div>
-      <Button id='sidebar'
-          padding='xs'
-      >
-        <Icon icon='bars'
-            size='2x'
-        />
-      </Button>
-      <Drawer
-          behavior={"push"}
-          breakpoint='md'
-          overlay={isSmallScreen ? true : false}
-          placement='left'
-          size='md'
-          triggerId='sidebar'
-      >
-        <Nav
-            link='#'
-            orientation='vertical'
-            padding={isSmallScreen ? "none" : "sm"}
-            variant='bold'
+    <>
+      <Flex wrap>
+        <Button
+            id="sm"
+            marginRight="md"
+            onClick={toggleSmallDrawer}
+        >
+          {"Will open at small breakpoint"}
+        </Button>
+      </Flex>
+      <Flex>
+        <Drawer
+            behavior={"push"}
+            breakpoint="sm"
+            onClose={toggleSmallDrawer}
+            opened={smallDrawerOpened}
+            overlay={false}
+            placement={"right"}
+            size={"lg"}
         >
-          {navItems.map((text, index) => {
-            return (
-              <NavItem
-                  collapsible
-                  collapsibleTrail
-                  fontWeight='bolder'
-                  iconLeft='city'
-                  iconRight={["plus", "minus"]}
-                  key={index}
-                  link='#'
-                  text={text}
-              >
-                <NavItem fontSize='small'
-                    link='#'
-                    marginY='none'
-                    text='City'
-                />
-                <NavItem
-                    fontSize='small'
-                    link='#'
-                    marginY='none'
-                    text='People'
-                />
-                <NavItem
-                    fontSize='small'
-                    link='#'
-                    marginY='none'
-                    text='Business'
-                />
-              </NavItem>
-            )
-          })}
-        </Nav>
-      </Drawer>
-    </div>
-  )
-}
+          Open because small breakpoint 
+        </Drawer>
+      </Flex>
+    </>
+  );
+};
 
-export default DrawerMenu
+export default DrawerBreakpoints;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx

@@ -8,8 +8,8 @@ const DrawerMenu = () => {
     const mediaQuery = window.matchMedia("(max-width: 600px)")
     setIsSmallScreen(mediaQuery.matches)
     const handler = (e) => setIsSmallScreen(e.matches)
-    mediaQuery.addEventListener("change", handler)
-    return () => mediaQuery.removeEventListener("change", handler)
+    mediaQuery.addEventListener('change', handler)
+    return () => mediaQuery.removeEventListener('change', handler)
   }, [])
 
   return (
@@ -22,17 +22,17 @@ const DrawerMenu = () => {
         />
       </Button>
       <Drawer
-          breakpoint='md'
+          breakpoint="md"
           placement='bottom'
           size='full'
           triggerId='menuButton'
           withinElement
       >
-        <Nav
+        <Nav 
             highlight={false}
             link='#'
-            orientation={isSmallScreen ? "vertical" : "horizontal"}
-            padding={isSmallScreen ? "none" : "sm"}
+            orientation={isSmallScreen ? 'vertical' : 'horizontal'} 
+            padding={isSmallScreen ? 'none' : 'sm'}
         >
           <NavItem link='#'
               text='About'

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

@@ -10,5 +10,4 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
-  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders 

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+      aria: object.aria,
+      data: object.data,
+      id: object.id,
+      class: object.classname,
+      **combined_html_options) do %>
   <%= react_component("MultiLevelSelect", object.multi_level_select_options)  %>
 <% end %>

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -1,9 +1,15 @@
   <% if object.collapsible %>
     <%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
       <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
-        <%= pb_content_tag( object.tag,
-            href: object.link && object.link,
-            target: object.link && object.target
+        <%= content_tag(object.tag,
+          aria: object.aria,
+          class: object.classname,
+          data: object.data,
+          dark: object.dark,
+          id: object.id,
+          href: object.link && object.link,
+          target: object.link && object.target,
+          **combined_html_options
           ) do %>
           <% if object.image_url %>
             <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
@@ -14,16 +20,22 @@
           <span class="pb_nav_list_item_text_collapsible">
             <%= object.text %>
           </span>
-        <% end %>
+        <% end %>    
        <% end %>
       <%= pb_rails("collapsible/collapsible_content", props: {collapsed: object.collapsed}) do %>
         <%= content.presence %>
       <% end %>
     <% end %>
   <% else %>
-    <%= pb_content_tag( object.tag,
-        href: object.link && object.link,
-        target: object.link && object.target
+    <%= content_tag(object.tag,
+      aria: object.aria,
+      class: object.classname,
+      **combined_html_options,
+      data: object.data,
+      dark: object.dark,
+      id: object.id,
+      href: object.link && object.link,
+      target: object.link && object.target
       ) do %>
       <% if object.image_url %>
         <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>

data/app/pb_kits/playbook/pb_nav/nav.html.erb

@@ -1,7 +1,12 @@
-<%= pb_content_tag(:nav) do %>
+<%= content_tag(:nav,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <% if object.title %>
-    <%= pb_content_tag do %>
-      <%= pb_content_tag(:a) do %>
+    <%= content_tag(:div, class: "pb_nav_list_title") do %>
+      <%= content_tag(:a, class: "pb_nav_list_item_link_text", href: object.link) do %>
         <%= pb_rails("caption", props: { text: object.title, dark: dark }) %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_online_status/online_status.html.erb

@@ -1,2 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria.merge!(label: object.status),
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
 <% end %>

data/app/pb_kits/playbook/pb_popover/popover.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id,
+  **combined_html_options) do %>
   <div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
     <div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
       <%= content.presence %>

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss

@@ -3,8 +3,7 @@
 @import "../tokens/border_radius";
 
 @mixin pb_progress_pill {
-  width: 100%;
-  max-width: 45px;
+  width: 45px;
   height: 4px;
   border-radius: $border_rad_light;
   margin-right: $space_xs;

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb

@@ -1,2 +1 @@
 <%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2 }) %>
-<%= pb_rails("progress_pills", props: { aria: { label: "9 out of 18 steps complete" }, steps: 18, active: 9, margin_top: "md" }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx

@@ -10,13 +10,6 @@ const ProgressPillsDefault = (props) => {
                 steps={3}
                 {...props}
             />
-            <ProgressPills
-                active={9}
-                aria={{ label: '9 out of 18 steps complete' }}
-                marginTop="md"
-                steps={18}
-                {...props}
-            />
         </>
     )
 }

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx

@@ -16,7 +16,7 @@ const TableWithCollapsible = (props) => {
     );
   };
 
-  return (
+return (
       <Table
           size="sm"
           {...props}

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

@@ -31,7 +31,6 @@ examples:
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
-    - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
     - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
     - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table

data/app/pb_kits/playbook/pb_table/index.ts

@@ -2,7 +2,6 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 const TABLE_WRAPPER_SELECTOR = "[data-pb-table-wrapper]";
 const TABLE_COLLAPSIBLE_WRAPPER_SELECTOR = "[data-pb-table-collapsible-wrapper]";
-const TABLE_COLLAPSIBLE_CELL_SELECTOR = "[data-pb-table-collapsible-cell-id]";
 
 export default class PbTable extends PbEnhancedElement {
   stickyLeftColumns: string[] = [];
@@ -159,49 +158,18 @@ export default class PbTable extends PbEnhancedElement {
   }
 
   handleCollapsibleClick() {
-    const cells = this.element.querySelectorAll(TABLE_COLLAPSIBLE_CELL_SELECTOR);
     const collapsibleElements = this.element.querySelectorAll(TABLE_COLLAPSIBLE_WRAPPER_SELECTOR);
-
-    if (cells.length > 0) {
-      cells.forEach((cell) => {
-        const cellId = (cell as HTMLElement).dataset.pbTableCollapsibleCellId;
-
-        Array.from(cell.children).forEach((child) => {
-          if (child.id === cellId) {
-            Array.from(child.children).forEach((svgChild) => {
-              svgChild.id = cellId; // Assign cellId to SVG child
-              Array.from(svgChild.children).forEach((pathChild) => {
-                pathChild.id = cellId; // Assign cellId to path child
-              });
-            });
-          }
-        });
-        cell.addEventListener('click', (event) => {
-          if ((event.target as HTMLElement).id) {
-            document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`));
-
-            const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
-            toggleElements.forEach((element) => {
-              element.classList.toggle('no-border');
-              element.classList.toggle('border-active');
-            });
-          }
+    collapsibleElements.forEach((collapsibleElement) => {
+      collapsibleElement.addEventListener('click', (event) => {
+        document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`))
+
+        const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
+        toggleElements.forEach(element => {
+          element.classList.toggle('no-border');
+          element.classList.toggle('border-active');
         });
-      });
-
-    } else {
-      collapsibleElements.forEach((collapsibleElement) => {
-        collapsibleElement.addEventListener('click', (event) => {
-          document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`))
-
-          const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
-          toggleElements.forEach(element => {
-            element.classList.toggle('no-border');
-            element.classList.toggle('border-active');
-          });
-        })
       })
-    }
+    })
   }
 
   handleCollapsibleRow() {

data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss

@@ -37,10 +37,6 @@
     cursor: pointer;
   }
 
-  .collapsible_cell {
-    cursor: default;
-  }
-
   .no-border {
     border-bottom: none !important;
   }

data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx

@@ -7,14 +7,11 @@ import {
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
 
-import Draggable from "../../pb_draggable/_draggable"
-
 type TableBodyPropTypes = {
   aria?: { [key: string]: string };
   children: React.ReactNode[] | React.ReactNode;
   className: string;
   data?: { [key: string]: string };
-  draggableContainer?: boolean;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   tag?: "table" | "div";
@@ -26,7 +23,6 @@ const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
-    draggableContainer = false,
     htmlOptions = {},
     id,
     tag = "table",
@@ -41,30 +37,7 @@ const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
   return (
     <>
       {isTableTag ? (
-        draggableContainer ? (
-          <Draggable.Container
-              {...ariaProps}
-              {...dataProps}
-              {...htmlProps}
-              className={classes}
-              id={id}
-              tag="tbody"
-          >
-            {children}
-          </Draggable.Container>
-        ) : (
-          <tbody
-              {...ariaProps}
-              {...dataProps}
-              {...htmlProps}
-              className={classes}
-              id={id}
-          >
-            {children}
-          </tbody>
-        )
-      ) : draggableContainer ? (
-        <Draggable.Container
+        <tbody
             {...ariaProps}
             {...dataProps}
             {...htmlProps}
@@ -72,7 +45,7 @@ const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
             id={id}
         >
           {children}
-        </Draggable.Container>
+        </tbody>
       ) : (
         <div
             {...ariaProps}

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -9,7 +9,6 @@ import {
 import { globalProps } from "../../utilities/globalProps";
 import Collapsible from "../../pb_collapsible/_collapsible";
 import useCollapsible from "../../pb_collapsible/useCollapsible";
-import Draggable from "../../pb_draggable/_draggable";
 
 type TableRowPropTypes = {
   aria?: { [key: string]: string };
@@ -20,8 +19,6 @@ type TableRowPropTypes = {
   collapsibleSideHighlight?: boolean;
   data?: { [key: string]: string };
   dark?: boolean;
-  dragId?: string;
-  draggableItem?: boolean;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   toggleCellId?: string;
@@ -39,8 +36,6 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
     className,
     data = {},
     dark = false,
-    dragId,
-    draggableItem = false,
     htmlOptions = {},
     id,
     toggleCellId,
@@ -157,38 +152,15 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
           </>
         )
       ) : isTableTag ? (
-        draggableItem ? (
-          <Draggable.Item
-              {...ariaProps}
-              {...dataProps}
-              {...htmlProps}
-              className={classes}
-              dragId={dragId}
-              tag="tr"
-          >
-            {children}
-          </Draggable.Item>
-        ) : (
-          <tr
-              {...ariaProps}
-              {...dataProps}
-              {...htmlProps}
-              className={classes}
-              id={id}
-          >
-            {children}
-          </tr>
-        )
-      ) : draggableItem ? (
-        <Draggable.Item
+        <tr
             {...ariaProps}
             {...dataProps}
             {...htmlProps}
             className={classes}
-            dragId={dragId}
+            id={id}
         >
           {children}
-        </Draggable.Item>
+        </tr>
       ) : (
         <div
             {...ariaProps}

data/app/pb_kits/playbook/pb_table/table_body.html.erb

@@ -1,17 +1,11 @@
 <% if object.tag == "table" %>
-    <% if object.draggable_container %>
-      <%= pb_rails("draggable/draggable_container", props: { tag: "tbody", classname: object.classname, data: object.data }) do %>
-        <%= content.presence %>
-      <% end %>
-    <% else %>
-      <%= content_tag(:tbody,
-        aria: object.aria,
-        class: object.classname,
-        data: object.data,
-        id: object.id,
-        **combined_html_options) do %>
-        <%= content.presence %>
-      <% end %>
+    <%= content_tag(:tbody,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
+      <%= content.presence %>
     <% end %>
 <% else %>
     <%= content_tag(:div,

data/app/pb_kits/playbook/pb_table/table_body.rb

@@ -6,8 +6,6 @@ module Playbook
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[table div],
                  default: "table"
-      prop :draggable_container, type: Playbook::Props::Boolean,
-                                 default: false
 
       def classname
         generate_classname("pb_table_tbody")

data/app/pb_kits/playbook/pb_table/table_row.html.erb

@@ -5,7 +5,6 @@
     data: object.data.merge(id: object.id),  
     id: object.id,
     'data-pb-table-collapsible-wrapper' => true,
-    'data-pb-table-collapsible-cell-id' => object.toggle_cell_id,
     **combined_html_options) do %>
     <%= content.presence %>
   <% end %>
@@ -19,19 +18,13 @@
     <% end %>  
   </tr>
 <% elsif object.tag == "table" %>
-    <% if object.draggable_item %>
-      <%= pb_rails("draggable/draggable_item", props:{ drag_id: object.drag_id, tag: "tr", classname: object.classname, data: object.data }) do %>
-        <%= content.presence %>
-      <% end %>
-    <% else %>
-      <%= content_tag(:tr,
-        aria: object.aria,
-        class: object.classname,
-        data: object.data,
-        id: object.id,
-        **combined_html_options) do %>
-        <%= content.presence %>
-      <% end %>
+    <%= content_tag(:tr,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
+      **combined_html_options) do %>
+      <%= content.presence %>
     <% end %>
 <% else %>
     <%= content_tag(:div,

data/app/pb_kits/playbook/pb_table/table_row.rb

@@ -13,14 +13,9 @@ module Playbook
       prop :collapsible_content
       prop :collapsible_side_highlight, type: Playbook::Props::Boolean,
                                         default: true
-      prop :toggle_cell_id, type: Playbook::Props::String
-      prop :draggable_item, type: Playbook::Props::Boolean,
-                            default: false
-      prop :drag_id, type: Playbook::Props::String,
-                     default: nil
 
       def classname
-        generate_classname("pb_table_row_kit", side_highlight_class) + tag_class + collapsible_cell_class
+        generate_classname("pb_table_row_kit", side_highlight_class) + tag_class
       end
 
       def side_highlight_class
@@ -30,14 +25,6 @@ module Playbook
       def tag_class
         " pb_table_tr"
       end
-
-      def collapsible_cell_class
-        if toggle_cell_id
-          " collapsible_cell"
-        else
-          ""
-        end
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb

@@ -27,20 +27,6 @@
     placeholder: "123-45-6789"
   }) %>
 
-  <%= pb_rails("text_input", props: {
-    label: "Credit Card",
-    mask: "credit_card",
-    margin_bottom: "md",
-    placeholder: "1234 5678 9012 3456"
-  }) %>
-
-  <%= pb_rails("text_input", props: {
-    label: "CVV",
-    mask: "cvv",
-    margin_bottom: "md",
-    placeholder: "123"
-  }) %>
-
   <%= pb_rails("title" , props: {
     text: "Hidden Input Under The Hood",
     padding_bottom: "sm"

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

@@ -27,8 +27,6 @@ export default class PbTextInput extends PbEnhancedElement {
       ssn: 'ssn',
       postal_code: 'postalCode',
       zip_code: 'zipCode',
-      credit_card: 'creditCard',
-      cvv: 'cvv',
     }[maskType];
 
     if (maskKey && INPUTMASKS[maskKey]) {
@@ -47,9 +45,6 @@ export default class PbTextInput extends PbEnhancedElement {
         case "currency":
           sanitizedInput.value = sanitizeCurrency(formattedValue);
           break;
-        case "credit_card":
-          sanitizedInput.value = sanitizeCreditCard(formattedValue);
-          break;
         default:
           sanitizedInput.value = formattedValue;
       }
@@ -68,10 +63,6 @@ function sanitizeCurrency(input) {
   return input.replace(/[$,]/g, "");
 }
 
-function sanitizeCreditCard(input) {
-  return input.replace(/\D/g, ""); 
-}
-
 function setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue) {
   const difference = formattedValue.length - rawValue.length;
   const newPosition = Math.max(0, cursorPosition + difference);