RubyGems - playbook_ui - Versions diffs - 13.25.0 → 13.26.0 - Mend

playbook_ui 13.25.0 → 13.26.0

Files changed (193) 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>