playbook_ui 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2023 → 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2035

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7de4a52108e01951e999ec72a392167e7ca613eedc6b2460454cea0fb265fcf8
-  data.tar.gz: 33e05379b7d7004b6943995d1710a1b91a844942710e2c8ca62dbc6e6bbbda0c
+  metadata.gz: 175ddacedbfec513a95b37bf13a61333a099bd30e8421e4860f71c0388f11f1a
+  data.tar.gz: 72d03981d777dc247c76e68999859037ade97c566e696afc8b55b237ef5ac9dd
 SHA512:
-  metadata.gz: 4e8d2d44b46b465a9d3cf4e954d0621abfc2da9cef8b9004f1d5e7e535f37bc57b8f4d54c46e26a2a4a79721c7e36e991ba9902170740b6ffe76f27a6becf207
-  data.tar.gz: 9e2878d9346444289f740ae5f3804c871e02d7c49f6283351768e68ffbfd0f19d6215eba7ee897cdb947ca332a2d802cd40ce8d5f118ff07b176707c0a1c9add
+  metadata.gz: 802f5962c3902b281230c7679161ebd2299befb957ebc27595e423be42bbe2a28791524dbc038fbb3ff345d4899daaa47ea72da30390f616bd7e5781cc0ad8e3
+  data.tar.gz: 949b717b13f2ac5f2c1e5627e79df7c99e0a3568c8c19b804a65056abf7a7d18d756cefd5149a9bf10bbf27d9c09f4764242aa98f870b814fe994a4e382c790c

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

@@ -4,7 +4,7 @@ import React from "react"
 const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
   const style: { [key: string]: string | number } = {
     position: "absolute",
-    left: `${leftOffset}rem`,
+    left: `${leftOffset}em`,
     top: 0,
     bottom: 0,
     width: "2px",
@@ -19,8 +19,8 @@ export const renderCollapsibleTrail = (currentDepth: number) => {
   const lines = []
   for (let i = 1; i <= currentDepth; i++) {
     // Calculate leftOffset with additional 0.4rem for each depth level above 1
-    const additionalOffset = i > 1 ? (i - 1) * 0.4 : 0
-    const leftOffset = i * 1.6 + additionalOffset
+    const additionalOffset = i > 1 ? (i - 1) * 0.25 : 0
+    const leftOffset = i * 1.0 + additionalOffset
     lines.push(<CollapsibleTrail key={i} 
         leftOffset={leftOffset} 
                />

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

@@ -31,7 +31,7 @@ export const CustomCell = ({
   };
 
   return (
-    <div style={{ paddingLeft: `${row.depth * 2}rem` }}>
+    <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
       <Flex alignItems="center" 
           columnGap="xs"
           orientation="row"
@@ -42,11 +42,14 @@ export const CustomCell = ({
               onClick={() => handleOnExpand(row)}
           >
             {row.getIsExpanded() ? (
-              <Icon icon="circle-play" 
+              <Icon cursor="pointer"
+                  icon="circle-play"
                   rotation={90}
               />
             ) : (
-              <Icon icon="circle-play" />
+              <Icon cursor="pointer"
+                  icon="circle-play"    
+               />
             )}
           </button>
         ) : null}

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

@@ -13,13 +13,13 @@ export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
   return (
     <>
       {header.column.getIsSorted() === "desc" ? (
-        <div className="year-sort-icon" 
+        <div className="sort-button-icon" 
             key={displayIcon(sortIcon)[0]}
         >
           <Icon icon={displayIcon(sortIcon)[0]} />
         </div>
       ) : (
-        <div className="year-sort-icon" 
+        <div className="sort-button-icon" 
             key={displayIcon(sortIcon)[1]}
         >
           <Icon icon={displayIcon(sortIcon)[1]} />

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

@@ -38,7 +38,7 @@ export const SubRowHeaderRow = ({
           colSpan={1}
       >
         {collapsibleTrail && row.depth > 0 && renderCollapsibleTrail(row.depth)}
-        <div style={{ paddingLeft: `${row.depth * 2}rem` }}>
+        <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
           <Flex align="center" 
               columnGap="xs"
           >

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

@@ -14,7 +14,7 @@ export const ToggleIconButton = ({ row, onClick }: ToggleIconButtonProps) => {
   const { toggleExpansionIcon } = useContext(AdvancedTableContext)
   return (
     <button
-        className="gray-icon time-period-toggle-icon"
+        className="gray-icon toggle-all-icon"
         key={displayIcon(toggleExpansionIcon)[0]}
         onClick={() => onClick(row)}
     >

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

@@ -46,12 +46,12 @@
     @extend %primary-color-pseudo;
   }
 
-  .year-sort-icon {
+  .sort-button-icon {
     @extend .button-icon;
     padding: 2px;
   }
 
-  .time-period-toggle-icon {
+  .toggle-all-icon {
     @extend .button-icon;
     @extend %primary-color-pseudo;
     padding: 2px 0;

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

@@ -0,0 +1,57 @@
+import React from "react";
+import { AdvancedTable } from "../..";
+import { MOCK_DATA } from "./_mock_data";
+
+const AdvancedTableSort = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ];
+
+    //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 subRowHeaders={subRowHeaders} />
+      </AdvancedTable>
+    </div>
+  );
+};
+
+export default AdvancedTableSort;

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

@@ -1,5 +1,6 @@
 examples:
   react:
   - advanced_table_default: Default
+  - advanced_table_sort: All in One
   
   

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

@@ -1 +1,2 @@
 export { default as AdvancedTableDefault } from './_advanced_table_default.jsx'
+export { default as AdvancedTableSort } from './_advanced_table_sort.jsx'

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.16.0"
-  VERSION = "13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2023"
+  VERSION = "13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2035"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2023
+  version: 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2035
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-01-29 00:00:00.000000000 Z
+date: 2024-01-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -289,6 +289,7 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_description.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js
 - app/pb_kits/playbook/pb_advanced_table/docs/example.yml