playbook_ui_docs 15.4.0.pre.alpha.PLAY2465improvetruncation12292 → 15.4.0.pre.alpha.PLAY2582rails722112532

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: edb078405fa270195240c07e0c7fd8f481074737f29377280bb42b2e7c1ea39a
-  data.tar.gz: 500de2d4f7f2e6ee787735073670a74c036f38610d349100f6ad178e33242407
+  metadata.gz: 646f50be1e2ceac112b7253b497e1a0b992a32a17c9ce7c3cbf8d1c5ce3920f2
+  data.tar.gz: d249a9d25b625ea7f8de4e31431fa0fb3c37e2a56bbdfb6f35bcaaa9cf7abb8a
 SHA512:
-  metadata.gz: dc31f73680d6c1f30a51717f62fd8108540a955de0076d81161babe6b2b8145173c67ff5c244ee13806eb4e6aee6f469a55e5e633ffca7d115df17418def8a81
-  data.tar.gz: cef2c6c4a14520eccf254dc97c918697c1975711fd2593ce3a028251eac802f170c92c1b2a221656ebd33230a22e1e752b7ea19f5f11c264d309f96cf8541b3c
+  metadata.gz: 818ffac8cfa2b172de4873713e0542f28f1615bd70565facaf25ced1faef66da327597c295cd2e0b790e9142f1221c29cc23fa7c19dcb0f76edd693671f898c2
+  data.tar.gz: 0f27851d84b5aabe20b962473ffa1eba95c561abd1512af27d3d729dba5511a7f98ad78a7235e5f3dc47b81660c2446d05a530bd69cec96536cb8f1eff577235

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { AdvancedTable, colors } from "playbook-ui"
+import AdvancedTable from '../_advanced_table'
+import colors from '../../tokens/exports/_colors.module.scss'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AdvancedTable } from "playbook-ui";
+import AdvancedTable from '../_advanced_table';
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnStylingColumnHeaders = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react"
-import { AdvancedTable, Button, Flex } from "playbook-ui"
+import AdvancedTable from '../_advanced_table'
+import Flex from '../../pb_flex/_flex'
+import Button from '../../pb_button/_button'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
 
 const AdvancedTableInfiniteScroll = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
-import { AdvancedTable, TextInput, Body } from "playbook-ui";
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import TextInput from '../../pb_text_input/_text_input'
+import Body from '../../pb_body/_body'
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableInlineEditing = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx

@@ -1,7 +1,8 @@
 import React from "react"
 import AdvancedTable from '../_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
-import { colors } from "playbook-ui"
+import colors from '../../tokens/exports/_colors.module.scss'
+
 
 const AdvancedTableRowStyling = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("copy_button", props: {
+  text: "Copy Text",
+  tooltip_position: "right",
+  tooltip_text: "Text copied!",
+  value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook's 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease.",
+  variant: "button",
+}) %>
+
+<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import CopyButton from '../_copy_button'
+import Textarea from '../../pb_textarea/_textarea'
+
+const CopyButtonVariant = (props) => (
+  <div>
+    <CopyButton
+        {...props}
+        text="Copy Text"
+        tooltipPlacement="right"
+        tooltipText="Text copied!"
+        value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
+        variant="button"
+    />
+
+    <Textarea
+        {...props}
+        placeholder="Copy and paste here"
+    />
+  </div>
+)
+
+export default CopyButtonVariant

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_rails.md

@@ -0,0 +1 @@
+Pass in `variant: "button"` to replace the Circle Icon Button with the Button kit. Set the button's text with the `text` prop.

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_react.md

@@ -0,0 +1 @@
+Pass in `variant="button"` to replace the Circle Icon Button with the Button kit. Set the button's text with the `text` prop.

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb

@@ -1,2 +1,2 @@
-<%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
-<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
+<%= pb_rails("copy_button", props: { id: "default-copy-button", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
+<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Click the icon above to copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx

@@ -7,7 +7,6 @@ const CopyButtonDefault = (props) => (
   <div>
     <CopyButton
         {...props}
-        text="Copy Text"
         tooltipPlacement="right"
         tooltipText="Text copied!"
         value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
@@ -15,7 +14,7 @@ const CopyButtonDefault = (props) => (
 
     <Textarea
         {...props}
-        placeholder="Copy and paste here"
+        placeholder="Click the icon above to copy and paste here"
     />
   </div>
 )

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %>
-<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button" }) %>
+<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button", variant: "button" }) %>
 <%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
-<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button" }) %>
+<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button", variant: "button" }) %>
 <%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx

@@ -21,6 +21,7 @@ const CopyButtonFrom = (props) => {
         text="Copy Body text"
         tooltipPlacement="right"
         tooltipText="Body text copied!"
+        variant="button"
     />
 
     <TextInput
@@ -36,6 +37,7 @@ const CopyButtonFrom = (props) => {
         text="Copy Text Input"
         tooltipPlacement="right"
         tooltipText="Text input copied!"
+        variant="button"
     />
 
     <Textarea

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

@@ -1,10 +1,12 @@
 examples:
   rails:
   - copy_button_default: Default
+  - copy_button_button_variant: Button Variant
   - copy_button_from: Copy From
   - copy_button_hook_rails: Copy Hook
   
   react:
   - copy_button_default: Default
+  - copy_button_button_variant: Button Variant
   - copy_button_from: Copy From
   - copy_button_hook: Copy Hook

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

@@ -1,3 +1,4 @@
 export { default as CopyButtonDefault } from './_copy_button_default.jsx'
 export { default as CopyButtonFrom } from './_copy_button_from.jsx' 
 export { default as CopyButtonHook } from './_copy_button_hook.jsx'
+export { default as CopyButtonButtonVariant } from './_copy_button_button_variant.jsx'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,7 +1,7 @@
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
-  <form>
+  <%= pb_form_with(scope: :example, method: :get, url: "", options: { remote: true }) do |form| %>
     <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
         <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
     <% end %>
@@ -13,5 +13,5 @@
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
-  </form>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateAlignment = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateDefault = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateOrientation = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateSize = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
+import Card from '../../pb_card/_card'
+import Caption from '../../pb_caption/_caption'
+import FormPill from '../_form_pill'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LoadingInline } from 'playbook-ui'
+import LoadingInline from '../_loading_inline'
 
 const LoadingInlineVariant = (props) => {
   return (

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

@@ -1,3 +1,5 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
+
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 import colors from '../../tokens/exports/_colors.module.scss'
 
 const chartData = [{

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
   const chartData = [{
     name: 'Installation',

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

@@ -0,0 +1 @@
+In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
 const chartData = [{
   name: 'Number of Installations',

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
 
 const chartOptions = {

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
 
 const chartData = [{

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

@@ -1,6 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
+import PbBarGraph from '../_pb_bar_graph'
 
 const chartData = [{
   name: 'Number of Installations',

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

@@ -36,7 +36,7 @@
 }
 %>
 
-<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
+<%= pb_rails("title", props: {size: 4, text: "align | verticalAlign", padding_top: "sm", padding_bottom: "sm"})%>
 
 
 <%= pb_rails("pb_bar_graph", props: {options: chart_options_right}) %>

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 import Title from "../../pb_title/_title"
 
 

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

@@ -0,0 +1,11 @@
+Highcharts provides many options for customizing the legend display. This example showcases the following:
+
+`align` can be used to align the legend left, right or center (defaults to center)
+
+`verticalAlign` can be used to place the legend above the graph. Options are top, middle, bottom with default set to bottom
+
+`layout` determines the position of the legend items. Options are horizontal, vertical or proximate with default set to horizontal `layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
+
+`x` offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right (defaults to 0)
+
+`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down (defaults to 0)

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
 
 const chartData = [{

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
 import colors from '../../tokens/exports/_colors.module.scss'
 import typography from '../../tokens/exports/_typography.module.scss'

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

@@ -1,6 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
+import PbBarGraph from '../_pb_bar_graph'
 
 const chartData = [{
   name: 'Number of Installations',

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

@@ -1,6 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
+import PbBarGraph from '../_pb_bar_graph'
 
 const chartData = [{
   name: 'Installation',

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

@@ -1,3 +1,5 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
+
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { PbCircleChart, Title } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
+import Title from "../../pb_title/_title";
 
 const data= [
         {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { PbCircleChart, colors } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
+import colors from '../../tokens/exports/_colors.module.scss';
 
 const data= [
         {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PbCircleChart } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
 
 const data = [
   {