RubyGems - playbook_ui - Versions diffs - 14.25.0.pre.alpha.dialogfix10277 → 14.25.0.pre.alpha.play1986inlineloadingsolidvariant9963 - Mend

playbook_ui 14.25.0.pre.alpha.dialogfix10277 → 14.25.0.pre.alpha.play1986inlineloadingsolidvariant9963

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 (230) hide show

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx ADDED Viewed

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
+const DrawerBorders = () => {
+  // Individual state variables for each drawer size
+  const [openedBRightDrawer, setOpenedBRightDrawer] = useState(false);
+  const [openedBLeftDrawer, setOpenedBLeftDrawer] = useState(false);
+  const [openedBFullDrawer, setOpenedBFullDrawer] = useState(false);
+  // Toggle functions for each drawer
+  const toggleBRightDrawer = () => setOpenedBRightDrawer(!openedBRightDrawer);
+  const toggleBLeftDrawer = () => setOpenedBLeftDrawer(!openedBLeftDrawer);
+  const toggleBFullDrawer = () => setOpenedBFullDrawer(!openedBFullDrawer);
+  return (
+    <>
+      <Flex
+          wrap
+      >
+        <Button marginRight="md"
+            onClick={toggleBRightDrawer}
+        >
+         Drawer with border right
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleBLeftDrawer}
+        >
+         Drawer with border left
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleBFullDrawer}
+        >
+          Drawer with border full
+        </Button>
+      </Flex>
+      {/* Drawers for each size */}
+      <Drawer
+          behavior="float"
+          border="right"
+          onClose={toggleBRightDrawer}
+          opened={openedBRightDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with border right
+      </Drawer>
+      <Drawer
+          behavior="float"
+          border="left"
+          onClose={toggleBLeftDrawer}
+          opened={openedBLeftDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with border left
+      </Drawer>
+      <Drawer
+          behavior="float"
+          border="full"
+          onClose={toggleBFullDrawer}
+          opened={openedBFullDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with border full
+      </Drawer>
+    </>
+  );
+};
+export default DrawerBorders;

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

@@ -0,0 +1,3 @@
+<%= 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_breakpoints.jsx ADDED Viewed

@@ -0,0 +1,26 @@
+import React from "react"
+import Button from '../../pb_button/_button'
+import Body from "../../pb_body/_body"
+const DrawerMenu = () => {
+  return (
+    <>
+      <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 DrawerMenu

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

@@ -0,0 +1,20 @@
+<%= 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_default.jsx ADDED Viewed

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
+const useDrawer = (visible = false) => {
+  const [opened, setOpened] = useState(visible);
+  const toggle = () => setOpened(!opened);
+  return [opened, toggle];
+};
+const DrawerDefault = () => {
+  const [drawerLeftOpen, toggleDrawerLeftOpen] = useDrawer();
+  const [drawerRightOpen, toggleDrawerRightOpen ] = useDrawer();
+  return (
+    <>
+      <Flex wrap>
+        <Button
+            id="sm"
+            marginRight="md"
+            onClick={toggleDrawerLeftOpen}
+        >
+          {"Left Drawer"}
+        </Button>
+        <Button
+            marginRight="xl"
+            onClick={toggleDrawerRightOpen}
+        >
+          {"Right Drawer"}
+        </Button>
+      </Flex>
+      <Flex>
+        {/* Left Drawer */}
+        <Drawer
+            onClose={toggleDrawerLeftOpen}
+            opened={drawerLeftOpen}
+            size={"lg"}
+        >
+          Test me (Left Drawer)
+        </Drawer>
+        {/* Right Drawer */}
+        <Drawer
+            onClose={toggleDrawerRightOpen}
+            opened={drawerRightOpen}
+            placement={"right"}
+            size={"lg"}
+        >
+          Test me (Right Drawer)
+        </Drawer>
+      </Flex>
+    </>
+  );
+};
+export default DrawerDefault;

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

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from "react"
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Icon from '../../pb_icon/_icon'
+import Nav from '../../pb_nav/_nav'
+import NavItem from '../../pb_nav/_item'
+const DrawerMenu = () => {
+  const [isSmallScreen, setIsSmallScreen] = useState(false)
+  useEffect(() => {
+    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)
+  }, [])
+  return (
+    <div>
+      <Button id='menuButton'
+          padding='xs'
+      >
+        <Icon icon='bars'
+            size='2x'
+        />
+      </Button>
+      <Drawer
+          breakpoint='md'
+          placement='bottom'
+          size='full'
+          triggerId='menuButton'
+          withinElement
+      >
+        <Nav
+            highlight={false}
+            link='#'
+            orientation={isSmallScreen ? "vertical" : "horizontal"}
+            padding={isSmallScreen ? "none" : "sm"}
+        >
+          <NavItem link='#'
+              text='About'
+          />
+          <NavItem active
+              link='#'
+              text='Case Studies'
+          />
+          <NavItem link='#'
+              text='Service'
+          />
+          <NavItem link='#'
+              text='Contacts'
+          />
+        </Nav>
+      </Drawer>
+    </div>
+  )
+}
+export default DrawerMenu

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

@@ -0,0 +1,24 @@
+The Drawer component can be used to create responsive navigation menus and sidebars. It provides flexible options for controlling when and how the drawer appears based on screen size.
+### Within Element
+The `withinElement` prop allows you to render the drawer within its parent container:
+- The drawer will be positioned relative to its parent element
+- Useful for creating nested navigation structures
+- This must be used in conjunction with the `triggerId` prop
+This provides a clean way to create responsive navigation patterns that adapt to different screen sizes while maintaining a consistent user experience.
+### Trigger Id
+The `triggerId` prop allows you to connect an element to control the drawer:
+- The specified element will toggle the drawer open/closed
+- The element is automatically hidden when the drawer is opened via breakpoint
+- The element reappears when the drawer is closed via breakpoint
+### Breakpoint
+Use the `breakpoint` prop to control when the drawer automatically opens or closes based on screen size. For example, setting `breakpoint="md"` will:
+- Close the drawer on screens smaller than the medium breakpoint (992px)
+- Automatically open the drawer on screens larger than or equal to the medium breakpoint

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

@@ -0,0 +1,54 @@
+import React, { useState } from "react"
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
+const DrawerSizes = () => {
+  // Individual state variables for each drawer size
+  const [openedNoOverlayDrawer, setOpenedNoOverlayDrawer] = useState(false)
+  const [openedOverlayDrawer, setOpenedOverlayDrawer] = useState(false)
+  // Toggle functions for each drawer
+  const toggleNoOverlayDrawer = () =>
+    setOpenedNoOverlayDrawer(!openedNoOverlayDrawer)
+  const toggleOverlayDrawer = () => setOpenedOverlayDrawer(!openedOverlayDrawer)
+  return (
+    <>
+      <Flex wrap>
+        <Button marginRight='md'
+            onClick={toggleNoOverlayDrawer}
+        >
+          No Overlay Drawer
+        </Button>
+        <Button marginRight='md'
+            onClick={toggleOverlayDrawer}
+        >
+          Overlay Drawer
+        </Button>
+      </Flex>
+      {/* Drawers for each size */}
+      <Drawer
+          onClose={toggleNoOverlayDrawer}
+          opened={openedNoOverlayDrawer}
+          overlay={false}
+          placement='right'
+          size='lg'
+      >
+        This is a Drawer with no overlay
+      </Drawer>
+      <Drawer
+          onClose={toggleOverlayDrawer}
+          opened={openedOverlayDrawer}
+          placement='right'
+          size='lg'
+      >
+        This is a Drawer with an overlay
+      </Drawer>
+    </>
+  )
+}
+export default DrawerSizes

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

@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
+const DrawerSizes = () => {
+  // Individual state variables for each drawer size
+  const [openedXsDrawer, setOpenedXsDrawer] = useState(false);
+  const [openedSmDrawer, setOpenedSmDrawer] = useState(false);
+  const [openedMdDrawer, setOpenedMdDrawer] = useState(false);
+  const [openedLgDrawer, setOpenedLgDrawer] = useState(false);
+  const [openedXlDrawer, setOpenedXlDrawer] = useState(false);
+  // Toggle functions for each drawer
+  const toggleXsDrawer = () => setOpenedXsDrawer(!openedXsDrawer);
+  const toggleSmDrawer = () => setOpenedSmDrawer(!openedSmDrawer);
+  const toggleMdDrawer = () => setOpenedMdDrawer(!openedMdDrawer);
+  const toggleLgDrawer = () => setOpenedLgDrawer(!openedLgDrawer);
+  const toggleXlDrawer = () => setOpenedXlDrawer(!openedXlDrawer);
+  return (
+    <>
+      <Flex wrap>
+        <Button
+            marginRight="md"
+            onClick={toggleXsDrawer}
+        >
+          XS Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleSmDrawer}
+        >
+          SM Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleMdDrawer}
+        >
+          MD Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleLgDrawer}
+        >
+          LG Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleXlDrawer}
+        >
+          XL Drawer
+        </Button>
+      </Flex>
+      {/* Drawers for each size */}
+      <Drawer
+          onClose={toggleXsDrawer}
+          opened={openedXsDrawer}
+          placement="right"
+          size="xs"
+      >
+        XS
+      </Drawer>
+      <Drawer
+          onClose={toggleSmDrawer}
+          opened={openedSmDrawer}
+          size="sm"
+      >
+        This is an SM Drawer
+      </Drawer>
+      <Drawer
+          onClose={toggleMdDrawer}
+          opened={openedMdDrawer}
+          placement="right"
+      >
+        This is an MD Drawer
+      </Drawer>
+      <Drawer
+          onClose={toggleLgDrawer}
+          opened={openedLgDrawer}
+          size="lg"
+      >
+        This is an LG Drawer
+      </Drawer>
+      <Drawer
+          onClose={toggleXlDrawer}
+          opened={openedXlDrawer}
+          placement="right"
+          size="xl"
+      >
+        This is an XL Drawer
+      </Drawer>
+    </>
+  );
+};
+export default DrawerSizes;

data/app/pb_kits/playbook/pb_drawer/docs/example.yml ADDED Viewed

@@ -0,0 +1,20 @@
+examples:
+  rails:
+  - drawer_default: Default
+  - drawer_behavior: Push Behavior
+  - drawer_menu: Within Element
+  - drawer_sizes: Sizes
+  - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
+  - drawer_borders: Borders
+  react:
+  - drawer_default: Default
+  - drawer_behavior: Push Behavior
+  - drawer_menu: Within Element
+  - drawer_sizes: Sizes
+  - drawer_overlay: Overlay
+  - drawer_breakpoints: Breakpoints
+  - drawer_borders: Borders

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

@@ -0,0 +1,7 @@
+export { default as DrawerDefault } from './_drawer_default.jsx'
+export { default as DrawerSizes } from './_drawer_sizes.jsx'
+export { default as DrawerOverlay } from './_drawer_overlay.jsx'
+export { default as DrawerBorders } from './_drawer_borders.jsx'
+export { default as DrawerBreakpoints } from './_drawer_breakpoints.jsx'
+export { default as DrawerMenu } from './_drawer_menu.jsx'
+export { default as DrawerBehavior } from './_drawer_behavior.jsx'

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

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

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+module Playbook
+  module PbDrawer
+    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