RubyGems - playbook_ui - Versions diffs - 14.15.0.pre.alpha.play1917lodashremoval2of36615 → 14.15.0.pre.alpha.play1949lodashremoval3of36746 - Mend

playbook_ui 14.15.0.pre.alpha.play1917lodashremoval2of36615 → 14.15.0.pre.alpha.play1949lodashremoval3of36746

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (412) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7250a006190c9fd3ad50753379407ed9d56eaf7bbbe45bf675aa1cd3386adb19
-  data.tar.gz: f69959838cbc85aad8736d740beaed172aa92a0353751082eaf803c75b224940
+  metadata.gz: 363360c157a79330efc2c8b4e60e45437e7fb282790e4a302da644da029d67f0
+  data.tar.gz: e798b4832175f45fac621bbe16ac3c84d88ce499d55b7af35062125b95d4eadf
 SHA512:
-  metadata.gz: 8de325ab14219ca126a14a1301d004bcdf80d7d1a6e92f608d540bd2bd4c85b46e0aee60db4f3ea8da19d6d55e123c0bbf870b6ef97426cafec47c6bb8a7e93d
-  data.tar.gz: a34995b8ba52bfd48be3268128b905d1e880a614994c75f48116eb07a271ce23a5627c340fd8061640def912fe0ab1352539003aef732939c9267674ea5d2b75
+  metadata.gz: 07ffd2c95fed2422c3a4a4659a5bfdfcc51c63875d00ab3b8efa6ee29a240b92c9003c816bd0254c3350207528542e978ec6cc78b898c58a271def99c4806c8c
+  data.tar.gz: 5118481860bb78e617854ff8916c106ba455aff24bd8bf2dcdea257cde2a40bea09c797113c67a1073a87ddbbaa8dd2d074ec8a68fa946da121ba7295a2f3ea8

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

@@ -1,4 +1,5 @@
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -14,8 +15,8 @@
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
-@import 'pb_copy_button/copy_button';
 @import 'pb_contact/contact';
+@import 'pb_copy_button/copy_button';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
@@ -45,6 +46,7 @@
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
 @import 'pb_icon/icon';
+@import 'pb_icon_button/icon_button';
 @import 'pb_icon_circle/icon_circle';
 @import 'pb_icon_stat_value/icon_stat_value';
 @import 'pb_icon_value/icon_value';
@@ -109,7 +111,7 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import 'pb_icon_button/icon_button';
+@import 'pb_empty_state/empty_state';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss CHANGED Viewed

@@ -161,6 +161,13 @@
         }
       }
     }
+    td {
+      [class^=pb_text_input_kit] .text_input_wrapper input {
+        padding: 0 $space_xxs;
+        font-size: 14px;
+        text-align: right;
+      }
+    }
   }
   .table-header-cells-active:first-child {

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 "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 const AdvancedTableCollapsibleTrail = (props) => {

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

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

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

@@ -1,5 +1,7 @@
 import React from "react"
-import { AdvancedTable, Pill } from "playbook-ui"
+import AdvancedTable from "../../pb_advanced_table/_advanced_table"
+import Pill from "../../pb_pill/_pill"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 const AdvancedTableColumnHeadersCustomCell = (props) => {

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

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

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

@@ -1,5 +1,12 @@
 import React from "react"
-import { AdvancedTable, Pill, Body, Flex, Detail, Caption, Badge, Title } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Pill from "../../pb_pill/_pill"
+import Body from "../../pb_body/_body"
+import Flex from "../../pb_flex/_flex"
+import Detail from "../../pb_detail/_detail"
+import Caption from "../../pb_caption/_caption"
+import Badge from "../../pb_badge/_badge"
+import Title from "../../pb_title/_title"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 const AdvancedTableCustomCell = (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 "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 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 "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 const AdvancedTableExpandedControl = (props) => {

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

@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import { AdvancedTable, TextInput, Body } from "playbook-ui";
+import MOCK_DATA from "./advanced_table_mock_data.json";
+const AdvancedTableInlineEditing = (props) => {
+  const [editedValues, setEditedValues] = useState({});
+  const EditableCell = ({ rowId, originalValue, onSave }) => {
+    const [localValue, setLocalValue] = useState(originalValue);
+    const handleChange = (e) => setLocalValue(e.target.value);
+    const handleBlur = () => {
+      originalValue !== localValue && onSave(rowId, localValue);
+    };
+    return (
+      <TextInput inline
+          marginBottom="none"
+          {...props}
+      >
+        <input
+            onBlur={handleBlur}
+            onChange={handleChange}
+            onKeyDown={(e) => e.key === 'Enter' && handleBlur()}
+            value={localValue}
+        />
+      </TextInput>
+    );
+  };
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      editable: true,
+      customRenderer: (row) => {
+        return (
+          <EditableCell
+              onSave={(id, val) => {
+                setEditedValues((prev) => ({ ...prev, [id]: val }));
+              }}
+              originalValue={
+                editedValues[row.id] ?? row.original.scheduledMeetings
+              }
+              rowId={row.id}
+          />
+        );
+      },
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ];
+  return (
+    <div className="App">
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+      {
+        editedValues && Object.keys(editedValues).length > 0 && (
+          <>
+            <Body
+                marginTop="md"
+                {...props}
+            >
+              Edited Values by Row Id:
+            </Body>
+            <pre style={{color: 'white'}}>{JSON.stringify(editedValues, null, 2)}</pre>
+          </>
+        )
+      }
+    </div>
+  );
+};
+export default AdvancedTableInlineEditing;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md ADDED Viewed

@@ -0,0 +1,4 @@
+Inline Cell Editing can be achieved with a combination of our `TextInput` kit and the `customRenderer` method available through columnDefinitions.
+Hover over any cell within the 'Scheduled Meetings' column to see the TextInput and type in to change values. Values can be saved by clicking away from the TextInput or by hitting 'Enter'.
+See the code snippet below to see how this was achieved. Devs must manage state themselves as shown.

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 "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 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 "playbook-ui"
-import { Button } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Button from "../../pb_button/_button"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 const AdvancedTableLoading = (props) => {

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

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

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
 const AdvancedTablePagination = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
 const AdvancedTablePaginationWithProps = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import Title from '../../pb_title/_title'
 import MOCK_DATA from "./advanced_table_mock_data.json"

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

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

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

@@ -1,5 +1,7 @@
 import React, {useState} from "react"
-import { AdvancedTable, CircleIconButton, Flex } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button"
+import Flex from "../../pb_flex/_flex"
 import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
 const AdvancedTableSelectableRowsActions = (props) => {

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

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

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

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
 const AdvancedTableSelectableRowsNoSubrows = (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 "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 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 "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 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 "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 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 "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 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 "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 const AdvancedTableTableProps = (props) => {

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

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

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml CHANGED Viewed

@@ -36,4 +36,5 @@ examples:
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
-  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
+  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
+  - advanced_table_inline_editing: Inline Cell Editing

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js CHANGED Viewed

@@ -20,4 +20,5 @@ export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.
 export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
-export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
+export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
+export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'

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 'playbook-ui'
+import Avatar from '../../pb_avatar/_avatar'
 const AvatarBadgeComponentOverlay = (props) => {
     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 'playbook-ui'
+import Avatar from '../../pb_avatar/_avatar'
 const AvatarCircleIconComponentOverlay = (props) => {
     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 'playbook-ui'
+import Avatar from '../../pb_avatar/_avatar'
 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 'playbook-ui'
+import Avatar from '../../pb_avatar/_avatar'
 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 'playbook-ui'
+import Avatar from '../../pb_avatar/_avatar'
 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 'playbook-ui'
+import Avatar from '../../pb_avatar/_avatar'
 const AvatarStatus = (props) => {
   return (

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Background } from 'playbook-ui'
-import { Flex } from 'playbook-ui'
+import Background from '../../pb_background/_background'
+import Flex from "../../pb_flex/_flex"
 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 'playbook-ui'
+import Background from '../../pb_background/_background'
 const BackgroundGradient = (props) => (
   <Background

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

@@ -1,6 +1,10 @@
 import React, { useState } from 'react'
-import { Background } from 'playbook-ui'
-import { Card, Flex, FlexItem, Select, Title } from 'playbook-ui'
+import Background from "../../pb_background/_background"
+import Card from "../../pb_card/_card"
+import Flex from "../../pb_flex/_flex"
+import FlexItem from "../../pb_flex/_flex_item"
+import Select from "../../pb_select/_select"
+import Title from "../../pb_title/_title"
 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 'playbook-ui'
+import Background from '../../pb_background/_background'
 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 'playbook-ui'
+import Background from '../../pb_background/_background'
 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 'playbook-ui'
-import { Flex } from 'playbook-ui'
+import Background from '../../pb_background/_background'
+import Flex from "../../pb_flex/_flex"
 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 'playbook-ui'
-import { Flex } from 'playbook-ui'
+import Background from '../../pb_background/_background'
+import Flex from "../../pb_flex/_flex"
 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 'playbook-ui'
+import Background from '../../pb_background/_background'
 const BackgroundWhite = (props) => (
   <div>

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx CHANGED Viewed

@@ -7,7 +7,7 @@ import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import { merge } from '../utilities/object'
+import { merge } from '../utilities/object'
 import classnames from "classnames";

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 'playbook-ui'
+import BarGraph from "../../pb_bar_graph/_bar_graph"
 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 'playbook-ui'
+import BarGraph from "../../pb_bar_graph/_bar_graph"
 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,7 @@
 import React from 'react'
-import { BarGraph, Title } from 'playbook-ui'
+import BarGraph from "../../pb_bar_graph/_bar_graph"
+import Title from "../../pb_title/_title"
 const chartData = [{
   name: 'Installation',

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Body } from 'playbook-ui'
+import Body from "../../pb_body/_body"
 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 'playbook-ui'
+import Body from "../../pb_body/_body"
 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 'playbook-ui'
+import Body from "../../pb_body/_body"
 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 'playbook-ui'
+import Body from "../../pb_body/_body"
 const BodyStyled = (props) => {
   return (

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

@@ -1,6 +1,7 @@
 import React from 'react'
 import BreadCrumbs from '../_bread_crumbs'
-import { Icon, Title } from 'playbook-ui'
+import Icon from "../../pb_icon/_icon"
+import Title from "../../pb_title/_title"
 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 'playbook-ui'
+import Button from "../../pb_button/_button"
 const ButtonAccessibility = (props) => (
   <div>

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

@@ -1,5 +1,6 @@
 import React from "react";
-import { Button, Pill } from "playbook-ui";
+import Button from '../../pb_button/_button'
+import Pill from '../../pb_pill/_pill'
 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 "playbook-ui"
+import Button from "../../pb_button/_button"
 const ButtonDefault = (props) => (
   <div>