playbook_ui 15.0.0.pre.alpha.PLAY2511playbookiconsupgrade10732 → 15.0.0.pre.alpha.PLAY198710641

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3ba3211af68531edfb8b2c941fb1cbeb54910a5ab71bebc2837bce0e9a1e42ba
-  data.tar.gz: f7c55a5e24b14cffb0deb79e727bba74030435d36e9db2134e8ae291c8a7a50c
+  metadata.gz: 4f692a3e63d89de4fe158b94d5114817e3e6dfd45108fb5ea88dec73f8a3362b
+  data.tar.gz: b77805447d91e42a4167450176bcf1772ed6d9bed5231786cde8cf6ce3929651
 SHA512:
-  metadata.gz: 5ae20a781b3a435128ef974a761b0f288698c4198ea9784f7e71f275c824f77a553962eee8aac2c3b98566413206ff424a8a3a247e428c571bae1e153fe7038d
-  data.tar.gz: 7a68981eaa1914a27a519c9fbb90a727ac3af579c15f3bc45622aedf1a984f0e33be189a404a2ae998bb529f6188bcfd249843aeb07d35740644fa6b0ba45629
+  metadata.gz: f6619f4dc7594a4b1e2cf846f29847640f6ae076afc3b60b1b2f385c37ced204c40b9355a63af0ea65aa9bb4ab2130f4c43198a48eaa2719761e91a9ebe61930
+  data.tar.gz: e29fa8941bdf8b40ccae627949a91b336e52dc63e888b9b1c48e53b6588f39cbf5aac5c4bfaf53cdc7115c06b385e0f3ee96d791a25085e6ef6286e52d13d423

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

