playbook_ui 4.4.1 → 4.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fccf1f7b9bc93f80db9b44046add4e697e4806f933f815ec1d3b7243d66de734
-  data.tar.gz: '08abf78e8362801262dc2f64f8049b6eec6f9889c1b2c249e79153ebff8cd45e'
+  metadata.gz: 70db1b9ae28047825c4faeaa79c74faa74f0869cfcfff42a347acad186027cb7
+  data.tar.gz: f19fdf03abd39c15f8edf81985a921eb25fc1d04cd8669e3b13ae8fadeecf789
 SHA512:
-  metadata.gz: 636704dc8de2348af2b01990ad4cc0cb5c705e2e24d636ecad0000fd4fad88e6c987d4898c37cdfbbabbed0e8e96ee41d5757f9dda000334292d07099272d675
-  data.tar.gz: 6b311d9926a10d0df3ac393931ef17d15b8e9fddb4a5ea40716db7ff932250fa8f9e9f1e4918db86ab9a026e805e9e302838fa54617c019c71aadf6ba17ff293
+  metadata.gz: 4e96ef0c08e5d30cea667563a047bf50be7c703a14fcb488b7eaa4d170499b6e7f6a566c0b674704b6c391fb8c778f0954017e6e39ac7fc606ab739913f7b7c1
+  data.tar.gz: c95e793fc4514ee7db590e814b9535387daa86cd51a7530a393a429d8794fec31f7736497ed8f5d1749a729b36e328738f88f8d598c59b1b040b0a021e509b76

data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb

@@ -3,6 +3,9 @@
                 data: object.data,
                 class: object.classname) do %>
   <div class="pb_typeahead_wrapper">
+    <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
+      <i class="far fa-spinner fa-spin"></i>
+    </div>
     <%= pb_rails("text_input", props: {
       type: "search",
       label: object.label,

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

@@ -1,6 +1,20 @@
 [class^=pb_typeahead_kit] {
   .pb_typeahead_wrapper {
     position: relative;
+
+    .pb_typeahead_loading_indicator {
+      position: relative;
+      width: min-content;
+      top: 3.8em;
+      left: 1em;
+      visibility: hidden;
+    }
+  }
+
+  [class^=pb_text_input_kit] {
+    input {
+      padding-left: $space_xl !important;
+    }
   }
 
   .pb_item_kit {

data/app/pb_kits/playbook/pb_typeahead/index.js

@@ -26,6 +26,7 @@ export default class PbTypeahead extends PbEnhancedElement {
   search() {
     if (this.searchTerm.length < this.searchTermMinimumLength) return this.clearResults()
 
+    this.toggleResultsLoadingIndicator('visible')
     this.showResults()
 
     const searchTerm = this.searchTerm
@@ -63,6 +64,7 @@ export default class PbTypeahead extends PbEnhancedElement {
   showResults() {
     if (!this.resultsOptionCache.has(this.searchTermAndContext)) return
 
+    this.toggleResultsLoadingIndicator('hidden')
     this.clearResults()
     for (const result of this.resultsOptionCache.get(this.searchTermAndContext)) {
       this.resultsElement.appendChild(this.newResultOption(result.cloneNode(true)))
@@ -182,4 +184,15 @@ export default class PbTypeahead extends PbEnhancedElement {
       new Map
     )
   }
+
+  get resultsLoadingIndicator() {
+    return this._resultsLoadingIndicator = (
+      this._resultsLoadingIndicator ||
+      this.element.querySelector('[data-pb-typeahead-kit-loading-indicator]')
+    )
+  }
+
+  toggleResultsLoadingIndicator(visibilityProperty) {
+    this.resultsLoadingIndicator.style.visibility = visibilityProperty
+  }
 }

data/app/pb_kits/playbook/pb_user_badge/_user_badge.html.erb

@@ -2,7 +2,7 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-  <%= content_tag(:div, class: "pb__user_badge_wrapper") do %>
+  <%= content_tag(:div, class: "pb_user_badge_wrapper") do %>
     <%= render partial: object.display_badge %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx

@@ -1,21 +1,25 @@
+/* @flow */
 import React from 'react'
-import PropTypes from 'prop-types'
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
+type UserBadgeProps = {
+  className?: String,
+  id?: String,
+  badge?: 'million-dollar' | 'veteran',
+  size?: 'sm' | 'md' | 'lg',
 }
 
-class UserBadge extends React.Component {
-  render() {
-    return (
-      <div className="pb_user_badge">
-        <span>{'USER BADGE CONTENT'}</span>
+const UserBadge = ({
+  badge = 'million-dollar',
+  size = 'md',
+}: UserBadgeProps) => {
+  const image = require(`./badges/_${badge}.svg`)
+
+  return (
+    <div className={`pb_user_badge_kit_${size}`}>
+      <div className="pb_user_badge_wrapper">
+        <img src={image} />
       </div>
-    )
-  }
+    </div>
+  )
 }
-
-UserBadge.propTypes = propTypes
-
 export default UserBadge

data/app/pb_kits/playbook/pb_user_badge/_user_badge.scss

@@ -5,7 +5,7 @@ $badge-sizes: (
 );
 
 [class^=pb_user_badge_kit] {
-  .pb__user_badge_wrapper {
+  .pb_user_badge_wrapper {
     svg,
     img {
       width: 100%;
@@ -15,7 +15,7 @@ $badge-sizes: (
 
   @each $name, $size in $badge-sizes {
     &[class*=_#{$name}] {
-      .pb__user_badge_wrapper {
+      .pb_user_badge_wrapper {
         width: $size;
         height: $size;
       }

data/app/pb_kits/playbook/pb_user_badge/badges/{_million-dollar.html.erb → _million-dollar.svg}

@@ -1,8 +1,6 @@
-
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
 	 viewBox="0 0 242.9 242.9" style="enable-background:new 0 0 242.9 242.9;" xml:space="preserve">
+
 <style type="text/css">
 	.st0{fill:url(#SVGID_1_);}
 	.st1{fill:url(#SVGID_2_);}
@@ -11,6 +9,7 @@
 	.st4{fill:url(#SVGID_5_);}
 	.st5{fill:url(#SVGID_6_);}
 </style>
+
 <circle cx="121.5" cy="121.5" r="121.5"/>
 <g>
 	<g>

data/app/pb_kits/playbook/pb_user_badge/badges/_veteran.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 250" xml:space="preserve">
+  <path fill="#004876" d="M198.4,71.5c0-0.2,0-0.4,0-0.5c-0.2-1.2-1.4-2.1-1.4-2.1L103.2,2.7c-0.7-0.4-1-0.6-1.6-0.6c-1.3,0-2.3,1-2.3,2.3c0,0.1,0,56.1,0,67.1h-0.6v29.6h99.8L198.4,71.5L198.4,71.5z"></path>
+  <path fill="#FFFFFF" d="M172.9,159.2c-31.4,23-33.2,24.3-33.2,24.3l-40.5,3.2v-29.4L172.9,159.2z"></path>
+  <path fill="#BB2432" d="M99.3,125.4V33.5L1.6,102.7l-0.1,0.1c-1,0.7-1.5,1.8-1.5,3v0v67.4v0c0,1.2,0.6,2.3,1.5,3l0.1,0.1l93.5,66.3c1.7,1.2,4.1,0,4.1-2.1v-28.9l40.5-28l-40.5,0.7v-25h73.7l25.4-16.9l0.2-16.8H99.3z"></path>
+  <rect x="99.3" y="101.1" fill="#FFFFFF" width="99.3" height="24.3"></rect>
+</svg>

data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.jsx

@@ -1,8 +1,24 @@
 import React from 'react'
+import { UserBadge } from '../../'
 
 const UserBadgeDefault = () => {
   return (
-    <h1>{'Coming Soon...'}</h1>
+    <div>
+      <div>
+        <UserBadge
+            badge="veteran"
+            size="md"
+        />
+      </div>
+      <br />
+      <br />
+      <div>
+        <UserBadge
+            badge="million-dollar"
+            size="md"
+        />
+      </div>
+    </div>
   )
 }
 

data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { UserBadge } from '../../'
+
+const UserBadgeSize = () => {
+  return (
+    <div>
+      <div>
+        <UserBadge
+            badge="veteran"
+            size="sm"
+        />
+      </div>
+      <br />
+      <br />
+      <div>
+        <UserBadge
+            badge="veteran"
+            size="md"
+        />
+      </div>
+      <br />
+      <br />
+      <div>
+        <UserBadge
+            badge="veteran"
+            size="lg"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default UserBadgeSize

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

@@ -7,3 +7,4 @@ examples:
 
   react:
   - user_badge_default: Default
+  - user_badge_size: Sizes

data/app/pb_kits/playbook/pb_user_badge/docs/index.js

@@ -1 +1,2 @@
 export { default as UserBadgeDefault } from './_user_badge_default.jsx'
+export { default as UserBadgeSize } from './_user_badge_size.jsx'

data/app/pb_kits/playbook/pb_user_badge/user_badge.rb

@@ -19,7 +19,7 @@ module Playbook
       end
 
       def display_badge
-        "pb_user_badge/badges/#{badge}"
+        "pb_user_badge/badges/#{badge}.svg"
       end
     end
   end

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "4.4.1"
+  VERSION = "4.5.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 4.4.1
+  version: 4.5.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-02-21 00:00:00.000000000 Z
+date: 2020-02-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1357,11 +1357,12 @@ files:
 - app/pb_kits/playbook/pb_user_badge/_user_badge.html.erb
 - app/pb_kits/playbook/pb_user_badge/_user_badge.jsx
 - app/pb_kits/playbook/pb_user_badge/_user_badge.scss
-- app/pb_kits/playbook/pb_user_badge/badges/_million-dollar.html.erb
-- app/pb_kits/playbook/pb_user_badge/badges/_veteran.html.erb
+- app/pb_kits/playbook/pb_user_badge/badges/_million-dollar.svg
+- app/pb_kits/playbook/pb_user_badge/badges/_veteran.svg
 - app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.html.erb
 - app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.jsx
 - app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size.html.erb
+- app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size.jsx
 - app/pb_kits/playbook/pb_user_badge/docs/example.yml
 - app/pb_kits/playbook/pb_user_badge/docs/index.js
 - app/pb_kits/playbook/pb_user_badge/user_badge.rb

data/app/pb_kits/playbook/pb_user_badge/badges/_veteran.html.erb

@@ -1,17 +0,0 @@
-<style type="text/css">
-	.veteran-st0{fill:#004876;}
-	.veteran-st1{fill:#FFFFFF;}
-	.veteran-st2{fill:#BB2432;}
-</style>
-
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 198.6 242.9" style="enable-background:new 0 0 198.6 242.9;" xml:space="preserve">
-<path class="veteran-st0" d="M198.4,71.5c0-0.2,0-0.4,0-0.5c-0.2-1.2-1.4-2.1-1.4-2.1L103.2,2.7c-0.7-0.4-1-0.6-1.6-0.6
-	c-1.3,0-2.3,1-2.3,2.3c0,0.1,0,56.1,0,67.1h-0.6v29.6h99.8L198.4,71.5L198.4,71.5z"/>
-<path class="veteran-st1" d="M172.9,159.2c-31.4,23-33.2,24.3-33.2,24.3l-40.5,3.2v-29.4L172.9,159.2z"/>
-<path class="veteran-st2" d="M99.3,125.4V33.5L1.6,102.7l-0.1,0.1c-1,0.7-1.5,1.8-1.5,3v0v67.4v0c0,1.2,0.6,2.3,1.5,3l0.1,0.1l93.5,66.3
-	c1.7,1.2,4.1,0,4.1-2.1v-28.9l40.5-28l-40.5,0.7v-25h73.7l25.4-16.9l0.2-16.8H99.3z"/>
-<rect x="99.3" y="101.1" class="veteran-st1" width="99.3" height="24.3"/>
-</svg>