playbook_ui 13.17.0.pre.alpha.nodealphaupgrade2157 → 13.17.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d229baf16d600479c55f9fc35e8b93b5978cba2506b23e883860ea2094294809
-  data.tar.gz: 0d23fa917195b34c496c19a7f7f741e4ffce3807706019805469d92ba728c015
+  metadata.gz: 8c288d80cbfc92741e976eda7ca6fd7e4ecbf256b5f5ad9e4e8a23f2b4ddb6ae
+  data.tar.gz: 675612e33fd9e560aa274763e5de44bfea34fd1af570d03b951a803994fbd4dd
 SHA512:
-  metadata.gz: 2d3610e3ec299cc4bc396ebe9d11169d3da50624aec176a2656bb846f426410027213461715d2cfd83f55f8e53b478c4f734e2115fe9265a4203046d6318358d
-  data.tar.gz: f91b7cfefcb02e1078a1ff1f607bb71b55a10460ec8b9707f0e740783aeb0e36d6c54b84538cfa4857ef8daa044f1045d7d2aded18e2e51877acc2542d1a815c
+  metadata.gz: 3d14807433425abbbd0fdf53733c4e2addc7ebb6506d35a89ea7b06f06746c39e815d7e3100a57e54cf4fea14cfb8779693b0140da9d4b4f31eb5867a752b467
+  data.tar.gz: 916468edea21563fb47710ec9a691e16a0ba1852fc4b4f97637884d560a5ae0b7b55a6a434bfd73fec6d756e68b5af89a5b4b49f2b97f4f19d3b38fa4463df0e

data/app/pb_kits/playbook/_reset.scss

@@ -1,5 +1,5 @@
-@import "tokens/typography";
-@import "tokens/colors";
+@import "./tokens/typography";
+@import "./tokens/colors";
 
 * {
   box-sizing: border-box;

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

@@ -72,6 +72,7 @@ const cellId = `${loading ?
         <Flex
             alignItems="center"
             justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
+            paddingLeft={loading ? "sm" : "none"}
         >
           {header.index === 0 &&
             !loading &&
@@ -113,7 +114,7 @@ const cellId = `${loading ?
               header.column.getCanSort() &&
               enableSorting &&
               (loading ? (
-                <div className="loading-toggle-icon" />
+                <div className="loading-toggle-icon header-sort-icon" />
               ) : (
                 <SortIconButton header={header} 
                     sortIcon={sortIcon} 

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

@@ -162,7 +162,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     getExpandedRowModel: getExpandedRowModel(),
     getSortedRowModel: getSortedRowModel(),
     enableSortingRemoval: false,
-    sortDescFirst: true,
     ...expandAndSortState(),
     ...tableOptions,
   });

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React from "react";
 import { render, screen } from "../utilities/test-utils";
 
 import { AdvancedTable } from "../";
@@ -13,25 +13,7 @@ const MOCK_DATA = [
     scheduledMeetings: "10",
     children: [
       {
-        year: "2021",
-        quarter: "Q1",
-        month: null,
-        day: null,
-        newEnrollments: "2",
-        scheduledMeetings: "35",
-      },
-    ],
-  },
-  {
-    year: "2022",
-    quarter: null,
-    month: null,
-    day: null,
-    newEnrollments: "20",
-    scheduledMeetings: "10",
-    children: [
-      {
-        year: "2022",
+        year: "2011",
         quarter: "Q1",
         month: null,
         day: null,
@@ -58,70 +40,9 @@ const columnDefinitions = [
   },
 ];
 
-const subRowHeaders = ["Quarter"]
-
 const testId = "advanced_table";
 
-const AdvancedTableExpandControl = () => {
-  const [expanded, setExpanded] = useState({'0': true})
-
-  const expandedControl = {
-    value: expanded,
-    onChange: setExpanded,
-  }
-
-return (
-  <div>
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        expandedControl={expandedControl}
-        tableData={MOCK_DATA}
-    />
-  </div>
-);
-}
-
-const AdvancedTableSortControl = () => {
-  const [isSortDesc, setIsSortDesc] = useState({desc: false})
-
-  const sortControl = {
-    value: isSortDesc,
-    onChange: setIsSortDesc,
-  }
-
-return (
-  <div>
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{testid: testId}}
-        sortControl={sortControl}
-        tableData={MOCK_DATA}
-      >
-        <AdvancedTable.Header enableSorting />
-        <AdvancedTable.Body />
-      </AdvancedTable>
-  </div>
-);
-}
-
-const tableOptions = {
-  initialState: {
-      sorting: [
-        {
-          id: "year",
-          desc: true,
-        },
-      ],
-    },
-}
-
-const tableProps = {
-  container: false,
-  sticky: true
-}
-
-test("Generates default kit and classname", () => {
+test("generated scaffold test", () => {
   render(
     <AdvancedTable
         columnDefinitions={columnDefinitions}
@@ -132,214 +53,4 @@ test("Generates default kit and classname", () => {
 
   const kit = screen.getByTestId(testId);
   expect(kit).toBeInTheDocument();
-  expect(kit).toHaveClass('pb_advanced_table')
-});
-
-test("Generates aria label", () => {
-  render(
-    <AdvancedTable
-        aria={{label:testId}}
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const kit = screen.getByTestId(testId);
-  expect(kit).toHaveAttribute('aria-label', testId)
-});
-
-test("Row toggle button exists and toggles subrows open and closed", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const kit = screen.getByTestId(testId);
-  const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
-  expect(rowButton).toBeInTheDocument()
-  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1")
-  expect(subRow1).not.toBeInTheDocument()
-  rowButton.click()
-  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
-  expect(subRow).toBeInTheDocument()
-});
-
-test("toggleExpansionAll button exists and toggles subrows open and closed", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const kit = screen.getByTestId(testId);
-  const toggleButton = kit.querySelector(".gray-icon.toggle-all-icon")
-  expect(toggleButton).toBeInTheDocument()
-  const subRow1 = kit.querySelector(".bg-white.depth-sub-row-1")
-  expect(subRow1).not.toBeInTheDocument()
-  toggleButton.click()
-  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
-  expect(subRow).toBeInTheDocument()
-});
-
-test("loading state + initialLoadingRowCount prop", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        initialLoadingRowsCount={13}
-        loading
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const kit = screen.getByTestId(testId);
-  const table = kit.querySelector('table')
-  expect(table).toHaveClass('pb_table table-sm table-responsive-none table-card data_table ns_tabular content-loading')
-
-  const tableBody = kit.querySelector('tbody')
-  const tableRows = tableBody.getElementsByTagName('tr')
-  expect(tableRows).toHaveLength(13)
-});
-
-test("subRowHeaders are rendered", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    >
-      <AdvancedTable.Header />
-      <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
-    </AdvancedTable>
-    );
-
-  const kit = screen.getByTestId(testId);
-
-  const rowButton = kit.querySelector(".gray-icon.expand-toggle-icon")
-  rowButton.click()
-  
-  const subRowHeader = kit.querySelector(".custom-row.bg-silver")
-  expect(subRowHeader).toBeInTheDocument()
-});
-
-test("expandControl prop works as expected", () => {
-  render (<AdvancedTableExpandControl/>)
-
-  const kit = screen.getByTestId(testId);
-  const subRow = kit.querySelector(".bg-white.depth-sub-row-1")
-  expect(subRow).toBeInTheDocument()
-})
-
-test("tableOptions prop functions as expected", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-        tableOptions={tableOptions}
-    />
-  );
-
-  const kit = screen.getByTestId(testId);
-  const row1 = kit.getElementsByTagName('tr')[1]
-  
-  expect(row1.id).toBe("1-1-0-row")
-});
-
-test("tableProps prop functions as expected", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-        tableProps={tableProps}
-    />
-  );
-
-  const kit = screen.getByTestId(testId);
-  const table = kit.querySelector('table')
-  expect(table).toHaveClass("pb_table table-sm table-responsive-none data_table sticky-header ns_tabular")
 });
-
-test("enableExpansionIcon changes icon", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-        tableProps={tableProps}
-        toggleExpansionIcon= "chevron-up"
-    />
-  );
-
-  const kit = screen.getByTestId(testId);
-  const tableHead = kit.querySelector('table')
-  const toggleIcon= tableHead.querySelector(".pb_icon_kit")
-  expect(toggleIcon).toHaveClass("fa-chevron-up")
-});
-
-test("sortIcon changes icon", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-        tableProps={tableProps}
-    >
-      <AdvancedTable.Header 
-          enableSorting
-          sortIcon= {["chevron-up","chevron-down"]}
-      />
-      <AdvancedTable.Body />
-    </AdvancedTable>
-  );
-
-  const kit = screen.getByTestId(testId);
-  const sortIcon = kit.querySelector('.sort-button-icon')
-  const icon= sortIcon.querySelector(".pb_icon_kit")
-  expect(icon).toHaveClass("fa-chevron-down")
-});
-
-test("Sort icon renders with enableSorting + sortControl works as expected", () => {
-  render (<AdvancedTableSortControl/>)
-
-  const kit = screen.getByTestId(testId);
-  const sortIcon = kit.querySelector(".sort-button-icon")
-  expect(sortIcon).toBeInTheDocument()
-
-  const row1 = kit.getElementsByTagName('tr')[1]
-  
-  expect(row1.id).toBe("1-1-0-row")
-})
-
-test("sort button exists and sorts column data", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    >
-      <AdvancedTable.Header enableSorting />
-      <AdvancedTable.Body />
-    </AdvancedTable>
-  );
-
-  const kit = screen.getByTestId(testId);
-
-  const sortButton= kit.querySelector(".pb_flex_kit_orientation_row_justify_content_between_align_items_top_spacing_none.pl_xxs.cursor_pointer.header-sort-button.pb_th_link")
-  expect(sortButton).toBeInTheDocument()
-
-  const row1 = kit.getElementsByTagName('tr')[1]
-  
-  expect(row1.id).toBe("0-0-0-row")
-  sortButton.click()
-
-  const row2 = kit.getElementsByTagName('tr')[2]
-  expect(row2.id).toBe("0-0-0-row")
-}); 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md

@@ -1,12 +1,7 @@
-The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__: 
+The AdvancedTable kit takes the table data and automatically renders expandable subrows for nested items to any depth needed. In it's simplest form, the kit has two required props: 
 
-### tableData
+`tableData` is the data that the kit needs to consume to render the table. This data will take the structure of an array of objects where each object will be rendered as a row with the key/value pairs being the column values. If an object within that data has children, the kit will automatically create subRows with icon buttons on the parent rows to toggle the subRows open or closed. The toggleExpansionAll button in the first column header can also be used to toggle expansion for the top level parent rows. For a visual of the data structure needed for `tableData`, see [here](https://github.com/powerhome/playbook/blob/PBNTR-177-New-Advanced-Table-Kit/playbook/app/pb_kits/playbook/pb_advanced_table/README.md).
 
-`tableData` accepts an array of objects as the table data. Each object is a table row, and each key:value pair within an object is a column value within that row. Nested children within a data object are automatically rendered as subrows under their parent row. Each parent row is prepended with expansion controls for toggling its nested child rows. The `toggleExpansionAll` button in the first column header can also be used to toggle expansion of all parent rows within the table.
-
-For a visual of the data structure needed for `tableData`, see [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme).
-
-### columnDefinitions
 
 `columnDefinitions` maps to the columns prop on the Tanstack table. Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `ColumnDefinitions` in the AdvancedTable kit is a array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
 

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

@@ -35,15 +35,20 @@ const AdvancedTableSort = (props) => {
     },
   ];
 
+    //Render the subRow header rows
+    const subRowHeaders = ["Quarter", "Month", "Day"]
+
+
   return (
     <div>
       <AdvancedTable
           columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
           tableData={MOCK_DATA}
           {...props}
       >
         <AdvancedTable.Header enableSorting />
-        <AdvancedTable.Body />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders} />
       </AdvancedTable>
     </div>
   );

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

@@ -1,12 +1,6 @@
 examples:
   react:
-  - advanced_table_default: Default (Required Props)
-  - advanced_table_loading: Loading State
-  - advanced_table_sort: enable Sorting
-  - advanced_table_sort_control: Sort Control
-  - advanced_table_expanded_control: Expanded Control
-  - advanced_table_subrow_headers: SubRow Headers
-  - advanced_table_collapsible_trail: Collapsible Trail
-  - advanced_table_table_options: Table Options
-  - advanced_table_table_props: Table Props
-
+  - advanced_table_default: Default
+  # - advanced_table_sort: enableSorting
+  
+  

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

@@ -1,9 +1,2 @@
 export { default as AdvancedTableDefault } from './_advanced_table_default.jsx'
 export { default as AdvancedTableSort } from './_advanced_table_sort.jsx'
-export { default as AdvancedTableSortControl } from './_advanced_table_sort_control.jsx'
-export { default as AdvancedTableLoading } from './_advanced_table_loading.jsx'
-export { default as AdvancedTableExpandedControl } from './_advanced_table_expanded_control.jsx'
-export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_headers.jsx'
-export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
-export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
-export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss

@@ -55,12 +55,11 @@
   }
 
   .loading-toggle-icon {
-    width: $space_sm - 3;
-    height: $space_sm - 4;
-    margin-right: $space_xxs;
+    width: $space_sm - 1;
+    height: $space_sm - 1;
     margin-bottom: $space_xxs + 2;
     &::after {
-      height: $space_sm - 4;
+      height: $space_sm - 1;
       border-radius: $border_radius_rounded;
     }
   }

data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss

@@ -1,5 +1,5 @@
-@import "tokens/colors";
-@import "tokens/spacing";
+@import "./tokens/colors";
+@import "./tokens/spacing";
 
 [class^=pb_collapsible_kit] {
   padding: $space_md;

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss

@@ -1,5 +1,5 @@
 // Manual Import -- Flatpickr Styles
-@import "tokens/typography";
+@import "./tokens/typography";
 
 .flatpickr-calendar {
   background: transparent;

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

@@ -3,10 +3,12 @@
     <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
 </form>
 
-<%= javascript_tag do %>
-    document.addEventListener('DOMContentLoaded', function () {
-        document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
-            if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
+<% content_for(:pb_js) do %>
+    <%= javascript_tag do %>
+        document.addEventListener('DOMContentLoaded', function () {
+            document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
+                if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
+            })
         })
-    })
+    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -171,27 +171,29 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
 
     document.body.addEventListener(
       "click",
-      (e: MouseEvent) => {
-        const target = e.target as HTMLElement
-
+      ({ target }) => {
         const targetIsPopover =
-          target.closest("#" + targetId) !== null;
+          (target as HTMLElement).closest("#" + targetId) !==
+          null;
         const targetIsReference =
-          target.closest("#reference-" + targetId) !== null;
-
-        const shouldClose = () => {
-          setTimeout(() => shouldClosePopover(true), 0);
-        }
+          (target as HTMLElement).closest("#reference-" + targetId) !==
+          null;
 
         switch (closeOnClick) {
           case "outside":
-            if (!targetIsPopover && !targetIsReference) shouldClose();
+            if (!targetIsPopover && !targetIsReference) {
+              shouldClosePopover(true);
+            }
             break;
           case "inside":
-            if (targetIsPopover) shouldClose();
+            if (targetIsPopover) {
+              shouldClosePopover(true);
+            }
             break;
           case "any":
-            if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
+            if (targetIsPopover || !targetIsPopover && !targetIsReference) {
+              shouldClosePopover(true);
+            }
             break;
         }
       },

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

@@ -5,7 +5,6 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
-    - popover_actionable_content: With Actionable Content
 
   react:
     - popover_default: Default
@@ -13,4 +12,4 @@ examples:
     - popover_close: Close Options
     - popover_z_index: Set Z-Index
     - popover_scroll_height: Scroll and Height Settings
-    - popover_actionable_content: With Actionable Content
+    

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

@@ -3,4 +3,3 @@ export { default as PopoverList } from './_popover_list.jsx'
 export { default as PopoverClose } from './_popover_close.jsx'
 export { default as PopoverZIndex } from './_popover_z_index.jsx'
 export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
-export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'