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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e407af628bc604a5819a251decfce646719b077391b7bf9255f4c3dec086d278
-  data.tar.gz: c7d561411aa36049ca2f6420baf54facb1ac9fa28e7d744c84444847eaedd6f2
+  metadata.gz: d1c2dd6e15de3851fa13af4d58c06b78448261e4dc2a973718ae53f518324638
+  data.tar.gz: 896cb320d58e4be679254fafdda40d7269f53161bcb1b417c6c5e2c725173de4
 SHA512:
-  metadata.gz: 38a1764cb0a97cebbe9a90839042d2f3058813f07097de54a194ef82c7f5a5c1d3c66627ac8b8321478b77671bb0428f9a2e9814663c94d3638e04451f71ddcd
-  data.tar.gz: 76e7a1e717bb814293ac1510066018879bbf4cddfd237994209f3b460b1e17bc6df0f3f1a02eb08779c7bbb0f61927fafae4971fc13aad0453b262f28c63bc9b
+  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_dialog/_dialog.scss

@@ -68,6 +68,12 @@
 	$opacity_visible: 1;
 	$opacity_hidden: 0;
 
+	.dialog_sticky_header {
+	position: sticky;
+	top: 0;
+	background-color: $white;
+	}
+
 	// @include pb_card;
 	background-color: $white;
 	box-shadow: $shadow_deepest;
@@ -155,14 +161,29 @@
 				height: 100%;
 				max-height: 100%;
 				max-width: none;
+				.dialog_footer {
+					position:fixed;
+					bottom: 0;
+					background-color: $white;
+				}
+				
 				&[class*="_sm"] {
 					width: $medium;
+					.dialog_footer {
+						width: $medium;
+					}
 				}
 				&[class*="_md"] {
 					width: $large;
+					.dialog_footer {
+						width: $large;
+					}
 				}
 				&[class*="_lg"] {
 					width: $xlarge;
+					.dialog_footer {
+						width: $xlarge;
+					}
 				}
 			} 
 		}
@@ -170,6 +191,7 @@
 }
 
 //styles specific to rails version of kit
+// rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
 .pb_dialog_wrapper_rails {
 	$medium: 500px;
     $large: 800px;
@@ -199,24 +221,41 @@
 			height: 100% !important;
 			max-height: 100% !important;
 			max-width: 100%;
+			.dialog_footer {
+				position:fixed;
+				bottom: 0;
+				background-color: $white;
+			}
 			&[class*="_sm"] {
 				width: $medium;
+				.dialog_footer {
+					width: $medium;
+				}
 			}
 			&[class*="_md"] {
 				width: $large;
+				.dialog_footer {
+					width: $large;
+				}
 			}
 			&[class*="_lg"] {
 				width: $xlarge;
+				.dialog_footer {
+					width: $xlarge;
+				}
 			}
 		} 
 	}
 
+	// fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE. 
+	//conflicts were only apparent in nitro, not in playbook local env
 	.pb_dialog_rails {
 		top: 0 !important;
 		padding: unset !important;
 		margin: auto;
 	
 	}
+	//overlay for rails kit
 	dialog::backdrop {
 		position: fixed;
 		top: 0;

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx

@@ -43,7 +43,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
   /* eslint-disable react/jsx-handler-names */
 
   return (
-    <>
+    <div className="dialog_sticky_header">
       <Flex
           {...ariaProps}
           {...dataProps}
@@ -56,11 +56,12 @@ const DialogHeader = (props: DialogHeaderProps) => {
             onClose={api.onClose}
           />
         }
+        
       </Flex>
       {separator &&
         <SectionSeparator />
       }
-    </>
+    </div>
   )
 }
 

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
+    class: object.sticky_header,
     aria: object.aria) do %>
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.rb

@@ -8,6 +8,10 @@ module Playbook
       def classname
         generate_classname("dialog_header")
       end
+
+      def sticky_header
+        "dialog_sticky_header"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx

@@ -52,11 +52,11 @@ const DialogFullHeight = () => {
             onClick={toggleHeaderSeparatorDialog}>
           {"Small Dialog"}
         </Button>
-        <Button marginRight="xl"
+        <Button marginRight="md"
             onClick={toggleFooterSeparatorDialog}>
           {"Medium Dialog"}
         </Button>
-        <Button marginRight="xl"
+        <Button marginRight="md"
             onClick={toggleBothSeparatorsDialog}>
           {"Large Dialog"}
         </Button>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb

@@ -1,4 +1,5 @@
-<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-scroll"} }) %>
+<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-scroll"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Open Full Height Dialog", data: {"open-dialog": "dialog-scroll-full-height"}, margin_right: "md" }) %>
 
 <%= pb_rails("dialog", props: { 
     id:"dialog-scroll", 
@@ -8,4 +9,15 @@
     cancel_button: "Cancel", 
     confirm_button: "Confirm", 
     confirm_button_id: "confirm-button-1"
+}) %>
+
+<%= pb_rails("dialog", props: { 
+    full_height: true,
+    id:"dialog-scroll-full-height", 
+    size: "sm", 
+    title: "Header Title is the Title Prop", 
+    text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.", 
+    cancel_button: "Cancel", 
+    confirm_button: "Confirm", 
+    confirm_button_id: "confirm-button-1"
 }) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx

@@ -2,24 +2,48 @@ import React, { useState } from 'react'
 import { Button, Dialog } from '../../'
 
 const DialogScrollable = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  const close = () => setIsOpen(false)
-  const open = () => setIsOpen(true)
+
+  const useDialog = (visible = false) => {
+    const [opened, setOpened] = useState(visible)
+    const toggle = () => setOpened(!opened)
+  
+    return [opened, toggle]
+  }
+  
+    const [dialog1Opened, toggleDialog1] = useDialog()
+    const [dialog2Opened, toggleDialog2] = useDialog()
 
   return (
     <>
-      <Button onClick={open}>{'Open Dialog'}</Button>
+      <Button marginRight="md" 
+          onClick={toggleDialog1}>{'Open Dialog'}
+      </Button>
+      <Button marginRight="md" 
+          onClick={toggleDialog2}>{'Open Full Height Dialog'}
+      </Button>
       <Dialog
           cancelButton="Cancel"
           confirmButton="Okay"
-          onCancel={close}
-          onClose={close}
-          onConfirm={close}
-          opened={isOpen}
+          onCancel={toggleDialog1}
+          onClose={toggleDialog1}
+          onConfirm={toggleDialog1}
+          opened={dialog1Opened}
           size="md"
           text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
           title="Header Title is the Title Prop"
       />
+      <Dialog
+          cancelButton="Cancel"
+          confirmButton="Okay"
+          fullHeight
+          onCancel={toggleDialog2}
+          onClose={toggleDialog2}
+          onConfirm={toggleDialog2}
+          opened={dialog2Opened}
+          size="sm"
+          text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in."
+          title="Header Title is the Title Prop"
+      />
     </>
   )
 }

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.md

@@ -1,2 +1,5 @@
-The dialog will create a scroll container automatically when the text exceeds the height of the page. 
-No prop or configuration is needed. 
+The dialog will create a scroll container automatically when the text exceeds the height of the page. No prop or configuration is needed. 
+
+When such a scroll container is created, the dialog header will remain fixed at top of dialog and not scroll with the body content.
+
+If the dialog is a  `fullHeight` variant, the header and footer will both be sticky and not scroll with the body content. 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx

@@ -55,13 +55,13 @@ const DialogSizes = () => {
           {'Small Dialog'}
         </Button>
         <Button
-            marginRight="xl"
+            marginRight="md"
             onClick={toggleMdDialog}
         >
           {'Medium Dialog'}
         </Button>
         <Button
-            marginRight="xl"
+            marginRight="md"
             onClick={toggleLgDialog}
         >
           {'Large Dialog'}

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -1,3 +1,5 @@
+@import "tokens/typography";
+
 @mixin subtle {
   [class*=pb_nav_list_kit_item] {
     list-style: none;
@@ -42,6 +44,7 @@
     &[class*=_active] [class*=_link] {
       @include pb_title_4;
       color: $primary;
+       letter-spacing: normal;
     }
   }
 }

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.13.0"
-  VERSION = "11.14.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.14.0
+  version: 11.16.0.pre.alpha.pagination.rails1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-12-13 00:00:00.000000000 Z
+date: 2022-12-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -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: