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

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.html.erb

@@ -1,74 +0,0 @@
-<% treeData = [{
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "powerhome1",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "people1",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "talent1",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business1",
-            expanded: true,
-            disabled: true,
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "initiative1",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "development1",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "People Experience",
-            id: "experience1",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "contact1",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "appointment1",
-          },
-          {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "customer1",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "energy1",
-          },
-        ],
-      },
-    ],
-}] %>
-
-
-<%= pb_rails("multi_level_select", props: {
-    id: "mls-disabled-options-parent-default-rails",
-    name: "disabled_options_parent_default",
-    tree_data: treeData
-}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.jsx

@@ -1,92 +0,0 @@
-import React from "react";
-import MultiLevelSelect from "../_multi_level_select";
-
-const treeData = [
-  {
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "powerhome1",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "people1",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "talent1",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business1",
-            expanded: true,
-            disabled: true,
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "initiative1",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "development1",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "People Experience",
-            id: "experience1",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "contact1",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "appointment1",
-          },
-          {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "customer1",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "energy1",
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const MultiLevelSelectDisabledOptionsParentDefault = (props) => {
-  return (
-    <div>
-      <MultiLevelSelect
-          id='multiselect-disabled-options-parent-default'
-          onSelect={(selectedNodes) =>
-          console.log(
-            "Selected Items",
-            selectedNodes
-          )
-        }
-          treeData={treeData}
-          {...props}
-      />
-    </div>
-  )
-};
-
-export default MultiLevelSelectDisabledOptionsParentDefault;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.md

@@ -1,3 +0,0 @@
-For the `default` variant, disabling the parent item will automatically disable it's children as well. 
-
-If you want to be able to disable a parent WITHOUT disabling it's children, use the `returnAllSelected`/`return_all_selected` variant.

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx

@@ -1,91 +0,0 @@
-import React from "react"
-import MultiLevelSelect from "../_multi_level_select"
-import { useForm } from "react-hook-form"
-
-const treeData = [
-  {
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "powerhome1",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "people1",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "talent1",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business1",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "initiative1",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "development1",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "People Experience",
-            id: "experience1",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "contact1",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "appointment1",
-          },
-          {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "customer1",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "energy1",
-          },
-        ],
-      },
-    ],
-  },
-]
-
-const MultiLevelSelectReactHook = (props) => {
-  const { register, watch } = useForm()
-  const selectedItems = watch("departments")
-  selectedItems && console.log("Selected Items", selectedItems)
-
-  return (
-    <div>
-      <MultiLevelSelect
-          id="multiselect-default"
-          marginBottom="md"
-          treeData={treeData}
-          {...register("departments")}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default MultiLevelSelectReactHook

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md

@@ -1 +0,0 @@
-You can pass `react-hook-form` props to the MultiLevelSelect kit. Check your console to see the full data selected from this example.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb

@@ -1,11 +0,0 @@
-<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", scroll_bar_none: true }) do %>
-    <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
-        <% 15.times do %>
-            <%= pb_rails("flex/flex_item") do %>
-                <%= pb_rails("card") do %>
-                    Card content
-                <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx

@@ -1,36 +0,0 @@
-import React from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Card from '../../pb_card/_card'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-
-const InlineCardsExample = () => {
-    return (
-        <Flex
-            columnGap="lg"
-            orientation="row"
-            overflowX="auto"
-        >
-            {Array.from({ length: 15 }, (_, index) => (
-                <FlexItem key={index}>
-                    <Card>{"Card Content"}</Card>
-                </FlexItem>
-            ))}
-        </Flex>
-    )
-}
-
-const OverlayHideScrollBar = () => (
-    <>
-        <Overlay
-            color="card_light"
-            layout={{"x": "xl"}}
-            scrollBarNone
-        >
-            <InlineCardsExample />
-        </Overlay>
-    </>
-)
-
-export default OverlayHideScrollBar

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md

@@ -1 +0,0 @@
-Pass the `scroll_bar_none` prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md

@@ -1 +0,0 @@
-Pass the `scrollBarNone` prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb

@@ -1,11 +0,0 @@
-<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", dynamic: true }) do %>
-    <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
-        <% 15.times do %>
-            <%= pb_rails("flex/flex_item") do %>
-                <%= pb_rails("card") do %>
-                    Card content
-                <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.md

@@ -1 +0,0 @@
-Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("phone_number_input", props: {
-    hidden_inputs: true,
-    id: "hidden_inputs",
-    name: "hidden_inputs",
-}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md

@@ -1 +0,0 @@
-The `hidden_inputs` boolean prop generates two hidden input fields, {field_name}_full and {field_name}_country_code. The value passed when the form is submitted contains the full phone number including the country code. Because it requires the submission of a form to function, only use this prop on Rails phone number elements within html form tags `<form>/<form>` or [pb_forms](https://playbook.powerapp.cloud/kits/form). Read the [intl-tel-input](https://intl-tel-input.com/examples/hidden-input.html) docs for more information.

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx

@@ -1,60 +0,0 @@
-import React from "react"
-import { useForm } from "react-hook-form"
-import { Radio, Flex, Body } from "playbook-ui"
-
-const RadioReactHook = () => {
-  const { register, watch } = useForm({
-    defaultValues: {
-      size: "Small",
-    },
-  })
-
-  const selectedSize = watch("size", "Small")
-
-  return (
-    <Flex orientation="row">
-      <Flex
-          align="start"
-          orientation="column"
-          paddingRight="lg"
-        >
-        <Radio
-            alignment="left"
-            label="Small"
-            marginBottom='sm'
-            name="size"
-            value="Small"
-            {...register("size")}
-        />
-        <br />
-        <Radio
-            alignment="left"
-            label="Medium"
-            marginBottom='sm'
-            name="size"
-            value="Medium"
-            {...register("size")}
-        />
-        <br />
-        <Radio
-            alignment="left"
-            label="Large"
-            marginBottom='sm'
-            name="size"
-            value="Large"
-            {...register("size")}
-        />
-      </Flex>
-      <Flex
-          align="start"
-          orientation="column"
-      >
-        <Body
-            text={`Selected Size: ${selectedSize}`}
-        />
-      </Flex>
-    </Flex>
-  )
-}
-
-export default RadioReactHook

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.md

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

data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx

@@ -1,58 +0,0 @@
-import React, { useState } from "react"
-import { useForm } from "react-hook-form"
-import { Button, Body, Select } from "playbook-ui"
-
-const SelectReactHook = (props) => {
-  const { register, handleSubmit, formState: { errors } } = useForm({
-    defaultValues: {
-      food: '',
-    },
-  })
-
-  const [submittedData, setSubmittedData] = useState({
-    food: '',
-  })
-
-  const onSubmit = (data) => {
-    setSubmittedData(data)
-  }
-
-  const options = [
-    {
-      value: 1,
-      text: 'Burgers',
-    },
-    {
-      value: 2,
-      text: 'Pizza',
-    },
-    {
-      value: 3,
-      text: 'Tacos',
-    },
-  ]
-
-  return (
-    <>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Select
-            {...props}
-            {...register("food", { required: true })}
-            error={errors.food ? "Please select a food." : null}
-            label="Favorite Food"
-            options={options}
-        />
-        <br />
-        <Button htmlType="submit"
-            marginTop="sm"
-            text="Submit"
-          />
-      </form>
-      <Body padding="xs"
-          text={`Food: ${submittedData.food}`}
-      />
-    </>
-  )
-}
-
-export default SelectReactHook

data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.md

@@ -1 +0,0 @@
-You can pass react-hook-form props to a select kit. You can use `register` which will make the value available for both the form validation and submission. 

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.html.erb

@@ -1,7 +0,0 @@
-<%= pb_rails("title", props: { text: "Display Size xs", tag: "h1", display_size: "xs" }) %>
-<%= pb_rails("title", props: { text: "Display Size sm", tag: "h1", display_size: "sm" }) %>
-<%= pb_rails("title", props: { text: "Display Size md", tag: "h1", display_size: "md" }) %>
-<%= pb_rails("title", props: { text: "Display Size lg", tag: "h1", display_size: "lg" }) %>
-<%= pb_rails("title", props: { text: "Display Size xl", tag: "h1", display_size: "xl" }) %>
-<%= pb_rails("title", props: { text: "Display Size xxl", tag: "h1", display_size: "xxl" }) %>
-<%= pb_rails("title", props: { text: "This is a size of display", tag: "h1", size: "display"}) %>

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.jsx

@@ -1,54 +0,0 @@
-import React from 'react'
-
-import Title from '../_title'
-
-const TitleDisplaySize = (props) => {
-  return (
-    <div>
-      <Title
-          displaySize="xs"
-          tag="h1"
-          text="Display Size xs"
-          {...props}
-      />
-      <Title
-          displaySize="sm"
-          tag="h1"
-          text="Display Size sm"
-          {...props}
-      />
-      <Title
-          displaySize="md"
-          tag="h1"
-          text="Display Size md"
-          {...props}
-      />
-      <Title
-          displaySize="lg"
-          tag="h1"
-          text="Display Size lg"
-          {...props}
-      />
-      <Title
-          displaySize="xl"
-          tag="h1"
-          text="Display Size xl"
-          {...props}
-      />
-      <Title
-          displaySize="xxl"
-          tag="h1"
-          text="Display Size xxl"
-          {...props}
-      />
-      <Title
-          size="display"
-          tag="h1"
-          text="This is a size of display"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default TitleDisplaySize

data/app/pb_kits/playbook/pb_title/docs/_title_display_size.md

@@ -1 +0,0 @@
-Responsive sizes for large screens and tablets, perfect for digital signage.

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

@@ -1,39 +0,0 @@
-<%= pb_rails("flex", props: { orientation: "row", gap: "md" }) do %>
-  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
-    <%= pb_rails("button", props: {classname: "tooltip-delay", text: "1s delay"}) %>
-  <% end %>
-
-  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
-    <%= pb_rails("button", props: {classname: "tooltip-open-delay", text: "Open only"}) %>
-  <% end %>
-
-  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
-    <%= pb_rails("button", props: {classname: "tooltip-close-delay", text: "Close only"}) %>
-  <% end %>
-
-  <%= pb_rails("tooltip", props: {
-      trigger_element_selector: ".tooltip-delay",
-      tooltip_id: "delay-tooltip",
-      position: 'top',
-      delay_open: 1000,
-      delay_close: 1000
-    }) do %>
-        1s open/close delay 
-  <% end %>
-  <%= pb_rails("tooltip", props: {
-      trigger_element_selector: ".tooltip-open-delay",
-      tooltip_id: "open-tooltip",
-      position: 'top',
-      delay_open: 1000
-    }) do %>
-        1s open delay 
-  <% end %>
-  <%= pb_rails("tooltip", props: {
-      trigger_element_selector: ".tooltip-close-delay",
-      tooltip_id: "close-tooltip",
-      position: 'top',
-      delay_close: 1000
-    }) do %>
-        1s close delay 
-  <% end %>
-<% end %>

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

@@ -1,3 +0,0 @@
-Waits for the specified time when the event listener runs before triggering the tooltip.
-
-The `delay_open` and `delay_close` accept numbers in milliseconds. 1 second is 1000 milliseconds.

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

@@ -1,22 +0,0 @@
-<%= pb_rails "flex", props: { flex_direction: "row", gap: "md", wrap: true } do %>
-  <%= pb_rails "button", props: { id: "tool-tip-with-icon-1", text: "Tooltip With Icon" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-1", tooltip_id: "tool-tip-with-icon-1", position: "top" } do %>
-    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
-    Send Email
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-with-icon-2", text: "Tooltip With Icon" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-2", tooltip_id: "tool-tip-with-icon-2", position: "bottom" } do %>
-    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
-    Send Email
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-with-icon-3", text: "Tooltip With Icon" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-3", tooltip_id: "tool-tip-with-icon-3", position: "left" } do %>
-    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
-    Send Email
-  <% end %>
-  <%= pb_rails "button", props: { id: "tool-tip-with-icon-4", text: "Tooltip With Icon" } %>
-  <%= pb_rails "tooltip", props: { trigger_element_selector: "#tool-tip-with-icon-4", tooltip_id: "tool-tip-with-icon-4", position: "right" } do %>
-    <%= pb_rails("icon", props: { icon: "paper-plane", fixed_width: true, color: "white", size: "1x", padding_right: "xxs" }) %>
-    Send Email
-  <% end %>
-<% end %>

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

@@ -1,26 +0,0 @@
-<%= pb_rails("flex", props: { gap: "md", wrap: true }) do %>
-  <%= pb_rails("flex/flex_item") do %>
-    <%= pb_rails("button", props: { text: "With Interaction", id: "tooltip-interaction"}) %>
-
-    <%= pb_rails("tooltip", props: {
-      trigger_element_selector: "#tooltip-interaction",
-      tooltip_id: "tooltip-with-interaction",
-      position: 'top',
-      interaction: true
-    }) do %>
-        You can copy me
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("flex/flex_item") do %>
-    <%= pb_rails("button", props: { text: "No Interaction", id: "tooltip-no-interaction"}) %>
-
-    <%= pb_rails("tooltip", props: {
-      trigger_element_selector: "#tooltip-no-interaction",
-      tooltip_id: "tooltip-without-interaction",
-      position: 'top',
-    }) do %>
-        I'm just a regular tooltip
-    <% end %>
-  <% end %>
-<% end %>

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

@@ -1,22 +0,0 @@
-<%= 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 %>