RubyGems - playbook_ui - Versions diffs - 14.13.0.pre.alpha.rails8compatible6232 → 14.13.0.pre.rc.0 - Mend

playbook_ui 14.13.0.pre.alpha.rails8compatible6232 → 14.13.0.pre.rc.0

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 (213) hide show

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx DELETED Viewed

@@ -1,90 +0,0 @@
-import React, { useState } from "react";
-import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
-// Initial items to be dragged
-const data = [
-    {
-        id: "1",
-        task: "Task 1",
-        assignee_name: "Terry Miles",
-        assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
-      },
-      {
-        id: "2",
-        task: "Task 2",
-        assignee_name: "Sophia Miles",
-        assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
-      },
-      {
-        id: "3",
-        task: "Task 3",
-        assignee_name: "Alice Jones",
-        assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
-      },
-      {
-        id: "4",
-        task: "Task 4",
-        assignee_name: "Mike James",
-        assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
-      },
-      {
-        id: "5",
-        task: "Task 5",
-        assignee_name: "James Guy",
-        assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
-      }
-];
-const DraggableWithTableReact = (props) => {
-  const [initialState, setInitialState] = useState(data);
-  return (
-    <>
-    <DraggableProvider initialItems={data}
-        onReorder={(items) => setInitialState(items)}
-    >
-        <Table
-            responsive="none"
-            size="sm"
-            {...props}
-        >
-          <Table.Head>
-            <Table.Row>
-              <Table.Header>{"id"}</Table.Header>
-              <Table.Header>{"name"}</Table.Header>
-              <Table.Header>{"task number"}</Table.Header>
-            </Table.Row>
-          </Table.Head>
-          <Table.Body draggableContainer>
-            {initialState.map(({ id, task, assignee_name, assignee_img }) => (
-              <Table.Row
-                  dragId={id}
-                  draggableItem
-                  key={id}
-              >
-                <Table.Cell>{id}</Table.Cell>
-                <Table.Cell>
-                  <Flex align="center">
-                    <Avatar
-                        imageUrl={assignee_img}
-                        size="xs"
-                    />
-                    <Body
-                        paddingLeft="xxs"
-                        text={assignee_name}
-                        {...props}
-                    />
-                  </Flex>
-                </Table.Cell>
-                <Table.Cell>{task}</Table.Cell>
-              </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-    </DraggableProvider>
-    </>
-  );
-};
-export default DraggableWithTableReact;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md DELETED Viewed

@@ -1,5 +0,0 @@
-The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
-- Wrap the Table with the `DraggableProvider` and manage state as shown.
-- use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
-- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here.

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb DELETED Viewed

@@ -1,58 +0,0 @@
-<%= pb_rails("button", props: { text: "Show Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close" } }) %>
-<%= pb_rails("button", props: { text: "Show Closeable Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close-closeable" } }) %>
-<%= pb_rails("fixed_confirmation_toast", props: {
-  auto_close: 3000,
-  classname: "toast-to-hide",
-  id: "toast-auto-close",
-  text: "I will disappear in 3 seconds.",
-  status: "tip",
-  vertical: "top",
-  horizontal: "center"
-}) %>
-<%= pb_rails("fixed_confirmation_toast", props: {
-  auto_close: 10000,
-  closeable: true,
-  id: "toast-auto-close-closeable",
-  text: "I will disappear in 10 seconds.",
-  status: "tip",
-  vertical: "top",
-  horizontal: "center"
-}) %>
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-  // Initialize toast elements and buttons
-  const toasts = {
-    '#toast-auto-close': document.querySelector("#toast-auto-close"),
-    '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
-  }
-  const buttons = {
-    '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
-    '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")
-  }
-  // Store original toasts and remove them from DOM
-  const originalToasts = {}
-  Object.entries(toasts).forEach(([id, toast]) => {
-    if (toast) {
-      originalToasts[id] = toast.cloneNode(true)
-      toast.remove()
-    }
-  })
-  // Set up button click handlers
-  Object.keys(buttons).forEach((toastId) => {
-    const button = buttons[toastId]
-    if (button) {
-      button.onclick = () => {
-        const newToast = originalToasts[toastId].cloneNode(true)
-        newToast.style.display = "flex"
-        document.body.appendChild(newToast)
-      }
-    }
-  })
-})
-</script>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md DELETED Viewed

@@ -1,3 +0,0 @@
-Auto close is used when you want the confirmation toast to close automatically after a certain time. `auto_close` property will be a delay number in ms.
-The script tag in this code snippet is for demonstration purposes only. It clones the toasts in order to have it appear with a button click prompt and not upon initial page load. In a typical production environment the event triggering a fixed confirmation toast to appear would be handled by a controller or a separate javascript file.

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb DELETED Viewed

@@ -1,11 +0,0 @@
-<%= pb_rails("home_address_street", props: {
-  address: "70 pRoSpEcT ave",
-  address_cont: "Apt M18",
-  city: "West Chester",
-  home_id: 8250263,
-  home_url: "https://powerhrg.com/",
-  preserve_case: true,
-  state: "pa",
-  zipcode: "19382",
-  territory: "PHL",
-}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx DELETED Viewed

@@ -1,22 +0,0 @@
-import React from 'react'
-import HomeAddressStreet from '../_home_address_street'
-const HomeAddressStreetFormatting = (props) => {
-  return (
-    <HomeAddressStreet
-        address="70 pRoSpEcT ave"
-        addressCont="Apt M18"
-        city="West Chester"
-        homeId="8250263"
-        homeUrl="https://powerhrg.com/"
-        preserveCase
-        state="pa"
-        territory="PHL"
-        zipcode="19382"
-        {...props}
-    />
-  )
-}
-export default HomeAddressStreetFormatting

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md DELETED Viewed

	@@ -1 +0,0 @@
1	- The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserve_case: true`, the street address will be rendered exactly as entered, without automatic title capitalization.

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md DELETED Viewed

	@@ -1 +0,0 @@
1	- The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserveCase`, the street address will be rendered exactly as entered, without automatic title capitalization.

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb DELETED Viewed

@@ -1,27 +0,0 @@
-<%= pb_rails("flex", props: { align: "center"}) do %>
-  <%= pb_rails("icon_button", props: {size: "lg"}) %> <span>Large</span>
-<% end %>
-<%= pb_rails("flex", props: { align: "center" }) do %>
-  <%= pb_rails("icon_button", props: {size: "sm"}) %> <span>Small</span>
-<% end %>
-<%= pb_rails("flex", props: { align: "center" }) do %>
-  <%= pb_rails("icon_button", props: {size: "xs"}) %> <span>XSmall</span>
-<% end %>
-<%= pb_rails("flex", props: { align: "center", margin_top: "md" }) do %>
-  <%= pb_rails("icon_button", props: {size: "1x"}) %> <span>1x</span>
-<% end %>
-<%= pb_rails("flex", props: { align: "center" }) do %>
-  <%= pb_rails("icon_button", props: {size: "2x"}) %> <span>2x</span>
-<% end %>
-<%= pb_rails("flex", props: { align: "center" }) do %>
-  <%= pb_rails("icon_button", props: {size: "3x"}) %> <span>3x</span>
-<% end %>
-<%= pb_rails("flex", props: { align: "center" }) do %>
-  <%= pb_rails("icon_button", props: {size: "4x"}) %> <span>4x</span>
-<% end %>

data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb DELETED Viewed

@@ -1,15 +0,0 @@
-<div>
-  <%= pb_rails("link", props: {
-    href: "http://google.com",
-    target: "blank",
-    text: "Open In New Window"
-  }) %>
-</div>
-<div>
-  <%= pb_rails("link", props: {
-    href: "https://playbook.powerapp.cloud/",
-    target: "child",
-    text: "Open In Child Tab",
-  }) %>
-</div>

data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx DELETED Viewed

@@ -1,29 +0,0 @@
-import React from 'react'
-import { Link } from 'playbook-ui'
-const LinkTarget = (props) => (
-  <div>
-    <div>
-      <Link
-          aria={{ label: 'Link to Google in new window' }}
-          href="https://google.com"
-          tabIndex={0}
-          target='blank'
-          text="Open In New Window"
-          {...props}
-      />
-    </div>
-    <div>
-      <Link
-          aria={{ label: 'Link to Playbook in a child tab' }}
-          href="https://playbook.powerapp.cloud/"
-          tabIndex={0}
-          target='child'
-          text="Open In Child Tab"
-          {...props}
-      />
-    </div>
-  </div>
-)
-export default LinkTarget

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx DELETED Viewed

@@ -1,37 +0,0 @@
-import React, { forwardRef } from 'react'
-import {
-    Overlay,
-    Card,
-    Flex,
-    FlexItem,
-} from 'playbook-ui'
-const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
-    return (
-        <Flex
-            columnGap="lg"
-            orientation="row"
-            ref={ref}
-        >
-            {Array.from({ length: 15 }, (_, index) => (
-                <FlexItem key={index}>
-                    <Card>{"Card Content"}</Card>
-                </FlexItem>
-            ))}
-        </Flex>
-    )
-})
-const OverlayVerticalDynamicMultiDirectional = () => (
-    <>
-        <Overlay
-            color="card_light"
-            dynamic
-            layout={{"x": "xl"}}
-        >
-            <InlineCardsExample />
-        </Overlay>
-    </>
-)
-export default OverlayVerticalDynamicMultiDirectional

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md DELETED Viewed

	@@ -1 +0,0 @@
