playbook_ui 12.18.0.pre.alpha.play786multilevelselectimprovements627 → 12.19.0.pre.alpha.movemarkdown637

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.md

@@ -1 +0,0 @@
-Use this kit in tables and cards to display data that doesn’t have a caption assigned.

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

@@ -1,7 +0,0 @@
-examples:
-
-  rails:
-  - title_detail_default: Default
-
-  react:
-  - title_detail_default: Default

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

@@ -1 +0,0 @@
-export { default as TitleDetailDefault } from './_title_detail_default.jsx'

data/app/pb_kits/playbook/pb_toggle/docs/_description.md

@@ -1 +0,0 @@
-Physical switch that allows users to turn things on or off. Used for applying system states, presenting binary options and activating a state.

data/app/pb_kits/playbook/pb_toggle/docs/_footer.md

@@ -1,3 +0,0 @@
-### Things to Avoid
-Avoid using if there is a selection with no action/execution that follows or if actions need to be confirmed before being applied.
-Avoid using for opposing options (ie having an option on each side of toggle and the side that it is flipped to is the option that is selected).

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("toggle", props: { size: "sm" }) do %>
-  <input class="my_custom_input" type="checkbox" name="custom_checkbox" value="ABC" />
-<% end %>

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

@@ -1,31 +0,0 @@
-// @flow
-
-import React, { useState } from 'react'
-import { Toggle } from '../..'
-
-const ToggleCustom = () => {
-  const [choice, setChoice] = useState(false)
-
-  const handleOnChange = ({ target }) => {
-    setChoice(target.value = !choice)
-  }
-
-  return (
-    <>
-      <Toggle
-          checked={choice}
-          size="sm"
-      >
-        <input
-            className="my custom checkbox"
-            name="custom checkbox"
-            onChange={handleOnChange}
-            type="checkbox"
-            value="ABC"
-        />
-      </Toggle>
-    </>
-  )
-}
-
-export default ToggleCustom

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.html.erb

@@ -1,22 +0,0 @@
-<%= pb_rails("title", props: { size: 4, text: "Select one option:" }) %>
-
-<br>
-
-<%= pb_rails("caption", props: { text: "Walk" }) %>
-<%= pb_rails("toggle", props: { size: "sm" }) do %>
-  <input type="radio" name="modes of transportation" value="walk">
-<% end %>
-
-<br/>
-
-<%= pb_rails("caption", props: { text: "Bike" }) %>
-<%= pb_rails("toggle", props: { size: "sm" }) do %>
-  <input type="radio" name="modes of transportation" value="bike">
-<% end %>
-
-<br/>
-
-<%= pb_rails("caption", props: { text: "Ride" }) %>
-<%= pb_rails("toggle", props: { size: "sm" }) do %>
-  <input type="radio" name="modes of transportation" value="ride">
-<% end %>

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

@@ -1,72 +0,0 @@
-// @flow
-
-import React, { useState } from 'react'
-import { Caption, Title, Toggle } from '../..'
-
-const ToggleCustomRadio = () => {
-  const [choice, setChoice] = useState('walk')
-
-  const handleOnChange = ({ target }) => {
-    setChoice(target.value)
-  }
-
-  return (
-    <>
-      <Title
-          size={4}
-          text="Select one option:"
-      />
-
-      <br />
-
-      <Caption
-          text="Walk"
-      />
-      <Toggle
-          checked={choice}
-          size="sm"
-      >
-        <input
-            name="modes of transportation"
-            onChange={handleOnChange}
-            type="radio"
-            value="walk"
-        />
-      </Toggle>
-
-      <br />
-
-      <Caption
-          text="Bike"
-      />
-      <Toggle
-          size="sm"
-      >
-        <input
-            name="modes of transportation"
-            onChange={handleOnChange}
-            type="radio"
-            value="bike"
-        />
-      </Toggle>
-
-      <br />
-
-      <Caption
-          text="Ride"
-      />
-      <Toggle
-          size="sm"
-      >
-        <input
-            name="modes of transportation"
-            onChange={handleOnChange}
-            type="radio"
-            value="ride"
-        />
-      </Toggle>
-    </>
-  )
-}
-
-export default ToggleCustomRadio

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.html.erb

