playbook_ui 14.12.0 → 14.13.0.pre.alpha.PBNTR5596029

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb

@@ -0,0 +1,80 @@
+<% content = capture do %>
+    <%= pb_rails("table", props: { container: false, border_radius: "none", size: "sm"}) do %>
+        <%= pb_rails("table/table_head") do %>
+            <%= pb_rails("background", props: { tag: "tr" }) do %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+                <%= pb_rails("table/table_header") do %>Alt Header<% end %>
+            <% end %>
+        <% end %>
+        <%= pb_rails("table/table_body") do %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
+                <% end %>
+            <% end %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
+                <% end %>
+            <% end %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>Expanded<% end %>
+                <%= pb_rails("table/table_cell") do %>
+                    <%= pb_rails("pill", props: { text: "Pill", variant: "primary" }) %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>
+
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: false, id: "4" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md

@@ -0,0 +1 @@
+The `collapsible_content` can also be used to display nested Tables within each Row.

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

@@ -31,6 +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_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
 
   react:
     - table_sm: Small

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

@@ -74,6 +74,31 @@
       &.table-card {
         background: none !important;
 
+        &.dark {
+          tbody, .pb_table_tbody {
+            tr, .pb_table_tr {
+              td, .pb_table_td {
+                background: $bg_dark_card !important;
+                border-color: $border_dark !important;
+                &:before {
+                  color: $text_dk_light !important;
+                }
+                &:after {
+                  height: 0;
+                  background-color: transparent;
+                }
+  
+                &:first-child {
+                  border-radius: $border_rad_light $border_rad_light 0 0 !important;
+                }
+                &:last-child {
+                  border-radius: 0 0 $border_rad_light $border_rad_light !important;
+                }
+              }
+            }
+          }
+        }
+
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {
@@ -81,6 +106,7 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
+
               &:after {
                 height: 0;
                 background-color: transparent;

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

@@ -77,7 +77,6 @@
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {
-              background: $white !important;
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;

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

@@ -74,6 +74,31 @@
       &.table-card {
         background: none !important;
 
+        &.dark {
+          tbody, .pb_table_tbody {
+            tr, .pb_table_tr {
+              td, .pb_table_td {
+                background: $bg_dark_card !important;
+                border-color: $border_dark !important;
+                &:before {
+                  color: $text_dk_light !important;
+                }
+                &:after {
+                  height: 0;
+                  background-color: transparent;
+                }
+  
+                &:first-child {
+                  border-radius: $border_rad_light $border_rad_light 0 0 !important;
+                }
+                &:last-child {
+                  border-radius: 0 0 $border_rad_light $border_rad_light !important;
+                }
+              }
+            }
+          }
+        }
+
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {

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

@@ -74,6 +74,31 @@
       &.table-card {
         background: none !important;
 
+        &.dark {
+          tbody, .pb_table_tbody {
+            tr, .pb_table_tr {
+              td, .pb_table_td {
+                background: $bg_dark_card !important;
+                border-color: $border_dark !important;
+                &:before {
+                  color: $text_dk_light !important;
+                }
+                &:after {
+                  height: 0;
+                  background-color: transparent;
+                }
+  
+                &:first-child {
+                  border-radius: $border_rad_light $border_rad_light 0 0 !important;
+                }
+                &:last-child {
+                  border-radius: 0 0 $border_rad_light $border_rad_light !important;
+                }
+              }
+            }
+          }
+        }
+
         tbody, .pb_table_tbody {
           tr, .pb_table_tr {
             td, .pb_table_td {

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_row.rb

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

@@ -38,7 +38,7 @@
     margin_bottom: "md",
     name: "currency_name",
     id: "example-currency",
-    placeholder: "$0.00",
+    value: "$99.99",
   }) %>
 
 <style>

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

@@ -1,102 +1,71 @@
-export default class PbTextInput {
-  static start() {
-    const inputElements = document.querySelectorAll('[data-pb-input-mask="true"]');
-
-    inputElements.forEach((inputElement) => {
-      inputElement.addEventListener("input", (event) => {
-        const maskType = inputElement.getAttribute("mask");
-        const cursorPosition = inputElement.selectionStart;
-
-        let rawValue = event.target.value;
-        let formattedValue = rawValue;
-
-        // Apply formatting based on the mask type
-        switch (maskType) {
-          case "currency":
-            formattedValue = formatCurrency(rawValue);
-            break;
-          case "ssn":
-            formattedValue = formatSSN(rawValue);
-            break;
-          case "postal_code":
-            formattedValue = formatPostalCode(rawValue);
-            break;
-          case "zip_code":
-            formattedValue = formatZipCode(rawValue);
-            break;
-        }
-
-        // Update the sanitized input field in the same wrapper
-        const sanitizedInput = inputElement
-          .closest(".text_input_wrapper")
-          ?.querySelector('[data="sanitized-pb-input"]');
-
-        if (sanitizedInput) {
-          switch (maskType) {
-            case "ssn":
-              sanitizedInput.value = sanitizeSSN(formattedValue);
-              break;
-            case "currency":
-              sanitizedInput.value = sanitizeCurrency(formattedValue);
-              break;
-            default:
-              sanitizedInput.value = formattedValue; 
-          }
-        }
-
-        inputElement.value = formattedValue;
-        setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue);
-      });
-    });
+import PbEnhancedElement from "../pb_enhanced_element"
+import { INPUTMASKS } from "./inputMask"
 
+export default class PbTextInput extends PbEnhancedElement {
+  static get selector() {
+    return '[data-pb-input-mask="true"]';
   }
-}
-
-function formatCurrency(value) {
-  const numericValue = value.replace(/[^0-9]/g, "").slice(0, 15);
-
-  if (!numericValue) return "";
-
-  const dollars = parseFloat((parseInt(numericValue) / 100).toFixed(2));
-  if (dollars === 0) return "";
 
-  return new Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-    maximumFractionDigits: 2,
-  }).format(dollars);
-}
-
-function formatSSN(value) {
-  const cleaned = value.replace(/\D/g, "").slice(0, 9);
-  return cleaned
-    .replace(/(\d{5})(?=\d)/, "$1-")
-    .replace(/(\d{3})(?=\d)/, "$1-");
-}
+  connect() {
+    this.handleInput = this.handleInput.bind(this);
+    this.element.addEventListener("input", this.handleInput);
+    this.handleInput(); 
+  }
 
-function formatZipCode(value) {
-  return value.replace(/\D/g, "").slice(0, 5);
-}
+  disconnect() {
+    this.element.removeEventListener("input", this.handleInput);
+  }
 
-function formatPostalCode(value) {
-  const cleaned = value.replace(/\D/g, "").slice(0, 9);
-  return cleaned.replace(/(\d{5})(?=\d)/, "$1-");
+  handleInput() {
+    const maskType = this.element.getAttribute("mask");
+    const cursorPosition = this.element.selectionStart;
+    const rawValue = this.element.value;
+    let formattedValue = rawValue;
+
+    const maskKey = {
+      currency: 'currency',
+      ssn: 'ssn',
+      postal_code: 'postalCode',
+      zip_code: 'zipCode',
+    }[maskType];
+
+    if (maskKey && INPUTMASKS[maskKey]) {
+      formattedValue = INPUTMASKS[maskKey].format(rawValue);
+    }
+
+    const sanitizedInput = this.element
+      .closest(".text_input_wrapper")
+      ?.querySelector('[data="sanitized-pb-input"]');
+
+    if (sanitizedInput) {
+      switch (maskType) {
+        case "ssn":
+          sanitizedInput.value = sanitizeSSN(formattedValue);
+          break;
+        case "currency":
+          sanitizedInput.value = sanitizeCurrency(formattedValue);
+          break;
+        default:
+          sanitizedInput.value = formattedValue;
+      }
+    }
+
+    this.element.value = formattedValue;
+    setCursorPosition(this.element, cursorPosition, rawValue, formattedValue);
+  }
 }
 
 function sanitizeSSN(input) {
-  return input.replace(/\D/g, ""); 
+  return input.replace(/\D/g, "");
 }
 
 function sanitizeCurrency(input) {
-  return input.replace(/[$,]/g, ""); 
+  return input.replace(/[$,]/g, "");
 }
 
-// function to set cursor position
 function setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue) {
   const difference = formattedValue.length - rawValue.length;
-
   const newPosition = Math.max(0, cursorPosition + difference);
-
   requestAnimationFrame(() => {
     inputElement.setSelectionRange(newPosition, newPosition);
   });

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -32,6 +32,7 @@ type TooltipProps = {
   position?: "absolute" | "fixed";
   text: string,
   showTooltip?: boolean,
+  forceOpenTooltip?: boolean,
 } & GlobalProps
 
 const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): React.ReactElement => {
@@ -49,6 +50,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     text,
     showTooltip = true,
     zIndex,
+    forceOpenTooltip = false,
     ...rest
   } = props
 
@@ -135,7 +137,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
       >
         {children}
       </div>
-      {open && (
+      {(open || forceOpenTooltip) && (
         <div
             {...getFloatingProps({
               className: `tooltip_tooltip ${placement} visible`,

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb

@@ -43,4 +43,4 @@
         Whoa. I'm a tooltip.
     <% end %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -1,5 +1,4 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-
 import {
   createPopperLite as createPopper,
   flip,
@@ -17,27 +16,34 @@ export default class PbTooltip extends PbEnhancedElement {
 
   connect() {
     this.triggerElements.forEach((trigger) => {
-      trigger.addEventListener('mouseenter', () => {
-        this.mouseenterTimeout = setTimeout(() => {
-          this.showTooltip(trigger)
-          this.checkCloseTooltip(trigger)
-        }, TOOLTIP_TIMEOUT)
+      const method = this.triggerMethod
 
-        trigger.addEventListener('mouseleave', () => {
+      if (method === 'click') {
+        trigger.addEventListener('click', () => {
+          this.showTooltip(trigger)
+        })
+      } else {
+        trigger.addEventListener('mouseenter', () => {
+          this.mouseenterTimeout = setTimeout(() => {
+            this.showTooltip(trigger)
+            this.checkCloseTooltip(trigger)
+          }, TOOLTIP_TIMEOUT)
+
+          trigger.addEventListener('mouseleave', () => {
+            clearTimeout(this.mouseenterTimeout)
+            setTimeout(() => {
+              this.hideTooltip()
+            }, 0)
+          }, { once: true })
+        })
+
+        this.tooltip.addEventListener('mouseenter', () => {
           clearTimeout(this.mouseenterTimeout)
-
-          setTimeout(() => {
-            this.hideTooltip()
-          }, 0)
-        }, { once: true })
-      })
-    })
-
-    this.tooltip.addEventListener('mouseenter', () => {
-      clearTimeout(this.mouseenterTimeout)
-    })
-    this.tooltip.addEventListener('mouseleave', () => {
-      this.hideTooltip()
+        })
+        this.tooltip.addEventListener('mouseleave', () => {
+          this.hideTooltip()
+        })
+      }
     })
   }
 
@@ -54,7 +60,7 @@ export default class PbTooltip extends PbEnhancedElement {
   }
 
   showTooltip(trigger) {
-    if (this.shouldShowTooltip === "false") return
+    if (this.shouldShowTooltip === 'false') return
 
     this.popper = createPopper(trigger, this.tooltip, {
       placement: this.position,
@@ -78,6 +84,13 @@ export default class PbTooltip extends PbEnhancedElement {
       ],
     })
     this.tooltip.classList.add('show')
+
+    if (this.triggerMethod === 'click') {
+      clearTimeout(this.autoHideTimeout)
+      this.autoHideTimeout = setTimeout(() => {
+        this.hideTooltip()
+      }, 1000)
+    }
   }
 
   hideTooltip() {
@@ -94,25 +107,26 @@ export default class PbTooltip extends PbEnhancedElement {
     let triggerEl
 
     if (this.triggerElementId) {
-      triggerEl = document.querySelector(`#${this.triggerElementId}`) //deprecated
+      triggerEl = document.querySelector(`#${this.triggerElementId}`)
     } else {
       const selectorIsId = this.triggerElementSelector.indexOf('#') > -1
-      triggerEl = selectorIsId ? document.querySelector(`${this.triggerElementSelector}`) :
-        document.querySelectorAll(`${this.triggerElementSelector}`)
+      triggerEl = selectorIsId
+        ? document.querySelector(`${this.triggerElementSelector}`)
+        : document.querySelectorAll(`${this.triggerElementSelector}`)
     }
 
     if (!triggerEl) {
-      /* eslint no-console: ["error", { allow: ["warn", "error"] }] */
       console.error('Tooltip Kit: an invalid or unavailable DOM reference was provided!')
       return []
     }
 
     if (!triggerEl.length) triggerEl = [triggerEl]
-    return this._triggerElements = (this._triggerElements || triggerEl)
+    return (this._triggerElements = this._triggerElements || triggerEl)
   }
 
   get tooltip() {
-    return this._tooltip = (this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
+    return (this._tooltip =
+      this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
   }
 
   get position() {
@@ -134,4 +148,8 @@ export default class PbTooltip extends PbEnhancedElement {
   get shouldShowTooltip() {
     return this.element.dataset.pbTooltipShowTooltip
   }
+
+  get triggerMethod() {
+    return this.element.dataset.pbTooltipTriggerMethod || 'hover'
+  }
 }