RubyGems - playbook_ui - Versions diffs - 14.14.0 → 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700 - Mend

playbook_ui 14.14.0 → 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (188) hide show

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

@@ -0,0 +1,33 @@
+<%= 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_borders.jsx CHANGED Viewed

@@ -41,7 +41,7 @@ const DrawerBorders = () => {
           onClose={toggleBRightDrawer}
           opened={openedBRightDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border right
@@ -52,7 +52,7 @@ const DrawerBorders = () => {
           onClose={toggleBLeftDrawer}
           opened={openedBLeftDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border left
@@ -63,7 +63,7 @@ const DrawerBorders = () => {
           onClose={toggleBFullDrawer}
           opened={openedBFullDrawer}
           overlay={false}
-          placement="left"
+          placement="right"
           size="lg"
       >
         This is a Drawer with border full

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

File without changes

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx CHANGED Viewed

@@ -1,42 +1,25 @@
-import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
-const useDrawer = (visible = false) => {
-  const [opened, setOpened] = useState(visible);
-  const toggle = () => setOpened(!opened);
-  return [opened, toggle];
-};
-const DrawerBreakpoints = () => {
-  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
+import React from "react"
+import { Button, Body } from "playbook-ui"
+const DrawerMenu = () => {
   return (
     <>
-      <Flex wrap>
-        <Button
-            id="sm"
-            marginRight="md"
-            onClick={toggleSmallDrawer}
-        >
-          {"Will open at small breakpoint"}
-        </Button>
-      </Flex>
-      <Flex>
-        <Drawer
-            behavior={"push"}
-            breakpoint="sm"
-            onClose={toggleSmallDrawer}
-            opened={smallDrawerOpened}
-            overlay={false}
-            placement={"right"}
-            size={"lg"}
-        >
-          Open because small breakpoint
-        </Drawer>
-      </Flex>
+      <Body>
+        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.
+      </Body>
+      <Button
+          link='https://8njdkc.csb.app/'
+          marginTop='md'
+          newWindow
+      >
+        Open Doc Example in New Tab
+      </Button>
     </>
-  );
-};
+  )
+}
-export default DrawerBreakpoints;
+export default DrawerMenu

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb CHANGED Viewed

@@ -1 +1,20 @@
-<%= pb_rails("drawer") %>
+<%= pb_rails("flex") do %>
+    <%= pb_rails("button", props: { text: "Left Drawer", margin_right: "sm", data: {"open-drawer": "drawer-1"} }) %>
+    <%= pb_rails("drawer", props: {
+        id:"drawer-1",
+    }) do  %>
+        Test me (Left Drawer)
+    <% end %>
+    <%= pb_rails("button", props: { text: "Right Drawer", data: {"open-drawer": "drawer-2"} }) %>
+    <%= pb_rails("drawer", props: {
+        id:"drawer-2",
+        placement: "right"
+    }) do  %>
+        Test me (Right Drawer)
+    <% end %>
+<% end %>

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

@@ -0,0 +1,24 @@
+<%= 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_menu.jsx CHANGED Viewed

@@ -8,8 +8,8 @@ const DrawerMenu = () => {
     const mediaQuery = window.matchMedia("(max-width: 600px)")
     setIsSmallScreen(mediaQuery.matches)
     const handler = (e) => setIsSmallScreen(e.matches)
-    mediaQuery.addEventListener('change', handler)
-    return () => mediaQuery.removeEventListener('change', handler)
+    mediaQuery.addEventListener("change", handler)
+    return () => mediaQuery.removeEventListener("change", handler)
   }, [])
   return (
@@ -22,17 +22,17 @@ const DrawerMenu = () => {
         />
       </Button>
       <Drawer
-          breakpoint="md"
+          breakpoint='md'
           placement='bottom'
           size='full'
           triggerId='menuButton'
           withinElement
       >
-        <Nav
+        <Nav
             highlight={false}
             link='#'
-            orientation={isSmallScreen ? 'vertical' : 'horizontal'}
-            padding={isSmallScreen ? 'none' : 'sm'}
+            orientation={isSmallScreen ? "vertical" : "horizontal"}
+            padding={isSmallScreen ? "none" : "sm"}
         >
           <NavItem link='#'
               text='About'

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

@@ -0,0 +1,21 @@
+<%= 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.jsx CHANGED Viewed

@@ -31,6 +31,7 @@ const DrawerSizes = () => {
           onClose={toggleNoOverlayDrawer}
           opened={openedNoOverlayDrawer}
           overlay={false}
+          placement='right'
           size='lg'
       >
         This is a Drawer with no overlay

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

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

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

@@ -0,0 +1,49 @@
+<%= 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/docs/example.yml CHANGED Viewed

@@ -2,6 +2,11 @@ examples:
   rails:
   - drawer_default: Default
+  - drawer_behavior: Push Behavior
+  - drawer_menu: Within Element
+  - drawer_sizes: Sizes
+  - drawer_overlay: Overlay
+  - drawer_borders: Borders
   react:
@@ -10,4 +15,5 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders

data/app/pb_kits/playbook/pb_drawer/drawer.html.erb CHANGED Viewed

@@ -1,12 +1,20 @@
-<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
-<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
-<%= pb_content_tag(
-    # :div,
-    # aria: object.aria,
-    # class: object.classname,
-    # data: object.data,
-    # id: object.id,
-    # **combined_html_options
-) do %>
-  <span>DRAWER CONTENT</span>
-<% end %>
+<% if within_element %>
+    <%= pb_content_tag(:div, data: {breakpoint: object.breakpoint} ) do %>
+        <%= content %>
+    <% end %>
+<% else %>
+    <div class="pb_drawer_wrapper"
+        id="drawer-wrapper-<%= object.id %>"
+        style="display:none;"
+        data-behavior="<%= object.behavior %>"
+        data-size="<%= object.size %>"
+        data-placement="<%= object.placement %>"
+        data-breakpoint="<%= object.breakpoint %>"
+        >
+        <div class="<%= overlay_classes %>" style="display:none;" id="drawer-overlay-<%= object.id %>">
+            <%= pb_content_tag do %>
+                <%= content %>
+            <% end %>
+        </div>
+    </div>
+<% end %>

data/app/pb_kits/playbook/pb_drawer/drawer.rb CHANGED Viewed

@@ -2,7 +2,55 @@
 module Playbook
   module PbDrawer
-    class Drawer < ::Playbook::KitBase
+    class Drawer < Playbook::KitBase
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[xs sm md lg xl full],
+                  default: "md"
+      prop :placement, type: Playbook::Props::Enum,
+                       values: %w[left right bottom],
+                       default: "left"
+      prop :behavior, type: Playbook::Props::Enum,
+                      values: %w[floating push],
+                      default: "floating"
+      prop :overlay, type: Playbook::Props::Boolean,
+                     default: true
+      prop :within_element, type: Playbook::Props::Boolean,
+                            default: false
+      prop :border, type: Playbook::Props::Enum,
+                    values: %w[full none right left],
+                    default: "none"
+      prop :breakpoint, type: Playbook::Props::Enum,
+                        values: %w[none xs sm md lg xl],
+                        default: "none"
+      def classname
+        generate_classname("pb_drawer pb_drawer_#{size}_#{placement} #{within_class} #{border_classes}")
+      end
+      def border_classes
+        case border
+        when "full"
+          "drawer_border-full"
+        when "right"
+          "drawer_border-right"
+        when "left"
+          "drawer_border-left"
+        else
+          ""
+        end
+      end
+      def overlay_close
+        !should_close_on_overlay_click ? "overlay_close" : ""
+      end
+      def within_class
+        within_element ? "pb_drawer_within_element_rails" : ""
+      end
+      def overlay_classes
+        "pb_drawer_#{overlay ? '' : 'no_'}overlay drawer_content_#{placement} pb_drawer_overlay_after_open #{overlay ? '' : 'no-background'}"
+      end
     end
   end
 end

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

@@ -0,0 +1,257 @@
+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")
+  }
+}