RubyGems - playbook_ui_docs - Versions diffs - 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795 → 14.15.0.pre.rc.0 - Mend

playbook_ui_docs 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795 → 14.15.0.pre.rc.0

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 (437) hide show

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx CHANGED Viewed

@@ -1,26 +1,42 @@
-import React from "react"
-import Button from '../../pb_button/_button'
-import Body from "../../pb_body/_body"
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
+const useDrawer = (visible = false) => {
+  const [opened, setOpened] = useState(visible);
+  const toggle = () => setOpened(!opened);
+  return [opened, toggle];
+};
+const DrawerBreakpoints = () => {
+  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
-const DrawerMenu = () => {
   return (
     <>
-      <Body>
-        The breakpoint prop determines when the Drawer is always visible. Above
-        the specified breakpoint, the Drawer remains open on the page. Below it,
-        only the trigger element is shown, allowing you to toggle the drawer
-        open and closed. To see this in action, click the button below and
-        resize your window.
-      </Body>
-      <Button
-          link='https://8njdkc.csb.app/'
-          marginTop='md'
-          newWindow
-      >
-        Open Doc Example in New Tab
-      </Button>
+      <Flex wrap>
+        <Button
+            id="sm"
+            marginRight="md"
+            onClick={toggleSmallDrawer}
+        >
+          {"Will open at small breakpoint"}
+        </Button>
+      </Flex>
+      <Flex>
+        <Drawer
+            behavior={"push"}
+            breakpoint="sm"
+            onClose={toggleSmallDrawer}
+            opened={smallDrawerOpened}
+            overlay={false}
+            placement={"right"}
+            size={"lg"}
+        >
+          Open because small breakpoint
+        </Drawer>
+      </Flex>
     </>
-  )
-}
+  );
+};
-export default DrawerMenu
+export default DrawerBreakpoints;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb CHANGED Viewed

@@ -1,20 +1 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
-    <%= pb_rails("drawer", props: {
-        id:"drawer-1",
-    }) do  %>
-        Test me (Left Drawer)
-    <% end %>
-    <%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
-    <%= pb_rails("drawer", props: {
-        id:"drawer-2",
-        placement: "right"
-    }) do  %>
-        Test me (Right Drawer)
-    <% end %>
-<% end %>
+<%= pb_rails("drawer") %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx CHANGED Viewed

@@ -1,8 +1,5 @@
 import React, { useState } from "react";
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Flex from '../../pb_flex/_flex'
+import { Button, Drawer, Flex } from "playbook-ui";
 const useDrawer = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx CHANGED Viewed

@@ -1,10 +1,5 @@
 import React, { useState, useEffect } from "react"
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Icon from '../../pb_icon/_icon'
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
+import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
 const DrawerMenu = () => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)
