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

data/app/pb_kits/playbook/pb_icon_button/icon_button.test.jsx

@@ -1,39 +0,0 @@
-import { ensureAccessible, renderKit } from '../utilities/test-utils'
-
-import { IconButton } from 'playbook-ui'
-
-const props = {
-  data: { testid: 'default', icon: 'plus' }
-}
-
-test('default test', () => {
-  const kit = renderKit(IconButton, props)
-
-  expect(kit).toBeInTheDocument()
-  expect(kit).toHaveClass('pb_icon_button_kit_default')
-
-  const iconElement = kit.querySelector('.icon_button_icon')
-  expect(iconElement).toBeInTheDocument()
-})
-
-it("should be accessible", async () => {
-  ensureAccessible(IconButton, props)
-})
-
-test('passes link variant prop', () => {
-  const kit = renderKit(IconButton, { ...props, variant: "link" })
-  expect(kit).toBeInTheDocument()
-  expect(kit).toHaveClass('pb_icon_button_kit_link')
-})
-
-test('should set button type to "submit" when htmlType prop is passed', () => {
-  const kit = renderKit(IconButton, { ...props, htmlType: 'submit' })
-  const buttonElement = kit.querySelector('button')
-  expect(buttonElement).toHaveAttribute('type', 'submit')
-})
-
-test('passes custom classname', () => {
-  const kit = renderKit(IconButton, { ...props, className: "extra_class" })
-  expect(kit).toBeInTheDocument()
-  expect(kit).toHaveClass('pb_icon_button_kit_default extra_class')
-})

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_overlay/index.js

@@ -1,61 +0,0 @@
-import PbEnhancedElement from '../pb_enhanced_element'
-
-const OVERLAY_SELECTOR = '[data-pb-overlay]'
-const OVERLAY_SCROLL_ELEMENT = '[data-overlay-scroll-element]'
-const PREVIOUS_OVERLAY_CLASSNAME = '[data-previous-overlay-classname]'
-const SUBSEQUENT_OVERLAY_CLASSNAME = '[data-subsequent-overlay-classname]'
-
-export default class PbOverlay extends PbEnhancedElement {
-    static get selector() {
-        return OVERLAY_SELECTOR
-    }
-
-    get target() {
-        return this.element.querySelector(OVERLAY_SCROLL_ELEMENT).children[0]
-    }
-
-    connect() {
-        this.handleOverlayDynamic()
-    }
-
-    handleOverlayDynamic() {
-        const isOverlayDynamic = this.element.dataset?.overlayDynamic
-
-        if (isOverlayDynamic) {
-            const previousOverlayElement = this.element.querySelector(PREVIOUS_OVERLAY_CLASSNAME)
-            const previousOverlayClassname = previousOverlayElement?.dataset?.previousOverlayClassname
-            const subsequentOverlayElement = this.element.querySelector(SUBSEQUENT_OVERLAY_CLASSNAME)
-            const subsequentOverlayClassname = subsequentOverlayElement?.dataset?.subsequentOverlayClassname
-
-            const handleScrollChange = (target) => {
-                const { scrollLeft, scrollWidth, clientWidth } = target
-                const isScrollAtStart = scrollLeft === 0
-                const isScrollAtEnd = scrollLeft + clientWidth >= scrollWidth - 1
-        
-                if (isScrollAtStart) {
-                    previousOverlayElement.classList.remove(previousOverlayClassname)
-                } else {
-                    previousOverlayElement.classList.add(previousOverlayClassname)
-                }
-        
-                if (isScrollAtEnd) {
-                    subsequentOverlayElement.classList.remove(subsequentOverlayClassname)
-                } else {
-                    subsequentOverlayElement.classList.add(subsequentOverlayClassname)
-                }
-            }
-
-            this.target.addEventListener('scroll', (event) => {
-                handleScrollChange(event.target)
-            })
-
-            handleScrollChange(this.target)
-        }
-    }
-
-    disconnect() {
-        if (this.element.dataset?.overlayDynamic) {
-            this.target.removeEventListener('scroll')
-        }
-    }
-}

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_select/index.js

@@ -1,38 +0,0 @@
-import PbEnhancedElement from "../pb_enhanced_element";
-
-const SELECT_WRAPPER_SELECTOR = "[data-pb-select]";
-const SELECT_VALIDATION_MESSAGE_CLASS = ".pb_body_kit_negative";
-
-export default class PbSelect extends PbEnhancedElement {
-  static get selector() {
-    return SELECT_WRAPPER_SELECTOR;
-  }
-
-  connect() {
-    this.setValidationMessage();
-  }
-
-  setValidationMessage() {
-    const validationMessage = this.element.dataset?.validationMessage;
-
-    if (validationMessage) {
-      const selectElement = this.element.querySelector("select");
-      const setErrorTextContent = (text, timeout) => {
-        setTimeout(() => {
-          const errorMessageElement = this.element.querySelector(SELECT_VALIDATION_MESSAGE_CLASS);
-          if (errorMessageElement) {
-            errorMessageElement.textContent = text;
-          } else {
-            setErrorTextContent(text, 100);
-          }
-        }, timeout);
-      };
-
-      selectElement.addEventListener("change", (e) => {
-        if (!e.target.checkValidity()) {
-          setErrorTextContent(validationMessage, 300);
-        }
-      });
-    }
-  }
-}

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>

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.

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.html.erb

@@ -1,7 +0,0 @@
-<%= pb_rails("title", props: { text: "Display Size xs", tag: "h1", display_size: "xs" }) %>
-<%= pb_rails("title", props: { text: "Display Size sm", tag: "h1", display_size: "sm" }) %>
-<%= pb_rails("title", props: { text: "Display Size md", tag: "h1", display_size: "md" }) %>
-<%= pb_rails("title", props: { text: "Display Size lg", tag: "h1", display_size: "lg" }) %>
-<%= pb_rails("title", props: { text: "Display Size xl", tag: "h1", display_size: "xl" }) %>
-<%= pb_rails("title", props: { text: "Display Size xxl", tag: "h1", display_size: "xxl" }) %>
-<%= pb_rails("title", props: { text: "This is a size of display", tag: "h1", size: "display"}) %>