playbook_ui_docs 15.2.0 → 15.3.0.pre.alpha.PLAY2012currencyallownonstring11930

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

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

@@ -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_rich_text_editor/docs/example.yml

@@ -7,7 +7,7 @@ examples:
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates
-  - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview
 
@@ -17,11 +17,17 @@ examples:
   - rich_text_editor_more_extensions: Advanced (Extra Extensions)
   - rich_text_editor_toolbar_disabled: Advanced (Toolbar disabled)
   - rich_text_editor_simple: Simple
+  - rich_text_editor_advanced_simple: Advanced (Simple)
   - rich_text_editor_attributes: Attributes
+  - rich_text_editor_advanced_attributes: Advanced (Attributes)
   - rich_text_editor_focus: Focus
+  - rich_text_editor_advanced_focus: Advanced (Focus)
   - rich_text_editor_sticky: Sticky
+  - rich_text_editor_advanced_sticky: Advanced (Sticky)
   - rich_text_editor_templates: Templates
-  - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  - rich_text_editor_advanced_templates: Advanced (Templates)
+  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
+  - rich_text_editor_advanced_inline: Advanced (Inline)
   - rich_text_editor_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview

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

@@ -11,3 +11,9 @@ export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_ad
 export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
 export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
 export { default as RichTextEditorAdvancedPreview } from './_rich_text_editor_advanced_preview.jsx'
+export { default as RichTextEditorAdvancedSimple } from './_rich_text_editor_advanced_simple.jsx'
+export { default as RichTextEditorAdvancedFocus } from './_rich_text_editor_advanced_focus.jsx'
+export { default as RichTextEditorAdvancedTemplates } from './_rich_text_editor_advanced_templates.jsx'
+export { default as RichTextEditorAdvancedAttributes } from './_rich_text_editor_advanced_attributes.jsx'
+export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_advanced_sticky.jsx'
+export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'

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

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

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

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

@@ -0,0 +1,3 @@
+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_table/docs/example.yml

@@ -31,6 +31,7 @@ examples:
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
+    - table_with_dynamic_collapsible: Table with Dynamic Collapsible
     - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
     - table_with_collapsible_with_custom_content_rails: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows_rails: Table with Collapsible with Nested Rows
@@ -71,6 +72,7 @@ examples:
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
     - table_with_collapsible: Table with Collapsible
+    - table_with_dynamic_collapsible: Table with Dynamic Collapsible
     - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
     - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
     - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows

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

@@ -29,6 +29,7 @@ export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.
 export { default as TableStickyRightColumns } from './_table_sticky_right_columns.jsx'
 export { default as TableStickyColumns } from './_table_sticky_columns.jsx'
 export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
+export { default as TableWithDynamicCollapsible } from './_table_with_dynamic_collapsible.jsx'
 export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
 export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
 export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'

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

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

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

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

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.html.erb

@@ -0,0 +1,102 @@
+<%
+  options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#1e3d1eff' },
+  { label: 'Blue', value: '#0000FF' },
+  { label: 'Purple', value: '#800080' },
+  { label: 'Yellow', value: '#FFFF00' },
+  { label: 'Pink', value: '#FFC0CB' },
+  { label: 'Brown', value: '#A52A2A' },
+  { label: 'Black', value: '#000000' },
+  { label: 'White', value: '#FFFFFF' },
+  { label: 'Gray', value: '#808080' },
+  { label: 'Cyan', value: '#00FFFF' },
+  { label: 'Magenta', value: '#FF00FF' },
+  { label: 'Lime', value: '#00FF00' },
+  { label: 'Maroon', value: '#800000' },
+  { label: 'Olive', value: '#808000' },
+  { label: 'Navy', value: '#000080' },
+  { label: 'Teal', value: '#008080' },
+  { label: 'Silver', value: '#C0C0C0' },
+  { label: 'Gold', value: '#FFD700' },
+  { label: 'Beige', value: '#F5F5DC' },
+  { label: 'Coral', value: '#FF7F50' }
+  ]
+%>
+
+<%
+  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" }
+      ]
+    }
+  ]
+%>
+
+
+<%= pb_rails("typeahead", props: {
+    default_options: [{ label: 'Gray', value: '#808080' }],
+    id: "typeahead-default-value",
+    options: options,
+    label: "Default Value with basic options",
+    name: :foo,
+    is_multi: false
+  })
+%>
+
+<%= pb_rails("typeahead", props: {
+    default_options:[{ label: "Pink", value: "#FFC0CB" }],
+    id: "typeahead-default-value-grouped-options",
+    options: grouped_options,
+    label: "Default Value with grouped options",
+    name: :foo,
+    is_multi: false
+  })
+%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.md

@@ -0,0 +1 @@
+The optional `default_options` prop can be used to set a default value for the kit. When a default value is set, focus will be automatically set to the selected option and the dropdown container will scroll to bring the selected option into view. 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.jsx

@@ -0,0 +1,103 @@
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#1e3d1eff' },
+  { label: 'Blue', value: '#0000FF' },
+  { label: 'Purple', value: '#800080' },
+  { label: 'Yellow', value: '#FFFF00' },
+  { label: 'Pink', value: '#FFC0CB' },
+  { label: 'Brown', value: '#A52A2A' },
+  { label: 'Black', value: '#000000' },
+  { label: 'White', value: '#FFFFFF' },
+  { label: 'Gray', value: '#808080' },
+  { label: 'Cyan', value: '#00FFFF' },
+  { label: 'Magenta', value: '#FF00FF' },
+  { label: 'Lime', value: '#00FF00' },
+  { label: 'Maroon', value: '#800000' },
+  { label: 'Olive', value: '#808000' },
+  { label: 'Navy', value: '#000080' },
+  { label: 'Teal', value: '#008080' },
+  { label: 'Silver', value: '#C0C0C0' },
+  { label: 'Gold', value: '#FFD700' },
+  { label: 'Beige', value: '#F5F5DC' },
+  { label: 'Coral', value: '#FF7F50' }
+]
+
+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 TypeaheadDefaultValue = (props) => {
+  return (
+    <>
+      <Typeahead
+          defaultValue={options[10]}
+          label="Default Value with basic options"
+          options={options}
+          {...props}
+      />
+      <br />
+      <Typeahead
+          defaultValue={{ label: "Pink", value: "#FFC0CB" }}
+          label="Default Value with grouped options"
+          options={groupedOptions}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadDefaultValue

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.md

@@ -0,0 +1 @@
+The optional `defaultValue` prop can be used to set a default value for the kit. When a default value is set, focus will be automatically set to the selected option and the dropdown container will scroll to bring the selected option into view. 

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

@@ -1,6 +1,8 @@
 examples:
   rails:
     - typeahead_default: Default
+    - typeahead_custom_options: With Grouped Options
+    - typeahead_default_options: With Default Options
     - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
     - typeahead_without_pills: Without Pills (Single Select)
@@ -19,6 +21,8 @@ examples:
 
   react:
     - typeahead_default: Default
+    - typeahead_custom_options: With Grouped Options
+    - typeahead_default_value: With Default Value
     - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills