playbook_ui_docs 15.6.0.pre.alpha.play266013023 → 15.6.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 81c5bdf599a2aa0124c42d936e5ccd93325331a7a37f6404b41ebe8a8b94fac5
-  data.tar.gz: 9bba26c50106688348749d493e632289a29c57f984e60c8108936d4a0bf1e50e
+  metadata.gz: 828fd024c2950b857d0ff61e9aced530635e804cea10943f716aae842a061588
+  data.tar.gz: 6c1b739e7cac2a08139638f8c5215a8d88f90f96179218c23d8c899a1836ae44
 SHA512:
-  metadata.gz: 799d5958ac0ee12aa22dc67b335066b8d3324e47d43d70e6b04eb575d82de91105d39b6aff4cfcffa6058f3c28353432959eb8c2402bc8b1893d6c2de2e01ccb
-  data.tar.gz: 3486d7241cc465158b554a11eced62382a43b62d2a6b877e7d41f4c68600ea517b7bf0f6cc7939ecc6e0163378db690e650800a5f43130106c107a85d967b8b7
+  metadata.gz: 505e690902c0dae8ae9fe2597ebb432daa2326010de9559048913b5714fdfdd23c1b9221a3c40cae285bd4baa675bd379850abaa2e1658a48447f29a8252feca
+  data.tar.gz: 5adae0c2447b01560e700be5cd1a3e9becea1df8faa306dd9b4c689ebafb53fd14e8f24f01bc64927085c509cd26cba562f715f6954604a1d2c46640a33e2690

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb

@@ -29,5 +29,167 @@
       label: "Graduated Students",
     }
 ] %>
