RubyGems - playbook_ui - Versions diffs - 13.24.0 → 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812 - Mend

playbook_ui 13.24.0 → 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812

Files changed (245) hide show

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

@@ -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.html.erb ADDED Viewed

@@ -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/_dropdown_with_label.jsx ADDED Viewed

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

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

@@ -0,0 +1,23 @@
+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
+  - dropdown_with_custom_trigger: Custom Trigger
+  - 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 ADDED Viewed

@@ -0,0 +1,11 @@
+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'
+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 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 ADDED Viewed

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

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

@@ -0,0 +1,207 @@
+import React from "react"
+import { render, screen } from "../utilities/test-utils"
+import { Dropdown, Icon } from '../'
+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>
+  )
+}
+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 ADDED Viewed

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+import {useState} from 'react';
+const useDropdown = (initial= true) => {
+const [isDropDownClosed, setIsDropDownClosed] = useState(initial);
+const toggleDropdown = () => setIsDropDownClosed((prev) => !prev);
+return [
+    isDropDownClosed,
+    setIsDropDownClosed as any,
+    toggleDropdown
+]
+}
+export default useDropdown

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

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