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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cffd8ae39a8b80f013b9bc0fca179e7cdd94be62b1bfcba8a786984fbe6bb15a
-  data.tar.gz: 320820bff742b9b95b6d0867f81782eb6d20edee840ca1e65bd9ecc9fc96d805
+  metadata.gz: d1c2dd6e15de3851fa13af4d58c06b78448261e4dc2a973718ae53f518324638
+  data.tar.gz: 896cb320d58e4be679254fafdda40d7269f53161bcb1b417c6c5e2c725173de4
 SHA512:
-  metadata.gz: 612b82bdc76521177c494de8203d6a64147a8dc2e6863ad0f28edef9eece3c410236ffa234220ed8c1d0ad69c5b857b8023fa2bf6d0680fec24054f8acd4bbde
-  data.tar.gz: 24e96215afa640ea123786fb2a3656a91e5bff64e3a49b17598034230949be6b1e6671270cb1dee78edaf3563dee09dd09d5f1a7f6f5c9e1b7ba0c80173f5472
+  metadata.gz: 25c4283002f9b516e41e3f4a66e13fa1ddc71935c245001141357df87637500d5d9e87361bc35ccf6feee206ad0d8982701ea1d80390d5a937502657a8bc12d4
+  data.tar.gz: a87f20dc862b0f749fd3950a950596e97c8712a4ec130bf2856d3bd6f854fa41fcc3d3cedae27d043e3771d3d5c29a1b07f096831cac746f7d86ef1e220deadc

data/app/pb_kits/playbook/_playbook.scss

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

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

@@ -104,3 +104,4 @@ 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,6 +64,7 @@ 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_pagination/_pagination.scss

@@ -0,0 +1,68 @@
+@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

@@ -0,0 +1,41 @@
+
+
+/* @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

@@ -0,0 +1,28 @@
+<% @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

@@ -0,0 +1,12 @@
+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

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

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

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

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

@@ -0,0 +1,7 @@
+<%= 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

@@ -0,0 +1,14 @@
+# 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

@@ -0,0 +1,17 @@
+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/app/pb_kits/playbook/playbook-doc.js

@@ -60,6 +60,7 @@ 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'
@@ -157,6 +158,7 @@ WebpackerReact.setup({
   ...MultipleUsersStacked,
   ...Nav,
   ...OnlineStatus,
+  ...Pagination,
   ...Passphrase,
   ...PbReactPopover,
   ...Person,

data/lib/playbook/kit_base.rb

@@ -19,6 +19,7 @@ require "playbook/flex"
 require "playbook/flex_grow"
 require "playbook/flex_shrink"
 require "playbook/order"
+require "playbook/pagination_renderer"
 
 module Playbook
   class KitBase < ViewComponent::Base
@@ -43,6 +44,7 @@ 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/pagination_renderer.rb

@@ -0,0 +1,43 @@
+# 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

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.14.0"
-  VERSION = "11.15.0"
+  PREVIOUS_VERSION = "11.15.0"
+  VERSION = "11.16.0.pre.alpha.pagination.rails1"
 end

data/lib/playbook.rb

@@ -12,6 +12,7 @@ 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.15.0
+  version: 11.16.0.pre.alpha.pagination.rails1
 platform: ruby
 authors:
 - Power UX
@@ -269,6 +269,20 @@ 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
@@ -1460,6 +1474,15 @@ 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
@@ -2321,6 +2344,7 @@ 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
@@ -2359,9 +2383,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
 signing_key: