playbook_ui 15.0.0.pre.alpha.removewebpacker10589 → 15.0.0.pre.alpha.stimulusbutton10763

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5f1d58c0974115b7178c36d9cda95c0eacbfadd7b855f74d97d272acc9c62e1b
-  data.tar.gz: f602e748ae8b93fc70a7a4ee7a26876c7dcca1b8c68d65687d2c7e1d254c9238
+  metadata.gz: 3d949c2d669654df8d56ca2863fef4dbdcb143cf8acb4f3a5693eee5c9be68f8
+  data.tar.gz: 9dbc0f1e5082115203fe7f31c2e80cfd0fa8c23ad3359e09db20e15a51c2f289
 SHA512:
-  metadata.gz: fb8ac648144f2747012cd782f136b169e1e2c041cb7cd80e51727811968233ec5121542cccc8daf4ad1781d662e16138dd8d689867fd2b2bafce700a7c7b1d15
-  data.tar.gz: 60ac54b5f6e52494d90565b6eaa63e2d322b84d776eba943445aa19d5e65e9bae06eddb32acf292ecb03b6d5c200d7cab0d2e351c18904497be2d0ca0db5f014
+  metadata.gz: d139edd243825c2115465ee24481d84b1dd57db03ea1f9096ccfbda81f42b3e82fefcffa586e668d2a163d2777c61981b152e0985b4c21c4401f85c1c8e83e4d
+  data.tar.gz: 38ec1c3422f047193fc6604f8f2eb6daee1a5d380ecf1ce663c8e34d4efefc421d72cc9444724f2fa52df90ab7f04013ba95886c304b5925b9915f15168ef106

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -5,6 +5,7 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
 import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
+import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -29,6 +30,7 @@ const TableCellRenderer = ({
   columnPinning,
   customRowStyle,
   columnDefinitions,
+  isMultiHeaderColumn = false,
 }: {
   row: Row<GenericObject>
   collapsibleTrail?: boolean
@@ -37,12 +39,18 @@ const TableCellRenderer = ({
   columnPinning: { left: string[] }
   customRowStyle?: GenericObject
   columnDefinitions?: {[key:string]:any}[]
+  isMultiHeaderColumn?: boolean
 }) => {
   return (
     <>
       {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
         const isPinnedLeft = columnPinning.left.includes(cell.column.id);
+        // Add a border to the right of each group of columns for multi-header column tables
         const isLastCell = (() => {
+          if (!isMultiHeaderColumn) {
+            return false;
+          }
+
           const parent = cell.column.parent;
           if (!parent) {
             const last = row.getVisibleCells().at(-1);
@@ -60,7 +68,7 @@ const TableCellRenderer = ({
         const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
-        
+
         return (
           <td
               align={cellAlignment}
@@ -132,6 +140,10 @@ export const RegularTableView = ({
 
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
+  const isMultiHeaderColumn = columnDefinitions.some(
+    (obj: Record<string, unknown>) => "columns" in obj
+  );
+
   // Row pinning
   function PinnedRow({ row }: { row: Row<any> }) {
     const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
@@ -144,7 +156,7 @@ export const RegularTableView = ({
             backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
             color: customRowStyle?.fontColor,
             position: 'sticky',
-            top:   
+            top:
               row.getIsPinned() === 'top'
                   ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
                   : undefined,
@@ -156,6 +168,7 @@ export const RegularTableView = ({
             columnDefinitions={columnDefinitions}
             columnPinning={columnPinning}
             customRowStyle={customRowStyle}
+            isMultiHeaderColumn={isMultiHeaderColumn}
             loading={loading}
             row={row}
             stickyLeftColumn={stickyLeftColumn}
@@ -169,21 +182,20 @@ export const RegularTableView = ({
   return (
     <>
       {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
-        <PinnedRow key={row.id} 
-            row={row} 
+        <PinnedRow key={row.id}
+            row={row}
         />
       ))}
       {totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
-        const isExpandable = row.getIsExpanded();
         const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
-        const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
         const numberOfColumns = table.getAllFlatColumns().length;
-        const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0]?.cellAccessors?.length);
-        const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
-        const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
         const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
         const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
 
+        // Use functions from RowUtils for consistent cell coloring
+        const rowColor = getRowColorClass(row, inlineRowLoading || false);
+        const isDataLoading = shouldShowLoadingIndicator(row, inlineRowLoading || false, columnDefinitions[0]?.cellAccessors?.length || 0);
+
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
             {isFirstChildofSubrow && subRowHeaders && (
@@ -220,6 +232,7 @@ export const RegularTableView = ({
                   columnDefinitions={columnDefinitions}
                   columnPinning={columnPinning}
                   customRowStyle={customRowStyle}
+                  isMultiHeaderColumn={isMultiHeaderColumn}
                   loading={loading}
                   row={row}
                   stickyLeftColumn={stickyLeftColumn}
@@ -228,7 +241,7 @@ export const RegularTableView = ({
 
             {/* Display LoadingInline if Row Data is querying and there are no children already */}
             {isDataLoading && (
-              <tr key={`${row.id}-row`}>
+              <tr key={`${row.id}-loading-row`}>
                 <td colSpan={numberOfColumns}
                     style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
                 >
@@ -243,4 +256,4 @@ export const RegularTableView = ({
   );
 }
 
-export default RegularTableView;
+export default RegularTableView;

data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx

@@ -7,6 +7,7 @@ import { GenericObject } from "../../types"
 
 import { isChrome } from "../Utilities/BrowserCheck"
 import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
+import { getRowColorClass } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -45,10 +46,10 @@ export const VirtualizedTableView = ({
 
   const columnPinning = table.getState().columnPinning || { left: [] };
   const sortingState = JSON.stringify(table.getState().sorting || []);
-  
+
   // Store column widths extracted from header
   const [columnWidths, setColumnWidths] = useState<{[key: string]: string}>({});
-  
+
   // Function to get header cell widths
   const getHeaderCellWidths = () => {
     const widths: {[key: string]: string} = {};
@@ -136,7 +137,7 @@ export const VirtualizedTableView = ({
       </tr>
     );
   }
-  
+
   // Establish # of Parent Rows (so that Footer count does not include every single row)
   const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
 
@@ -172,10 +173,9 @@ export const VirtualizedTableView = ({
 
         if (item.type === 'row') {
           const row = item.row;
-          const isExpandable = row.getIsExpanded();
-          const rowHasNoChildren = row.original?.children && !row.original.children.length;
-          const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
-          const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
+
+          // Use the utility function to get consistent row color
+          const rowColor = getRowColorClass(row, inlineRowLoading || false);
 
           return (
             <tr

data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts

@@ -10,9 +10,14 @@ export const getRowColorClass = (
 ): string => {
   const isExpandable = row.getIsExpanded();
   const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
-  const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
 
-  return row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
+  // Check if row can expand or is currently expanded
+  const shouldShowExpandedBackground = isExpandable && (
+    (!inlineRowLoading && row.getCanExpand()) ||
+    (inlineRowLoading && (rowHasNoChildren || row.getCanExpand()))
+  );
+
+  return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "bg-white";
 }
 
 /**

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -249,8 +249,10 @@
   }
 
   .pb_advanced_table_body {
-    .last-cell {
-      border-right: 1px solid $border_light !important;
+    tr {
+      .last-cell:not(:last-of-type) {
+        border-right: 1px solid $border_light !important;
+      }
     }
     tr td:first-child {
       padding-left: 8px !important;
@@ -701,6 +703,14 @@
           }
         }
       }
+
+      .pb_advanced_table_header {
+        > tr {
+          .last-header-cell:last-of-type {
+            border-right-width: 0 !important;
+          }
+        }
+      }
     }
   }
 
@@ -975,14 +985,14 @@
   // Firefox-specific fix for last-header-cell and last-cell vertical borders
   @-moz-document url-prefix() {
     .pb_advanced_table_header {
-      .last-header-cell {
+      .last-header-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
     }
 
     .pb_advanced_table_body {
-      .last-cell {
+      .last-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
@@ -991,14 +1001,14 @@
     // Dark mode Firefox fixes
     &.dark {
       .pb_advanced_table_header {
-        .last-header-cell {
+        .last-header-cell:not(:last-child) {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
       }
 
       .pb_advanced_table_body {
-        .last-cell {
+        .last-cell:not(:last-child) {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
@@ -1011,18 +1021,62 @@
 .pb-advanced-table-popover-option:hover {
   background-color: $bg_light;
 }
+
 // Removes borders when Wrapped inside the Card Kit
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_body .last-cell,
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_header .last-header-cell,
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_body tr td:last-child,
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_header tr th:last-child {
+.pb_card_kit > .pb_advanced_table {
+  // Remove right border only from the actual last column
+  .pb_advanced_table_body tr td:last-child,
+  .pb_advanced_table_header tr th:last-child {
+    box-shadow: none !important; // prevents double up of borders on Firefox when in Card Kit
     border-right: none !important;
+  }
+
+  // Without vertical border, remove all last-cell borders
+  // Specifically for header to prevent thicker borders in firefox.
+  .pb_table:not(.vertical-border) {
+    .pb_advanced_table_header .last-header-cell {
+      box-shadow: none !important;
+    }
+  }
+  // Firefox fix
+  @-moz-document url-prefix() {
+    .pb_advanced_table_header {
+      .last-header-cell {
+        box-shadow: 1px 0 0 0 $border_light !important;
+      }
+    }
+  }
+
+  // For tables WITH vertical borders, only remove border from actual last column
+  .pb_table.vertical-border {
+    .pb_advanced_table_body .last-cell:not(:last-child),
+    .pb_advanced_table_header .last-header-cell:not(:last-child) {
+      box-shadow: none !important;
+      border-right: 1px solid $border_light !important;
+    }
+
+    // Dark mode
+    &.dark {
+      .pb_advanced_table_body .last-cell:not(:last-child),
+      .pb_advanced_table_header .last-header-cell:not(:last-child) {
+        border-right: 1px solid $border_dark !important;
+      }
+    }
+  }
+
+  // Support column group border colors
+  &.pb_advanced_table[class*="column-group-border-"] {
+    .pb_advanced_table_body .last-cell:not(:last-child),
+    .pb_advanced_table_header .last-header-cell:not(:last-child) {
+      border-right: 1px solid var(--column-border-color) !important;
+    }
+  }
 }
 
-//  Removes borders when Wrapped inside the Card Kit
-.pb_card_kit > .pb_advanced_table tr:last-child, 
+// Removes bottom borders when wrapped inside the Card Kit (keep existing behavior)
+.pb_card_kit > .pb_advanced_table tr:last-child,
 .pb_card_kit > .pb_advanced_table .last-row-cell {
   td {
-    border-bottom: none !important; 
+    border-bottom: none !important;
   }
 }

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx

@@ -44,9 +44,9 @@ const AdvancedTableColumnHeadersVerticalBorder = (props) => {
       ],
     },
   ];
-  
+
   const tableProps = {
-    verticalBorder: true
+    verticalBorder: true,
   }
 
   return (

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.html.erb

@@ -0,0 +1,29 @@
+<br/>
+  <%= pb_rails("button", props: { text: "Disable Buttons", variant: "link", id: "toggle-disabled-demo" }) %>
+  <%= pb_rails("button", props: { text: "Enable Buttons", variant: "link", id: "toggle-enabled-demo" }) %>
+<br/>
+<%= pb_rails("button", props: { text: "I am a Normal Button", id: "normal_managed_button", data:{pb_button_managed: true}, margin_bottom: "lg" }) %>
+<br/>
+<%= pb_rails("button", props: { text: "I am an <a> Button", id: "a_tag_managed_button", tag:"a", data:{pb_button_managed: true}, link: "http://google.com", margin_right: "lg" }) %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const disableTrigger = document.querySelector('#toggle-disabled-demo')
+    const enableTrigger = document.querySelector('#toggle-enabled-demo')
+
+    // Managed Buttons
+    const btn = document.querySelector('#normal_managed_button');
+    const link = document.querySelector('#a_tag_managed_button');
+
+    disableTrigger.addEventListener('click', (e) => {
+        // Disable both default button and a tag button
+        btn.setAttribute('disabled', true)
+        link.setAttribute('aria-disabled', 'true')
+    });
+    enableTrigger.addEventListener('click', (e) => {
+        // Enable both default button and a tag button
+        btn.removeAttribute('disabled')
+        link.removeAttribute('aria-disabled')
+    });
+  });
+</script>

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md

@@ -0,0 +1,5 @@
+If needing to toggle the disabled state of the Button dynmically, you can now do so in rails using the `pb-button-managed` data attribute. 
+
+If your button has `data:{ pb-button-managed: true }`  on it, you can then toggle state via attributes: for buttons set/remove disabled, for links set/remove aria-disabled="true". This will handle disabling the button, preventing clicks as well as all style changes so you don't have to.  
+
+Click to enable or disable the buttons above and view the code snippet below for details!

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb

@@ -0,0 +1,18 @@
+  <%= pb_rails("button", props: { text: "Disable Button", variant: "link", id: "toggle-disabled-demo-with-helper" }) %>
+  <%= pb_rails("button", props: { text: "Enable Button", variant: "link", id: "toggle-enabled-demo-with-helper" }) %>
+<br/>
+<%= pb_rails("button", props: { text: "Watch me Change!", id: "managed_button_with_helper", data:{pb_button_managed: true} }) %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const demoBtn = document.querySelector('#managed_button_with_helper')
+
+    const disable = document.querySelector('#toggle-disabled-demo-with-helper')
+    const enable = document.querySelector('#toggle-enabled-demo-with-helper')
+
+    disable.addEventListener('click', (e) => {demoBtn._pbButton.disable()});
+
+    enable.addEventListener('click', (e) => {demoBtn._pbButton.enable()});
+
+  });
+</script>

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.md

@@ -0,0 +1,5 @@
+The disabled state for the button can also be toggled via small helpers available through the `pb-button-managed` data attribute. 
+
+If your button has `data:{ pb-button-managed: true }`  on it, you can then toggle state via the provided `_pbButton.disable()` and `_pbButton.enable()` helpers as shoen in the code snippet below.
+
+Click to enable or disable the buttons above!

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

@@ -11,6 +11,8 @@ examples:
   - button_options: Button Additional Options
   - button_size: Button Size
   - button_form: Button Form Attribute
+  - button_managed_disabled: Button Toggle Disabled State
+  - button_managed_disabled_helper: Button Toggle Disabled State Helper
   
   react:
   - button_default: Button Variants

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

@@ -0,0 +1,99 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+
+const BUTTON_SELECTOR = "[data-pb-button-managed]"
+
+export default class PbButton extends PbEnhancedElement {
+  static get selector() {
+    return BUTTON_SELECTOR
+  }
+
+  connect() {
+    this._attrManaged = this._attributesPresent()
+    this.element._pbButton = this 
+
+    this._onClick = (e) => {
+      if (this.isDisabled()) {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+      }
+    }
+    this.element.addEventListener("click", this._onClick, true)
+
+    if (this._attrManaged) this._syncClassesFromAttributes()
+
+    this._observer = new MutationObserver(() => {
+      this._attrManaged = true
+      this._syncClassesFromAttributes()
+    })
+    this._observer.observe(this.element, {
+      attributes: true,
+      attributeFilter: ["disabled", "aria-disabled"],
+    })
+  }
+
+  disconnect() {
+    this.element.removeEventListener("click", this._onClick, true)
+    this._observer?.disconnect()
+    delete this.element._pbButton
+  }
+
+  disable() { this.setDisabled(true) }
+  enable()  { this.setDisabled(false) }
+
+  setDisabled(state) {
+    if (this._isButton()) {
+      state
+        ? this.element.setAttribute("disabled", "disabled")
+        : this.element.removeAttribute("disabled")
+    } else {
+      state
+        ? this.element.setAttribute("aria-disabled", "true")
+        : this.element.removeAttribute("aria-disabled")
+    }
+    this._attrManaged = true
+    this._applyClassState(state)
+  }
+
+  isDisabled() {
+    if (this._isButton()) {
+      if (this.element.hasAttribute("disabled")) return true
+      if (this._attrManaged && !this.element.hasAttribute("disabled")) return false
+    } else {
+      const aria = this.element.getAttribute("aria-disabled")
+      if (aria === "true") return true
+      if (this._attrManaged && aria !== "true") return false
+    }
+    return this.element.classList.contains("pb_button_disabled")
+  }
+
+  _isButton() {
+    return this.element.tagName === "BUTTON"
+  }
+
+  _attributesPresent() {
+    return this.element.hasAttribute("disabled") || this.element.hasAttribute("aria-disabled")
+  }
+
+  _syncClassesFromAttributes() {
+    const state = this._attrDisabledState()
+    const disabled = (state === null) ? false : state
+    this._applyClassState(disabled)
+  }
+
+  _attrDisabledState() {
+    if (this._isButton()) {
+      return this.element.hasAttribute("disabled") ? true : null
+    } else {
+      const aria = this.element.getAttribute("aria-disabled")
+      if (aria === "true") return true
+      if (aria === "false") return false
+      return this.element.hasAttribute("aria-disabled") ? false : null
+    }
+  }
+
+  _applyClassState(disabled) {
+    this.element.classList.toggle("pb_button_disabled", !!disabled)
+    this.element.classList.toggle("pb_button_enabled", !disabled)
+  }
+}
+

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -17,6 +17,7 @@ const contactTypeMap: { [key: string]: string } = {
   'work': 'phone-office',
   'work-cell': 'phone-laptop',
   'wrong-phone': 'phone-slash',
+  'international': 'globe',
 }
 
 const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string]: SVGElement }
@@ -24,6 +25,10 @@ const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string
 const formatContact = (contactString: string, contactType: string) => {
   if (contactType === 'email') return contactString
 
+  // International phone numbers are unformatted
+  if (contactType === 'international') return contactString
+  
+  // Format US numbers
   const cleaned = contactString.replace(/\D/g, '')
   const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
 

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -29,6 +29,8 @@ module Playbook
           "phone-slash"
         when "extension"
           "phone-plus"
+        when "international"
+          "globe"
         else # "unknown" || "other"
           "phone"
         end
@@ -39,6 +41,8 @@ module Playbook
           contact_value
         elsif contact_type == "extension" && contact_value.match(/^\d{4}$/)
           contact_value
+        elsif contact_type == "international"
+          contact_value
         else
           number_to_phone(formatted_value, area_code: true)
         end

data/app/pb_kits/playbook/pb_contact/contact.test.js

@@ -66,6 +66,12 @@ test('returns correct icon', () => {
           contactValue="1234"
           data={{ testid: 'test-extension' }}
       />
+      <Contact
+          contactDetail="International"
+          contactType="international"
+          contactValue="+44 20 7946 0958"
+          data={{ testid: 'test-international' }}
+      />
       <Contact
           contactDetail=""
           contactType=""
@@ -83,10 +89,11 @@ test('returns correct icon', () => {
   expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-wrong-type').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-extension').querySelector('.pb_custom_icon')).toBeInTheDocument()
+  expect(screen.getByTestId('test-international').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
 })
 
-test("not compliant values return null in phone related contact types", () => {
+test("not compliant values return null in US phone related contact types", () => {
   const notCompliantValues = [
     "349-185-998223",
     "349-1858",
@@ -129,3 +136,16 @@ test("not compliant values return null in phone related contact types", () => {
     )
   })
 })
+
+test('international contact type preserves original format', () => {
+  render(
+    <Contact
+        contactType="international"
+        contactValue="+44 20 7946 0958"
+        data={{ testid: 'test-international-format' }}
+    />
+  )
+
+  const kit = screen.getByTestId('test-international-format')
+  expect(kit).toHaveTextContent('+44 20 7946 0958')
+})

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb

@@ -13,7 +13,7 @@
 }) %>
 
 <%= pb_rails("contact", props: {
-  contact_type: "wrong number",
+  contact_type: "work",
   contact_value: "3245627482",
 }) %>
 
@@ -21,3 +21,18 @@
   contact_type: "work-cell",
   contact_value: "349-185-9988",
 }) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "wrong-phone",
+  contact_value: "2124396666",
+}) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "extension",
+  contact_value: "1233",
+}) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "international",
+  contact_value: "+44 7700 900461",
+}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -28,6 +28,21 @@ const ContactDefault = (props) => {
           contactValue="3245627482"
           {...props}
       />
+      <Contact
+          contactType="wrong-phone"
+          contactValue="2124396666"
+          {...props}
+      />
+      <Contact
+          contactType='extension'
+          contactValue="1234"
+          {...props}
+      />
+      <Contact
+          contactType="international"
+          contactValue="+44 7700 900461"
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.md

@@ -0,0 +1,5 @@
+The Contact kit automatically formats US phone numbers when the `contactType` / `contact_type` is one of: `home` (default), `work`, `cell`, `work-cell`, `wrong-phone`.
+
+- Use `email` to display emails.
+- Use `international` to display International phone numbers exactly as provided (no formatting applied).
+- Use `extension` to display four digit phone extensions.

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb

@@ -26,3 +26,9 @@
   contact_value: "1233",
   contact_detail: "Ext",
 }) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "international",
+  contact_value: "+44 7700 900461",
+  contact_detail: "International",
+}) %>