playbook_ui 13.33.1 → 13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3368

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e1c022847164064a888eae5ec0664e37bf3bfa352884159303d093fa8cfe6d5e
-  data.tar.gz: 04f74d04da0122d153510b4b44268be3d4c22c70a6ddb539be0ce483ba0fd4ac
+  metadata.gz: 90f324b2179e17833cf8e1695de564917f391af912657d9dda8a786c80257e7b
+  data.tar.gz: f1a89fc72440a31bb9d221378143d11ac9a76fe2ad43228982efdbae27d43e93
 SHA512:
-  metadata.gz: f65e1607e01a68c4fc7246cfd325699398931b4e6a42ac859a49a6d763f8efdd9c422e397926aac968c028f8ad77f338cb0028df2c007162d43bde076bfc6f34
-  data.tar.gz: 847a1fb9bccb3dbbaca66cfe8a9d5e9f40cb81b5db45b4c0a4374d5f25b52267afc5402248820ecea28775ef2e8e42bc1aa9e28bfc1497f00187af22006a2569
+  metadata.gz: d7409e64547c61ea2620ca4e9495651234b4158b40e3b242727ef1e515b4806fde6170d2aee5bef3be471d5e54ba30516da51071c35ec1d6423b928df3df430d
+  data.tar.gz: 3f46a119a13bd37c843ba10f9f8d3797e02289552d693c0c5c159bcb7f9c70b2e332c4faae76e7808546de9555448063913a00f41d22738dc690aedc388d8682

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

@@ -21,6 +21,7 @@ type TableHeaderCellProps = {
   handleExpandOrCollapse?: () => void
   header?: Header<GenericObject, unknown>
   headerChildren?: React.ReactNode | React.ReactNode[]
+  isPinnedLeft?: boolean
   loading?: boolean
   sortIcon?: string | string[]
 } & GlobalProps
@@ -31,10 +32,11 @@ export const TableHeaderCell = ({
   handleExpandOrCollapse,
   header,
   headerChildren,
+  isPinnedLeft = false,
   loading,
   sortIcon,
 }: TableHeaderCellProps) => {
-  const { sortControl } = useContext(AdvancedTableContext)
+  const { sortControl, responsive } = useContext(AdvancedTableContext)
 
   const toggleSortButton = (event: React.SyntheticEvent) => {
     if (sortControl) {
@@ -49,7 +51,8 @@ export const TableHeaderCell = ({
 
 const cellClassName = classnames("table-header-cells", 
   `${isChrome() ? "chrome-styles" : ""}`, 
-  `${enableSorting ? "table-header-cells-active" : ""}`
+  `${enableSorting ? "table-header-cells-active" : ""}`,
+  { 'pinned-left': responsive === "scroll" && isPinnedLeft },
 )
 
 const cellId = `${loading ? 

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -20,6 +20,7 @@ type TableBodyProps = {
   className?: string
   collapsibleTrail?: boolean
   dark?: boolean
+  isPinnedLeft?: boolean,
   id?: string
   subRowHeaders?: string[]
 }
@@ -37,17 +38,22 @@ export const TableBody = ({
     columnDefinitions,
     enableToggleExpansion,
     handleExpandOrCollapse,
+    isPinnedLeft = false,
     inlineRowLoading,
     loading,
+    responsive,
     table,
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
     buildCss("pb_advanced_table_body"),
+    { 'pinned-left': responsive === "scroll" && isPinnedLeft },
     globalProps(props),
     className
   )
 
+  const columnPinning = table.getState().columnPinning;
+
   return (
     <>
       <tbody className={classes} 
@@ -73,38 +79,37 @@ export const TableBody = ({
                     table={table}
                 />
               )}
+            <tr
+                className={`${rowBackground ? "bg-silver" : "bg-white"} ${
+                  row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
+              }`}
+                id={`${row.index}-${row.id}-${row.depth}-row`}
+            >
+              {row.getVisibleCells().map((cell, i) => {
+                const isPinnedLeft = columnPinning.left.includes(cell.column.id)
 
-              <tr
-                  className={`${rowBackground ? "bg-silver" : "bg-white"} ${
-                    row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
-                  }`}
-                  id={`${row.index}-${row.id}-${row.depth}-row`}
-              >
-                {row.getVisibleCells().map((cell, i) => (
+                return (
                   <td
                       align="right"
-                      className={`${cell.id}-cell position_relative ${
-                      isChrome() ? "chrome-styles" : ""
-                      }`}
+                      className={classnames(
+                        `${cell.id}-cell`,
+                        isPinnedLeft && 'pinned-left',
+                        isChrome() ? "chrome-styles" : ""
+                      )}
                       key={`${cell.id}-data`}
                   >
-                    {collapsibleTrail &&
-                      i === 0 &&
-                      row.depth > 0 &&
-                      renderCollapsibleTrail(row.depth)}
+                    {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
                     <span id={`${cell.id}-span`}>
                       {loading ? (
                         <LoadingCell />
                       ) : (
-                        flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext()
-                        )
+                        flexRender(cell.column.columnDef.cell, cell.getContext())
                       )}
                     </span>
                   </td>
-                ))}
-              </tr>
+                )
+              })}
+            </tr>
 
               {/* Display LoadingInline if Row Data is querying and there are no children already */}
               {isDataLoading ? (

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -42,6 +42,7 @@ export const TableHeader = ({
     className
   )
 
+  const columnPinning = table.getState().columnPinning;
 
   return (
     <>
@@ -51,18 +52,22 @@ export const TableHeader = ({
         {/* Get the header groups (only one in this example) */}
         {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
           <tr key={`${headerGroup.id}-headerGroup`}>
-            {headerGroup.headers.map(header => (
-              <TableHeaderCell
-                  enableSorting={enableSorting}
-                  enableToggleExpansion={enableToggleExpansion}
-                  handleExpandOrCollapse={handleExpandOrCollapse}
-                  header={header}
-                  headerChildren={children}
-                  key={`${header.id}-header`}
-                  loading={loading}
-                  sortIcon={sortIcon}
-              />
-            ))}
+            {headerGroup.headers.map(header => {
+              const isPinnedLeft = columnPinning.left.includes(header.id)
+              return (
+                <TableHeaderCell
+                    enableSorting={enableSorting}
+                    enableToggleExpansion={enableToggleExpansion}
+                    handleExpandOrCollapse={handleExpandOrCollapse}
+                    header={header}
+                    headerChildren={children}
+                    isPinnedLeft={isPinnedLeft}
+                    key={`${header.id}-header`}
+                    loading={loading}
+                    sortIcon={sortIcon}
+                />
+              )
+            })}
           </tr>
         ))}
       </thead>

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

@@ -5,6 +5,8 @@
 @import "./scss_partials/loading";
 @import "./scss_partials/pseudo_states";
 @import "./scss_partials/chrome_styles";
+@import "../tokens/screen_sizes";
+@import "../tokens/shadows";
 
 .pb_advanced_table {
   $border-color: 1px solid $border_light !important;
@@ -108,6 +110,36 @@
     height: auto;
   }
 
+  // Responsive Styles
+  @media only screen and (max-width: $screen-xl-min) {  
+    &[class*="table-responsive-scroll"] {
+      display: block;
+      overflow-x: scroll;
+      width: 100%;
+      .table-header-cells:first-child,
+      td:first-child,
+      .pb_table_td:first-child,
+      [class*="pinned-left"] {
+          background-color: $white;
+          box-shadow: $shadow_deep !important;
+          position: sticky !important;
+          left: 0;
+          z-index: 2;
+      }
+      .bg-silver td:first-child {
+        background-color: lighten($silver, $opacity_7);
+      }
+      .bg-white td:first-child {
+          background-color: $white;
+      }
+    }
+  }
+  @media only screen and (min-width: $screen-xl-min) {
+    &[class*="table-responsive-scroll"] {
+      overflow-x: visible;
+    }
+  }
+
   &.dark {
     .bg-white {
       background: $bg_dark_card;
@@ -151,5 +183,28 @@
         ) !important;
       }
     }
+    // Dark Mode Responsive Styles
+    @media only screen and (max-width: $screen-xl-min) {
+      &[class*="table-responsive-scroll"] {
+        display: block;
+        overflow-x: scroll;
+        width: 100%;
+        .table-header-cells:first-child,
+        td:first-child,
+        .pb_table_td:first-child,
+        [class*="pinned-left"] {
+          background: $bg_dark_card;
+          border-right: $border_dark;
+          box-shadow: $shadow_deep !important;
+          position: sticky !important;
+        }
+        .bg-silver td:first-child {
+          background-color: $bg_dark;
+        }
+        .bg-white td:first-child {
+          background-color: $bg_dark_card;
+        }
+      }
+    }
   }
 }

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

@@ -42,6 +42,7 @@ type AdvancedTableProps = {
   loading?: boolean | string
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void
+  responsive?: "scroll" | "none",
   sortControl?: GenericObject
   tableData: GenericObject[]
   tableOptions?: GenericObject
@@ -66,6 +67,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     loading,
     onRowToggleClick,
     onToggleExpansionClick,
+    responsive = "scroll",
     sortControl,
     tableData,
     tableOptions,
@@ -132,7 +134,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   //Create column array in format needed by Tanstack
   const columns =
     columnDefinitions &&
-    columnDefinitions.map((column) => {
+      columnDefinitions.map((column) => {
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
@@ -209,6 +211,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss("pb_advanced_table"),
+    `table-responsive-${responsive}`,
     globalProps(props),
     className
   )
@@ -229,6 +232,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             handleExpandOrCollapse,
             inlineRowLoading,
             loading,
+            responsive,
             setExpanded,
             sortControl,
             table,

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

@@ -432,4 +432,34 @@ test("inlineRowLoading prop renders inline loading if true", () => {
   rowButton.click()
   const inlineLoading = kit.querySelector(".fa-spinner")
   expect(inlineLoading).toBeInTheDocument()
+})
+
+test("responsive prop functions as expected", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        responsive="scroll"
+        tableData={MOCK_DATA}
+        tableProps={tableProps}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass("pb_advanced_table table-responsive-scroll")
+})
+
+test("responsive none prop functions as expected", () => {
+  render(
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        data={{ testid: testId }}
+        responsive="none"
+        tableData={MOCK_DATA}
+        tableProps={tableProps}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
 })

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

@@ -0,0 +1,82 @@
+import React from "react"
+import { AdvancedTable } from "../.."
+import Title from '../../pb_title/_title'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableResponsive = (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",
+    },
+  ]
+
+  return (
+    <div>
+      <Title
+          size={4}
+          text="Not Responsive"
+          {...props}
+      />
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          responsive="none"
+          tableData={MOCK_DATA}
+          {...props}
+      />
+      <Title
+          paddingTop="sm"
+          size={4}
+          text="Responsive with Prop"
+          {...props}
+      />
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          responsive="scroll"
+          tableData={MOCK_DATA}
+          {...props}
+      />
+      <Title
+          paddingTop="sm"
+          size={4}
+          text="Responsive as Default"
+          {...props}
+      />
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableResponsive

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

@@ -14,3 +14,4 @@ examples:
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: Inline Row Loading
+  - advanced_table_responsive: Responsive Tables

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

@@ -7,4 +7,5 @@ export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_
 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'
-export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
+export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
+export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'

data/app/pb_kits/playbook/pb_background/background.html.erb

@@ -1,23 +1,14 @@
 <% if object.image_url.present? %>
-  <%= content_tag(object.tag,
-      aria: object.aria,
-      data: object.data,
-      id: object.id,
-      class: object.classname,
+  <%= pb_content_tag(object.tag,
       style: "background-image: url('#{object.image_url}');
               background-repeat: #{object.background_repeat};
               background-size: #{object.background_size};
               background-position: #{object.background_position};",
-      **combined_html_options
   ) do %>
     <%= content.presence %>
   <% end %>
 <% else %>
-  <%= content_tag(object.tag,
-      aria: object.aria,
-      data: object.data,
-      id: object.id,
-      class: object.classname,
+  <%= pb_content_tag(object.tag,
       style: object.custom_background_color
   ) do %>
     <%= content.presence %>

data/app/pb_kits/playbook/pb_body/body.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(object.tag,
-  aria: object.aria,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag(object.tag) do %>
   <%= object.content %>
 <% end %>

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do%>
+<%= pb_content_tag do%>
 <%= content_tag(object.link ? 'a' : 'span', class: 'bread_crumb_item', href: object.link) do %>
     <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:nav,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag(:nav) do %>
       <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_caption/caption.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(object.tag,
-  aria: object.aria,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag(object.tag) do %>
   <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_card/card.html.erb

@@ -1,10 +1,4 @@
-<%= content_tag(object.tag,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    dark: object.dark,
-    **combined_html_options) do %>
+<%= pb_content_tag(object.tag) do %>
     <%= content.presence %>
 <% end %>
 

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

@@ -18,7 +18,7 @@
     height: auto;
   }
   .icon_wrapper:hover {
-      color: $primary
+      color: $primary_action_dark
   }
 
   .dark {

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

@@ -19,7 +19,7 @@ const CollapsibleColor = (props) => (
       </Collapsible.Content>
     </Collapsible>
     <Collapsible
-        iconColor='light'
+        iconColor='lighter'
         marginBottom="xs"
     >
       <Collapsible.Main>
@@ -34,7 +34,7 @@ const CollapsibleColor = (props) => (
       </Collapsible.Content>
     </Collapsible>
     <Collapsible
-        iconColor='lighter'
+        iconColor='light'
         marginBottom="xs"
     >
       <Collapsible.Main>

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

@@ -1,72 +1,71 @@
 import React from 'react'
-import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
+import PropTypes from 'prop-types'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from '../..'
 
-const CollapsibleCustomMain = () => {
+const CollapsibleCustomMain = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)
 
   return (
-  <>
-    <Collapsible
-        collapsed={isCollapsed}
-    >
-          <Background 
-              backgroundColor="white" 
-              cursor="pointer"
-              htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
-              position="sticky" 
-              top="0" 
-          >
-              <Flex 
-                  align="center" 
-                  gap="sm"
-                  justify="between" 
-              >
-                <Title 
-                    size={4} 
-                    text="Custom Main Section" 
-                />
-              </Flex>
-          </Background>
-      <Collapsible.Content padding="none">
+    <>
+      <Collapsible collapsed={isCollapsed}>
+        <Flex
+            align="center"
+            cursor="pointer"
+            gap="sm"
+            htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
+            justify="between"
+            position="sticky"
+            top="0"
+        >
+          <Title 
+              dark={props.dark} 
+              size={4} 
+              text="Custom Main Section" />
+        </Flex>
+        <Collapsible.Content 
+            padding="none">
           <div>
-          <List>
+            <List>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
             </List>
           </div>
       </Collapsible.Content>
     </Collapsible>
-   
   </>
   )
 }
 
+CollapsibleCustomMain.propTypes = {
+  dark: PropTypes.bool,
+}
+
 export default CollapsibleCustomMain

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_rails.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
-    <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
+    <%= pb_rails("flex", props: { position: "sticky", top: "0", cursor: "pointer", data: { "collapsible-main": "true", align: "center", gap: "sm", justify: "between" } }) do %>
       <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
         <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
      <% end %>
@@ -16,4 +16,5 @@
             <% end %>
       <% end %>
     <% end %>
-    
+
+