@@ -1,9 +0,0 @@
-<%= pb_rails("toggle", props: {
-  checked: true
-}) %>
-
-<br>
-
-<%= pb_rails("toggle", props: {
-  checked: false
-}) %>

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

@@ -1,20 +0,0 @@
-// @flow
-
-import React from 'react'
-import { Toggle } from '../..'
-
-const ToggleDefault = () => {
-  return (
-    <>
-      <Toggle
-          checked
-      />
-
-      <br />
-
-      <Toggle />
-    </>
-  )
-}
-
-export default ToggleDefault

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.html.erb

@@ -1,21 +0,0 @@
-<%= pb_rails("title", props: { size: 4, text: "Which of the following vehicles do you own?" }) %>
-
-<br>
-
-<%= pb_rails("caption", props: { text: "Car" }) %>
-<%= pb_rails("toggle", props: {
-  size: "sm",
-  checked: false,
-  name: "vehicle",
-  value: "car"
-}) %>
-
-<br>
-
-<%= pb_rails("caption", props: { text: "Bike" }) %>
-<%= pb_rails("toggle", props: {
-  size: "sm",
-  checked: false,
-  name: "vehicle",
-  value: "bike"
-}) %>

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

@@ -1,57 +0,0 @@
-// @flow
-
-import React, { useState } from 'react'
-import { Caption, Title, Toggle } from '../..'
-
-const ToggleName = () => {
-  const [choice, setChoice] = useState(false)
-
-  const handleOnChange = ({ target }) => {
-    setChoice(target.value = !choice)
-  }
-
-  return (
-    <>
-      <Title
-          size={4}
-          text="Which of the following vehicles do you own?"
-      />
-
-      <br />
-
-      <Caption
-          text="Car"
-      />
-      <Toggle
-          checked={choice}
-          size="sm"
-      >
-        <input
-            name="vehicle"
-            onChange={handleOnChange}
-            type="checkbox"
-            value="car"
-        />
-      </Toggle>
-
-      <br />
-      <Caption
-          text="Bike"
-      />
-      <Toggle
-          checked={choice}
-          size="sm"
-      >
-        <input
-            name="vehicle"
-            onChange={handleOnChange}
-            type="checkbox"
-            value="bike"
-        />
-      </Toggle>
-
-    </>
-  )
-}
-
-export default ToggleName

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_options.html.erb

@@ -1,10 +0,0 @@
-<%= pb_rails("toggle" , props: {
-  text: "Toggle with Options",
-  input_options: {
-    id: "toggle-id",
-    name: "toggle-name",
-    value: "toggle-value",
-    class: "toggle-class",
-    checked: true
-  }
-}) %>

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

@@ -1,15 +0,0 @@
-examples:
-
-  rails:
-  - toggle_default: Default State
-  - toggle_name: Name and Value
-  - toggle_custom: Custom checkbox input
-  - toggle_custom_radio: Custom radio inputs
-  - toggle_options: Toggle w/ Options
-
-  react:
-  - toggle_default: Default State
-  - toggle_name: Name and Value
-  - toggle_custom: Custom checkbox input
-  - toggle_custom_radio: Custom radio inputs
-

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

@@ -1,4 +0,0 @@
-export { default as ToggleDefault } from './_toggle_default'
-export { default as ToggleCustom } from './_toggle_custom'
-export { default as ToggleName } from './_toggle_name'
-export { default as ToggleCustomRadio } from './_toggle_custom_radio'

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

@@ -1,46 +0,0 @@
-<%= pb_rails("flex", props: { gap: "md", justify: "center", wrap: true }) do %>
-  <%= pb_rails("flex/flex_item") do %>
-    <span id='regular-tooltip-1'>Hover here (Top)</span>
-
-    <%= pb_rails("tooltip", props: {
-      trigger_element_selector: "#regular-tooltip-1",
-      tooltip_id: "tooltip-1",
-      position: 'top'
-    }) do %>
-        Whoa. I'm a tooltip.
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("flex/flex_item") do %>
-    <span id='regular-tooltip-2'>Hover here (Bottom)</span>
-    <%= pb_rails("tooltip", props: {
-      trigger_element_selector: "#regular-tooltip-2",
-      tooltip_id: "tooltip-2",
-      position: 'bottom'
-    }) do %>
-        Whoa. I'm a tooltip.
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("flex/flex_item") do %>
-    <span id='regular-tooltip-3'>Hover here (Right)</span>
-    <%= pb_rails("tooltip", props: {
-      trigger_element_selector: "#regular-tooltip-3",
-      tooltip_id: "tooltip-3",
-      position: 'right'
-    }) do %>
-        Whoa. I'm a tooltip.
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("flex/flex_item") do %>
-    <span id='regular-tooltip-4'>Hover here (Left)</span>
-    <%= pb_rails("tooltip", props: {
-      trigger_element_selector: "#regular-tooltip-4",
-      tooltip_id: "tooltip-4",
-      position: 'left'
-    }) do %>
-        Whoa. I'm a tooltip.
-    <% end %>
-  <% end %>
-<% end %>

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

