playbook_ui_docs 13.34.1 → 14.0.0.pre.alpha.PLAY14113475

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

@@ -0,0 +1,61 @@
+<div id="outer-container">
+    <%= pb_rails("overlay", props: { id: "overlay-container", overflow: "hidden" }) do %>
+        <div id="underlying-table">
+            <%= pb_rails("table", props: { size: "sm" }) do %>
+                <thead>
+                    <tr>
+                        <th>Column 1</th>
+                        <th>Column 2</th>
+                        <th>Column 3</th>
+                        <th>Column 4</th>
+                        <th>Column 5</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <% 7.times do %>
+                        <tr>
+                            <td>Value 1</td>
+                            <td>Value 2</td>
+                            <td>Value 3</td>
+                            <td>Value 4</td>
+                            <td>Value 5</td>
+                        </tr>
+                    <% end %>   
+                </tbody>
+            <% end %>
+        </div>
+    <% end %>
+    <%= pb_rails("button", props: { text: "Show More", id: "show-more-button", variant: "link", full_width: true, icon: "chevron-down", icon_right: true }) %>
+    <%= pb_rails("button", props: { text: "Show Less", id: "show-less-button", variant: "link", full_width: true, icon: "chevron-up", icon_right: true }) %>
+</div>
+
+<script type="text/javascript">
+document.addEventListener("DOMContentLoaded", () => {
+  const showMoreButton = document.getElementById("show-more-button");
+  const showLessButton = document.getElementById("show-less-button");
+  const overlayContainer = document.getElementById("overlay-container");
+  const underlyingTable = document.getElementById("underlying-table");
+  const outerContainer = document.getElementById("outer-container");
+
+  showLessButton.style.display = "none";
+  underlyingTable.style.height = "200px";
+
+  const showMore = () => {
+    outerContainer.appendChild(underlyingTable);
+    outerContainer.appendChild(showLessButton);
+    showMoreButton.style.display = "none";
+    showLessButton.style.display = "flex";
+    underlyingTable.style.height = "auto";
+  };
+
+  const showLess = () => {
+    overlayContainer.appendChild(underlyingTable);
+    showMoreButton.style.display = "flex";
+    showLessButton.style.display = "none";
+    underlyingTable.style.height = "200px";
+  };
+
+  showMoreButton.addEventListener("click", showMore);
+  showLessButton.addEventListener("click", showLess);
+});
+</script>

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