1	- Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar. You must also add a `ref` to the child that's being passed through the Overlay.

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md DELETED Viewed

	@@ -1 +0,0 @@
1	- Progress pills start at `45px` wide if the container allows, but will shrink down to `1px` as the container gets smaller. Resize this window to see each pill shrink.

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb DELETED Viewed

	@@ -1 +0,0 @@
1	- <%= pb_rails("progress_pills", props: { aria: { label: "2 out of 5 steps complete" }, steps: 5, active: 2, full_width_pill: true }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx DELETED Viewed

@@ -1,18 +0,0 @@
-import React from 'react'
-import ProgressPills from '../_progress_pills'
-const ProgressPillsFullWidth = (props) => {
-    return (
-        <>
-            <ProgressPills
-                active={2}
-                aria={{ label: '2 out of 5 steps complete' }}
-                fullWidthPill
-                steps={5}
-                {...props}
-            />
-        </>
-    )
-}
-export default ProgressPillsFullWidth

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md DELETED Viewed

	@@ -1 +0,0 @@
1	- Pass `full_width_pill: true` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md DELETED Viewed

	@@ -1 +0,0 @@
1	- Pass `fullWidthPill` to the Progress Pill kit to get true 100% full width pills. The kit will take up the full width of the container that it is in.

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

@@ -1,47 +0,0 @@
-<%= 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: { cursor: "pointer", html_options: { onclick: "alert('Row 1 clicked')" } }) 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" }) do %>
-          <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
-        <% end %>
-      <% end %>
-      <%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 2 clicked')" } }) 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" }) do %>
-          <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
-        <% end %>
-      <% end %>
-      <%= pb_rails("table/table_row", props: { cursor: "pointer", html_options: { onclick: "alert('Row 3 clicked')" } }) 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" }) do %>
-          <%= pb_rails("icon", props: { color: "primary_action", fixed_width: true, icon: "chevron-right", size: "xs" }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx DELETED Viewed

@@ -1,88 +0,0 @@
-import React from 'react'
-import { Table, Icon } from 'playbook-ui'
-const TableWithClickableRows = (props) => {
-  return (
-      <Table
-          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.Header>{""}</Table.Header>
-              </Table.Row>
-          </Table.Head>
-          <Table.Body>
-              <Table.Row
-                  cursor="pointer"
-                  htmlOptions={{ onClick: () => alert("Row 1 clicked") }}
-                  {...props}
-              >
-                <Table.Cell>{"Value 1"}</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.Cell textAlign="right">
-                    <Icon
-                        color="primary_action"
-                        fixedWidth
-                        icon="chevron-right"
-                        size="xs"
-                        {...props}
-                    />
-                </Table.Cell>
-              </Table.Row>
-              <Table.Row
-                  cursor="pointer"
-                  htmlOptions={{ onClick: () => alert("Row 2 clicked") }}
-                  {...props}
-              >
-                  <Table.Cell>{"Value 1"}</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.Cell textAlign="right">
-                      <Icon
-                          color="primary_action"
-                          fixedWidth
-                          icon="chevron-right"
-                          size="xs"
-                          {...props}
-                      />
-                  </Table.Cell>
-              </Table.Row>
-              <Table.Row
-                  cursor="pointer"
-                  htmlOptions={{ onClick: () => alert("Row 3 clicked") }}
-                  {...props}
-              >
-                  <Table.Cell>{"Value 1"}</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.Cell textAlign="right">
-                      <Icon
-                          color="primary_action"
-                          fixedWidth
-                          icon="chevron-right"
-                          size="xs"
-                          {...props}
-                      />
-                  </Table.Cell>
-              </Table.Row>
-          </Table.Body>
-      </Table>
-  )
-}
-export default TableWithClickableRows

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

	@@ -1 +0,0 @@
1	- Clickable table rows do not require any additional props. This doc example showcases how to set them up using `html_options`/`htmlOptions` and click events. Using the global prop for cursor to set it to "pointer" is also recommended for better UX.

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>