playbook_ui_docs 14.14.0.pre.rc.5 → 14.15.0.pre.alpha.PBNTR477draggabledropzone6743

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

@@ -1,5 +1,9 @@
 import React, { useState } from 'react'
-import {  Button, Body, Flex, FlexItem, Tooltip } from 'playbook-ui'
+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'
 
 const TooltipShowTooltipReact = (props) => {
   const [showTooltip, setShowTooltip] = useState(true);

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-1", text: "Height and Width" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-1", tooltip_id: "tool-tip-sizing-1", position: "top", height: "150px", width: "100px" } do %>
+    I'm 150px high and 100px wide!
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-2", text: "max_height" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-2", tooltip_id: "tool-tip-sizing-2", position: "top", width: "250px", max_height: "100px" } do %>
+    I have a max_height of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-3", text: "max_width" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-3", tooltip_id: "tool-tip-sizing-3", position: "top", max_width: "150px" } do %>
+    I have a max_width of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit.
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-4", text: "min_width" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-4", tooltip_id: "tool-tip-sizing-4", position: "top", min_width: "300px" } do %>
+    I have a min_width of 300px!
+  <% end %>
+  <%= pb_rails "button", props: { id: "tool-tip-sizing-5", text: "min_height" } %>
+  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-sizing-5", tooltip_id: "tool-tip-sizing-5", position: "top", min_height: "300px", height: "200px"  } do %>
+    I have a min_height of 300px!
+  <% end %>
+<% end %>

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

@@ -0,0 +1,69 @@
+import React from 'react'
+import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
+
+const TooltipSizing = (props) => {
+
+  return (
+   <Flex
+       flexDirection='row'
+       gap='md'
+       wrap
+   >
+    <FlexItem>
+      <Tooltip
+          height='150px'
+          placement='top'
+          text="I'm 150px high and 100px wide!"
+          width='100px'
+          {...props}
+      >
+        <Button text="Height and Width"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          maxHeight='100px'
+          placement='top'
+          text="I have a maxHeight of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit."
+          width='250px'
+          {...props}
+      >
+        <Button text="maxHeight"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          maxWidth='150px'
+          placement='top'
+          text="I have a maxWidth of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit."
+          {...props}
+      >
+        <Button text="maxWidth"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          minWidth='300px'
+          placement='top'
+          text="I have a minWidth of 300px!"
+          {...props}
+      >
+        <Button text="minWidth"/>
+      </Tooltip>
+    </FlexItem>
+    <FlexItem>
+      <Tooltip
+          maxWidth='150px'
+          minHeight='300px'
+          placement='top'
+          text="I have a minHeight of 300px!"
+          {...props}
+      >
+        <Button text="minHeight"/>
+      </Tooltip>
+    </FlexItem>
+   </Flex>
+  )
+}
+
+export default TooltipSizing

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.md

@@ -0,0 +1,3 @@
+You can customize the `height` and `width` of the tooltip's popover.
+
+When using `maxHeight`, be sure to set a `width` as well. The text needs to truncate within the `width` prop.

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

@@ -2,15 +2,19 @@ examples:
 
   rails:
   - 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
 
   react:
   - tooltip_default_react: Default
   - tooltip_interaction: Content Interaction
   - tooltip_margin: Margin
+  - tooltip_sizing: Tooltip Sizing
   - tooltip_icon: Tooltip with Icon
   - tooltip_delay: Delay
   - tooltip_show_tooltip_react: Show Tooltip
-

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

@@ -1,6 +1,7 @@
 export { default as TooltipDefaultReact } from './_tooltip_default_react'
 export { default as TooltipInteraction } from './_tooltip_interaction'
 export { default as TooltipMargin } from './_tooltip_margin'
+export { default as TooltipSizing } from './_tooltip_sizing'
 export { default as TooltipIcon } from './_tooltip_icon'
 export { default as TooltipDelay } from './_tooltip_delay'
 export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.html.erb

