playbook_ui_docs 14.24.0.pre.alpha.PLAY23139411 → 14.24.0.pre.alpha.pinnedrowstyling9515

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0de875159380600189994ed20174c469e68169fa7596c395afeda3ee9f4ace98
-  data.tar.gz: 96e03349d30ba93c884dbe83db41cf4898367375bcd934b4d6d8e26fd345f20c
+  metadata.gz: 9602c4a5650a94759bb4e2dc8c08c013d9f9c2fcfaefb18b49fff4945c88323d
+  data.tar.gz: 0d6d0e2c9026585062b550d2e16d3fbdb255f0067be48a0109c48a4a176eb895
 SHA512:
-  metadata.gz: 92219fef1f922c6f0038be01e1011cf609b95bfe84a50c90776ec00cae95f82a5392dbf1c7044ed23f9f70f11bef02943f705241dd78512bca3bb159fad1701a
-  data.tar.gz: a108383d3960c900d7786e5596dafb2a79cf08d484599d458236e1136bbeec7a186ed25c13f1611e62136af1cf04e2578eb416e28121a9f48f23cdcb32efd34b
+  metadata.gz: 1e56b75b8d4c9ea804b6e9dd83336e5c01d2cade59003a4630f0779ae78eb75fdc8b7439e32749fa1998d118b7aff9c34aa77fca5250321ceb5da47d104ea228
+  data.tar.gz: 8010cd7a0ad0937794d3952d57fdf37b35fdac49c7162f7e1781d4e2c2a6b0b02d763f363219dbb5f1dc8433c9f55f05c93931bfa97885b095c3f706322a3107

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb

@@ -0,0 +1,43 @@
+<% column_definitions = [
+  {
+    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",
+      },
+    ],
+  },
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true } }) %>

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

@@ -0,0 +1,64 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnHeadersVerticalBorder = (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",
+        },
+      ],
+    },
+  ];
+  
+  const tableProps = {
+    verticalBorder: true
+  }
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default AdvancedTableColumnHeadersVerticalBorder

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

@@ -13,6 +13,7 @@ examples:
   - advanced_table_with_custom_header_rails: Custom Header Cell
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+  - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_selectable_rows_rails: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_rails: Selectable Rows (No Subrows)
@@ -53,6 +54,7 @@ examples:
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
+  - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
   - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_selectable_rows: Selectable Rows

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

@@ -21,6 +21,7 @@ export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
 export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
+export { default as AdvancedTableColumnHeadersVerticalBorder } from './_advanced_table_column_headers_vertical_border.jsx'
 export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
 export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date", props: {
+  date: Date.today,
+  show_current_year: true
+}) %>

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import FormattedDate from '../../pb_date/_date'
+
+const DateWithShowCurrentYear = (props) => {
+  return (
+    <>
+      <FormattedDate
+          showCurrentYear
+          value={new Date()}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default DateWithShowCurrentYear

data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.md

@@ -0,0 +1 @@
+By default, the Date kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here. 

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

@@ -5,12 +5,14 @@ examples:
   - date_variants: Variants
   - date_alignment: Alignment
   - date_timezone: Timezones
+  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   react:
   - date_default: Default
   - date_variants: Variants
   - date_alignment: Alignment
+  - date_with_show_current_year: Show Current Year
   - date_unstyled: Unstyled
 
   swift:

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

@@ -2,3 +2,4 @@ export { default as DateDefault } from './_date_default.jsx'
 export { default as DateVariants } from './_date_variants.jsx'
 export { default as DateAlignment } from './_date_alignment.jsx'
 export { default as DateUnstyled } from './_date_unstyled.jsx'
+export { default as DateWithShowCurrentYear } from './_date_with_show_current_year.jsx'

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx

@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+import Flex from '../../pb_flex/_flex'
+import Pagination from '../../pb_pagination/_pagination'
+import Select from '../../pb_select/_select'
+import Table from '../../pb_table/_table'
+
+import { data } from "./data";
+
+const PaginationExternalControl = (props) => {
+  const [totalItems, setTotalItems] = useState(20);
+  const [itemsPerPage, setItemsPerPage] = useState(5);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+
+  const limitedData = data.slice(0, totalItems);
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const paginatedItems = limitedData.slice(startIndex, startIndex + itemsPerPage);
+
+  const handleTotalItemsChange = (event) => {
+    const value = Number(event.target.value);
+    setTotalItems(value);
+    setCurrentPage(1);
+  };
+
+  const handleItemsPerPageChange = (event) => {
+    const value = Number(event.target.value);
+    setItemsPerPage(value);
+    setCurrentPage(1);
+  };
+
+  return (
+    <>
+        <Flex gap="sm">
+            <Select
+                label="Total Items"
+                onChange={handleTotalItemsChange}
+                options={[
+                    { value: "5", text: "5" },
+                    { value: "10", text: "10" },
+                    { value: "20", text: "20" }
+                ]}
+                size="sm"
+                value={String(totalItems)}
+                {...props}
+            />
+
+            <Select
+                label="Items per Page"
+                onChange={handleItemsPerPageChange}
+                options={[
+                    { value: "3", text: "3" },
+                    { value: "5", text: "5" },
+                    { value: "10", text: "10" }
+                ]}
+                size="sm"
+                value={String(itemsPerPage)}
+                {...props}
+            />
+        </Flex>
+
+        <Pagination
+            current={currentPage}
+            key={`pagination-top-${currentPage}`}
+            marginBottom="xs"
+            onChange={handlePageChange}
+            range={5}
+            total={totalPages}
+            {...props}
+        />
+        <Table 
+            marginBottom="xs"
+            responsive="none" 
+            size="sm" 
+            {...props}
+        >
+            <Table.Head>
+            <Table.Row>
+                <Table.Header>{"Column 1"}</Table.Header>
+                <Table.Header>{"Column 2"}</Table.Header>
+                <Table.Header>{"Column 3"}</Table.Header>
+                <Table.Header>{"Column 4"}</Table.Header>
+                <Table.Header>{"Column 5"}</Table.Header>
+            </Table.Row>
+            </Table.Head>
+            <Table.Body>
+            {paginatedItems.map((row, index) => (
+                <Table.Row key={index}>
+                {row.map((cell, cellIndex) => (
+                    <Table.Cell key={cellIndex}>{cell}</Table.Cell>
+                ))}
+                </Table.Row>
+            ))}
+            </Table.Body>
+        </Table>
+        <Pagination
+            current={currentPage}
+            key={`pagination-bottom-${currentPage}`}
+            onChange={handlePageChange}
+            range={5}
+            total={totalPages}
+            {...props}
+        />
+    </>
+  )
+}
+
+export default PaginationExternalControl 

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control_react.md

@@ -0,0 +1,3 @@
+The Pagination component supports external control of the current page. This allows for programmatically reseting or changing the current page when filters or other criteria change, without needing to unmount and remount the component.
+
+In this example, changing the "Total Items" or "Items per Page" dropdowns will automatically reset the pagination to page 1, demonstrating how external control works. The pagination component will update its internal state to reflect the new `current` prop value.

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

@@ -6,3 +6,4 @@ examples:
   react:
   - pagination_default: Default
   - pagination_page_change: Page Change
+  - pagination_external_control: External Control

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

@@ -1,2 +1,3 @@
 export { default as PaginationDefault } from './_pagination_default.jsx'
 export { default as PaginationPageChange } from './_pagination_page_change.jsx'
+export { default as PaginationExternalControl } from './_pagination_external_control.jsx'