playbook_ui 11.19.0.pre.alpha.pagpassthrough1 → 11.19.0.pre.typeahead1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ff556241a73204fa1fcb1b7f9e8c5d3d41dde1cbab356e52f52c42ccab521c0d
-  data.tar.gz: be66d4782e1117833f5e34036a010f71486d91318ad6241e82487964d9583602
+  metadata.gz: 1239957037bcd6ef4b8211bd071fce1cc7b57bb2751f00fcbbe305665f024b24
+  data.tar.gz: 6b6a529a7c84b1dbfd2911947ff891abe8eb04935cccd2623265dfa0da73cae4
 SHA512:
-  metadata.gz: 9763ce291cf8f35999f873b742e258a28c07f6c1cc42fc59399ff8f2d32cf80a27cb3a583188726c0449757d19edcde02460b4e0744f8fd1599343c1aa995ced
-  data.tar.gz: 6a93d271d454a850b50bc5a940242c97ba55962a9dc6cca4faf375eaf223e07385137f2c2409554d10be4291a7f052553a3bde48c9027e12b58869606f6ee71a
+  metadata.gz: 747395a9c410e99207bdbb7d0bede2028503ec675e8754bcff0e1cf92579d3fd7e66134ad5c99417c751451968ab4f1ab9093b2036bf40985480b7a8707dfc51
+  data.tar.gz: ae572fac37a574c478dea054368416465644b6163a3593068f7559bf3f35516c9851e3db67f84d43cd2f8d69d330bf38dd8231f15381e6199c01df198ea9b5de

data/app/pb_kits/playbook/_playbook.scss

@@ -103,5 +103,3 @@
 @import './utilities/line_height';
 @import './utilities/display';
 @import './utilities/flexbox';
-@import './utilities/pagination';
-@import 'pb_paginate/paginate';

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

@@ -104,4 +104,3 @@ kits:
     - title_detail
   - user_badge
   - walkthrough
-  - paginate

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

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

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

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

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

@@ -0,0 +1,98 @@
+/* @flow */
+
+import React, { type Node } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+type ListProps = {
+  aria?: object,
+  borderless: boolean,
+  className?: string,
+  children: array<Node> | Node,
+  dark: boolean,
+  data?: object,
+  id?: string,
+  layout: "" | "left" | "right",
+  ordered: boolean,
+  role?: string,
+  tabIndex?: string,
+  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 = {
+    left: 'layout_left',
+    right: 'layout_right',
+    default: '',
+  }
+
+  const childrenWithProps = React.Children.map(children, (child) => {
+    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}
+    >
+      <If condition={ordered}>
+        <ol
+            {...ariaProps}
+            {...dataProps}
+            className={className}
+            id={id}
+            role={role}
+            tabIndex={tabIndex}
+        >
+          {childrenWithProps}
+        </ol>
+        <Else />
+        <ul
+            {...ariaProps}
+            {...dataProps}
+            className={className}
+            id={id}
+            role={role}
+            tabIndex={tabIndex}
+        >
+          {childrenWithProps}
+        </ul>
+      </If>
+    </div>
+  )
+}
+
+export default List

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

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

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

@@ -0,0 +1,227 @@
+/* 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/pb_popover/{index.ts → index.js}

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

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.19.0"
-  VERSION = "11.19.0.pre.alpha.pagpassthrough1"
+  PREVIOUS_VERSION = "11.18.0"
+  VERSION = "11.19.0.pre.typeahead1"
 end

data/lib/playbook.rb

@@ -12,8 +12,6 @@ require "playbook/pb_doc_helper"
 require "playbook/kit_base"
 require "playbook/kit_resolver"
 require "playbook/markdown"
-# require "playbook/pagination_renderer"
-# REMOVED TO MAKE THIS AN OPTIONAL INCLUDE FOR CLIENTS
 
 module Playbook
   ROOT_PATH = Pathname.new(File.join(__dir__, ".."))

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.19.0.pre.alpha.pagpassthrough1
+  version: 11.19.0.pre.typeahead1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-16 00:00:00.000000000 Z
+date: 2023-01-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -269,20 +269,6 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: 1.2018.9
-- !ruby/object:Gem::Dependency
-  name: will_paginate
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 3.3.1
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - '='
-      - !ruby/object:Gem::Version
-        version: 3.3.1
 description: Playbook Design System. Built for Nitro, but powering all.
 email:
 - nitroux@powerhrg.com
@@ -1350,9 +1336,9 @@ files:
 - app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js
 - app/pb_kits/playbook/pb_line_graph/line_graph.html.erb
 - app/pb_kits/playbook/pb_line_graph/line_graph.rb
+- app/pb_kits/playbook/pb_list/_list.jsx
 - app/pb_kits/playbook/pb_list/_list.scss
-- app/pb_kits/playbook/pb_list/_list.tsx
-- app/pb_kits/playbook/pb_list/_list_item.tsx
+- app/pb_kits/playbook/pb_list/_list_item.jsx
 - app/pb_kits/playbook/pb_list/_list_mixin.scss
 - app/pb_kits/playbook/pb_list/docs/_description.md
 - app/pb_kits/playbook/pb_list/docs/_list_borderless.html.erb
@@ -1477,11 +1463,6 @@ files:
 - app/pb_kits/playbook/pb_online_status/docs/index.js
 - app/pb_kits/playbook/pb_online_status/online_status.html.erb
 - app/pb_kits/playbook/pb_online_status/online_status.rb
-- app/pb_kits/playbook/pb_paginate/_paginate.scss
-- app/pb_kits/playbook/pb_paginate/docs/_paginate_default.html.erb
-- app/pb_kits/playbook/pb_paginate/docs/example.yml
-- app/pb_kits/playbook/pb_paginate/paginate.html.erb
-- app/pb_kits/playbook/pb_paginate/paginate.rb
 - app/pb_kits/playbook/pb_passphrase/_passphrase.jsx
 - app/pb_kits/playbook/pb_passphrase/_passphrase.scss
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
@@ -1552,8 +1533,8 @@ files:
 - app/pb_kits/playbook/pb_pill/docs/index.js
 - app/pb_kits/playbook/pb_pill/pill.html.erb
 - app/pb_kits/playbook/pb_pill/pill.rb
+- app/pb_kits/playbook/pb_popover/_popover.jsx
 - app/pb_kits/playbook/pb_popover/_popover.scss
-- app/pb_kits/playbook/pb_popover/_popover.tsx
 - app/pb_kits/playbook/pb_popover/docs/_description.md
 - app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx
@@ -1568,10 +1549,9 @@ files:
 - app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx
 - app/pb_kits/playbook/pb_popover/docs/example.yml
 - app/pb_kits/playbook/pb_popover/docs/index.js
-- app/pb_kits/playbook/pb_popover/index.ts
+- app/pb_kits/playbook/pb_popover/index.js
 - app/pb_kits/playbook/pb_popover/popover.html.erb
 - app/pb_kits/playbook/pb_popover/popover.rb
-- app/pb_kits/playbook/pb_popover/popover.test.js
 - app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx
 - app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss
 - app/pb_kits/playbook/pb_progress_pills/docs/_description.md
@@ -2280,7 +2260,6 @@ files:
 - app/pb_kits/playbook/utilities/_max_width.scss
 - app/pb_kits/playbook/utilities/_mixins.scss
 - app/pb_kits/playbook/utilities/_number_spacing.scss
-- app/pb_kits/playbook/utilities/_pagination.scss
 - app/pb_kits/playbook/utilities/_positioning.scss
 - app/pb_kits/playbook/utilities/_shadow.scss
 - app/pb_kits/playbook/utilities/_spacing.scss
@@ -2346,7 +2325,6 @@ files:
 - lib/playbook/markdown/template_handler.rb
 - lib/playbook/number_spacing.rb
 - lib/playbook/order.rb
-- lib/playbook/pagination_renderer.rb
 - lib/playbook/pb_doc_helper.rb
 - lib/playbook/pb_forms_helper.rb
 - lib/playbook/pb_kit_helper.rb

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

@@ -1,97 +0,0 @@
-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_paginate/_paginate.scss

@@ -1,3 +0,0 @@
-.pb_paginate {
-
-}

data/app/pb_kits/playbook/pb_paginate/docs/_paginate_default.html.erb

@@ -1,19 +0,0 @@
-<%= pb_rails("title", props: { size: 4, text: "Default will_paginate"}) %>
-<%= will_paginate @users %>
-<%= pb_rails("body") do %>
-  You need to add: <code> require 'will_paginate'</code> in your app to use.
-<% end %>
-<br><br>
-
-<%= pb_rails("title", props: { size: 4, text: "Playbook Renderer"}) %>
-<%= will_paginate @users, renderer: Playbook::Pagination::Rails %>
-<%= pb_rails("body") do %>
-  You need to also add: <code>require "playbook/pagination_renderer"</code> in your app to use.
-<% end %>
-<br><br>
-
-<%= pb_rails("title", props: { size: 4, text: "Playbook Kit (Passthrough)"}) %>
-<%= pb_rails("paginate", props: { stragety: "will_paginate", model: @users }) %>
-<%= pb_rails("body") do %>
-  Same...You need to also add: <code>require "playbook/pagination_renderer"</code> in your app to use.
-<% end %>

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

@@ -1,6 +0,0 @@
-examples:
-  
-  rails:
-  - paginate_default: Default
-  
-  

data/app/pb_kits/playbook/pb_paginate/paginate.html.erb

@@ -1,5 +0,0 @@
-<%= will_paginate object.model, renderer: Playbook::Pagination::Rails %>
-
-<%# Couldn't get this working %>
-<%# Need a Rails Dev to look %>
-<%# <%= eval(object.stragety) object.model, renderer: Playbook::Pagination::Rails %>

data/app/pb_kits/playbook/pb_paginate/paginate.rb

@@ -1,14 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbPaginate
-    class Paginate < ::Playbook::KitBase
-      prop :stragety # Need to add protection
-      prop :model # Need to add protection
-
-      def classname
-        generate_classname("pb_paginate")
-      end
-    end
-  end
-end

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

@@ -1,239 +0,0 @@
-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/popover.test.js

@@ -1,222 +0,0 @@
-import React from "react";
-import { render, screen, fireEvent } from "../utilities/test-utils";
-import { Button, PbReactPopover } from "..";
-
-const testId = "popover-kit";
-
-//Test default popover
-const PopoverTest = () => {
-  const [mockState, setMockState] = React.useState(false)
-  const togglePopover = () => {
-    setMockState(!mockState)
-  }
-
-  const popoverReference = (
-    <Button onClick={togglePopover} 
-        text="Click Me"
-     />
-  );
-  return (
-      <PbReactPopover
-          offset
-          reference={popoverReference}
-          show={mockState}
-      >
-        {"Click Anywhere"}
-      </PbReactPopover>
-  )
-};
-//Test popover with z-index
-const PopoverTestZIndex = () => {
-  const [mockState, setMockState] = React.useState(false)
-  const togglePopover = () => {
-    setMockState(!mockState)
-  }
-
-  const popoverReference = (
-    <Button onClick={togglePopover} 
-        text="Click Me"
-     />
-  );
-  return (
-      <PbReactPopover
-          offset
-          reference={popoverReference}
-          show={mockState}
-          zIndex={3}
-      >
-        {"Click Anywhere"}
-      </PbReactPopover>
-  )
-};
-
-//Test popover with max-height and max-width
-const PopoverTestHeight = () => {
-  const [mockState, setMockState] = React.useState(false)
-  const togglePopover = () => {
-    setMockState(!mockState)
-  }
-
-  const popoverReference = (
-    <Button onClick={togglePopover} 
-        text="Click Me"
-     />
-  );
-  return (
-      <PbReactPopover
-          maxHeight="150px"
-          maxWidth="240px"
-          offset
-          reference={popoverReference}
-          show={mockState}
-      >
-        {"Click Anywhere"}
-      </PbReactPopover>
-  )
-};
-
-//Test Popover with click to close 'anywhere' 
-const PopoverTestClicktoClose = () => {
-  const [mockState, setMockState] = React.useState(false)
-  const togglePopover = () => {
-    setMockState(!mockState)
-  }
-  const handleShouldClosePopover = (shouldClosePopover) => {
-    setMockState(!shouldClosePopover)
-  }
-
-  const popoverReference = (
-    <Button onClick={togglePopover} 
-        text="Click Me"
-     />
-  );
-  return (
-      <PbReactPopover
-          closeOnClick="any"
-          offset
-          reference={popoverReference}
-          shouldClosePopover={handleShouldClosePopover}
-          show={mockState}
-      >
-        {"Click Anywhere"}
-      </PbReactPopover>
-  )
-};
-
-//Test Popover with click to close 'inside' 
-const PopoverTestClicktoClose2 = () => {
-  const [mockState, setMockState] = React.useState(false)
-  const togglePopover = () => {
-    setMockState(!mockState)
-  }
-  const handleShouldClosePopover = (shouldClosePopover) => {
-    setMockState(!shouldClosePopover)
-  }
-
-  const popoverReference = (
-    <Button onClick={togglePopover} 
-        text="Click Me"
-     />
-  );
-  return (
-      <PbReactPopover
-          closeOnClick="inside"
-          offset
-          reference={popoverReference}
-          shouldClosePopover={handleShouldClosePopover}
-          show={mockState}
-      >
-        {"Click Inside"}
-      </PbReactPopover>
-  )
-};
-
-//Test Popover with click to close 'outside' 
-const PopoverTestClicktoClose3 = () => {
-  const [mockState, setMockState] = React.useState(false)
-  const togglePopover = () => {
-    setMockState(!mockState)
-  }
-  const handleShouldClosePopover = (shouldClosePopover) => {
-    setMockState(!shouldClosePopover)
-  }
-
-  const popoverReference = (
-    <Button onClick={togglePopover} 
-        text="Click Me"
-     />
-  );
-  return (
-      <PbReactPopover
-          closeOnClick="outside"
-          offset
-          reference={popoverReference}
-          shouldClosePopover={handleShouldClosePopover}
-          show={mockState}
-      >
-        {"Click Outside"}
-      </PbReactPopover>
-  )
-};
-
-
-  test("renders Popover", () => {
-    render(<PopoverTest data={{ testid: testId}}/>)
-    const btn = screen.getByText(/click me/i)
-    fireEvent.click(btn);
-    const kit = screen.getByText("Click Anywhere");
-    expect(kit).toBeInTheDocument(); 
-  });
-
-  test("renders Popover with z index", () => {
-    render(<PopoverTestZIndex data={{ testid: testId}}/>)
-    const btn = screen.getByText(/click me/i)
-    fireEvent.click(btn);
-    const kit = screen.getByText("Click Anywhere");
-    expect(kit).toHaveClass("pb_popover_body z_index_3"); 
-  });
-
-  test("renders Popover with max height and max width", () => {
-    render(<PopoverTestHeight data={{ testid: testId}}/>)
-    const btn = screen.getByText(/click me/i)
-    fireEvent.click(btn);
-    const kit = screen.getByText("Click Anywhere");
-    expect(kit).toHaveClass("pb_popover_body max_width_240px overflow_handling"); 
-  });
-
-  test("closes Popover on click anywhere", () => {
-    render(<PopoverTestClicktoClose data={{ testid: testId}}/>)
-    const btn = screen.getByText(/click me/i)
-    fireEvent.click(btn);
-    const kit = screen.getByText("Click Anywhere");
-    expect(kit).toBeInTheDocument(); 
-    fireEvent.click(kit);
-   
-    expect(kit).not.toBeInTheDocument();
-
-  });
-
-  test("closes Popover on click inside", () => {
-    render(<PopoverTestClicktoClose2 data={{ testid: testId}}/>)
-    const btn = screen.getByText(/click me/i)
-    fireEvent.click(btn);
-    const kit = screen.getByText("Click Inside");
-    expect(kit).toBeInTheDocument(); 
-    fireEvent.click(kit);
-   
-    expect(kit).not.toBeInTheDocument();
-
-  });
-
-  test("closes Popover on click outside", () => {
-    render(<PopoverTestClicktoClose3 data={{ testid: testId}}/>)
-    const btn = screen.getByText(/click me/i)
-    fireEvent.click(btn);
-    const kit = screen.getByText("Click Outside");
-    expect(kit).toBeInTheDocument(); 
-    fireEvent.click(kit);
-    expect(kit).toBeInTheDocument(); 
-    fireEvent.click(btn);
-    expect(kit).not.toBeInTheDocument();
-
-  });

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

@@ -1,69 +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;
-  margin: 10px 0;
-  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 13px;
-    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