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

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"}) %>

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.jsx

@@ -1,54 +0,0 @@
-import React from 'react'
-
-import Title from '../_title'
-
-const TitleDisplaySize = (props) => {
-  return (
-    <div>
-      <Title
-          displaySize="xs"
-          tag="h1"
-          text="Display Size xs"
-          {...props}
-      />
-      <Title
-          displaySize="sm"
-          tag="h1"
-          text="Display Size sm"
-          {...props}
-      />
-      <Title
-          displaySize="md"
-          tag="h1"
-          text="Display Size md"
-          {...props}
-      />
-      <Title
-          displaySize="lg"
-          tag="h1"
-          text="Display Size lg"
-          {...props}
-      />
-      <Title
-          displaySize="xl"
-          tag="h1"
-          text="Display Size xl"
-          {...props}
-      />
-      <Title
-          displaySize="xxl"
-          tag="h1"
-          text="Display Size xxl"
-          {...props}
-      />
-      <Title
-          size="display"
-          tag="h1"
-          text="This is a size of display"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default TitleDisplaySize

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.md

@@ -1 +0,0 @@
-Responsive sizes for large screens and tablets, perfect for digital signage.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb

@@ -1,39 +0,0 @@
-<%= pb_rails("flex", props: { orientation: "row", gap: "md" }) do %>
-  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
-    <%= pb_rails("button", props: {classname: "tooltip-delay", text: "1s delay"}) %>
-  <% end %>
-
-  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
-    <%= pb_rails("button", props: {classname: "tooltip-open-delay", text: "Open only"}) %>
-  <% end %>
-
-  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
-    <%= pb_rails("button", props: {classname: "tooltip-close-delay", text: "Close only"}) %>
-  <% end %>
-
-  <%= pb_rails("tooltip", props: {
-      trigger_element_selector: ".tooltip-delay",
-      tooltip_id: "delay-tooltip",
-      position: 'top',
-      delay_open: 1000,
-      delay_close: 1000
-    }) do %>
-        1s open/close delay 
-  <% end %>
-  <%= pb_rails("tooltip", props: {
-      trigger_element_selector: ".tooltip-open-delay",
-      tooltip_id: "open-tooltip",
-      position: 'top',
-      delay_open: 1000
-    }) do %>
-        1s open delay 
-  <% end %>
-  <%= pb_rails("tooltip", props: {
-      trigger_element_selector: ".tooltip-close-delay",
-      tooltip_id: "close-tooltip",
-      position: 'top',
-      delay_close: 1000
-    }) do %>
-        1s close delay 
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md

@@ -1,3 +0,0 @@
-Waits for the specified time when the event listener runs before triggering the tooltip.
-
-The `delay_open` and `delay_close` accept numbers in milliseconds. 1 second is 1000 milliseconds.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb

@@ -1,26 +0,0 @@
-<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
-  <%= pb_rails("flex/flex_item") do %>
-    <%= pb_rails("button", props: { text: "With Interaction", id: "tooltip-interaction"}) %>
-
-    <%= pb_rails("tooltip", props: {
-      trigger_element_selector: "#tooltip-interaction",
-      tooltip_id: "tooltip-with-interaction",
-      position: 'top',
-      interaction: true
-    }) do %>
-        You can copy me
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("flex/flex_item") do %>
-    <%= pb_rails("button", props: { text: "No Interaction", id: "tooltip-no-interaction"}) %>
-
-    <%= pb_rails("tooltip", props: {
-      trigger_element_selector: "#tooltip-no-interaction",
-      tooltip_id: "tooltip-without-interaction",
-      position: 'top',
-    }) do %>
-        I'm just a regular tooltip
-    <% end %>
-  <% end %>
-<% end %>