playbook_ui 14.14.0.pre.alpha.PBNTR907reactfilterpopoverpropswidthbug6557 → 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6275

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx

@@ -1,61 +0,0 @@
-import React from 'react'
-import { IconButton, Flex } from 'playbook-ui'
-
-const IconButtonSizes = (props) => (
-  <div>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="lg"
-      />
-      <span>Large</span>
-    </Flex>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="sm"
-      />
-      <span>Small</span>
-    </Flex>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="xs"
-      />
-      <span>XSmall</span>
-    </Flex>
-    <Flex
-        align="center"
-        marginTop="md"
-    >
-      <IconButton
-          {...props}
-          size="1x"
-      />
-      <span>1x</span>
-    </Flex>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="2x"
-      />
-      <span>2x</span>
-    </Flex>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="3x"
-      />
-      <span>3x</span>
-    </Flex>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="4x"
-      />
-      <span>4x</span>
-    </Flex>
-  </div>
-)
-
-export default IconButtonSizes

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

@@ -1,2 +0,0 @@
-export { default as IconButtonDefault } from './_icon_button_default.jsx'
-export { default as IconButtonSizes } from './_icon_button_sizes.jsx'

data/app/pb_kits/playbook/pb_icon_button/icon_button.test.jsx

@@ -1,39 +0,0 @@
-import { ensureAccessible, renderKit } from '../utilities/test-utils'
-
-import { IconButton } from 'playbook-ui'
-
-const props = {
-  data: { testid: 'default', icon: 'plus' }
-}
-
-test('default test', () => {
-  const kit = renderKit(IconButton, props)
-
-  expect(kit).toBeInTheDocument()
-  expect(kit).toHaveClass('pb_icon_button_kit_default')
-
-  const iconElement = kit.querySelector('.icon_button_icon')
-  expect(iconElement).toBeInTheDocument()
-})
-
-it("should be accessible", async () => {
-  ensureAccessible(IconButton, props)
-})
-
-test('passes link variant prop', () => {
-  const kit = renderKit(IconButton, { ...props, variant: "link" })
-  expect(kit).toBeInTheDocument()
-  expect(kit).toHaveClass('pb_icon_button_kit_link')
-})
-
-test('should set button type to "submit" when htmlType prop is passed', () => {
-  const kit = renderKit(IconButton, { ...props, htmlType: 'submit' })
-  const buttonElement = kit.querySelector('button')
-  expect(buttonElement).toHaveAttribute('type', 'submit')
-})
-
-test('passes custom classname', () => {
-  const kit = renderKit(IconButton, { ...props, className: "extra_class" })
-  expect(kit).toBeInTheDocument()
-  expect(kit).toHaveClass('pb_icon_button_kit_default extra_class')
-})

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

@@ -1,72 +0,0 @@
-<% treeData = [{
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "100",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "101",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "102",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "103",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "104",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "105",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "People Experience",
-            id: "106",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "107",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "108",
-          },
-          {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "109",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "110",
-          },
-        ],
-      },
-    ],
-}] %>
-
-<%= pb_rails("multi_level_select", props: {
-    disabled: true,
-    id: "multi-level-select-default-rails",
-    name: "my_array",
-    tree_data: treeData
-}) %>

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.