playbook_ui 14.13.0.pre.alpha.PBNTR457formtimezoneselect6219 → 14.13.0.pre.alpha.PBNTR5596029

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb

@@ -1,7 +1,11 @@
 <%= content_tag(:div,
 class: object.wrapper_classname,
 style: object.style) do %>
-  <%= pb_content_tag do %>
+  <%= content_tag(:div,
+  id: object.id,
+  data: object.data_values,
+  class: object.classname,
+  **combined_html_options) do %>
     <%= content_tag(:div, "",
       class: "progress_simple_value",
       style: object.value_style) %>

data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag(:ul) do %>
+<%= content_tag(:ul,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:li) do %>
+<%= content_tag(:li,
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
   <div class="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
     <div class="circle">
       <%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>

data/app/pb_kits/playbook/pb_radio/radio.html.erb

@@ -7,21 +7,26 @@
     data: object.data,
     **combined_html_options
   }) do %>
-    <%= pb_content_tag(:label,
+    <%= content_tag(:label,
       'data-pb-radio-children': 'true',
       checked: object.checked,
-      value: object.value
-      ) do %>
+      class: object.classname,
+      id: object.id,
+      value: object.value) do %>
       <%= input %>
       <span class="pb_radio_button"></span>
     <% end %>
     <div data-pb-radio-children-wrapper="true"> <%= content %> </div>
   <% end %>
 <% else %>
-  <%= pb_content_tag(:label,
+  <%= content_tag(:label,
+      aria: object.aria,
       checked: object.checked,
+      class: object.classname,
+      data: object.data,
+      id: object.id,
       value: object.value,
-      ) do %>
+      **combined_html_options) do %>
 
       <% if content.present? %>
         <%= content %>
@@ -32,4 +37,4 @@
       <span class="pb_radio_button"></span>
       <%= pb_rails("body", props: { status: object.body_status, text: object.text, dark: object.dark }) %>
   <% end %>
-<% end %>
+<% end %>

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,12 +31,9 @@ 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
-    - table_with_clickable_rows: Table with Clickable Rows
-    - table_with_selectable_rows: Table with Selectable Rows
 
   react:
     - table_sm: Small
@@ -73,5 +70,3 @@ examples:
     - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
     - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
-    - table_with_clickable_rows: Table with Clickable Rows
-    - table_with_selectable_rows: Table with Selectable Rows

data/app/pb_kits/playbook/pb_table/docs/index.js

@@ -32,6 +32,4 @@ export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
 export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
 export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
 export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
-export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
-export { default as TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
-export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
+export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'

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/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);

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

@@ -4,15 +4,13 @@
 module Playbook
   module PbTextInput
     class TextInput < Playbook::KitBase
-      VALID_MASKS = %w[currency zip_code postal_code ssn credit_card cvv].freeze
+      VALID_MASKS = %w[currency zipCode postalCode ssn].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,
@@ -36,8 +34,7 @@ module Playbook
       prop :add_on, type: Playbook::Props::NestedProps,
                     nested_kit: Playbook::PbTextInput::AddOn
 
-      prop :mask, type: Playbook::Props::Enum,
-                  values: ["currency", "zip_code", "postal_code", "ssn", "credit_card", "cvv", nil],
+      prop :mask, type: Playbook::Props::String,
                   default: nil
 
       def classname