playbook_ui_docs 16.1.0.pre.alpha.play274314216 → 16.1.0.pre.alpha.play276813969

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6775cc2ab89c0bbdf9e5b59da52a34ab6de976622b085ba4e8c644572688997c
-  data.tar.gz: 006a47614f2364fa6a354fe2ed997be0b5e879efe6079c905aa5a49eb6995142
+  metadata.gz: 11d0012d77869d1845690030b1b4cc5fc0c7855c2df99c66ce27b329ba3fa395
+  data.tar.gz: 960f2773df91b8b89776f90e4de1b2d1cab417ed6ccb3b4f5d94fc69d4c35354
 SHA512:
-  metadata.gz: f3aeddd0520bd8229940fac0f6c38d30212cae2b8d217b1b4b8c4734e40b75582b3f4646268606782c008a5d2140a158e526839cd1552f534d6f0d6e1997a635
-  data.tar.gz: 35d1b486e7d0a704df53d2969e9c515efab0da4833e6fda6b4ba42c7fccd47277563c8d3ea079d93782876c603a0b5bdefc6ee333e5cd87433b847d8f50ed3b4
+  metadata.gz: 779a96546ec7a33099f60c1b57a61b73015a6b26315ec742728e6cf547e503f7daf691d1c33282bdad6b9e3c84c357dd07d06ab752b847a46c8c76ea2f5d02dc
+  data.tar.gz: 3f76deb202a605fc9b7f8bf882aad34cfea3877886917570105fca81147abb3d42721e20e750e7fd79943272cc5d91bc6021cb66a1fc3300cc634ed5d746b6a0

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md

@@ -2,4 +2,4 @@ the `enableSorting` prop is a boolean prop set to false by default. If true, the
 
 ### sortIcon
 
-An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-wide-short", "arrow-down-short-wide"]`. All strings must be valid FA icons.
+An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-short-wide", "arrow-down-short-wide"]`. All strings must be valid FA icons.

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

@@ -78,7 +78,6 @@ examples:
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
   - advanced_table_column_styling_background: Column Styling Background Color
-  - advanced_table_column_styling_background_custom: Column Styling Background Color (Custom)
   - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color

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

@@ -47,5 +47,4 @@ export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
 export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
-export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
-export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'

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

@@ -8,7 +8,6 @@ examples:
     - checkbox_indeterminate: Indeterminate Checkbox
     - checkbox_disabled: Disabled Checkbox
     - checkbox_form: Form and Hidden Input
-    # - checkbox_required_indicator: Required Indicator
 
   react:
   - checkbox_default: Default
@@ -18,7 +17,6 @@ examples:
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
   - checkbox_disabled: Disabled Checkbox
-  # - checkbox_required_indicator: Required Indicator
 
   swift:
     - checkbox_default_swift: Default

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

@@ -5,4 +5,3 @@ export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
 export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
-export { default as CheckboxRequiredIndicator } from './_checkbox_required_indicator.jsx'

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -28,7 +28,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("textarea", props: {id: "default"}) %>
+        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx

@@ -4,7 +4,7 @@ import Body from '../../pb_body/_body'
 import Button from '../../pb_button/_button'
 import Caption from '../../pb_caption/_caption'
 import Dialog from '../../pb_dialog/_dialog'
