playbook_ui 13.25.0.pre.alpha.PBNTR272Dropdownkitv42769 → 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb

@@ -0,0 +1,60 @@
+<% 
+  options = [
+    {
+      label: "Jasper Furniss",
+      value: "Jasper Furniss",
+      territory: "PHL",
+      title: "Senior UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
+    },
+    {
+      label: "Ramon Ruiz",
+      value: "Ramon Ruiz",
+      territory: "PHL",
+      title: "Senior UX Designer",
+      id: "ramon-ruiz",
+      status: "Away"
+    },
+    {
+      label: "Jason Cypret",
+      value: "Jason Cypret",
+      territory: "PHL",
+      title: "VP of User Experience",
+      id: "jason-cypret",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "Courtney Long",
+      territory: "PHL",
+      title: "UX Design Mentor",
+      id: "courtney-long",
+      status: "Online"
+    }
+  ]
+
+%>
+
+<%
+  custom_display = capture do
+    pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
+  end
+%>
+
+
+<%= pb_rails("dropdown", props: {options: options}) do %>
+    <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Select a User", custom_display: custom_display}) %>
+    <%= pb_rails("dropdown/dropdown_container") do %>
+        <% options.each do |option| %>
+            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
+                <% end %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

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

@@ -17,7 +17,7 @@ const DropdownWithCustomDisplay = (props) => {
       label: "Ramon Ruiz",
       value: "Ramon Ruiz",
       territory: "PHL",
-      title: "Senior UX Desinger",
+      title: "Senior UX Designer",
       id: "ramon-ruiz",
       status: "Away"
     },

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

@@ -2,4 +2,4 @@ The `customDisplay` prop can be used to customize the display of the selected it
 
 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`.
+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.html.erb

@@ -0,0 +1,45 @@
+<% 
+  options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "us"
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+      areaCode: "+1",
+      icon: "🇨🇦",
+      id: "ca"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pk"
+    }
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options}) do %>
+    <%= pb_rails("dropdown/dropdown_trigger") %>
+    <%= pb_rails("dropdown/dropdown_container") do %>
+        <% options.each do |option| %>
+            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("flex") do %>
+                        <%= pb_rails("icon", props: {icon: option[:icon]}) %>
+                        <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
+                    <% end %>
+                <% end %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

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

@@ -0,0 +1,17 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options}) do %>
+    <%= pb_rails("dropdown/dropdown_trigger") %>
+    <%= pb_rails("dropdown/dropdown_container") do %>
+        <% options.each do |option| %>
+            <%= pb_rails("dropdown/dropdown_option", props: {option: option, padding:"sm"}) %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb

@@ -0,0 +1,47 @@
+<% 
+  options = [
+    {
+      label: "United States",
+      value: "United States",
+      areaCode: "+1",
+      icon: "🇺🇸",
+      id: "us"
+    },
+    {
+      label: "Canada",
+      value: "Canada",
+      areaCode: "+1",
+      icon: "🇨🇦",
+      id: "ca"
+    },
+    {
+      label: "Pakistan",
+      value: "Pakistan",
+      areaCode: "+92",
+      icon: "🇵🇰",
+      id: "pk"
+    }
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options}) do %>
+    <%= pb_rails("dropdown/dropdown_trigger") do %>
+        <%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
+    <% end %>
+    <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs"}) do %>
+        <% options.each do |option| %>
+            <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("flex") do %>
+                        <%= pb_rails("icon", props: {icon: option[:icon]}) %>
+                        <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
+                    <% end %>
+                <% end %>
+                <%= pb_rails("flex/flex_item") do %>
+                    <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

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

@@ -1,9 +1,7 @@
-import React, { useState } from 'react'
+import React 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 = [
@@ -45,7 +43,6 @@ const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
 
     <Dropdown
         isClosed={isDropDownClosed}
-        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         {...props}
     >

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

@@ -1,9 +1,7 @@
-import React, { useState, useRef } from 'react'
+import React, { 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);
 
@@ -41,7 +39,6 @@ const buttonRef = useRef(null);
       />
     <Dropdown
         isClosed={isDropDownClosed}
-        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
         options={options}
         triggerRef={buttonRef}
         {...props}

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {options: options, label: "Select a Country"}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/example.yml

@@ -1,8 +1,16 @@
 examples:
-  
-  
+  rails:
+  - 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_custom_padding: Custom Padding for Dropdown Options
+
   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

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

@@ -8,3 +8,4 @@ export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_pa
 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.html.erb

@@ -0,0 +1,21 @@
+<%= pb_content_tag do %>
+    <% if object.label.present? %>
+        <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
+    <% end %>
+    <div class="dropdown_wrapper" style="position: relative">
+    <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value=""/>
+    <% if content.present? %>
+        <%= content.presence %>
+    <% else %>
+        <%= pb_rails("dropdown/dropdown_trigger") %>
+        <%= pb_rails("dropdown/dropdown_container") do %>
+            <% if object.options.present? %>
+                <% object.options.each do |option| %>
+                    <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
+                <% end %>
+            <% end %>
+        <% end %>
+    <% end %>
+    </div>
+<% end %>
+  

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDropdown
+    class Dropdown < Playbook::KitBase
+      prop :options, type: Playbook::Props::Array,
+                     default: []
+      prop :label, type: Playbook::Props::String
+      prop :name, type: Playbook::Props::String
+
+      def data
+        Hash(prop(:data)).merge(pb_dropdown: true)
+      end
+
+      def classname
+        generate_classname("pb_dropdown")
+      end
+    end
+  end
+end

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

@@ -72,7 +72,7 @@ test('generated Options', () => {
   render(<DefaultDropdownKit/>)
 
   const kit = screen.getByTestId(testId)
-  const option = kit.querySelector('.pb_dropdown_option')
+  const option = kit.querySelector('.pb_dropdown_option_list')
   expect(option).toBeInTheDocument()
 })
 
@@ -201,7 +201,7 @@ test('selected option on click', () => {
   )
 
   const kit = screen.getByTestId(testId)
-  const option = kit.querySelector('.pb_dropdown_option')
+  const option = kit.querySelector('.pb_dropdown_option_list')
   option.click()
-  expect(option).toHaveClass('pb_dropdown_option dropdown_option_selected p_xs')
+  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(:div, id:object.option[:id]) 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/index.js

@@ -0,0 +1,154 @@
+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);
+    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
+    if (option) {
+      const value = option.dataset.dropdownOptionLabel;
+      hiddenInput.value = JSON.parse(value).id;
+      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";
+    }
+  }
+}