playbook_ui 13.26.0 → 13.27.0.pre.alpha.PBNTR48phonenumberform2852

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

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag("div",
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
         <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
         <%= pb_rails("text_input", props: {

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= object.wrapper do %>
       <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
         <% if (object.template != "sort_only") %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
 
     <% if content %>

data/app/pb_kits/playbook/pb_flex/flex.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_flex/flex_item.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div,
-    style: object.style_value) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    style: object.style_value,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -16,7 +16,7 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.telephone_field :example_phone_field, props: { label: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>
   <%= form.search_field :example_search_field, props: { label: true } %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -15,7 +15,7 @@
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true } %>
-  <%= form.telephone_field :example_phone_field, props: { label: true, required: true, validation: { pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}", message: "Please enter a valid phone number (example: 888-888-8888)." } } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

data/app/pb_kits/playbook/pb_form_group/form_group.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,4 +1,4 @@
-<%= pb_content_tag(:div, class: object.classname + object.size_class) do %>
+<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
       <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>

data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:span) do %>
+<%= content_tag(:span,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= link_to object.url, target: object.link_option do %>
     <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %>
   <% end %>

data/app/pb_kits/playbook/pb_highlight/highlight.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:span) do %>
+<%= content_tag(:span,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <mark>
       <%= content.presence || object.text %>
     </mark>

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("home_address_street/#{emphasis}_emphasis", props: object.send("#{emphasis}_emphasis_props")) %>
 <% end %>
 

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag do %>
-  <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
+    <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
 <% end %>

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
 
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,

data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+  aria: object.aria,
+  class: object.classname,
+  data: object.data,
+  id: object.id,
+  **combined_html_options) do %>
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
     <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true }) %>
     <%= object.text %>

data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
       <%= pb_rails("caption", props: { text: object.label, classname: "pb_label_pill_label"}) %>
       <%= pb_rails("pill", props: { text: object.pill_value, variant: object.variant, classname: "pb_label_pill_pill" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_label_value/label_value.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     <% if object.variant == "details" %>
         <%= pb_rails("flex", props: {inline: true, vertical: "center"}) do %>

data/app/pb_kits/playbook/pb_layout/body.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag(object.tag) do %>
+<%= content_tag(object.tag,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/footer.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag(object.tag) do %>
+<%= content_tag(object.tag,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/header.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag(object.tag) do %>
+<%= content_tag(object.tag,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/item.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/layout.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_layout/sidebar.html.erb

@@ -1,3 +1,7 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_list/item.html.erb

@@ -1,4 +1,10 @@
-<%= pb_content_tag(:li,
-                   tabindex: object.tabindex) do %>
+<%= content_tag(:li,
+                aria: object.aria,
+                class: object.classname,
+                data: object.data,
+                id: object.id,
+                tabindex: object.tabindex,
+                **combined_html_options
+  ) do %>
     <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_list/list.html.erb

@@ -1,7 +1,13 @@
 <%= content_tag(:div, class: object.list_classname) do %>
-  <%= pb_content_tag(:"#{object.ordered_class}",
+  <%= content_tag(:"#{object.ordered_class}",
+                  aria: object.aria,
+                  class: object.classname,
+                  data: object.data,
+                  id: object.id,
                   role: object.role,
-                  tabindex: object.tabindex) do %>
+                  tabindex: object.tabindex,
+                  **combined_html_options
+    ) do %>
       <%= content.presence %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -14,6 +14,7 @@ type LoadingInlineProps = {
   data?: { [key: string]: string },
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  text?: string,
 }
 
 const LoadingInline = (props: LoadingInlineProps) => {
@@ -24,6 +25,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     data = {},
     htmlOptions = {},
     id,
+    text = ' Loading',
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -50,7 +52,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
             icon="spinner"
             pulse
         />
-        {' Loading'}
+        {text}
       </Body>
     </div>
   )

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("loading_inline", props: {
+    text: "Saving"
+}) %> 
+
+<%= pb_rails("loading_inline", props: {
+    align: "center",
+    text: "Saving"
+}) %> 
+
+<%= pb_rails("loading_inline", props: {
+    align: "right",
+    text: "Saving",
+}) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import LoadingInline from '../_loading_inline'
+
+const LoadingInlineCustom = (props) => {
+  return (
+    <div>
+      <LoadingInline
+          text=' Saving'
+          {...props}
+      />
+      <LoadingInline
+          align="center"
+          text=' Saving'      
+          {...props}
+      />
+      <LoadingInline
+          align="right"
+          text=' Saving'
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default LoadingInlineCustom

data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.html.erb → _loading_inline_default.html.erb}

@@ -1,9 +1,9 @@
 <%= pb_rails("loading_inline") %>
 
 <%= pb_rails("loading_inline", props: {
-	align: "center"
+    align: "center"
 }) %>
 
 <%= pb_rails("loading_inline", props: {
-	align: "right"
+    align: "right"
 }) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.jsx → _loading_inline_default.jsx}

@@ -2,7 +2,7 @@ import React from 'react'
 
 import LoadingInline from '../_loading_inline'
 
-const LoadingInlineLight = (props) => {
+const LoadingInlineDefault = (props) => {
   return (
     <div>
       <LoadingInline
@@ -20,4 +20,4 @@ const LoadingInlineLight = (props) => {
   )
 }
 
-export default LoadingInlineLight
+export default LoadingInlineDefault

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

@@ -1,9 +1,11 @@
 examples:
   
   rails:
-  - loading_inline_light: Light
+  - loading_inline_default: Default
+  - loading_inline_custom: Custom Text
 
   
   
   react:
-  - loading_inline_light: Default
+  - loading_inline_default: Default
+  - loading_inline_custom: Custom Text

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

@@ -1 +1,2 @@
-export { default as LoadingInlineLight } from './_loading_inline_light.jsx'
+export { default as LoadingInlineDefault } from './_loading_inline_default.jsx'
+export { default as LoadingInlineCustom } from './_loading_inline_custom.jsx'

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -1,5 +1,10 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
+
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
-    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> Loading
+    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> <%= object.text %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb

@@ -7,6 +7,7 @@ module Playbook
                    values: %w[left center right],
                    default: "left"
       prop :dark, type: Playbook::Props::Boolean, default: false
+      prop :text, type: Playbook::Props::String, default: "Loading"
 
       def classname
         generate_classname("pb_loading_inline_kit", align)