playbook_ui 13.25.0.pre.alpha.barchartfix2766 → 13.26.0

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md

@@ -0,0 +1 @@
+The Dropdown kit accepts an `options` array and renders each object from that array as a selectable option within a dropdown container. `options` is a required prop and must be an array of objects. Each object can contain as many key/value pairs as needed but MUST contain 'label' and 'value' as the only required items within each object.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx

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

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md

@@ -0,0 +1,7 @@
+The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
+
+`Dropdown. Trigger`
+`Dropdown.Container`
+`Dropdown.Option`
+
+See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props. 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx

@@ -1,9 +1,7 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { Dropdown, User, Badge, FlexItem } from '../..'
 
 const DropdownWithAutocomplete = (props) => {
-// eslint-disable-next-line no-unused-vars
-  const [selectedOption, setSelectedOption] = useState();
 
   const options = [
     {
@@ -44,7 +42,6 @@ const DropdownWithAutocomplete = (props) => {
   return (
   <div>
     <Dropdown autocomplete
-        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx

@@ -2,7 +2,6 @@ import React, { useState } from 'react'
 import { Dropdown, User, Badge, FlexItem, Avatar } from '../..'
 
 const DropdownWithAutocompleteAndCustomDisplay = (props) => {
-// eslint-disable-next-line no-unused-vars
   const [selectedOption, setSelectedOption] = useState();
 
   const options = [

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx

@@ -81,7 +81,7 @@ const DropdownWithCustomDisplay = (props) => {
                 />
               </FlexItem>
               <FlexItem>
-                <Badge
+                <Badge dark
                     rounded
                     text={option.status}
                     variant={`${

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md

@@ -1,3 +1,5 @@
 The `customDisplay` prop can be used to customize the display of the selected item by allowing devs to pass in a component that will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
 
-The `placeholder` prop can also be used to customize the placeholder text for the default Trigger. 
+The `placeholder` prop can also be used to customize the placeholder text for the default Trigger. 
+
+The `onSelect` prop is a function that gives the dev one argument: the selected option. In this example we are using the `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.

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

@@ -1,9 +1,7 @@
-import React, { useState } from 'react'
+import React 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 = [
     {
@@ -33,7 +31,6 @@ const DropdownWithCustomOptions = (props) => {
   return (
   <div>
     <Dropdown
-        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md

@@ -1 +1 @@
-The Dropdown also allows for custom options that can be passed in as children to the `Dropdown.Option` subcomponent. If no children are passed in the `Dropdown.Option`, the kit will render each option as text by default. 
+The Dropdown also allows for custom options that can be passed in as children to the `Dropdown.Option` subcomponent. If no children are passed to `Dropdown.Option`, the kit will render each option as text within a Body kit by default. 

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

@@ -1,9 +1,7 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { Dropdown } from '../..'
 
 const DropdownWithCustomPadding = (props) => {
-// eslint-disable-next-line no-unused-vars
-const [selectedOption, setSelectedOption] = useState();
 
   const options = [
     {
@@ -33,7 +31,6 @@ const [selectedOption, setSelectedOption] = useState();
   return (
   <div>
     <Dropdown
-        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >

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

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

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

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

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

@@ -3,10 +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_autocomplete: Autocomplete
-  - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   - 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

@@ -4,4 +4,8 @@ export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_op
 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 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

@@ -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;
+    }
+  }