playbook_ui 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2035 → 13.16.0.pre.alpha.PBNTR181stripedtable2103

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 175ddacedbfec513a95b37bf13a61333a099bd30e8421e4860f71c0388f11f1a
-  data.tar.gz: 72d03981d777dc247c76e68999859037ade97c566e696afc8b55b237ef5ac9dd
+  metadata.gz: aae6e47ae52e5b9c14b3801cf5edc5266a9592ea797e1418b6170395c30a8f66
+  data.tar.gz: a882e0194ed45cfa9641ff5dfe99187f806a30d3fb6ead81bdbe8859a45b3a40
 SHA512:
-  metadata.gz: 802f5962c3902b281230c7679161ebd2299befb957ebc27595e423be42bbe2a28791524dbc038fbb3ff345d4899daaa47ea72da30390f616bd7e5781cc0ad8e3
-  data.tar.gz: 949b717b13f2ac5f2c1e5627e79df7c99e0a3568c8c19b804a65056abf7a7d18d756cefd5149a9bf10bbf27d9c09f4764242aa98f870b814fe994a4e382c790c
+  metadata.gz: c41634573bbbbcfcb2e9cc2695a881aa74a3b9a35e948aa6fd88ef36a9a6b3666c4fe715daadf182ad86c3e037b0b90a6e1c0c1a995d2f7184cb96e9ed30196c
+  data.tar.gz: fbda5aabd791414a112a8fc50931c7177b4db0333c090b2407842ffc0a4b584039ed2540349ab070d426bf3437508f7f41b57027dfa7dcc316a8a47bf1edd3ff

data/app/pb_kits/playbook/pb_advanced_table/README.md

@@ -5,7 +5,7 @@ The AdvancedTable Kit's `tableData` prop consumes the data that will render the
 Here is the data structure being used within the kits doc examples:
 
 ```
-MOCK_DATA = [
+const MOCK_DATA = [
   {
     year: "2021",
     quarter: null,
@@ -110,8 +110,85 @@ MOCK_DATA = [
     classCompletionRate: "45%",
     graduatedStudents: "32",
     children: [
-        //similar to chldren above
-    ]
+      {
+        year: "2022",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+        attendanceRate: "32%",
+        completedClasses: "15",
+        classCompletionRate: "52%",
+        graduatedStudents: "36",
+        children: [
+          {
+            year: "2022",
+            quarter: "Q1",
+            month: "January",
+            day: null,
+            newEnrollments: "16",
+            scheduledMeetings: "20",
+            attendanceRate: "11%",
+            completedClasses: "13",
+            classCompletionRate: "47%",
+            graduatedStudents: "28",
+            children: [
+              {
+                year: "2022",
+                quarter: "Q1",
+                month: "January",
+                day: "15",
+                newEnrollments: "34",
+                scheduledMeetings: "28",
+                attendanceRate: "97%",
+                completedClasses: "20",
+                classCompletionRate: "15%",
+                graduatedStudents: "17",
+              },
+              {
+                year: "2022",
+                quarter: "Q1",
+                month: "January",
+                day: "25",
+                newEnrollments: "43",
+                scheduledMeetings: "23",
+                attendanceRate: "66%",
+                completedClasses: "26",
+                classCompletionRate: "47%",
+                graduatedStudents: "9",
+              },
+            ],
+          },
+          {
+            year: "2022",
+            quarter: "Q1",
+            month: "May",
+            day: null,
+            newEnrollments: "20",
+            scheduledMeetings: "41",
+            attendanceRate: "95%",
+            completedClasses: "26",
+            classCompletionRate: "83%",
+            graduatedStudents: "43",
+            children: [
+              {
+                year: "2011",
+                quarter: "Q1",
+                month: "May",
+                day: "2",
+                newEnrollments: "19",
+                scheduledMeetings: "35",
+                attendanceRate: "69%",
+                completedClasses: "8",
+                classCompletionRate: "75%",
+                graduatedStudents: "23",
+              },
+            ],
+          },
+        ],
+      },
+    ],
   },
   {
     year: "2023",
@@ -125,9 +202,87 @@ MOCK_DATA = [
     classCompletionRate: "49%",
     graduatedStudents: "29",
     children: [
-      //similar to children above
+      {
+        year: "2023",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+        attendanceRate: "32%",
+        completedClasses: "15",
+        classCompletionRate: "52%",
+        graduatedStudents: "36",
+        children: [
+          {
+            year: "2023",
+            quarter: "Q1",
+            month: "March",
+            day: null,
+            newEnrollments: "16",
+            scheduledMeetings: "20",
+            attendanceRate: "11%",
+            completedClasses: "13",
+            classCompletionRate: "47%",
+            graduatedStudents: "28",
+            children: [
+              {
+                year: "2023",
+                quarter: "Q1",
+                month: "March",
+                day: "10",
+                newEnrollments: "34",
+                scheduledMeetings: "28",
+                attendanceRate: "97%",
+                completedClasses: "20",
+                classCompletionRate: "15%",
+                graduatedStudents: "17",
+              },
+              {
+                year: "2023",
+                quarter: "Q1",
+                month: "March",
+                day: "11",
+                newEnrollments: "43",
+                scheduledMeetings: "23",
+                attendanceRate: "66%",
+                completedClasses: "26",
+                classCompletionRate: "47%",
+                graduatedStudents: "9",
+              },
+            ],
+          },
+          {
+            year: "2023",
+            quarter: "Q1",
+            month: "April",
+            day: null,
+            newEnrollments: "20",
+            scheduledMeetings: "41",
+            attendanceRate: "95%",
+            completedClasses: "26",
+            classCompletionRate: "83%",
+            graduatedStudents: "43",
+            children: [
+              {
+                year: "2023",
+                quarter: "Q1",
+                month: "April",
+                day: "15",
+                newEnrollments: "19",
+                scheduledMeetings: "35",
+                attendanceRate: "69%",
+                completedClasses: "8",
+                classCompletionRate: "75%",
+                graduatedStudents: "23",
+              },
+            ],
+          },
+        ],
+      },
     ],
   },
 ];
 
+
 ```

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

