playbook_ui 13.26.0.pre.alpha.jasoncypretpatch12820 → 13.26.0

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

@@ -1,60 +0,0 @@
-<% 
-  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_options.html.erb

@@ -1,45 +0,0 @@
-<% 
-  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"
-    }
-  ]
-
-%>
-
-<%= 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_padding.html.erb

@@ -1,17 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'United States' },
-    { label: 'Canada', value: 'Canada' },
-    { label: 'Pakistan', value: 'Pakistan' },
-  ]
-
-%>
-
-<%= 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

@@ -1,47 +0,0 @@
-<% 
-  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"
-    }
-  ]
-
-%>
-
-<%= 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_label.html.erb

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

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

@@ -1,20 +0,0 @@
-<%= 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">
-    <% 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

@@ -1,19 +0,0 @@
-# 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
-
-      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_container.html.erb

@@ -1,15 +0,0 @@
-<%= 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

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

@@ -1,22 +0,0 @@
-<%= 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

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

@@ -1,38 +0,0 @@
-<%= 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

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

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

@@ -1,77 +0,0 @@
-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_loading_inline/docs/_loading_inline_custom.html.erb

@@ -1,13 +0,0 @@
-<%= 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

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