playbook_ui 16.1.0.pre.alpha.play274314102 → 16.1.0.pre.alpha.play276813969

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,8 +1,5 @@
 import React, { useState } from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { TrixEditor } from 'react-trix'
-// eslint-disable-next-line no-unused-vars
-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.'),
@@ -11,8 +8,6 @@ const RichTextEditorRequiredIndicator = (props) => {
   return (
     <div>
       <RichTextEditor
-          TrixEditor={TrixEditor}
-          inputOptions = {{ id: "required" }}
           label="Label"
           onChange={handleOnChange}
           requiredIndicator

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,13 +1,9 @@
 import React from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { TrixEditor } from 'react-trix'
-// eslint-disable-next-line no-unused-vars
-import Trix from 'trix'
 
 const RichTextEditorSimple = (props) => (
   <div>
     <RichTextEditor
-        TrixEditor={TrixEditor}
         simple
         {...props}
     />

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,13 +1,9 @@
 import React from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { TrixEditor } from 'react-trix'
-// eslint-disable-next-line no-unused-vars
-import Trix from 'trix'
 
 const RichTextEditorSticky = (props) => (
   <div>
     <RichTextEditor
-        TrixEditor={TrixEditor}
         id="sticky"
         sticky
         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_templates.html.erb

@@ -0,0 +1,115 @@
+<% changelog = "<div>
+    <strong>Changelog:<br></strong>
+    [INSERT LINK]<br><br>
+    You can test the normal spots of Playbook rails and react on
+    dev docs plus the following:
+  </div>
+  <div>
+    <br>
+  </div>" %>
+
+<% release = "<div>
+    <div>
+      <strong>Story Background</strong>
+    </div>
+    <div>
+      Follow the{' '}
+      <a href='https://github.com/powerhome/playbook/wiki/Release-Team-Guide'>
+        release process
+      </a>{' '}
+      to create a new version, create a gem, and package. Create a Ninja testing
+      plan, then update Nitro with the new version.
+    </div>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Timeline / Due Date</strong>
+    </div>
+    <div>
+      <em>Release End of business Thursday</em>
+    </div>
+    <div>
+      <em>Testing on Nitro End of business Friday</em>
+    </div>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Definition of done</strong>
+    </div>
+    <ol>
+      <li>Merge all PR’s</li>
+      <li>Update the final CHANGELOG</li>
+      <li>Version up and generate NPM, and RubyGem</li>
+      <li>Create next version branch and milestone</li>
+      <li>Update default branch and branch protection rules&nbsp;</li>
+      <li>Notify Everyone of new version</li>
+      <li>
+        Generate testing plan and pages to test for Ninjas (update runway
+        ticket)
+      </li>
+      <li>Update version on Nitro and get on Demo</li>
+      <li>Send Ninjas demo and runway ticket for testing</li>
+      <li>Ninja Approved + PR Approved</li>
+    </ol>
+    <div>
+      <br />
+    </div>
+    <div>
+      <strong>Stakeholders / Sign-off</strong>
+    </div>
+    <ul>
+      <li>Code Owners</li>
+    </ul>
+    <div>
+      <br />
+      <strong>Cadence</strong>
+      <br />
+      Jason, Jon, Stephen, Jasper, Brendan, Cole
+    </div>
+  </div>" %>
+
+<%= pb_rails("select", props: {
+  id: "rails-select-dropdown",
+  label: "",
+  name: "",
+  blank_selection: "Select a template",
+  options: [
+    {
+      value: release,
+      value_text: "Playbook Release",
+    },
+    {
+      value: changelog,
+      value_text: "Changelog",
+    },
+  ]
+}) %>
+
+
+
+
+
+<%= pb_rails("rich_text_editor", props: {classname: 'template-test', id: "template", template: '' }) %>
+
+
+<script>
+  const updateContent = (template) => {
+    const trix   = document.querySelector('.template-test trix-editor');
+    const editor = trix.editor;
+    console.log(editor)
+    editor.loadHTML("")
+    editor.setSelectedRange([0, 0])
+    editor.insertHTML(template)
+  }
+
+  window.addEventListener('DOMContentLoaded', () => {
+    const editor = document.querySelector("#rails-select-dropdown")
+    editor.addEventListener('change', function() {
+        console.log('You selected: ', this.value);
+        const template = this.value
+        updateContent(template);
+    });
+  });
+</script>

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

@@ -2,9 +2,6 @@ import React, { useState } from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 import Select from '../../pb_select/_select'
 import { changelog, release } from './templates.js'
-import { TrixEditor } from 'react-trix'
-// eslint-disable-next-line no-unused-vars
-import Trix from 'trix'
 
 const RichTextEditorTemplates = (props) => {
   const [editorContent, setEditorContent] = useState('')
@@ -34,7 +31,6 @@ const RichTextEditorTemplates = (props) => {
           {...props}
       />
       <RichTextEditor
-          TrixEditor={TrixEditor}
           id="template"
           template={editorContent}
           {...props}

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

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

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+
+const RichTextEditorToolbarBottom = (props) => (
+  <div>
+    <RichTextEditor
+        id="bottom-toolbar"
+        toolbarBottom
+        {...props}
+    />
+  </div>
+)
+
+export default RichTextEditorToolbarBottom

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

@@ -1,41 +1,38 @@
 examples:
 
   rails:
+  - rich_text_editor_default: Default
+  - rich_text_editor_simple: Simple
+  - rich_text_editor_attributes: Attributes
+  - 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_inline: Inline
+  - rich_text_editor_required_indicator: Required Indicator
+  - rich_text_editor_preview: Preview
 
   react:
+  - rich_text_editor_default: Default
   - rich_text_editor_advanced_default: Advanced Default
   - 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_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_advanced_height: Advanced Height
   - rich_text_editor_advanced_min_height: Advanced Min Height
-  - rich_text_editor_advanced_label: Advanced (Label)
+  - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
+  - rich_text_editor_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview
-  - rich_text_editor_default: Legacy Default (Trix)
-  - rich_text_editor_simple: Legacy Simple (Trix)
-  - rich_text_editor_attributes: Legacy Attributes (Trix)
-  - rich_text_editor_focus: Legacy Focus (Trix)
-  - rich_text_editor_sticky: Legacy Sticky (Trix)
-  - rich_text_editor_templates: Legacy Templates (Trix)
-  - rich_text_editor_inline: Legacy Inline (Trix)
-  - rich_text_editor_label: Legacy Label (Trix)
-  - rich_text_editor_required_indicator: Legacy Required Indicator (Trix)
-  - rich_text_editor_preview: Legacy Preview (Trix)
-
-
-
-
-
-
-
-
-
-
-
-

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

@@ -4,6 +4,7 @@ export { default as RichTextEditorAttributes } from './_rich_text_editor_attribu
 export { default as RichTextEditorFocus } from './_rich_text_editor_focus.jsx'
 export { default as RichTextEditorSticky } from './_rich_text_editor_sticky.jsx'
 export { default as RichTextEditorTemplates } from './_rich_text_editor_templates.jsx'
+export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
 export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
 export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
 export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
@@ -20,5 +21,3 @@ export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_adv
 export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
 export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
 export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'
-export { default as RichTextEditorLabel } from './_rich_text_editor_label.jsx'
-export { default as RichTextEditorAdvancedLabel } from './_rich_text_editor_advanced_label.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb

@@ -0,0 +1,5 @@
+<%= react_component('RichTextEditor',
+                    object.rich_text_options,
+                    aria: object.aria,
+                    data: object.data
+                   ) %>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbRichTextEditor
+    class RichTextEditor < Playbook::KitBase
+      prop :focus, type: Playbook::Props::Boolean,
+                   default: false
+
+      prop :inline, type: Playbook::Props::Boolean,
+                    default: false
+
+      prop :simple, type: Playbook::Props::Boolean,
+                    default: false
+
+      prop :sticky, type: Playbook::Props::Boolean,
+                    default: false
+      prop :toolbar_bottom, type: Playbook::Props::Boolean,
+                            default: false
+
+      prop :value
+      prop :template
+      prop :placeholder
+      prop :input_options
+      prop :label
+      prop :required_indicator, type: Playbook::Props::Boolean,
+                                default: false
+
+      def classname
+        generate_classname("pb_rich_text_editor_kit", simple_class, focus_class, sticky_class, separator: " ")
+      end
+
+      def focus_class
+        focus ? "focus-editor-targets" : nil
+      end
+
+      def simple_class
+        simple ? "simple" : nil
+      end
+
+      def sticky_class
+        sticky ? "sticky" : nil
+      end
+
+      def rich_text_options
+        {
+          id: id,
+          inline: inline,
+          className: classname,
+          focus: focus,
+          simple: simple,
+          sticky: sticky,
+          toolbarBottom: toolbar_bottom,
+          value: value,
+          template: template,
+          placeholder: placeholder,
+          inputOptions: input_options,
+          label: label,
+          requiredIndicator: required_indicator,
+        }
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_table/index.ts

@@ -79,22 +79,21 @@ export default class PbTable extends PbEnhancedElement {
           header.classList.add('sticky-left-shadow');
         }
 
-        const headerWidth = (header as HTMLElement).offsetWidth;
-        accumulatedWidth += headerWidth;
-
-        cells.forEach((cell) => {
-          cell.classList.add('sticky');
-          (cell as HTMLElement).style.left = `${accumulatedWidth - headerWidth}px`;
-
-          if (!isLastColumn) {
-            cell.classList.add('with-border-right');
-            cell.classList.remove('sticky-left-shadow');
-          } else {
-            cell.classList.remove('with-border-right');
-            cell.classList.add('sticky-left-shadow');
-          }
-        });
+        accumulatedWidth += (header as HTMLElement).offsetWidth;
       }
+
+      cells.forEach((cell) => {
+        cell.classList.add('sticky');
+        (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+
+        if (!isLastColumn) {
+          cell.classList.add('with-border-right');
+          cell.classList.remove('sticky-left-shadow');
+        } else {
+          cell.classList.remove('with-border-right');
+          cell.classList.add('sticky-left-shadow');
+        }
+      });
     });
   }
 
@@ -141,22 +140,21 @@ export default class PbTable extends PbEnhancedElement {
           header.classList.add('sticky-right-shadow');
         }
 
-        const headerWidth = (header as HTMLElement).offsetWidth;
-        accumulatedWidth += headerWidth;
+        accumulatedWidth += (header as HTMLElement).offsetWidth;
+      }
 
-        cells.forEach((cell) => {
-          cell.classList.add('sticky');
-          (cell as HTMLElement).style.right = `${accumulatedWidth - headerWidth}px`;
+      cells.forEach((cell) => {
+        cell.classList.add('sticky');
+        (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
-          if (!isLastColumn) {
-            cell.classList.add('with-border-left');
-            cell.classList.remove('sticky-right-shadow');
-          } else {
-            cell.classList.remove('with-border-left');
-            cell.classList.add('sticky-right-shadow');
-          }
-        });
-      }
+        if (!isLastColumn) {
+          cell.classList.add('with-border-left');
+          cell.classList.remove('sticky-right-shadow');
+        } else {
+          cell.classList.remove('with-border-left');
+          cell.classList.add('sticky-right-shadow');
+        }
+      });
     });
   }
 

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -1,16 +1,15 @@
-<%= pb_content_tag(:div, id: nil) do %>
+<%= pb_content_tag(:div, id: nil ) do  %>
   <% if object.label.present? %>
