RubyGems - playbook_ui - Versions diffs - 13.32.0 → 13.33.0.pre.alpha.PLAY14143306 - Mend

playbook_ui 13.32.0 → 13.33.0.pre.alpha.PLAY14143306

Files changed (455) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 15c98ab4c24f31f753052d92ce96169c82221a5a1b94a6d73f26f39605507324
-  data.tar.gz: a132e4e59aafc142e919af50b3ced4622e9073e39c1e8d5183a4484a91a72e51
+  metadata.gz: cc0be190aa3b0717e6aa02d54351da42fc866c505b5def5058bca065b15d7423
+  data.tar.gz: 56fd14299bd0d846b844fa6b2c7cf15ce78682375309e47f171e3cfa0d4295a2
 SHA512:
-  metadata.gz: 51ae3a858325d45b791b217debbff7ac11d9304ced1606a1f037af3329345d293582583ef31c9298143f5e5befa1ff203a90e6a751f127f5ab600eb363c54146
-  data.tar.gz: c154c881d29dcccecdcfd90638eb619b48747fd2f172f3b136c9ba30686e8bd7e726e6265b06e65e4348df5a9f8d1f6e1d98d79fcfcac334721fd2d9703c6fb9
+  metadata.gz: 44b6dfebde3dcf82dd507fea2abf75cda445e3848686fb94b193c84441cb5164dceacc927e71930ab0901b51508fb717cf4d8912740f1a8e6f1fd22ee8b315f2
+  data.tar.gz: 808126d307c0b23be82f50efc71f77c54a30d084e0c7517f2f117aa94cc855c4b027004f128946b78cb5cdc8d803982dd0aaab175f5535d88a55f589f629324a

data/app/pb_kits/playbook/_playbook.scss CHANGED Viewed

@@ -104,20 +104,20 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import './utilities/mixins';
-@import './utilities/spacing';
-@import './utilities/cursor';
-@import './utilities/max_width';
-@import './utilities/positioning';
-@import './utilities/number_spacing';
-@import './utilities/shadow';
-@import './utilities/line_height';
-@import './utilities/display';
-@import './utilities/flexbox';
-@import './utilities/focus';
-@import './utilities/border_radius';
-@import './utilities/hover';
-@import './utilities/text_align';
-@import './utilities/overflow';
-@import './utilities/truncate';
-@import './utilities/vertical_align';
+@import 'utilities/mixins';
+@import 'utilities/spacing';
+@import 'utilities/cursor';
+@import 'utilities/max_width';
+@import 'utilities/positioning';
+@import 'utilities/number_spacing';
+@import 'utilities/shadow';
+@import 'utilities/line_height';
+@import 'utilities/display';
+@import 'utilities/flexbox';
+@import 'utilities/focus';
+@import 'utilities/border_radius';
+@import 'utilities/hover';
+@import 'utilities/text_align';
+@import 'utilities/overflow';
+@import 'utilities/truncate';
+@import 'utilities/vertical_align';

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React, {useState} from "react"
 import { render, screen, waitFor } from "../utilities/test-utils"
-import { AdvancedTable } from "../"
+import { AdvancedTable } from "playbook-ui"
 const MOCK_DATA = [
   {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "../.."
+import { AdvancedTable } from "playbook-ui"
 import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
 const AdvancedTableInlineRowLoading = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
-import { AdvancedTable } from "../../"
-import { Button } from "../../"
+import { AdvancedTable } from "playbook-ui"
+import { Button } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 const AdvancedTableLoading = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react";
-import { Avatar } from '../..'
+import { Avatar } from 'playbook-ui'
 const AvatarBadgeComponentOverlay = () => {
     return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react";
-import { Avatar } from '../..'
+import { Avatar } from 'playbook-ui'
 const AvatarCircleIconComponentOverlay = () => {
     return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss CHANGED Viewed

@@ -35,8 +35,8 @@
     &[class*=_#{$name}] {
       $avatar_size: map-get($avatar-sizes, $name);
-      $icon_size: $avatar_size / 2;
-      $border_size: $icon_size / 10;
+      $icon_size: calc($avatar_size / 2);
+      $border_size: calc($icon_size / 10);
       position: relative;
       width: $avatar_size * 1.25;
@@ -59,7 +59,7 @@
         left: $icon_size * 1.5;
       }
       &[class*=_left] [class^=pb_avatar_kit] {
-        padding-left: $icon_size / 2;
+        padding-left: calc($icon_size / 2);
       }
     }
   }

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx CHANGED Viewed

@@ -1,5 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'

data/app/pb_kits/playbook/pb_background/_background.tsx CHANGED Viewed

@@ -3,10 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
-type BackgroundProps = {
-  alt?: string,
-  aria?: {[key: string]: string},
-  backgroundColor?: ResponsiveProp<string> | 'gradient' |
+type BackgroundColors = 'gradient' |
   'dark' |'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'shadow' |
   'category_1' | 'category_2' | 'category_3' | 'category_4' | 'category_5' | 'category_6' | 'category_7' |
   'category_8' | 'category_9' | 'category_10' | 'category_11' | 'category_12' | 'category_13' | 'category_14' |
@@ -14,10 +11,19 @@ type BackgroundProps = {
   'text_lt_default' | 'text_lt_light' | 'text_lt_lighter' | 'text_dk_default' | 'text_dk_light' | 'text_dk_lighter' |
   'card_light' | 'card_dark' | 'data_1' | 'data_2' | 'data_3' | 'data_4' | 'data_5' | 'data_6' | 'data_7' | 'data_8' |
   'border_light' | 'border_dark' | 'success_secondary' | 'error_secondary' | 'info_secondary' | 'warning_secondary' |
-  'neutral_secondary' | 'primary_secondary' | 'success_subtle' | 'warning_subtle' | 'error_subtle' | 'info_subtle' | 'neutral_subtle',
-  backgroundSize?: ResponsiveProp<string> | 'auto' | 'cover' | 'contain',
+  'neutral_secondary' | 'primary_secondary' | 'success_subtle' | 'warning_subtle' | 'error_subtle' | 'info_subtle' | 'neutral_subtle'
+type BackgroundSizes = 'auto' | 'cover' | 'contain'
+type BackgroundRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit'
+type BackgroundProps = {
+  alt?: string,
+  aria?: {[key: string]: string},
+  backgroundColor?: ResponsiveProp<BackgroundColors> | BackgroundColors,
+  backgroundSize?: ResponsiveProp<BackgroundSizes> | BackgroundSizes,
   backgroundPosition?: ResponsiveProp<string> | string,
-  backgroundRepeat?: ResponsiveProp<string> | 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit',
+  backgroundRepeat?: ResponsiveProp<BackgroundRepeat> | BackgroundRepeat,
   imageUrl?: ResponsiveProp<string> | string,
   children?: React.ReactChild[] | React.ReactNode,
   className?: string,

data/app/pb_kits/playbook/pb_background/docs/_background_category.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Background } from '../..'
-import { Flex } from '../..'
+import { Background } from 'playbook-ui'
+import { Flex } from 'playbook-ui'
 const BackgroundCategory = (props) => (
   <Flex

data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Background } from '../..'
+import { Background } from 'playbook-ui'
 const BackgroundGradient = (props) => (
   <Background

data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { Background } from '../..'
-import { Card, Flex, FlexItem, Select, Title } from '../..'
+import { Background } from 'playbook-ui'
+import { Card, Flex, FlexItem, Select, Title } from 'playbook-ui'
 const BackgroundImage = (props) => {
   const [transition, setTransition] = useState('')

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Background } from '../..'
+import { Background } from 'playbook-ui'
 const BackgroundLight = (props) => (
   <Background

data/app/pb_kits/playbook/pb_background/docs/_background_size.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { Fragment as F } from 'react'
-import { Background } from '../..'
+import { Background } from 'playbook-ui'
 const BackgroundSize = (props) => (
   <F>

data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Background } from '../..'
-import { Flex } from '../..'
+import { Background } from 'playbook-ui'
+import { Flex } from 'playbook-ui'
 const BackgroundStatus = (props) => (
 <Flex

data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Background } from '../..'
-import { Flex } from '../..'
+import { Background } from 'playbook-ui'
+import { Flex } from 'playbook-ui'
 const BackgroundStatusSubtle = (props) => (
 <Flex

data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Background } from '../..'
+import { Background } from 'playbook-ui'
 const BackgroundWhite = (props) => (
   <div>

data/app/pb_kits/playbook/pb_badge/_badge.scss CHANGED Viewed

@@ -11,7 +11,7 @@
   align-items: center;
   justify-content: center;
   border-radius: $border_rad_light;
-  padding: 0 $space_xs/2;
+  padding: 0 calc($space_xs/2);
   border-width: 1px;
   border-style: solid;
   border-color: $card_light;
@@ -34,7 +34,7 @@
     height: $pb_badge_height;
     min-height: $pb_badge_height;
     min-width: $pb_badge_height;
-    border-radius: $pb_badge_height / 2;
+    border-radius: calc($pb_badge_height / 2);
   }
   &[class*=_notification] {

data/app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { commonSettings } from '../pb_dashboard/commonSettings.js'
-import typography from '../tokens/exports/_typography.scss'
+import typography from '../tokens/exports/_typography.module.scss'
 const sizeColumns = function(highchart) {
   const column = highchart.plotOptions.column

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

@@ -1,2 +1,6 @@
 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_legend.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_body/_body.scss CHANGED Viewed

@@ -4,7 +4,7 @@
 [class^=pb_body_kit]{
   @include pb_body($text_lt_default);
   @each $color_name, $color_value in $pb_body_colors {
-    &[class*=_#{$color_name}] {
+    &[class*=_#{"" + $color_name}] {
       @include pb_body($color_value);
     }
     @each $status_name, $status_value in $pb_body_status {

data/app/pb_kits/playbook/pb_body/docs/_body_articles.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_body/docs/_body_styled.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.tsx CHANGED Viewed

@@ -1,5 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps, domSafeProps } from '../utilities/globalProps'

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss CHANGED Viewed

@@ -9,7 +9,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 $space_xs/2;
+  padding: 0 calc($space_xs/2);
   svg {
    margin-right: 8px;

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.test.js CHANGED Viewed

@@ -2,7 +2,7 @@ import React from 'react'
 import { render, screen } from '../utilities/test-utils'
 import BreadCrumbs from './_bread_crumbs'
 import BreadCrumbItem from './_bread_crumb_item'
-import { Icon, Title } from '../'
+import { Icon, Title } from 'playbook-ui'
 it('should render bread crumbs', () => {
   const testId = 'breadCrumbs'

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react'
 import BreadCrumbs from '../_bread_crumbs'
-import { Icon, Title } from '../../'
+import { Icon, Title } from 'playbook-ui'
 import BreadCrumbItem from '../_bread_crumb_item'
 const Link = (props) => <BreadCrumbItem {...props} />

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from '../../'
+import { Button } from 'playbook-ui'
 const ButtonAccessibility = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Pill } from "../../";
+import { Button, Pill } from "playbook-ui";
 const ButtonBlockContent = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react"
-import { Button } from "../../"
+import { Button } from "playbook-ui"
 const ButtonDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_form.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from '../../'
+import { Button } from 'playbook-ui'
 const ButtonForm = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from '../../'
+import { Button } from 'playbook-ui'
 const ButtonFullWidth = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react"
-import { Button } from "../../"
+import { Button } from "playbook-ui"
 const ButtonHover = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from '../../'
+import { Button } from 'playbook-ui'
 const ButtonIconOptions = (props) => (
     <div>

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from '../../'
+import { Button } from 'playbook-ui'
 const ButtonLink = (props) => (
   <>

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from '../../'
+import { Button } from 'playbook-ui'
 const ButtonLoading = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, {useState} from "react"
-import { Button } from "../../"
+import { Button } from "playbook-ui"
 const ButtonReaction = (props) => {

data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from '../../'
+import { Button } from 'playbook-ui'
 const ButtonSize = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx CHANGED Viewed

@@ -1,5 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.test.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '../utilities/test-utils'
-import { Button, ButtonToolbar } from '../'
+import { Button, ButtonToolbar } from 'playbook-ui'
 test('default test', () => {
   render(

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, ButtonToolbar } from '../..'
+import { Button, ButtonToolbar } from 'playbook-ui'
 const ButtonToolbarDefault = (props) => (
   <div className="pb--doc-demo-row">

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, ButtonToolbar } from '../..'
+import { Button, ButtonToolbar } from 'playbook-ui'
 const ButtonToolbarSecondary = (props) => (
   <div className="pb--doc-demo-row">

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx CHANGED Viewed

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