playbook_ui 10.0.0 → 10.0.1.alpha.railscusticon

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fab9c2c11d0d9b010b8498fdd9b1e9e1bad54b8776029ea6e75f11e51fd16fa9
-  data.tar.gz: ab6a5a56762a24213347eacefef14c9431d719cbf72b9bde1628a62a20a05db1
+  metadata.gz: 2fac834bfee4b1e2becacc6beb81454bc07c2245b4aa5868ce39f15680f17b75
+  data.tar.gz: 3906161634d9eff14a41c5c754f754b371aeb7ab9e9619a050f4b4bec81eaa59
 SHA512:
-  metadata.gz: ae2f49bada534b72189ada36e1f07d8a61bc1c7aebaf04697e6bc4ee12535a8c0b398d85d1f67c6d51f1e0a2cea8ee09a2bc2d5e03446669d262d4ec5d6c7e41
-  data.tar.gz: 2d36758af0cae0e80897e55660ec95a3d53eaa0feba43c22f52e56ae9348e5f3f763c326b09d7759443726c3250a55d5fd3d9c9275d0eb0b6aca66443a1bdcef
+  metadata.gz: 3e85c115a8506cf4b388bdb0e07e3fa34b516f861ed72e7796355caff50439489c5073484c5691b995192a914395ed40ddd906c85fedc0e97843486699619a3d
+  data.tar.gz: 4f875cce483498737eca8abab11167a83272706cb345f2068a70d928f50ef67e6a0ddaa267ab7a716c005bdeeb7c0b88d0407efad90b59045892e5f198155e85

data/app/pb_kits/playbook/_playbook.scss

@@ -1,4 +1,3 @@
-@import 'tokens/fonts';
 @import 'pb_background/background';
 @import 'pb_body/body';
 @import 'pb_bread_crumbs/bread_crumbs';

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

@@ -1,6 +1,7 @@
 @import "./button_mixins";
 
 [class^=pb_button_kit]{
+  @include pb_button;
   // Variants =================
   &[class*=_primary]  {
     @include pb_button_primary;

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

@@ -12,8 +12,17 @@ $pb_button_h_padding: 34px;
 $pb_button_hover_darken: 4%;
 $pb_button_border_width: 0px;
 
+@mixin pb_button_variant($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
+  background-color: $bg;
+  color: $color;
+  border-color: $border;
+
+  &:active {
+    border-color: darken($bg, $pb_button_hover_darken);
+  }
+}
 
-@mixin pb_button($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
+@mixin pb_button {
   text-rendering: optimizeLegibility;
   font-size: $font_small;
   font-weight: $bold;
@@ -21,15 +30,12 @@ $pb_button_border_width: 0px;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;
-  border-color: $border;
   border-style: solid;
   border-radius: $border_rad_light;
   min-height: $pb_button_size;
   line-height: 1.5;
   padding: $pb_button_v_padding $pb_button_h_padding;
   cursor: pointer;
-  background-color: $bg;
-  color: $color;
   outline: none;
   transition: background $transition_default ease, color $transition_default ease;
   box-sizing: border-box;
@@ -57,7 +63,6 @@ $pb_button_border_width: 0px;
   &:active {
     outline: none;
     border-width: $pb_button_border_width;
-    border-color: darken($bg, $pb_button_hover_darken);
   }
   
 };
@@ -68,7 +73,7 @@ $pb_button_border_width: 0px;
 
 // Primary ======================
 @mixin pb_button_primary {
-  @include pb_button;
+  @include pb_button_variant($primary_action, $text_dk_default, transparent);
 
   @media (hover:hover) {
     &:hover {
@@ -79,7 +84,7 @@ $pb_button_border_width: 0px;
 
 // Secondary ====================
 @mixin pb_button_secondary {
-  @include pb_button(rgba($primary_action, 0.05), $primary_action);
+  @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
 
   @media (hover:hover) {
     &:hover {
@@ -90,7 +95,7 @@ $pb_button_border_width: 0px;
 
 // Link =========================
 @mixin pb_button_link {
-  @include pb_button($transparent, $primary_action);
+  @include pb_button_variant($transparent, $primary_action);
 
   @media (hover:hover) {
     &:hover {
@@ -102,7 +107,7 @@ $pb_button_border_width: 0px;
 // Disabled ====================
 @mixin pb_button_disabled {
   $disabled_color: rgba($charcoal, $opacity_5);
-  @include pb_button(rgba($slate, $opacity_4), $disabled_color);
+  @include pb_button_variant(rgba($slate, $opacity_4), $disabled_color);
   pointer-events: none;
 }
 
@@ -127,7 +132,7 @@ $pb_button_border_width: 0px;
 
 // Dark Primary =================
 @mixin pb_button_primary_dark{
-  @include pb_button($primary_action);
+  @include pb_button_variant($primary_action);
 
   @media (hover:hover) {
     &:hover {
@@ -138,7 +143,7 @@ $pb_button_border_width: 0px;
 
 // Dark Secondary ==============
 @mixin pb_button_secondary_dark{
-  @include pb_button(rgba($white, 0.2), $white);
+  @include pb_button_variant(rgba($white, 0.2), $white);
 
   @media (hover:hover) {
     &:hover {
@@ -149,7 +154,7 @@ $pb_button_border_width: 0px;
 
 // Dark Link =============
 @mixin pb_button_link_dark {
-  @include pb_button($transparent, $white);
+  @include pb_button_variant($transparent, $white);
 
   @media (hover:hover) {
     &:hover {
@@ -161,6 +166,6 @@ $pb_button_border_width: 0px;
 // Dark Disabled ====================
 @mixin pb_button_disabled_dark {
   $disabled_color: rgba($white, $opacity_5);
-  @include pb_button(rgba($slate, $opacity_5), $disabled_color);
+  @include pb_button_variant(rgba($slate, $opacity_5), $disabled_color);
   pointer-events: none;
 }

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -1,3 +1,12 @@
 [class^=pb_icon_kit]{
 
 }
+
+// Rails custom icon styles
+svg.pb_custom_icon {
+  width: 1em;
+  fill: currentColor;
+  path {
+    fill: currentColor;
+  }
+}

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb

@@ -0,0 +1,22 @@
+<%# SVG fill color inherited from css color property %>
+<div class="icon-wrapper" style="color:blue;">
+
+  <p><%= pb_rails("icon", props: { custom_icon: "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg", size: "2x" } ) %></p>
+  <p><%= pb_rails("icon", props: { custom_icon: "app/javascript/images/powergon.svg", size: "3x" } ) %></p>
+  
+  <%= pb_rails("icon", props: { flip: "vertical", custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
+  <%= pb_rails("icon", props: { rotation: 90, custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
+  <%= pb_rails("icon", props: { spin: true, custom_icon: "app/javascript/images/powergon.svg", size: "5x" } ) %>
+  <%= pb_rails("icon", props: { custom_icon: "app/javascript/images/powergon.svg", size: "8x" } ) %>
+
+
+  <%# <%= pb_rails("icon", props: { custom_icon: "https://en.wikipedia.org/wiki/Portable_Network_Graphics#/media/File:PNG_transparency_demonstration_1.png", size: "8x" } ) %>
+
+
+  <%= pb_rails("body", props: { 
+    text: "Custom icons must be SVGs. They can be locally or remotely
+    sourced and are compatible with other icon props (size, rotation,
+    spin, flip, etc). Their SVG fill colors will be inherited from
+    parent element's css color properties."
+  } ) %>
+</div>

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

@@ -7,6 +7,7 @@ examples:
   - icon_pull: Icon Pull
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
+  - icon_custom: Icon Custom
 
   react:
   - icon_default: Icon Default

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -1,7 +1,13 @@
-<%= content_tag(:i, nil,
-    id: object.id,
-    data: object.data,
-    class: object.classname ) %>
-<%= content_tag(:span, nil,
-    aria: { label: "#{object.icon} icon" }.merge(object.aria),
-    hidden: true ) %>
+<% if object.custom_icon %>
+  <%= object.render_svg(object.custom_icon) %>
+<% else %>
+  <%= content_tag(:i, nil,
+      id: object.id,
+      data: object.data,
+      class: object.classname
+  ) %>
+  <%= content_tag(:span, nil,
+      aria: { label: "#{object.icon} icon" }.merge(object.aria),
+      hidden: true
+  ) %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "open-uri"
+
 module Playbook
   module PbIcon
     class Icon < Playbook::KitBase
@@ -10,7 +12,9 @@ module Playbook
       prop :flip, type: Playbook::Props::Enum,
                   values: ["horizontal", "vertical", "both", nil],
                   default: nil
-      prop :icon, required: true
+      prop :icon
+      prop :custom_icon, type: Playbook::Props::String,
+                         default: nil
       prop :inverse, type: Playbook::Props::Boolean,
                      default: false
       prop :list_item, type: Playbook::Props::Boolean,
@@ -48,6 +52,34 @@ module Playbook
         )
       end
 
+      def custom_icon_classname
+        generate_classname(
+          "pb_icon_kit",
+          border_class,
+          fixed_width_class,
+          flip_class,
+          inverse_class,
+          list_item_class,
+          pull_class,
+          pulse_class,
+          rotation_class,
+          size_class,
+          spin_class,
+          separator: " "
+        )
+      end
+
+      def render_svg(path)
+        if File.extname(path) == ".svg"
+          doc = Nokogiri::XML(open(path)) # rubocop:disable Security/Open
+          svg = doc.at_css "svg"
+          svg["class"] = "pb_custom_icon " + object.custom_icon_classname
+          raw doc
+        else
+          raise("Custom icon must be an svg. Please check your path and file type.")
+        end
+      end
+
     private
 
       def border_class

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx

@@ -36,6 +36,7 @@ const MultipleUsers = (props: MultipleUsersProps) => {
   const displayCount =
     users.length > maxDisplayedUsers ? maxDisplayedUsers - 1 : users.length
   const usersToDisplay = users.slice(0, displayCount)
+
   const reverseClass = reverse === true ? 'reverse' : ''
   const avatarSizeClass = size === 'xxs' ? 'xxs' : 'xs'
   const ariaProps = buildAriaProps(aria)

data/app/pb_kits/playbook/pb_multiple_users/docs/_description.md

@@ -1 +1 @@
-The multiple users kit is used to show that more than one user is associated to an action or item.
+The multiple users kit is used to show that more than one user is associated to an action or item.

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.html.erb

@@ -2,7 +2,6 @@
   text: "xs",
   color: "light"
 }) %>
-
 <%= pb_rails("multiple_users", props: {
   users: [
     {
@@ -28,9 +27,11 @@
   ]
 }) %>
 
-<br/><br/>
+<br />
 
 <%= pb_rails("multiple_users", props: {
+  margin_top: "xs",
+  size: "xs",
   users: [
     {
       name: "Shawn Palmer",
@@ -43,57 +44,52 @@
   ]
 }) %>
 
-<br/><br/>
+<br />
 
 <%= pb_rails("body", props: {
   text: "xxs",
+  margin_top: "xs",
   color: "light"
 }) %>
-
 <%= pb_rails("multiple_users", props: {
+  size: "xxs",
   users: [
     {
       name: "Patrick Welch",
       image_url: "https://randomuser.me/api/portraits/men/9.jpg",
-      size: "xxs",
     },
     {
       name: "Lucille Sanchez",
       image_url: "https://randomuser.me/api/portraits/women/6.jpg",
-      size: "xxs",
     },
     {
       name: "Beverly Reyes",
       image_url: "https://randomuser.me/api/portraits/women/74.jpg",
-      size: "xxs",
     },
     {
       name: "Keith Craig",
       image_url: "https://randomuser.me/api/portraits/men/40.jpg",
-      size: "xxs",
     },
     {
       name: "Alicia Cooper",
       image_url: "https://randomuser.me/api/portraits/women/46.jpg",
-      size: "xxs",
     }
   ]
 }) %>
 
-<br/><br/>
+<br />
 
 <%= pb_rails("multiple_users", props: {
+  margin_top: "xs",
+  size: "xxs",
   users: [
     {
       name: "Shawn Palmer",
       image_url: "https://randomuser.me/api/portraits/men/93.jpg",
-      size: "xxs",
     },
     {
       name: "Andrew Murray",
       image_url: "https://randomuser.me/api/portraits/men/75.jpg",
-      size: "xxs",
     }
   ]
-}) %>
-
+}) %>

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx

@@ -1,11 +1,14 @@
 import React from 'react'
-import { MultipleUsers } from '../../'
+import { Body, MultipleUsers } from '../../'
 
 const MultipleUsersSize = (props) => {
   return (
     <div>
+      <Body
+          color="light"
+          text="xs"
+      />
       <MultipleUsers
-          size="xxs"
           users={[
         {
           name: 'Patrick Welch',
@@ -32,20 +35,70 @@ const MultipleUsersSize = (props) => {
       />
 
       <br />
+
+      <MultipleUsers
+          marginTop="xs"
+          size="xs"
+          users={[
+            {
+              name: 'Shawn Palmer',
+              imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
+            },
+            {
+              name: 'Andrew Murray Cooper Craig',
+              imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
+            },
+          ]}
+          {...props}
+      />
+
+      <Body
+          color="light"
+          marginTop="xs"
+          text="xxs"
+      />
+      <MultipleUsers
+          size="xxs"
+          users={[
+            {
+              name: 'Patrick Welch',
+              imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+            },
+            {
+              name: 'Lucille Sanchez',
+              imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+            },
+            {
+              name: 'Beverly Reyes',
+              imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+            },
+            {
+              name: 'Keith Craig',
+              imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+            },
+            {
+              name: 'Alicia Cooper',
+              imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+            },
+          ]}
+          {...props}
+      />
+
       <br />
 
       <MultipleUsers
+          marginTop="xs"
           size="xxs"
           users={[
-        {
-          name: 'Shawn Palmer',
-          imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
-        },
-        {
-          name: 'Andrew Murray Cooper Craig',
-          imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
-        },
-      ]}
+            {
+              name: 'Shawn Palmer',
+              imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
+            },
+            {
+              name: 'Andrew Murray Cooper Craig',
+              imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
+            },
+          ]}
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb

@@ -4,16 +4,11 @@
     data: object.data,
     id: object.id) do %>
     <% object.users.take(object.display_count).each do |user| %>
-      <%= pb_rails("avatar", props: user.merge({
-        classname: "pb_multiple_users_item",
-        dark: object.dark,
-        size: object.avatar_size(user[:size].present?),
-        })
-      )%>
+      <%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark}) ) %>
     <% end %>
 
     <% if object.more_than_four %>
-      <div class="pb_multiple_users_item multiple_users_badge<%= (object.data[:size] == 'xxs') ? '_xxs' : '_xs' %>">
+      <div class="pb_multiple_users_item multiple_users_badge_<%= object.size %>">
         <%= "+#{object.users.count - object.display_count}" %>
       </div>
     <% end %>

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.rb

@@ -4,7 +4,9 @@ module Playbook
   module PbMultipleUsers
     class MultipleUsers < Playbook::KitBase
       prop :reverse, type: Playbook::Props::Boolean, default: false
-      prop :size, type: Playbook::Props::String, default: "xs"
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[xxs xs],
+                  default: "xs"
       prop :users, type: Playbook::Props::HashArray, required: true
 
       def more_than_four
@@ -19,12 +21,6 @@ module Playbook
         generate_classname("pb_multiple_users_kit", reverse_class)
       end
 
-      def avatar_size(size = "xs")
-        return data[:size] = "xs" if size.blank? || size == "xs"
-
-        data[:size] = "xxs"
-      end
-
     private
 
       def reverse_class

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -23,6 +23,8 @@
   overflow-x: auto;
 }
 [class^=pb_rich_text_editor_kit] {
+  // Fixes flex container resizing bug
+  overflow-x: auto;
   // Disables File Attatchment Button in Toolbar
   trix-toolbar [data-trix-button-group="file-tools"] {
     display: none;

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "9.19.0"
-  VERSION = "10.0.0"
+  PREVIOUS_VERSION = "10.0.1"
+  VERSION = "10.0.1.alpha.railscusticon"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 10.0.0
+  version: 10.0.1.alpha.railscusticon
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-06-30 00:00:00.000000000 Z
+date: 2021-07-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1004,6 +1004,7 @@ files:
 - app/pb_kits/playbook/pb_icon/docs/_icon_animate.md
 - app/pb_kits/playbook/pb_icon/docs/_icon_border.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx
+- app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx
 - app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx
@@ -1976,7 +1977,6 @@ files:
 - app/pb_kits/playbook/tokens/_animation-curves.scss
 - app/pb_kits/playbook/tokens/_border_radius.scss
 - app/pb_kits/playbook/tokens/_colors.scss
-- app/pb_kits/playbook/tokens/_fonts.scss
 - app/pb_kits/playbook/tokens/_line_height.scss
 - app/pb_kits/playbook/tokens/_opacity.scss
 - app/pb_kits/playbook/tokens/_positioning.scss
@@ -2063,9 +2063,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.1.4
 signing_key: