RubyGems - playbook_ui_docs - Versions diffs - 15.3.0.pre.alpha.play262912095 → 15.3.0.pre.rc.0 - Mend

playbook_ui_docs 15.3.0.pre.alpha.play262912095 → 15.3.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 (152) hide show

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx DELETED Viewed

@@ -1,68 +0,0 @@
-import React, { useState } from "react";
-import { PbReactPopover, CircleIconButton, Body, Flex } from "playbook-ui";
-const PopoverAppendTo = (props) => {
-  const [showParentPopover, setShowParentPopover] = useState(false);
-  const [showSelectorPopover, setShowSelectorPopover] = useState(false);
-  const parentPopoverReference = (
-    <CircleIconButton
-        icon="info"
-        onClick={() => setShowParentPopover(!showParentPopover)}
-        variant="secondary"
-    />
-  );
-  const selectorPopoverReference = (
-    <CircleIconButton
-        icon="info"
-        onClick={() => setShowSelectorPopover(!showSelectorPopover)}
-        variant="secondary"
-    />
-  );
-  return (
-    <>
-      <Flex
-          marginBottom="md"
-          orientation="row"
-          vertical="center"
-          {...props}
-      >
-        <Body text="Click info for more details" />
-        &nbsp;
-        <PbReactPopover
-            appendTo="parent"
-            offset
-            placement="top"
-            reference={parentPopoverReference}
-            show={showParentPopover}
-            {...props}
-        >
-          {'I\'m a popover. I have been appended to my parent element.'}
-        </PbReactPopover>
-      </Flex>
-      <Flex
-          orientation="row"
-          vertical="center"
-          {...props}
-      >
-        <Body text="Click info for more details" />
-        &nbsp;
-        <PbReactPopover
-            appendTo=".kit-show-wrapper"
-            offset
-            placement="top"
-            reference={selectorPopoverReference}
-            show={showSelectorPopover}
-            {...props}
-        >
-          {'I\'m a popover. I have been appended to the .kit-show-wrapper.'}
-        </PbReactPopover>
-      </Flex>
-    </>
-  );
-};
-export default PopoverAppendTo;

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to_react.md DELETED Viewed

	@@ -1 +0,0 @@
1	- By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `appendTo` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.jsx DELETED Viewed

@@ -1,38 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-const RichTextEditorAdvancedAttributes = (props) => {
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        content:"Add your text here. You can format your text, add links, quotes, and bullets."
-    })
-      if (!editor) {
-        return null
-      }
-  return (
-    <div>
-      <RichTextEditor
-          advancedEditor={editor}
-          aria={{ label: 'I am a rich text editor' }}
-          data={{ 'test-data': 'value', 'test-data2': 'value2' }}
-          {...props}
-      >
-        <EditorContent editor={editor}/>
-      </RichTextEditor>
-    </div>
-  )
-}
-export default RichTextEditorAdvancedAttributes

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.md DELETED Viewed

	@@ -1 +0,0 @@
1	- Aria labels and data attributes can also be added to the top level div for the RichTextEditor.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.jsx DELETED Viewed

@@ -1,34 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-const RichTextEditorAdvancedFocus = (props) => {
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        content:"Click inside to see the toolbar. Click outside to hide it."
-    })
-    if (!editor) {
-        return null
-    }
-  return (
-    <div>
-      <RichTextEditor
-          advancedEditor={editor}
-          focus
-          {...props}
-      >
-        <EditorContent editor={editor}/>
-      </RichTextEditor>
-    </div>
-  )
-}
-export default RichTextEditorAdvancedFocus

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.md DELETED Viewed

	@@ -1 +0,0 @@
1	- When the optional `focus` prop is set to true, the toolbar will only show once you click in to the RichTextEditor.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx DELETED Viewed

@@ -1,37 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-const RichTextEditorAdvancedInline = (props) => {
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        content:"Add your text here. You can format your text, add links, quotes, and bullets."
-    })
-      if (!editor) {
-        return null
-      }
-  return (
-    <div>
-      <RichTextEditor
-          advancedEditor={editor}
-          inline
-          {...props}
-      >
-        <EditorContent editor={editor}/>
-      </RichTextEditor>
-    </div>
-  )
-}
-export default RichTextEditorAdvancedInline

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md DELETED Viewed

	@@ -1 +0,0 @@
1	- When the optional `inline` prop is set to true, the editor borders and the toolbar will only be visible when hovered or focused on.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx DELETED Viewed

@@ -1,37 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-const RichTextEditorAdvancedSimple = (props) => {
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        content:"Add your text here. Use the simple toolbar above to format your text"
-    })
-      if (!editor) {
-        return null
-      }
-  return (
-    <div>
-      <RichTextEditor
-          advancedEditor={editor}
-          simple
-          {...props}
-      >
-        <EditorContent editor={editor}/>
-      </RichTextEditor>
-    </div>
-  )
-}
-export default RichTextEditorAdvancedSimple

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx DELETED Viewed

@@ -1,38 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-const RichTextEditorAdvancedSticky = (props) => {
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        content:"In this example, when you scroll down, the rich text editor's toolbar will scroll along with the page and it will no longer be visible at the top of the page. Dummy text to enable scroll.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis."
-    })
-      if (!editor) {
-        return null
-      }
-  return (
-    <div>
-      <RichTextEditor
-          advancedEditor={editor}
-          sticky
-          {...props}
-      >
-        <EditorContent editor={editor}/>
-      </RichTextEditor>
-    </div>
-  )
-}
-export default RichTextEditorAdvancedSticky

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md DELETED Viewed

	@@ -1 +0,0 @@
1	- Use the optional `sticky` prop to make the toolbar sticky on scroll.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.jsx DELETED Viewed

@@ -1,69 +0,0 @@
-import React, {useState, useEffect} from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-import Select from '../../pb_select/_select'
-import { changelog, release } from './templates.js'
-const RichTextEditorAdvancedTemplates = (props) => {
-const [editorContent, setEditorContent] = useState('')
-const handleChange = (event) => {
-        setEditorContent(event.target.value)
-}
-  const templatesOptions = [
-    {
-      value: release,
-      text: 'Playbook Release',
-    },
-    {
-      value: changelog,
-      text: 'Changelog',
-    },
-  ]
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        content: editorContent
-    })
-    // Update editor content when editorContent state changes
-    useEffect(() => {
-        if (editor && editorContent) {
-            editor.commands.setContent(editorContent)
-        }
-    }, [editor, editorContent])
-      if (!editor) {
-        return null
-      }
-  return (
-    <div>
-        <Select
-            blankSelection="Select a template..."
-            label="Template"
-            onChange={handleChange}
-            options={templatesOptions}
-            {...props}
-        />
-        <RichTextEditor
-            advancedEditor={editor}
-            {...props}
-        >
-        <EditorContent editor={editor}/>
-        </RichTextEditor>
-    </div>
-  )
-}
-export default RichTextEditorAdvancedTemplates

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.md DELETED Viewed

	@@ -1 +0,0 @@
1	- Tiptap allows you to set content within the editor using the 'content' prop within useEditor. See the code snippet below to see how this can be done.

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

@@ -1,63 +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, id: "11" }) do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text_align: "right", html_options: { onclick: "toggleArrows()" }}) do %>
-            <%= pb_rails("icon", props: {id: "chevron-icon-down", icon: "chevron-down", fixed_width: true, color: "primary" }) %>
-            <%= pb_rails("icon", props: {id: "chevron-icon-up", icon: "chevron-up", fixed_width: true, color: "primary" }) %>
-          <% end %>
-      <% end %>
-      <%= pb_rails("table/table_row") 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: ""}) %>
-      <% end %>
-      <%= pb_rails("table/table_row") 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: ""}) %>
-      <% end %>
-  <% end %>
-<% end %>
-<script>
-    const downArrow = document.getElementById("chevron-icon-down");
-    const upArrow = document.getElementById("chevron-icon-up");
-    upArrow.style.display = upArrow.style.display === 'none' ? 'inline-block' : 'none';
-    function toggleArrows() {
-        if (downArrow) {
-            downArrow.style.display = downArrow.style.display === 'none' ? 'inline-block' : 'none';
-        }
-        if (upArrow) {
-            upArrow.style.display = upArrow.style.display === 'none' ? 'inline-block' : 'none';
-        }
-    }
-</script>

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

@@ -1,89 +0,0 @@
-import React, { useState } from 'react'
-import Table from '../_table'
-import Icon from '../../pb_icon/_icon'
-import Card from '../../pb_card/_card'
-import Body from '../../pb_body/_body'
-const TableWithDynamicCollapsible = (props) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const handleToggleArrows = () => {
-    setIsOpen(!isOpen)
-  }
-  const Content = () => {
-    return (
-      <Card
-          borderNone
-          borderRadius="none"
-          padding="md"
-          {...props}
-      >
-        <Body {...props}>Nested content inside a Table Row</Body>
-      </Card>
-    );
-  };
-  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 collapsible
-            collapsibleContent={<Content />}
-            {...props}
-        >
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 1'}</Table.Cell>
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 2'}</Table.Cell>
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 3'}</Table.Cell>
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 4'}</Table.Cell>
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 5'}</Table.Cell>
-          <Table.Cell
-              htmlOptions={{ onClick: handleToggleArrows }}
-              textAlign="right"
-          >
-            {
-              <Icon
-                  color="primary"
-                  fixedWidth
-                  icon={isOpen ? 'chevron-up' : 'chevron-down'}
-              />}
-          </Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <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>{''}</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <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>{''}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
-export default TableWithDynamicCollapsible

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

