playbook_ui 11.18.0 → 11.19.0.pre.alpha.map1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 39519a8938c7fb8a9489e3be29b15fc9ace9caa5c6686328ca2e4b9e551aba91
-  data.tar.gz: 6534fa189af42de89d9a3f4df359ac402e1c0228ab675449cdf76d5dac001dbb
+  metadata.gz: acd29c105dfbace7771313774060bc89a0486a03679b639541eb9fa9dc7d6913
+  data.tar.gz: 841b861b8177704106fb9d5946dd98a20a419d964e21dffd680ad8cf67dc91f1
 SHA512:
-  metadata.gz: e85a07433af032820340c4f5e8e29ac807637c994350df2ef518afad3fe0c9cb09955aa10dcea2429242863af4f906fea5bf89d011fd0dfc2244ab4056a53a42
-  data.tar.gz: 0e1c3a2e97f4a36db0caf31debc8f04aa9434b0dc2627a99ff22ebfe67fe91a3be577bb91f2412dde9081874bc34995365721a09e4bf1eba1110bca1a31fe373
+  metadata.gz: 7faa135348c5d7ec1734b1a094ac8693bf8f158986d685275c324ac61f386b7fe344e52aa633522c2c88e59a1b5da2cc5ad1073adf6da243d9175f66db37c5ec
+  data.tar.gz: 9b6b86e11f484407bf3b8bb206308e67bff415a383723978ffa805a860559ce6e8a26c11dcb67a21e02464a1d710aeaa948e741b05dc900a80c384ea4d57ae4d

data/app/pb_kits/playbook/_playbook.scss

@@ -103,3 +103,5 @@
 @import './utilities/line_height';
 @import './utilities/display';
 @import './utilities/flexbox';
+
+@import 'pb_map/map';

data/app/pb_kits/playbook/data/menu.yml

@@ -55,6 +55,7 @@ kits:
   - lightbox
   - list
   - loading_inline
+  - map
   - nav
   - tags:
     - badge

data/app/pb_kits/playbook/index.js

@@ -10,8 +10,8 @@ export { default as Background } from './pb_background/_background'
 export { default as Badge } from './pb_badge/_badge'
 export { default as BarGraph } from './pb_bar_graph/_bar_graph'
 export { default as Body } from './pb_body/_body'
-export { default as BreadCrumbs } from './pb_bread_crumbs/_bread_crumbs'
 export { default as BreadCrumbItem } from './pb_bread_crumbs/_bread_crumb_item'
+export { default as BreadCrumbs } from './pb_bread_crumbs/_bread_crumbs'
 export { default as Button } from './pb_button/_button'
 export { default as ButtonToolbar } from './pb_button_toolbar/_button_toolbar'
 export { default as Caption } from './pb_caption/_caption'
@@ -53,11 +53,12 @@ export { default as LabelPill } from './pb_label_pill/_label_pill'
 export { default as LabelValue } from './pb_label_value/_label_value'
 export { default as Layout } from './pb_layout/_layout'
 export { default as Legend } from './pb_legend/_legend'
+export { default as Lightbox } from './pb_lightbox/_lightbox'
 export { default as LineGraph } from './pb_line_graph/_line_graph'
 export { default as List } from './pb_list/_list'
-export { default as Lightbox } from './pb_lightbox/_lightbox'
 export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
+export { default as Map} from './pb_map/_map'
 export { default as Message } from './pb_message/_message'
 export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'
 export { default as MultipleUsersStacked } from './pb_multiple_users_stacked/_multiple_users_stacked'

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx

@@ -23,15 +23,15 @@ const CollapsibleContent = ({
   const contentSpacing = globalProps(props, { padding })
 
   return (
-    <div className={classnames(contentCSS, className, contentSpacing)}>
-      <AnimateHeight
-          duration={300}
-          height={context.collapsed ? 0 : 'auto'}
-          id="bottom-section"
-      >
+    <AnimateHeight
+        duration={400}
+        height={context.collapsed ? 0 : 'auto'}
+        id="bottom-section"
+    >
+      <div className={classnames(contentCSS, className, contentSpacing)}>
         {children}
-      </AnimateHeight>
-    </div>
+      </div>
+    </AnimateHeight>
   )
 }
 

data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useRef } from 'react'
-import { useDropzone } from 'react-dropzone'
+import { useDropzone, DropzoneInputProps, DropzoneRootProps } from 'react-dropzone'
 import classnames from 'classnames'
 
 import { buildCss, buildDataProps, noop } from '../utilities/props'
@@ -38,13 +38,20 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     onFilesAccepted(files)
   }, [onFilesAccepted])
 
-  const { getRootProps, getInputProps, isDragActive, rejectedFiles } = useDropzone({
+  type DropZoneProps = {
+    getRootProps: () => DropzoneRootProps & any;
+    getInputProps: () => DropzoneInputProps & any;
+    isDragActive: boolean;
+    rejectedFiles: File[];
+  }
+
+  const { getRootProps, getInputProps, isDragActive, rejectedFiles }: DropZoneProps = useDropzone({
     accept,
     maxSize,
     onDrop,
   })
 
-  const prevRejected: any = useRef();
+  const prevRejected = useRef<File[] | null>(null);
 
   const maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
 

data/app/pb_kits/playbook/pb_list/_list.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import classnames from "classnames";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+
+type ListProps = {
+  aria?: { [key: string]: string };
+  borderless?: boolean;
+  className?: string;
+  children: React.ReactNode[] | React.ReactNode;
+  dark?: boolean;
+  data?: object;
+  id?: string;
+  layout: "" | "left" | "right";
+  ordered?: boolean;
+  role?: string;
+  tabIndex?: number;
+  text?: string;
+  size?: string;
+  variant?: string;
+  xpadding: boolean;
+};
+
+const List = (props: ListProps) => {
+  const {
+    aria = {},
+    borderless = false,
+    children,
+    className,
+    dark = false,
+    data = {},
+    id,
+    layout = "",
+    ordered = false,
+    role,
+    size = "",
+    tabIndex,
+    xpadding = false,
+    variant,
+    text,
+  } = props;
+
+  const layoutClass: { [key: string]: string } = {
+    left: "layout_left",
+    right: "layout_right",
+    default: "",
+  };
+
+  const childrenWithProps = React.Children.map(
+    children,
+    (child: React.ReactElement) => {
+      return React.cloneElement(child, { text, variant });
+    }
+  );
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_list_kit", layoutClass[layout], size, {
+      dark: dark,
+      borderless: borderless,
+      ordered: ordered,
+      xpadding: xpadding,
+    }),
+    globalProps(props),
+    className
+  );
+
+  return (
+    <div className={classes}>
+      {ordered ? (
+        <ol
+          {...ariaProps}
+          {...dataProps}
+          className={className}
+          id={id}
+          role={role}
+          tabIndex={tabIndex}
+        >
+          {childrenWithProps}
+        </ol>
+      ) : (
+        <ul
+          {...ariaProps}
+          {...dataProps}
+          className={className}
+          id={id}
+          role={role}
+          tabIndex={tabIndex}
+        >
+          {childrenWithProps}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default List;

data/app/pb_kits/playbook/pb_list/{_list_item.jsx → _list_item.tsx}

@@ -1,17 +1,15 @@
-/* @flow */
-
-import React, { type Node } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 type ListItemProps = {
-  aria?: object,
-  children: array<Node> | Node,
+  aria?: { [key: string]: string },
+  children: React.ReactNode[] | React.ReactNode,
   className?: string,
   data?: object,
   id?: string,
-  tabIndex?: string,
+  tabIndex?: number,
 }
 
 const ListItem = (props: ListItemProps) => {

data/app/pb_kits/playbook/pb_map/_map.scss

@@ -0,0 +1,6 @@
+@import "../tokens/typography";
+
+.pb_map {
+  font-family: $font_family_base;
+
+}

data/app/pb_kits/playbook/pb_map/_map.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+type MapProps = {
+  aria?: { [key: string]: string },
+  children?: React.ReactChild[] | React.ReactNode,
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+}
+
+const Map = (props: MapProps) => {
+  const {
+  aria = {},
+  children,
+  className,
+  data = {},
+  id,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_map'), globalProps(props), className)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default Map

data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx

@@ -0,0 +1,49 @@
+import React, { useRef, useEffect } from 'react'
+import Map from '../_map'
+
+import maplibregl from 'maplibre-gl'
+
+const MapDefault = () => {
+
+  const mapContainerRef = useRef(null)
+
+    useEffect(() => {
+      if (!maplibregl.supported()) {
+        alert('Your browser does not support MapLibre GL');
+        } else {
+         const map = new maplibregl.Map({
+            container: mapContainerRef.current,
+            style: 'https://api.maptiler.com/maps/positron/style.json?key=g8IQm57iZcbJ6Ky1HmG4',
+            center: [-75.379143, 39.831200],
+            zoom: 13,
+        })
+        //set marker/pin
+        /* eslint-disable-next-line */
+        const marker = new maplibregl.Marker({
+          color: "#0056CF",
+        }).setLngLat([-75.379143, 39.831200])
+        .setPopup(new maplibregl.Popup({className: 'map_popup'}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
+        .addTo(map);
+
+        //add controls
+        map.addControl(new maplibregl.NavigationControl())
+
+      }
+    }, [])
+return ( 
+  <Map>
+       <div
+           ref={mapContainerRef}
+           style={{
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              top: 0, 
+              bottom: 0,
+           }}
+        />
+    </Map>
+)
+}
+
+export default MapDefault

data/app/pb_kits/playbook/pb_map/docs/example.yml

@@ -0,0 +1,6 @@
+examples:
+  
+  
+  react:
+  - map_default: Default
+  

data/app/pb_kits/playbook/pb_map/docs/index.js

@@ -0,0 +1 @@
+export { default as MapDefault } from './_map_default.jsx'

data/app/pb_kits/playbook/pb_map/map.test.jsx

@@ -0,0 +1,17 @@
+import { renderKit } from '../utilities/test-utils'
+
+import { Map } from '../'
+
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+
+test('generated scaffold test - update me', () => {
+  const props = {
+    data: { testid: 'default' }
+  }
+
+  const kit = renderKit(Map , props)
+  expect(kit).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -0,0 +1,239 @@
+import React, { useEffect } from "react";
+import ReactDOM from "react-dom";
+
+import {
+  Popper,
+  Manager as PopperManager,
+  Modifier,
+  PopperProps,
+  Reference as PopperReference,
+} from "react-popper";
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  noop,
+} from "../utilities/props";
+
+import classnames from "classnames";
+import { globalProps, GlobalProps } from "../utilities/globalProps";
+
+type PbPopoverProps = {
+  aria?: { [key: string]: string };
+  className?: string;
+  closeOnClick?: "outside" | "inside" | "any";
+  data?: object;
+  id?: string;
+  offset?: boolean;
+  reference: PopperReference & any;
+  show?: boolean;
+  shouldClosePopover?: (arg0: boolean) => boolean | boolean;
+} & GlobalProps &
+  PopperProps<any>;
+
+// Prop enabled default modifiers here
+// https://popper.js.org/docs/v2/modifiers
+
+const POPOVER_MODIFIERS = {
+  offset: {
+    //https://popper.js.org/docs/v2/modifiers/offset/
+    enabled: true,
+    name: "offset",
+    options: {
+      offset: [0, 20],
+    },
+    phase: "main",
+  },
+};
+
+const popoverModifiers = ({
+  modifiers,
+  offset,
+}: {
+  modifiers: Modifier<any> & any;
+  offset: {};
+}) => {
+  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
+};
+
+const Popover = (props: PbPopoverProps) => {
+  const {
+    aria = {},
+    className,
+    children,
+    data = {},
+    id,
+    modifiers,
+    offset,
+    placement,
+    referenceElement,
+    zIndex,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+  } = props;
+
+  const popoverSpacing =
+    globalProps(props).includes("dark") || !globalProps(props)
+      ? "p_sm"
+      : globalProps(props);
+  const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
+  const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
+  const widthHeightStyles = () => {
+    return Object.assign(
+      {},
+      maxHeight ? { maxHeight: maxHeight } : {},
+      maxWidth ? { maxWidth: maxWidth } : {},
+      minHeight ? { minHeight: minHeight } : {},
+      minWidth ? { minWidth: minWidth } : {}
+    );
+  };
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_popover_kit"),
+    globalProps(props),
+    className
+  );
+
+  return (
+    <Popper
+      modifiers={popoverModifiers({ modifiers, offset })}
+      placement={placement}
+      referenceElement={referenceElement}
+    >
+      {({ placement, ref, style }) => {
+        return (
+          <div
+            {...ariaProps}
+            {...dataProps}
+            className={classes}
+            data-placement={placement}
+            id={id}
+            ref={ref}
+            style={Object.assign({}, style, zIndexStyle)}
+          >
+            <div
+              className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
+            >
+              <div
+                className={classnames(
+                  "pb_popover_body",
+                  popoverSpacing,
+                  overflowHandling
+                )}
+                style={widthHeightStyles()}
+              >
+                {children}
+              </div>
+            </div>
+          </div>
+        );
+      }}
+    </Popper>
+  );
+};
+
+const PbReactPopover = (props: PbPopoverProps) => {
+  const {
+    className,
+    children,
+    modifiers = [],
+    offset = false,
+    placement = "left",
+    portal = "body",
+    reference,
+    referenceElement,
+    show = false,
+    usePortal = true,
+    zIndex,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+  } = props;
+
+  useEffect(() => {
+    const { closeOnClick, shouldClosePopover = noop } = props;
+
+    if (!closeOnClick) return;
+
+    document.body.addEventListener(
+      "click",
+      ({ target }) => {
+        const targetIsPopover =
+          (target as HTMLElement).closest("[class^=pb_popover_tooltip]") !==
+          null;
+        const targetIsReference =
+          (target as HTMLElement).closest(".pb_popover_reference_wrapper") !==
+          null;
+
+        switch (closeOnClick) {
+          case "outside":
+            if (!targetIsPopover || targetIsReference) {
+              shouldClosePopover(true);
+            }
+            break;
+          case "inside":
+            if (targetIsPopover || targetIsReference) {
+              shouldClosePopover(true);
+            }
+            break;
+          case "any":
+            shouldClosePopover(true);
+            break;
+        }
+      },
+      { capture: true }
+    );
+  }, []);
+
+  const popoverComponent = (
+    <Popover
+      className={className}
+      maxHeight={maxHeight}
+      maxWidth={maxWidth}
+      minHeight={minHeight}
+      minWidth={minWidth}
+      modifiers={modifiers}
+      offset={offset}
+      placement={placement}
+      referenceElement={referenceElement}
+      zIndex={zIndex}
+      {...props}
+    >
+      {children}
+    </Popover>
+  );
+
+  return (
+    <PopperManager>
+      <>
+        {reference && !referenceElement && (
+          <PopperReference>
+            {({ ref }) => (
+              <span className="pb_popover_reference_wrapper" ref={ref}>
+                <reference.type {...reference.props} />
+              </span>
+            )}
+          </PopperReference>
+        )}
+        {show &&
+          (usePortal ? (
+            <>
+              {ReactDOM.createPortal(
+                popoverComponent,
+                document.querySelector(portal)
+              )}
+            </>
+          ) : (
+            { popoverComponent }
+          ))}
+      </>
+    </PopperManager>
+  );
+};
+
+export default PbReactPopover;

data/app/pb_kits/playbook/pb_popover/{index.js → index.ts}

@@ -1,9 +1,13 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import { createPopper } from '@popperjs/core'
+import { createPopper, Instance, Placement } from '@popperjs/core'
 
 const POPOVER_OFFSET_Y = [0, 20]
 
 export default class PbPopover extends PbEnhancedElement {
+  popper: Instance
+  _triggerElement: HTMLElement
+  _tooltip: HTMLElement
+  element: HTMLElement
   static get selector() {
     return '[data-pb-popover-kit]'
   }
@@ -14,8 +18,8 @@ export default class PbPopover extends PbEnhancedElement {
 
   connect() {
     this.moveTooltip()
-    this.popper = createPopper(this.triggerElement, this.tooltip, {
-      placement: this.position,
+    this.popper = createPopper (this.triggerElement, this.tooltip, {
+      placement: this.position as Placement,
       strategy: 'fixed',
       modifiers: [
         {
@@ -27,7 +31,7 @@ export default class PbPopover extends PbEnhancedElement {
       ],
     })
 
-    this.triggerElement.addEventListener('click', (event) => {
+    this.triggerElement.addEventListener('click', (event: Event) => {
       event.preventDefault()
       event.stopPropagation()
 
@@ -43,8 +47,8 @@ export default class PbPopover extends PbEnhancedElement {
   }
 
   checkCloseTooltip() {
-    document.querySelector('body').addEventListener('click', ({ target }) => {
-      const isTooltipElement = target.closest(`#${this.tooltipId}`) !== null
+    document.querySelector('body').addEventListener('click', ({ target } ) => {
+      const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
 
       switch (this.closeOnClick) {
       case 'any':