playbook_ui 15.5.0.pre.rc.1 → 15.5.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 276511bfc08ac08b02c5ad4e4103f77ac5017d5474c703462ed7e7613bbf4a9e
-  data.tar.gz: 7e2fa23a33a5b37027509a133754fee3b33a8437a44ededb57bcd7fe6c59438c
+  metadata.gz: 33c3f871448ed381e3a35223c4d72ce6f15794928468beab586e281c46b5d5e7
+  data.tar.gz: 46015ad2243722f29271c481b22163c3138cb1834ce33999c1b9459a88bc9908
 SHA512:
-  metadata.gz: a4476dab22e2daa8181c926d0ad86b6d2f1c14956a869e61845e7dda271b6612d1838d78c183d254b80dc931b3274d19b7c0e85e62356aa495ba5790a0071e7b
-  data.tar.gz: 8bd4331e0a0ec10ee5fb2426f69ff5dac9405f59153617faaa76b81f15a7188b59fc31819b4ed63ce287f2741bd50915bf48c7ba4b27a7866fd535a2d96a08ee
+  metadata.gz: e965c14c7e23528961b070c24dcab12edf09e659d80af74690c644c384ad095b57789f779fef1af0eb3f778a6d49568bc059dc088fd7802173334277f93692bf
+  data.tar.gz: ea57133c7daf69d350755427d7a8cc84d56bb0f09db0ed131ef33424c14ce7d3bc6067d386a84633df1c6c4e651ddc336f7a456a2cfdc703fd722a300d848212

data/app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.md

@@ -0,0 +1 @@
+Abbreviate larger amounts into thousands (K), millions (M), billions (B), and even trillions (T). 

data/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals_rails.md

@@ -0,0 +1 @@
+Use `decimals: "matching"` when you want the full decimal amount displayed as a single number rather than split visually.

data/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals_react.md

@@ -0,0 +1 @@
+Use `decimals="matching"` when you want the full decimal amount displayed as a single number rather than split visually.

data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.html.erb

@@ -1,4 +1,14 @@
 <%= pb_rails("currency", props: {
   amount: "-2,000.50",
   size: "sm",
+}) %>
+
+<%= pb_rails("currency", props: {
+  amount: "-2,000.50",
+  size: "md",
+}) %>
+
+<%= pb_rails("currency", props: {
+  amount: "-2,000.50",
+  size: "lg",
 }) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.jsx

@@ -9,6 +9,16 @@ const CurrencyNegative = (props) => {
           amount="-2,000.50"
           {...props}
       />
+      <Currency
+          amount="-2,000.50"
+          size="md"
+          {...props}
+      />
+      <Currency
+          amount="-2,000.50"
+          size="lg"
+          {...props}
+      />
     </>
   )
 }

data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.md

@@ -0,0 +1 @@
+Small `Currency` kits have the negative sign on the lefthand side of the "$" symbol.

data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol_rails.md

@@ -0,0 +1 @@
+Remove the "$" symbol by setting an empty string: `symbol: ""`.

data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol_react.md

@@ -0,0 +1 @@
+Remove the "$" symbol by setting an empty string: `symbol=""`.

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -1,3 +1,10 @@
+<%= pb_rails("currency", props: {
+  amount: "30,327.43",
+  label: "Default",
+  size: "sm",
+  margin_bottom: "md",
+}) %>
+
 <%= pb_rails("currency", props: {
   amount: "2,000.50",
   emphasized: false,

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -5,6 +5,13 @@ import Currency from '../_currency'
 const CurrencyVariants = (props) => {
   return (
     <>
+      <Currency
+          amount="30,327.43"
+          label="Default"
+          marginBottom="md"
+          size="sm"
+          {...props}
+      />
       <Currency
           amount="2,000.50"
           emphasized={false}

data/app/pb_kits/playbook/pb_currency/docs/_description.md

@@ -1,2 +1,2 @@
-Use to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. User understanding increase when paired with labels. 
-Cents is automatically ".00" unless other wise overwritten (i.e. unit prop).
+Use this kit to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. Pairing it with labels improves user understanding.
+Cents are automatically ".00" unless otherwise overwritten (i.e. `unit` prop).

data/app/pb_kits/playbook/pb_date_time/_date_time.tsx

@@ -17,6 +17,7 @@ type DateTimeProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   size?: "sm" | "md",
+  showCurrentYear?: boolean,
   showDayOfWeek: boolean,
   showIcon?: boolean,
   timeZone?: string
@@ -32,6 +33,7 @@ const DateTime = (props: DateTimeProps): React.ReactElement => {
     showDayOfWeek = false,
     datetime,
     id,
+    showCurrentYear = false,
     showIcon = false,
     size = 'md',
     timeZone = 'America/New_York',
@@ -59,6 +61,7 @@ const DateTime = (props: DateTimeProps): React.ReactElement => {
           vertical="baseline"
       >
         <FormattedDate
+            showCurrentYear={showCurrentYear}
             showDayOfWeek={showDayOfWeek}
             size={size}
             value={datetime}

data/app/pb_kits/playbook/pb_date_time/date_time.html.erb

@@ -9,6 +9,7 @@
         dark: object.dark,
         date: object.date,
         show_day_of_week: object.show_day_of_week,
+        show_current_year: object.show_current_year,
         size: object.size,
         timezone: object.timezone,
       }) %>

data/app/pb_kits/playbook/pb_date_time/date_time.rb

@@ -16,6 +16,7 @@ module Playbook
       prop :dark, type: Playbook::Props::Boolean, default: false
       prop :show_icon, type: Playbook::Props::Boolean, default: false
       prop :show_day_of_week, type: Playbook::Props::Boolean, default: false
+      prop :show_current_year, type: Playbook::Props::Boolean, default: false
 
       def classname
         generate_classname("pb_date_time_kit", align)

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_time", props: {
+    date: DateTime.now,
+    show_current_year: true
+}) %>

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import DateTime from '../_date_time'
+
+const DateTimeShowCurrentYear = (props) => (
+  <div>
+    <DateTime
+        datetime={new Date()}
+        showCurrentYear
+        {...props}
+    />
+  </div>
+)
+
+export default DateTimeShowCurrentYear

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_rails.md

@@ -0,0 +1 @@
+Pass in `show_current_year` to show this date's current year.

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_react.md

@@ -0,0 +1 @@
+Pass in `showCurrentYear` to show this date's current year.

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

@@ -1,14 +1,16 @@
 examples:
-  
+
   rails:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
+  - date_time_show_current_year: Show Current Year
 
   react:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
+  - date_time_show_current_year: Show Current Year
 
   swift:
   - date_time_default_swift: Default

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

@@ -1,3 +1,4 @@
 export { default as DateTimeDefault } from './_date_time_default.jsx'
 export { default as DateTimeAlign } from './_date_time_align.jsx'
 export { default as DateTimeSize } from './_date_time_size.jsx'
+export { default as DateTimeShowCurrentYear } from './_date_time_show_current_year.jsx'

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx

@@ -17,6 +17,7 @@ type DateTimeStackedProps = {
   datetime: Date,
   dark: boolean,
   timeZone?: string,
+  showCurrentYear?: boolean,
 }
 
 const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
@@ -28,6 +29,7 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
     dark,
     htmlOptions = {},
     timeZone = 'America/New_York',
+    showCurrentYear = false,
   } = props
 
   const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
@@ -46,6 +48,7 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
             bold
             dark={dark}
             date={date || datetime}
+            showCurrentYear={showCurrentYear}
         />
       </FlexItem>
 

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb

@@ -1,8 +1,8 @@
-<%= pb_content_tag do %>
+  <%= pb_content_tag do %>
 
   <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
       <%= pb_rails("body", props: {classname: "flex-item"}) do %>
-        <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark }) %>
+        <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark, show_current_year: object.show_current_year }) %>
       <% end %>
       <%= pb_rails("section_separator", props: { orientation: "vertical", classname: "date-time-padding" }) %>
       <%= pb_rails("body", props: {classname: "flex-item"}) do %>

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb

@@ -10,6 +10,8 @@ module Playbook
                   default: false
       prop :timezone, type: Playbook::Props::String,
                       default: "America/New_York"
+      prop :show_current_year, type: Playbook::Props::Boolean,
+                               default: false
 
       def date_time_value
         date || date_time

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -41,3 +41,36 @@ test('renders time in timezone', () => {
   const kit = renderKit(DateTimeStacked, props)
   expect(kit).toHaveTextContent(`${monthDayYear}11:00aMDT`)
 })
+
+test('renders current year when showCurrentYear is true', () => {
+  const currentYearDate = new Date()
+  const currentYear = currentYearDate.getFullYear()
+  
+  const kit = renderKit(DateTimeStacked, {
+    data: { testid: 'datetimestacked-current-year' },
+    datetime: currentYearDate,
+    dark: false,
+    showCurrentYear: true,
+  })
+  expect(kit).toHaveTextContent(currentYear.toString())
+})
+
+test('hides current year by default', () => {
+  const currentYearDate = new Date()
+  const currentYear = currentYearDate.getFullYear()
+  
+  const kit = renderKit(DateTimeStacked, {
+    data: { testid: 'datetimestacked-hide-year' },
+    datetime: currentYearDate,
+    dark: false,
+  })
+ 
+  const yearElement = kit.querySelector('.pb_caption_kit_xs')
+
+  if (yearElement) {
+    expect(yearElement.textContent).not.toBe(currentYear.toString())
+  } else {
+
+    expect(yearElement).toBeNull()
+  }
+})

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, show_current_year: true }) %>
+<br>
+<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, show_current_year: true, timezone: "America/Denver" }) %>
+

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import DateTimeStacked from '../_date_time_stacked'
+
+const DateTimeStackedShowCurrentYear = (props) => (
+  <div>
+    <DateTimeStacked
+        datetime={new Date()}
+        showCurrentYear
+        {...props}
+    />
+    <br />
+    <DateTimeStacked
+        datetime={new Date()}
+        showCurrentYear
+        timeZone="America/Denver"
+        {...props}
+    />
+  </div>
+);
+
+export default DateTimeStackedShowCurrentYear;

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.md

@@ -0,0 +1 @@
+By default, the Date Time Stacked kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here.

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

@@ -2,9 +2,11 @@ examples:
 
   rails:
   - date_time_stacked_default: Default
-  
+  - date_time_stacked_show_current_year: Show Current Year
+
   react:
   - date_time_stacked_default: Default
+  - date_time_stacked_show_current_year: Show Current Year
   
   swift:
   - date_time_stacked_default_swift: Default

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

@@ -1 +1,2 @@
 export { default as DateTimeStackedDefault } from './_date_time_stacked_default.jsx'
+export { default as DateTimeStackedShowCurrentYear } from './_date_time_stacked_show_current_year.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -96,7 +96,7 @@ const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.React
             <SectionSeparator orientation="vertical" />
             <ToolbarNodes editor={editor} />
             {
-              extensions && extensions.length > 0 && (
+              extensions && (
                 <>
                   <MoreExtensionsDropdown extensions={extensions}/>
                 </>

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -2,10 +2,6 @@ import React, { useEffect, useState, useRef } from 'react'
 import classnames from 'classnames'
 import { TrixEditor } from 'react-trix'
 
-import { useEditor, EditorContent } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
-import Link from '@tiptap/extension-link'
-
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
@@ -52,8 +48,7 @@ type RichTextEditorProps = {
   sticky?: boolean,
   template: string,
   value?: string,
-  maxWidth?: string,
-  railsEditor?: boolean
+  maxWidth?: string
 } & GlobalProps
 
 const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
@@ -86,27 +81,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     [showToolbarOnFocus, setShowToolbarOnFocus] = useState(false),
     containerRef = useRef<HTMLDivElement>(null)
 
-  const isRails = !advancedEditor && props.railsEditor === true
-
-  // TipTap editor for Rails (hook always runs per React rules, but only used when isRails is true)
-  const railsTipTapEditor = useEditor({
-    extensions: [StarterKit, Link],
-    content: value || '',
-    onUpdate: ({ editor }) => {
-      if (!isRails) return
-      
-      const html = editor.getHTML()
-      const text = editor.getText()
-      onChange(html, text)
-      
-      // Update hidden input for TipTap Rails form submission
-      const hiddenInput = document.getElementById(`hidden-input-${props.id || 'rich-text-editor'}`)
-      if (hiddenInput) {
-        (hiddenInput as HTMLInputElement).value = html ?? ''
-      }
-    },
-  }, [isRails, value])
-
   const htmlProps = buildHtmlProps(htmlOptions)
   
   const handleOnEditorReady = (editorInstance: Editor) => {
@@ -166,8 +140,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   }
 
   useEffect(() => {
-    const tiptapEditor = advancedEditor || railsTipTapEditor
-    if (!tiptapEditor || !focus) return
+    if (!advancedEditor || !focus) return
 
     const handleFocus = () => setShowToolbarOnFocus(true)
     
@@ -176,7 +149,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       setShowToolbarOnFocus(false)
     }
 
-    const editorElement = tiptapEditor?.view?.dom
+    const editorElement = advancedEditor?.view?.dom
     if (editorElement) {
       editorElement.addEventListener('focus', handleFocus)
     }
@@ -189,7 +162,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       }
       document.removeEventListener('mousedown', handleClickOutside)
     }
-  }, [advancedEditor, railsTipTapEditor, focus])
+  }, [advancedEditor, focus])
 
   //============= end focus prop with advanced editor=================
 
@@ -200,17 +173,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     editor.insertHTML(template)
   }, [editor, template])
 
-  // Handle value prop changes for Rails TipTap editor
-  useEffect(() => {
-    if (!railsTipTapEditor) return
-    const currentContent = railsTipTapEditor.getHTML()
-    const newValue = value || ''
-
-    if (currentContent !== newValue) {
-      railsTipTapEditor.commands.setContent(newValue)
-    }
-  }, [railsTipTapEditor, value])
-
   useEffect(() => {
     if (!editor?.element) return
     editor.element.addEventListener('click', ({ target }: Event) => {
@@ -238,11 +200,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     className
   )
 
-  // Get the TipTap editor instance (either passed from React or auto-initialized for Rails)
-  const tipTapEditor = advancedEditor || (isRails ? railsTipTapEditor : null)
-
   // Determine if toolbar should be shown
-  const shouldShowToolbar = focus && tipTapEditor ? showToolbarOnFocus : advancedEditorToolbar
+  const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
 
   return (
     <div
@@ -253,32 +212,20 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         ref={focus ? containerRef : undefined}
     >
       {
-        // Render TipTap editor if indicated (React with advancedEditor or Rails by default (railsEditor is true), otherwise Trix
-        tipTapEditor ? (
+        advancedEditor ? (
           <div 
               className={classnames("pb_rich_text_editor_advanced_container", { 
               ["toolbar-active"]: shouldShowToolbar,
               })}
           >
             {shouldShowToolbar && (
-              <EditorToolbar editor={tipTapEditor}
+              <EditorToolbar editor={advancedEditor}
                   extensions={extensions}
                   simple={simple}
                   sticky={sticky}
               />
             )}
-            {/* EditorContent for Rails railsTipTapEditor, children for React TipTap advancedEditor */}
-            {railsTipTapEditor ? <EditorContent editor={tipTapEditor} /> : <>{children}</>}
-            
-            {/* Set up hidden input for TipTap Rails form submission */}
-            {railsTipTapEditor && (
-              <input 
-                  id={`hidden-input-${props.id || 'rich-text-editor'}`}
-                  name={name || 'content'}
-                  type="hidden" 
-                  value={tipTapEditor?.getHTML() ?? ''}
-              />
-            )}
+          { children }
           </div>
         ) : (
           <TrixEditor

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

@@ -1,11 +1,3 @@
-<%= pb_rails("rich_text_editor", props: {
-    id: "focus-editor-1",
-    focus: true,
-    value: "Click inside to see the toolbar. Click outside to hide it."
-}) %>
+<%= pb_rails("rich_text_editor", props: {focus: true}) %>
 <br>
-<%= pb_rails("rich_text_editor", props: {
-    id: "focus-editor-2",
-    focus: true,
-    value: "When the optional focus prop is set to true, the toolbar will only show once you click in to the RichTextEditor."
-}) %>
+<%= pb_rails("rich_text_editor", props: {focus: true}) %>

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

@@ -1,38 +1,30 @@
-<%= pb_rails("rich_text_editor", props: { 
-  id: "content-preview-editor",
-  margin_bottom: "md",
-  value: "Add text here, format it, and press \"Preview Output\" to see what your stylized output will look like on the page."
-}) %>
-
-<%= pb_rails("button", props: { id: "preview-button", text: "Preview Output", variant: "secondary" }) %>
 
+<%= 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="tiptap-content">
+   <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() {
-      // Find the specific TipTap editor container by ID
       const editorContainer = [...document.querySelectorAll('[data-pb-react-props]')]
         .find(element => element.getAttribute('data-pb-react-props')?.includes('"id":"content-preview-editor"'))
 
-      if (!editorContainer) {
-        console.log('Editor container not found')
-        return
-      }
-
-      // Find the TipTap editor content
-      const tiptapEditor = editorContainer.querySelector('.ProseMirror')
+      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 (tiptapEditor && previewArea && cardDiv) {
-        // Get the HTML content from the TipTap editor
-        const editorContent = tiptapEditor.innerHTML || ''
+      if (previewArea && cardDiv) {
         previewArea.innerHTML = editorContent 
         cardDiv.style.display = 'block'
       }

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

@@ -1,5 +1 @@
-<%= pb_rails("rich_text_editor", props: {
-    id: "simple-editor",
-    simple: true,
-    value: "Add your text here. Use the simple toolbar above to format your text." 
-}) %>
+<%= pb_rails("rich_text_editor", props: {simple: true, id: "simple"}) %>

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

@@ -1 +1 @@
-<%= pb_rails("rich_text_editor", props: {id: "sticky-editor", 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."}) %>
+<%= 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/example.yml

@@ -3,10 +3,10 @@ examples:
   rails:
   - rich_text_editor_default: Default
   - rich_text_editor_simple: Simple
-  # - rich_text_editor_attributes: Attributes
+  - rich_text_editor_attributes: Attributes
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
-  # - rich_text_editor_templates: Templates
+  - rich_text_editor_templates: Templates
   # - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview