playbook_ui 13.25.0.pre.alpha.barchartfix2766 → 13.26.0.pre.alpha.jasoncypretpatch12816

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

@@ -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

@@ -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

@@ -6,13 +6,13 @@ export const useHandleOnKeyDown = () => {
 
 const {
   autocomplete,
-  focusedOptionIndex,
   filteredOptions,
-  setFocusedOptionIndex,
-  handleOptionClick,
-  setIsDropDownClosed,
+  focusedOptionIndex,
   handleBackspace,
+  handleOptionClick,
   selected,
+  setFocusedOptionIndex,
+  setIsDropDownClosed,
 }= useContext(DropdownContext)
 
   return (e: React.KeyboardEvent) => {

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

@@ -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

@@ -17,8 +17,9 @@ 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;
@@ -28,8 +29,9 @@ type DropdownContainerProps = {
 const DropdownContainer = (props: DropdownContainerProps) => {
   const {
     aria = {},
-    className,
     children,
+    className,
+    dark = false,
     data = {},
     htmlOptions = {},
     id,
@@ -37,12 +39,14 @@ const DropdownContainer = (props: DropdownContainerProps) => {
   } = props;
 
   const {
-    isDropDownClosed,
-    handleChange,
-    filterItem,
+    dropdownContainerRef,
     filteredOptions,
+    filterItem,
+    handleChange,
     inputRef,
+    isDropDownClosed,
     setFocusedOptionIndex,
+    triggerRef
   } = useContext(DropdownContext);
 
   const ariaProps = buildAriaProps(aria);
@@ -62,9 +66,12 @@ const DropdownContainer = (props: DropdownContainerProps) => {
         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
@@ -75,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
@@ -85,6 +93,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
               padding="xs"
           >
             <Body color="light" 
+                dark={dark}
                 text="no option"
             />
           </ListItem>

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

@@ -17,35 +17,37 @@ import { GenericObject } from "../../types";
 
 type DropdownOptionProps = {
   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;
-  option?: GenericObject;
   key?: string;
+  option?: GenericObject;
   padding?: string;
 }  & GlobalProps;
 
 const DropdownOption = (props: DropdownOptionProps) => {
   const {
     aria = {},
-    className,
     children,
+    className,
+    dark = false,
     data = {},
     htmlOptions = {},
     id,
-    option,
     key,
+    option,
     padding = "xs",
   } = props;
 
   const {
-    handleOptionClick,
-    selected,
-    filterItem,
     filteredOptions,
+    filterItem,
     focusedOptionIndex,
+    handleOptionClick,
+    selected,
   } = useContext(DropdownContext);
 
   const isItemMatchingFilter = (option: GenericObject) =>
@@ -57,20 +59,22 @@ const DropdownOption = (props: DropdownOptionProps) => {
   const isFocused =
     focusedOptionIndex >= 0 &&
     filteredOptions[focusedOptionIndex].label === option.label;
-  const focusedClass = isFocused && "dropdown_option_focused";
+  const focusedClass = isFocused && "focused";
 
   const selectedClass = `${
     selected.label === option.label
-      ? "dropdown_option_selected"
-      : "dropdown_option_list"
+      ? "selected"
+      : "list"
   }`;
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
-    buildCss("pb_dropdown_option"),
-    selectedClass,
-    focusedClass,
+    buildCss(
+      "pb_dropdown_option",
+      selectedClass,
+      focusedClass,
+    ),
     globalProps(props, {padding}),
     className
   );
@@ -87,18 +91,24 @@ const DropdownOption = (props: DropdownOptionProps) => {
     >
       <ListItem
           cursor="pointer"
+          dark={dark}
           data-name={option.value}
           key={option.label}
           padding="none"
       >
         <Flex
             align="center"
-            className="dropdown_option"
+            className="dropdown_option_wrapper"
             justify="between"
             paddingX="sm"
             paddingY="xxs"
         >
-          {children ? children : <Body text={option.label} />}
+          {children ? 
+              children : 
+              <Body dark={dark} 
+                  text={option.label} 
+              />
+          }
         </Flex>
       </ListItem>
     </div>

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

@@ -21,6 +21,7 @@ type DropdownTriggerProps = {
   children?: React.ReactChild[] | React.ReactChild;
   className?: string;
   customDisplay?: React.ReactChild[] | React.ReactChild;
+  dark?: boolean;
   data?: { [key: string]: string };
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
@@ -30,9 +31,10 @@ type DropdownTriggerProps = {
 const DropdownTrigger = (props: DropdownTriggerProps) => {
   const {
     aria = {},
-    className,
     children,
+    className,
     customDisplay,
+    dark = false,
     data = {},
     htmlOptions = {},
     id,
@@ -41,15 +43,17 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
 
   const {
     autocomplete,
-    handleWrapperClick,
-    selected,
     filterItem,
     handleChange,
-    toggleDropdown,
-    isDropDownClosed,
+    handleWrapperClick,
     inputRef,
+    inputWrapperRef,
+    isDropDownClosed,
     isInputFocused,
+    selected,
     setIsInputFocused,
+    toggleDropdown,
+    triggerRef,
   } = useContext(DropdownContext);
 
   const handleKeyDown = useHandleOnKeyDown();
@@ -63,9 +67,11 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     className
   );
 
-  const triggerWrapperClasses = `dropdown_trigger_wrapper ${
-    isInputFocused && "dropdown_trigger_wrapper_focus"
-  } ${!autocomplete && "dropdown_trigger_wrapper_select_only"}`;
+  const triggerWrapperClasses = buildCss(
+    "dropdown_trigger_wrapper",
+    isInputFocused && "focus",
+    !autocomplete && "select_only"
+  );
 
   const customDisplayPlaceholder = selected.label ? (
     <b>{selected.label}</b>
@@ -92,79 +98,91 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
         className={classes} 
         id={id}
     >
-      {children ? (
-        <div
-            onClick={() => toggleDropdown()}
-            onKeyDown= {handleKeyDown}
-            style={{ display: "inline-block" }}
-            tabIndex= {0}
-        >
-          {children}
-        </div>
-      ) : (
-        <>
-          <Flex
-              align="center"
-              borderRadius="lg"
-              className={triggerWrapperClasses}
-              cursor={`${autocomplete ? "text" : "pointer"}`}
-              htmlOptions={{
-                onClick: () => handleWrapperClick(),
-                onKeyDown: handleKeyDown,
-                tabIndex: "0",
-              }}
-              justify="between"
-              paddingX="sm"
-              paddingY="xs"
-          >
-            <FlexItem>
-              <Flex align="center">
-                {customDisplay ? (
-                  <Flex align="center">
-                    {customDisplay}
-                    <Body paddingLeft={`${selected.label ? "xs" : "none"}`}>
-                      {customDisplayPlaceholder}
-                    </Body>
-                  </Flex>
-                ) : (
-                  <Body text={defaultDisplayPlaceholder} />
-                )}
-                {autocomplete && (
-                  <input
-                      className="dropdown_input"
-                      onChange={handleChange}
-                      onClick={() => toggleDropdown()}
-                      onFocus={() => setIsInputFocused(true)}
-                      onKeyDown={handleKeyDown}
-                      placeholder={
-                        selected.label
-                          ? ""
-                          : placeholder
-                          ? placeholder
-                          : "Select..."
-                      }
-                      ref={inputRef}
-                      value={filterItem}
-                  />
-                )}
-              </Flex>
-            </FlexItem>
-              <Body
-                  display="flex"
+      {
+        !triggerRef && (
+          children ? (
+            <div
+                onClick={() => toggleDropdown()}
+                onKeyDown= {handleKeyDown}
+                ref={inputWrapperRef}
+                style={{ display: "inline-block" }}
+                tabIndex= {0}
+            >
+              {children}
+            </div>
+          ) : (
+            <>
+              <Flex
+                  align="center"
+                  borderRadius="lg"
+                  className={triggerWrapperClasses}
+                  cursor={`${autocomplete ? "text" : "pointer"}`}
                   htmlOptions={{
-                    onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
+                    onClick: () => handleWrapperClick(),
+                    onKeyDown: handleKeyDown,
+                    tabIndex: "0",
+                    ref:inputWrapperRef
                   }}
-                  key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
+                  justify="between"
+                  paddingX="sm"
+                  paddingY="xs"
               >
-                <Icon
-                    cursor="pointer"
-                    icon={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
-                    size="sm"
-                />
-              </Body>
-          </Flex>
-        </>
-      )}
+                <FlexItem>
+                  <Flex align="center">
+                    {customDisplay ? (
+                      <Flex align="center">
+                        {customDisplay}
+                        <Body dark={dark} 
+                            paddingLeft={`${selected.label ? "xs" : "none"}`}
+                        >
+                          {customDisplayPlaceholder}
+                        </Body>
+                      </Flex>
+                    ) : (
+                      <Body dark={dark} 
+                          text={defaultDisplayPlaceholder} 
+                      />
+                    )}
+                    {autocomplete && (
+                      <input
+                          className="dropdown_input"
+                          onChange={handleChange}
+                          onClick={() => toggleDropdown()}
+                          onFocus={() => setIsInputFocused(true)}
+                          onKeyDown={handleKeyDown}
+                          placeholder={
+                            selected.label
+                              ? ""
+                              : placeholder
+                              ? placeholder
+                              : "Select..."
+                          }
+                          ref={inputRef}
+                          value={filterItem}
+                      />
+                    )}
+                  </Flex>
+                </FlexItem>
+                  <Body
+                      dark={dark}
+                      display="flex"
+                      htmlOptions={{
+                        onClick: (e: Event) => {e.stopPropagation();handleWrapperClick()}
+                      }}
+                      key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
+                  >
+                    <Icon
+                        cursor="pointer"
+                        dark={dark}
+                        icon={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
+                        size="sm"
+                    />
+                  </Body>
+              </Flex>
+            </>
+          )
+        )
+      }
     </div>
   );
 };