+<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Table Props" }) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, margin_bottom: "md", column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
+<% column_definitions_two = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        accessor: "newEnrollments",
+        label: "New Enrollments",
+      },
+      {
+        accessor: "scheduledMeetings",
+        label: "Scheduled Meetings",
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        accessor: "attendanceRate",
+        label: "Attendance Rate",
+      },
+      {
+        accessor: "completedClasses",
+        label: "Completed Classes",
+      },
+      {
+        accessor: "classCompletionRate",
+        label: "Class Completion Rate",
+      },
+      {
+        accessor: "graduatedStudents",
+        label: "Graduated Students",
+      },
+    ],
+  },
+] %>
+<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header" }) %>
+<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_two, table_props: { vertical_border: true } }) %>
+
+<% column_definitions_three = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+] %>
+<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header with Column Group Border Color" }) %>
+<%= pb_rails("advanced_table", props: { id: "beta_table_with_color_headers", margin_bottom: "md", table_data: @table_data, column_definitions: column_definitions_three, column_group_border_color: "text_lt_default", table_props: { vertical_border: true } }) %>
+
+<% column_definitions_four = [
+  {
+    accessor: "year",
+    label: "Year",
+    cellAccessors: ["quarter", "month", "day"],
+  },
+  {
+    label: "Enrollment Data",
+    columns: [
+      {
+        label: "Enrollment Stats",
+        columns: [
+          {
+            accessor: "newEnrollments",
+            label: "New Enrollments",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: "Performance Data",
+    columns: [
+      {
+        label: "Completion Metrics",
+        columns: [
+          {
+            accessor: "completedClasses",
+            label: "Completed Classes",
+          },
+          {
+            accessor: "classCompletionRate",
+            label: "Class Completion Rate",
+          },
+        ],
+      },
+      {
+        label: "Attendance",
+        columns: [
+          {
+            accessor: "attendanceRate",
+            label: "Attendance Rate",
+          },
+          {
+            accessor: "scheduledMeetings",
+            label: "Scheduled Meetings",
+          },
+        ],
+      },
+    ],
+  },
+] %>
+<%= pb_rails("caption", props: { text: "Advanced Table Vertical Border Multi Header No Vertical Border" }) %>
+<%= pb_rails("advanced_table", props: {id: "beta_table_with_muilti_headers", table_data: @table_data, column_definitions: column_definitions_four }) %>

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

@@ -1,6 +1,7 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
+import Caption from "../../pb_caption/_caption"
 
 const AdvancedTableTableProps = (props) => {
   const columnDefinitions = [
@@ -40,14 +41,203 @@ const AdvancedTableTableProps = (props) => {
     verticalBorder: true
   }
 
+  const columnDefinitionsTwo = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          accessor: "newEnrollments",
+          label: "New Enrollments",
+        },
+        {
+          accessor: "scheduledMeetings",
+          label: "Scheduled Meetings",
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          accessor: "attendanceRate",
+          label: "Attendance Rate",
+        },
+        {
+          accessor: "completedClasses",
+          label: "Completed Classes",
+        },
+        {
+          accessor: "classCompletionRate",
+          label: "Class Completion Rate",
+        },
+        {
+          accessor: "graduatedStudents",
+          label: "Graduated Students",
+        },
+      ],
+    },
+  ];
+
+  const tablePropsTwo = {
+    verticalBorder: true,
+  }
+
+  const columnDefinitionsThree = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
+  const tablePropsThree = {
+    verticalBorder: true
+  }
+
+  const columnDefinitionsFour = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      label: "Enrollment Data",
+      columns: [
+        {
+          label: "Enrollment Stats",
+          columns: [
+            {
+              accessor: "newEnrollments",
+              label: "New Enrollments",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: "Performance Data",
+      columns: [
+        {
+          label: "Completion Metrics",
+          columns: [
+            {
+              accessor: "completedClasses",
+              label: "Completed Classes",
+            },
+            {
+              accessor: "classCompletionRate",
+              label: "Class Completion Rate",
+            },
+          ],
+        },
+        {
+          label: "Attendance",
+          columns: [
+            {
+              accessor: "attendanceRate",
+              label: "Attendance Rate",
+            },
+            {
+              accessor: "scheduledMeetings",
+              label: "Scheduled Meetings",
+            },
+          ],
+        },
+      ],
+    },
+  ];
+
   return (
     <div>
+      <Caption text="Advanced Table Vertical Border Table Props" />
       <AdvancedTable
           columnDefinitions={columnDefinitions}
+          marginBottom="md"
           tableData={MOCK_DATA}
           tableProps={tableProps}
           {...props}
       />
+      <Caption text="Advanced Table Vertical Border Multi Header" />
+      <AdvancedTable
+          columnDefinitions={columnDefinitionsTwo}
+          marginBottom="md"
+          tableData={MOCK_DATA}
+          tableProps={tablePropsTwo}
+          {...props}
+      />
+      <Caption text="Advanced Table Vertical Border Multi Header with Column Group Border Color" />
+      <AdvancedTable
+          columnDefinitions={columnDefinitionsThree}
+          columnGroupBorderColor="text_lt_default"
+          marginBottom="md"
+          tableData={MOCK_DATA}
+          tableProps={tablePropsThree}
+          {...props}
+      />
+      <Caption text="Advanced Table Vertical Border Multi Header No Vertical Border" />
+      <AdvancedTable
+          columnDefinitions={columnDefinitionsFour}
+          tableData={MOCK_DATA}
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("background", props: { padding: "xl" }) do %>
+<%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
 
 <% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -3,6 +3,7 @@ import Background from '../../pb_background/_background'
 
 const BackgroundLight = (props) => (
   <Background
+      backgroundColor="light"
       padding="xl"
       {...props}
   />

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

@@ -1,7 +1,7 @@
 examples:
 
   rails:
-  - background_light: Default
+  - background_light: Light
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image
@@ -11,7 +11,7 @@ examples:
   - background_size: Size
 
   react:
-  - background_light: Default
+  - background_light: Light
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.
+Card headers pass category, product, status and background colors only. List of all category, product, status and background colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md

@@ -1 +1 @@
-Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/tokens/colors" target="_blank">here</a>.
+Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/token/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx

@@ -7,6 +7,7 @@ const CollapsibleIcons = (props) => {
   <>
   <Collapsible
       icon={['plus','minus']}
+      iconColor='white'
   >
     <Collapsible.Main {...props}>
       <div>{'Main Section'}</div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx

@@ -22,6 +22,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -40,6 +41,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -58,6 +60,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
         <Collapsible.Main padding="sm" 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,24 +1,3 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "unitedStates",
-      id: "us"
-    },
-    {
-      label: "United Kingdom",
-      value: "unitedKingdom",
-      id: "gb"
-    },
-    {
-      label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
-    }
-  ]
-%>
-
-
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
@@ -31,16 +10,6 @@
         <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
-        <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
-        <%= pb_rails("typeahead", props: {
-        id: "typeahead-default",
-        placeholder: "Select one...",
-        options: options,
-        name: :foo,
-        margin_top: "sm",
-        is_multi: false
-      })
-%>
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>

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

@@ -12,7 +12,6 @@ examples:
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
   - dialog_turbo_frames: Within Turbo Frames
-  - dialog_closeable: Close Button in Header
 
 
   react:
@@ -26,7 +25,6 @@ examples:
   - dialog_full_height: Full Height
   - dialog_full_height_placement: Full Height Placement
   - dialog_loading: Loading
-  - dialog_closeable: Close Button in Header
 
   swift:
   - dialog_default_swift: Simple

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

@@ -8,5 +8,4 @@ export { default as DialogStatus } from './_dialog_status.jsx'
 export { default as DialogStackedAlert } from './_dialog_stacked_alert.jsx'
 export { default as DialogFullHeight } from './_dialog_full_height.jsx'
 export { default as DialogFullHeightPlacement } from './_dialog_full_height_placement.jsx'
-export { default as DialogLoading } from './_dialog_loading.jsx'
-export { default as DialogCloseable } from './_dialog_closeable.jsx'
+export { default as DialogLoading } from './_dialog_loading.jsx'

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md

@@ -1 +1 @@
-You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/tokens/colors) for reference.
+You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/token/colors) for reference.

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

@@ -5,12 +5,11 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
+  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
-  - draggable_multiple_containers: Dragging Across Multiple Containers
-  - draggable_multiple_containers_dropzone: Dragging Across Multiple Containers with Dropzones
 
   rails:
   - draggable_default: Default
@@ -18,8 +17,8 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
+  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
-  - draggable_multiple_containers: Dragging Across Multiple Containers

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

@@ -7,5 +7,4 @@ export { default as DraggableWithTable } from './_draggable_with_table.jsx'
 export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
 export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
 export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
-export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
-export { default as DraggableMultipleContainersDropzone } from './_draggable_multiple_containers_dropzone.jsx'
+export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb

@@ -8,4 +8,4 @@
   state: "PA",
   zipcode: "19382",
   territory: "PHL",
-}) %>
+}) %>

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

