playbook_ui_docs 15.8.0.pre.rc.0 → 16.0.0.pre.alpha.fixiconsvgdataattrspropagation13513

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

@@ -0,0 +1,71 @@
+import React from 'react'
+import RichTextEditor from '../_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+import { Caption } from "playbook-ui"
+
+
+const RichTextEditorAdvancedMinHeight = (props) => {
+
+  const editor1 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  const editor2 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  const editor3 = useEditor({
+    extensions: [
+      StarterKit,
+      Link
+    ],
+    content: "Add your text here. You can format your text, add links, quotes, and bullets."
+  })
+
+  return (
+    <div>
+    <Caption>sm</Caption>
+      <RichTextEditor
+          advancedEditor={editor1}
+          inputMinHeight="sm"
+          {...props}
+      >
+        <EditorContent editor={editor1} />
+      </RichTextEditor>
+
+         <br />
+
+    <Caption>md</Caption>
+      <RichTextEditor
+          advancedEditor={editor2}
+          inputMinHeight="md"
+          {...props}
+      >
+        <EditorContent editor={editor2} />
+      </RichTextEditor>
+
+         <br />
+
+    <Caption>lg</Caption>
+      <RichTextEditor
+          advancedEditor={editor3}
+          inputMinHeight="lg"
+          {...props}
+      >
+        <EditorContent editor={editor3} />
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedMinHeight

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

@@ -0,0 +1 @@
+Use the inputMinHeight prop to render the text area with a minimum height. If the text exceeds the text area, the text area will grow to accommodate it.

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

@@ -29,5 +29,7 @@ examples:
   # - 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_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview

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

@@ -16,4 +16,6 @@ export { default as RichTextEditorAdvancedFocus } from './_rich_text_editor_adva
 export { default as RichTextEditorAdvancedTemplates } from './_rich_text_editor_advanced_templates.jsx'
 export { default as RichTextEditorAdvancedAttributes } from './_rich_text_editor_advanced_attributes.jsx'
 export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_advanced_sticky.jsx'
-export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
+export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'
+export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_advanced_height.jsx'
+export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 15.8.0.pre.rc.0
+  version: 16.0.0.pre.alpha.fixiconsvgdataattrspropagation13513
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-01-06 00:00:00.000000000 Z
+date: 2026-01-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -259,39 +259,6 @@ files:
 - app/pb_kits/playbook/pb_badge/docs/_description.md
 - app/pb_kits/playbook/pb_badge/docs/example.yml
 - app/pb_kits/playbook/pb_badge/docs/index.js
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.html.erb
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.html.erb
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.html.erb
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.html.erb
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.md
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.html.erb
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.md
-- app/pb_kits/playbook/pb_bar_graph/docs/_description.md
-- app/pb_kits/playbook/pb_bar_graph/docs/example.yml
-- app/pb_kits/playbook/pb_bar_graph/docs/index.js
 - app/pb_kits/playbook/pb_body/docs/_body_articles.html.erb
 - app/pb_kits/playbook/pb_body/docs/_body_articles.jsx
 - app/pb_kits/playbook/pb_body/docs/_body_articles.md
@@ -451,34 +418,6 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_description.md
 - app/pb_kits/playbook/pb_checkbox/docs/example.yml
 - app/pb_kits/playbook/pb_checkbox/docs/index.js
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_rails.md
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.html.erb
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.html.erb
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.html.erb
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx
-- app/pb_kits/playbook/pb_circle_chart/docs/_description.md
-- app/pb_kits/playbook/pb_circle_chart/docs/example.yml
-- app/pb_kits/playbook/pb_circle_chart/docs/index.js
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.html.erb
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx
@@ -924,6 +863,10 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.html.erb
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.md
@@ -1168,37 +1111,6 @@ files:
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.md
 - app/pb_kits/playbook/pb_form_pill/docs/example.yml
 - app/pb_kits/playbook/pb_form_pill/docs/index.js
-- app/pb_kits/playbook/pb_gauge/docs/_description.md
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors_rails.md
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors_react.md
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_complex_rails.md
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_complex_react.md
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.html.erb
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.html.erb
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_height.html.erb
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.html.erb
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.md
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.md
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_title.html.erb
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_units.html.erb
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_units_react.md
-- app/pb_kits/playbook/pb_gauge/docs/example.yml
-- app/pb_kits/playbook/pb_gauge/docs/index.js
 - app/pb_kits/playbook/pb_hashtag/docs/_description.md
 - app/pb_kits/playbook/pb_hashtag/docs/_footer.md
 - app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.html.erb
@@ -1406,25 +1318,6 @@ files:
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.md
 - app/pb_kits/playbook/pb_lightbox/docs/example.yml
 - app/pb_kits/playbook/pb_lightbox/docs/index.js
-- app/pb_kits/playbook/pb_line_graph/docs/_description.md
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.html.erb
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors_rails.md
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors_react.md
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.html.erb
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.html.erb
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.md
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.html.erb
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.html.erb
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.html.erb
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md
-- app/pb_kits/playbook/pb_line_graph/docs/example.yml
-- app/pb_kits/playbook/pb_line_graph/docs/index.js
 - app/pb_kits/playbook/pb_link/docs/_link_color.html.erb
 - app/pb_kits/playbook/pb_link/docs/_link_color.jsx
 - app/pb_kits/playbook/pb_link/docs/_link_disabled.html.erb
@@ -1536,6 +1429,9 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.md
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.html.erb
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.jsx
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx
@@ -2003,8 +1899,12 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.md
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_height.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb

@@ -1,26 +0,0 @@
-<% data = [{
-    name: 'Installation',
-    data: [1475,200,3000,654,656]
-}, {
-    name: 'Manufacturing',
-    data: [4434,524,2320,440,500]
-}, {
-    name: 'Sales & Distribution',
-    data: [3387,743,1344,434,440,]
-}, {
-    name: 'Project Development',
-    data: [3227,878,999,780,1000]
-}, {
-    name: 'Other',
-    data: [1111,677,3245,500,200]
-}] %>
-
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id: "bar-colors",
-    y_axis_min: 0,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Bar Graph with Custom Data Colors',
-    colors: ['data-4', 'data-5', 'data-6', 'data-7', 'data-8']
-}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import colors from '../../tokens/exports/_colors.module.scss'
-import barGraphTheme from '../barGraphTheme';
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-
-
-
-const chartData = [{
-  name: 'Installation',
-  data: [1475, 200, 3000, 654, 656],
-}, {
-  name: 'Manufacturing',
-  data: [4434, 524, 2320, 440, 500],
-}, {
-  name: 'Sales & Distribution',
-  data: [3387, 743, 1344, 434, 440],
-}, {
-  name: 'Project Development',
-  data: [3227, 878, 999, 780, 1000],
-}, {
-  name: 'Other',
-  data: [1111, 677, 3245, 500, 200],
-}]
-
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Custom Data Colors",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  colors: [colors.data_4, colors.data_5, colors.data_6, colors.data_7, colors.data_8],
-}
-
-const BarGraphColors = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default BarGraphColors

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md

