playbook_ui 11.20.0.pre.alpha.focus1 → 11.20.0.pre.alpha.passthrough1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dd5b6e17a1e5ff8a0149e8d809b67ebd4c1bd6ade257db72ed9fe4716c7f0488
-  data.tar.gz: 4f6b2edf940d88f2113516a34e7288c18e68bde88cb367a49e3407c8e5d506a9
+  metadata.gz: c0a373f8f9816ad4f827295f7861d7eb09a895860d1f9214e15cce8b250719e4
+  data.tar.gz: 66d3fe725f2b20d4f848707cc08be5e5efb1753efe4ff2f6fe3da5778af6adf3
 SHA512:
-  metadata.gz: 7400acc711d9fa10b999850ed8c02282b3e6f9dcee98745dec7df79bdb7e57842d3751cae96b9d248ac08bf807daa035af6b429b3ea93c4d7157f6bf0e156392
-  data.tar.gz: f54bc46b74b4f15ad295303b73413b8f2e7e17adc078420b2b21970f470770ee2dcdc9203d58fec00fb28e826f8e7f0a4065c28f8e798efd60d3d582250e7e7e
+  metadata.gz: da9d63bdd58257e7ec57560934076227af38918805cf0b81a2faa2084595ba6d55edc4dfc363601fa877bf9d7d28ef0762a6b32b1519bb77def36bdae5044378
+  data.tar.gz: 9a868a827e05f6b702172a1f3c0e7299bbd92da128ef7e122832cace0468f1fd673b81f7fc11f77728c4459f4baef420f078101b749e953a8011c3c10c3e868c

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_paginate/paginate';
 @import 'pb_passphrase/passphrase';
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';

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

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

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -29,6 +29,11 @@ $pb_button_sizes: (
   }
   &[class*=_link]  {
     @include pb_button_link;
+    @media (hover:hover) {
+      &:hover {
+        color: $text_lt_default;
+      }
+    } 
   }
 
   // Disabled =================

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -5,7 +5,6 @@
 @import "../tokens/spacing";
 @import "../tokens/transition";
 @import "../tokens/typography";
-@import "../tokens/accessibility";
 
 $pb_button_size: 40px;
 $pb_button_v_padding: 7px;
@@ -63,12 +62,11 @@ $pb_button_border_width: 0px;
     margin-left: $space_xs;
   }
 
-  &:hover {
+  &:hover, &:focus {
     outline: none;
+    
   }
 
-  @include focus;
-
   &:active {
     outline: none;
     border-width: $pb_button_border_width;
@@ -88,10 +86,6 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover;
     }
-    &:active {
-      transition: none;
-      @include pb_button_variant($primary_action);
-    }
   }
 }
 
@@ -103,10 +97,6 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover(rgba($primary_action, $opacity_3));
     }
-    &:active {
-      transition: none;
-      @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
-    }
   } 
 }
 
@@ -117,11 +107,6 @@ $pb_button_border_width: 0px;
   @media (hover:hover) {
     &:hover {
       @include pb_button_hover($transparent);
-      color: $text_lt_default;
-    }
-    &:active {
-      transition: none;
-      @include pb_button_variant($transparent, $primary_action);
     }
   }
 }
@@ -131,9 +116,6 @@ $pb_button_border_width: 0px;
   $disabled_color: rgba($charcoal, $opacity_5);
   @include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
   pointer-events: none;
-  &:focus {
-    outline: none;
-  }
 }
 
 // Block =======================
@@ -163,10 +145,6 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
     }
-    &:active {
-      transition: none;
-      @include pb_button_variant($primary_action);
-    }
   }
 }
 
@@ -178,10 +156,6 @@ $pb_button_border_width: 0px;
     &:hover {
       @include pb_button_hover(rgba($primary_action, $opacity_2));
     }
-    &:active {
-      transition: none;
-      @include pb_button_variant(rgba($white, 0.2), $white);
-    }
   }
 }
 
@@ -192,11 +166,6 @@ $pb_button_border_width: 0px;
   @media (hover:hover) {
     &:hover {
       @include pb_button_hover($transparent);
-      color: rgba($white, $opacity_6)
-    }
-    &:active {
-      transition: none;
-      @include pb_button_variant($transparent, $white);
     }
   }
 }

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb

@@ -1,2 +1,2 @@
-<%= pb_rails("button", props: { icon: "plus", text: "Icon on Left", margin_right: "lg" }) %>
-<%= pb_rails("button", props: { icon: "chevron-right", icon_right: true, text: "Icon on Right", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", text: "Icon on Left" }) %>
+<%= pb_rails("button", props: { icon: "chevron-right", icon_right: true, text: "Icon on Right" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx

@@ -6,7 +6,6 @@ const ButtonIconOptions = (props) => (
       <Button
           fixedWidth
           icon='plus'
-          marginRight='lg'
           text="Icon on Left"
           {...props}
       />
@@ -15,7 +14,6 @@ const ButtonIconOptions = (props) => (
           fixedWidth
           icon='chevron-right'
           iconRight
-          marginRight='lg'
           text="Icon on Right"
           {...props}
       />

data/app/pb_kits/playbook/pb_button/docs/_button_link.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com", margin_right: "lg" }) %>
-<%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com",margin_right: "lg" }) %>
-<%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com",margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com" }) %>
+<%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx

@@ -6,7 +6,6 @@ const ButtonLink = (props) => (
     <Button
         aria={{ label: 'Link to Google' }}
         link="https://google.com"
-        marginRight='lg'
         text="A Tag Button"
         {...props}
     />
@@ -14,7 +13,6 @@ const ButtonLink = (props) => (
     <Button
         aria={{ label: 'Link to Google in new window' }}
         link="https://google.com"
-        marginRight='lg'
         newWindow
         text="Open in New Window"
         {...props}
@@ -24,7 +22,6 @@ const ButtonLink = (props) => (
         aria={{ label: 'Disabled link to Google' }}
         disabled
         link="https://google.com"
-        marginRight='lg'
         text="A Tag Button Disabled"
         {...props}
     />

data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true, margin_right: "lg" }) %>
-<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", loading: true }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "secondary", loading: true }) %>
+<%= pb_rails("button", props: { aria: { label: "Loading" }, text: "Button Primary", variant: "link", loading: true }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx

@@ -6,7 +6,6 @@ const ButtonLoading = (props) => (
     <Button
         aria={{ label: 'Loading' }}
         loading
-        marginRight='lg'
         text="Button Primary"
         {...props}
     />
@@ -14,7 +13,6 @@ const ButtonLoading = (props) => (
     <Button
         aria={{ label: 'Loading' }}
         loading
-        marginRight='lg'
         text="Button Secondary"
         variant="secondary"
         {...props}
@@ -23,7 +21,6 @@ const ButtonLoading = (props) => (
     <Button
         aria={{ label: 'Loading' }}
         loading
-        marginRight='lg'
         text="A Tag Button Disabled"
         variant="link"
         {...props}

data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("button", props: { text: "Button sm size", size: "sm", margin_right: "lg" }) %>
-<%= pb_rails("button", props: { text: "Button md size", size: "md", margin_right: "lg" }) %>
-<%= pb_rails("button", props: { text: "Button lg size", size: "lg", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "Button sm size", size: "sm" }) %>
+<%= pb_rails("button", props: { text: "Button md size", size: "md" }) %>
+<%= pb_rails("button", props: { text: "Button lg size", size: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx

@@ -4,21 +4,18 @@ import { Button } from '../../'
 const ButtonSize = (props) => (
   <div>
     <Button
-        marginRight='lg'
         size="sm"
         text="Button sm size"
         {...props}
     />
     {' '}
     <Button
-        marginRight='lg'
         size="md"
         text="Button md size"
         {...props}
     />
     {' '}
     <Button
-        marginRight='lg'
         size="lg"
         text="Button lg size"
         {...props}

data/app/pb_kits/playbook/pb_paginate/_paginate.scss

@@ -0,0 +1,69 @@
+@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/app/pb_kits/playbook/pb_paginate/docs/_paginate_default.html.erb

@@ -0,0 +1,19 @@
+<%= 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: { strategy: "will_paginate", model: @users, view: self }) %>
+<%= 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

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

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

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

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

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPaginate
+    class Paginate < ::Playbook::KitBase
+      prop :strategy # Need to add protection
+      prop :model # Need to add protection
+      prop :view # Need to add protection
+
+      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/tokens/_colors.scss

@@ -94,13 +94,11 @@ $hover_colors: (
 );
 
 /* Focus colors -----------------------*/
-$focus_color:         $primary;
 $focus_input_light:   rgba($active_light, $opacity_5);
 $focus_input_dark:    rgba(#144075, $opacity_5);
 $focus_input_colors: (
   focus_input_light:        $focus_input_light,
-  focus_input_dark:         $focus_input_dark,
-  focus_color:              $focus_color
+  focus_input_dark:         $focus_input_dark
 );
 
 /* Border colors ----------------------*/

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

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "11.20.0"
-  VERSION = "11.20.0.pre.alpha.focus1"
+  VERSION = "11.20.0.pre.alpha.passthrough1"
 end

data/lib/playbook.rb

@@ -12,6 +12,8 @@ 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.20.0.pre.alpha.focus1
+  version: 11.20.0.pre.alpha.passthrough1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-01-25 00:00:00.000000000 Z
+date: 2023-01-27 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,11 @@ 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
@@ -2235,7 +2254,6 @@ files:
 - app/pb_kits/playbook/playbook-doc.js
 - app/pb_kits/playbook/playbook-rails-react-bindings.js
 - app/pb_kits/playbook/playbook-rails.js
-- app/pb_kits/playbook/tokens/_accessibility.scss
 - app/pb_kits/playbook/tokens/_animation-curves.scss
 - app/pb_kits/playbook/tokens/_border_radius.scss
 - app/pb_kits/playbook/tokens/_colors.scss
@@ -2333,6 +2351,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

data/app/pb_kits/playbook/tokens/_accessibility.scss

@@ -1,6 +0,0 @@
-@mixin focus {
-  &:focus-visible {
-    outline: $focus_color solid 2px;
-    outline-offset: 2px;
-  }
-}