playbook_ui 14.13.0.pre.alpha.play1851checkboxreacthook6083 → 14.13.0.pre.alpha.play1884progresspill6064

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.13.0"
-  VERSION = "14.13.0.pre.alpha.play1851checkboxreacthook6083"
+  VERSION = "14.13.0.pre.alpha.play1884progresspill6064"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.13.0.pre.alpha.play1851checkboxreacthook6083
+  version: 14.13.0.pre.alpha.play1884progresspill6064
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-02-12 00:00:00.000000000 Z
+date: 2025-02-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -682,8 +682,6 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_swift.md
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md
-- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx
-- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md
 - app/pb_kits/playbook/pb_checkbox/docs/_description.md
 - app/pb_kits/playbook/pb_checkbox/docs/example.yml
 - app/pb_kits/playbook/pb_checkbox/docs/index.js
@@ -2278,6 +2276,7 @@ files:
 - app/pb_kits/playbook/pb_progress_pills/docs/_description.md
 - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb
 - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx
+- app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md
 - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.html.erb
 - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.jsx
 - app/pb_kits/playbook/pb_progress_pills/docs/example.yml
@@ -2767,9 +2766,6 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md
-- app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md
 - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb
@@ -3341,11 +3337,11 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-CR2Xkt-o.js
-- dist/chunks/_weekday_stacked-9LU-xxnS.js
+- dist/chunks/_typeahead-btjo1UN5.js
+- dist/chunks/_weekday_stacked-TIh9nTmZ.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-WQEeEj3t.js
-- dist/chunks/pb_form_validation-Cq64l4zn.js
+- dist/chunks/lib-DjpLC8uO.js
+- dist/chunks/pb_form_validation-S56UaHZl.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx

@@ -1,69 +0,0 @@
-import React, { useState } from "react"
-import { useForm } from "react-hook-form"
-import { Button, Checkbox, Flex, Body } from "playbook-ui"
-
-const CheckboxReactHook = () => {
-  const { register, handleSubmit } = useForm({
-    defaultValues: {
-      Small: false,
-      Medium: false,
-      Large: false,
-    },
-  })
-
-  const [submittedData, setSubmittedData] = useState({
-    Small: false,
-    Medium: false,
-    Large: false,
-  })
-
-  const onSubmit = (data) => {
-    setSubmittedData(data)
-  }
-
-  return (
-    <Flex orientation="row">
-      <Flex align="start"
-          orientation="column"
-          paddingRight="lg"
-      >
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <Checkbox padding="xs"
-              text="Small"
-              {...register("Small")}
-          />
-          <br />
-          <Checkbox padding="xs"
-              text="Medium"
-              {...register("Medium")}
-          />
-          <br />
-          <Checkbox padding="xs"
-              text="Large"
-              {...register("Large")}
-          />
-          <br />
-          <Button htmlType="submit"
-              marginTop="sm"
-              text="submit"
-          />
-        </form>
-      </Flex>
-      <Flex align="start"
-          orientation="column"
-      >
-        <Body padding="xs"
-            text={`Small: ${submittedData.Small ? "true" : "false"}`}
-        />
-        <Body padding="xs"
-            text={`Medium: ${submittedData.Medium ? "true" : "false"}`}
-        />
-        <Body padding="xs"
-            text={`Large: ${submittedData.Large ? "true" : "false"}`}
-        />
-      </Flex>
-    </Flex>
-  )
-}
-
-export default CheckboxReactHook

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md

@@ -1 +0,0 @@
-You can pass react hook props to the checkbox kit.

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

@@ -1,96 +0,0 @@
-<% checkboxes = [
-  { name: 'Coffee', id: 'coffee', checked: false },
-  { name: 'Ice Cream', id: 'ice-cream', checked: false },
-  { name: 'Chocolate', id: 'chocolate', checked: true }
-] %>
-
-<%= pb_rails("flex", props: { justify: "end", margin_bottom: "sm" }) do %>
-    <%= pb_rails("flex", props: { justify: "end", margin_bottom: "sm" }) do %>
-        <%= pb_rails("button", props: { text: "Delete", id: "delete-button" }) %>
-    <% end %>
-<% end %>
-
-<%= pb_rails("table", props: { size: "sm" }) do %>
-    <%= pb_rails("table/table_head") do %>
-        <%= pb_rails("table/table_row") do %>
-            <%= pb_rails("table/table_header") do %>
-                <%= pb_rails("checkbox", props: {
-                    checked: true,
-                    value: "checkbox-value",
-                    name: "main-checkbox-selectable",
-                    indeterminate: true,
-                    id: "checkbox-selectable"
-                }) %>
-            <% end %>
-            <%= pb_rails("table/table_header", props: { text: "Column 1" }) %>
-            <%= pb_rails("table/table_header", props: { text: "Column 2" }) %>
-            <%= pb_rails("table/table_header", props: { text: "Column 3" }) %>
-            <%= pb_rails("table/table_header", props: { text: "Column 4" }) %>
-            <%= pb_rails("table/table_header", props: { text: "Column 5" }) %>
-        <% end %>
-    <% end %>
-    <%= pb_rails("table/table_body") do %>
-        <% checkboxes.each_with_index do |checkbox, index| %>
-            <%= pb_rails("table/table_row") do %>
-                <%= pb_rails("table/table_cell") do %>
-                    <%= pb_rails("checkbox", props: { checked: checkbox[:checked], id: "#{checkbox[:id]}-selectable-checkbox", name: "#{checkbox[:id]}-selectable-checkbox", on_change: "updateCheckboxes(#{index})", value: "check-box value" }) %>
-                <% end %>
-                <%= pb_rails("table/table_cell") do %>
-                    <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xs", url: "https://unsplash.it/500/400/?image=634" }) %>
-                <% end %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 2" }) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 3" }) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 4" }) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 5" }) %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>
-
-<script>
-    document.addEventListener('DOMContentLoaded', function() {
-        const mainCheckboxWrapper = document.getElementById('checkbox-selectable');
-        const mainCheckbox = document.getElementsByName("main-checkbox-selectable")[0];
-        const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="selectable-checkbox"]');
-        const deleteButton = document.getElementById('delete-button');
-
-        const updateDeleteButton = () => {
-            const anyChecked = Array.from(childCheckboxes).some(checkbox => checkbox.checked);
-            deleteButton.style.display = anyChecked ? 'block' : 'none';
-        };
-    
-        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 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';
-          
-          // 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);
-
-          updateDeleteButton();
-        };
-    
-        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_with_selectable_rows.jsx

@@ -1,101 +0,0 @@
-import React, { useState } from 'react'
-import { Table, Checkbox, Image, Flex, Button } from 'playbook-ui'
-
-const TableWithSelectableRows = (props) => {
-    const [checkboxes, setCheckboxes] = useState([
-        { name: "Coffee", checked: false },
-        { name: "Ice Cream", checked: false },
-        { name: "Chocolate", checked: true },
-    ]);
-
-    const isAllChecked = !checkboxes.find((checkbox) => !checkbox.checked);
-    const isNoneChecked = !checkboxes.find((checkbox) => checkbox.checked);
-
-    const processCheckboxes = (checked) =>
-        checkboxes.slice(0).map((checkbox) => {
-            checkbox.checked = checked;
-            return checkbox;
-        });
-
-    const onToggleAll = () => {
-        setCheckboxes(
-            isNoneChecked ? processCheckboxes(true) : processCheckboxes(false)
-        );
-    };
-
-    const updateCheckboxes = (checkbox, index) => {
-        const newCheckboxes = checkboxes.slice(0);
-        newCheckboxes[index].checked = !checkbox.checked;
-        setCheckboxes(newCheckboxes);
-    };
-
-    return (
-        <>
-            <Flex
-                justify="end"
-                marginBottom="sm"
-            >
-                {!isNoneChecked && (
-                    <Flex
-                        justify="end"
-                        marginBottom="sm"
-                    >
-                        <Button>Delete</Button>
-                    </Flex>
-                )}
-            </Flex>
-            <Table
-                size="sm"
-                {...props}
-            >
-                <Table.Head>
-                    <Table.Row>
-                        <Table.Header>
-                            <Checkbox
-                                checked={isAllChecked}
-                                indeterminate={!isAllChecked && !isNoneChecked}
-                                name="checkbox-name"
-                                onChange={onToggleAll}
-                                value="check-box value"
-                            />
-                        </Table.Header>
-                        <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>
-                    {checkboxes.map((checkbox, index) => (
-                        <Table.Row key={index}>
-                            <Table.Cell>
-                                <Checkbox
-                                    checked={checkbox.checked}
-                                    name={checkbox.name}
-                                    onChange={() => {
-                                        updateCheckboxes(checkbox, index);
-                                    }}
-                                    value="check-box value"
-                                />
-                            </Table.Cell>
-                            <Table.Cell>
-                                <Image
-                                    alt="picture of a misty forest"
-                                    size="xs"
-                                    url="https://unsplash.it/500/400/?image=634"
-                                />
-                            </Table.Cell>
-                            <Table.Cell>{"Value 2"}</Table.Cell>
-                            <Table.Cell>{"Value 3"}</Table.Cell>
-                            <Table.Cell>{"Value 4"}</Table.Cell>
-                            <Table.Cell>{"Value 5"}</Table.Cell>
-                        </Table.Row>
-                    ))}
-                </Table.Body>
-            </Table>
-        </>
-    )
-}
-
-export default TableWithSelectableRows

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

@@ -1 +0,0 @@
-Use the Checkbox kit with the Table to achieve the selectable row functionality seen here.