playbook_ui 14.13.0.pre.alpha.play1851checkboxreacthook6083 → 14.13.0.pre.alpha.play1900progresspillwidth6122

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

@@ -7,11 +7,14 @@ 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";
@@ -23,6 +26,7 @@ const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
     children,
     className,
     data = {},
+    draggableContainer = false,
     htmlOptions = {},
     id,
     tag = "table",
@@ -37,7 +41,30 @@ const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
   return (
     <>
       {isTableTag ? (
-        <tbody
+        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
             {...ariaProps}
             {...dataProps}
             {...htmlProps}
@@ -45,7 +72,7 @@ const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
             id={id}
         >
           {children}
-        </tbody>
+        </Draggable.Container>
       ) : (
         <div
             {...ariaProps}

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

@@ -9,6 +9,7 @@ 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 };
@@ -19,6 +20,8 @@ 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;
@@ -36,6 +39,8 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
     className,
     data = {},
     dark = false,
+    dragId,
+    draggableItem = false,
     htmlOptions = {},
     id,
     toggleCellId,
@@ -152,15 +157,38 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
           </>
         )
       ) : isTableTag ? (
-        <tr
+        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
             {...ariaProps}
             {...dataProps}
             {...htmlProps}
             className={classes}
-            id={id}
+            dragId={dragId}
         >
           {children}
-        </tr>
+        </Draggable.Item>
       ) : (
         <div
             {...ariaProps}

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

@@ -1,11 +1,17 @@
 <% if object.tag == "table" %>
-    <%= content_tag(:tbody,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
-      <%= content.presence %>
+    <% 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 %>
     <% end %>
 <% else %>
     <%= content_tag(:div,

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

@@ -6,6 +6,8 @@ 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

@@ -18,13 +18,19 @@
     <% end %>  
   </tr>
 <% elsif object.tag == "table" %>
-    <%= content_tag(:tr,
-      aria: object.aria,
-      class: object.classname,
-      data: object.data,
-      id: object.id,
-      **combined_html_options) do %>
-      <%= content.presence %>
+    <% 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 %>
     <% end %>
 <% else %>
     <%= content_tag(:div,

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

@@ -13,6 +13,10 @@ module Playbook
       prop :collapsible_content
       prop :collapsible_side_highlight, type: Playbook::Props::Boolean,
                                         default: true
+      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

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

@@ -27,6 +27,20 @@
     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,6 +27,8 @@ export default class PbTextInput extends PbEnhancedElement {
       ssn: 'ssn',
       postal_code: 'postalCode',
       zip_code: 'zipCode',
+      credit_card: 'creditCard',
+      cvv: 'cvv',
     }[maskType];
 
     if (maskKey && INPUTMASKS[maskKey]) {
@@ -45,6 +47,9 @@ 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;
       }
@@ -63,6 +68,10 @@ 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);

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -4,13 +4,15 @@
 module Playbook
   module PbTextInput
     class TextInput < Playbook::KitBase
-      VALID_MASKS = %w[currency zipCode postalCode ssn].freeze
+      VALID_MASKS = %w[currency zip_code postal_code ssn credit_card cvv].freeze
 
       MASK_PATTERNS = {
         "currency" => '^\$\d{1,3}(?:,\d{3})*(?:\.\d{2})?$',
         "zip_code" => '\d{5}',
         "postal_code" => '\d{5}-\d{4}',
         "ssn" => '\d{3}-\d{2}-\d{4}',
+        "credit_card" => '\d{4} \d{4} \d{4} \d{4}',
+        "cvv" => '\d{3,4}',
       }.freeze
 
       prop :autocomplete, type: Playbook::Props::Boolean,
@@ -34,7 +36,8 @@ module Playbook
       prop :add_on, type: Playbook::Props::NestedProps,
                     nested_kit: Playbook::PbTextInput::AddOn
 
-      prop :mask, type: Playbook::Props::String,
+      prop :mask, type: Playbook::Props::Enum,
+                  values: ["currency", "zip_code", "postal_code", "ssn", "credit_card", "cvv", nil],
                   default: nil
 
       def classname