RubyGems - playbook_ui - Versions diffs - 13.34.1 → 14.0.0.pre.alpha.PLAY14113475 - Mend

playbook_ui 13.34.1 → 14.0.0.pre.alpha.PLAY14113475

Files changed (466) hide show

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Flex, Image, Draggable, DraggableProvider } from "../../";
+import { Flex, Image, Draggable, DraggableProvider } from "playbook-ui";
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx CHANGED Viewed

@@ -10,7 +10,7 @@ import {
   Body,
   Draggable,
   DraggableProvider,
-} from "../../";
+} from "playbook-ui";
 // Initial groups to drag between
 const containers = ["To Do", "In Progress", "Done"];

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx CHANGED Viewed

@@ -8,7 +8,7 @@ import {
   DraggableProvider,
   Card,
   Caption,
-} from "../../";
+} from "playbook-ui";
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { DraggableProvider, List, ListItem } from "../../";
+import { DraggableProvider, List, ListItem } from "playbook-ui";
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { SelectableList, DraggableProvider } from "../../";
+import { SelectableList, DraggableProvider } from "playbook-ui";
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx CHANGED Viewed

@@ -8,7 +8,7 @@ import {
   List,
   ListItem,
   Card,
-} from "../";
+} from "playbook-ui";
 const testId = "draggable";

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss CHANGED Viewed

@@ -115,7 +115,7 @@
     &.error {
       [class*=pb_body_kit] {
-        margin-top: $space_xs / 2;
+        margin-top: calc($space_xs / 2);
       }
       [class*="dropdown_trigger_wrapper"] {

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from '../../'
+import { Dropdown } from 'playbook-ui'
 const DropdownBlankSelection = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from '../../'
+import { Dropdown } from 'playbook-ui'
 const DropdownDefaultValue = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Dropdown } from '../../'
+import { Dropdown } from 'playbook-ui'
 const DropdownError = (props) => {
     const [selectedOption, setSelectedOption] = useState()

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown, User, Badge, FlexItem } from '../..'
+import { Dropdown, User, Badge, FlexItem } from 'playbook-ui'
 const DropdownWithAutocomplete = (props) => {

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Dropdown, User, Badge, FlexItem, Avatar } from '../..'
+import { Dropdown, User, Badge, FlexItem, Avatar } from 'playbook-ui'
 const DropdownWithAutocompleteAndCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Dropdown, User, Flex, FlexItem, Badge, Avatar } from '../../'
+import { Dropdown, User, Flex, FlexItem, Badge, Avatar } from 'playbook-ui'
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown, Icon, Body, FlexItem, Flex } from '../..'
+import { Dropdown, Icon, Body, FlexItem, Flex } from 'playbook-ui'
 const DropdownWithCustomOptions = (props) => {

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from '../..'
+import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from 'playbook-ui'
 const DropdownWithCustomTrigger = (props) => {

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown, useDropdown, Button } from '../../'
+import { Dropdown, useDropdown, Button } from 'playbook-ui'
 const DropdownWithExternalControl = (props) => {
 const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex  } from '../..'
+import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex  } from 'playbook-ui'
 const DropdownWithHook = (props) => {
 const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, screen } from "../utilities/test-utils"
-import { Dropdown, Icon } from '../'
+import { Dropdown, Icon } from 'playbook-ui'
 const testId = 'dropdown'

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx CHANGED Viewed

@@ -1,13 +1,12 @@
-/* @flow */
 import React, { useState } from 'react'
 import {
   FileUpload,
   List,
   ListItem,
-} from '../..'
+} from 'playbook-ui'
-const AcceptedFilesList = ({ files }: FileList) => (
+const AcceptedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}>{file.name}</ListItem>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx CHANGED Viewed

@@ -1,10 +1,9 @@
 /* eslint-disable react/no-multi-comp */
-/* @flow */
 import React, { useState } from "react";
-import { FileUpload, List, ListItem } from "../..";
+import { FileUpload, List, ListItem } from "playbook-ui";
-const AcceptedFilesList = ({ files }: FileList) => (
+const AcceptedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}>{file.name}</ListItem>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx CHANGED Viewed

@@ -1,13 +1,12 @@
-/* @flow */
 import React, { useState } from 'react'
 import {
   FileUpload,
   List,
   ListItem,
-} from '../..'
+} from 'playbook-ui'
-const AcceptedFilesList = ({ files }: FileList) => (
+const AcceptedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}>{file.name}</ListItem>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx CHANGED Viewed

@@ -1,13 +1,12 @@
-/* @flow */
 import React, { useState } from 'react'
 import {
   FileUpload,
   List,
   ListItem,
-} from '../..'
+} from 'playbook-ui'
-const AcceptedFilesList = ({ files }: FileList) => (
+const AcceptedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}>{file.name}</ListItem>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx CHANGED Viewed

