RubyGems - playbook_ui - Versions diffs - 14.14.0.pre.alpha.revert4339revert4242play1633displaytitle6456 → 14.14.0.pre.rc.0 - Mend

playbook_ui 14.14.0.pre.alpha.revert4339revert4242play1633displaytitle6456 → 14.14.0.pre.rc.0

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

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx DELETED Viewed

@@ -1,90 +0,0 @@
-import React, { useState } from "react";
-import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
-// Initial items to be dragged
-const data = [
-    {
-        id: "1",
-        task: "Task 1",
-        assignee_name: "Terry Miles",
-        assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
-      },
-      {
-        id: "2",
-        task: "Task 2",
-        assignee_name: "Sophia Miles",
-        assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
-      },
-      {
-        id: "3",
-        task: "Task 3",
-        assignee_name: "Alice Jones",
-        assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
-      },
-      {
-        id: "4",
-        task: "Task 4",
-        assignee_name: "Mike James",
-        assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
-      },
-      {
-        id: "5",
-        task: "Task 5",
-        assignee_name: "James Guy",
-        assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
-      }
-];
-const DraggableWithTableReact = (props) => {
-  const [initialState, setInitialState] = useState(data);
-  return (
-    <>
-    <DraggableProvider initialItems={data}
-        onReorder={(items) => setInitialState(items)}
-    >
-        <Table
-            responsive="none"
-            size="sm"
-            {...props}
-        >
-          <Table.Head>
-            <Table.Row>
-              <Table.Header>{"id"}</Table.Header>
-              <Table.Header>{"name"}</Table.Header>
-              <Table.Header>{"task number"}</Table.Header>
-            </Table.Row>
-          </Table.Head>
-          <Table.Body draggableContainer>
-            {initialState.map(({ id, task, assignee_name, assignee_img }) => (
-              <Table.Row
-                  dragId={id}
-                  draggableItem
-                  key={id}
-              >
-                <Table.Cell>{id}</Table.Cell>
-                <Table.Cell>
-                  <Flex align="center">
-                    <Avatar
-                        imageUrl={assignee_img}
-                        size="xs"
-                    />
-                    <Body
-                        paddingLeft="xxs"
-                        text={assignee_name}
-                        {...props}
-                    />
-                  </Flex>
-                </Table.Cell>
-                <Table.Cell>{task}</Table.Cell>
-              </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-    </DraggableProvider>
-    </>
-  );
-};
-export default DraggableWithTableReact;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md DELETED Viewed

@@ -1,5 +0,0 @@
-The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this:
-- Wrap the Table with the `DraggableProvider` and manage state as shown.
-- use the `draggableContainer` prop on the Table.Body to designate it as the Draggable Container
-- use the `draggableItem` prop on the Table.Row to designate it as the Draggable Item. Make sure to also pass id to the `dragId` prop here.

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

File without changes

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

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

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

@@ -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 DELETED Viewed

@@ -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_icon_button/_icon_button.tsx DELETED Viewed

@@ -1,71 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-import Button from '../pb_button/_button'
-import Icon from '../pb_icon/_icon'
-import { IconSizes } from "../pb_icon/_icon"
-type IconButtonProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  htmlType?: 'submit' | 'reset' | 'button' | undefined,
-  icon?: string,
-  id?: string,
-  link?: string,
-  newWindow?: boolean,
-  size?: IconSizes,
-  target?: string,
-  variant?: 'default' | 'link',
-}
-const IconButton = (props: IconButtonProps) => {
-  const {
-    aria = {},
-    className,
-    data = {},
-    htmlType = 'button',
-    icon = 'bars',
-    id,
-    link,
-    newWindow = false,
-    size = "2x",
-    target,
-    variant = "default",
-  } = props
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_icon_button_kit', variant), globalProps(props), className)
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      <Button
-          borderRadius="lg"
-          htmlType={htmlType}
-          link={link}
-          newWindow={newWindow}
-          target={target}
-      >
-        <Icon
-            className="icon_button_icon"
-            fixedWidth
-            icon={icon}
-            paddingX="xxs"
-            paddingY="xs"
-            size={size}
-        />
-      </Button>
-    </div>
-  )
-}
-export default IconButton

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx DELETED Viewed

@@ -1,17 +0,0 @@
-import React from 'react'
-import { IconButton } from 'playbook-ui'
-const IconButtonDefault = (props) => (
-  <div>
-    <IconButton
-        {...props}
-    />
-    <IconButton
-        {...props}
-        marginTop="md"
-        variant="link"
-    />
-  </div>
-)
-export default IconButtonDefault

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb DELETED Viewed

@@ -1,27 +0,0 @@
-<%= pb_rails("flex", props: { align: "center"}) do %>
-  <%= pb_rails("icon_button", props: {size: "lg"}) %> <span>Large</span>
-<% end %>
-<%= pb_rails("flex", props: { align: "center" }) do %>
-  <%= pb_rails("icon_button", props: {size: "sm"}) %> <span>Small</span>
-<% end %>
-<%= pb_rails("flex", props: { align: "center" }) do %>
-  <%= pb_rails("icon_button", props: {size: "xs"}) %> <span>XSmall</span>
-<% end %>
-<%= pb_rails("flex", props: { align: "center", margin_top: "md" }) do %>
-  <%= pb_rails("icon_button", props: {size: "1x"}) %> <span>1x</span>
-<% end %>
-<%= pb_rails("flex", props: { align: "center" }) do %>
-  <%= pb_rails("icon_button", props: {size: "2x"}) %> <span>2x</span>
-<% end %>
-<%= pb_rails("flex", props: { align: "center" }) do %>
-  <%= pb_rails("icon_button", props: {size: "3x"}) %> <span>3x</span>
-<% end %>
-<%= pb_rails("flex", props: { align: "center" }) do %>
-  <%= pb_rails("icon_button", props: {size: "4x"}) %> <span>4x</span>
-<% end %>

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx DELETED Viewed

@@ -1,61 +0,0 @@
-import React from 'react'
-import { IconButton, Flex } from 'playbook-ui'
-const IconButtonSizes = (props) => (
-  <div>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="lg"
-      />
-      <span>Large</span>
-    </Flex>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="sm"
-      />
-      <span>Small</span>
-    </Flex>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="xs"
-      />
-      <span>XSmall</span>
-    </Flex>
-    <Flex
-        align="center"
-        marginTop="md"
-    >
-      <IconButton
-          {...props}
-          size="1x"
-      />
-      <span>1x</span>
-    </Flex>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="2x"
-      />
-      <span>2x</span>
-    </Flex>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="3x"
-      />
-      <span>3x</span>
-    </Flex>
-    <Flex align="center">
-      <IconButton
-          {...props}
-          size="4x"
-      />
-      <span>4x</span>
-    </Flex>
-  </div>
-)
-export default IconButtonSizes

data/app/pb_kits/playbook/pb_icon_button/docs/index.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- export { default as IconButtonDefault } from './_icon_button_default.jsx'
2	- export { default as IconButtonSizes } from './_icon_button_sizes.jsx'