playbook_ui 12.31.0.pre.alpha.customiconsfa928 → 12.31.0.pre.alpha.hoverrails948

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7e5f294819c764e724a6794cac4310d57aaf738894c2ffcf4dbcd9d7ada25953
-  data.tar.gz: '084cfd995463e4d69d3f4071ca8a5c34fec10276d9181866a1681a6f78b45dcf'
+  metadata.gz: 254f8095f89f90a26b48bf1de3f6ebe8457f324bfaf89d2c0a44921b3dae9b0f
+  data.tar.gz: b1980a1c1d435f4b34c7e4ba81ae9eecdb2b7afea98b71e00f3cace1e2d0375d
 SHA512:
-  metadata.gz: fdaadc126dabfad4e105334e37a9056fb4df6c0981e91c22dd5fbc6d6cb1ed145d9217f580229b8c08e576e890722636db7199c8ceedac1956179e575d389f70
-  data.tar.gz: ca38cac25050fd1f429ec570adab8d2b00835025806e23cbd86cb0cc1e350e586132d49a91131e10f859cfa49fa630c036abba890942f3e717ece2253bc02ab3
+  metadata.gz: ef083fc09e3d71541460a673a3aa189d079cb856e617e1d8d2d38240e1dcfa9155f85563eb0fb26f778497211671ff439ea1f9132233a8487b28cd0cd0d75d73
+  data.tar.gz: ea8fde568dad79fd58c452af6850c7fed616b8fe339a71ccbe60cd2e0aee0ecd225e347469242a73878dde5a327120f2080bbc670394934b9078aa3f30f5c392

data/app/pb_kits/playbook/index.js

@@ -2,7 +2,6 @@
 import './_playbook.scss'
 import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
-import './custom-icons'
 
 // vvv React Component JSX Imports from the React Kits vvv
 export { default as Avatar } from './pb_avatar/_avatar'
@@ -130,4 +129,4 @@ export { default as PbTypeahead } from './pb_typeahead'
 export { default as dialogHelper } from './pb_dialog/dialogHelper'
 
 //Theming
-export {default as mapTheme} from './pb_map/pbMapTheme'
+export {default as mapTheme} from './pb_map/pbMapTheme'

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

@@ -0,0 +1,3 @@
+<%= pb_rails("button", props: { hover: { shadow: "deep"}, text: "Shadow Deep", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { hover: { shadow: "deeper"}, text: "Shadow Deeper", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { hover: { shadow: "deepest"}, text: "Shadow Deepest", margin_right: "lg" }) %>

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

@@ -1,15 +1,15 @@
 examples:
   rails:
   - button_default: Button Variants
-  - button_full_width: Button Full Width
-  - button_link: Button Links
-  - button_loading: Button Loading
-  - button_block_content: Button Block Content
-  - button_icon_options: Button Icon Options
-  - button_accessibility: Button Accessibility Options
-  - button_options: Button Additional Options
-  - button_size: Button Size
-  - button_form: Button Form Attribute
+  # - button_full_width: Button Full Width
+  # - button_link: Button Links
+  # - button_loading: Button Loading
+  # - button_block_content: Button Block Content
+  # - button_icon_options: Button Icon Options
+  # - button_accessibility: Button Accessibility Options
+  # - button_options: Button Additional Options
+  # - button_size: Button Size
+  # - button_form: Button Form Attribute
   react:
   - button_default: Button Variants
   - button_full_width: Button Full Width

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

@@ -34,7 +34,7 @@ type IconProps = {
   pulse?: boolean,
   rotation?: 90 | 180 | 270,
   size?: IconSizes,
-  fontStyle?: 'far' | 'fas' | 'fab' | 'fak',
+  fontStyle?: 'far' | 'fas' | 'fab',
   spin?: boolean,
 } & GlobalProps
 
@@ -76,7 +76,6 @@ const Icon = (props: IconProps) => {
     [`fa-${size}`]: size,
     [`fa-pull-${pull}`]: pull,
     [`fa-rotate-${rotation}`]: rotation,
-
   }
 
   // Lets check and see if the icon prop is referring to a custom Power icon...
@@ -84,15 +83,11 @@ const Icon = (props: IconProps) => {
   // this ensures the JS will not do any further operations
   // faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
   if (!customIcon) faClasses[`fa-${icon}`] = icon
-  
-  const whiteList = [
-    'greensky', 'powergon'
-  ]
-  
+
   const classes = classnames(
     flipMap[flip],
     'pb_icon_kit',
-    customIcon ? '' : whiteList.includes(icon) ? `fak` : fontStyle,
+    customIcon ? '' : fontStyle,
     faClasses,
     globalProps(props),
     className
@@ -115,7 +110,6 @@ const Icon = (props: IconProps) => {
     return emojiRegex.test(emoji);
   };
 
-
   // Add a conditional here to show only the SVG if custom
   const displaySVG = (customIcon: any) => {
     if (customIcon)

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

@@ -33,7 +33,7 @@ module Playbook
                   values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
                   default: nil
       prop :font_style, type: Playbook::Props::Enum,
-                        values: %w[far fas fab fak],
+                        values: %w[far fas fab],
                         default: "far"
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
@@ -140,13 +140,7 @@ module Playbook
       end
 
       def font_style_class
-        white_list = %w[powergon greensky]
-
-        if white_list.include?(icon)
-          "fak"
-        elsif font_style
-          font_style.to_s
-        end
+        font_style ? font_style.to_s : "far"
       end
 
       def spin_class

data/app/pb_kits/playbook/pb_message/docs/_message_hover.html.erb

@@ -0,0 +1,25 @@
+<%= pb_rails("message", props: {
+  avatar_name: "Mike Bishop",
+  avatar_status: "online",
+  avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
+  border_radius: "rounded",
+  hover: { background: "success_subtle" },
+  label: "Anna Black",
+  message: "How can we assist you today?",
+  padding: "xs",
+}) %>
+
+<br><br>
+
+<%= pb_rails("message", props: {
+  align_timestamp: "left",
+  avatar_name: "Lucille Sanchez",
+  avatar_url: "https://randomuser.me/api/portraits/women/50.jpg",
+  border_radius: "rounded",
+  hover: { shadow: "deepest" },
+  label: "Becca Jacobs",
+  message: "Application for Kate Smith is waiting for your approval",
+  padding: "xs",
+}) %>
+
+<br><br>

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - message_default: Default
   - message_timestamp: With Timestamp Hover
+  - message_hover: Hover
 
 
   react:

data/app/pb_kits/playbook/utilities/_hover.scss

@@ -2,7 +2,7 @@
 
 @mixin hover-color-classes($colors-list) {
     @each $name, $color in $colors-list {
-      .bg-hover-#{$name}:hover {
+      .hover_background_#{$name}:hover {
         background-color: $color !important;
         transition: background-color $transition-speed ease;
       }

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -147,7 +147,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       let css = '';
       if (!hover) return css;
       css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
-      css += hover.background ? `bg-hover-${hover.background } ` : '';
+      css += hover.background ? `hover_background_${hover.background } ` : '';
       css += hover.scale ? `hover_scale_${hover.scale} ` : '';
       return css;
   },