@@ -10,7 +10,6 @@ examples:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
   - multiple_users_size: Size
-  - multiple_users_with_tooltip: With Tooltip
 
   swift:
   - multiple_users_default_swift: Default

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

@@ -1,4 +1,3 @@
 export { default as MultipleUsersDefault } from './_multiple_users_default.jsx'
 export { default as MultipleUsersReverse } from './_multiple_users_reverse.jsx'
 export { default as MultipleUsersSize } from './_multiple_users_size.jsx'
-export { default as MultipleUsersWithTooltip } from './_multiple_users_with_tooltip.jsx'

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb

@@ -1,42 +1,12 @@
 <form id="example-form-validation" action="" method="get">
-    <%= pb_rails("phone_number_input", props: { 
-        id: "validation", 
-        initial_country: "af", 
-        value: "", 
-        required: true 
-    }) %>
+    <%= pb_rails("phone_number_input", props: { error: "Missing phone number", id: "validation", initial_country: "af", value: "", required: true }) %>
     <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
 </form>
 
 <%= javascript_tag do %>
     document.addEventListener('DOMContentLoaded', function () {
-        const form = document.querySelector('#example-form-validation');
-        
-        // Wait for React component to mount
-        function waitForComponent() {
-            const phoneInput = form.querySelector('#validation');
-            
-            if (!phoneInput) {
-                setTimeout(waitForComponent, 100);
-                return;
-            }
-            
-            // Wait for intl-tel-input to initialize, then focus and blur to trigger validation
-            setTimeout(function() {
-                phoneInput.focus({ preventScroll: true });
-                setTimeout(function() {
-                    phoneInput.blur();
-                }, 100);
-            }, 500);
-        }
-        
-        waitForComponent();
-        
-        // Prevent form submission if there are validation errors
-        form.addEventListener('submit', function (e) {
-            if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) {
-                e.preventDefault();
-            }
-        });
+        document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
+            if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
+        })
     })
 <% end %>