@@ -13,8 +8,8 @@ const DrawerMenu = () => {
     const mediaQuery = window.matchMedia("(max-width: 600px)")
     setIsSmallScreen(mediaQuery.matches)
     const handler = (e) => setIsSmallScreen(e.matches)
-    mediaQuery.addEventListener("change", handler)
-    return () => mediaQuery.removeEventListener("change", handler)
+    mediaQuery.addEventListener('change', handler)
+    return () => mediaQuery.removeEventListener('change', handler)
   }, [])
   return (
@@ -27,17 +22,17 @@ const DrawerMenu = () => {
         />
       </Button>
       <Drawer
-          breakpoint='md'
+          breakpoint="md"
           placement='bottom'
           size='full'
           triggerId='menuButton'
           withinElement
       >
-        <Nav
+        <Nav
             highlight={false}
             link='#'
-            orientation={isSmallScreen ? "vertical" : "horizontal"}
-            padding={isSmallScreen ? "none" : "sm"}
+            orientation={isSmallScreen ? 'vertical' : 'horizontal'}
+            padding={isSmallScreen ? 'none' : 'sm'}
         >
           <NavItem link='#'
               text='About'

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx CHANGED Viewed

@@ -1,8 +1,5 @@
 import React, { useState } from "react"
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Flex from '../../pb_flex/_flex'
+import { Button, Drawer, Flex } from "playbook-ui"
 const DrawerSizes = () => {
   // Individual state variables for each drawer size
@@ -34,7 +31,6 @@ const DrawerSizes = () => {
           onClose={toggleNoOverlayDrawer}
           opened={openedNoOverlayDrawer}
           overlay={false}
-          placement='right'
           size='lg'
       >
         This is a Drawer with no overlay

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx CHANGED Viewed

@@ -1,8 +1,5 @@
 import React, { useState } from "react";
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Flex from '../../pb_flex/_flex'
+import { Button, Drawer, Flex } from "playbook-ui";
 const DrawerSizes = () => {
   // Individual state variables for each drawer size

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

@@ -2,12 +2,6 @@ examples:
   rails:
   - drawer_default: Default
-  - drawer_behavior: Push Behavior
-  - drawer_menu: Within Element
-  - drawer_sizes: Sizes
-  - drawer_overlay: Overlay
-  - drawer_breakpoints: Breakpoints
-  - drawer_borders: Borders
   react:
@@ -16,5 +10,4 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
-  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders

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 '../../pb_dropdown/_dropdown'
+import { Dropdown } from 'playbook-ui'
 const DropdownBlankSelection = (props) => {
   const options = [

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

@@ -1,7 +1,5 @@
 import React, { useRef } from 'react'
-import Button from '../../pb_button/_button'
-import Dropdown from '../../pb_dropdown/_dropdown'
+import { Button, Dropdown } from 'playbook-ui'
 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 '../../pb_dropdown/_dropdown'
+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 '../../pb_dropdown/_dropdown'
+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 '../../pb_dropdown/_dropdown'
+import { Dropdown } from 'playbook-ui'
 const DropdownError = (props) => {
     const [selectedOption, setSelectedOption] = useState()

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

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

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 '../../pb_dropdown/_dropdown'
+import { Dropdown } from 'playbook-ui'
 const DropdownSubcomponentStructure = (props) => {

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

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

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

@@ -1,9 +1,5 @@
 import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-import Badge from '../../pb_badge/_badge'
-import FlexItem from '../../pb_flex/_flex_item'
-import User from '../../pb_user/_user'
+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,11 +1,5 @@
 import React, { useState } from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-import Badge from '../../pb_badge/_badge'
-import FlexItem from '../../pb_flex/_flex_item'
-import Avatar from '../../pb_avatar/_avatar'
-import User from '../../pb_user/_user'
+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,11 +1,5 @@
 import React, { useState } from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-import Badge from '../../pb_badge/_badge'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Avatar from '../../pb_avatar/_avatar'
-import User from '../../pb_user/_user'
+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,11 +1,5 @@
 import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-import FlexItem from '../../pb_flex/_flex_item'
-import Icon from '../../pb_icon/_icon'
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
+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 '../../pb_dropdown/_dropdown'
+import { Dropdown } from 'playbook-ui'
 const DropdownWithCustomPadding = (props) => {

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

@@ -1,11 +1,5 @@
 import React, { useState } from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-import FlexItem from '../../pb_flex/_flex_item'
-import Icon from '../../pb_icon/_icon'
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import IconCircle from '../../pb_icon_circle/_icon_circle'
+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,9 +1,5 @@
 import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-import useDropdown from '../../pb_dropdown/hooks/useDropdown'
-import Button from '../../pb_button/_button'
+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,12 +1,5 @@
 import React, { useRef } from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-import useDropdown from '../../pb_dropdown/hooks/useDropdown'
-import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
-import FlexItem from '../../pb_flex/_flex_item'
-import Icon from '../../pb_icon/_icon'
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
+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 '../../pb_dropdown/_dropdown'
+import { Dropdown } from 'playbook-ui'
 const DropdownDefault = (props) => {

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

@@ -1,9 +1,10 @@
 import React, { useState } from 'react'
-import FileUpload from '../../pb_file_upload/_file_upload'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import {
+  FileUpload,
+  List,
+  ListItem,
+} from 'playbook-ui'
 const AcceptedFilesList = ({ files }) => (
   <List>

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

@@ -1,9 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from "react";
-import FileUpload from '../../pb_file_upload/_file_upload'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import { FileUpload, List, ListItem } from "playbook-ui";
 const AcceptedFilesList = ({ files }) => (
   <List>

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

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
-import FileUpload from '../../pb_file_upload/_file_upload'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import {
+  FileUpload,
+  List,
+  ListItem,
+} from 'playbook-ui'
 const AcceptedFilesList = ({ files }) => (
   <List>

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

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
-import FileUpload from '../../pb_file_upload/_file_upload'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import {
+  FileUpload,
+  List,
+  ListItem,
+} from 'playbook-ui'
 const AcceptedFilesList = ({ files }) => (
   <List>

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

@@ -1,11 +1,12 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
-import Body from '../../pb_body/_body'
-import FileUpload from '../../pb_file_upload/_file_upload'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import {
+  Body,
+  FileUpload,
+  List,
+  ListItem,
+} from 'playbook-ui'
 const AcceptedFilesList = ({ files }) => (
   <List>

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

@@ -1,10 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Filter from '../../pb_filter/_filter'
-import Flex from '../../pb_flex/_flex'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
+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,9 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Filter from '../../pb_filter/_filter'
-import Flex from '../../pb_flex/_flex'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
+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,9 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Filter from '../../pb_filter/_filter'
-import Flex from '../../pb_flex/_flex'
-import Select from '../../pb_select/_select'
+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,10 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Filter from '../../pb_filter/_filter'
-import Flex from '../../pb_flex/_flex'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
+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,9 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Filter from '../../pb_filter/_filter'
-import Flex from '../../pb_flex/_flex'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
+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,9 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Filter from '../../pb_filter/_filter'
-import Flex from '../../pb_flex/_flex'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
+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,10 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Filter from '../../pb_filter/_filter'
-import Flex from '../../pb_flex/_flex'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
+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_popover_props.jsx CHANGED Viewed

@@ -1,9 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Filter from '../../pb_filter/_filter'
-import Flex from '../../pb_flex/_flex'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 const FilterPopoverProps = (props) => {
   const options = [

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

@@ -1,7 +1,5 @@
 import React from 'react'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Title from '../../pb_title/_title'
+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,7 +1,5 @@
 import React from 'react'
-import Title from '../../pb_title/_title'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+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,6 +1,5 @@
 import React from 'react'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+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,7 +1,5 @@
 import React from 'react'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Title from '../../pb_title/_title'
+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,7 +1,5 @@
 import React from 'react'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Title from '../../pb_title/_title'
+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,7 +1,5 @@
 import React from 'react'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Title from '../../pb_title/_title'
+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,7 +1,5 @@
 import React from 'react'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Title from '../../pb_title/_title'
+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,7 +1,5 @@
 import React from 'react'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Title from '../../pb_title/_title'
+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,7 +1,5 @@
 import React from 'react'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Title from '../../pb_title/_title'
+import { Flex, FlexItem, Title } from 'playbook-ui'
 const FlexSpacing = (props) => {
   return (