playbook_ui 11.18.0.pre.alpha.pagutility1 → 11.19.0.pre.alpha.map1

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

@@ -1,227 +0,0 @@
-/* eslint-disable react/no-multi-comp */
-// @flow
-
-import React, {useEffect} from "react";
-import ReactDOM from "react-dom";
-
-import {
-  Popper,
-  Manager as PopperManager,
-  PopperProps,
-  Reference as PopperReference,
-} from "react-popper";
-
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-  noop,
-} from "../utilities/props";
-
-import classnames from "classnames";
-import { globalProps } from "../utilities/globalProps";
-
-type PbPopoverProps = {
-  aria?: object,
-  className?: string,
-  closeOnClick?: "outside" | "inside",
-  data?: object,
-  id?: String,
-  offset?: boolean,
-  reference: PopperReference,
-  show?: boolean,
-  shouldClosePopover?: () => boolean,
-} & PopperProps;
-
-// 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 }) => {
-  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.closest('[class^=pb_popover_tooltip]') !== null
-      const targetIsReference =
-        target.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>
-      <If condition={reference && !referenceElement}>
-        <PopperReference>
-          {({ ref }) => (
-            <span className="pb_popover_reference_wrapper"
-                ref={ref}
-            >
-              <reference.type {...reference.props} />
-            </span>
-          )}
-        </PopperReference>
-      </If>
-      <If condition={show}>
-        <If condition={usePortal}>
-          {ReactDOM.createPortal(
-            popoverComponent,
-            document.querySelector(portal)
-          )}
-          <Else />
-          {popoverComponent}
-        </If>
-      </If>
-    </PopperManager>
-  );
-};
-
-export default PbReactPopover;

data/app/pb_kits/playbook/utilities/_pagination.scss

@@ -1,68 +0,0 @@
-@import "../tokens/colors";
-@import "../tokens/typography";
-@import "../tokens/border_radius";
-@import "../tokens/shadows";
-
-.pb_pagination {
-  display: inline-block;
-  border-radius: $border_rad_light;
-  border: 1px solid $border_light;
-  background-color: $white;
-  padding: 3px 0px 3.6px 0px;
-  li {
-    display: inline;  
-    > a, li > span {
-    padding: 7px 13px;
-    text-decoration: none;
-    margin-left: -1px;
-    border: 0 !important;
-  }}
-  li:first-child > a, li:first-child > span  {
-    padding: 7px 13px;
-    margin-left: .5px;
-    border-right: 1px solid $border_light !important;
-    z-index: 2;
-  }
-  li:last-child > a, li:last-child > span {
-    padding: 7px 13px;
-    margin-right: .5px;
-    border-left: 1px solid $border_light !important;
-    z-index: 2;
-  }
-  a {
-    color: $text_lt_default !important;
-    font-size: $text_small;
-    font-weight: $regular;
-    border: none;
-
-    &:hover {
-      background-color: $active_light;
-      color: $primary !important;
-      border-radius: $border_rad_light;
-    }
-
-    &:focus {
-      outline: 1px solid $primary !important;
-      border-radius: $border_rad_light;
-      outline-offset: -1px;
-    }
-  }
-  .active > span {
-    background-color: $primary !important;
-    border-radius: $border_rad_light;
-    color: #fff;
-    padding: 7px 10px;
-    border: 0 !important;
-    text-decoration: none;
-    font-weight: $bold;
-    font-size: $text_small;
-
-    &:hover {
-      box-shadow: $shadow_deeper;
-    }
-  }
-  .disabled > span {
-    padding: 7px 10px;
-    font-size: $text_small;
-  }
-}

data/lib/playbook/pagination_renderer.rb

@@ -1,41 +0,0 @@
-# frozen_string_literal: true
-
-require "will_paginate/view_helpers/action_view"
-
-module Playbook
-  module Pagination
-    class Rails < WillPaginate::ActionView::LinkRenderer
-      def container_attributes
-        { class: "pb_pagination" }
-      end
-
-      def page_number(page)
-        if page == current_page
-          tag("li", tag("span", page), class: "active")
-        else
-          tag("li", link(page, page, rel: rel_value(page)))
-        end
-      end
-
-      def previous_or_next_page(page, text, classname)
-        if page
-          tag("li", link(text, page), class: classname)
-        else
-          tag("li", tag("span", text), class: "%s disabled")
-        end
-      end
-
-      def gap; end
-
-      def previous_page
-        num = @collection.current_page > 1 && @collection.current_page - 1
-        previous_or_next_page(num, "<i class='far fa-chevron-left fa-xs'></i>", "prev")
-      end
-
-      def next_page
-        num = @collection.current_page < @collection.total_pages && @collection.current_page + 1
-        previous_or_next_page(num, "<i class='far fa-chevron-right fa-xs'></i>", "next")
-      end
-    end
-  end
-end