playbook_ui 13.25.0 → 13.26.0.pre.alpha.jasoncypretpatch12820

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/dropdown_container.html.erb

@@ -0,0 +1,15 @@
+<%= pb_content_tag(:div, style: object.container_style) do %>
+    <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
+            <% if content.present? %> 
+                <%= content.presence %>
+            <% else %> 
+                <%= pb_rails("list/item", props: {
+                    display: "flex", 
+                    justify_content: "center", 
+                    padding:"xs", 
+                    }) do %> 
+                        <%= pb_rails("body", props: {text: "No option"}) %>
+                <% end %>
+            <% end %>
+    <% end %>        
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDropdown
+    class DropdownContainer < Playbook::KitBase
+      def classname
+        generate_classname("pb_dropdown_container", "close", separator: " ")
+      end
+
+      def container_style
+        "position: absolute"
+      end
+
+      def data
+        Hash(prop(:data)).merge(dropdown_container: true)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb

@@ -0,0 +1,22 @@
+<%= pb_content_tag do %>
+    <%= pb_rails("list/item", props: {
+        display: "flex", 
+        justify_content: "center", 
+        padding:"none", 
+        cursor: "pointer"
+        }) do %> 
+            <%= pb_rails("flex", props: {
+                align: "center",
+                classname:"dropdown_option_wrapper",
+                justify: "between",
+                padding_x:"sm",
+                padding_y:"xxs",
+                }) do %>
+                <% if content.present? %>
+                    <%= content.presence %>
+                <% else %>
+                    <%= pb_rails("body", props: {text: object.option[:label]}) %>
+                <% end %>
+            <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDropdown
+    class DropdownOption < Playbook::KitBase
+      prop :option, type: Playbook::Props::String
+      prop :id, type: Playbook::Props::String
+
+      def data
+        Hash(prop(:data)).merge("dropdown_option_label": option)
+      end
+
+      def padding_helper
+        " p_xs"
+      end
+
+      def classname
+        generate_classname("pb_dropdown_option", "list") + padding_helper
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb

@@ -0,0 +1,38 @@
+<%= pb_content_tag do %>
+    <% if content.present? %>
+        <div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
+          <%= content.presence %>
+        </div>
+    <% else %>
+    <%= pb_rails("flex", props: {
+        align: "center", 
+        border_radius:"lg", 
+        classname: object.trigger_wrapper_classes, 
+        cursor: "pointer", 
+        justify: "between", 
+        padding_x:"sm", 
+        padding_y:"xs",
+        html_options: {tabindex:"0"}
+        }) do %>
+        <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("flex", props: {align: "center"}) do %>
+                <% if object.custom_display.present?  %>
+                    <%= pb_rails("flex", props: {align: "center"}) do %>
+                        <div id="dropdown_trigger_custom_display" style="display: none;"> 
+                            <%= object.custom_display %>
+                        </div>
+                        <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
+                    <% end %>
+                <% else %>
+                <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
+                <% end %>
+            <% end %>
+        <% end %>
+            <%= pb_rails("body", props: {display: "flex"}) do  %>
+                <%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm", id: "dropdown_open_icon"}) %>
+                <%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm", id: "dropdown_close_icon"}) %>
+            <% end %>
+    <% end %>
+    <% end %>
+<% end %>
+      

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDropdown
+    class DropdownTrigger < Playbook::KitBase
+      prop :options, type: Playbook::Props::Array,
+                     default: []
+      prop :id, type: Playbook::Props::String,
+                default: ""
+      prop :placeholder, type: Playbook::Props::String
+      prop :custom_display
+
+      def data
+        Hash(prop(:data)).merge(dropdown_trigger: true)
+      end
+
+      def classname
+        generate_classname("pb_dropdown_trigger")
+      end
+
+      def default_display_placeholder
+        placeholder || "Select..."
+      end
+
+      def trigger_wrapper_classes
+        generate_classname("dropdown_trigger_wrapper", "select_only")
+      end
+    end
+  end
+end

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,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/index.js

@@ -0,0 +1,152 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+import { PbDropdownKeyboard } from "./keyboard_accessibility";
+
+const DROPDOWN_SELECTOR = "[data-pb-dropdown]";
+const TRIGGER_SELECTOR = "[data-dropdown-trigger]";
+const CONTAINER_SELECTOR = "[data-dropdown-container]";
+const DOWN_ARROW_SELECTOR = "#dropdown_open_icon";
+const UP_ARROW_SELECTOR = "#dropdown_close_icon";
+const OPTION_SELECTOR = "[data-dropdown-option-label]";
+const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
+
+export default class PbDropdown extends PbEnhancedElement {
+  static get selector() {
+    return DROPDOWN_SELECTOR;
+  }
+
+  connect() {
+    this.keyboardHandler = new PbDropdownKeyboard(this);
+    this.bindEventListeners();
+    this.updateArrowDisplay(false);
+  }
+
+  bindEventListeners() {
+    const customTrigger =
+      this.element.querySelector(CUSTOM_DISPLAY_SELECTOR) || this.element;
+    customTrigger.addEventListener("click", () =>
+      this.toggleElement(this.target)
+    );
+
+    this.target.addEventListener("click", this.handleOptionClick.bind(this));
+    document.addEventListener(
+      "click",
+      this.handleDocumentClick.bind(this),
+      true
+    );
+  }
+
+  handleOptionClick(event) {
+    const option = event.target.closest(OPTION_SELECTOR);
+    if (option) {
+      const value = option.dataset.dropdownOptionLabel;
+      this.onOptionSelected(value, option);
+    }
+  }
+
+  handleDocumentClick(event) {
+    if (this.isClickOutside(event) && this.target.classList.contains("open")) {
+      this.hideElement(this.target);
+      this.updateArrowDisplay(false);
+    }
+  }
+
+  isClickOutside(event) {
+    const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
+    if (customTrigger) {
+      return !customTrigger.contains(event.target);
+    } else {
+      const triggerElement = this.element.querySelector(TRIGGER_SELECTOR);
+      const containerElement =
+        this.element.parentNode.querySelector(CONTAINER_SELECTOR);
+
+      const isOutsideTrigger = triggerElement
+        ? !triggerElement.contains(event.target)
+        : true;
+      const isOutsideContainer = containerElement
+        ? !containerElement.contains(event.target)
+        : true;
+
+      return isOutsideTrigger && isOutsideContainer;
+    }
+  }
+
+  onOptionSelected(value, selectedOption) {
+    const triggerElement = this.element.querySelector(
+      "#dropdown_trigger_display"
+    );
+    const customDisplayElement = this.element.querySelector(
+      "#dropdown_trigger_custom_display"
+    );
+    if (triggerElement) {
+      const selectedLabel = JSON.parse(value).label;
+      triggerElement.textContent = selectedLabel;
+      if (customDisplayElement) {
+        customDisplayElement.style.display = "block";
+        customDisplayElement.style.paddingRight = "8px";
+      }
+    }
+
+    const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
+    if (customTrigger) {
+      if (this.target.classList.contains("open")) {
+        this.hideElement(this.target);
+        this.updateArrowDisplay(false);
+      }
+    }
+
+    const options = this.element.querySelectorAll(OPTION_SELECTOR);
+    options.forEach((option) => {
+      option.classList.remove("pb_dropdown_option_selected");
+    });
+    selectedOption.classList.add("pb_dropdown_option_selected");
+    console.log(`Selected value: ${value}`);
+  }
+
+  get target() {
+    return this.element.parentNode.querySelector(CONTAINER_SELECTOR);
+  }
+
+  showElement(elem) {
+    elem.classList.remove("close");
+    elem.classList.add("open");
+    elem.style.height = elem.scrollHeight + "px";
+  }
+
+  hideElement(elem) {
+    elem.style.height = elem.scrollHeight + "px";
+    window.setTimeout(() => {
+      elem.classList.add("close");
+      elem.classList.remove("open");
+      this.resetFocus();
+    }, 0);
+  }
+
+  resetFocus() {
+    if (this.keyboardHandler) {
+      this.keyboardHandler.focusedOptionIndex = -1;
+      const options = this.element.querySelectorAll(OPTION_SELECTOR);
+      options.forEach((option) =>
+        option.classList.remove("pb_dropdown_option_focused")
+      );
+    }
+  }
+
+  toggleElement(elem) {
+    if (elem.classList.contains("open")) {
+      this.hideElement(elem);
+      this.updateArrowDisplay(false);
+      return;
+    }
+    this.showElement(elem);
+    this.updateArrowDisplay(true);
+  }
+
+  updateArrowDisplay(isOpen) {
+    const downArrow = this.element.querySelector(DOWN_ARROW_SELECTOR);
+    const upArrow = this.element.querySelector(UP_ARROW_SELECTOR);
+    if (downArrow && upArrow) {
+      downArrow.style.display = isOpen ? "none" : "inline-block";
+      upArrow.style.display = isOpen ? "inline-block" : "none";
+    }
+  }
+}

data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js

@@ -0,0 +1,77 @@
+const OPTION_SELECTOR = "[data-dropdown-option-label]";
+export class PbDropdownKeyboard {
+  constructor(dropdown) {
+    this.dropdown = dropdown;
+    this.dropdownElement = dropdown.element;
+    this.options = Array.from(
+      this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
+    );
+    this.focusedOptionIndex = -1;
+    this.init();
+  }
+
+  init() {
+    this.dropdownElement.addEventListener(
+      "keydown",
+      this.handleKeyDown.bind(this)
+    );
+  }
+
+  handleKeyDown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (!this.dropdown.target.classList.contains("open")) {
+          this.dropdown.showElement(this.dropdown.target);
+          this.dropdown.updateArrowDisplay(true);
+        }
+        this.moveFocus(1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.moveFocus(-1);
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (this.focusedOptionIndex !== -1) {
+          this.selectOption();
+        } else {
+          if (!this.dropdown.target.classList.contains("open")) {
+            this.dropdown.showElement(this.dropdown.target);
+            this.dropdown.updateArrowDisplay(true);
+          }
+        }
+        break;
+      case "Escape":
+        this.dropdown.hideElement(this.dropdown.target);
+        break;
+      case "Tab":
+        this.dropdown.hideElement(this.dropdown.target);
+        this.dropdown.updateArrowDisplay(false);
+        this.resetFocus();
+        break;
+      default:
+        break;
+    }
+  }
+
+  moveFocus(direction) {
+    if (this.focusedOptionIndex !== -1) {
+      this.options[this.focusedOptionIndex].classList.remove(
+        "pb_dropdown_option_focused"
+      );
+    }
+    this.focusedOptionIndex =
+      (this.focusedOptionIndex + direction + this.options.length) %
+      this.options.length;
+    this.options[this.focusedOptionIndex].classList.add(
+      "pb_dropdown_option_focused"
+    );
+  }
+
+  selectOption() {
+    const option = this.options[this.focusedOptionIndex];
+    this.dropdown.onOptionSelected(option.dataset.dropdownOptionLabel, option);
+    this.dropdown.hideElement(this.dropdown.target);
+  }
+}

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