playbook_ui 12.0.0 → 12.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e25065accaa0dd497f68c944bfb31b60695e3a4f2430e1818ec656b672763186
-  data.tar.gz: 8605a87938bde42563130661b9f1213e23958f2ad5e53342c2f162933c101c38
+  metadata.gz: 637dc98a1badc91927d22a80c40b7dab9ff223d0beef1585f2d588f34aea833d
+  data.tar.gz: 1d95711beb58f0c37cf3dafc98f6c8c38cbd59e6a390290f2574fa612fbcc14e
 SHA512:
-  metadata.gz: 85ba42392ecca25ae72e124adcdca9dce9e2122fa2eb961d7be15450ceb3042f1f41573fa55ad6305375db4749f41263e85b01e82c0dfb8b0d8e77b2ad82b853
-  data.tar.gz: 8bd52867cb7e21d0616d7a8ba8e5a9a1b0dc4170796bf8c547013f74778c348f0248ecbf3a8fecc2fb9d120c02383264a97c934836903079b1e2ce2a2d283c3d
+  metadata.gz: 449796d0443af564166cd7fea3d5b3ec3354553c7263aaf00def68b6bbd809aac65b3dc680034faa04564f79d692c3c11618f78a88fe07fa6dbe79c6c56822a3
+  data.tar.gz: 17c5ef327dec5cd35db9d780af9bc4af5b7a7eb6ec8f474ecce9a726e2b8c89f8bf379c4b07e32b9a776abcf630529faf7fb6d37d558cdde5dadf5c75309adbc

data/app/pb_kits/playbook/_playbook.scss

@@ -56,6 +56,7 @@
 @import 'pb_multiple_users_stacked/multiple_users_stacked';
 @import 'pb_nav/nav';
 @import 'pb_online_status/online_status';
+@import 'pb_pagination/pagination';
 @import 'pb_passphrase/passphrase';
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';

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

@@ -60,6 +60,7 @@ kits:
     - badge
     - hashtag
     - pill
+  - pagination
   - popover
   - progress:
     - progress_pills
@@ -103,4 +104,4 @@ kits:
     - title_count
     - title_detail
   - user_badge
-  - walkthrough
+  - walkthrough

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -227,6 +227,11 @@
 				height: 100%;
 				max-height: 100%;
 				max-width: none;
+				//this empty div only has height when dialog is full height. 
+				//fix for dialog body content disappearing behind sticky footer
+				.dialog-pseudo-footer {
+					height: $space_xl * 2;
+				}
 				.dialog_footer {
 					position:fixed;
 					bottom: 0;
@@ -287,6 +292,11 @@
 			height: 100% !important;
 			max-height: 100% !important;
 			max-width: 100%;
+			//this empty div only has height when dialog is full height. 
+			//fix for dialog body content disappearing behind sticky footer
+			.dialog-pseudo-footer {
+				height: $space_xl * 2;
+			}
 			.dialog_footer {
 				position:fixed;
 				bottom: 0;
@@ -316,6 +326,7 @@
 	// 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 {
+		position: fixed !important;
 		top: 0 !important;
 		padding: unset !important;
 		margin: auto;

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

@@ -41,6 +41,8 @@ const DialogFooter = (props: DialogFooterProps) => {
       {separator &&
         <SectionSeparator />
       }
+      <div className="dialog-pseudo-footer">
+      </div>
       <Flex
           className={classnames(footerCSS, footerSpacing, className)}
           spacing={spacing}

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

@@ -3,6 +3,7 @@
     data: object.data,
     aria: object.aria) do %>
     <% if object.confirm_button && object.cancel_button %>
+        <div class="dialog-pseudo-footer"></div>
         <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
             <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
                 <%= object.confirm_button %>

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

@@ -0,0 +1,69 @@
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import "../tokens/border_radius";
+@import "../tokens/shadows";
+
+$pagination_padding: 7px 13px 6px 13px;
+$top_bottom_radius: 0px;
+
+.pb_pagination {
+  display: inline-block;
+  border-radius: $border_rad_light;
+  border: $border_rad_lightest solid $border_light;
+  background-color: $white;
+  padding: $space_xxs 0px;
+  li {
+    display: inline;
+    > a, li > span {
+    padding: $pagination_padding;
+    text-decoration: none;
+  }}
+  li:first-child > a, li:first-child > span  {
+    padding: $pagination_padding;
+    border-right: $border_rad_lightest solid $border_light;
+    z-index: 2;
+    border-top-right-radius: $top_bottom_radius;
+    border-bottom-right-radius: $top_bottom_radius;
+  }
+  li:last-child > a, li:last-child > span {
+    padding: $pagination_padding;
+    border-left: $border_rad_lightest solid $border_light;
+    z-index: 2;
+    border-top-left-radius: $top_bottom_radius;
+    border-bottom-left-radius: $top_bottom_radius;
+  }
+  a {
+    color: $text_lt_default;
+    font-size: $text_small;
+    font-weight: $regular;
+    border: none;
+    transition: all $transition_default ease-out;
+
+    &:hover {
+      background-color: $active_light;
+      color: $primary;
+      border-radius: $border_rad_light;
+    }
+
+    &:focus-visible {
+      outline: 1px solid $primary;
+      border-color: transparent !important;
+      border-radius: $border_rad_light !important;
+      transition: none;
+    }
+  }
+  .active > span {
+    background-color: $primary;
+    border-radius: $border_rad_light;
+    color: #fff;
+    padding: $pagination_padding;
+    border: 0;
+    text-decoration: none;
+    font-weight: $bold;
+    font-size: $text_small;
+  }
+  .disabled > span {
+    padding: $pagination_padding;
+    font-size: $text_small;
+  }
+}

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

@@ -0,0 +1 @@
+<%= pb_rails("pagination", props: { model: @users, view: self}) %>

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

@@ -0,0 +1,6 @@
+<div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div> 
+Our Pagination kit depends on the <a href="https://github.com/mislav/will_paginate" target="_blank"> will\_paginate library. </a> Please follow the basic will\_paginate setup.
+
+Once you have perfomed the paginated query in your controller file you can use our kit (see code example below) instead of `<%= will_paginate @users %>` in your view file.
+
+You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.

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

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

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.model, renderer: Playbook::Pagination::Rails %>
+<% end %>

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPagination
+    class Pagination < ::Playbook::KitBase
+      prop :model
+      prop :view
+
+      def classname
+        generate_classname("pb_paginate")
+      end
+
+      def url_for(options = nil)
+        view.url_for(options)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -93,7 +93,7 @@ const Typeahead = ({
   const handleOnChange = (_data, { action, option, removedValue }) => {
     if (action === 'select-option') {
       if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
-      const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option })
+      const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
       document.dispatchEvent(multiValueClearEvent)
     }
     if (action === 'remove-value' || action === 'pop-value') {

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_without_pills.html.erb

@@ -8,7 +8,7 @@
 %>
 
 <%= pb_rails("typeahead", props: {
-    id: "typeahead-pills-example1",
+    id: "typeahead-without-pills-example1",
     placeholder: "All Colors",
     options: options, 
     label: "Colors",
@@ -19,19 +19,12 @@
 
 <!-- This section is an example of the available JavaScript event hooks -->
 <%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
-    console.log('Option selected')
+  document.addEventListener("pb-typeahead-kit-typeahead-without-pills-example1-result-option-select", function(event) {
+    console.log('Single Option selected')
     console.dir(event.detail)
   })
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
-    console.log('Option removed')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
+  document.addEventListener("pb-typeahead-kit-typeahead-without-pills-example1-result-clear", function() {
     console.log('All options cleared')
   })
 
-  document.querySelector('#clear-pills').addEventListener('click', function() {
-    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
-  })
 <% end %>

data/lib/playbook/pagination_renderer.rb

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

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.20.0"
-  VERSION = "12.0.0"
+  PREVIOUS_VERSION = "12.0.0"
+  VERSION = "12.1.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.0.0
+  version: 12.1.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-30 00:00:00.000000000 Z
+date: 2023-02-02 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.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
@@ -1467,6 +1481,12 @@ 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/docs/_pagination_default.html.erb
+- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md
+- app/pb_kits/playbook/pb_pagination/docs/example.yml
+- app/pb_kits/playbook/pb_pagination/pagination.html.erb
+- app/pb_kits/playbook/pb_pagination/pagination.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
@@ -2330,6 +2350,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