playbook_ui 15.2.0.pre.alpha.PLAY2589advancedtableinlinerowloadingtoggleicon11644 → 15.2.0.pre.alpha.PLAY236711331

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.jsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors, typography } from 'playbook-ui'
-
-
-const data1 = [
-  { name: 'Data Used', y: 32 },
-]
-const data2 = [
-  { name: 'Sales to Date', y: 65 },
-]
-
-const chartOptions1 = {
-  title: {
-    text: "Data Usage",
-  },
-  series: [{ data: data1 }],
-  plotOptions: {
-    solidgauge: {
-      dataLabels: {
-        format:
-          `<span class="fix">{y:,f}</span>` +
-          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">GB</span>`,
-      },
-    },
-  },
-};
-const chartOptions2 = {
-  title: {
-    text: "Sales Goal",
-  },
-  series: [{ data: data2 }],
-  plotOptions: {
-    solidgauge: {
-      dataLabels: {
-        format:
-          `<span y="28" style="fill: ${colors.text_lt_light}; font-size: ${typography.text_base};">$</span>` +
-          `<span class="fix" y="38">{y:,f}</span>` +
-          `<span style="fill: ${colors.text_lt_light}; font-size: ${typography.text_larger};">k</span>`,
-      },
-    },
-  },
-};
-
-const PbGaugeChartUnits = (props) => (
-  <div>
-    <PbGaugeChart
-        options={chartOptions1}
-        {...props}
-    />
-    <PbGaugeChart
-        options={chartOptions2}
-        {...props}
-    />
-  </div>
-)
-
-export default PbGaugeChartUnits

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.md

@@ -1 +0,0 @@
-Use custom CSS with classes or inline styles (as shown in these docs) to customize the appearance of prefix and suffix units.

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

@@ -1,29 +0,0 @@
-examples:
-  
-  rails:
-  - pb_gauge_chart_default: Default
-  - pb_gauge_chart_disable_animation: Disable Animation
-  - pb_gauge_chart_title: With Title
-  - pb_gauge_chart_units: With Units
-  - pb_gauge_chart_full_circle: Full Circle
-  - pb_gauge_chart_min_max: With Min and Max Labels
-  - pb_gauge_chart_sizing: Sizing
-  - pb_gauge_chart_height: Height
-  - pb_gauge_chart_color: Custom Color
-  - pb_gauge_chart_complex: Complex Example
-  
-  
-  react:
-  - pb_gauge_chart_default: Default
-  - pb_gauge_chart_disable_animation: Disable Animation
-  - pb_gauge_chart_title: With Title
-  - pb_gauge_chart_units: With Units
-  - pb_gauge_chart_full_circle: Full Circle
-  - pb_gauge_chart_min_max: With Min and Max Labels
-  - pb_gauge_chart_sizing: Sizing
-  - pb_gauge_chart_height: Height
-  - pb_gauge_chart_live_data: Live Data
-  - pb_gauge_chart_color: Custom Color
-  - pb_gauge_chart_complex: Complex Example
-  
-  

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

@@ -1,11 +0,0 @@
-export { default as PbGaugeChartDefault } from './_pb_gauge_chart_default.jsx'
-export { default as PbGaugeChartDisableAnimation } from './_pb_gauge_chart_disable_animation.jsx'
-export { default as PbGaugeChartTitle } from './_pb_gauge_chart_title.jsx'
-export { default as PbGaugeChartUnits } from './_pb_gauge_chart_units.jsx'
-export { default as PbGaugeChartFullCircle } from './_pb_gauge_chart_full_circle.jsx'
-export { default as PbGaugeChartMinMax } from './_pb_gauge_chart_min_max.jsx'
-export { default as PbGaugeChartSizing } from './_pb_gauge_chart_sizing.jsx'
-export { default as PbGaugeChartHeight } from './_pb_gauge_chart_height.jsx'
-export { default as PbGaugeChartLiveData } from './_pb_gauge_chart_live_data.jsx'
-export { default as PbGaugeChartColor } from './_pb_gauge_chart_color.jsx'
-export { default as PbGaugeChartComplex } from './_pb_gauge_chart_complex.jsx'

data/app/pb_kits/playbook/pb_pb_gauge_chart/pbGaugeGraphTheme.ts

@@ -1,91 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const pbGaugeGraphTheme = {
-  title: { 
-    text: "",
-    style: {
-      fontFamily: typography.font_family_base,
-      fontSize: typography.text_larger,
-    },
-  },
-  chart: {
-    type: "solidgauge",
-    events: {
-      render() {
-        this.container
-          const arc = this.container.querySelector('path.gauge-pane');
-          if (arc) arc.setAttribute('stroke-linejoin', 'round');
-      }
-    }
-  },
-  pane: {
-    size: "90%",
-    startAngle: -100,
-    endAngle: 100,
-    background: [
-      {
-        borderWidth: 20,
-        innerRadius: "90%",
-        outerRadius: "90%",
-        shape: "arc",
-        className: "gauge-pane",
-        borderColor: colors.border_light,
-        borderRadius: '50%',
-      },
-    ],
-  },
-  tooltip: {
-    backgroundColor: {
-      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-      stops: [
-        [0, colors.bg_dark],
-        [1, colors.bg_dark],
-      ],
-    },
-    pointFormat:
-      '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
-      "<b>{point.y}</b>",
-    followPointer: true,
-    shadow: false,
-    borderWidth: 0,
-    borderRadius: 10,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_default,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-  },
-  yAxis: {
-    min: 0,
-    max: 100,
-    lineWidth: 0,
-    tickPositions: [] as number[],
-  },
-  plotOptions: {
-    solidgauge: {
-      borderColor: colors.data_1,
-      borderWidth: 20,
-      color: colors.data_1,
-      radius: 90,
-      innerRadius: "90%",
-      y: -26,
-      dataLabels: {
-        borderWidth: 0,
-        color: colors.text_lt_default,
-        enabled: true,
-        format: '<span class="fix">{y:,f}</span>',
-        style: {
-          fontFamily: typography.font_family_base,
-          fontWeight: typography.regular,
-          fontSize: typography.heading_2,
-        },
-        y: -26,
-      },
-    },
-  },
-  credits: { enabled: false }
-}
-
-export default pbGaugeGraphTheme;

data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.html.erb

@@ -1 +0,0 @@
-<%= react_component('PbGaugeChart', object.react_props) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.rb

@@ -1,25 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbPbGaugeChart
-    class PbGaugeChart < ::Playbook::KitBase
-      prop :options, default: {}
-
-      def react_props
-        {
-          className: classname,
-          data: data,
-          options: options,
-          id: id,
-        }
-      end
-
-      def classname
-        # Highcharts react needs classname attached to the container div,
-        # we pass an empty string here to avoid conflicts, classname is built in the TSX
-        # We still need generate_classnames to retain ability to pass in custom classnames or global props
-        generate_classname("")
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.test.jsx

@@ -1,80 +0,0 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-
-import { PbGaugeChart } from 'playbook-ui'
-
-beforeEach(() => {
-  // Silences error logs within the test suite.
-  jest.spyOn(console, 'error');
-  jest.spyOn(console, 'warn');
-  console.error.mockImplementation(() => {});
-  console.warn.mockImplementation(() => {});
-});
-
-afterEach(() => {
-  console.error.mockRestore();
-  console.warn.mockRestore();
-});
-
-const chartOptions = {
-  series:[{data:[{ name: "Name", y: 45 }]}]
-}
-
-const testId = 'pbgaugechart1'
-
-test('Kit to exist', () => {
-  render(
-  <PbGaugeChart
-      data={{testid: testId}} 
-      options={chartOptions} 
-  />
-)
-  expect(screen.getByTestId(testId)).toBeInTheDocument()
-})
-
-test('Kit to apply base classname', () => {
-  render(
-    <PbGaugeChart
-        data={{testid: testId}} 
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('pb_pb_gauge_chart')
-})
-
-test('Kit to have custom class', () => {
-  render(
-    <PbGaugeChart
-        className='custom-class'
-        data={{testid: testId}} 
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('custom-class')
-})
-
-test('Kit to apply global props', () => {
-  render(
-    <PbGaugeChart
-        data={{testid: testId}} 
-        margin="lg"
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveClass('m_lg')
-})
-
-test('kit to apply id', () => {
-  render(
-    <PbGaugeChart
-        data={{testid: testId}} 
-        id='gauge-chart-id'
-        options={chartOptions} 
-    />
-  )
-
-  expect(screen.getByTestId(testId)).toHaveAttribute('id', 'gauge-chart-id')
-})

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

@@ -1,38 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-
-
-const RichTextEditorAdvancedAttributes = (props) => {
-
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        content:"Add your text here. You can format your text, add links, quotes, and bullets."
-    })
-      if (!editor) {
-        return null
-      } 
-
-      
-
-
-  return (
-    <div>
-      <RichTextEditor
-          advancedEditor={editor}
-          aria={{ label: 'I am a rich text editor' }}
-          data={{ 'test-data': 'value', 'test-data2': 'value2' }}
-          {...props}
-      >
-        <EditorContent editor={editor}/>
-      </RichTextEditor>
-    </div>
-  )
-}
-
-export default RichTextEditorAdvancedAttributes

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.md

@@ -1 +0,0 @@
-Aria labels and data attributes can also be added to the top level div for the RichTextEditor.

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

@@ -1,34 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-
-
-const RichTextEditorAdvancedFocus = (props) => {
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        content:"Click inside to see the toolbar. Click outside to hide it."
-    })
-
-    if (!editor) {
-        return null
-    } 
-
-  return (
-    <div>
-      <RichTextEditor
-          advancedEditor={editor}
-          focus
-          {...props}
-      >
-        <EditorContent editor={editor}/>
-      </RichTextEditor>
-    </div>
-  )
-}
-
-export default RichTextEditorAdvancedFocus

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.md

