RubyGems - playbook_ui - Versions diffs - 13.23.0.pre.alpha.PLAY1284investigation2657 → 13.24.0.pre.alpha.PBNTR261NewKitDropdown2681 - Mend

playbook_ui 13.23.0.pre.alpha.PLAY1284investigation2657 → 13.24.0.pre.alpha.PBNTR261NewKitDropdown2681

Files changed (34) hide show

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

@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+import { Dropdown, Icon, Body, FlexItem, Flex } from '../..'
+const DropdownWithCustomOptions = (props) => {
+// eslint-disable-next-line no-unused-vars
+  const [selectedOption, setSelectedOption] = useState();
+  const options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "United-states"
+    },
+    {
+      label: "Ukraine",
+      value: "Ukraine",
+      areaCode: "+380",
+      icon: "🇺🇦",
+      id: "ukraine"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pakistan"
+    }
+  ];
+  return (
+  <div>
+    <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger/>
+      <Dropdown.Container>
+        {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  DropdownWithCustomOptions

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

@@ -0,0 +1,78 @@
+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: "Ukraine",
+      value: "Ukraine",
+      areaCode: "+380",
+      icon: "🇺🇦",
+      id: "ukraine"
+    },
+    {
+      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>
+        {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/example.yml ADDED Viewed

@@ -0,0 +1,9 @@
+examples:
+  react:
+  - dropdown_default: Default
+  - dropdown_with_custom_options: Custom Options
+  - dropdown_with_custom_display: Custom Display
+  - dropdown_with_custom_trigger: Custom Trigger

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

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

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

@@ -0,0 +1,17 @@
+import { renderKit } from '../utilities/test-utils'
+import { Dropdown } 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 kit = renderKit(Dropdown , props)
+  expect(kit).toBeInTheDocument()
+})

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(!isDropDownClosed);
+return [
+    isDropDownClosed,
+    setIsDropDownClosed as any,
+    toggleDropdown
+]
+}
+export default useDropdown

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

@@ -0,0 +1,53 @@
+import React, { useContext } from "react";
+import DropdownContext from "../context";
+export const useHandleOnKeyDown = () => {
+const {
+  focusedOptionIndex,
+  filteredOptions,
+  setFocusedOptionIndex,
+  handleOptionClick,
+  setIsDropDownClosed,
+  handleBackspace,
+  selected
+}= useContext(DropdownContext)
+  return (e: React.KeyboardEvent) => {
+    switch (e.key) {
+    case "Backspace":
+    case "Delete":
+      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)
+      }
+      break;
+    default:
+        if (selected && selected.label) {
+          e.preventDefault();
+          handleBackspace();
+        }
+        break;
+  }
+}
+};

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

@@ -0,0 +1,95 @@
+import React, { useContext } from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+import DropdownContext from "../context";
+import List from "../../pb_list/_list";
+import ListItem from "../../pb_list/_list_item";
+import TextInput from "../../pb_text_input/_text_input";
+import Body from "../../pb_body/_body";
+type DropdownContainerProps = {
+  aria?: { [key: string]: string };
+  className?: string;
+  children?: React.ReactChild[] | React.ReactChild;
+  data?: { [key: string]: string };
+  id?: string;
+  searchbar?: boolean;
+};
+const DropdownContainer = (props: DropdownContainerProps) => {
+  const {
+    aria = {},
+    className,
+    children,
+    data = {},
+    id,
+    searchbar = false,
+  } = props;
+  const {
+    isDropDownClosed,
+    handleChange,
+    filterItem,
+    filteredOptions,
+    inputRef,
+    setFocusedOptionIndex,
+  } = useContext(DropdownContext);
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_dropdown_container"),
+    `${isDropDownClosed ? "close" : "open"}`,
+    globalProps(props),
+    className
+  );
+  return (
+    <div {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+        onMouseEnter={() => setFocusedOptionIndex(-1)}
+    >
+      {searchbar && (
+        <TextInput paddingTop="xs"
+            paddingX="xs"
+        >
+            <input
+                onChange={handleChange}
+                placeholder="Select..."
+                ref={inputRef}
+                value={filterItem}
+            />
+        </TextInput>
+      )}
+      <List>{
+        filteredOptions?.length === 0 ? (
+          <ListItem
+              display="flex"
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              justifyContent="center"
+              padding="xs"
+          >
+            <Body color="light"
+                text="no option"
+            />
+          </ListItem>
+        ): (
+          children
+        )
+        }
+        </List>
+    </div>
+  );
+};
+export default DropdownContainer;

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx ADDED Viewed

