RubyGems - playbook_ui - Versions diffs - 13.24.0 → 13.25.0.pre.alpha.PBNTR272Dropdownkitv42769 - Mend

playbook_ui 13.24.0 → 13.25.0.pre.alpha.PBNTR272Dropdownkitv42769

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 (194) hide show

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

@@ -0,0 +1,48 @@
+import React from 'react'
+import { Dropdown } from '../..'
+const DropdownWithCustomPadding = (props) => {
+  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>
+    <Dropdown
+        options={options}
+        {...props}
+    >
+      {options.map((option) => (
+        <Dropdown.Option key={option.id}
+            option={option}
+            padding="sm"
+        />
+      ))}
+    </Dropdown>
+  </div>
+  )
+}
+export default DropdownWithCustomPadding

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

	@@ -0,0 +1 @@
1	+ By default, the padding on each option in the dropdown is set to `xs`. The `padding` Global Props however can be used to override this default. In this example, we are setting padding to `sm`.

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

@@ -0,0 +1,77 @@
+import React, { useState } from 'react'
+import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from '../..'
+const DropdownWithCustomTrigger = (props) => {
+const [selectedOption, setSelectedOption] = useState();
+  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>
+    <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        options={options}
+        {...props}
+    >
+        <Dropdown.Trigger>
+            <div key={selectedOption ? selectedOption.icon : "flag"}>
+                <IconCircle
+                    cursor="pointer"
+                    icon={selectedOption ? selectedOption.icon : "flag"}
+                    variant="royal"
+                />
+            </div>
+        </Dropdown.Trigger>
+      <Dropdown.Container maxWidth="xs">
+        {options.map((option) => (
+          <Dropdown.Option key={option.id}
+              option={option}
+          >
+            <>
+              <FlexItem>
+                <Flex>
+                  <Icon icon={option.icon}
+                      paddingRight="xs"
+                  />
+                  <Body text={option.label} />
+                </Flex>
+              </FlexItem>
+              <FlexItem>
+                <Body color="light"
+                    text={option.areaCode}
+                />
+              </FlexItem>
+            </>
+          </Dropdown.Option>
+        ))}
+      </Dropdown.Container>
+    </Dropdown>
+  </div>
+  )
+}
+export default  DropdownWithCustomTrigger

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,62 @@
+import React, { useState } from 'react'
+import { Dropdown, useDropdown, Button } from '../../'
+const DropdownWithExternalControl = (props) => {
+// eslint-disable-next-line no-unused-vars
+const [selectedOption, setSelectedOption] = useState();
+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}
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        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,75 @@
+import React, { useState, useRef } from 'react'
+import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex  } from '../..'
+const DropdownWithHook = (props) => {
+// eslint-disable-next-line no-unused-vars
+const [selectedOption, setSelectedOption] = useState();
+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}
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        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 ADDED Viewed

@@ -0,0 +1,15 @@
+examples:
+  react:
+  - dropdown_default: Default
+  - 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 ADDED Viewed

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

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

@@ -0,0 +1,207 @@
+import React from "react"
+import { render, screen } from "../utilities/test-utils"
+import { Dropdown, Icon } from '../'
+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>
+  )
+}
+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')
+  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')
+  option.click()
+  expect(option).toHaveClass('pb_dropdown_option dropdown_option_selected p_xs')
+})

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

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

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

@@ -0,0 +1,61 @@
+import React, { useContext } from "react";
+import DropdownContext from "../context";
+export const useHandleOnKeyDown = () => {
+const {
+  autocomplete,
+  filteredOptions,
+  focusedOptionIndex,
+  handleBackspace,
+  handleOptionClick,
+  selected,
+  setFocusedOptionIndex,
+  setIsDropDownClosed,
+}= useContext(DropdownContext)
+  return (e: React.KeyboardEvent) => {
+    if (e.key !== "Tab" && autocomplete && selected && selected.label) {
+      handleBackspace();
+    }
+    switch (e.key) {
+    case "Backspace":
+    case "Delete":
+      if (autocomplete) {
+      handleBackspace();
+      }
+      break;
+    case "ArrowDown": {
+      e.preventDefault();
+      setIsDropDownClosed(false);
+      const nextIndex = (focusedOptionIndex + 1) % filteredOptions.length;
+      setFocusedOptionIndex(nextIndex);
+      break;
+    }
+    case "ArrowUp": {
+      e.preventDefault();
+      const nextIndexUp =
+        (focusedOptionIndex - 1 + filteredOptions.length) %
+        filteredOptions.length;
+      setFocusedOptionIndex(nextIndexUp);
+      break;
+    }
+    case "Enter":
+      if (focusedOptionIndex !== -1) {
+        e.preventDefault();
+        handleOptionClick(filteredOptions[focusedOptionIndex]);
+        setFocusedOptionIndex(-1)
+      } else if (focusedOptionIndex === -1) {
+        setIsDropDownClosed(false)
+      }
+      break;
+      case "Tab":
+        setIsDropDownClosed(true);
+        setFocusedOptionIndex(-1)
+        break;
+  }
+}
+};