playbook_ui_docs 14.22.0 → 14.23.0.pre.alpha.PLAY2121enableexpandedfield9199

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.22.0
+  version: 14.23.0.pre.alpha.PLAY2121enableexpandedfield9199
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-06-20 00:00:00.000000000 Z
+date: 2025-07-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -74,6 +74,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx
@@ -103,8 +105,10 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_scrollbar_none.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_scrollbar_none.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx
@@ -147,6 +151,12 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json
@@ -226,14 +236,13 @@ files:
 - 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.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.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
@@ -245,8 +254,6 @@ files:
 - 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_pb_styles.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
 - 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
@@ -272,7 +279,8 @@ files:
 - app/pb_kits/playbook/pb_body/docs/_body_styled.md
 - app/pb_kits/playbook/pb_body/docs/_body_truncate.html.erb
 - app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx
-- app/pb_kits/playbook/pb_body/docs/_body_truncate.md
+- app/pb_kits/playbook/pb_body/docs/_body_truncate_rails.md
+- app/pb_kits/playbook/pb_body/docs/_body_truncate_react.md
 - app/pb_kits/playbook/pb_body/docs/_description.md
 - app/pb_kits/playbook/pb_body/docs/_footer.md
 - app/pb_kits/playbook/pb_body/docs/example.yml
@@ -417,7 +425,8 @@ files:
 - 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.md
+- 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
@@ -429,8 +438,6 @@ files:
 - 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_pb_styles.jsx
-- app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md
 - 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
@@ -439,6 +446,7 @@ files:
 - 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
@@ -874,6 +882,8 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb
@@ -1080,12 +1090,15 @@ 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.md
+- 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.md
+- 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
@@ -1098,8 +1111,6 @@ files:
 - 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_pb_styles.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.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
@@ -1107,6 +1118,7 @@ files:
 - 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
@@ -1319,11 +1331,13 @@ files:
 - 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.md
+- 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
@@ -1331,8 +1345,6 @@ files:
 - 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/_line_graph_pb_styles.jsx
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.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
@@ -1435,6 +1447,9 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.html.erb
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.jsx
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.md
@@ -1659,6 +1674,9 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
@@ -2244,7 +2262,8 @@ files:
 - app/pb_kits/playbook/pb_title/docs/_title_responsive.md
 - app/pb_kits/playbook/pb_title/docs/_title_truncate.html.erb
 - app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx
-- app/pb_kits/playbook/pb_title/docs/_title_truncate.md
+- app/pb_kits/playbook/pb_title/docs/_title_truncate_rails.md
+- app/pb_kits/playbook/pb_title/docs/_title_truncate_react.md
 - app/pb_kits/playbook/pb_title/docs/example.yml
 - app/pb_kits/playbook/pb_title/docs/index.js
 - app/pb_kits/playbook/pb_title_count/docs/_description.md
@@ -2281,8 +2300,10 @@ files:
 - app/pb_kits/playbook/pb_toggle/docs/_toggle_props_swift.md
 - app/pb_kits/playbook/pb_toggle/docs/example.yml
 - app/pb_kits/playbook/pb_toggle/docs/index.js
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx
-- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.md
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.md
@@ -2332,8 +2353,10 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_react.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
@@ -2404,14 +2427,6 @@ files:
 - app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size.jsx
 - app/pb_kits/playbook/pb_user_badge/docs/example.yml
 - app/pb_kits/playbook/pb_user_badge/docs/index.js
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/example.yml
-- app/pb_kits/playbook/pb_walkthrough/docs/index.js
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.html.erb
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.jsx
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.html.erb

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

@@ -1,72 +0,0 @@
-import React from 'react'
-import ReactDOMServer from 'react-dom/server'
-import BarGraph from '../_bar_graph'
-import Icon from '../../pb_icon/_icon'
-
-const chartData = [
-  {
-    name: 'Role',
-    data: [0, 200, 300, 654, 656],
-  },
-  {
-    name: 'Company',
-    data: [150, 524, 320, 440, 500],
-  },
-]
-
-const renderIcon = (iconName, color) => {
-  return ReactDOMServer.renderToStaticMarkup(
-  <Icon
-      color={color}
-      icon={iconName}
-  />)
-};
-
-const barGraphOptions = {
-  yAxis: {
-    tickInterval: 5,
-  },
-  xAxis: {
-    categories: ['1', '2', '3', '4', '5'],
-    labels: {
-      useHTML: true,
-      formatter: function () {
-        switch (this.value) {
-          case '1':
-            return `${renderIcon('frown', 'error')}`;
-          case '2':
-            return `${renderIcon('frown', 'warning')}`;
-          case '3':
-            return `${renderIcon('frown-open', 'neutral')}`;
-          case '4':
-            return `${renderIcon('smile', 'category_7')}`;
-          case '5':
-            return `${renderIcon('smile-beam', 'success')}`;
-          default:
-            return ''
-        }
-      },
-      style: {
-        fontSize: '1.4em',
-      },
-      y: 42,
-    },
-  },
-  legend: {
-    itemMarginTop: 62,
-  },
-}
-
-const BarGraphCustom = () => (
-  <div>
-    <BarGraph
-        chartData={chartData}
-        customOptions={barGraphOptions}
-        id="happiness-dashboard"
-        legend
-        title="Bar Graph with Custom Overrides"
-    />
-  </div>
-)
-
-export default BarGraphCustom

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