@@ -5,7 +5,6 @@ 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"
@@ -61,7 +60,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}
@@ -133,7 +132,6 @@ export const RegularTableView = ({
 
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
-
   // Row pinning
   function PinnedRow({ row }: { row: Row<any> }) {
     const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
@@ -146,7 +144,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,
@@ -171,20 +169,21 @@ 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 && (
@@ -229,7 +228,7 @@ export const RegularTableView = ({
 
             {/* Display LoadingInline if Row Data is querying and there are no children already */}
             {isDataLoading && (
-              <tr key={`${row.id}-loading-row`}>
+              <tr key={`${row.id}-row`}>
                 <td colSpan={numberOfColumns}
                     style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
                 >
@@ -244,4 +243,4 @@ export const RegularTableView = ({
   );
 }
 
-export default RegularTableView;
+export default RegularTableView;

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

@@ -7,7 +7,6 @@ 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"
@@ -46,10 +45,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} = {};
@@ -137,7 +136,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;
 
@@ -173,9 +172,10 @@ export const VirtualizedTableView = ({
 
         if (item.type === 'row') {
           const row = item.row;
-
-          // Use the utility function to get consistent row color
-          const rowColor = getRowColorClass(row, inlineRowLoading || false);
+          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";
 
           return (
             <tr

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

@@ -10,14 +10,9 @@ 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));
 
-  // 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";
+  return row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
 }
 
 /**

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

@@ -17,7 +17,6 @@ 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 }
@@ -25,10 +24,6 @@ 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,8 +29,6 @@ module Playbook
           "phone-slash"
         when "extension"
           "phone-plus"
-        when "international"
-          "globe"
         else # "unknown" || "other"
           "phone"
         end
@@ -41,8 +39,6 @@ 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,12 +66,6 @@ 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=""
@@ -89,11 +83,10 @@ 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 US phone related contact types", () => {
+test("not compliant values return null in phone related contact types", () => {
   const notCompliantValues = [
     "349-185-998223",
     "349-1858",
@@ -136,16 +129,3 @@ test("not compliant values return null in US 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: "work",
+  contact_type: "wrong number",
   contact_value: "3245627482",
 }) %>
 
@@ -21,18 +21,3 @@
   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,21 +28,6 @@ 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_with_detail.html.erb

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

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

@@ -33,12 +33,6 @@ const ContactDefault = (props) => {
           contactValue="1234"
           {...props}
       />
-      <Contact
-          contactDetail="International"
-          contactType="international"
-          contactValue="+44 7700 900461"
-          {...props}
-      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -56,7 +56,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
         <Icon
             aria={{ label: 'loading icon' }}
             fixedWidth
-            icon={variant === 'dotted' ? 'spinner' : variant === 'solid' ? 'circle-notch' : undefined}
+            icon={variant === 'dotted' ? 'spinner' : variant === 'solid' ? 'spinner-solid' : undefined}
             pulse
         />
         {text}

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb

@@ -20,7 +20,7 @@ module Playbook
         if variant == "dotted"
           "spinner"
         elsif variant == "solid"
-          "circle-notch"
+          "spinner-solid"
         end
       end
     end

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb

@@ -4,8 +4,8 @@
 
 <%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_breached" }) %>
 
-<script>
-    window.addEventListener("load", () => {
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
 
     // variables for the kits you are targeting 
     const passphrase = document.querySelector(".passphrase_breached").querySelector("input")
@@ -142,4 +142,4 @@
     });
 
   })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb

@@ -10,8 +10,8 @@
 <%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_common" }) %>
 
 
-<script>
-    window.addEventListener("load", () => {
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
 
     const commonText = document.querySelector("#body_common")
 
@@ -133,4 +133,4 @@
     });
 
   })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb

@@ -4,8 +4,8 @@
 
 <div id="match"> </div>
 
-<script>
-    window.addEventListener("load", () => {   
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {   
 
       const useState = (defaultValue) => {
           let value = defaultValue;
@@ -48,4 +48,4 @@
 
       }
     })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb

@@ -32,8 +32,8 @@
 
 
 
-<script>
-    window.addEventListener("load", () => {
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
 
 
     // variables for the passphrase kits you are targeting 
@@ -320,4 +320,4 @@
 
   
   })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb

@@ -7,8 +7,8 @@
 <%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>
 
 
-<script>
-    window.addEventListener("load", () => {
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
 
     // variables for the kits you are targeting 
     const passphrase = document.querySelector(".passphrase_change").querySelector("input")
@@ -120,4 +120,4 @@
     });
 
   })
-</script>
+<% end %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb

@@ -13,8 +13,8 @@
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     function handleButtonClick() {
-      const editorContainer = [...document.querySelectorAll('[data-pb-react-props]')]
-        .find(element => element.getAttribute('data-pb-react-props')?.includes('"id":"content-preview-editor"'))
+      const editorContainer = [...document.querySelectorAll('[data-react-props]')]
+        .find(element => element.getAttribute('data-react-props')?.includes('"id":"content-preview-editor"'))
 
       const editorElement = editorContainer?.querySelector('trix-editor')
       const inputId = editorElement?.getAttribute('input')

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -53,13 +53,10 @@ $section_colors_dark: (
 .pb_section_separator_vertical {
   margin-left: $space_xs;
   margin-right: $space_xs;
-  flex-direction: column;
   &::before {
-    flex: 1;
-    @include section_separator_vertical(false);
+    display: none;
   }
   &::after {
-    flex: 1;
     @include section_separator_vertical(false);
   }
 }
@@ -90,7 +87,7 @@ $section_colors_dark: (
         background: none;
       }
       &.pb_section_separator_vertical {
-        &::before, &::after {
+        &::after {
           border: 1px dashed $color_value;
           background: none;
         }
@@ -109,7 +106,7 @@ $section_colors_dark: (
   }
   
   &.pb_section_separator_vertical {
-    &::before, &::after {
+    &::after {
       @include section_separator_vertical(true);
     }
   }
@@ -118,11 +115,6 @@ $section_colors_dark: (
     &::before, &::after {
       @include section_separator_dashed(true);
     }
-    &.pb_section_separator_vertical {
-      &::before, &::after {
-        @include section_separator_dashed(true);
-      }
-    }
   }
 }
 
@@ -134,7 +126,7 @@ $section_colors_dark: (
     }
 
     &.pb_section_separator_vertical {
-      &::before, &::after {
+      &::after {
         @include section_separator_vertical(false);
         background: $color_value;
       }
@@ -146,7 +138,7 @@ $section_colors_dark: (
         background: none;
       }
       &.pb_section_separator_vertical {
-        &::before, &::after {
+        &::after {
           border: 1px dashed $color_value;
           background: none;
         }

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb

@@ -11,27 +11,4 @@
             padding_right: "xs" 
         }) %>
     <% end %>
-<% end %>
-
-<%= pb_rails("flex", props: { classname: "flex-container", margin_top: "lg", vertical: "stretch" }) do %>
-    <%= pb_rails("body", props: { classname: "flex-item" }) do %>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-    <% end %>
-    <%= pb_rails("section_separator", props: { orientation: "vertical" }) do %>
-        <%= pb_rails("card", props: {
-            border_radius: "rounded",
-            justify_content: "center",
-            padding: "none"
-        })  do %>
-            <%= pb_rails("caption", props: {
-                text: "TODAY",
-                size: "xs",
-                padding_left: "xs",
-                padding_right: "xs" 
-            }) %>
-        <% end %>
-    <% end %>
-    <%= pb_rails("body", props: { classname: "flex-item" }) do %>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx

@@ -2,25 +2,8 @@ import React from 'react'
 import Card from '../../pb_card/_card'
 import Caption from '../../pb_caption/_caption'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
 
-const childrenHorizontal = (
-    <Card
-        borderRadius="rounded"
-        justifyContent="center"
-        padding="none"
-    >
-        <Caption
-            paddingLeft="xs"
-            paddingRight="xs"
-            size="xs"
-            text="TODAY"
-        />
-    </Card>
-)
-
-const childrenVertical = (
+const children = (
     <Card
         borderRadius="rounded"
         justifyContent="center"
@@ -37,33 +20,12 @@ const childrenVertical = (
 
 const SectionSeparatorChildren = (props) => {
     return (
-        <>
-            <SectionSeparator
-                {...props}
-                lineStyle='dashed'
-            >
-                {childrenHorizontal}
-            </SectionSeparator>
-            <Flex
-                inline="flex-container"
-                marginTop="lg"
-                vertical="stretch"
-            >
-                <FlexItem>
-                    {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
-                </FlexItem>
-                    <SectionSeparator
-                        orientation="vertical"
-                        {...props}
-                    >
-                        {childrenVertical}
-                    </SectionSeparator>
-                <FlexItem>
-                    {'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
-                </FlexItem>
-            </Flex>
-        </>
-        
+        <SectionSeparator
+            {...props}
+            lineStyle='dashed'
+        >
+            {children}
+        </SectionSeparator>
     )
 }
 

data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb

@@ -7,10 +7,7 @@
         <% end %>
     <% end %>
     <% if object.orientation === 'vertical' %>
-        <% if content %>
-            <%= content %>
-        <% elsif object.text %>
-            <span><%= pb_rails("caption", props: { text: object.text }) %></span>
+        <%= pb_rails("flex", props: { orientation: "column"}) do %>
         <% end %>
     <%end%>
 <% end %>