@@ -0,0 +1,45 @@
+<%= pb_rails("select", props: {
+  id:"color_context_2",
+  label: "Choose a Color",
+  name: "color_name",
+  options: [
+    { value: "red", value_text: "Red" },
+    { value: "blue", value_text: "Blue" },
+    { value: "green", value_text: "Green" }
+  ],
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  label: "Pick a Shade",
+  is_multi: false,
+  search_context_selector: "color_context_2",
+  options_by_context: {
+    "red":  [
+      { label: "Scarlet", value: "scarlet" },
+      { label: "Mahogany", value: "mahogany" },
+      { label: "Crimson", value: "crimson" }
+    ],
+    "blue": [
+      { label: "Sky Blue", value: "sky" },
+      { label: "Cerulean", value: "cerulean" },
+      { label: "Navy", value: "navy" }
+    ],
+    "green": [
+      { label: "Emerald", value: "emerald" },
+      { label: "Mint", value: "mint" },
+      { label: "Olive", value: "olive" }
+    ]
+  },
+  id: "typeahead-dynamic-options",
+}) %>
+
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-option-select", function(event) {
+    console.log('Single Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-dynamic-options-result-clear", function() {
+    console.log('All options cleared')
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.md

@@ -0,0 +1,5 @@
+You can also set up a typeahead to render options dynamically based on input from a select. To achieve this:
+- The typeahead must have a unique `id`
+- Use the `search_context_selector` prop on the typeahead. The value here must match the id of the select so the Typeahead knows where to read the current "context" from.
+- Use `options_by_context` to pass in a hash whose keys match the possible values of your “context” select. Each key maps to an array of { label, value } objects. The typeahead automatically displays only the subset of options matching the current context.
+- Additionally, the optional `clear_on_context_change` prop controls whether the typeahead clears or not when a change happens in the linked select. This prop is set to true by default so that whenever a selection is made in the select, the Typeahead automatically clears its current input/selection.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("select", props: {
+  id:"color_context",
+  label: "Choose a Color",
+  name: "color_name_2",
+  options: [
+    { value: "red", value_text: "Red" },
+    { value: "blue", value_text: "Blue" },
+    { value: "green", value_text: "Green" }
+  ],
+}) %>
+
+<%= pb_rails("typeahead", props: {
+  label: "Pick a Shade",
+  search_context_selector: "color_context",
+  options_by_context: {
+    "red":  [
+      { label: "Scarlet", value: "scarlet" },
+      { label: "Mahogany", value: "mahogany" },
+      { label: "Crimson", value: "crimson" }
+    ],
+    "blue": [
+      { label: "Sky Blue", value: "sky" },
+      { label: "Cerulean", value: "cerulean" },
+      { label: "Navy", value: "navy" }
+    ],
+    "green": [
+      { label: "Emerald", value: "emerald" },
+      { label: "Mint", value: "mint" },
+      { label: "Olive", value: "olive" }
+    ]
+  },
+  search_term_minimum_length: 0,
+}) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.md

@@ -0,0 +1,3 @@
+The dynamic rendering of options for the typeahead can also be achieved with a pure Rails implementation (not react rendered). For this implementation, use all the props as above with the following additions:
+
+- `search_term_minimum_length`: this sets the minimum input in the typeahead needed to display the dropdown. This is set to 3 by default. Set it to 0 for the dropdown to always display when the typeahead is interacted with. 

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

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import { Typeahead, Title } from 'playbook-ui'
+import { useForm } from 'react-hook-form'
+
+const languages = [
+  { label: 'JavaScript', value: '1995', category: 'Web Development' },
+  { label: 'Python', value: '1991', category: 'General Purpose' },
+  { label: 'Java', value: '1995', category: 'Enterprise' },
+  { label: 'C++', value: '1985', category: 'Systems Programming' },
+  { label: 'Go', value: '2009', category: 'Systems Programming' },
+  { label: 'Rust', value: '2010', category: 'Systems Programming' },
+  { label: 'Swift', value: '2014', category: 'Mobile Development' },
+  { label: 'Kotlin', value: '2011', category: 'Mobile Development' },
+  { label: 'Ruby', value: '1995', category: 'General Purpose' },
+  { label: 'PHP', value: '1995', category: 'Web Development' },
+]
+
+const colors = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadReactHook = (props) => {
+  const { register, watch } = useForm()
+
+  const selectedLanguages = watch('languages')
+  const selectedColor = watch('color')
+
+  return (
+    <>
+      <Typeahead
+          isMulti
+          label="Multi Select Languages"
+          multiKit="language"
+          options={languages}
+          {...props}
+          {...register('languages')}
+      />
+      <Title 
+          size={4} 
+          text='Selected Languages' 
+      />
+      {selectedLanguages && selectedLanguages.map(language => (
+        <p key={language.label}>{`${language.label} - ${language.value} - ${language.category}`}</p>
+      ))}
+
+      <Typeahead
+          label="Colors"
+          marginTop="lg"
+          options={colors}
+          {...props}
+          {...register('color')}
+      />
+      <Title 
+          size={4} 
+          text='Selected Color' 
+      />
+      <p>{ selectedColor && `${selectedColor.label} - ${selectedColor.value}`}</p>
+    </>
+  )
+}
+
+export default TypeaheadReactHook

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md

@@ -0,0 +1 @@
+You can pass `react-hook-form` props to the Typeahead kit.

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

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

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

@@ -4,14 +4,12 @@
 import React, { useState } from 'react'
 import { components } from 'react-select'
 
-import {
-  Avatar,
-  Body,
-  Flex,
-  FlexItem,
-  Title,
-  Typeahead,
-} from 'playbook-ui'
+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'
 
 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 'playbook-ui'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const options = [
   { label: 'Windows', value: '#FFA500' },

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

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

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

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

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

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

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

@@ -12,9 +12,12 @@ examples:
     - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
     - typeahead_truncated_text: Truncated Text
+    - typeahead_dynamic_options: Dynamic Options
+    - typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
 
   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,3 +13,4 @@ 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,5 +1,10 @@
 import React from "react"
-import { Caption, Contact, Flex, Icon, User } from "playbook-ui"
+
+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'
 
 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 'playbook-ui'
+import User from '../../pb_user/_user'
 
 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 'playbook-ui'
+import User from '../../pb_user/_user'
 
 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 'playbook-ui'
+import User from '../../pb_user/_user'
 
 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 "playbook-ui"
+import User from '../../pb_user/_user'
 
 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 'playbook-ui'
+import User from '../../pb_user/_user'
 
 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 'playbook-ui'
+import User from '../../pb_user/_user'
 
 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 'playbook-ui'
+import User from '../../pb_user/_user'
 
 const UserWithTerritory = (props) => {
   return (

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

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

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

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

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

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

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

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

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

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

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

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