RubyGems - playbook_ui - Versions diffs - 13.25.0 → 13.26.0.pre.alpha.jasoncypretpatch12816 - Mend

playbook_ui 13.25.0 → 13.26.0.pre.alpha.jasoncypretpatch12816

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (224) hide show

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The Dropdown can also be given a custom Trigger by passing children to the `Dropdown.Trigger` subcomponent as shown in this example. Here we are using the IconCircle kit.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx ADDED Viewed

@@ -0,0 +1,59 @@
+import React from 'react'
+import { Dropdown, useDropdown, Button } from '../../'
+const DropdownWithExternalControl = (props) => {
+const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "United-states"
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+      areaCode: "+1",
+      icon: "🇨🇦",
+      id: "canada"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pakistan"
+    }
+  ];
+  return (
+  <div>
+    <Button
+        data={{dropdown:'pb-dropdown-trigger'}}
+        marginBottom='sm'
+        onClick={() => setIsDropdownClosed(!isDropDownClosed)}
+        padding="none"
+        tabIndex={0}
+        variant="link"
+    >
+      {isDropDownClosed ? "Open Dropdown" : "Close Dropdown"}
+    </Button>
+    <Dropdown
+        isClosed={isDropDownClosed}
+        options={options}
+        {...props}
+    >
+      {options.map((option) => (
+        <Dropdown.Option key={option.id}
+            option={option}
+        />
+      ))}
+    </Dropdown>
+  </div>
+  )
+}
+export default DropdownWithExternalControl

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx ADDED Viewed

@@ -0,0 +1,72 @@
+import React, { useRef } from 'react'
+import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex  } from '../..'
+const DropdownWithHook = (props) => {
+const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
+const buttonRef = useRef(null);
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "United-states"
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+      areaCode: "+1",
+      icon: "🇨🇦",
+      id: "canada"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pakistan"
+    }
+  ];
+  return (
+  <div>
+      <CircleIconButton
+          htmlOptions={{ref: buttonRef}}
+          icon={"flag"}
+          onClick={() => setIsDropdownClosed(!isDropDownClosed)}
+          variant="secondary"
+      />
+    <Dropdown
+        isClosed={isDropDownClosed}
+        options={options}
+        triggerRef={buttonRef}
+        {...props}
+    >
+      {options.map((option) => (
+        <Dropdown.Option key={option.id}
+            option={option}
+        >
+        <>
+          <FlexItem>
+              <Flex paddingRight='md'>
+                <Icon icon={option.icon}
+                    paddingRight="xs"
+                />
+                <Body text={option.label} />
+              </Flex>
+          </FlexItem>
+              <FlexItem>
+                <Body color="light"
+                    text={option.areaCode}
+                />
+              </FlexItem>
+            </>
+        </Dropdown.Option>
+      ))}
+    </Dropdown>
+  </div>
+  )
+}
+export default DropdownWithHook

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx ADDED Viewed

@@ -0,0 +1,39 @@
+import React from 'react'
+import { Dropdown } from '../..'
+const DropdownDefault = (props) => {
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+    }
+  ];
+  return (
+  <div>
+    <Dropdown
+        label="Select a Country"
+        options={options}
+        {...props}
+    >
+      {options.map((option) => (
+        <Dropdown.Option key={option.id}
+            option={option}
+        />
+      ))}
+    </Dropdown>
+  </div>
+  )
+}
+export default DropdownDefault

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The optional `label` prop takes a string value that if present will render that string as the label for the Dropdown.

data/app/pb_kits/playbook/pb_dropdown/docs/example.yml CHANGED Viewed

@@ -3,7 +3,14 @@ examples:
   react:
   - dropdown_default: Default
+  - dropdown_subcomponent_structure: Subcomponent Structure
+  - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
+  - dropdown_with_custom_padding: Custom Padding for Dropdown Options
+  # - dropdown_with_autocomplete: Autocomplete
+  # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
+  # - dropdown_with_external_control: useDropdown Hook
+  # - dropdown_with_hook: useDropdown Hook with Any Trigger

data/app/pb_kits/playbook/pb_dropdown/docs/index.js CHANGED Viewed

@@ -2,3 +2,10 @@ export { default as DropdownDefault } from './_dropdown_default.jsx'
 export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_display.jsx'
 export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
 export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
+export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
+export { default as DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
+export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'
+export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
+export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
+export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
+export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx CHANGED Viewed

@@ -1,17 +1,207 @@
-import { renderKit } from '../utilities/test-utils'
+import React from "react"
+import { render, screen } from "../utilities/test-utils"
-import { Dropdown } from '../'
+import { Dropdown, Icon } from '../'
-/* See these resources for more testing info:
-  - https://github.com/testing-library/jest-dom#usage for useage and examples
-  - https://jestjs.io/docs/en/using-matchers
-*/
-test('generated scaffold test - update me', () => {
-  const props = {
-    data: { testid: 'default' }
+const testId = 'dropdown'
+const options = [
+  {
+    label: "United States",
+    value: "United States",
+    areaCode: "+1",
+    icon: "🇺🇸",
+    id: "United-states"
+  },
+  {
+    label: "Canada",
+    value: "Canada",
+    areaCode: "+1",
+    icon: "🇨🇦",
+    id: "canada"
+  },
+  {
+    label: "Pakistan",
+    value: "Pakistan",
+    areaCode: "+92",
+    icon: "🇵🇰",
+    id: "pakistan"
   }
+];
+const DefaultDropdownKit = () => {
+  return (
+    <Dropdown
+        data={{ testid: testId }}
+        options={options}
+    >
+    {options.map((option) => (
+      <Dropdown.Option key={option.id}
+          option={option}
+      />
+    ))}
+    </Dropdown>
+  )
+}
-  const kit = renderKit(Dropdown , props)
+test('generated default kit and classname', () => {
+  render(<DefaultDropdownKit/>)
+  const kit = screen.getByTestId(testId)
   expect(kit).toBeInTheDocument()
+  expect(kit).toHaveClass('pb_dropdown')
+})
+test('generated default Trigger and Container when none passed in', () => {
+  render(<DefaultDropdownKit/>)
+  const kit = screen.getByTestId(testId)
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  expect(trigger).toBeInTheDocument()
+  const container = kit.querySelector('.pb_dropdown_container')
+  expect(container).toBeInTheDocument()
+  const defaultTrigger = kit.querySelector('.dropdown_trigger_wrapper_select_only')
+  expect(defaultTrigger).toBeInTheDocument()
+})
+test('generated Options', () => {
+  render(<DefaultDropdownKit/>)
+  const kit = screen.getByTestId(testId)
+  const option = kit.querySelector('.pb_dropdown_option_list')
+  expect(option).toBeInTheDocument()
+})
+test('generated customDisplay for trigger', () => {
+  render (
+    <Dropdown
+        data={{ testid: testId }}
+        options={options}
+    >
+      <Dropdown.Trigger
+          customDisplay={<Icon icon="flag" />}
+      />
+      {options.map((option) => (
+      <Dropdown.Option key={option.id}
+          option={option}
+      />
+    ))}
+    </Dropdown>
+  )
+  const kit = screen.getByTestId(testId)
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  const customDisplay = trigger.querySelector('.fa-flag.pb_icon_kit.fa-fw')
+  expect(customDisplay).toBeInTheDocument()
 })
+test('generated placeholder prop', () => {
+  render (
+    <Dropdown
+        data={{ testid: testId }}
+        options={options}
+    >
+      <Dropdown.Trigger
+          placeholder="Select a country"
+      />
+      {options.map((option) => (
+      <Dropdown.Option key={option.id}
+          option={option}
+      />
+    ))}
+    </Dropdown>
+  )
+  const kit = screen.getByTestId(testId)
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  expect(trigger).toHaveTextContent('Select a country')
+})
+test('generated label prop', () => {
+  render (
+    <Dropdown
+        data={{ testid: testId }}
+        label="Countries"
+        options={options}
+    >
+      {options.map((option) => (
+      <Dropdown.Option key={option.id}
+          option={option}
+      />
+    ))}
+    </Dropdown>
+  )
+  const kit = screen.getByTestId(testId)
+  const label = kit.querySelector('.pb_caption_kit_md')
+  expect(label).toHaveTextContent('Countries')
+})
+test('generated custom option', () => {
+  render (
+    <Dropdown
+        data={{ testid: testId }}
+        options={options}
+    >
+      {options.map((option) => (
+      <Dropdown.Option key={option.id}
+          option={option}
+      >
+         <Icon icon={option.icon} />
+      </Dropdown.Option>
+    ))}
+    </Dropdown>
+  )
+  const kit = screen.getByTestId(testId)
+  const customOption = kit.querySelector('.pb_icon_kit_emoji')
+  expect(customOption).toBeInTheDocument()
+})
+test('generated custom Trigger', () => {
+  render (
+    <Dropdown
+        data={{ testid: testId }}
+        options={options}
+    >
+      <Dropdown.Trigger>
+          <Icon icon="home" />
+      </Dropdown.Trigger>
+      {options.map((option) => (
+      <Dropdown.Option key={option.id}
+          option={option}
+      />
+    ))}
+    </Dropdown>
+  )
+  const kit = screen.getByTestId(testId)
+  const trigger = kit.querySelector('.pb_dropdown_trigger')
+  const customTrigger = trigger.querySelector('.fa-home.pb_icon_kit.fa-fw')
+  expect(customTrigger).toBeInTheDocument()
+})
+test('selected option on click', () => {
+  render (
+    <Dropdown
+        data={{ testid: testId }}
+        options={options}
+    >
+      {options.map((option) => (
+      <Dropdown.Option key={option.id}
+          option={option}
+      />
+    ))}
+    </Dropdown>
+  )
+  const kit = screen.getByTestId(testId)
+  const option = kit.querySelector('.pb_dropdown_option_list')
+  option.click()
+  expect(option).toHaveClass('pb_dropdown_option_selected p_xs')
+})

data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx CHANGED Viewed

@@ -1,11 +1,11 @@
 import {useState} from 'react';
-const useDropdown = (initial=true) => {
+const useDropdown = (initial= true) => {
 const [isDropDownClosed, setIsDropDownClosed] = useState(initial);
-const toggleDropdown = () => setIsDropDownClosed(!isDropDownClosed);
+const toggleDropdown = () => setIsDropDownClosed((prev) => !prev);
 return [
     isDropDownClosed,

data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx CHANGED Viewed

@@ -6,16 +6,21 @@ export const useHandleOnKeyDown = () => {
 const {
   autocomplete,
-  focusedOptionIndex,
   filteredOptions,
-  setFocusedOptionIndex,
+  focusedOptionIndex,
+  handleBackspace,
   handleOptionClick,
+  selected,
+  setFocusedOptionIndex,
   setIsDropDownClosed,
-  handleBackspace,
-  selected
 }= useContext(DropdownContext)
   return (e: React.KeyboardEvent) => {
+    if (e.key !== "Tab" && autocomplete && selected && selected.label) {
+      handleBackspace();
+    }
     switch (e.key) {
     case "Backspace":
     case "Delete":
@@ -43,13 +48,13 @@ const {
         e.preventDefault();
         handleOptionClick(filteredOptions[focusedOptionIndex]);
         setFocusedOptionIndex(-1)
+      } else if (focusedOptionIndex === -1) {
+        setIsDropDownClosed(false)
       }
       break;
-    default:
-        if (selected && selected.label) {
-          e.preventDefault();
-          handleBackspace();
-        }
+      case "Tab":
+        setIsDropDownClosed(true);
+        setFocusedOptionIndex(-1)
         break;
   }
 }

data/app/pb_kits/playbook/pb_dropdown/scss_partials/_dropdown_animation.scss ADDED Viewed

@@ -0,0 +1,18 @@
+@keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx CHANGED Viewed

@@ -4,6 +4,7 @@ import {
   buildAriaProps,
   buildCss,
   buildDataProps,
+  buildHtmlProps
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
@@ -16,9 +17,11 @@ import Body from "../../pb_body/_body";
 type DropdownContainerProps = {
   aria?: { [key: string]: string };
-  className?: string;
   children?: React.ReactChild[] | React.ReactChild;
+  className?: string;
+  dark?: boolean;
   data?: { [key: string]: string };
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   searchbar?: boolean;
 };
@@ -26,24 +29,29 @@ type DropdownContainerProps = {
 const DropdownContainer = (props: DropdownContainerProps) => {
   const {
     aria = {},
-    className,
     children,
+    className,
+    dark = false,
     data = {},
+    htmlOptions = {},
     id,
     searchbar = false,
   } = props;
   const {
-    isDropDownClosed,
-    handleChange,
-    filterItem,
+    dropdownContainerRef,
     filteredOptions,
+    filterItem,
+    handleChange,
     inputRef,
+    isDropDownClosed,
     setFocusedOptionIndex,
+    triggerRef
   } = useContext(DropdownContext);
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_dropdown_container"),
     `${isDropDownClosed ? "close" : "open"}`,
@@ -54,12 +62,16 @@ const DropdownContainer = (props: DropdownContainerProps) => {
   return (
     <div {...ariaProps}
         {...dataProps}
+        {...htmlProps}
         className={classes}
         id={id}
         onMouseEnter={() => setFocusedOptionIndex(-1)}
+        ref={dropdownContainerRef}
+        style={triggerRef ? {} : { position: "absolute"}}
     >
       {searchbar && (
-        <TextInput paddingTop="xs"
+        <TextInput dark={dark}
+            paddingTop="xs"
             paddingX="xs"
         >
             <input
@@ -70,9 +82,10 @@ const DropdownContainer = (props: DropdownContainerProps) => {
             />
         </TextInput>
       )}
-      <List>{
+      <List dark={dark}>
+        {
         filteredOptions?.length === 0 ? (
-          <ListItem
+          <ListItem dark={dark}
               display="flex"
               // eslint-disable-next-line @typescript-eslint/ban-ts-comment
               // @ts-ignore
@@ -80,6 +93,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
               padding="xs"
           >
             <Body color="light"
+                dark={dark}
                 text="no option"
             />
           </ListItem>