playbook_ui 14.15.0.pre.alpha.play1917lodashremoval2of36615 → 14.15.0.pre.rc.0

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

@@ -1,91 +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",
-                        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 MultiLevelSelectDisabled = (props) => {
-    return (
-        <>
-            <MultiLevelSelect
-                disabled
-                id='multiselect-default'
-                onSelect={(selectedNodes) =>
-                    console.log(
-                        "Selected Items",
-                        selectedNodes
-                    )
-                }
-                treeData={treeData}
-                {...props}
-            />
-        </>
-    )
-};
-
-export default MultiLevelSelectDisabled

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,37 +0,0 @@
-import React from 'react'
-import {
-    Overlay,
-    Card,
-    Flex,
-    FlexItem,
-} from 'playbook-ui'
-
-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_overlay/index.js

@@ -1,61 +0,0 @@
-import PbEnhancedElement from '../pb_enhanced_element'
-
-const OVERLAY_SELECTOR = '[data-pb-overlay]'
-const OVERLAY_SCROLL_ELEMENT = '[data-overlay-scroll-element]'
-const PREVIOUS_OVERLAY_CLASSNAME = '[data-previous-overlay-classname]'
-const SUBSEQUENT_OVERLAY_CLASSNAME = '[data-subsequent-overlay-classname]'
-
-export default class PbOverlay extends PbEnhancedElement {
-    static get selector() {
-        return OVERLAY_SELECTOR
-    }
-
-    get target() {
-        return this.element.querySelector(OVERLAY_SCROLL_ELEMENT).children[0]
-    }
-
-    connect() {
-        this.handleOverlayDynamic()
-    }
-
-    handleOverlayDynamic() {
-        const isOverlayDynamic = this.element.dataset?.overlayDynamic
-
-        if (isOverlayDynamic) {
-            const previousOverlayElement = this.element.querySelector(PREVIOUS_OVERLAY_CLASSNAME)
-            const previousOverlayClassname = previousOverlayElement?.dataset?.previousOverlayClassname
-            const subsequentOverlayElement = this.element.querySelector(SUBSEQUENT_OVERLAY_CLASSNAME)
-            const subsequentOverlayClassname = subsequentOverlayElement?.dataset?.subsequentOverlayClassname
-
-            const handleScrollChange = (target) => {
-                const { scrollLeft, scrollWidth, clientWidth } = target
-                const isScrollAtStart = scrollLeft === 0
-                const isScrollAtEnd = scrollLeft + clientWidth >= scrollWidth - 1
-        
-                if (isScrollAtStart) {
-                    previousOverlayElement.classList.remove(previousOverlayClassname)
-                } else {
-                    previousOverlayElement.classList.add(previousOverlayClassname)
-                }
-        
-                if (isScrollAtEnd) {
-                    subsequentOverlayElement.classList.remove(subsequentOverlayClassname)
-                } else {
-                    subsequentOverlayElement.classList.add(subsequentOverlayClassname)
-                }
-            }
-
-            this.target.addEventListener('scroll', (event) => {
-                handleScrollChange(event.target)
-            })
-
-            handleScrollChange(this.target)
-        }
-    }
-
-    disconnect() {
-        if (this.element.dataset?.overlayDynamic) {
-            this.target.removeEventListener('scroll')
-        }
-    }
-}

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_select/index.js

@@ -1,38 +0,0 @@
-import PbEnhancedElement from "../pb_enhanced_element";
-
-const SELECT_WRAPPER_SELECTOR = "[data-pb-select]";
-const SELECT_VALIDATION_MESSAGE_CLASS = ".pb_body_kit_negative";
-
-export default class PbSelect extends PbEnhancedElement {
-  static get selector() {
-    return SELECT_WRAPPER_SELECTOR;
-  }
-
-  connect() {
-    this.setValidationMessage();
-  }
-
-  setValidationMessage() {
-    const validationMessage = this.element.dataset?.validationMessage;
-
-    if (validationMessage) {
-      const selectElement = this.element.querySelector("select");
-      const setErrorTextContent = (text, timeout) => {
-        setTimeout(() => {
-          const errorMessageElement = this.element.querySelector(SELECT_VALIDATION_MESSAGE_CLASS);
-          if (errorMessageElement) {
-            errorMessageElement.textContent = text;
-          } else {
-            setErrorTextContent(text, 100);
-          }
-        }, timeout);
-      };
-
-      selectElement.addEventListener("change", (e) => {
-        if (!e.target.checkValidity()) {
-          setErrorTextContent(validationMessage, 300);
-        }
-      });
-    }
-  }
-}

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.jsx

@@ -1,69 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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.