-    <label for="<%= object.input_options[:id] || object.id %>">
-      <% if object.required_indicator %>
-        <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_text_input_kit_label" }) do %>
-          <%= object.label %><span style="color: #DA0014;"> *</span>
-        <% end %>
-      <% else %>
-        <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
+  <label for="<%= object.input_options[:id] || object.id %>" >
+    <% if object.required_indicator %>
+      <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_text_input_kit_label" }) do %>
+        <%= object.label %><span style="color: #DA0014;"> *</span>
       <% end %>
-    </label>
+    <% else %>
+    <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
+    <% end %>
+  </label>
   <% end %>
-
   <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>
     <% if content.present? %>
       <%= content %>
@@ -27,3 +26,4 @@
     <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }}) if object.error %>
   <% end %>
 <% end %>
+

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx

@@ -120,7 +120,6 @@ const Textarea = ({
   const characterCounter = () => {
     return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
   }
-  const errorId = error ? `${id}-error` : undefined
 
   return (
     <div
@@ -146,10 +145,7 @@ const Textarea = ({
     )}
       {children || (
         <textarea
-            aria-describedby={errorId}
-            aria-invalid={!!error}
             disabled={disabled}
-            id={id}
             name={name}
             onChange={emojiMask ? handleChange : onChange}
             onPaste={emojiMask ? handlePaste : undefined}
@@ -171,9 +167,6 @@ const Textarea = ({
             >
               <FlexItem>
                 <Body
-                    aria={{ atomic: "true", live: "polite" }}
-                    htmlOptions={{ role: "alert" }}
-                    id={errorId}
                     margin="none"
                     status="negative"
                     text={error}
@@ -189,9 +182,6 @@ const Textarea = ({
             </Flex>
           ) : (
             <Body
-                aria={{ atomic: "true", live: "polite" }}
-                htmlOptions={{ role: "alert" }}
-                id={errorId}
                 status="negative"
                 text={error}
             />

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb

@@ -1,9 +1,9 @@
-<%= pb_rails("textarea", props: { label: "Label", rows: 4, id: "default-example-1" }) %>
+<%= pb_rails("textarea", props: { label: "Label", rows: 4}) %>
 
 <br/>
 
-<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text", id: "default-example-2" }) %>
+<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text" }) %>
 
 <br/>
 
-<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text", id: "default-example-3" }) %>
+<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text" }) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx

@@ -13,7 +13,6 @@ const TextareaDefault = (props) => {
           label="Label"
           rows={4}
           {...props}
-          id="default-example-1"
       />
 
       <br />
@@ -22,7 +21,6 @@ const TextareaDefault = (props) => {
           label="Label"
           placeholder="Placeholder text"
           {...props}
-          id="default-example-2"
       />
 
       <br />
@@ -34,7 +32,6 @@ const TextareaDefault = (props) => {
           placeholder="Placeholder text"
           value={value}
           {...props}
-          id="default-example-3"
       />
 
     </div>