playbook_ui_docs 15.2.0.pre.alpha.PLAY236711413 → 15.2.0.pre.alpha.PLAY256411551

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_typeahead/docs/_typeahead_default_options.html.erb

@@ -0,0 +1,36 @@
+<%
+  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' }
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    default_options: [{ label: 'Gray', value: '#808080' }],
+    id: "typeahead-default-value",
+    options: options,
+    label: "Colors",
+    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,41 @@
+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 TypeaheadDefaultValue = (props) => {
+  return (
+    <Typeahead
+        defaultValue={options[10]}
+        label="Colors"
+        options={options}
+        {...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,7 @@
 examples:
   rails:
     - typeahead_default: Default
+    - 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 +20,7 @@ examples:
 
   react:
     - typeahead_default: Default
+    - typeahead_default_value: With Default Value
     - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills

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

@@ -16,3 +16,4 @@ export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.j
 export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
 export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
 export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
+export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'