-import Textarea from '../../pb_textarea/_textarea'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 import Typeahead from '../../pb_typeahead/_typeahead'
 
 const DialogCompound = () => {
@@ -25,12 +25,8 @@ const DialogCompound = () => {
           <Body>{'What do you need us to take care of?'}</Body>
         </Dialog.Header>
         <Dialog.Body>
-          <Textarea
-              id="default-example-1"
-              label="Description"
-              rows={4}
-          />
           <Caption marginBottom="xs">{'Description'}</Caption>
+          <RichTextEditor />
           <br />
           <Caption>
             {

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.html.erb

@@ -12,7 +12,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("textarea", props: {id: "default-7"}) %>
+        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
 
@@ -31,7 +31,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("textarea", props: {id: "default-8"}) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
     
@@ -49,7 +49,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("textarea", props: {id: "default-9"}) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
     

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx

@@ -5,7 +5,7 @@ import Button from '../../pb_button/_button'
 import Dialog from '../../pb_dialog/_dialog'
 import Flex from '../../pb_flex/_flex'
 import Caption from '../../pb_caption/_caption'
-import Textarea from '../../pb_textarea/_textarea'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 import Typeahead from '../../pb_typeahead/_typeahead'
 
 const useDialog = (visible = false) => {
@@ -77,11 +77,8 @@ const DialogFullHeight = () => {
               <Body>{title}</Body>
             </Dialog.Header>
             <Dialog.Body>
-              <Textarea
-                  id="default-example-1"
-                  label="Description"
-                  rows={4}
-              />
+              <Caption marginBottom="xs">{"Description"}</Caption>
+              <RichTextEditor />
               <br />
               <Caption>
                 {

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb

@@ -13,7 +13,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("textarea", props: {id: "default-2"}) %>
+        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
     <% end %>
@@ -32,7 +32,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("textarea", props: {id: "default-3"}) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <% end %>
@@ -50,7 +50,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("textarea", props: {id: "default-4"}) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx

@@ -5,7 +5,7 @@ import Button from '../../pb_button/_button'
 import Dialog from '../../pb_dialog/_dialog'
 import Flex from '../../pb_flex/_flex'
 import Caption from '../../pb_caption/_caption'
-import Textarea from "../../pb_textarea";
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 import Typeahead from '../../pb_typeahead/_typeahead'
 
 const useDialog = (visible = false) => {
@@ -76,11 +76,8 @@ const DialogFullHeightPlacement = () => {
               <Body>{title}</Body>
             </Dialog.Header>
             <Dialog.Body>
-              <Textarea
-                  id="default-example-2"
-                  label="Description"
-                  rows={4}
-              />
+              <Caption marginBottom="xs">{"Description"}</Caption>
+              <RichTextEditor />
               <br />
               <Caption>
                 {

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb

@@ -76,7 +76,7 @@
     const option   = e.detail;
     const dropdown = e.target;
 
-    const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
+    const display = dropdown.querySelector("#dropdown_trigger_custom_display");
     if (!display) return;
 
     const nameEl = display.querySelector("#dropdown-avatar-name");

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb

@@ -1,17 +1,14 @@
 <%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
-  <%= form.typeahead :example_typeahead_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
   <%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
-  <%# <%= form.check_box :example_checkbox, props: { label: true, text: "Checkbox Label", required: true, required_indicator: true } %>
-  <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -14,7 +14,6 @@ examples:
   - collapsible_nav: Collapsible Nav
   - collapsible_nav_with_all_options: Collapsible Nav With Options
   - collapsible_nav_no_icon: Collapsible Nav No Icon
-  - collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
@@ -43,7 +42,6 @@ examples:
   - collapsible_nav_item_spacing: Collapsible Nav With ItemSpacing
   - collapsible_nav_custom: Collapsible Nav With Custom Toggling
   - collapsible_nav_no_icon: Collapsible Nav No Icon
-  - collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
@@ -64,3 +62,9 @@ examples:
   - nav_horizontal_subtle_no_highlight_swift: Horizontal Subtle No Highlight
   - nav_horizontal_bold_swift: Horizontal Bold
   - nav_props_swift: ""
+
+
+
+  
+
+  

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

@@ -22,5 +22,4 @@ export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_sp
 export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
 export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
 export { default as HorizontalNavDisabled } from './_horizontal_nav_disabled.jsx'
-export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
-export { default as CollapsibleNavDisabledItem } from './_collapsible_nav_disabled_item.jsx'
+export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'

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

@@ -22,7 +22,6 @@ const RichTextEditorAdvancedRequiredIndicator = (props) => {
     <div>
       <RichTextEditor
           advancedEditor={editor}
-          id={"required-advanced"}
           label="Label"
           requiredIndicator
           {...props}

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("rich_text_editor", props: {
+  aria: { label: "rich-textarea" },
+  data: { key: "value", key2: "value2" },
+  name: "textarea-label",
+}) %>

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

@@ -1,16 +1,12 @@
 import React from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { TrixEditor } from 'react-trix'
-import Trix from 'trix'
 
 const RichTextEditorAttributes = (props) => (
   <div>
     <RichTextEditor
-        TrixEditor={TrixEditor}
         aria={{ label: 'rich textarea' }}
         data={{ key: 'value', key2: 'value2' }}
         name="name-attribute"
-        trixInstance={Trix}
         {...props}
     />
   </div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("rich_text_editor", props: {input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "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_default.jsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { TrixEditor } from 'react-trix' 
-import Trix from 'trix'
 
 const RichTextEditorDefault = (props) => {
   const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
@@ -10,9 +8,7 @@ const RichTextEditorDefault = (props) => {
   return (
     <div>
       <RichTextEditor
-          TrixEditor={TrixEditor}
           onChange={handleOnChange}
-          trixInstance={Trix}
           value={value}
           {...props}
       />

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("rich_text_editor", props: {focus: true}) %>
+<br>
+<%= pb_rails("rich_text_editor", props: {focus: true}) %>

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

@@ -1,21 +1,15 @@
 import React from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { TrixEditor } from 'react-trix'
-import Trix from 'trix'
 
 const RichTextEditorFocus = (props) => (
   <>
     <RichTextEditor
-        TrixEditor={TrixEditor}
         focus
-        trixInstance={Trix}
         {...props}
     />
     <br />
     <RichTextEditor
-        TrixEditor={TrixEditor}
         focus
-        trixInstance={Trix}
         {...props}
     />
   </>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("rich_text_editor", props: {
+  id: "inline",
+  inline: true,
+  toolbar_bottom: true,
+  value: "Try hovering over this text. Then try modifying it or adding more of your own text."
+}) %>

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

@@ -1,16 +1,12 @@
 import React from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { TrixEditor } from 'react-trix'
-import Trix from 'trix'
 
 const RichTextEditorInline = (props) => (
   <div>
     <RichTextEditor
-        TrixEditor={TrixEditor}
         id="inline"
         inline
         toolbarBottom
-        trixInstance={Trix}
         value="Try hovering over this text. Then try modifying it or adding more of your own text."
         {...props}
     />

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb

@@ -0,0 +1,35 @@
+
+<%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
+<div id="card-obfuscation" style="display:none">
+  <%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
+   <div id="content-preview" class="trix-content">
+   </div>
+  <% end %>
+</div>
+<%= pb_rails("button", props: { id: "preview-button", variant: "secondary", margin_top: "md" }) do %>
+  <span>Preview Output</span>
+<% end %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    function handleButtonClick() {
+      const editorContainer = [...document.querySelectorAll('[data-pb-react-props]')]
+        .find(element => element.getAttribute('data-pb-react-props')?.includes('"id":"content-preview-editor"'))
+
+      const editorElement = editorContainer?.querySelector('trix-editor')
+      const inputId = editorElement?.getAttribute('input')
+      const inputElement = inputId && document.getElementById(inputId)
+      
+      const editorContent = inputElement?.value || '' 
+      const previewArea = document.getElementById('content-preview')
+      const cardDiv = document.getElementById('card-obfuscation')
+
+      if (previewArea && cardDiv) {
+        previewArea.innerHTML = editorContent 
+        cardDiv.style.display = 'block'
+      }
+    }
+
+    document.getElementById('preview-button')?.addEventListener('click', handleButtonClick)
+  })
+</script>

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

@@ -2,9 +2,6 @@ import React, { useState } from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 import Button from '../../pb_button/_button'
 import Card from '../../pb_card/_card'
-import { TrixEditor } from 'react-trix'
-// eslint-disable-next-line no-unused-vars
-import Trix from 'trix'
 
 const RichTextEditorPreview = (props) => {
   const [showPreview, setShowPreview] = useState(false)
@@ -18,7 +15,6 @@ const RichTextEditorPreview = (props) => {
   return (
     <div>
       <RichTextEditor
-          TrixEditor={TrixEditor}
           id="content-preview-editor"
           onChange={handleChange}
           {...props}

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("rich_text_editor", props: {
+  id: "required-indicator",
+  input_options: {
+    id: 'hidden_input_id',
+    name: "hidden_input_name"
+  },
+  label: "Label",
+  required_indicator: true,
+  value: "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_required_indicator.jsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { TrixEditor } from 'react-trix'
-import Trix from 'trix'
 
 const RichTextEditorRequiredIndicator = (props) => {
   const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
@@ -10,12 +8,9 @@ const RichTextEditorRequiredIndicator = (props) => {
   return (
     <div>
       <RichTextEditor
-          TrixEditor={TrixEditor}
-          inputOptions = {{ id: "required" }}
           label="Label"
           onChange={handleOnChange}
           requiredIndicator
-          trixInstance={Trix}
           value={value}
           {...props}
       />

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("rich_text_editor", props: {simple: true, id: "simple"}) %>

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

@@ -1,14 +1,10 @@
 import React from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { TrixEditor } from 'react-trix'
-import Trix from 'trix'
 
 const RichTextEditorSimple = (props) => (
   <div>
     <RichTextEditor
-        TrixEditor={TrixEditor}
         simple
-        trixInstance={Trix}
         {...props}
     />
   </div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("rich_text_editor", props: {id: "sticky", sticky: true, value: "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."}) %>

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

@@ -1,15 +1,11 @@
 import React from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { TrixEditor } from 'react-trix'
-import Trix from 'trix'
 
 const RichTextEditorSticky = (props) => (
   <div>
     <RichTextEditor
-        TrixEditor={TrixEditor}
         id="sticky"
         sticky
-        trixInstance={Trix}
         value="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."
         {...props}
     />