playbook_ui 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795 → 14.15.0.pre.rc.0

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.html.erb

@@ -1,39 +0,0 @@
-<%= pb_rails("date_picker", props: {
-  label: "Date Picker",
-  picker_id: "date-picker-onchange",
-  margin_bottom: "lg"
-}) %>
-<%= pb_rails("caption", props: { text: "Date Object" }) %>
-<%= pb_rails("body", props: {
-  label: "Date Object",
-  text: "Select Date",
-  margin_bottom: "lg",
-  id: "date-picker-onchange-object",
-}) %>
-<%= pb_rails("caption", props: { text: "Date String" }) %>
-<%= pb_rails("body", props: {
-  label: "Date String",
-  text: "Select Date",
-  margin_bottom: "lg",
-  id: "date-picker-onchange-string",
-}) %>
-
-
-<%= javascript_tag do %>
-  window.addEventListener("DOMContentLoaded", () => {
-    <%# Access flatpickr instance with picker id and assign it a variable %>
-    const fp = document.querySelector("#date-picker-onchange")._flatpickr
-
-    <%# Define Hook %>
-    const changeHook = (selectedDates, dateStr) => {
-      const object = document.querySelector('#date-picker-onchange-object')
-      object.textContent = selectedDates[0] ? selectedDates[0].toString() : ''
-
-      const string = document.querySelector('#date-picker-onchange-string')
-      string.textContent = dateStr
-    }
-    
-    <%# Push one or more hooks to onChange config array %>
-    fp.config.onChange.push(changeHook)
-  })
-<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb

@@ -1,39 +0,0 @@
-<%= pb_rails("date_picker", props: {
-  label: "Date Picker",
-  picker_id: "date-picker-onclose",
-  margin_bottom: "lg"
-}) %>
-<%= pb_rails("caption", props: { text: "Date Object" }) %>
-<%= pb_rails("body", props: {
-  label: "Date Object",
-  text: "Select Date",
-  margin_bottom: "lg",
-  id: "date-picker-onclose-object",
-}) %>
-<%= pb_rails("caption", props: { text: "Date String" }) %>
-<%= pb_rails("body", props: {
-  label: "Date String",
-  text: "Select Date",
-  margin_bottom: "lg",
-  id: "date-picker-onclose-string",
-}) %>
-
-
-<%= javascript_tag do %>
-  window.addEventListener("DOMContentLoaded", () => {
-    <%# Access flatpickr instance with picker id and assign it a variable %>
-    const fp = document.querySelector("#date-picker-onclose")._flatpickr
-
-    <%# Define Hook %>
-    const closeHook = (selectedDates, dateStr) => {
-      const object = document.querySelector('#date-picker-onclose-object')
-      object.textContent = selectedDates[0] ? selectedDates[0].toString() : ''
-
-      const string = document.querySelector('#date-picker-onclose-string')
-      string.textContent = dateStr
-    }
-    
-    <%# Push one or more hooks to onClose config array %>
-    fp.config.onClose.push(closeHook)
-  })
-<% end %>

data/app/pb_kits/playbook/pb_date_picker/index.ts

@@ -1,38 +0,0 @@
-import PbEnhancedElement from "../pb_enhanced_element";
-
-const DATE_PICKER_WRAPPER_SELECTOR = '[data-pb-date-picker]';
-const SELECT_VALIDATION_MESSAGE_CLASS = '.pb_body_kit_negative';
-
-export default class PbDatePicker extends PbEnhancedElement {
-  static get selector() {
-    return DATE_PICKER_WRAPPER_SELECTOR;
-  }
-
-  connect() {
-    this.setValidationMessage();
-  }
-
-  setValidationMessage() {
-    const validationMessage = this.element.dataset?.validationMessage;
-    const inputElement = this.element.querySelector("input");
-
-    if (validationMessage) {
-      const setErrorTextContent = (text, timeout) => {
-        setTimeout(() => {
-          const errorMessageElement = this.element.querySelector(SELECT_VALIDATION_MESSAGE_CLASS);
-          if (errorMessageElement) {
-            errorMessageElement.textContent = text;
-          } else {
-            setErrorTextContent(text, 100);
-          }
-        }, timeout);
-      };
-
-      inputElement.addEventListener("change", (e) => {
-        if (!e.target.checkValidity()) {
-          setErrorTextContent(validationMessage, 300);
-        }
-      });
-    }
-  }
-}

data/app/pb_kits/playbook/pb_dialog/index.js

@@ -1,75 +0,0 @@
-import PbEnhancedElement from "../pb_enhanced_element";
-
-const DIALOG_WRAPPER_SELECTOR = "[data-pb-dialog-wrapper]";
-
-export default class PbDialog extends PbEnhancedElement {
-  static get selector() {
-    return DIALOG_WRAPPER_SELECTOR;
-  }
-
-  connect() {
-    window.addEventListener("DOMContentLoaded", () => this.setupDialog())
-    window.addEventListener("turbo:frame-load", () => this.setupDialog())
-  }
-
-  setupDialog() {
-    const openTrigger = document.querySelectorAll("[data-open-dialog]");
-    const closeTrigger = document.querySelectorAll("[data-close-dialog]");
-    const dialogs = document.querySelectorAll(".pb_dialog_rails")
-
-    const loadingButton = document.querySelector('[data-disable-with="Loading"]');
-    if (loadingButton) {
-      loadingButton.addEventListener("click", function () {
-        const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
-        const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
-        let currentClass = okayLoadingButton.className;
-        let cancelClass = cancelButton ? cancelButton.className : "";
-
-        let newClass = currentClass.replace("_enabled", "_disabled_loading");
-        let newCancelClass = cancelClass.replace("_enabled", "_disabled");
-
-        // Disable the buttons
-        okayLoadingButton.disabled = true;
-        if (cancelButton) cancelButton.disabled = true;
-
-        okayLoadingButton.className = newClass;
-        if (cancelButton) cancelButton.className = newCancelClass;
-      });
-    }
-
-    openTrigger.forEach((open) => {
-      open.addEventListener("click", () => {
-        var openTriggerData = open.dataset.openDialog;
-        var targetDialog = document.getElementById(openTriggerData)
-        if (targetDialog.open) return;
-        targetDialog.showModal();
-      });
-    });
-
-    closeTrigger.forEach((close) => {
-      close.addEventListener("click", () => {
-        var closeTriggerData = close.dataset.closeDialog;
-        document.getElementById(closeTriggerData).close();
-      });
-    });
-
-    // Close dialog box on outside click
-    dialogs.forEach((dialogElement) => {
-      dialogElement.addEventListener("mousedown", (event) => {
-        const dialogParentDataset = dialogElement.parentElement.dataset
-        if (dialogParentDataset.overlayClick === "overlay_close") return
-
-        const dialogModal = event.target.getBoundingClientRect()
-        const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
-          event.clientX > dialogModal.right ||
-          event.clientY < dialogModal.top ||
-          event.clientY > dialogModal.bottom
-
-        if (clickedOutsideDialogModal) {
-          dialogElement.close()
-          event.stopPropagation()
-        }
-      })
-    })
-  }
-}

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb

@@ -1,8 +0,0 @@
-<%= pb_rails("button", props: { text: "Push Drawer", margin_right: "sm", data: {"open-drawer": "drawer-3"} }) %>
-
-<%= pb_rails("drawer", props: { 
-    id:"drawer-3", 
-    behavior: "push"
-}) do  %>
-    Test me (Push Behavior)
-<% end %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb

@@ -1,33 +0,0 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "Drawer with border right", margin_right: "sm", data: {"open-drawer": "drawer-12"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-12", 
-        overlay: false,
-        border: "right"
-    }) do  %>
-        Test me (Border Right)
-    <% end %>
-    
-    
-    <%= pb_rails("button", props: { text: "Drawer with border left", margin_right: "sm", data: {"open-drawer": "drawer-13"} }) %>
-    
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-13", 
-        overlay: false,
-        border: "left"
-    }) do  %>
-        Test me (Border Left)
-    <% end %>
-
-    <%= pb_rails("button", props: { text: "Drawer with border full", data: {"open-drawer": "drawer-14"} }) %>
-    
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-14", 
-        overlay: false,
-        border: "full"
-    }) do  %>
-        Test me (Border Full)
-    <% end %>
-<% end %>
-

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb

@@ -1,3 +0,0 @@
-
-<%= pb_rails("body", props: { text: " The breakpoint prop determines when the Drawer is always visible. Above the specified breakpoint, the Drawer remains open on the page. Below it, only the trigger element is shown, allowing you to toggle the drawer open and closed. To see this in action, click the button below and resize your window.", padding_bottom: "md" }) %>
-<%= pb_rails("button", props: { text: "Open Doc Example in New Tab", new_window: true, link: "/drawer_page", margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb

@@ -1,24 +0,0 @@
-<%= pb_rails("button", props: { padding: "xs", margin_right: "sm", data: {"open-drawer": "drawer-4"} }) do %>
-    <%= pb_rails("icon", props: { icon: "bars", size: "2x" }) %>
-<% end %>
-
-<%= pb_rails("drawer", props: { 
-    id:"drawer-4", 
-    within_element: true,
-    placement: "bottom",
-    breakpoint: "md",
-    size: "full"
-}) do  %>
-    <%= pb_rails("nav", props: { display: {xl: "none", lg: "none", md: "none", sm: "block" } }) do %>
-        <%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
-        <%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
-        <%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
-        <%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
-    <% end %>
-    <%= pb_rails("nav", props: { display: {md: "block", sm: "none", xs: "none" }, orientation: "horizontal" }) do %>
-        <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
-        <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
-        <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
-        <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb

@@ -1,21 +0,0 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "No Overlay Drawer", margin_right: "sm", data: {"open-drawer": "drawer-10"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-10", 
-        overlay: false
-    }) do  %>
-        Test me (No Overlay)
-    <% end %>
-    
-    
-    <%= pb_rails("button", props: { text: "Overlay Drawer", data: {"open-drawer": "drawer-11"} }) %>
-    
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-11", 
-        placement: "right"
-    }) do  %>
-        Test me (Has Overlay)
-    <% end %>
-<% end %>
-

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md

@@ -1 +0,0 @@
-Click the button to close the drawer when there is no overlay.

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb

@@ -1,49 +0,0 @@
-<%= pb_rails("flex") do %>
-    <%= pb_rails("button", props: { text: "XS Drawer", margin_right: "sm", data: {"open-drawer": "drawer-5"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-5", 
-        size: "xs"
-    }) do  %>
-        XS 
-    <% end %>
-    
-    <%= pb_rails("button", props: { text: "SM Drawer", margin_right: "sm", data: {"open-drawer": "drawer-6"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-6", 
-        size: "sm",
-        placement: "right"
-    }) do  %>
-        This is a small drawer 
-    <% end %>
-
-    <%= pb_rails("button", props: { text: "MD Drawer", margin_right: "sm", data: {"open-drawer": "drawer-7"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-7", 
-        size: "md"
-    }) do  %>
-        This is a medium drawer 
-    <% end %>
-
-    <%= pb_rails("button", props: { text: "LG Drawer", margin_right: "sm", data: {"open-drawer": "drawer-8"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-8", 
-        size: "lg",
-        placement: "right"
-    }) do  %>
-        This is a large drawer 
-    <% end %>
-
-    <%= pb_rails("button", props: { text: "XL Drawer", margin_right: "sm", data: {"open-drawer": "drawer-9"} }) %>
-
-    <%= pb_rails("drawer", props: { 
-        id:"drawer-9", 
-        size: "xl"
-    }) do  %>
-        This is an extra large drawer 
-    <% end %>
-<% end %>
-

data/app/pb_kits/playbook/pb_drawer/index.js

@@ -1,257 +0,0 @@
-import PbEnhancedElement from "../pb_enhanced_element"
-
-export default class PbDrawer extends PbEnhancedElement {
-  static get selector() {
-    return ".pb_drawer_wrapper"
-  }
-
-  connect() {
-    this.handleToggleClick = this.handleToggleClick.bind(this)
-    this.handleOutsideClick = this.handleOutsideClick.bind(this)
-    this.handleResize = this.handleResize.bind(this)
-
-    this._toggleTriggers = Array.from(document.querySelectorAll("[data-open-drawer]"))
-    this._toggleTriggers.forEach(el => {
-      el.addEventListener("click", this.handleToggleClick)
-    })
-
-    this._wrappers = Array.from(document.querySelectorAll(".pb_drawer_wrapper"))
-    this._wrappers.forEach(el => {
-      el.addEventListener("mousedown", this.handleOutsideClick)
-    })
-
-    this._withinElementDrawers = Array.from(
-      document.querySelectorAll(".pb_drawer_within_element_rails[data-breakpoint]")
-    )
-
-    window.addEventListener("resize", this.handleResize)
-    this.handleResize()
-  }
-
-  disconnect() {
-    this._toggleTriggers.forEach(el => {
-      el.removeEventListener("click", this.handleToggleClick)
-    })
-    this._wrappers.forEach(el => {
-      el.removeEventListener("mousedown", this.handleOutsideClick)
-    })
-    window.removeEventListener("resize", this.handleResize)
-  }
-
-  getOverlay(wrapper) {
-    if (wrapper.id && wrapper.id.startsWith("drawer-wrapper-")) {
-      const overlayId = wrapper.id.replace("drawer-wrapper-", "drawer-overlay-")
-      return document.getElementById(overlayId)
-    }
-    return wrapper.querySelector(".pb_drawer_overlay") || wrapper.querySelector(".pb_drawer_no_overlay")
-  }
-
-  handleToggleClick(event) {
-    const trigger = event.currentTarget
-    const drawerId = trigger.dataset.openDrawer
-    const dialog = document.getElementById(drawerId)
-    if (!dialog) return
-
-    if (dialog.classList.contains("pb_drawer_within_element_rails")) {
-      if (dialog.classList.contains("open")) {
-        this.closeWithinElementDrawer(dialog)
-        dialog.dataset.manualOpen = "false"
-      } else {
-        this.openWithinElementDrawer(dialog)
-        dialog.dataset.manualOpen = "true"
-      }
-      return
-    }
-
-    const wrapperId = `drawer-wrapper-${drawerId}`
-    const wrapper = document.getElementById(wrapperId)
-    if (!wrapper) return
-
-    if (wrapper !== this.element) return
-
-    if (wrapper.classList.contains("open")) {
-      this.closeDrawer(wrapper, dialog)
-      wrapper.dataset.manualOpen = "false"
-    } else {
-      this.openDrawer(wrapper, dialog)
-      wrapper.dataset.manualOpen = "true"
-    }
-  }
-
-  openWithinElementDrawer(dialog) {
-    if (dialog.classList.contains("open")) return
-    dialog.style.maxHeight = "0px"
-    dialog.offsetHeight
-    dialog.classList.add("open")
-    // Get trigger's height and add it to the final height
-    const trigger = document.querySelector(`[data-open-drawer="${dialog.id}"]`)
-    const triggerHeight = trigger ? trigger.offsetHeight : 0
-    const finalHeight = (dialog.scrollHeight + triggerHeight) + "px"
-    dialog.style.maxHeight = finalHeight
-    dialog.addEventListener("transitionend", function handleOpenEnd(e) {
-      if (e.propertyName === "max-height") {
-        dialog.style.maxHeight = "none"
-        dialog.removeEventListener("transitionend", handleOpenEnd)
-      }
-    })
-  }
-
-  closeWithinElementDrawer(dialog) {
-    if (!dialog.classList.contains("open")) return
-    const currentHeight = dialog.scrollHeight
-    dialog.style.maxHeight = currentHeight + "px"
-    dialog.offsetHeight
-    dialog.classList.remove("open")
-    dialog.style.maxHeight = "0px"
-    dialog.addEventListener("transitionend", function handleCloseEnd(e) {
-      if (e.propertyName === "max-height") {
-        dialog.removeEventListener("transitionend", handleCloseEnd)
-        dialog.style.maxHeight = "0px"
-      }
-    })
-  }
-
-  openDrawer(wrapper, dialog) {
-    const behavior = wrapper.dataset.behavior
-    const size = wrapper.dataset.size
-    const placement = wrapper.dataset.placement
-    this.handlePushOpen(behavior, size, placement)
-
-    wrapper.style.display = ""
-    const overlay = this.getOverlay(wrapper)
-    if (overlay) overlay.style.display = ""
-
-    wrapper.classList.add("open")
-    dialog.classList.add("open")
-  }
-
-  closeDrawer(wrapper, dialog) {
-    const behavior = wrapper.dataset.behavior
-    this.handlePushClose(behavior)
-
-    if (wrapper.className.includes("open")) wrapper.style.display = "none"
-    const overlay = this.getOverlay(wrapper)
-    if (overlay && wrapper.className.includes("open")) overlay.style.display = "none"
-
-    wrapper.classList.remove("open")
-    dialog.classList.remove("open")
-  }
-
-  handleOutsideClick(event) {
-    const wrapper = event.currentTarget
-    const dialog = wrapper.querySelector(".pb_drawer")
-    const overlay = this.getOverlay(wrapper)
-
-    if (dialog && dialog.classList.contains("pb_drawer_within_element_rails")) {
-      return
-    }
-
-    if (wrapper.dataset.overlayClick === "overlay_close" && event.target === overlay) {
-      this.closeDrawer(wrapper, dialog)
-      event.stopPropagation()
-      return
-    }
-
-    const dialogRect = dialog.getBoundingClientRect()
-    const clickedOutside =
-      event.clientX < dialogRect.left ||
-      event.clientX > dialogRect.right ||
-      event.clientY < dialogRect.top ||
-      event.clientY > dialogRect.bottom
-
-    if (clickedOutside) {
-      this.closeDrawer(wrapper, dialog)
-      event.stopPropagation()
-    }
-  }
-
-  handleResize() {
-    const breakpointValues = {
-      none: 0,
-      xs: 575,
-      sm: 768,
-      md: 992,
-      lg: 1200,
-      xl: 1400,
-    }
-
-    // Process wrappers
-    this._wrappers.forEach(wrapper => {
-      const bp = wrapper.dataset.breakpoint || "none"
-      if (bp === "none") return
-
-      const threshold = breakpointValues[bp] || 0
-      const dialog = wrapper.querySelector(".pb_drawer")
-      const trigger = dialog ? document.querySelector(`[data-open-drawer="${dialog.id}"]`) : null
-
-      if (window.innerWidth >= threshold) {
-        if (!wrapper.classList.contains("open")) {
-          this.openDrawer(wrapper, dialog)
-        }
-        if (trigger) trigger.style.display = "none"
-      } else {
-        if (trigger) trigger.style.display = ""
-        if (wrapper.classList.contains("open") && wrapper.dataset.manualOpen !== "true") {
-          this.closeDrawer(wrapper, dialog)
-        }
-      }
-    })
-
-    // Process within element drawers
-    this._withinElementDrawers.forEach(drawer => {
-      const bp = drawer.dataset.breakpoint || "none"
-      if (bp === "none") return
-
-      const threshold = breakpointValues[bp] || 0
-      const trigger = document.querySelector(`[data-open-drawer="${drawer.id}"]`)
-
-      if (window.innerWidth >= threshold) {
-        if (!drawer.classList.contains("open")) {
-          this.openWithinElementDrawer(drawer)
-        }
-        if (trigger) trigger.style.display = "none"
-      } else {
-        if (trigger) trigger.style.display = ""
-        if (drawer.classList.contains("open") && drawer.dataset.manualOpen !== "true") {
-          this.closeWithinElementDrawer(drawer)
-        }
-      }
-    })
-  }
-
-  handlePushOpen(behavior, size, placement) {
-    if (behavior !== "push") return
-
-    const sizeMap = {
-      xl: "365px",
-      lg: "300px",
-      md: "250px",
-      sm: "200px",
-      xs: "64px",
-      full: "100%",
-    }
-
-    const body = document.querySelector("body")
-    if (!body) return
-
-    if (placement === "left") {
-      body.style.cssText = `margin-left: ${sizeMap[size]} !important; margin-right: '' !important;`
-    } else if (placement === "right") {
-      body.style.cssText = `margin-right: ${sizeMap[size]} !important; margin-left: '' !important;`
-    }
-    body.classList.add("PBDrawer__Body--open")
-  }
-
-  handlePushClose(behavior) {
-    if (behavior !== "push") return
-
-    const body = document.querySelector("body")
-    if (!body) return
-
-    if (body.classList.contains("PBDrawer__Body--open")) {
-      body.classList.add("PBDrawer__Body--close")
-    }
-    body.style.cssText = ""
-    body.classList.remove("PBDrawer__Body--open")
-  }
-}

data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss

@@ -1,38 +0,0 @@
-.pb_empty_state_kit {
-
-  .sm-state-vertical {
-    width: 150px;
-  }
-
-  .md-state-vertical {
-    width: 300px;
-  }
-
-  .lg-state-vertical {
-    width: 450px;
-  }
-
-  .sm-state-horizontal {
-    width: max-content;
-    max-width: 400px;
-    .pb_flex_item_kit {
-      align-self: end;
-    }
-  }
-
-  .md-state-horizontal {
-    width: max-content;
-    max-width: 600px;
-    .pb_flex_item_kit {
-      align-self: end;
-    }
-  }
-
-  .lg-state-horizontal {
-    width: max-content;
-    .pb_flex_item_kit {
-      align-self: end;
-    }
-  }
-
-}