@@ -1,6 +0,0 @@
-The `customOptions` 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.
-
-Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our [staticOptions](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L85-L141). For example, `yAxis` will need to be wrapped with square brackets.
-
-You may also need to override any of the [defaults](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L45-L73) in order to get that options to work.

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

@@ -1,64 +0,0 @@
-import React from 'react'
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-
-import "../BarGraphStyles.scss";
-// Your path might look more like this
-//import "playbook-ui/dist/pb_bar_graph/BarGraphStyles.scss";
-
-const columnChartData = [
-  {
-    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 columnOptions = {
-  chart: {
-    type: "column",
-  },
-  series: columnChartData,
-  title: {
-    text: "Solar Employment Growth by Sector, 2010-2016",
-  },
-  subtitle: {
-    text: "Source: thesolarfoundation.com",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    min: 0,
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  legend: { enabled: false },
-  credits: { enabled: false },
-};
-
-const BarGraphPbStyles = () => (
-  <div>
-    <HighchartsReact highcharts={Highcharts}
-        options={columnOptions}
-    />
-  </div>
-)
-
-export default BarGraphPbStyles

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

@@ -1 +0,0 @@
-You don't need to use the bar graph kit to apply the styles to your Highcharts bar graph. Just import the BarGraphStyles.scss to your component and the styles will apply automatically.  

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import circleChartTheme from '../circleChartTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const data = [
-  {
-    name: 'Waiting for Calls',
-    y: 41,
-  },
-  {
-    name: 'On Call',
-    y: 49,
-  },
-  {
-    name: 'After Call',
-    y: 10,
-  },
-]
-
-const baseOptions = {
-  series: [{ data: data }],
-}
-
-const CircleChartPbStyles = () => {
-  const options = Highcharts.merge({}, circleChartTheme, baseOptions )
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default CircleChartPbStyles;

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md

@@ -1 +0,0 @@
-You don't need to use the Circle Chart Kit to apply Playbook styles to your Highcharts circle chart. Just import circleChartTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data = [{ name: "Name", y: 45 }]
-
-const baseOptions = {
-  series: [{ data: data }],
-};
-
-const GaugePbStyles = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugePbStyles;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md

@@ -1 +0,0 @@
-You don't need to use the Gauge Kit to apply Playbook styles to your Highcharts gauge chart. Just import gaugeTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const data = [{
-  name: 'Installation',
-  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
-}, {
-  name: 'Manufacturing',
-  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
-}, {
-  name: 'Sales & Distribution',
-  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
-}, {
-  name: 'Project Development',
-  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
-}, {
-  name: 'Other',
-  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
-}]
-
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const baseOptions = {
-  series: data,
-  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
-  subtitle: { text: "Source: thesolarfoundation.com" },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-}
-
-const LineGraphPbStyles = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, baseOptions)
-
-  return(
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default LineGraphPbStyles

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md

@@ -1 +0,0 @@
-You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx

@@ -1,69 +0,0 @@
-import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
-
-const WalkthroughContinuous = (props) => {
-  const [state, setState] = useState({
-    run: false,
-    steps: [
-      {
-        title: 'Example Title',
-        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
-        target: '.examplePaused',
-      },
-      {
-        title: 'Toggle',
-        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
-        target: '.pb_toggle_control',
-      },
-      {
-        title: 'Top Nav',
-        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
-        target: '.pb--page--topNav',
-      },
-    ],
-  })
-
-  return (
-    <div>
-      <div
-          className="examplePaused"
-          style={{ 'display': 'inline' }}
-      >
-        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
-      </div>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-            setState({ ...state,
-              run: true,
-            })
-          }}
-      >
-        {'Start Tour'}
-      </Button>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-          setState({
-            ...state,
-            run: false,
-          })
-        }}
-      >
-        {'Reset/Stop Tour'}
-      </Button>
-
-      <Walkthrough
-          run={state.run}
-          steps={state.steps}
-          {...props}
-          continuous
-      />
-    </div>
-  )
-}
-
-export default WalkthroughContinuous

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx

@@ -1,71 +0,0 @@
-import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
-
-const WalkthroughDefault = (props) => {
-  const [state, setState] = useState({
-    run: false,
-    steps: [
-      {
-        title: 'Example title',
-        content:
-      'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
-        target: '.example',
-      },
-      {
-        title: 'Toggle',
-        content:
-        'By default the walkthrough kit will cycle through each step provided.',
-        target: '.pb_toggle_control',
-      },
-      {
-        title: 'Top Nav',
-        content:
-          'By default the walkthrough kit will cycle through each step provided.',
-        target: '.pb--page--topNav',
-      },
-    ],
-  })
-
-  return (
-    <div>
-      <div
-          className="example"
-          style={{ 'display': 'inline' }}
-      >
-        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
-      </div>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-            setState({ ...state,
-              run: true,
-            })
-          }}
-      >
-        {'Start Tour'}
-      </Button>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-          setState({
-            ...state,
-            run: false,
-          })
-        }}
-      >
-        {'Reset/Stop Tour'}
-      </Button>
-
-      <Walkthrough
-          run={state.run}
-          steps={state.steps}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default WalkthroughDefault