playbook_ui_docs 14.15.0.pre.alpha.play1907passglobalpropstotooltiprails6706 → 14.15.0.pre.alpha.play1910emptystatekitreactbeta6579

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx

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

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx

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

data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import Table from '../../pb_table/_table'
-import Icon from '../../pb_icon/_icon'
+import { Table, Icon } from 'playbook-ui'
 
 const TableWithClickableRows = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-import Table from '../../pb_table/_table'
-import Icon from '../../pb_icon/_icon'
-import Card from '../../pb_card/_card'
-import Body from '../../pb_body/_body'
+import { Table, Icon, Body, Card } from 'playbook-ui'
 
 const TableWithCollapsible = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-import Table from '../../pb_table/_table'
-import Icon from '../../pb_icon/_icon'
-import Card from '../../pb_card/_card'
-import Body from '../../pb_body/_body'
+import { Table, Card, Icon, Body } from 'playbook-ui'
 
 const TableWithCollapsibleWithCustomClick = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx

@@ -1,11 +1,5 @@
 import React from 'react'
-
-import Table from '../../pb_table/_table'
-import Icon from '../../pb_icon/_icon'
-import Card from '../../pb_card/_card'
-import Body from '../../pb_body/_body'
-import Image from '../../pb_image/_image'
-import Flex from '../../pb_flex/_flex'
+import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'
 
 const TableWithCollapsibleWithCustomContent = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-
-import Table from '../../pb_table/_table'
-import Icon from '../../pb_icon/_icon'
-import Background from '../../pb_background/_background'
+import { Table, Background, Icon } from 'playbook-ui'
 
 const TableWithCollapsibleWithNestedRows = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx

@@ -1,9 +1,5 @@
 import React from 'react'
-
-import Pill from '../../pb_pill/_pill'
-import Background from '../../pb_background/_background'
-import Table from '../../pb_table/_table'
-import Icon from '../../pb_icon/_icon'
+import {Pill, Background, Table, Icon} from "playbook-ui"
 
 const TableWithCollapsibleWithNestedTable = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx

@@ -1,9 +1,5 @@
 import React, { useState } from 'react'
