playbook_ui 14.10.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5137 → 14.10.0.pre.alpha.play1662cssbargraph5193

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f8792edbc1bba55bdb026a17142b4ec1eda307af7043e0ab9900ea3e92a78bf
-  data.tar.gz: 574614453f812f73b094fa52f2ce793b73f880630c94cd813e7c63f2ce5ad891
+  metadata.gz: f2e1aaf2cadccd158fb55ca05342e3dfefd6e2614dc37d220086b342e5df4340
+  data.tar.gz: fc03a93a9cc11765508190229426d34d507306ebf46aff0efe5ec23bb65ddb32
 SHA512:
-  metadata.gz: dfef0aea6e35c15c7876b205c5103191b233bad3346654f2b1312557d3d79420e56939752fbb4b09d627ecd2b0b6d0c19bac23b5325f6a14a03c742120245cd8
-  data.tar.gz: c33eb3ac3b988bfbbfd02d8088cd91dcdbe81f92457c94739910653202337a355ff15a79b8c27244ebbbe507e44563039fde131eb3dfc62034548ccdc75dda5b
+  metadata.gz: 88632df2e8dd9a501cd6d97a0bc60213d11a1a4f3e3b063c9318a83267177403c02adb69e60c69344c07c91e7a1915f8a3954069c8682839d8787879b3208219
+  data.tar.gz: 03f3eec3ebd3da933b162a985c72fde36109c4f2e01ad4d732f73cf27a1eae8fb633823af6859f659470d0dca062b8f1dba1777e172a05be30af19b19cc063a4

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

@@ -40,46 +40,59 @@ export const TableHeaderCell = ({
 
   const toggleSortButton = (event: React.SyntheticEvent) => {
     if (sortControl) {
-      const sortIsDesc = header.column.getIsSorted() === "desc"
+      const sortIsDesc = header?.column.getIsSorted() === "desc"
       sortIsDesc
         ? sortControl.onChange({ desc: true })
         : sortControl.onChange({ desc: false })
     } else {
-      header.column.getToggleSortingHandler()(event)
+      header?.column.getToggleSortingHandler()(event)
     }
   }
 
-const cellClassName = classnames("table-header-cells", 
-  `${isChrome() ? "chrome-styles" : ""}`, 
+  const isLeafColumn =
+  header?.column.getLeafColumns().length === 1 &&
+  header?.column.getLeafColumns()[0].id === header.column.id
+
+  const isLastHeaderCell =
+    header?.column.parent?.columns.at(-1) === header?.column ||
+    (header?.colSpan > 1 && header?.column.parent !== undefined);
+ 
+const cellClassName = classnames(
+  "table-header-cells",
+  `${isChrome() ? "chrome-styles" : ""}`,
   `${enableSorting ? "table-header-cells-active" : ""}`,
-  { 'pinned-left': responsive === "scroll" && isPinnedLeft },
-)
+  { "pinned-left": responsive === "scroll" && isPinnedLeft },
+   isLastHeaderCell ? "last-header-cell" : ""
+); 
 
 const cellId = `${loading ? 
-    `loading-${header.id}`
-    : `${header.id}`
+    `loading-${header?.id}`
+    : `${header?.id}`
 }`
 
 const isToggleExpansionEnabledLoading =
-  header.index === 0 &&
+  header?.index === 0 &&
   loading &&
   (enableToggleExpansion === "all" || "header") &&
   enableToggleExpansion !== "none"
   
 const isToggleExpansionEnabled =
-  header.index === 0 &&
+  header?.index === 0 &&
   !loading &&
   (enableToggleExpansion === "all" || "header") &&
   enableToggleExpansion !== "none"
 
+const justifyHeader = isLeafColumn ? "end" : "center"
+
   return (
     <th
         align="right"
         className={cellClassName}
+        colSpan={header?.colSpan}
         id={cellId}
-        key={`${header.id}-header`}
+        key={`${header?.id}-header`}
     >
-      {header.isPlaceholder ? null : headerChildren && header.index === 0 ? (
+      {header?.isPlaceholder ? null : headerChildren && header?.index === 0 ? (
         <Flex alignItems="center">
           {headerChildren}
           <div>
@@ -89,7 +102,7 @@ const isToggleExpansionEnabled =
       ) : (
         <Flex
             alignItems="center"
-            justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
+            justify={header?.index === 0 && enableSorting ? "between" : header?.index === 0 && !enableSorting ? "start" : justifyHeader}
         >
           {isToggleExpansionEnabled && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
@@ -100,11 +113,11 @@ const isToggleExpansionEnabled =
             )}
 
           <Flex
-              className={`${header.index === 0 &&
+              className={`${header?.index === 0 &&
                 enableSorting &&
                 "header-sort-button pb_th_link"}`}
-              cursor={header.index === 0 && enableSorting ? "pointer" : "default"}
-              {...(header.index === 0 &&
+              cursor={header?.index === 0 && enableSorting ? "pointer" : "default"}
+              {...(header?.index === 0 &&
                 enableSorting && {
                   htmlOptions: {
                     onClick: (event: React.MouseEvent) => toggleSortButton(event),
@@ -116,14 +129,14 @@ const isToggleExpansionEnabled =
                     tabIndex: 0,
                   },
                 })}
-              justify={header.index === 0 && enableSorting ? "between" : "none"}
+              justify={header?.index === 0 && enableSorting ? "between" : "none"}
               paddingLeft={enableSorting ? "xxs" : "xs"}
           >
             <div>
-              {flexRender(header.column.columnDef.header, header.getContext())}
+              {flexRender(header?.column.columnDef.header, header?.getContext())}
             </div>
 
-            {header.index === 0 &&
+            {header?.index === 0 &&
               header.column.getCanSort() &&
               enableSorting &&
               (loading ? (

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

@@ -86,6 +86,7 @@ export const TableBody = ({
             >
               {row.getVisibleCells().map((cell, i) => {
                 const isPinnedLeft = columnPinning.left.includes(cell.column.id)
+                const isLastCell = cell.column.parent?.columns.at(-1)?.id === cell.column.id
 
                 return (
                   <td
@@ -93,7 +94,8 @@ export const TableBody = ({
                       className={classnames(
                         `${cell.id}-cell position_relative`,
                         isChrome() ? "chrome-styles" : "",
-                        isPinnedLeft && 'pinned-left'
+                        isPinnedLeft && 'pinned-left',
+                        isLastCell && 'last-cell',
                       )}
                       key={`${cell.id}-data`}
                   >

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

@@ -31,6 +31,43 @@
     min-width: 180px;
   }
 
+  .pb_advanced_table_header {
+    > tr:not(:first-child) {
+      .last-header-cell {
+        border-right: 1px solid $border_light !important;
+      }
+    
+      th {
+        border-radius: 0px !important;
+        border-width: 0 0 1px 0 !important;
+      }
+      th:first-child {
+        border-left-width: 1px !important;
+        @media only screen and (max-width: $screen-xl-min) {
+          border-left-width: 0 !important;
+        }
+      }
+      th:last-child {
+        border-right-width: 1px !important;
+        @media only screen and (max-width: $screen-xl-min) {
+          border-right-width: 0 !important;
+        }
+      }
+    }
+    th[colspan]:not([colspan="1"]) {
+      border-right: 1px solid $border_light;
+    }
+
+  
+  }
+
+  .pb_advanced_table_body {
+    .last-cell {
+      border-right: 1px solid $border_light !important;
+    }
+  }
+
+
   .table-header-cells-active:first-child {
     color: $primary !important;
   }

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

@@ -142,27 +142,41 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }
     return columnCells
   }
-//Create column array in format needed by Tanstack
-  const columns =
-    columnDefinitions &&
+
+  const buildColumns = (columnDefinitions: GenericObject[]): any => {
+    return (
+      columnDefinitions &&
       columnDefinitions.map((column, index) => {
-      // Define the base column structure
-      const columnStructure = {
-        ...columnHelper.accessor(column.accessor, {
-          header: column.label,
-        }),
-      }
+        //Checking to see if grouped column or not
+        if (column.columns && column.columns.length > 0) {
+          return {
+            header: column.label || "",
+            columns: buildColumns(column.columns),
+          };
+        } else {
+          // Define the base column structure
+          const columnStructure = {
+            ...columnHelper.accessor(column.accessor, {
+              header: column.label || "",
+            }),
+          };
 
-  if (column.cellAccessors || column.customRenderer) {
-    columnStructure.cell = createCellFunction(
-      column.cellAccessors,
-      column.customRenderer,
-      index
-    )
-  }
+          if (column.cellAccessors || column.customRenderer) {
+            columnStructure.cell = createCellFunction(
+              column.cellAccessors,
+              column.customRenderer,
+              index
+            );
+          }
+
+          return columnStructure;
+        }
+      })
+    );
+  };
 
-  return columnStructure
-})
+  //Create column array in format needed by Tanstack
+  const columns = buildColumns(columnDefinitions);
 
   //Syntax for sorting Array if we want to manage state ourselves
   const sorting = [

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

@@ -0,0 +1,60 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnHeaders = (props) => {
+  const columnDefinitions = [
+    {
+      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",
+        },
+      ],
+    },
+  ];
+  
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default AdvancedTableColumnHeaders

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

@@ -0,0 +1 @@
+Use a nested `columns` array in your columnDefinitions to create multiple header rows. Any column with `columns` is treated as a grouped header, and its child columns are displayed beneath it.

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

@@ -0,0 +1,74 @@
+import React from "react";
+import { AdvancedTable } from "playbook-ui";
+import MOCK_DATA from "./advanced_table_mock_data.json";
+
+const AdvancedTableColumnHeadersMultiple = (props) => {
+  const columnDefinitions = [
+    {
+      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 (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </>
+  );
+};
+
+export default AdvancedTableColumnHeadersMultiple;

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

@@ -0,0 +1 @@
+Multiple levels of column headers can also be rendered as seen here.

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

@@ -21,3 +21,5 @@ examples:
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props
+  - advanced_table_column_headers: Multi-Header Columns
+  - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)

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

@@ -12,3 +12,5 @@ export { default as AdvancedTableResponsive } from './_advanced_table_responsive
 export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
 export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
 export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
+export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
+export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx

@@ -20,6 +20,7 @@ type CircleIconButtonProps = {
   onClick?: React.MouseEventHandler<HTMLElement>,
   newWindow?: boolean,
   type?: 'button' | 'submit' | 'reset' | undefined,
+  target?: string
   variant?: 'primary' | 'secondary' | 'link',
 }
 
@@ -36,6 +37,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
     loading = false,
     onClick = noop,
     type,
+    target,
     link,
     newWindow,
     variant,
@@ -66,6 +68,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
           loading={loading}
           newWindow={newWindow}
           onClick={onClick}
+          target={target}
           text={null}
           variant={variant}
       >

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb

@@ -1,5 +1,5 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
+  <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, target: object.target, disabled: object.disabled, dark: object.dark}) do %>
     <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -17,6 +17,7 @@ module Playbook
       prop :link
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
+      prop :target
       def classname
         generate_classname("pb_circle_icon_button_kit")
       end

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb

@@ -10,3 +10,11 @@
   link: "https://google.com",
   new_window: true
 }) %>
+<br/>
+<%= pb_rails("circle_icon_button", props: {
+  icon: "info",
+  variant: "secondary",
+  aria: { label: "Link to Playbook in new window" },
+  link: "https://playbook.powerapp.cloud/",
+  target: "child"
+}) %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx

@@ -21,6 +21,15 @@ const CircleIconButtonLink = (props) => (
         {...props}
     />
 
+    <br/>
+
+    <CircleIconButton
+        aria={{ label: "Link to Playbook in new window" }}
+        icon="info"
+        link="https://playbook.powerapp.cloud/"
+        target="child"
+        variant="secondary"
+    />
   </div>
 )
 

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md

@@ -0,0 +1 @@
+The `link` prop accepts a string that is used as an href value and causes the button to act as a link. The default behavior of a link is to open in the current window. You can optionally alter the link behavior by adding the `newWindow` prop (boolean), which will open the link in a new window, or by calling the `target` prop, which accepts `_self`, `_blank`, `_parent`, `_top`, `child`, or any string, allowing you to specify any link target.

data/app/pb_kits/playbook/pb_dashboard/BarGraphStyles.scss

@@ -0,0 +1,53 @@
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import url("https://code.highcharts.com/css/highcharts.css");
+// @import "highcharts/css/highcharts";
+// @import "highcharts/highcharts.css";
+
+:root {
+    --highcharts-color-0: #{$data_1};
+    --highcharts-color-1: #{$data_2};
+    --highcharts-color-2: #{$data_3};
+    --highcharts-color-3: #{$data_4};
+    --highcharts-color-4: #{$data_5};
+    --highcharts-color-5: #{$data_6};
+    --highcharts-color-6: #{$data_7};
+    --highcharts-color-7: #{$data_8};
+}
+
+.highcharts-title {
+    font-family: $font_family_base;
+    font-weight: $bold;
+    font-size: $heading_3;
+    color: $text_lt_default;
+    fill: $text_lt_default;
+}
+
+.highcharts-subtitle {
+    font-family: $font_family_base;
+    color: $text_lt_light;
+    fill: $text_lt_light;
+    font-weight: $regular;
+    font-size: $text_base;
+}
+
+.highcharts-yaxis > .highcharts-axis-title {
+    color: $text_lt_lighter;
+    fill: $text_lt_lighter;
+    font-family: $font_family_base;
+    font-weight: $bold;
+    font-size: $text_smaller;
+}
+
+.highcharts-axis-labels {
+    font-family: $font_family_base;
+    color: $text_lt_lighter;
+    fill: $text_lt_lighter;
+    font-weight: $bold;
+    font-size: $text_smaller;
+}
+
+.highcharts-grid-line {
+    stroke: $border_light;
+}
+