playbook_ui_docs 15.0.0.pre.alpha.stimulusbutton10763 → 15.0.0

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 15.0.0.pre.alpha.stimulusbutton10763
+  version: 15.0.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-09-25 00:00:00.000000000 Z
+date: 2025-09-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -328,10 +328,6 @@ files:
 - app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_loading.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_loading.md
-- app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.html.erb
-- app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md
-- app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb
-- app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.md
 - app/pb_kits/playbook/pb_button/docs/_button_options.html.erb
 - app/pb_kits/playbook/pb_button/docs/_button_options.jsx
 - app/pb_kits/playbook/pb_button/docs/_button_props_swift.md
@@ -515,7 +511,6 @@ files:
 - app/pb_kits/playbook/pb_collapsible/docs/index.js
 - app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb
 - app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx
-- app/pb_kits/playbook/pb_contact/docs/_contact_default.md
 - app/pb_kits/playbook/pb_contact/docs/_contact_default_swift.md
 - app/pb_kits/playbook/pb_contact/docs/_contact_props_swift.md
 - app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb
@@ -1389,8 +1384,6 @@ files:
 - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx
 - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_default.html.erb
 - app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_default.jsx
-- app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb
-- app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx
 - app/pb_kits/playbook/pb_loading_inline/docs/example.yml
 - app/pb_kits/playbook/pb_loading_inline/docs/index.js
 - app/pb_kits/playbook/pb_map/docs/_map_default.jsx
@@ -1527,9 +1520,6 @@ files:
 - app/pb_kits/playbook/pb_nav/docs/_description.md
 - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.jsx
-- app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.html.erb
-- app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.jsx
-- app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.md
 - app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_bold_swift.md
 - app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_default_swift.md
 - app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_no_highlight_swift.md
@@ -1639,59 +1629,6 @@ files:
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_tips.md
 - app/pb_kits/playbook/pb_passphrase/docs/example.yml
 - app/pb_kits/playbook/pb_passphrase/docs/index.js
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js
 - app/pb_kits/playbook/pb_person/docs/_description.md
 - app/pb_kits/playbook/pb_person/docs/_footer.md
 - app/pb_kits/playbook/pb_person/docs/_person_default.html.erb
@@ -2198,9 +2135,6 @@ files:
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md
-- app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.html.erb
-- app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx
-- app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.html.erb
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.jsx
 - app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb
@@ -2291,47 +2225,25 @@ files:
 - app/pb_kits/playbook/pb_timeline/docs/index.js
 - app/pb_kits/playbook/pb_timestamp/docs/_description.md
 - app/pb_kits/playbook/pb_timestamp/docs/_footer.md
+- app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align_swift.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default_swift.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_swift.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_props_swift.md
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.md
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_swift.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_swift.md
 - app/pb_kits/playbook/pb_timestamp/docs/example.yml
 - app/pb_kits/playbook/pb_timestamp/docs/index.js

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.html.erb

@@ -1,29 +0,0 @@
-<br/>
-  <%= pb_rails("button", props: { text: "Disable Buttons", variant: "link", id: "toggle-disabled-demo" }) %>
-  <%= pb_rails("button", props: { text: "Enable Buttons", variant: "link", id: "toggle-enabled-demo" }) %>
-<br/>
-<%= pb_rails("button", props: { text: "I am a Normal Button", id: "normal_managed_button", data:{pb_button_managed: true}, margin_bottom: "lg" }) %>
-<br/>
-<%= pb_rails("button", props: { text: "I am an <a> Button", id: "a_tag_managed_button", tag:"a", data:{pb_button_managed: true}, link: "http://google.com", margin_right: "lg" }) %>
-
-<script>
-  document.addEventListener('DOMContentLoaded', function () {
-    const disableTrigger = document.querySelector('#toggle-disabled-demo')
-    const enableTrigger = document.querySelector('#toggle-enabled-demo')
-
-    // Managed Buttons
-    const btn = document.querySelector('#normal_managed_button');
-    const link = document.querySelector('#a_tag_managed_button');
-
-    disableTrigger.addEventListener('click', (e) => {
-        // Disable both default button and a tag button
-        btn.setAttribute('disabled', true)
-        link.setAttribute('aria-disabled', 'true')
-    });
-    enableTrigger.addEventListener('click', (e) => {
-        // Enable both default button and a tag button
-        btn.removeAttribute('disabled')
-        link.removeAttribute('aria-disabled')
-    });
-  });
-</script>

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md

@@ -1,5 +0,0 @@
-If needing to toggle the disabled state of the Button dynmically, you can now do so in rails using the `pb-button-managed` data attribute. 
-
-If your button has `data:{ pb-button-managed: true }`  on it, you can then toggle state via attributes: for buttons set/remove disabled, for links set/remove aria-disabled="true". This will handle disabling the button, preventing clicks as well as all style changes so you don't have to.  
-
-Click to enable or disable the buttons above and view the code snippet below for details!

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb

@@ -1,18 +0,0 @@
-  <%= pb_rails("button", props: { text: "Disable Button", variant: "link", id: "toggle-disabled-demo-with-helper" }) %>
-  <%= pb_rails("button", props: { text: "Enable Button", variant: "link", id: "toggle-enabled-demo-with-helper" }) %>
-<br/>
-<%= pb_rails("button", props: { text: "Watch me Change!", id: "managed_button_with_helper", data:{pb_button_managed: true} }) %>
-
-<script>
-  document.addEventListener('DOMContentLoaded', function () {
-    const demoBtn = document.querySelector('#managed_button_with_helper')
-
-    const disable = document.querySelector('#toggle-disabled-demo-with-helper')
-    const enable = document.querySelector('#toggle-enabled-demo-with-helper')
-
-    disable.addEventListener('click', (e) => {demoBtn._pbButton.disable()});
-
-    enable.addEventListener('click', (e) => {demoBtn._pbButton.enable()});
-
-  });
-</script>

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.md

@@ -1,5 +0,0 @@
-The disabled state for the button can also be toggled via small helpers available through the `pb-button-managed` data attribute. 
-
-If your button has `data:{ pb-button-managed: true }`  on it, you can then toggle state via the provided `_pbButton.disable()` and `_pbButton.enable()` helpers as shoen in the code snippet below.
-
-Click to enable or disable the buttons above!

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.md

@@ -1,5 +0,0 @@
-The Contact kit automatically formats US phone numbers when the `contactType` / `contact_type` is one of: `home` (default), `work`, `cell`, `work-cell`, `wrong-phone`.
-
-- Use `email` to display emails.
-- Use `international` to display International phone numbers exactly as provided (no formatting applied).
-- Use `extension` to display four digit phone extensions.

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("loading_inline", props: {text: "Dotted Spinner", variant: "dotted"}) %>
-
-<br/>
-
-<%= pb_rails("loading_inline", props: {text: "Solid Spinner", variant: "solid"}) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { LoadingInline } from 'playbook-ui'
-
-const LoadingInlineVariant = (props) => {
-  return (
-    <div>
-      <LoadingInline 
-          text=" Dotted Spinner" 
-          variant="dotted" 
-          {...props}
-      />
-
-      <br />
-  
-      <LoadingInline
-          text=" Solid Spinner"
-          variant="solid"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default LoadingInlineVariant

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.html.erb

@@ -1,6 +0,0 @@
-<%= pb_rails("nav", props: { orientation: "horizontal", extended_underline: true }) do %>
-  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
-  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
-  <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
-  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
-<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.jsx

@@ -1,39 +0,0 @@
-import React from 'react'
-
-import Nav from '../_nav'
-import NavItem from '../_item'
-
-const HorizontalNavExtendedunderline = (props) => {
-  return (
-    <Nav
-        extendedUnderline
-        link="#"
-        orientation="horizontal"
-        {...props}
-    >
-      <NavItem
-          link="#"
-          text="About"
-          {...props}
-      />
-      <NavItem
-          active
-          link="#"
-          text="Case Studies"
-          {...props}
-      />
-      <NavItem
-          link="#"
-          text="Service"
-          {...props}
-      />
-      <NavItem
-          link="#"
-          text="Contacts"
-          {...props}
-      />
-    </Nav>
-  )
-}
-
-export default HorizontalNavExtendedunderline

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.md

@@ -1 +0,0 @@
-The optional `extendedUnderline`/`extended_underline` prop can be used with the default `normal` variant of the horizontal orientation of the nav to extend the underline to take up the full width of the container. 

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb

@@ -1,35 +0,0 @@
-<% chart_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]
-}] %>
-
-<% chart_options = {
-  series: chart_data,
-  title: {
-    text: "Bar Graph with Custom Data Colors",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  colors: ['#1CA05C', '#FD804C', '#144075', '#00C4D7', '#DA0014'],
-}
-%>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-import colors from '../../tokens/exports/_colors.module.scss'
-
-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 PbBarGraphColors = () => {
-
-  return (
-    <div>
-      <PbBarGraph
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-
-export default PbBarGraphColors

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md

@@ -1 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements. To accomplish this, you can use hex values.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements.
-You can use Playbook's color tokens or use hex values.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb

@@ -1,38 +0,0 @@
-<% chart_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]
-}] %>
-
-
-<% chart_options = {
-  series: chart_data,
-  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',
-    },
-  },
-}
-%>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
-  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 PbBarGraphDefault = (props) => {
-
-  return (
-    <div>
-      <PbBarGraph
-          {...props}
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-
-export default PbBarGraphDefault

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb

@@ -1,46 +0,0 @@
-<% chart_data = [{
-    name: 'Number of Installations',
-    data: [1475,200,3000,654,656]
-}] %>
-
-<% chart_options_pixel = {
- chart: {
-    height: "300"
-  },
-  series: chart_data,
-  title: {
-    text: "Fixed Height (300px)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  }
-} %>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options_pixel}) %>
-
-<br /><br />
-
-<% chart_options_percentage = {
- chart: {
-    height: "50%"
-  },
-  series: chart_data,
-  title: {
-    text: "Percentage Height (50%)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  }
-} %>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options_percentage}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx

@@ -1,62 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
-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 PbBarGraphHeight = () => (
-  <div>
-      <PbBarGraph
-          options={pixelHeightChartOptions}
-      />
-
-    <br />
-    <br />
-
-    <PbBarGraph
-        options={percentageHeightChartOptions}
-    />
-  </div>
-)
-
-export default PbBarGraphHeight

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_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.