@@ -1,60 +0,0 @@
-// @flow
-
-import React from 'react'
-import { Tooltip, Flex, FlexItem } from '../..';
-
-const TooltipDefaultReact = (props) => {
-
-  return (
-   <Flex 
-       flexDirection='row'
-       gap='md'
-       justifyContent='center'
-       wrap
-   >
-    <FlexItem>
-      <Tooltip 
-          className={"customClassNameHere"}
-          placement='top' 
-          text="Whoa. I'm a Tooltip" 
-          zIndex={10}
-          {...props}
-      >
-        {'Hover here (Top)'}
-      </Tooltip>
-    </FlexItem>
-    <FlexItem>
-     <Tooltip 
-         placement='bottom' 
-         text="Whoa. I'm a Tooltip" 
-         zIndex={10}
-         {...props}
-     >
-        {'Hover here (Bottom)'}
-      </Tooltip>
-    </FlexItem>
-    <FlexItem>
-      <Tooltip 
-          placement='right' 
-          text="Whoa. I'm a Tooltip" 
-          zIndex={10}
-          {...props}
-      >
-        {'Hover here (Right)'}
-      </Tooltip>
-    </FlexItem>
-    <FlexItem>
-      <Tooltip 
-          placement='left' 
-          text="Whoa. I'm a Tooltip" 
-          zIndex={10}
-          {...props}
-      >
-        {'Hover here (Left)'}
-      </Tooltip>
-    </FlexItem>
-   </Flex>
-  )
-}
-
-export default TooltipDefaultReact

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

@@ -1,5 +0,0 @@
-You can define the tooltip placement sending the prop `placement` with one of the available options: `top | right | bottom | left`.
-
-If you don't specify a desired `placement`, the component will automatically choose the one that fits better. 
-
-If the desired `placement` doesn't fit on screen, the component will automatically switch to the one that fits better.

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

@@ -1,56 +0,0 @@
-// @flow
-
-import React from 'react'
-import { Button, Tooltip, Flex, FlexItem } from '../..';
-
-const TooltipDelay = (props) => {
-
-  return (
-   <Flex 
-       flexDirection='row'
-       gap='md'
-       justifyContent='center'
-       wrap
-   >
-    <FlexItem>
-      <Tooltip 
-          delay={1000}
-          placement='top' 
-          text="1s open/close delay" 
-          zIndex={10}
-          {...props}
-      >
-        <Button text="1s delay"/>
-      </Tooltip>
-    </FlexItem>
-    <FlexItem>
-      <Tooltip 
-          delay={{
-            open: 1000
-          }}
-          placement='top' 
-          text="1s open delay" 
-          zIndex={10}
-          {...props}
-      >
-        <Button text="Open only"/>
-      </Tooltip>
-    </FlexItem>
-    <FlexItem>
-      <Tooltip 
-          delay={{
-            close: 1000
-          }}
-          placement='top' 
-          text="1s close delay" 
-          zIndex={10}
-          {...props}
-      >
-        <Button text="Close only"/>
-      </Tooltip>
-    </FlexItem>
-   </Flex>
-  )
-}
-
-export default TooltipDelay

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

@@ -1,5 +0,0 @@
-Waits for the specified time when the event listener runs before triggering the tooltip.
-
-The `delay` accepts `number` in `ms` or an `object` with `open` and `close` properties.
-
-The `default` is `0`.

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