@@ -1,4 +0,0 @@
-The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsible_content` prop to add any content to the collapsible Row.
-Please 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.
-Follow this example to make the icons dynamic following the state of the collapsible.

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

@@ -1,3 +0,0 @@
-The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.
-Follow this example to make the icons dynamic following the state of the collapsible.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.html.erb DELETED Viewed

@@ -1,64 +0,0 @@
-<%
-  grouped_options = [
-    {
-      label: "Warm Colors",
-      options: [
-        { label: "Red", value: "#FF0000" },
-        { label: "Orange", value: "#FFA500" },
-        { label: "Yellow", value: "#FFFF00" },
-        { label: "Coral", value: "#FF7F50" },
-        { label: "Gold", value: "#FFD700" }
-      ]
-    },
-    {
-      label: "Cool Colors",
-      options: [
-        { label: "Blue", value: "#0000FF" },
-        { label: "Teal", value: "#008080" },
-        { label: "Cyan", value: "#00FFFF" },
-        { label: "Navy", value: "#000080" },
-        { label: "Turquoise", value: "#40E0D0" }
-      ]
-    },
-    {
-      label: "Neutrals",
-      options: [
-        { label: "White", value: "#FFFFFF" },
-        { label: "Black", value: "#000000" },
-        { label: "Gray", value: "#808080" },
-        { label: "Beige", value: "#F5F5DC" },
-        { label: "Silver", value: "#C0C0C0" }
-      ]
-    },
-    {
-      label: "Earth Tones",
-      options: [
-        { label: "Brown", value: "#A52A2A" },
-        { label: "Olive", value: "#808000" },
-        { label: "Forest Green", value: "#228B22" },
-        { label: "Tan", value: "#D2B48C" },
-        { label: "Maroon", value: "#800000" }
-      ]
-    },
-    {
-      label: "Fun Shades",
-      options: [
-        { label: "Pink", value: "#FFC0CB" },
-        { label: "Magenta", value: "#FF00FF" },
-        { label: "Lime", value: "#00FF00" },
-        { label: "Purple", value: "#800080" },
-        { label: "Indigo", value: "#4B0082" }
-      ]
-    }
-  ]
-%>
-<br />
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-custom-options",
-    options: grouped_options,
-    label: "Colors",
-    name: :foo,
-    placeholder: "Select a Color...",
-    is_multi: false
-  })
-%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.jsx DELETED Viewed

@@ -1,70 +0,0 @@
-import React from 'react'
-import Typeahead from '../_typeahead'
-const groupedOptions = [
-  {
-    label: "Warm Colors",
-    options: [
-      { label: "Red", value: "#FF0000" },
-        { label: "Orange", value: "#FFA500" },
-        { label: "Yellow", value: "#FFFF00" },
-        { label: "Coral", value: "#FF7F50" },
-        { label: "Gold", value: "#FFD700" }
-      ]
-    },
-    {
-      label: "Cool Colors",
-      options: [
-        { label: "Blue", value: "#0000FF" },
-        { label: "Teal", value: "#008080" },
-        { label: "Cyan", value: "#00FFFF" },
-        { label: "Navy", value: "#000080" },
-        { label: "Turquoise", value: "#40E0D0" }
-      ]
-    },
-    {
-      label: "Neutrals",
-      options: [
-        { label: "White", value: "#FFFFFF" },
-        { label: "Black", value: "#000000" },
-        { label: "Gray", value: "#808080" },
-        { label: "Beige", value: "#F5F5DC" },
-        { label: "Silver", value: "#C0C0C0" }
-      ]
-    },
-    {
-      label: "Earth Tones",
-      options: [
-        { label: "Brown", value: "#A52A2A" },
-        { label: "Olive", value: "#808000" },
-        { label: "Forest Green", value: "#228B22" },
-        { label: "Tan", value: "#D2B48C" },
-        { label: "Maroon", value: "#800000" }
-      ]
-    },
-    {
-      label: "Fun Shades",
-      options: [
-        { label: "Pink", value: "#FFC0CB" },
-        { label: "Magenta", value: "#FF00FF" },
-        { label: "Lime", value: "#00FF00" },
-        { label: "Purple", value: "#800080" },
-        { label: "Indigo", value: "#4B0082" }
-      ]
-    }
-  ]
-const TypeaheadCustomOptions = (props) => {
-  return (
-    <Typeahead
-        label="Colors"
-        options={groupedOptions}
-        placeholder="Select a Color..."
-        {...props}
-    />
-  )
-}
-export default TypeaheadCustomOptions

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.md DELETED Viewed

	@@ -1 +0,0 @@
1	- Grouped options can be rendered via structuring the options in the way shown in the code snippet below.