playbook_ui_docs 14.14.0.pre.alpha.revert4339revert4242play1633displaytitle6456 → 14.14.0.pre.rc.0

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb

@@ -1,24 +0,0 @@
-<%= pb_rails("button", props: { padding: "xs", margin_right: "sm", data: {"open-drawer": "drawer-4"} }) do %>
-    <%= pb_rails("icon", props: { icon: "bars", size: "2x" }) %>
-<% end %>
-
-<%= pb_rails("drawer", props: { 
-    id:"drawer-4", 
-    within_element: true,
-    placement: "bottom",
-    breakpoint: "md",
-    size: "full"
-}) do  %>
-    <%= pb_rails("nav", props: { display: {xl: "none", lg: "none", md: "none", sm: "block" } }) do %>
-        <%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
-        <%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
-        <%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
-        <%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
-    <% end %>
-    <%= pb_rails("nav", props: { display: {md: "block", sm: "none", xs: "none" }, orientation: "horizontal" }) do %>
-        <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
-        <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
-        <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
-        <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb

@@ -1,21 +0,0 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "No Overlay Drawer", margin_right: "sm", data: {"open-drawer": "drawer-10"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-10", 
-        overlay: false
-    }) do  %>
-        Test me (No Overlay)
-    <% end %>
-    
-    
-    <%= pb_rails("button", props: { text: "Overlay Drawer", data: {"open-drawer": "drawer-11"} }) %>
-    
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-11", 
-        placement: "right"
-    }) do  %>
-        Test me (Has Overlay)
-    <% end %>
-<% end %>
-

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md

@@ -1 +0,0 @@
-Click the button to close the drawer when there is no overlay.

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb

@@ -1,49 +0,0 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "XS Drawer", margin_right: "sm", data: {"open-drawer": "drawer-5"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-5", 
-        size: "xs"
-    }) do  %>
-        XS 
-    <% end %>
-    
-    <%= pb_rails("button", props: { text: "SM Drawer", margin_right: "sm", data: {"open-drawer": "drawer-6"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-6", 
-        size: "sm",
-        placement: "right"
-    }) do  %>
-        This is a small drawer 
-    <% end %>
-
-    <%= pb_rails("button", props: { text: "MD Drawer", margin_right: "sm", data: {"open-drawer": "drawer-7"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-7", 
-        size: "md"
-    }) do  %>
-        This is a medium drawer 
-    <% end %>
-
-    <%= pb_rails("button", props: { text: "LG Drawer", margin_right: "sm", data: {"open-drawer": "drawer-8"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-8", 
-        size: "lg",
-        placement: "right"
-    }) do  %>
-        This is a large drawer 
-    <% end %>
-
-    <%= pb_rails("button", props: { text: "XL Drawer", margin_right: "sm", data: {"open-drawer": "drawer-9"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-9", 
-        size: "xl"
-    }) do  %>
-        This is an extra large drawer 
-    <% end %>
-<% end %>
-

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import { IconButton } from 'playbook-ui'
-
-const IconButtonDefault = (props) => (
-  <div>
-    <IconButton
-        {...props}
-    />
-    <IconButton
-        {...props}
-        marginTop="md"
-        variant="link"
-    />
-  </div>
-)
-
-export default IconButtonDefault

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

@@ -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_icon_button/docs/_icon_button_sizes.jsx

@@ -1,61 +0,0 @@
-import React from 'react'
-import { IconButton, Flex } from 'playbook-ui'
-
-const IconButtonSizes = (props) => (
-  <div>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="lg"
-      />
-      <span>Large</span>
-    </Flex>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="sm"
-      />
-      <span>Small</span>
-    </Flex>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="xs"
-      />
-      <span>XSmall</span>
-    </Flex>
-    <Flex
-        align="center"
-        marginTop="md"
-    >
-      <IconButton
-          {...props}
-          size="1x"
-      />
-      <span>1x</span>
-    </Flex>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="2x"
-      />
-      <span>2x</span>
-    </Flex>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="3x"
-      />
-      <span>3x</span>
-    </Flex>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="4x"
-      />
-      <span>4x</span>
-    </Flex>
-  </div>
-)
-
-export default IconButtonSizes

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

@@ -1,2 +0,0 @@
-export { default as IconButtonDefault } from './_icon_button_default.jsx'
-export { default as IconButtonSizes } from './_icon_button_sizes.jsx'

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb

@@ -1,11 +0,0 @@
-<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", dynamic: true }) do %>
-    <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
-        <% 15.times do %>
-            <%= pb_rails("flex/flex_item") do %>
-                <%= pb_rails("card") do %>
-                    Card content
-                <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

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

@@ -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.md

@@ -1 +0,0 @@
-Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar.

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

@@ -1 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1 +0,0 @@
-<%= 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

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

@@ -1 +0,0 @@
-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

@@ -1 +0,0 @@
-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

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

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

@@ -1 +0,0 @@
-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

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

@@ -1,2 +0,0 @@
-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.
-__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

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