@@ -1 +0,0 @@
-When the optional `focus` prop is set to true, the toolbar will only show once you click in to the RichTextEditor. 

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

@@ -1,37 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-
-
-const RichTextEditorAdvancedInline = (props) => {
-
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        content:"Add your text here. You can format your text, add links, quotes, and bullets."
-    })
-      if (!editor) {
-        return null
-      } 
-
-      
-
-
-  return (
-    <div>
-      <RichTextEditor
-          advancedEditor={editor}
-          inline
-          {...props}
-      >
-        <EditorContent editor={editor}/>
-      </RichTextEditor>
-    </div>
-  )
-}
-
-export default RichTextEditorAdvancedInline

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md

@@ -1 +0,0 @@
-When the optional `inline` prop is set to true, the editor borders and the toolbar will only be visible when hovered or focused on. 

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

@@ -1,37 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-
-
-const RichTextEditorAdvancedSimple = (props) => {
-
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        content:"Add your text here. Use the simple toolbar above to format your text"
-    })
-      if (!editor) {
-        return null
-      } 
-
-      
-
-
-  return (
-    <div>
-      <RichTextEditor
-          advancedEditor={editor}
-          simple
-          {...props}
-      >
-        <EditorContent editor={editor}/>
-      </RichTextEditor>
-    </div>
-  )
-}
-
-export default RichTextEditorAdvancedSimple

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

@@ -1,38 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-
-
-const RichTextEditorAdvancedSticky = (props) => {
-
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        content:"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."
-
-    })
-      if (!editor) {
-        return null
-      } 
-
-      
-
-
-  return (
-    <div>
-      <RichTextEditor
-          advancedEditor={editor}
-          sticky
-          {...props}
-      >
-        <EditorContent editor={editor}/>
-      </RichTextEditor>
-    </div>
-  )
-}
-
-export default RichTextEditorAdvancedSticky

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md

@@ -1 +0,0 @@
-Use the optional `sticky` prop to make the toolbar sticky on scroll.

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

@@ -1,69 +0,0 @@
-import React, {useState, useEffect} from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-
-import Select from '../../pb_select/_select'
-import { changelog, release } from './templates.js'
-
-const RichTextEditorAdvancedTemplates = (props) => {
-
-const [editorContent, setEditorContent] = useState('')
-    
-const handleChange = (event) => {
-        setEditorContent(event.target.value)
-}
-  const templatesOptions = [
-    {
-      value: release,
-      text: 'Playbook Release',
-    },
-    {
-      value: changelog,
-      text: 'Changelog',
-    },
-  ]
-
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        content: editorContent
-    })
-
-    // Update editor content when editorContent state changes
-    useEffect(() => {
-        if (editor && editorContent) {
-            editor.commands.setContent(editorContent)
-        }
-    }, [editor, editorContent])
-
-      if (!editor) {
-        return null
-      } 
-
-      
-
-
-  return (
-    <div>
-        <Select
-            blankSelection="Select a template..."
-            label="Template"
-            onChange={handleChange}
-            options={templatesOptions}
-            {...props}
-        />
-        <RichTextEditor
-            advancedEditor={editor}
-            {...props}
-        >
-        <EditorContent editor={editor}/>
-        </RichTextEditor>
-    </div>
-  )
-}
-
-export default RichTextEditorAdvancedTemplates

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

@@ -1 +0,0 @@
-Tiptap allows you to set content within the editor using the 'content' prop within useEditor. See the code snippet below to see how this can be done. 

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

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

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

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

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

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