playbook_ui 13.16.0.pre.alpha.powercentrainplaybookpt22125 → 13.16.0

data/dist/reset.css

@@ -1,2 +1,2 @@
-*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Power Centra","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:15.5px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:.003em;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
+*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
 

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "13.16.0"
-  VERSION = "13.16.0.pre.alpha.powercentrainplaybookpt22125"
+  PREVIOUS_VERSION = "13.15.0"
+  VERSION = "13.16.0"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.16.0.pre.alpha.powercentrainplaybookpt22125
+  version: 13.16.0
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-02-13 00:00:00.000000000 Z
+date: 2024-01-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -269,48 +269,6 @@ files:
 - app/pb_kits/playbook/_playbook.scss
 - app/pb_kits/playbook/_reset.scss
 - app/pb_kits/playbook/index.js
-- app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx
-- app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx
-- app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx
-- app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx
-- app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx
-- app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx
-- app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx
-- app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx
-- app/pb_kits/playbook/pb_advanced_table/README.md
-- app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx
-- app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx
-- app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx
-- app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx
-- app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx
-- app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts
-- app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss
-- app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx
-- app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md
-- 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_expanded_control.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md
-- 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
-- app/pb_kits/playbook/pb_advanced_table/docs/index.js
-- app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss
-- app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss
 - app/pb_kits/playbook/pb_avatar/_avatar.scss
 - app/pb_kits/playbook/pb_avatar/_avatar.tsx
 - app/pb_kits/playbook/pb_avatar/avatar.html.erb
@@ -2835,7 +2793,7 @@ homepage: https://playbook.powerapp.cloud/
 licenses:
 - ISC
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -2846,12 +2804,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
-signing_key: 
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []

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

@@ -1,30 +0,0 @@
-import React from "react"
-
-//CollapsibleTrail component
-const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
-  const style: { [key: string]: string | number } = {
-    position: "absolute",
-    left: `${leftOffset}em`,
-    top: 0,
-    bottom: 0,
-    width: "2px",
-    backgroundColor: "#E4E8F0",
-  }
-
-  return <div style={style} />
-}
-
-// Updated function to render multiple trails depending on depth
-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.25 : 0
-    const leftOffset = i * 1.0 + additionalOffset
-    lines.push(<CollapsibleTrail key={i} 
-        leftOffset={leftOffset} 
-               />
-              )
-  }
-  return lines
-}

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

@@ -1,62 +0,0 @@
-import React, { useContext } from "react";
-
-import Flex from "../../pb_flex/_flex";
-import FlexItem from "../../pb_flex/_flex_item";
-import Icon from "../../pb_icon/_icon";
-import { GlobalProps } from "../../utilities/globalProps";
-
-import { Getter, Row } from "@tanstack/react-table";
-import { DataType } from "../Utilities/types";
-import AdvancedTableContext from "../Context/AdvancedTableContext";
-
-interface CustomCellProps {
-  getValue?: Getter<string>;
-  onRowToggleClick?: (arg: Row<DataType>) => void;
-  row: Row<DataType>;
-  value?: string;
-} 
-
-export const CustomCell = ({
-  getValue,
-  onRowToggleClick,
-  row,
-  value,
-}: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded } = useContext(AdvancedTableContext);
-  const RowWithoutChildren = row.originalSubRows === undefined;
-
-  const handleOnExpand = (row: Row<DataType>) => {
-    onRowToggleClick && onRowToggleClick(row);
-    setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
-  };
-
-  return (
-    <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
-      <Flex alignItems="center" 
-          columnGap="xs"
-          orientation="row"
-      >
-        {!RowWithoutChildren ? (
-          <button
-              className="gray-icon expand-toggle-icon"
-              onClick={() => handleOnExpand(row)}
-          >
-            {row.getIsExpanded() ? (
-              <Icon cursor="pointer"
-                  icon="circle-play"
-                  rotation={90}
-              />
-            ) : (
-              <Icon cursor="pointer"
-                  icon="circle-play"    
-               />
-            )}
-          </button>
-        ) : null}
-        <FlexItem paddingLeft={!RowWithoutChildren ? "none" : "xs"}>
-          {row.depth === 0 ? getValue() : value}
-        </FlexItem>
-      </Flex>
-    </div>
-  );
-};

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

@@ -1,5 +0,0 @@
-import React from "react"
-
-export const LoadingCell = () => {
-  return <div className="loading-cell" />
-}

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

@@ -1,30 +0,0 @@
-import React from "react"
-import Icon from "../../pb_icon/_icon"
-import { Header } from "@tanstack/react-table"
-import { DataType } from "../Utilities/types"
-import { displayIcon } from "../Utilities/IconHelpers"
-
-type SortIconButtonProps = {
-  header: Header<DataType, unknown>
-  sortIcon?: string | string[]
-}
-export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
-
-  return (
-    <>
-      {header.column.getIsSorted() === "desc" ? (
-        <div className="sort-button-icon" 
-            key={displayIcon(sortIcon)[0]}
-        >
-          <Icon icon={displayIcon(sortIcon)[0]} />
-        </div>
-      ) : (
-        <div className="sort-button-icon" 
-            key={displayIcon(sortIcon)[1]}
-        >
-          <Icon icon={displayIcon(sortIcon)[1]} />
-        </div>
-      )}
-    </>
-  )
-}

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

@@ -1,61 +0,0 @@
-import React from "react"
-import Flex from "../../pb_flex/_flex"
-import Caption from "../../pb_caption/_caption"
-import { Row, Table } from "@tanstack/react-table"
-
-import { ToggleIconButton } from "./ToggleIconButton"
-import { renderCollapsibleTrail } from "./CollapsibleTrail"
-
-import { isChrome } from "../Utilities/BrowserCheck"
-import { DataType } from "../Utilities/types"
-import { GlobalProps } from "../../utilities/globalProps"
-
-interface SubRowHeaderRowProps {
-  collapsibleTrail?: boolean
-  enableToggleExpansion?: "all" | "header"
-  onClick: (row: Row<DataType>) => void
-  row: Row<DataType>
-  subRowHeaders?: string[]
-  table: Table<DataType>
-}
-
-export const SubRowHeaderRow = ({
-  collapsibleTrail,
-  enableToggleExpansion,
-  onClick,
-  row,
-  subRowHeaders,
-  table,
-}: SubRowHeaderRowProps & GlobalProps) => {
-  const numberOfColumns = table.getAllFlatColumns().length
-
-  return (
-    <tr className="custom-row bg-silver">
-      <td
-          className={`custom-row-first-column ${
-          isChrome() ? "chrome-styles" : ""
-          }`}
-          colSpan={1}
-      >
-        {collapsibleTrail && row.depth > 0 && renderCollapsibleTrail(row.depth)}
-        <div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
-          <Flex align="center" 
-              columnGap="xs"
-          >
-            {enableToggleExpansion === "all" && row.getCanExpand() ? (
-              <ToggleIconButton onClick={onClick} 
-                  row={row}
-              />
-            ) : null}
-            <Caption
-                marginLeft={row.getCanExpand() ? "none" : "xs"}
-                text={subRowHeaders[row.depth - 1]}
-            />
-          </Flex>
-        </div>
-      </td>
-
-      <td colSpan={numberOfColumns - 1} />
-    </tr>
-  )
-}

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

@@ -1,127 +0,0 @@
-import React, { useContext } from "react"
-import classnames from "classnames";
-import Flex from "../../pb_flex/_flex"
-import { flexRender, Header } from "@tanstack/react-table"
-
-import { SortIconButton } from "./SortIconButton"
-import { ToggleIconButton } from "./ToggleIconButton"
-import { isChrome } from "../Utilities/BrowserCheck"
-import { DataType } from "../Utilities/types"
-import AdvancedTableContext from "../Context/AdvancedTableContext"
-import { GlobalProps } from "../../utilities/globalProps"
-
-type TableHeaderCellProps = {
-  enableSorting?: boolean
-  enableToggleExpansion?: "all" | "header"
-  handleExpandOrCollapse?: () => void
-  header?: Header<DataType, unknown>
-  headerChildren?: React.ReactNode | React.ReactNode[]
-  headerId?: string
-  loading?: boolean
-  sortIcon?: string | string[]
-} & GlobalProps
-
-export const TableHeaderCell = ({
-  enableSorting,
-  enableToggleExpansion,
-  handleExpandOrCollapse,
-  header,
-  headerChildren,
-  headerId,
-  loading,
-  sortIcon,
-}: TableHeaderCellProps) => {
-  const { sortControl } = useContext(AdvancedTableContext)
-
-  const toggleSortButton = (event: React.SyntheticEvent) => {
-    if (sortControl) {
-      const sortIsDesc = header.column.getIsSorted() === "desc"
-      sortIsDesc
-        ? sortControl.onChange({ desc: true })
-        : sortControl.onChange({ desc: false })
-    } else {
-      header.column.getToggleSortingHandler()(event)
-    }
-  }
-
-const cellClassName = classnames("table-header-cells", 
-  `${isChrome() ? "chrome-styles" : ""}`, 
-  `${enableSorting ? "table-header-cells-active" : ""}`
-);
-
-const cellId = `${loading ? 
-    `loading-${header.id}${headerId ? `-${headerId}` : ""}`
-    : `${header.id}${headerId ? `-${headerId}` : ""}`
-}`;
-
-  return (
-    <th
-        align="right"
-        className={cellClassName}
-        id={cellId}
-        key={`${header.id}-header`}
-    >
-      {header.isPlaceholder ? null : headerChildren && header.index === 0 ? (
-        <Flex alignItems="center">
-          {headerChildren}
-          <div>
-            {flexRender(header.column.columnDef.header, header.getContext())}
-          </div>
-        </Flex>
-      ) : (
-        <Flex
-            alignItems="center"
-            justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
-        >
-          {header.index === 0 &&
-            !loading &&
-            (enableToggleExpansion === "all" || "header") && (
-              <ToggleIconButton onClick={handleExpandOrCollapse} />
-            )}
-
-          {header.index === 0 &&
-            loading &&
-            (enableToggleExpansion === "all" || "header") && (
-              <div className="loading-toggle-icon header-toggle-icon" />
-            )}
-
-          <Flex
-              className={`${header.index === 0 &&
-                enableSorting &&
-                "header-sort-button pb_th_link"}`}
-              cursor={header.index === 0 && enableSorting ? "pointer" : "default"}
-              {...(header.index === 0 &&
-                enableSorting && {
-                  htmlOptions: {
-                    onClick: (event: React.MouseEvent) => toggleSortButton(event),
-                    onKeyDown: (event: React.KeyboardEvent) => {
-                      if (event.key === "Enter") {
-                        toggleSortButton(event)
-                      }
-                    },
-                    tabIndex: 0,
-                  },
-                })}
-              justify={header.index === 0 && enableSorting ? "between" : "none"}
-              paddingLeft={enableSorting ? "xxs" : "xs"}
-          >
-            <div>
-              {flexRender(header.column.columnDef.header, header.getContext())}
-            </div>
-
-            {header.index === 0 &&
-              header.column.getCanSort() &&
-              enableSorting &&
-              (loading ? (
-                <div className="loading-toggle-icon" />
-              ) : (
-                <SortIconButton header={header} 
-                    sortIcon={sortIcon} 
-                />
-              ))}
-          </Flex>
-        </Flex>
-      )}
-    </th>
-  )
-}

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

@@ -1,28 +0,0 @@
-import React, { useContext } from "react"
-import Icon from "../../pb_icon/_icon"
-import { Row } from "@tanstack/react-table"
-import AdvancedTableContext from "../Context/AdvancedTableContext"
-import { DataType } from "../Utilities/types"
-import { displayIcon } from "../Utilities/IconHelpers"
-
-interface ToggleIconButtonProps {
-  onClick: (row: Row<DataType>) => void
-  row?: Row<DataType>
-}
-
-export const ToggleIconButton = ({ row, onClick }: ToggleIconButtonProps) => {
-  const { toggleExpansionIcon } = useContext(AdvancedTableContext)
-  return (
-    <button
-        className="gray-icon toggle-all-icon"
-        key={displayIcon(toggleExpansionIcon)[0]}
-        onClick={() => onClick(row)}
-    >
-      <Icon
-          cursor="pointer"
-          fixedWidth
-          icon={displayIcon(toggleExpansionIcon)[0]}
-      />
-    </button>
-  )
-}

data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx

@@ -1,5 +0,0 @@
-import { createContext } from "react"
-
-const AdvancedTableContext = createContext<any>({})
-
-export default AdvancedTableContext