@@ -1,10 +0,0 @@
-<%= 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,52 +0,0 @@
-// @flow
-
-import React from 'react'
-import { Tooltip, Button, Flex } from '../..'
-
-const TooltipIcon = (props) => {
-  return (
-    <Flex flexDirection='row'
-        gap='md'
-        wrap
-    >
-      <Tooltip
-          icon='paper-plane'
-          placement='top'
-          text='Send Email'
-          zIndex={10}
-          {...props}
-      >
-        <Button text='Tooltip With Icon' />
-      </Tooltip>
-      <Tooltip
-          icon='paper-plane'
-          placement='bottom'
-          text='Send Email'
-          zIndex={10}
-          {...props}
-      >
-        <Button text='Tooltip With Icon' />
-      </Tooltip>
-      <Tooltip
-          icon='paper-plane'
-          placement='right'
-          text='Send Email'
-          zIndex={10}
-          {...props}
-      >
-        <Button text='Tooltip With Icon' />
-      </Tooltip>
-      <Tooltip
-          icon='paper-plane'
-          placement='left'
-          text='Send Email'
-          zIndex={10}
-          {...props}
-      >
-        <Button text='Tooltip With Icon' />
-      </Tooltip>
-    </Flex>
-  )
-}
-
-export default TooltipIcon

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

@@ -1 +0,0 @@
-Set the prop `icon` with the desired icon to display inside the tooltip.

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

@@ -1,40 +0,0 @@
-// @flow
-
-import React from 'react'
-import { Tooltip, Button, Flex, FlexItem } from '../..';
-
-const TooltipInteraction = (props) => {
-
-  return (
-   <Flex 
-       flexDirection='row'
-       gap='md'
-       justifyContent='center'
-       wrap
-   >
-    <FlexItem>
-      <Tooltip 
-          interaction 
-          placement='top' 
-          text="You can copy me"
-          zIndex={10}
-          {...props}
-      >
-        <Button text="With Interaction"/>
-      </Tooltip>
-    </FlexItem>
-    <FlexItem>
-     <Tooltip 
-         placement='top' 
-         text="I'm just a regular tooltip" 
-         zIndex={10}
-         {...props}
-     >
-        <Button text="No Interaction"/>
-      </Tooltip>
-    </FlexItem>
-   </Flex>
-  )
-}
-
-export default TooltipInteraction

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

@@ -1 +0,0 @@
-Set the prop `interaction` as `true` for cases that require users to copy the content inside the tooltip.

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

@@ -1,39 +0,0 @@
-// @flow
-
-import React from 'react'
-import { Tooltip, Flex, CircleIconButton } from '../..'
-
-const TooltipMargin = (props) => {
-  return (
-    <Flex 
-        flexDirection='row' 
-        justifyContent='center' 
-        wrap
-    >
-      <Tooltip
-          margin='md'
-          placement='top'
-          text='Send Email'
-          zIndex={10}
-          {...props}
-      >
-        <CircleIconButton 
-            icon='paper-plane'
-        />
-      </Tooltip>
-      <Tooltip 
-          margin='md' 
-          placement='top' 
-          text='Send Email' 
-          zIndex={10} 
-          {...props}
-      >
-        <CircleIconButton 
-            icon='paper-plane'
-        />
-      </Tooltip>
-    </Flex>
-  )
-}
-
-export default TooltipMargin

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

@@ -1,3 +0,0 @@
-You should set `margin` in the `tooltip` component itself. If you add this prop to the child, it will cause the tooltip to be pulled away from the trigger.
-
-It is not recommended to set `padding` in the `tooltip` nor its child, doing so will cause it to be pulled away from its trigger element.

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

@@ -1,17 +0,0 @@
-<%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
-  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
-    <%= pb_rails("button", props: {classname: "tooltip-example-trigger", text: "Example 1"}) %>
-  <% end %>
-
-  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
-    <%= pb_rails("button", props: {classname: "tooltip-example-trigger", text: "Example 1"}) %>
-  <% end %>
-
-  <%= pb_rails("tooltip", props: {
-      trigger_element_selector: ".tooltip-example-trigger",
-      tooltip_id: "example-tooltip",
-      position: 'top'
-    }) do %>
-        Whoa. I'm a re-useable tooltip.
-  <% end %>
-<% end %>

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

@@ -1,3 +0,0 @@
-## Re-using Tooltip Instances
-
-You can re-use Tooltip by sending `trigger_element_selector` as a HTML `class=` attribute.

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

@@ -1,9 +0,0 @@
-<%= 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"
-}) do %>
-  Send Email
-<% end %>