@@ -1,6 +1,6 @@
 The AdvancedTable kit takes the table data and automatically renders expandable subrows for nested items to any depth needed. In it's simplest form, the kit has two required props: 
 
-`tableData` is the data that the kit needs to consume to render the table. This data will take the structure of an array of objects where each object will be rendered as a row with the key/value pairs being the column values. If an object within that data has children, the kit will automatically create subRows with icon buttons on the parent rows to toggle the subRows open or closed. The toggleExpansionAll button in the first column header can also be used to toggle expansion for the top level parent rows. For a visual of the data structure needed for `tableData`, see [here](https://github.com/powerhome/playbook/blob/1b2481c06137d2bc63031a1120c1bd4d01bfd9ec/playbook/app/pb_kits/playbook/pb_advanced_table/README.md).
+`tableData` is the data that the kit needs to consume to render the table. This data will take the structure of an array of objects where each object will be rendered as a row with the key/value pairs being the column values. If an object within that data has children, the kit will automatically create subRows with icon buttons on the parent rows to toggle the subRows open or closed. The toggleExpansionAll button in the first column header can also be used to toggle expansion for the top level parent rows. For a visual of the data structure needed for `tableData`, see [here](https://github.com/powerhome/playbook/blob/PBNTR-177-New-Advanced-Table-Kit/playbook/app/pb_kits/playbook/pb_advanced_table/README.md).
 
 
 `columnDefinitions` maps to the columns prop on the Tanstack table. Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `ColumnDefinitions` in the AdvancedTable kit is a array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:

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

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

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -20,6 +20,7 @@ type TableProps = {
   singleLine?: boolean,
   size?: "sm" | "md" | "lg",
   sticky?: boolean,
+  striped?: boolean,
   verticalBorder?: boolean,
 } & GlobalProps
 
@@ -40,6 +41,7 @@ const Table = (props: TableProps) => {
     singleLine = false,
     size = 'sm',
     sticky = false,
+    striped = false,
     verticalBorder = false,
   } = props
 
@@ -70,6 +72,7 @@ const Table = (props: TableProps) => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
+            'striped': striped,
           },
           globalProps(props),
           tableCollapseCss,

data/app/pb_kits/playbook/pb_table/docs/_table_striped.html.erb

@@ -0,0 +1,48 @@
+<%= pb_rails("table", props: { striped: true }) do %>
+  <thead>
+    <tr>
+      <th>Column 1</th>
+      <th>Column 2</th>
+      <th>Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+    <tr>
+      <td>Value 1</td>
+      <td>Value 2</td>
+      <td>Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+    </tr>
+  </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_striped.jsx

@@ -0,0 +1,58 @@
+import React from "react"
+import Table from "../_table"
+
+const TableStriped = (props) => (
+  <Table
+      striped
+      {...props}
+  >
+    <thead>
+      <tr>
+        <th>{'Column 1'}</th>
+        <th>{'Column 2'}</th>
+        <th>{'Column 3'}</th>
+        <th>{'Column 4'}</th>
+        <th>{'Column 5'}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+      <tr>
+        <td>{'Value 1'}</td>
+        <td>{'Value 2'}</td>
+        <td>{'Value 3'}</td>
+        <td>{'Value 4'}</td>
+        <td>{'Value 5'}</td>
+      </tr>
+    </tbody>
+  </Table>
+)
+
+export default TableStriped

data/app/pb_kits/playbook/pb_table/docs/_table_striped.md

@@ -0,0 +1 @@
+Optionally pass the `striped` (boolean, defaults to false) prop to set odd rows to a contrasting background color. This helps with readability on larger tables with lots of data.

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

@@ -23,6 +23,7 @@ examples:
     - table_icon_buttons: Table with Icon Buttons
     - table_with_background_kit: Table With Background Kit
     - table_vertical_border: Vertical Borders
+    - table_striped: Striped Table
 
   react:
     - table_sm: Small
@@ -47,3 +48,4 @@ examples:
     - table_icon_buttons: Table with Icon Buttons
     - table_with_background_kit: Table With Background Kit
     - table_vertical_border: Vertical Borders
+    - table_striped: Striped Table

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

@@ -20,3 +20,4 @@ export { default as TableAlignmentShiftRow } from './_table_alignment_shift_row.
 export { default as TableAlignmentShiftData } from './_table_alignment_shift_data.jsx'
 export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
 export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
+export { default as TableStriped } from './_table_striped.jsx'

data/app/pb_kits/playbook/pb_table/styles/_all.scss

@@ -18,3 +18,4 @@
 @import "sticky_header";
 @import "vertical_border";
 @import "table_header";
+@import "striped";

data/app/pb_kits/playbook/pb_table/styles/_striped.scss

@@ -0,0 +1,19 @@
+[class^=pb_table] {
+  &.striped {
+    tbody {
+      tr:nth-child(odd) {
+        background-color: $bg_light;
+      }
+    }
+  }
+
+  &.dark {
+    &.striped {
+      tbody {
+        tr:nth-child(odd) {
+          background-color: $bg_dark;
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/table.rb

@@ -25,12 +25,14 @@ module Playbook
                     default: false
       prop :vertical_border, type: Playbook::Props::Boolean,
                              default: false
+      prop :striped, type: Playbook::Props::Boolean,
+                     default: false
 
       def classname
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
           disable_hover_class, container_class, data_table_class, sticky_class, collapse_class,
-          vertical_border_class, "table-responsive-#{responsive}", separator: " "
+          vertical_border_class, striped_class, "table-responsive-#{responsive}", separator: " "
         )
       end
 
@@ -64,6 +66,10 @@ module Playbook
         sticky ? "sticky-header" : nil
       end
 
+      def striped_class
+        striped ? "striped" : nil
+      end
+
       def vertical_border_class
         vertical_border ? "vertical-border" : nil
       end

data/app/pb_kits/playbook/pb_table/table.test.js

@@ -15,3 +15,8 @@ test("when sticky is true", () => {
   const kit = renderKit(Table, props, { sticky: true })
   expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card sticky-header table-collapse-sm")
 })
+
+test("when striped is true", () => {
+  const kit = renderKit(Table, props, { striped: true })
+  expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card striped table-collapse-sm")
+})

data/lib/playbook/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2035
+  version: 13.16.0.pre.alpha.PBNTR181stripedtable2103
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-01-30 00:00:00.000000000 Z
+date: 2024-02-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -2249,6 +2249,9 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_sticky.md
+- app/pb_kits/playbook/pb_table/docs/_table_striped.html.erb
+- app/pb_kits/playbook/pb_table/docs/_table_striped.jsx
+- app/pb_kits/playbook/pb_table/docs/_table_striped.md
 - app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_two_actions.md
@@ -2274,6 +2277,7 @@ files:
 - app/pb_kits/playbook/pb_table/styles/_side_highlight.scss
 - app/pb_kits/playbook/pb_table/styles/_single-line.scss
 - app/pb_kits/playbook/pb_table/styles/_sticky_header.scss
+- app/pb_kits/playbook/pb_table/styles/_striped.scss
 - app/pb_kits/playbook/pb_table/styles/_structure.scss
 - app/pb_kits/playbook/pb_table/styles/_table-card.scss
 - app/pb_kits/playbook/pb_table/styles/_table-dark.scss