playbook_ui 12.19.0 → 12.20.0.pre.alpha.movemarkdown668

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 %>

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

@@ -1,13 +0,0 @@
-examples:
-
-  rails:
-  - tooltip_default: Default
-  - tooltip_selectors: Using Common Selectors
-  - tooltip_with_icon_circle: Icon Circle Tooltip
-
-  react:
-  - tooltip_default_react: Default
-  - tooltip_interaction: Content Interaction
-  - tooltip_margin: Margin
-  - tooltip_icon: Tooltip with Icon
-  - tooltip_delay: Delay

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

@@ -1,5 +0,0 @@
-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 TooltipIcon } from './_tooltip_icon'
-export { default as TooltipDelay } from './_tooltip_delay'

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

@@ -1,5 +0,0 @@
-Treemap charts are used to compare the relative size of groups of data. They can also use a nested data structure, allowing a user to drill down into a group to see its constituent data points.
-
-The default height of treemap is 400px and can be changed. The default height is in pixel units, but can also use percentage string (percentage would be that of the width. For example, `height:"50%"` would mean that the height is 50% of the width). This allows for preserving the aspect ratio across responsive sizes.
-
-For more information, see: <a href="https://api.highcharts.com/highcharts/chart.height" target="_blank"> highcharts/chart.height</a>.

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb

@@ -1,37 +0,0 @@
-<% data = [
-  {
-    name: "Pepperoni",
-    parent: "Toppings",
-    value: 600,
-  }, {
-    name: "Cheese",
-    parent: "Toppings",
-    value: 510,
-  }, {
-    name: "Mushroom",
-    parent: "Toppings",
-    value: 330,
-  },{
-    name: "Onions",
-    parent: "Toppings",
-    value: 250,
-  }, {
-    name: "Olives",
-    parent: "Toppings",
-    value: 204,
-  }, {
-    name: "Pineapple",
-    parent: "Toppings",
-    value: 90,
-  }, {
-    name: "Pizza Toppings",
-    id: "Toppings",
-  },
-] %>
-
-<%= pb_rails("treemap_chart", props: {
-    chart_data: data,
-    colors: ["data-4", "data-7", "#8E6E53", "#124732"],
-    id: "treemap-colors",
-    title: "Favored Pizza Toppings",
-}) %>