playbook_ui 15.5.0.pre.alpha.draggablefix12589 → 15.5.0.pre.rc.0

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 '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
 
   const chartData = [{
     name: 'Installation',

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 '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
 
 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 '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
 
 
 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 '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
 
 
 const chartData = [{

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

@@ -1,5 +1,6 @@
 import React from 'react'
-import PbBarGraph from '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
+
 
 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 | verticalAlign", padding_top: "sm", padding_bottom: "sm"})%>
+<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", 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 '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
 import Title from "../../pb_title/_title"
 
 

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

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

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

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

@@ -1,5 +1,3 @@
-**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. 
+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. 
 
 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,6 +1,5 @@
 import React from "react";
-import PbCircleChart from "../_pb_circle_chart";
-import Title from "../../pb_title/_title";
+import { PbCircleChart, Title } from "playbook-ui";
 
 const data= [
         {

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

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

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

@@ -1,5 +1,4 @@
-Tooltip options from Highcharts:
-
+Custom tooltip formatting is configured through the tooltip object in the options passed to the kit: 
 `headerFormat` **Type**: String | when set to null will disable the header.
 `pointFormat` **Type**: String | defines the HTML template for each data point and supports custom HTML when `useHTML` is enabled.
 `useHTML` **Type**: boolean (default false) | enables HTML rendering in tooltips.

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
-import PbCircleChart from "../_pb_circle_chart";
-import Button from "../../pb_button/_button";
+import { PbCircleChart, Button } from "playbook-ui";
 
 const chartData = [
   {

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

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

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

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

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

@@ -1,5 +1,3 @@
-**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. 
+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. 
 
 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_gauge_chart/docs/_pb_gauge_chart_color.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import colors from '../../tokens/exports/_colors.module.scss'
+import { colors } from 'playbook-ui'
 
 const data = [{ name: "Name", y: 67 }]
 

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

@@ -1,5 +1,5 @@
 Highcharts allows for any custom colors to be used. Custom data colors allow for color customization to match the needs of business requirements.
 
-For React, pass the option `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. HEX colors are also available `eg: #CA0095`
+For React, pass the prop `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. HEX colors are also available `eg: #CA0095`
 
-For Rails, the option `plotOptions.solidgauge.borderColor` can only be used with HEX values as shown.
+For Rails, the prop `plotOptions.solidgauge.borderColor` can only be used with HEX values as shown.

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

@@ -7,8 +7,7 @@ import Caption from '../../pb_caption/_caption'
 import Body from '../../pb_body/_body'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
 import Title from '../../pb_title/_title'
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
+import { colors, typography } from 'playbook-ui'
 
 const data = [{ name: "Name", y: 10 }];
 

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

@@ -1,7 +1,6 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
+import { colors, typography } from 'playbook-ui'
 
 const data = [{ name: "Capacity", y: 75 }]
 

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

@@ -1,7 +1,6 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
+import { colors, typography } from 'playbook-ui'
 
 const chartOptions = {
   title: {

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

@@ -1,7 +1,6 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
+import { colors, typography } from 'playbook-ui'
 
 const data = [{ name: "Rating", y: 4.5 }]
 

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

@@ -1,7 +1,6 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import colors from '../../tokens/exports/_colors.module.scss'
-import typography from '../../tokens/exports/_typography.module.scss'
+import { colors, typography } from 'playbook-ui'
 
 
 const data1 = [

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

@@ -1,5 +1,3 @@
-**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. 
+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. 
 
 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_line_graph/docs/_pb_line_graph_colors.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
-import colors from '../../tokens/exports/_colors.module.scss'
+import { colors } from 'playbook-ui'
 
 const data = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.html.erb

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

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx

@@ -1,8 +1,5 @@
 import React, { useState } from "react";
-import PbReactPopover from "../_popover";
-import Body from "../../pb_body/_body";
-import Flex from "../../pb_flex/_flex";
-import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button";
+import { PbReactPopover, CircleIconButton, Body, Flex } from "playbook-ui";
 
 const PopoverAppendTo = (props) => {
   const [showParentPopover, setShowParentPopover] = useState(false);