playbook_ui_docs 14.8.0.pre.alpha.PLAY1615movenegativetoleftofcurrencysign4543 → 14.8.0.pre.alpha.pbntr661createstickyleftprop4612

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 831044cd9b0475429afbfdd0b28ba90bccafad318e0e72088c693167ab5b0ed9
-  data.tar.gz: c76c8bf73af5bb30fc4f7161489f628fed157688aa299ff7bf2f0bd8c0560a64
+  metadata.gz: 565d4df4e7478be967957422514a5bb206717fcae3a3fbabc62a7d2c164fb726
+  data.tar.gz: ec4515ee5746bdc4ef5e0c23150ab07bdb0d4e7691acd45546c64f3e954346da
 SHA512:
-  metadata.gz: 315b65fef6eda483b2879890481add0359f5ae8740dccaa8fe032213e2c511c0b4e12c4fd3ea24b101290a4f350b18729a6746418accedc3fcfa3fd6e1ce0eca
-  data.tar.gz: 487d172431e95c0ee54214116bce9a67c2314a87fbdf321ba5cfe08b5ed94e6ca69bed64073252c59ec12e484b30b094b56d231191082f662f7b3065cedde856
+  metadata.gz: 9448c1505f3e171b124c3baca81f5dbe4d70651e96034355ae7e787207aa04876f0a10b1e42da372bdbed17f744eaaeb27935c9be2896b91704111705fa5dcc4
+  data.tar.gz: 007b78a2168f4fd314c12b584934e05895753129af01320c4d1a03e142eb75ee1c25f3b896451c9fb5938f57bebec082dccca486e55444793ba6302fbcf0334d

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -1,7 +1,84 @@
-<%= pb_rails("checkbox" , props: {
-  text: "Select ",
-  value: "checkbox-value",
-  name: "main",
-  indeterminate: true,
-  id: "test-indeterminate-js"
-}) %>
+<% checkboxes = [
+  { name: 'Coffee', id: 'coffee', checked: false },
+  { name: 'Ice Cream', id: 'ice-cream', checked: false },
+  { name: 'Chocolate', id: 'chocolate', checked: true }
+] %>
+
+<%= pb_rails("table", props: { container: false, size: "md" }) do %>
+  <thead>
+    <tr>
+      <th>
+        <%= pb_rails("checkbox", props: {
+          checked: true,
+          text: "Uncheck All",
+          value: "checkbox-value",
+          name: "main-checkbox",
+          indeterminate: true,
+          id: "indeterminate-checkbox"
+        }) %>
+      </th>
+    </tr>
+  </thead>
+
+  <tbody>
+    <% checkboxes.each do |checkbox| %>
+      <tr>
+        <td>
+          <%= pb_rails("checkbox", props: {
+            checked: checkbox[:checked],
+            text: checkbox[:name],
+            value: checkbox[:id],
+            name: "#{checkbox[:id]}-indeterminate-checkbox",
+            id: "#{checkbox[:id]}-indeterminate-checkbox",
+          }) %>
+        </td>
+      </tr>
+    <% end %>
+  </tbody>
+<% end %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
+    const mainCheckbox = document.getElementsByName("main-checkbox")[0];
+    const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');
+
+    const updateMainCheckbox = () => {
+      // Count the number of checked child checkboxes
+      const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
+      // Determine if the main checkbox should be in an indeterminate state
+      const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
+      
+      // Set the main checkbox states
+      mainCheckbox.indeterminate = indeterminate;
+      mainCheckbox.checked = checkedCount > 0;
+
+      // Determine the main checkbox label based on the number of checked checkboxes
+      const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
+
+      // Determine the icon class to add and remove based on the number of checked checkboxes
+      const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
+      const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
+
+      // Update main checkbox label
+      mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
+      
+      // Add and remove the icon class to the main checkbox wrapper
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
+      mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
+      
+      // Toggle the visibility of the checkbox icon based on the indeterminate state
+      mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
+      mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
+    };
+
+    mainCheckbox.addEventListener('change', function() {
+      childCheckboxes.forEach(cb => cb.checked = this.checked);
+      updateMainCheckbox();
+    });
+
+    childCheckboxes.forEach(cb => {
+      cb.addEventListener('change', updateMainCheckbox);
+    });
+  });
+</script>

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

@@ -0,0 +1,87 @@
+import React from 'react'
+import Table from '../_table'
+
+const TableStickyLeftColumns = () => {
+    return (
+        <Table
+            responsive="scroll"
+            size="md"
+            stickyLeftcolumn={["1", "2", "3"]}
+        >
+            <thead>
+                <tr>
+                    <th id="1">{'Column 1'}</th>
+                    <th id="2">{'Column 2'}</th>
+                    <th id="3">{'Column 3'}</th>
+                    <th>{'Column 4'}</th>
+                    <th>{'Column 5'}</th>
+                    <th>{'Column 6'}</th>
+                    <th>{'Column 7'}</th>
+                    <th>{'Column 8'}</th>
+                    <th>{'Column 9'}</th>
+                    <th>{'Column 10'}</th>
+                    <th>{'Column 11'}</th>
+                    <th>{'Column 12'}</th>
+                    <th>{'Column 13'}</th>
+                    <th>{'Column 14'}</th>
+                    <th>{'Column 15'}</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td id="1">{'Value 1'}</td>
+                    <td id="2">{'Value 2'}</td>
+                    <td id="3">{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td>{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td id="1">{'Value 1'}</td>
+                    <td id="2">{'Value 2'}</td>
+                    <td id="3">{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td>{'Value 15'}</td>
+                </tr>
+                <tr>
+                    <td id="1">{'Value 1'}</td>
+                    <td id="2">{'Value 2'}</td>
+                    <td id="3">{'Value 3'}</td>
+                    <td>{'Value 4'}</td>
+                    <td>{'Value 5'}</td>
+                    <td>{'Value 6'}</td>
+                    <td>{'Value 7'}</td>
+                    <td>{'Value 8'}</td>
+                    <td>{'Value 9'}</td>
+                    <td>{'Value 10'}</td>
+                    <td>{'Value 11'}</td>
+                    <td>{'Value 12'}</td>
+                    <td>{'Value 13'}</td>
+                    <td>{'Value 14'}</td>
+                    <td>{'Value 15'}</td>
+                </tr>
+            </tbody>
+        </Table>
+    )
+}
+
+export default TableStickyLeftColumns

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

@@ -0,0 +1,2 @@
+The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
+If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`

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

@@ -33,6 +33,7 @@ examples:
     - table_md: Medium
     - table_lg: Large
     - table_sticky: Sticky Header
+    - table_sticky_left_columns: Sticky Left Column
     - table_alignment_row: Row Alignment
     - table_alignment_column: Cell Alignment
     - table_alignment_shift_row: Row Shift

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

@@ -25,3 +25,4 @@ export { default as TableDiv } from './_table_div.jsx'
 export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
 export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
 export { default as TableOuterPadding } from './_table_outer_padding.jsx'
+export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'