@@ -1,2 +0,0 @@
-Custom data `colors` allow for color customization to match the needs of business requirements.
-Pass the prop colors and use desired values `data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8` in an array. Hex colors are also available `eg: #CA0095`

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb

@@ -1,42 +0,0 @@
-<% data = [{
-  name: 'Role',
-  data: [0, 200, 300, 654, 656],
-}, {
-  name: 'Company',
-  data: [150, 524, 320, 440, 500],
-}] %>
-
-<% bar_graph_options = {
-  customOptions: {
-    yAxis: {
-      tickInterval: 5,
-    },
-    xAxis: {
-      categories: [
-        raw(pb_rails("icon", props: { icon: "frown", color: "error", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "frown", color: "warning", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "frown-open", color: "neutral", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "smile", color: "category_7", size: "2x" })),
-        raw(pb_rails("icon", props: { icon: "smile-beam", color: "success", size: "2x" }))
-      ],
-      labels: {
-        useHTML: true,
-        sytle: {
-          fontSize: '1.4em',
-        },
-        y: 42,
-      },
-    },
-    legend: {
-      itemMarginTop: 62,
-    },
-  } 
-} %>
-
-<%= pb_rails("bar_graph", props: {
-    chart_data: data,
-    id: "bar-default",
-    legend: true,
-    title: 'Bar Graph with Custom Overrides',
-    custom_options: bar_graph_options
-}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md

@@ -1,2 +0,0 @@
-The `custom_options` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
- It's important to note that certain options may require specific script imports to function properly.

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb

@@ -1,26 +0,0 @@
-<% data = [{
-    name: 'Installation',
-    data: [1475,200,3000,654,656]
-}, {
-    name: 'Manufacturing',
-    data: [4434,524,2320,440,500]
-}, {
-    name: 'Sales & Distribution',
-    data: [3387,743,1344,434,440,]
-}, {
-    name: 'Project Development',
-    data: [3227,878,999,780,1000]
-}, {
-    name: 'Other',
-    data: [1111,677,3245,500,200]
-}] %>
-
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id: "bar-default",
-    y_axis_min: 0,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    subtitle: 'Source: thesolarfoundation.com',
-    title: 'Solar Employment Growth by Sector, 2010-2016',
-}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import barGraphTheme from '../barGraphTheme';
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-
-
-const chartData = [{
-  name: 'Installation',
-  data: [1475, 200, 3000, 654, 656],
-}, {
-  name: 'Manufacturing',
-  data: [4434, 524, 2320, 440, 500],
-}, {
-  name: 'Sales & Distribution',
-  data: [3387, 743, 1344, 434, 440],
-}, {
-  name: 'Project Development',
-  data: [3227, 878, 999, 780, 1000],
-}, {
-  name: 'Other',
-  data: [1111, 677, 3245, 500, 200],
-}]
-
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: 'Solar Employment Growth by Sector, 2010-2016',
-  },
-  subtitle: {
-    text: 'Source: thesolarfoundation.com',
-  },
-  xAxis: {
-    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-}
-
-const BarGraphDefault = () => {
-  const options = Highcharts.merge({}, barGraphTheme, chartOptions)
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default BarGraphDefault

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb

@@ -1,26 +0,0 @@
-<% data = [{
-    name: 'Number of Installations',
-    data: [1475,200,3000,654,656]
-}] %>
-
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id: "bar-fixed-height",
-    y_axis_min: 0,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Fixed Height (300px)',
-    height: '300'
-}) %>
-
-<br /><br />
-
-<%= pb_rails("bar_graph", props: {
-    axis_title: 'Number of Employees',
-    chart_data: data,
-    id: "bar-percentage-height",
-    y_axis_min: 0,
-    x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-    title: 'Percentage Height (50%)',
-    height: '50%'
-}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx

@@ -1,69 +0,0 @@
-import React from 'react'
-import barGraphTheme from '../barGraphTheme';
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-
-
-const chartData = [{
-  name: 'Number of Installations',
-  data: [1475, 200, 3000, 654, 656],
-}]
-
-const pixelHeightChartOptions = {
-  chart: {
-    height: "300"
-  },
-  series: chartData,
-  title: {
-    text: "Fixed Height (300px)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-};
-
-const percentageHeightChartOptions = {
-  chart: {
-    height: "50%"
-  },
-  series: chartData,
-  title: {
-    text: "Percentage Height (50%)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-};
-
-const pixelOptions = Highcharts.merge({}, barGraphTheme, pixelHeightChartOptions)
-
-const percentageOptions = Highcharts.merge({}, barGraphTheme, percentageHeightChartOptions)
-
-const BarGraphHeight = () => (
-  <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={pixelOptions}
-      />
-
-    <br />
-    <br />
-
-    <HighchartsReact
-        highcharts={Highcharts}
-        options={percentageOptions}
-    />
-  </div>
-)
-
-export default BarGraphHeight

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md

@@ -1,3 +0,0 @@
-By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
-
-Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.html.erb

@@ -1,58 +0,0 @@
-<% bar_graph_options = {
-    customOptions: {
-        chart: {
-            type: 'bar'
-        },
-        title: {
-            text: 'Historic World Population by Region',
-            align: 'left'
-        },
-        subtitle: {
-            text: 'Source: <a ' +
-                'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
-                'target="_blank">Wikipedia.org</a>',
-            align: 'left'
-        },
-        xAxis: {
-            categories: ['Africa', 'America', 'Asia', 'Europe'],
-            lineWidth: 0
-        },
-        yAxis: {
-            min: 0,
-            title: {
-                text: 'Population (millions)',
-                align: 'high'
-            },
-            labels: {
-                overflow: 'justify'
-            },
-        },
-        tooltip: {
-            valueSuffix: ' millions'
-        },
-        plotOptions: {
-            bar: {
-                dataLabels: {
-                    enabled: true
-                },
-                groupPadding: 0.1
-            }
-        },
-        series: [{
-            name: 'Year 1990',
-            data: [631, 727, 3202, 721]
-        }, {
-            name: 'Year 2000',
-            data: [814, 841, 3714, 726]
-        }, {
-            name: 'Year 2018',
-            data: [1276, 1007, 4561, 746]
-        }]
-    }
-} %>
-
-<%= pb_rails("bar_graph", props: {
-    id: "bar-horizontal",
-    y_axis_min: 0,
-    custom_options: bar_graph_options,
-}) %>