RubyGems - playbook_ui - Versions diffs - 14.13.0.pre.alpha.play1852reacthookformsupportradio6213 → 14.13.0.pre.alpha.play1884progresspill6064 - Mend

playbook_ui 14.13.0.pre.alpha.play1852reacthookformsupportradio6213 → 14.13.0.pre.alpha.play1884progresspill6064

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (114) hide show

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx DELETED Viewed

@@ -1,60 +0,0 @@
-import React from "react"
-import { useForm } from "react-hook-form"
-import { Radio, Flex, Body } from "playbook-ui"
-const RadioReactHook = () => {
-  const { register, watch } = useForm({
-    defaultValues: {
-      size: "Small",
-    },
-  })
-  const selectedSize = watch("size", "Small")
-  return (
-    <Flex orientation="row">
-      <Flex
-          align="start"
-          orientation="column"
-          paddingRight="lg"
-        >
-        <Radio
-            alignment="left"
-            label="Small"
-            marginBottom='sm'
-            name="size"
-            value="Small"
-            {...register("size")}
-        />
-        <br />
-        <Radio
-            alignment="left"
-            label="Medium"
-            marginBottom='sm'
-            name="size"
-            value="Medium"
-            {...register("size")}
-        />
-        <br />
-        <Radio
-            alignment="left"
-            label="Large"
-            marginBottom='sm'
-            name="size"
-            value="Large"
-            {...register("size")}
-        />
-      </Flex>
-      <Flex
-          align="start"
-          orientation="column"
-      >
-        <Body
-            text={`Selected Size: ${selectedSize}`}
-        />
-      </Flex>
-    </Flex>
-  )
-}
-export default RadioReactHook

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.md DELETED Viewed

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

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb DELETED Viewed

@@ -1,51 +0,0 @@
-<% content = capture do %>
-    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
-        <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
-    <% 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", 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"}) %>
-        <%= pb_rails("table/table_header", props: { text: ""}) %>
-       <% end %>
-  <% end %>
-  <%= pb_rails("table/table_body") do %>
-      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-1", id: "5" }) do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= 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"}) %>
-          <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-1", cursor: "pointer" }) do %>
-            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
-          <% end %>
-      <% end %>
-     <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-2", id: "6" }) do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= 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"}) %>
-          <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-2", cursor: "pointer" }) do %>
-            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
-          <% end %>
-      <% end %>
-    <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, toggle_cell_id: "cell-3", id: "7" }) do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= 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"}) %>
-          <%= pb_rails("table/table_cell", props: { text_align: "right", id: "cell-3", cursor: "pointer" }) do %>
-            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
-          <% end %>
-      <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md DELETED Viewed

	@@ -1,2 +0,0 @@
1	- When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggle_cell_id` prop to pass in the id of the Cell you want to use as the trigger.
2	- __NOTE__: `toggle_cell_id` and the `id` on the Cell you want to use as the trigger MUST be the same. Please also be aware that you will need to pass in an `id` to any Table Rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

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