@@ -0,0 +1,70 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from "react";
+import { Overlay, Table, Button } from "playbook-ui";
+
+const TableExample = () => {
+    return (
+        <Table size="sm">
+            <thead>
+                <tr>
+                    <th>{"Column 1"}</th>
+                    <th>{"Column 2"}</th>
+                    <th>{"Column 3"}</th>
+                    <th>{"Column 4"}</th>
+                    <th>{"Column 5"}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 7 }, (_, index) => (
+                    <tr key={index}>
+                        {Array.from({ length: 5 }, (_, columnIndex) => (
+                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </Table>
+    );
+};
+
+const OverlayToggle = () => {
+    const [showOverlay, setShowOverlay] = useState(true);
+
+    return (
+        <>
+            {showOverlay ? (
+                <>
+                    <Overlay overflow="hidden">
+                        <div style={{ height: 200 }}>
+                            <TableExample />
+                        </div>
+                    </Overlay>
+                    <Button
+                        fullWidth
+                        icon="chevron-down"
+                        iconRight
+                        key="chevron-down"
+                        onClick={() => setShowOverlay(false)}
+                        text="Show More"
+                        variant="link"
+                    />
+                </>
+            ) : (
+                <>
+                    <TableExample />
+                    <Button
+                        fullWidth
+                        icon="chevron-up"
+                        iconRight
+                        key="chevron-up"
+                        onClick={() => setShowOverlay(true)}
+                        text="Show Less"
+                        variant="link"
+                    />
+                </>
+            )}
+        </>
+    );
+};
+
+export default OverlayToggle;

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

@@ -0,0 +1 @@
+To toggle an overlay, add a button with an event handler. Remove the overlay container to reveal the underlying content. Re-wrap the overlay container to add the overlay back.

data/app/pb_kits/playbook/pb_overlay/docs/example.yml

@@ -2,7 +2,9 @@ examples:
   react:
   - overlay_default: Default
   - overlay_multi_directional: Multi-directional
+  - overlay_toggle: Toggle
 
   rails:
-    - overlay_default: Default
-    - overlay_multi_directional: Multi-directional
+  - overlay_default: Default
+  - overlay_multi_directional: Multi-directional
+  - overlay_toggle: Toggle

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

@@ -1,2 +1,3 @@
 export { default as OverlayDefault } from './_overlay_default.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
+export { default as OverlayToggle } from './_overlay_toggle.jsx'

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
-import { Caption, Passphrase, ProgressSimple } from '../..'
+import { Caption, Passphrase, ProgressSimple } from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 const PassphraseBreached = (props) => {

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
-import {Body, Caption, Passphrase, ProgressSimple} from '../..'
+import {Body, Caption, Passphrase, ProgressSimple} from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 const PassphraseCommon = (props) => {

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-import {Body, Passphrase} from '../..'
+import {Body, Passphrase} from 'playbook-ui'
 
 const PassphraseConfirmation = (props) => {
   const [input, setInput] = useState('')

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-import { Body, Caption, Passphrase, ProgressSimple, TextInput } from '../..'
+import { Body, Caption, Passphrase, ProgressSimple, TextInput } from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { useEffect } from 'react'
 
-import { Caption, Passphrase, ProgressSimple, TextInput} from '../..'
+import { Caption, Passphrase, ProgressSimple, TextInput} from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 const PassphraseStrengthChange = (props) => {

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import { Body, PhoneNumberInput } from '../..'
+import { Body, PhoneNumberInput } from 'playbook-ui'
 
 const PhoneNumberInputAccessInputElement = (props) => {
     // 1. Create a ref - this accesses the kit's input element.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import { Button, PhoneNumberInput } from '../..'
+import { Button, PhoneNumberInput } from 'playbook-ui'
 
 const PhoneNumberInputClearField = (props) => {
     // 1. Create a ref - this accesses the kit's input element.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PhoneNumberInput } from '../../'
+import { PhoneNumberInput } from 'playbook-ui'
 
 const PhoneNumberInputDefault = (props) => (
     <>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PhoneNumberInput } from '../../'
+import { PhoneNumberInput } from 'playbook-ui'
 
 const PhoneNumberInitialCountry = (props) => (
     <>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PhoneNumberInput } from '../../'
+import { PhoneNumberInput } from 'playbook-ui'
 
 const PhoneNumberInputOnlyCountries = (props) => (
   <>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PhoneNumberInput } from '../../'
+import { PhoneNumberInput } from 'playbook-ui'
 
 const PhoneNumberInputPreferredCountries = (props) => (
   <>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Button, FixedConfirmationToast, PhoneNumberInput } from "../../";
+import { Button, FixedConfirmationToast, PhoneNumberInput } from "playbook-ui";
 
 const PhoneNumberInputValidation = (props) => {
     const [formErrors, setFormErrors] = useState("");

data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx

@@ -5,7 +5,7 @@ import {
   CircleIconButton,
   Flex,
   PbReactPopover,
-} from '../..'
+} from 'playbook-ui'
 
 const PopoverActionableContent = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx

@@ -3,7 +3,7 @@ import {
   Button,
   Flex,
   PbReactPopover,
-} from '../..'
+} from 'playbook-ui'
 
 const PopoverClose = (props) => {
   const [showInsidePopover, setInsideShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx

@@ -4,7 +4,7 @@ import {
   CircleIconButton,
   Flex,
   PbReactPopover,
-} from '../..'
+} from 'playbook-ui'
 
 const PopoverDefault = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx

@@ -6,7 +6,7 @@ import {
   ListItem,
   PbReactPopover,
   Flex,
-} from '../..'
+} from 'playbook-ui'
 
 const PopoverWithButton = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx

@@ -4,7 +4,7 @@ import {
   Button,
   PbReactPopover,
   Title,
-} from '../..'
+} from 'playbook-ui'
 
 const PopoverScrollHeight = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx

@@ -3,7 +3,7 @@ import {
   Body,
   Button,
   PbReactPopover,
-} from '../..'
+} from 'playbook-ui'
 
 const PopoverZIndex = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_align.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ProgressSimple } from '../..'
+import { ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleAlign = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ProgressSimple } from '../..'
+import { ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleDefault = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, ProgressSimple } from '../..'
+import { Flex, ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleFlex = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ProgressSimple } from '../..'
+import { ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleMuted = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ProgressSimple } from '../..'
+import { ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleValue = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ProgressSimple } from '../..'
+import { ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleVariants = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ProgressSimple } from '../..'
+import { ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleValue = () => {
   return (

data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, Radio } from '../../'
+import { Flex, Radio } from 'playbook-ui'
 
 const RadioAlignment = (props) => {
   return (

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Radio } from '../..'
+import { Radio } from 'playbook-ui'
 
 const RadioError = (props) => {
   return (

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../..'
+import { RichTextEditor } from 'playbook-ui'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import Link from '@tiptap/extension-link'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../../'
+import { RichTextEditor } from 'playbook-ui'
 
 const RichTextEditorAttributes = (props) => (
   <div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { RichTextEditor } from '../../'
+import { RichTextEditor } from 'playbook-ui'
 
 const RichTextEditorDefault = (props) => {
   const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../../'
+import { RichTextEditor } from 'playbook-ui'
 
 const RichTextEditorFocus = (props) => (
   <>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../../'
+import { RichTextEditor } from 'playbook-ui'
 
 const RichTextEditorInline = (props) => (
   <div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../..'
+import { RichTextEditor } from 'playbook-ui'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import Link from '@tiptap/extension-link'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx

@@ -3,7 +3,7 @@ import {
   Button,
   Card,
   RichTextEditor,
-} from '../../'
+} from 'playbook-ui'
 
 const RichTextEditorPreview = (props) => {
   const [showPreview, setShowPreview] = useState(false)
@@ -21,7 +21,7 @@ const RichTextEditorPreview = (props) => {
           onChange={handleChange}
           {...props}
       />
-      <If condition={showPreview}>
+      {showPreview && (
         <Card marginTop="md">
           <div
               className="trix-content"
@@ -30,9 +30,10 @@ const RichTextEditorPreview = (props) => {
               id="preview-content"
           />
         </Card>
-        <Else />
+      )}
+      {!showPreview && (
         <div />
-      </If>
+      )}
       <Button
           id="preview-button"
           marginTop="md"

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../../'
+import { RichTextEditor } from 'playbook-ui'
 
 const RichTextEditorSimple = (props) => (
   <div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../../'
+import { RichTextEditor } from 'playbook-ui'
 
 const RichTextEditorSticky = (props) => (
   <div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { RichTextEditor, Select } from '../../'
+import { RichTextEditor, Select } from 'playbook-ui'
 import { changelog, release } from './templates.js'
 
 const RichTextEditorTemplates = (props) => {

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from '../../'
+import { RichTextEditor } from 'playbook-ui'
 
 const RichTextEditorToolbarBottom = (props) => (
   <div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 
-import { RichTextEditor } from "../..";
+import { RichTextEditor } from "playbook-ui";
 
 import Document from "@tiptap/extension-document";
 import Paragraph from "@tiptap/extension-paragraph";

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SectionSeparator, Card, Caption } from '../../'
+import { SectionSeparator, Card, Caption } from 'playbook-ui'
 
 const children = (
     <Card

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SectionSeparator } from '../../'
+import { SectionSeparator } from 'playbook-ui'
 
 const SectionSeparatorDashed = (props) => {
     return (

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SectionSeparator } from '../../'
+import { SectionSeparator } from 'playbook-ui'
 
 const SectionSeparatorLine = (props) => {
   return (

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SectionSeparator } from '../../'
+import { SectionSeparator } from 'playbook-ui'
 
 const SectionSeparatorText = (props) => {
   return (

data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body, Select } from '../..'
+import { Body, Select } from 'playbook-ui'
 
 const SelectError = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body, Select } from '../..'
+import { Body, Select } from 'playbook-ui'
 
 const SelectInline = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body, Select } from '../..'
+import { Body, Select } from 'playbook-ui'
 
 const SelectInlineCompact = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body, Select } from '../..'
+import { Body, Select } from 'playbook-ui'
 
 const SelectInlineShowArrow = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_error.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Body, SelectableCard, Title } from '../..'
+import { Body, SelectableCard, Title } from 'playbook-ui'
 
 const SelectableCardError = (props) => {
   const [football, setFootball] = useState(false)

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SelectableList } from '../..'
+import { SelectableList } from 'playbook-ui'
 
 const SelectableListDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SelectableList } from '../..'
+import { SelectableList } from 'playbook-ui'
 
 const SelectableListDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_star_rating/docs/example.yml

@@ -6,6 +6,7 @@ examples:
     - star_rating_hide: Layout Options
     - star_rating_number_config: Number Config
     - star_rating_size_options: Size Options
+    - star_rating_interactive: Interactive
 
   react:
     - star_rating_default: Default
@@ -13,4 +14,5 @@ examples:
     - star_rating_background_options: Background Options
     - star_rating_hide: Layout Options
     - star_rating_number_config: Number Config
-    - star_rating_size_options: Size Options
+    - star_rating_size_options: Size Options
+    - star_rating_interactive: Interactive

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StatChange } from '../../'
+import { StatChange } from 'playbook-ui'
 
 const StatChangeDefault = (props) => {
   return (