playbook_ui 11.16.0.pre.alpha.pagination.rails1 → 11.16.0.pre.alpha.reactupgrade1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d1c2dd6e15de3851fa13af4d58c06b78448261e4dc2a973718ae53f518324638
-  data.tar.gz: 896cb320d58e4be679254fafdda40d7269f53161bcb1b417c6c5e2c725173de4
+  metadata.gz: d042b0ab3d8b097bd1fcf548916bcf509dbe7d2ba6992997d581dcc37b52f6fd
+  data.tar.gz: 569c342ad86165547fcd18928e2c17c493492f1f32a9dca6644ad60c6ee259f9
 SHA512:
-  metadata.gz: 25c4283002f9b516e41e3f4a66e13fa1ddc71935c245001141357df87637500d5d9e87361bc35ccf6feee206ad0d8982701ea1d80390d5a937502657a8bc12d4
-  data.tar.gz: a87f20dc862b0f749fd3950a950596e97c8712a4ec130bf2856d3bd6f854fa41fcc3d3cedae27d043e3771d3d5c29a1b07f096831cac746f7d86ef1e220deadc
+  metadata.gz: f767315ad846a1277a8226a025c64c30bf24743657314979117872662eee3c24b9647edd3e7ffb4d4dad6655a748f9832206c08745e62417084e1462863e1a9d
+  data.tar.gz: 3694adfc7dc8c7b49911b8935b308ca67daeb9de57a6b30a45ce806e97c64449cd3d5896a7b10d54c801899cb1bd98863170a269ebe187588ca81aad8052ace2

data/app/pb_kits/playbook/_playbook.scss

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

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

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

data/app/pb_kits/playbook/index.js

@@ -53,9 +53,9 @@ 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 Message } from './pb_message/_message'
@@ -64,7 +64,6 @@ export { default as MultipleUsersStacked } from './pb_multiple_users_stacked/_mu
 export { default as Nav } from './pb_nav/_nav'
 export { default as NavItem } from './pb_nav/_item'
 export { default as OnlineStatus } from './pb_online_status/_online_status'
-export { default as Pagination} from './pb_pagination/_pagination'
 export { default as Passphrase } from './pb_passphrase/_passphrase'
 export { default as PbReactPopover } from './pb_popover/_popover'
 export { default as Person } from './pb_person/_person'

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

@@ -1,19 +1,25 @@
+/* eslint-disable react/no-multi-comp */
 // @flow
 
-import React from 'react'
-import ReactDOM from 'react-dom'
+import React, {useEffect} from "react";
+import ReactDOM from "react-dom";
 
 import {
   Popper,
   Manager as PopperManager,
   PopperProps,
   Reference as PopperReference,
-} from 'react-popper'
+} from "react-popper";
 
-import { buildAriaProps, buildCss, buildDataProps, noop } from '../utilities/props'
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  noop,
+} from "../utilities/props";
 
-import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps'
+import classnames from "classnames";
+import { globalProps } from "../utilities/globalProps";
 
 type PbPopoverProps = {
   aria?: object,
@@ -25,7 +31,7 @@ type PbPopoverProps = {
   reference: PopperReference,
   show?: boolean,
   shouldClosePopover?: () => boolean,
-} & PopperProps
+} & PopperProps;
 
 // Prop enabled default modifiers here
 // https://popper.js.org/docs/v2/modifiers
@@ -34,17 +40,17 @@ const POPOVER_MODIFIERS = {
   offset: {
     //https://popper.js.org/docs/v2/modifiers/offset/
     enabled: true,
-    name: 'offset',
+    name: "offset",
     options: {
       offset: [0, 20],
     },
-    phase: 'main',
+    phase: "main",
   },
-}
+};
 
 const popoverModifiers = ({ modifiers, offset }) => {
-  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers
-}
+  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
+};
 
 const Popover = (props: PbPopoverProps) => {
   const {
@@ -62,11 +68,14 @@ const Popover = (props: PbPopoverProps) => {
     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 } : {}
+  } = 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(
       {},
@@ -74,15 +83,15 @@ const Popover = (props: PbPopoverProps) => {
       maxWidth ? { maxWidth: maxWidth } : {},
       minHeight ? { minHeight: minHeight } : {},
       minWidth ? { minWidth: minWidth } : {}
-    )
-  }
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+    );
+  };
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
   const classes = classnames(
-    buildCss('pb_popover_kit'),
+    buildCss("pb_popover_kit"),
     globalProps(props),
     className
-  )
+  );
 
   return (
     <Popper
@@ -99,20 +108,14 @@ const Popover = (props: PbPopoverProps) => {
               data-placement={placement}
               id={id}
               ref={ref}
-              style={Object.assign(
-                {},
-                style,
-                zIndexStyle
-              )}
+              style={Object.assign({}, style, zIndexStyle)}
           >
             <div
-                className={classnames(
-                `${buildCss('pb_popover_tooltip')} show`
-              )}
+                className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
             >
               <div
                   className={classnames(
-                  'pb_popover_body',
+                  "pb_popover_body",
                   popoverSpacing,
                   overflowHandling
                 )}
@@ -122,25 +125,33 @@ const Popover = (props: PbPopoverProps) => {
               </div>
             </div>
           </div>
-        )
+        );
       }}
     </Popper>
-  )
-}
-
-export default class PbReactPopover extends React.Component<PbPopoverProps> {
-  static defaultProps = {
-    modifiers: [],
-    offset: false,
-    placement: 'left',
-    portal: 'body',
-    show: false,
-    shouldClosePopover: noop,
-    usePortal: true,
-  }
-
-  componentDidMount() {
-    const { closeOnClick, shouldClosePopover } = this.props
+  );
+};
+
+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
 
@@ -151,87 +162,66 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
         target.closest('.pb_popover_reference_wrapper') !== null
 
       switch (closeOnClick) {
-      case 'outside':
-        if (!targetIsPopover || targetIsReference) {
-          shouldClosePopover(true)
-        }
-        break
-      case 'inside':
-        if (targetIsPopover || targetIsReference) {
+        case 'outside':
+          if (!targetIsPopover || targetIsReference) {
+            shouldClosePopover(true)
+          }
+          break
+        case 'inside':
+          if (targetIsPopover || targetIsReference) {
+            shouldClosePopover(true)
+          }
+          break
+        case 'any':
           shouldClosePopover(true)
-        }
-        break
-      case 'any':
-        shouldClosePopover(true)
-        break
+          break
       }
-    })
-  }
-
-  props: PbPopoverProps
-
-  render() {
-    const {
-      className,
-      children,
-      modifiers,
-      offset,
-      placement,
-      portal,
-      reference,
-      referenceElement,
-      show,
-      usePortal,
-      zIndex,
-      maxHeight,
-      maxWidth,
-      minHeight,
-      minWidth,
-    } = this.props
-
-    const popoverComponent = (
-      <Popover
-          {...this.props}
-          className={className}
-          maxHeight={maxHeight}
-          maxWidth={maxWidth}
-          minHeight={minHeight}
-          minWidth={minWidth}
-          modifiers={modifiers}
-          offset={offset}
-          placement={placement}
-          referenceElement={referenceElement}
-          zIndex={zIndex}
-      >
-        {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>
+    }, { 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>
-      </PopperManager>
-    )
-  }
-}
+      </If>
+    </PopperManager>
+  );
+};
+
+export default PbReactPopover;

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx

@@ -31,7 +31,7 @@ const PopoverClose = (props) => {
   }
 
   const handleAnyTogglePopover = () => {
-    setAnyShowPopover(!showOutsidePopover)
+    setAnyShowPopover(!showAnyPopover)
   }
 
   const insidePopoverTrigger = (

data/app/pb_kits/playbook/playbook-doc.js

@@ -60,7 +60,6 @@ import * as MultipleUsers from 'pb_multiple_users/docs'
 import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
 import * as Nav from 'pb_nav/docs'
 import * as OnlineStatus from 'pb_online_status/docs'
-import * as Pagination from 'pb_pagination/docs'
 import * as Passphrase from 'pb_passphrase/docs'
 import * as PbReactPopover from 'pb_popover/docs'
 import * as Person from 'pb_person/docs'
@@ -158,7 +157,6 @@ WebpackerReact.setup({
   ...MultipleUsersStacked,
   ...Nav,
   ...OnlineStatus,
-  ...Pagination,
   ...Passphrase,
   ...PbReactPopover,
   ...Person,

data/lib/playbook/kit_base.rb

@@ -19,7 +19,6 @@ require "playbook/flex"
 require "playbook/flex_grow"
 require "playbook/flex_shrink"
 require "playbook/order"
-require "playbook/pagination_renderer"
 
 module Playbook
   class KitBase < ViewComponent::Base
@@ -44,7 +43,6 @@ module Playbook
     include Playbook::FlexGrow
     include Playbook::FlexShrink
     include Playbook::Order
-    include Playbook::Pagination
 
     prop :id
     prop :data, type: Playbook::Props::Hash, default: {}

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "11.15.0"
-  VERSION = "11.16.0.pre.alpha.pagination.rails1"
+  VERSION = "11.16.0.pre.alpha.reactupgrade1"
 end

data/lib/playbook.rb

@@ -12,7 +12,6 @@ require "playbook/pb_doc_helper"
 require "playbook/kit_base"
 require "playbook/kit_resolver"
 require "playbook/markdown"
-require "playbook/pagination_renderer"
 
 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.16.0.pre.alpha.pagination.rails1
+  version: 11.16.0.pre.alpha.reactupgrade1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-12-19 00:00:00.000000000 Z
+date: 2023-01-03 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'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.3'
 description: Playbook Design System. Built for Nitro, but powering all.
 email:
 - nitroux@powerhrg.com
@@ -1474,15 +1460,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_pagination/_pagination.scss
-- app/pb_kits/playbook/pb_pagination/_pagination.tsx
-- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
-- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx
-- app/pb_kits/playbook/pb_pagination/docs/example.yml
-- app/pb_kits/playbook/pb_pagination/docs/index.js
-- app/pb_kits/playbook/pb_pagination/pagination.html.erb
-- app/pb_kits/playbook/pb_pagination/pagination.rb
-- app/pb_kits/playbook/pb_pagination/pagination.test.jsx
 - 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
@@ -2344,7 +2321,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_pagination/_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/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -1,41 +0,0 @@
-
-
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-type PaginationProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  id?: string,
-}
-
-const Pagination = (props: PaginationProps) => {
-  const {
-    aria = {},
-  className,
-  data = {},
-  id,
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_pagination'), globalProps(props), className)
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      {className}
-    </div>
-  )
-}
-
-export default Pagination

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb

@@ -1,28 +0,0 @@
-<% @data = [{
-    first_name: 'Jon',
-    last_name: 'Ron',
-    email: "jon@mail.com",
-    id: 1,
-}, {
-    first_name: 'Sam',
-    last_name: 'Bob',
-    email: "sam@mail.com",
-    id: 2,
-}, {
-    first_name: 'Nick',
-    last_name: 'Jack',
-    email: "nick@mail.com",
-    id: 3,
-}, {
-    first_name: 'Jake',
-    last_name: 'Wade',
-    email: "jon@mail.com",
-    id: 4,
-}, {
-    first_name: 'Blake',
-    last_name: 'Chad',
-    email: "jon@mail.com",
-    id: 5,
-}] %>
-
-<%= pb_rails("pagination", props: { data: @data}) %>

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx

@@ -1,12 +0,0 @@
-import React from 'react'
-import Pagination from '../_pagination'
-
-const PaginationDefault = (props) => (
-  <div>
-    <Pagination
-        {...props}
-    />
-  </div>
-)
-
-export default PaginationDefault

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

@@ -1,9 +0,0 @@
-examples:
-  
-  rails:
-  - pagination_default: Default
-  
-  
-  # react:
-  # - pagination_default: Default
-  

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

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

data/app/pb_kits/playbook/pb_pagination/pagination.html.erb

@@ -1,7 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-     <%= will_paginate object.page_data, renderer: Playbook::Pagination::Rails %>
-<% end %>

data/app/pb_kits/playbook/pb_pagination/pagination.rb

@@ -1,14 +0,0 @@
-# frozen_string_literal: true
-
-require "will_paginate/array"
-module Playbook
-  module PbPagination
-    class Pagination < ::Playbook::KitBase
-      prop :data, type: Playbook::Props::Array,
-                  default: []
-      def page_data
-        data.paginate(page: params[:page], per_page: 1)
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_pagination/pagination.test.jsx

@@ -1,17 +0,0 @@
-import { renderKit } from '../utilities/test-utils'
-
-import { Pagination } 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(Pagination , props)
-  expect(kit).toBeInTheDocument()
-})

data/lib/playbook/pagination_renderer.rb

@@ -1,43 +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 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
-        tag("li", tag("span", "&hellip;"), class: "disabled")
-      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