-import Table from '../../pb_table/_table'
-import Image from '../../pb_image/_image'
-import Flex from '../../pb_flex/_flex'
-import Checkbox from '../../pb_checkbox/_checkbox'
-import Button from '../../pb_button/_button'
+import { Table, Checkbox, Image, Flex, Button } from 'playbook-ui'
 
 const TableWithSelectableRows = (props) => {
     const [checkboxes, setCheckboxes] = useState([

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import Textarea from '../../pb_textarea/_textarea'
+import { Textarea } from 'playbook-ui'
 
 const TextareaError = (props) => {
   const [value, setValue] = useState('default value text')

data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx

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

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import Caption from '../../pb_caption/_caption'
-import Timestamp from '../../pb_timestamp/_timestamp'
-import Title from '../../pb_title/_title'
+import { Caption, Timestamp, Title } from 'playbook-ui'
 
 const TimestampUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import Toggle from '../../pb_toggle/_toggle'
+import { Toggle } from 'playbook-ui'
 
 const ToggleCustom = () => {
   const [choice, setChoice] = useState(false)

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import Caption from '../../pb_caption/_caption'
-import Title from '../../pb_title/_title'
-import Toggle from '../../pb_toggle/_toggle'
+import { Caption, Title, Toggle } from 'playbook-ui'
 
 const ToggleCustomRadio = () => {
   const [choice, setChoice] = useState('walk')

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Toggle from '../../pb_toggle/_toggle'
+import { Toggle } from 'playbook-ui'
 
 const ToggleDefault = () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Toggle from '../../pb_toggle/_toggle'
+import { Toggle } from 'playbook-ui'
 
 const ToggleDisabled= () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import Caption from '../../pb_caption/_caption'
-import Title from '../../pb_title/_title'
-import Toggle from '../../pb_toggle/_toggle'
+import { Caption, Title, Toggle } from 'playbook-ui'
 
 const ToggleName = () => {
   const [choice, setChoice] = useState(false)

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import { Tooltip, Flex, FlexItem } from 'playbook-ui';
 
 const TooltipDefaultReact = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
 
 const TooltipDelay = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("icon_circle", props: { icon: "paper-plane", id: "result-1-sample-email-link" }) %>
+
+<%= pb_rails("tooltip", props: {
+  trigger_element_id: "result-1-sample-email-link",
+  tooltip_id: "sample-email-tooltip-result-1",
+  position: "top",
+  dark: true
+}) do %>
+  Send Email
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
+import { Tooltip, Button, Flex } from 'playbook-ui'
 
 const TooltipIcon = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import { Tooltip, Button, Flex, FlexItem } from 'playbook-ui';
 
 const TooltipInteraction = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
-import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import { Tooltip, Flex, CircleIconButton } from 'playbook-ui'
 
 const TooltipMargin = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx

@@ -1,9 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Body from '../../pb_body/_body'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import {  Button, Body, Flex, FlexItem, Tooltip } from 'playbook-ui'
 
 const TooltipShowTooltipReact = (props) => {
   const [showTooltip, setShowTooltip] = useState(true);

data/app/pb_kits/playbook/pb_tooltip/docs/example.yml

@@ -4,8 +4,6 @@ examples:
   - tooltip_default: Default
   - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
-  - tooltip_sizing: Tooltip Sizing
-  - tooltip_icon_rails: Tooltip with Icon
   - tooltip_with_icon_circle: Icon Circle Tooltip
   - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 /**
  *

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 const options = [
   { label: 'Jardim', value: 'Portuguese' },

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx

@@ -2,7 +2,9 @@
 
 import React, { useState } from 'react'
 
-import Button from '../../pb_button/_button'
+import {
+  Button,
+} from 'playbook-ui'
 
 import Typeahead from '../_typeahead'
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -4,12 +4,14 @@
 import React, { useState } from 'react'
 import { components } from 'react-select'
 
-import Avatar from '../../pb_avatar/_avatar'
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Title from '../../pb_title/_title'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import {
+  Avatar,
+  Body,
+  Flex,
+  FlexItem,
+  Title,
+  Typeahead,
+} from 'playbook-ui'
 
 const USERS = [
   {

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 const options = [
   { label: 'Windows', value: '#FFA500' },

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
 
-import Caption from '../../pb_caption/_caption'
-import Typeahead from '../../pb_typeahead/_typeahead'
-import User from '../../pb_user/_user'
+import {
+  Caption,
+  Typeahead,
+  User,
+} from 'playbook-ui'
 
 /**
  *

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
 
-import Caption from '../../pb_caption/_caption'
-import Typeahead from '../../pb_typeahead/_typeahead'
-import User from '../../pb_user/_user'
+import {
+  Caption,
+  Typeahead,
+  User,
+} from 'playbook-ui'
 
 /**
  *
@@ -47,7 +49,7 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
    * @summary - for doc example purposes only
    */
   const handleOnMultiValueClick = (value) => {
-    alert(`You added the user: "${value.label}"`)
+    alert(`You removed the user: "${value.label}"`)
   }
 
   return (

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
 
-import Caption from '../../pb_caption/_caption'
-import Typeahead from '../../pb_typeahead/_typeahead'
-import User from '../../pb_user/_user'
+import {
+  Caption,
+  Typeahead,
+  User,
+} from 'playbook-ui'
 
 /**
  *
@@ -54,7 +56,7 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
    * @summary - for doc example purposes only
    */
   const handleOnMultiValueClick = (value) => {
-    alert(`You added the user: "${value.label}"`)
+    alert(`You removed the user: "${value.label}"`)
   }
 
   return (

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 const options = [
   { label: 'Windows', value: '#FFA500' },

data/app/pb_kits/playbook/pb_typeahead/docs/example.yml

@@ -17,7 +17,6 @@ examples:
 
   react:
     - typeahead_default: Default
-    - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills
     - typeahead_with_pills_async: With Pills (Async Data)

data/app/pb_kits/playbook/pb_typeahead/docs/index.js

@@ -13,4 +13,3 @@ export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_lis
 export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
 export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'
 export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.jsx'
-export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'

data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx

@@ -1,10 +1,5 @@
 import React from "react"
-
-import Caption from '../../pb_caption/_caption'
-import Contact from '../../pb_contact/_contact'
-import Flex from '../../pb_flex/_flex'
-import Icon from '../../pb_icon/_icon'
-import User from '../../pb_user/_user'
+import { Caption, Contact, Flex, Icon, User } from "playbook-ui"
 
 const MentorSubtitle = (
   <Flex>

data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx

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

data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx

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

data/app/pb_kits/playbook/pb_user/docs/_user_size.jsx

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

data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import User from '../../pb_user/_user'
+import { User } from "playbook-ui"
 
 const UserSubtitle = (props) => {
   return (

data/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx

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

data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx

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

data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.jsx

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

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughContinuous = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughDefault = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughMultiBeacon = (props) => {
   const [stateA, setStateA] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughNoBeacon = (props) => {
   const [state, setState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughNoOverlay = (props) => {
   const [noOverlay, setNoOverlayState] = useState({

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
+import { Button, Walkthrough } from 'playbook-ui'
 
 const WalkthroughStyled = (props) => {
   const [state, setState] = useState({