playbook_ui 14.4.0.pre.alpha.PBNTR534filtermaxwidth3903 → 14.4.0.pre.alpha.PLAY1486highchartscssdrivenPOC3921

data/app/pb_kits/playbook/pb_drawer/_drawer.scss

@@ -0,0 +1,465 @@
+@import "../tokens/positioning";
+@import "../tokens/colors";
+@import "../pb_card/card_mixin";
+@import "../tokens/shadows";
+@import "../tokens/border_radius";
+@import "../tokens/spacing";
+@import "../tokens/animation-curves";
+@import "../tokens/positioning";
+
+// Drawer animations
+// Drawer animations for fading in and out from the center
+@keyframes modalFadeIn {
+  from {
+    transform: translate3d(0, -100%, 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes modalFadeOut {
+  from {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate3d(0, -50%, 0);
+    opacity: 0;
+  }
+}
+
+// Drawer animations for fading in and out from the right side
+
+@keyframes overlayFade {
+  from {
+    opacity: 0;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes overlayFadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+body.ReactModal__Body--open {
+  transition: margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out;
+}
+
+.pb_drawer_lg_left.pb_drawer {
+  transform: translateX(-100%);
+}
+
+.pb_drawer_lg_right.pb_drawer {
+  transform: translateX(100%);
+}
+
+.pb_drawer.pb_drawer_after_open {
+  transform: translateX(0); /* Slide in */
+}
+// Drawer Styles
+.pb_drawer {
+
+  // Local Variables
+  $gutter: $space_lg;
+  $xsmall: 64px;
+  $small: 200px;
+  $medium: 250px;
+  $large: 300px;
+  $xlarge: 365px;
+  $animation-duration: .2s;
+  $z-index: 100;
+  $opacity_visible: 1;
+  $opacity_hidden: 0;
+
+  .drawer {
+    position: sticky;
+    top: 0;
+    background-color: $white;
+    z-index: $z_8;
+  }
+
+  // @include pb_card;
+  background-color: $white;
+  border: 0;
+  box-shadow: $shadow_deepest; // border class here
+  max-height: calc(100vh - #{$gutter * 2});
+  max-width: calc(100vw - #{$gutter * 2});
+  overflow: auto;
+  animation-name: modalFadeIn;
+  animation-duration: $animation-duration;
+  outline: none;
+  animation-timing-function: $easeInOutQuint;
+  transition: transform 0.3s ease-in-out;
+
+  &.drawer_border_full {
+    box-shadow: none;
+    border: 2px solid #f3f7fb;
+  }
+
+  &.drawer_border_right {
+    border-right: 2px solid #f3f7fb;
+  }
+
+  &.drawer_border_left {
+    border-left: 2px solid #f3f7fb;
+  }
+
+  &[class*="_left"] {
+    animation-name: modalFadeInLeft;
+    &[class*="_before_close"] {
+      animation-name: modalFadeOutLeft;
+      animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
+    }
+  }
+
+  &[class*="_right"] {
+    animation-name: modalFadeInRight;
+    &[class*="_before_close"] {
+      animation-name: modalFadeOutRight;
+      animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
+    }
+  }
+
+  &[class*="_xs_"] {
+    width: $xsmall;
+    max-width: $xsmall;
+  }
+
+  &[class*="_sm_"] {
+    width: $small;
+    max-width: $small;
+  }
+
+  &[class*="_md_"] {
+    width: $medium;
+    max-width: $medium;
+  }
+
+  &[class*="_lg_"] {
+    width: $large;
+    max-width: $large; 
+  }
+
+  &[class*="_xl_"] {
+    width: $xlarge;
+    max-width: $xlarge; 
+  }
+
+  &_body_open {
+    overflow: hidden;
+  }
+
+  &_after_open {
+    opacity: $opacity_visible;
+  }
+
+  &.no-background {
+    background-color: transparent; 
+  }
+
+  &[class*="_before_close"] {
+    animation-name: modalFadeOut;
+    animation-duration: $animation-duration;
+    opacity: $opacity_hidden;
+  }
+
+  &_close_icon {
+    cursor: pointer;
+  }
+
+  &_overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba($bg_dark, $opacity_4);
+    z-index: $z-index;
+    animation-name: overlayFade;
+    animation-duration: $animation-duration;
+
+    &_after_open {
+      opacity: $opacity_visible;
+    }
+    &_before_close {
+      animation-name: overlayFadeOut;
+      animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
+    }
+    &[class*="full_height"] {
+      &[class*="_left"]{
+        justify-content: flex-start;
+      }
+
+      &[class*="_center"]{
+        justify-content: center;
+      }
+
+      &[class*="_right"]{
+        justify-content: flex-end;
+      }
+
+      .pb_drawer {
+        height: 100%;
+        max-height: 100%;
+        max-width: none;
+        // This empty div only has height when drawer is full height
+        // Fix for drawer body content disappearing behind sticky footer
+        .drawer-pseudo-footer {
+          height: $space_xl * 2;
+        }
+        .drawer_footer {
+          position: fixed;
+          bottom: 0;
+          background-color: $white;
+          max-width: 100%;
+        }
+        &[class*="_xs_"] {
+          width: $xsmall;
+          .dialog_footer {
+            width: $xsmall;
+          }
+        }
+        &[class*="_sm_"] {
+          width: $small;
+          .dialog_footer {
+            width: $small;
+          }
+        }
+        &[class*="_md_"] {
+          width: $medium;
+          .dialog_footer {
+            width: $medium;
+          }
+        }
+        &[class*="_lg_"] {
+          width: $large;
+          .dialog_footer {
+            width: $large;
+          }
+        }
+        &[class*="_xl_"] {
+          width: $xlarge;
+          .dialog_footer {
+          width: $xlarge;
+        }
+      }
+    }
+  }
+}
+
+  &_no_overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: $z-index;
+    animation-name: overlayFade;
+    animation-duration: $animation-duration;
+    overflow: none; /* Ensure body remains scrollable */
+    pointer-events: none; /* Allow interaction inside the drawer itself */
+
+    body.ReactModal__Body--open {
+      overflow: none; /* Ensure body remains scrollable */
+      pointer-events: none; /* Allow interaction inside the drawer itself */
+    }
+
+    &_after_open {
+      opacity: $opacity_visible;
+      overflow: none; /* Ensure body remains scrollable */
+      pointer-events: none; /* Allow interaction inside the drawer itself */
+    }
+    &_before_close {
+      animation-name: overlayFadeOut;
+      animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
+    }
+    &[class*="full_height"] {
+      &[class*="_left"]{
+        justify-content: flex-start;
+      }
+
+      &[class*="_center"]{
+        justify-content: center;
+      }
+
+      &[class*="_right"]{
+        justify-content: flex-end;
+      }
+
+      .pb_drawer {
+        height: 100%;
+        max-height: 100%;
+        max-width: none;
+        // This empty div only has height when drawer is full height
+        // Fix for drawer body content disappearing behind sticky footer
+        .drawer-pseudo-footer {
+          height: $space_xl * 2;
+        }
+        .drawer_footer {
+          position: fixed;
+          bottom: 0;
+          background-color: $white;
+          max-width: 100%;
+        }
+        &[class*="_xs_"] {
+          width: $xsmall;
+          .dialog_footer {
+            width: $xsmall;
+          }
+        }
+        &[class*="_sm_"] {
+          width: $small;
+          .dialog_footer {
+            width: $small;
+          }
+        }
+        &[class*="_md_"] {
+          width: $medium;
+          .dialog_footer {
+            width: $medium;
+          }
+        }
+        &[class*="_lg_"] {
+          width: $large;
+          .dialog_footer {
+            width: $large;
+          }
+        }
+        &[class*="_xl_"] {
+          width: $xlarge;
+          .dialog_footer {
+          width: $xlarge;
+        }
+      }
+    }
+  }
+}
+
+[class*="drawer_body"] {
+  padding: $space_sm;
+}
+
+[class*="drawer_header"] {
+  padding: $space_sm;
+}
+
+[class*="drawer_footer"] {
+  padding: $space_sm;
+}
+
+//styles specific to rails version of kit
+// rails version has own wrapper because of the way the overlay functions for the HTML drawer used to create this
+.pb_drawer_wrapper_rails {
+  $medium: 500px;
+  $large: 800px;
+  $xlarge: 1150px;
+
+  &[class*="full_height"] {
+    &[class*="_left"]{
+      .pb_drawer_rails {
+        margin: unset !important;
+        margin-right: auto !important;
+      }
+    }
+
+    &[class*="_center"]{
+      justify-content: center;
+    }
+
+    &[class*="_right"]{
+      .pb_drawer_rails {
+        margin: unset !important;
+        margin-left: auto !important;
+      }
+    }
+
+    .pb_drawer {
+      height: 100% !important;
+      max-height: 100% !important;
+      max-width: 100%;
+      // This empty div only has height when drawer is full height.
+      // Fix for drawer body content disappearing behind sticky footer
+      .drawer-pseudo-footer {
+        height: $space_xl * 2;
+      }
+      .drawer_footer {
+        position:fixed;
+        bottom: 0;
+        background-color: $white;
+        max-width: 100%;
+      }
+      &[class*="_sm"] {
+        width: $medium;
+        .drawer_footer {
+          width: $medium;
+        }
+      }
+      &[class*="_md"] {
+        width: $large;
+        .drawer_footer {
+          width: $large;
+        }
+      }
+      &[class*="_lg"] {
+        width: $xlarge;
+        .drawer_footer {
+          width: $xlarge;
+        }
+      }
+    }
+  }
+
+  // Fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE.
+  // Conflicts were only apparent in nitro, not in playbook local env
+  .pb_drawer_rails {
+    position: fixed !important;
+    top: 0 !important;
+    padding: unset !important;
+    margin: auto;
+
+  }
+
+  // Overlay for rails kit
+  drawer::backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba($bg_dark, $opacity_4);
+    animation-name: overlayFade;
+    animation-duration: 0.2s;
+  }
+
+  .drawer-button-class {
+    background-color: unset;
+    border: none;
+    cursor: pointer;
+  }
+}
+}

data/app/pb_kits/playbook/pb_drawer/_drawer.tsx

@@ -0,0 +1,195 @@
+import React, { useState, useEffect } from "react";
+import classnames from "classnames";
+import Modal from "react-modal";
+
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+
+import { DialogContext } from "../pb_dialog/_dialog_context";
+
+type DrawerProps = {
+  aria?: { [key: string]: string };
+  behavior?: "floating" | "push";
+  border?: "full" | "none" | "right" | "left";
+  breakpoint?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+  children: React.ReactNode | React.ReactNode[] | string;
+  className?: string;
+  data?: { [key: string]: string };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  id?: string;
+  fullHeight?: boolean;
+  onClose?: () => void;
+  opened: boolean;
+  overlay: boolean;
+  placement?: "left" | "right";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  text?: string;
+  trigger?: string;
+};
+
+const Drawer = (props: DrawerProps): React.ReactElement => {
+  const {
+    aria = {},
+    behavior = "floating",
+    border = "none",
+    breakpoint = "none",
+    className,
+    data = {},
+    htmlOptions = {},
+    id,
+    size = "md",
+    children,
+    fullHeight = false,
+    opened,
+    onClose,
+    overlay = true,
+    placement = "left",
+    trigger,
+  } = props;
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+
+  let globalPropsString: string = globalProps(props);
+
+  // Check if the string contains any of the prefixes
+  const containsPrefix = ['p_', 'pb_', 'pt_', 'pl_', 'pr_', 'px_', 'py_'].some((prefix) =>
+    globalPropsString.includes(prefix)
+  );
+
+  // If none of the prefixes are found, append 'p_sm' to the string
+  if (!containsPrefix) {
+    globalPropsString += ' p_sm';
+  }
+
+  const drawerClassNames = {
+    base: `${classnames(
+      "pb_drawer",
+      buildCss("pb_drawer", size, placement),
+      {
+        "drawer_border_full": border === "full",
+        "drawer_border_right": border === "right",
+        "drawer_border_left": border === "left",
+      }
+    )} ${globalPropsString}`,
+    afterOpen: "pb_drawer_after_open",
+    beforeClose: "pb_drawer_before_close",
+  };
+
+  const fullHeightClassNames = () => {
+    if (!fullHeight) return null;
+    return `full_height_${placement}`;
+  };
+
+  const overlayClassNames = {
+    base: `pb_drawer${overlay ? '_overlay' : '_no_overlay'} ${fullHeight !== null && fullHeightClassNames()} ${!overlay ? 'no-background' : ''}`,
+    afterOpen: "pb_drawer_overlay_after_open",
+    beforeClose: "pb_drawer_overlay_before_close",
+  };
+
+  const classes = classnames(
+    buildCss("pb_drawer_wrapper"),
+    className
+  );
+
+  const [triggerOpened, setTriggerOpened] = useState(false);
+
+  const breakpointWidths: Record<DrawerProps['breakpoint'], number> = {
+    none: 0,
+    xs: 575,
+    sm: 768,
+    md: 992,
+    lg: 1200,
+    xl: 1400,
+  };
+
+  // State to manage opening the drawer based on breakpoint
+  const [isBreakpointOpen, setIsBreakpointOpen] = useState(false);
+
+  useEffect(() => {
+    if (breakpoint === 'none') return;
+
+    const handleResize = () => {
+      const width = window.innerWidth;
+      const breakpointWidth = breakpointWidths[breakpoint];
+
+      if (width <= breakpointWidth) {
+        setIsBreakpointOpen(true);
+      } else {
+        setIsBreakpointOpen(false);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    // Call handler once on mount to set initial state
+    handleResize();
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [breakpoint]);
+
+  const modalIsOpened = trigger ? triggerOpened : (opened || isBreakpointOpen);
+
+  useEffect(() => {
+    const sizeMap: Record<DrawerProps['size'], string> = {
+      xl: '365px',
+      lg: '300px',
+      md: '250px',
+      sm: '200px',
+      xs: '64px',
+    };
+    const body = document.querySelector('body');
+
+    if (modalIsOpened && behavior === 'push' && body) {
+      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('ReactModal__Body--open');
+    } else if (body) {
+      body.style.cssText = ''; // Clear the styles when modal is closed or behavior is not 'push'
+      body.classList.remove('ReactModal__Body--open');
+    }
+  }, [modalIsOpened, behavior, placement, size]);
+
+  const api = {
+    onClose: trigger
+      ? function () {
+          setTriggerOpened(false);
+        }
+      : onClose,
+  };
+
+  return (
+    <DialogContext.Provider value={api}>
+      <div
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={classes}
+      >
+        <Modal
+            ariaHideApp={false}
+            className={drawerClassNames}
+            closeTimeoutMS={200}
+            contentLabel="Minimal Modal Example"
+            id={id}
+            isOpen={modalIsOpened}
+            onRequestClose={onClose}
+            overlayClassName={overlayClassNames}
+            shouldCloseOnOverlayClick={overlay}
+        >
+          <>
+            {children}
+          </>
+        </Modal>
+      </div>
+    </DialogContext.Provider>
+  );
+};
+
+export default Drawer;

data/app/pb_kits/playbook/pb_drawer/_drawer_context.tsx

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const DrawerContext = React.createContext(null);