@@ -1,4 +1,3 @@
-/* @flow */
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
@@ -7,16 +6,16 @@ import {
   FileUpload,
   List,
   ListItem,
-} from '../..'
+} from 'playbook-ui'
-const AcceptedFilesList = ({ files }: FileList) => (
+const AcceptedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}>{file.name}</ListItem>
     ))}
   </List>
 )
-const RejectedFilesList = ({ files }: FileList) => (
+const RejectedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}><Body color="error">{`${file.name} (file too large)`}</Body></ListItem>

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 const SortingChangeCallback = (sortOptions) => {
   alert(JSON.stringify(sortOptions[0]))

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../..'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 const FilterMaxHeight = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select } from '../../'
+import { Button, Filter, Flex, Select } from 'playbook-ui'
 const FilterMaxWidth = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 const FilterNoBackground = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 const FilterNoSort = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 const FilterOnly = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../..'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 const SortingChangeCallback = (sortOptions) => {
   alert(JSON.stringify(sortOptions[0]))

data/app/pb_kits/playbook/pb_filter/filter.test.js CHANGED Viewed

@@ -4,7 +4,7 @@ import {
   screen,
   fireEvent,
 } from "../utilities/test-utils";
-import { Button, Filter, Flex, Select, TextInput } from "..";
+import { Button, Filter, Flex, Select, TextInput } from "playbook-ui";
 function FilterTest(props) {
   const SortingChangeCallback = (sortOptions) => {

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss CHANGED Viewed

@@ -33,7 +33,7 @@ $confirmation_toast_colors: (
   &.positioned_toast {
     position: fixed;
-    z-index: $z_9;
+    z-index: $z_10 !important;
     display: flex;
     justify-content: space-around;
     max-width: max-content;

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, waitFor } from '../utilities/test-utils'
-import { FixedConfirmationToast } from '../'
+import { FixedConfirmationToast } from 'playbook-ui'
 beforeEach(() => {
     // Silences error logs within the test suite.

data/app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem } from  '../../'
+import { Flex, FlexItem } from 'playbook-ui'
 const FlexGap = (props) => {
   const count = () => {

data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb CHANGED Viewed

@@ -45,6 +45,7 @@
     class: "checkbox-class"
   %>
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
+  <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form_group/form_group.test.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render } from "../utilities/test-utils";
-import { Button, FormGroup } from "..";
+import { Button, FormGroup } from "playbook-ui";
 test("should render a div with a button child", () => {
   const testId = "primary-test"

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss CHANGED Viewed

@@ -16,9 +16,9 @@ $form_pill_colors: (
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 $space-sm/3;
+  padding: 0 calc($space-sm/3);
   height: $pb_form_pill_height;
-  border-radius: $pb_form_pill_height/2;
+  border-radius: calc($pb_form_pill_height/2);
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
@@ -52,12 +52,12 @@ $form_pill_colors: (
           color: $text_lt_default;
         }
         padding-left: $space-sm;
-        padding-right: $space-sm/2;
+        padding-right: calc($space-sm/2);
       }
       #{$selector}_close {
         color: $color_value;
-        padding-left: $space-sm/4;
-        padding-right: $space-sm/4;
+        padding-left: calc($space-sm/4);
+        padding-right: calc($space-sm/4);
         display: flex;
         align-items: center;
         // I had to temporarily change height to 27px so new hover state darker background forms a circle not an oval

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx CHANGED Viewed

@@ -1,4 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
 import Title from '../pb_title/_title'

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx CHANGED Viewed

@@ -7,8 +7,8 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import highchartsMore from "highcharts/highcharts-more";
 import solidGauge from "highcharts/modules/solid-gauge";
-import defaultColors from "../tokens/exports/_colors.scss";
-import typography from "../tokens/exports/_typography.scss";
+import defaultColors from "../tokens/exports/_colors.module.scss";
+import typography from "../tokens/exports/_typography.module.scss";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from '../../'
+import { Gauge } from 'playbook-ui'
 const data = [
   { name: 'Name', value: 67 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx CHANGED Viewed

@@ -8,7 +8,7 @@ import {
   SectionSeparator,
   Body,
   Caption,
-} from "../..";
+} from "playbook-ui";
 const data = [{ name: "Name", value: 10 }];

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from '../../'
+import { Gauge } from 'playbook-ui'
 const data = [
   { name: 'Name', value: 45 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from '../../'
+import { Gauge } from 'playbook-ui'
 const data = [
   { name: 'Participants', value: 84 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from '../../'
+import { Gauge } from 'playbook-ui'
 const data = [
   { name: 'Capacity', value: 75 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Gauge } from '../../'
+import { Button, Gauge } from 'playbook-ui'
 const GaugeLiveData = (props) => {
   const [value, setValue] = useState(50)

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from '../../'
+import { Gauge } from 'playbook-ui'
 const data = [{
   name: 'Rating', value: 4.5,

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from '../../'
+import { Gauge } from 'playbook-ui'
 const data = [
   { name: 'Score', value: 780 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from '../../'
+import { Gauge } from 'playbook-ui'
 const data1 = [
   { name: 'Data Used', value: 32 },

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx CHANGED Viewed

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