playbook_ui 14.21.2 → 14.22.0.pre.alpha.PLAY2215githubactionsdepupdate8717

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

@@ -80,6 +80,20 @@ module Playbook
         end
       end
 
+      def justify_for(column, index)
+        if index.zero?
+          "start"
+        else
+          case cell_alignment_for(column)
+          when "left"   then "start"
+          when "center" then "center"
+          when "right"  then "end"
+          else
+            "end"
+          end
+        end
+      end
+
     private
 
       def custom_renderer_value(column, index)
@@ -103,6 +117,25 @@ module Playbook
       def subrow_depth_classname
         depth.positive? ? "depth-sub-row-#{depth}" : ""
       end
+
+      def find_column_def_by_accessor(defs, target_accessor)
+        defs.each do |col|
+          return col if col[:accessor] == target_accessor
+
+          if col[:columns].is_a?(Array)
+            found = find_column_def_by_accessor(col[:columns], target_accessor)
+            return found if found
+          end
+        end
+        nil
+      end
+
+      def cell_alignment_for(column)
+        return nil unless column[:accessor]
+
+        orig_def = find_column_def_by_accessor(column_definitions, column[:accessor])
+        orig_def[:column_styling][:cell_alignment] if orig_def && orig_def[:column_styling].is_a?(Hash)
+      end
     end
   end
 end

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

@@ -77,12 +77,12 @@ test('returns correct icon', () => {
 
   expect(screen.getByTestId('test-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-home').querySelector('.pb_custom_icon')).toBeInTheDocument()
-  expect(screen.getByTestId('test-work').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-office')
+  expect(screen.getByTestId('test-work').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-work-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toBeInTheDocument()
   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_icon_kit')).toHaveClass('fa-phone-plus')
+  expect(screen.getByTestId('test-extension').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
 })
 

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -3,8 +3,6 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
-import { PlotTreemapOptions } from "highcharts";
-
 const highchartsDarkTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -166,43 +164,7 @@ const highchartsDarkTheme: ThemeProps = {
       marker: {
         lineColor: colors.border_dark,
       },
-    },
-
-    //TREEMAP CHART STYLES
-    treemap: {
-      layoutAlgorithm: "squarified",
-      allowTraversingTree: false,
-      animationLimit: 1000,
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-        colors.data_8,
-      ],
-      dataLabels: {
-        enabled: true,
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.bold,
-          fontSize: typography.heading_4,
-        },
-      },
-      levels: [
-        {
-          level: 1,
-          dataLabels: {
-            enabled: false,
-          },
-        },
-      ],
-      traverseUpButton: {
-        position: { y: -50 },
-      },
-    } as PlotTreemapOptions,
+    }
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -3,8 +3,6 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
-import { PlotTreemapOptions } from "highcharts";
-
 const highchartsTheme: ThemeProps = {
   lang: {
     thousandsSep: ',',
@@ -165,43 +163,7 @@ const highchartsTheme: ThemeProps = {
       marker: {
         lineColor: '#333',
       },
-    },
-
-    //TREEMAP CHART STYLES
-    treemap: {
-      layoutAlgorithm: "squarified",
-      allowTraversingTree: false,
-      animationLimit: 1000,
-      colors: [
-        colors.data_1,
-        colors.data_2,
-        colors.data_3,
-        colors.data_4,
-        colors.data_5,
-        colors.data_6,
-        colors.data_7,
-        colors.data_8,
-      ],
-      dataLabels: {
-        enabled: true,
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.bold,
-          fontSize: typography.heading_4,
-        },
-      },
-      levels: [
-        {
-          level: 1,
-          dataLabels: {
-            enabled: false,
-          },
-        },
-      ],
-      traverseUpButton: {
-        position: { y: -50 },
-      },
-    } as PlotTreemapOptions,
+    }
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx

@@ -5,17 +5,20 @@ const DropdownBlankSelection = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     }
-  ];
+  ];  
 
   return (
   <>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx

@@ -6,15 +6,18 @@ import Dropdown from '../../pb_dropdown/_dropdown'
 const options = [
     {
         label: "United States",
-        value: "United States",
+        value: "unitedStates",
+        id: "us"
     },
     {
         label: "Canada",
-        value: "Canada",
+        value: "canada",
+        id: "ca"
     },
     {
         label: "Pakistan",
-        value: "Pakistan",
+        value: "pakistan",
+        id: "pk"
     }
 ]
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx

@@ -6,15 +6,18 @@ const DropdownDefault = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     }
   ];  
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx

@@ -5,17 +5,20 @@ const DropdownDefaultValue = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     }
-  ];  
+  ];
 
   return (
   <>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb

@@ -1,8 +1,8 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
 %>
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx

@@ -10,17 +10,20 @@ const DropdownError = (props) => {
     const options = [
         {
             label: "United States",
-            value: "United States",
+            value: "unitedStates",
+            id: "us"
         },
         {
             label: "Canada",
-            value: "Canada",
+            value: "canada",
+            id: "ca"
         },
         {
             label: "Pakistan",
-            value: "Pakistan",
+            value: "pakistan",
+            id: "pk"
         }
-    ]
+    ];  
 
     return (
         <>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx

@@ -6,39 +6,48 @@ const DropdownMultiSelect = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
-        label: "United Kingdom",
-        value: "United Kingdom",
+      label: "United Kingdom",
+      value: "unitedKingdom",
+      id: "gb"
     },  
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     },
     {
       label: "India",
-      value: "India",
+      value: "india",
+      id: "in"
     },
     {
       label: "Australia",
-      value: "Australia",
+      value: "australia",
+      id: "au"
     },
     {
       label: "New Zealand",
-      value: "New Zealand",
+      value: "new Zealand",
+      id: "nz"
     },
     {
       label: "Italy",
-      value: "Italy",
+      value: "italy",
+      id: "it"
     },
     {
       label: "Spain",
-      value: "Spain",
+      value: "spain",
+      id: "es"
     }
   ];  
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx

@@ -6,39 +6,48 @@ const DropdownMultiSelectDisplay = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
-        label: "United Kingdom",
-        value: "United Kingdom",
+      label: "United Kingdom",
+      value: "unitedKingdom",
+      id: "gb"
     },  
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     },
     {
       label: "India",
-      value: "India",
+      value: "india",
+      id: "in"
     },
     {
       label: "Australia",
-      value: "Australia",
+      value: "australia",
+      id: "au"
     },
     {
       label: "New Zealand",
-      value: "New Zealand",
+      value: "new Zealand",
+      id: "nz"
     },
     {
       label: "Italy",
-      value: "Italy",
+      value: "italy",
+      id: "it"
     },
     {
       label: "Spain",
-      value: "Spain",
+      value: "spain",
+      id: "es"
     }
   ];  
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb

@@ -1,15 +1,15 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-    { label: 'India', value: 'India', id: 'in' },
-    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
-    { label: 'Australia', value: 'Australia', id: 'au' },
-    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
-    { label: 'Germany', value: 'Germany', id: 'de' },
-    { label: 'France', value: 'France', id: 'fr' },
-    { label: 'Italy', value: 'Italy', id: 'it' },
+    { label: 'United States', value: 'unitedsStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'India', value: 'india', id: 'in' },
+    { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
+    { label: 'Australia', value: 'australia', id: 'au' },
+    { label: 'New Zealand', value: 'newZealand', id: 'nz' },
+    { label: 'Germany', value: 'germany', id: 'de' },
+    { label: 'France', value: 'france', id: 'fr' },
+    { label: 'Italy', value: 'italy', id: 'it' },
   ]
 %>
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb

@@ -1,15 +1,15 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-    { label: 'India', value: 'India', id: 'in' },
-    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
-    { label: 'Australia', value: 'Australia', id: 'au' },
-    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
-    { label: 'Germany', value: 'Germany', id: 'de' },
-    { label: 'France', value: 'France', id: 'fr' },
-    { label: 'Italy', value: 'Italy', id: 'it' },
+    { label: 'United States', value: 'unitedsStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'India', value: 'india', id: 'in' },
+    { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
+    { label: 'Australia', value: 'australia', id: 'au' },
+    { label: 'New Zealand', value: 'newZealand', id: 'nz' },
+    { label: 'Germany', value: 'germany', id: 'de' },
+    { label: 'France', value: 'france', id: 'fr' },
+    { label: 'Italy', value: 'italy', id: 'it' },
   ]
 %>
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb

@@ -1,15 +1,15 @@
 <%
   options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-    { label: 'India', value: 'India', id: 'in' },
-    { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
-    { label: 'Australia', value: 'Australia', id: 'au' },
-    { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
-    { label: 'Germany', value: 'Germany', id: 'de' },
-    { label: 'France', value: 'France', id: 'fr' },
-    { label: 'Italy', value: 'Italy', id: 'it' },
+    { label: 'United States', value: 'unitedsStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+    { label: 'India', value: 'india', id: 'in' },
+    { label: 'United Kingdom', value: 'unitedKingdom', id: 'uk' },
+    { label: 'Australia', value: 'australia', id: 'au' },
+    { label: 'New Zealand', value: 'newZealand', id: 'nz' },
+    { label: 'Germany', value: 'germany', id: 'de' },
+    { label: 'France', value: 'france', id: 'fr' },
+    { label: 'Italy', value: 'italy', id: 'it' },
   ]
 %>
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx

@@ -6,41 +6,50 @@ const DropdownMultiSelectWithAutocomplete = (props) => {
   const options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedStates",
+      id: "us"
     },
     {
-        label: "United Kingdom",
-        value: "United Kingdom",
+      label: "United Kingdom",
+      value: "unitedKingdom",
+      id: "gb"
     },  
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
+      id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
+      id: "pk"
     },
     {
       label: "India",
-      value: "India",
+      value: "india",
+      id: "in"
     },
     {
       label: "Australia",
-      value: "Australia",
+      value: "australia",
+      id: "au"
     },
     {
       label: "New Zealand",
-      value: "New Zealand",
+      value: "new Zealand",
+      id: "nz"
     },
     {
       label: "Italy",
-      value: "Italy",
+      value: "italy",
+      id: "it"
     },
     {
       label: "Spain",
-      value: "Spain",
+      value: "spain",
+      id: "es"
     }
-  ];  
+  ];
 
   return (
   <div>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb

@@ -2,21 +2,21 @@
   options = [
     {
       label: "United States",
-      value: "United States",
+      value: "unitedsStates",
       areaCode: "+1",
       icon: "🇺🇸",
       id: "us"
     },
     {
       label: "Canada",
-      value: "Canada",
+      value: "canada",
       areaCode: "+1",
       icon: "🇨🇦",
       id: "ca"
     },
     {
       label: "Pakistan",
-      value: "Pakistan",
+      value: "pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
       id: "pk"