@@ -0,0 +1,91 @@
+import React, { useContext } from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+import DropdownContext from "../context";
+import Flex from "../../pb_flex/_flex";
+import Body from "../../pb_body/_body";
+import ListItem from "../../pb_list/_list_item";
+import { GenericObject } from "../../types";
+type DropdownOptionProps = {
+  aria?: { [key: string]: string };
+  className?: string;
+  children?: React.ReactChild[] | React.ReactChild;
+  data?: { [key: string]: string };
+  id?: string;
+  option?: GenericObject;
+  key?: string;
+};
+const DropdownOption = (props: DropdownOptionProps) => {
+  const { aria = {}, className, children, data = {}, id, option, key } = props;
+  const { handleOptionClick, selected, filterItem, filteredOptions, focusedOptionIndex } =
+    useContext(DropdownContext);
+  const isItemMatchingFilter = (option: GenericObject) =>
+    option?.label.toLowerCase().includes(filterItem.toLowerCase());
+  if (!isItemMatchingFilter(option)) {
+    return null;
+  }
+  const isFocused = focusedOptionIndex >= 0 && filteredOptions[focusedOptionIndex].label === option.label
+  const focusedClass = isFocused && "dropdown_option_focused"
+  const selectedClass = `${
+    selected.label === option.label
+        ? "dropdown_option_selected"
+        : "dropdown_option_list"
+  }`
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_dropdown_option"),
+    selectedClass,
+    focusedClass,
+    globalProps(props),
+    className
+  );
+  return (
+    <div {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+        key={key}
+    >
+      <ListItem
+          cursor="pointer"
+          data-name={option.value}
+          htmlOptions={{ onClick: () => handleOptionClick(option) }}
+          key={option.label}
+          padding="xs"
+      >
+        <Flex
+            align="center"
+            className="dropdown_option"
+            justify="between"
+            paddingX="sm"
+            paddingY="xxs"
+        >
+          {
+            children ? (
+              children
+            ) : (
+              <Body text={option.label}/>
+            )
+          }
+        </Flex>
+      </ListItem>
+    </div>
+  );
+};
+export default DropdownOption;

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx ADDED Viewed

@@ -0,0 +1,118 @@
+import React, { useContext } from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+import { useHandleOnKeyDown } from "../hooks/useHandleOnKeydown";
+import DropdownContext from "../context";
+import Body from "../../pb_body/_body";
+import Icon from "../../pb_icon/_icon";
+import Flex from "../../pb_flex/_flex";
+import FlexItem from "../../pb_flex/_flex_item";
+type DropdownTriggerProps = {
+  aria?: { [key: string]: string };
+  children?: React.ReactChild[] | React.ReactChild;
+  className?: string;
+  customDisplay?: React.ReactChild[] | React.ReactChild;
+  data?: { [key: string]: string };
+  id?: string;
+};
+const DropdownTrigger = (props: DropdownTriggerProps) => {
+  const { aria = {}, className, children, customDisplay, data = {}, id } = props;
+  const {
+    handleWrapperClick,
+    selected,
+    filterItem,
+    handleChange,
+    toggleDropdown,
+    isDropDownClosed,
+    inputRef,
+    isInputFocused,
+    setIsInputFocused
+  } = useContext(DropdownContext);
+  const handleKeyDown = useHandleOnKeyDown();
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_dropdown_trigger"),
+    globalProps(props),
+    className
+  );
+  return (
+    <div {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {children ? (
+        <div
+            onClick={() => toggleDropdown()}
+            style={{ display: "inline-block" }}
+        >
+          {children}
+        </div>
+      ) : (
+        <>
+          <Flex align="center"
+              borderRadius="lg"
+              className={`dropdown_trigger_wrapper ${isInputFocused && 'dropdown_trigger_wrapper_focus'}`}
+              cursor="text"
+              htmlOptions={{ onClick: () => handleWrapperClick(), tabIndex:"0" }}
+              justify="between"
+              paddingX="sm"
+              paddingY="xs"
+          >
+            <FlexItem>
+                <Flex align="center">
+                    {customDisplay ? (
+                      <Flex align="center">
+                          {customDisplay}
+                          <Body paddingLeft="xs">
+                              <b>{selected.label}</b>
+                          </Body>
+                      </Flex>
+                      ) : (
+                        selected.label && <Body text={selected.label} />
+                      )
+                    }
+                    <input
+                        className="dropdown_input"
+                        onChange={handleChange}
+                        onClick={() => toggleDropdown()}
+                        onFocus={() => setIsInputFocused(true)}
+                        onKeyDown={handleKeyDown}
+                        placeholder={selected.label ? "" : "Select..."}
+                        ref={inputRef}
+                        value={filterItem}
+                    />
+                </Flex>
+            </FlexItem>
+            <FlexItem>
+                <Body color="light"
+                    key={`${isDropDownClosed ? "chevron-down" : 'chevron-up'}`}
+                >
+                    <Icon cursor="pointer"
+                        icon={`${isDropDownClosed ? "chevron-down" : 'chevron-up'}`}
+                        size="sm"
+                    />
+                </Body>
+            </FlexItem>
+          </Flex>
+        </>
+      )}
+    </div>
+  );
+};
+export default DropdownTrigger;

data/app/pb_kits/playbook/pb_list/_list_item.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 type ListItemProps = {
   aria?: { [key: string]: string },
@@ -11,7 +11,7 @@ type ListItemProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   tabIndex?: number,
-}
+} & GlobalProps
 const ListItem = (props: ListItemProps) => {
   const {

data/app/pb_kits/playbook/playbook-doc.js CHANGED Viewed

@@ -34,6 +34,7 @@ import * as DateYearStacked from 'pb_date_year_stacked/docs'
 import * as Detail from 'pb_detail/docs'
 import * as Dialog from 'pb_dialog/docs'
 import * as DistributionBarDocs from 'pb_distribution_bar/docs'
+import * as Dropdown from 'pb_dropdown/docs'
 import * as FileUpload from 'pb_file_upload/docs'
 import * as Filter from 'pb_filter/docs'
 import * as FixedConfirmationToast from 'pb_fixed_confirmation_toast/docs'
@@ -136,6 +137,7 @@ WebpackerReact.registerComponents({
   ...Detail,
   ...Dialog,
   ...DistributionBarDocs,
+  ...Dropdown,
   ...FileUpload,
   ...Filter,
   ...FixedConfirmationToast,

data/app/pb_kits/playbook/tokens/_colors.scss CHANGED Viewed

@@ -213,7 +213,7 @@ $status_color_text: (
   warning:            darken($warning, 10%),
   error:              $error,
   info:               $info,
-  neutral:            darken($neutral, 15%),
+  neutral:            $text_lt_light,
   primary:            $primary
 );

data/dist/menu.yml CHANGED Viewed

@@ -254,6 +254,10 @@ kits:
         platforms: *web
         description: Playbook's date picker is built using flatpickr, a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.
         status: "stable"
+      - name: dropdown
+        platforms: *react_only
+        description: ""
+        status: "beta"
       - name: "multi_level_select"
         platforms: *web
         description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.
@@ -460,4 +464,4 @@ kits:
       - name: "user"
         platforms: *web
         description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
-        status: "stable"
+        status: "stable"