playbook_ui 4.4.1 → 4.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb +3 -0
  3. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +14 -0
  4. data/app/pb_kits/playbook/pb_typeahead/index.js +13 -0
  5. data/app/pb_kits/playbook/pb_user_badge/_user_badge.html.erb +1 -1
  6. data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx +18 -14
  7. data/app/pb_kits/playbook/pb_user_badge/_user_badge.scss +2 -2
  8. data/app/pb_kits/playbook/pb_user_badge/badges/{_million-dollar.html.erb → _million-dollar.svg} +3 -4
  9. data/app/pb_kits/playbook/pb_user_badge/badges/_veteran.svg +6 -0
  10. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.jsx +17 -1
  11. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size.jsx +33 -0
  12. data/app/pb_kits/playbook/pb_user_badge/docs/example.yml +1 -0
  13. data/app/pb_kits/playbook/pb_user_badge/docs/index.js +1 -0
  14. data/app/pb_kits/playbook/pb_user_badge/user_badge.rb +1 -1
  15. data/lib/playbook/version.rb +1 -1
  16. metadata +5 -4
  17. data/app/pb_kits/playbook/pb_user_badge/badges/_veteran.html.erb +0 -17
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: fccf1f7b9bc93f80db9b44046add4e697e4806f933f815ec1d3b7243d66de734
4
- data.tar.gz: '08abf78e8362801262dc2f64f8049b6eec6f9889c1b2c249e79153ebff8cd45e'
3
+ metadata.gz: 70db1b9ae28047825c4faeaa79c74faa74f0869cfcfff42a347acad186027cb7
4
+ data.tar.gz: f19fdf03abd39c15f8edf81985a921eb25fc1d04cd8669e3b13ae8fadeecf789
5
5
  SHA512:
6
- metadata.gz: 636704dc8de2348af2b01990ad4cc0cb5c705e2e24d636ecad0000fd4fad88e6c987d4898c37cdfbbabbed0e8e96ee41d5757f9dda000334292d07099272d675
7
- data.tar.gz: 6b311d9926a10d0df3ac393931ef17d15b8e9fddb4a5ea40716db7ff932250fa8f9e9f1e4918db86ab9a026e805e9e302838fa54617c019c71aadf6ba17ff293
6
+ metadata.gz: 4e96ef0c08e5d30cea667563a047bf50be7c703a14fcb488b7eaa4d170499b6e7f6a566c0b674704b6c391fb8c778f0954017e6e39ac7fc606ab739913f7b7c1
7
+ data.tar.gz: c95e793fc4514ee7db590e814b9535387daa86cd51a7530a393a429d8794fec31f7736497ed8f5d1749a729b36e328738f88f8d598c59b1b040b0a021e509b76
data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb CHANGED
@@ -3,6 +3,9 @@
3
3
  data: object.data,
4
4
  class: object.classname) do %>
5
5
  <div class="pb_typeahead_wrapper">
6
+ <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
7
+ <i class="far fa-spinner fa-spin"></i>
8
+ </div>
6
9
  <%= pb_rails("text_input", props: {
7
10
  type: "search",
8
11
  label: object.label,
data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss CHANGED
@@ -1,6 +1,20 @@
1
1
  [class^=pb_typeahead_kit] {
2
2
  .pb_typeahead_wrapper {
3
3
  position: relative;
4
+
5
+ .pb_typeahead_loading_indicator {
6
+ position: relative;
7
+ width: min-content;
8
+ top: 3.8em;
9
+ left: 1em;
10
+ visibility: hidden;
11
+ }
12
+ }
13
+
14
+ [class^=pb_text_input_kit] {
15
+ input {
16
+ padding-left: $space_xl !important;
17
+ }
4
18
  }
5
19
 
6
20
  .pb_item_kit {
data/app/pb_kits/playbook/pb_typeahead/index.js CHANGED
@@ -26,6 +26,7 @@ export default class PbTypeahead extends PbEnhancedElement {
26
26
  search() {
27
27
  if (this.searchTerm.length < this.searchTermMinimumLength) return this.clearResults()
28
28
 
29
+ this.toggleResultsLoadingIndicator('visible')
29
30
  this.showResults()
30
31
 
31
32
  const searchTerm = this.searchTerm
@@ -63,6 +64,7 @@ export default class PbTypeahead extends PbEnhancedElement {
63
64
  showResults() {
64
65
  if (!this.resultsOptionCache.has(this.searchTermAndContext)) return
65
66
 
67
+ this.toggleResultsLoadingIndicator('hidden')
66
68
  this.clearResults()
67
69
  for (const result of this.resultsOptionCache.get(this.searchTermAndContext)) {
68
70
  this.resultsElement.appendChild(this.newResultOption(result.cloneNode(true)))
@@ -182,4 +184,15 @@ export default class PbTypeahead extends PbEnhancedElement {
182
184
  new Map
183
185
  )
184
186
  }
187
+
188
+ get resultsLoadingIndicator() {
189
+ return this._resultsLoadingIndicator = (
190
+ this._resultsLoadingIndicator ||
191
+ this.element.querySelector('[data-pb-typeahead-kit-loading-indicator]')
192
+ )
193
+ }
194
+
195
+ toggleResultsLoadingIndicator(visibilityProperty) {
196
+ this.resultsLoadingIndicator.style.visibility = visibilityProperty
197
+ }
185
198
  }
data/app/pb_kits/playbook/pb_user_badge/_user_badge.html.erb CHANGED
@@ -2,7 +2,7 @@
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  class: object.classname) do %>
5
- <%= content_tag(:div, class: "pb__user_badge_wrapper") do %>
5
+ <%= content_tag(:div, class: "pb_user_badge_wrapper") do %>
6
6
  <%= render partial: object.display_badge %>
7
7
  <% end %>
8
8
  <% end %>
data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx CHANGED
@@ -1,21 +1,25 @@
1
+ /* @flow */
1
2
  import React from 'react'
2
- import PropTypes from 'prop-types'
3
3
 
4
- const propTypes = {
5
- className: PropTypes.string,
6
- id: PropTypes.string,
4
+ type UserBadgeProps = {
5
+ className?: String,
6
+ id?: String,
7
+ badge?: 'million-dollar' | 'veteran',
8
+ size?: 'sm' | 'md' | 'lg',
7
9
  }
8
10
 
9
- class UserBadge extends React.Component {
10
- render() {
11
- return (
12
- <div className="pb_user_badge">
13
- <span>{'USER BADGE CONTENT'}</span>
11
+ const UserBadge = ({
12
+ badge = 'million-dollar',
13
+ size = 'md',
14
+ }: UserBadgeProps) => {
15
+ const image = require(`./badges/_${badge}.svg`)
16
+
17
+ return (
18
+ <div className={`pb_user_badge_kit_${size}`}>
19
+ <div className="pb_user_badge_wrapper">
20
+ <img src={image} />
14
21
  </div>
15
- )
16
- }
22
+ </div>
23
+ )
17
24
  }
18
-
19
- UserBadge.propTypes = propTypes
20
-
21
25
  export default UserBadge
data/app/pb_kits/playbook/pb_user_badge/_user_badge.scss CHANGED
@@ -5,7 +5,7 @@ $badge-sizes: (
5
5
  );
6
6
 
7
7
  [class^=pb_user_badge_kit] {
8
- .pb__user_badge_wrapper {
8
+ .pb_user_badge_wrapper {
9
9
  svg,
10
10
  img {
11
11
  width: 100%;
@@ -15,7 +15,7 @@ $badge-sizes: (
15
15
 
16
16
  @each $name, $size in $badge-sizes {
17
17
  &[class*=_#{$name}] {
18
- .pb__user_badge_wrapper {
18
+ .pb_user_badge_wrapper {
19
19
  width: $size;
20
20
  height: $size;
21
21
  }
data/app/pb_kits/playbook/pb_user_badge/badges/{_million-dollar.html.erb → _million-dollar.svg} RENAMED
@@ -1,8 +1,6 @@
1
-
2
- <?xml version="1.0" encoding="utf-8"?>
3
- <!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
4
- <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"
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
5
2
  viewBox="0 0 242.9 242.9" style="enable-background:new 0 0 242.9 242.9;" xml:space="preserve">
3
+
6
4
  <style type="text/css">
7
5
  .st0{fill:url(#SVGID_1_);}
8
6
  .st1{fill:url(#SVGID_2_);}
@@ -11,6 +9,7 @@
11
9
  .st4{fill:url(#SVGID_5_);}
12
10
  .st5{fill:url(#SVGID_6_);}
13
11
  </style>
12
+
14
13
  <circle cx="121.5" cy="121.5" r="121.5"/>
15
14
  <g>
16
15
  <g>
data/app/pb_kits/playbook/pb_user_badge/badges/_veteran.svg ADDED
@@ -0,0 +1,6 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 250" xml:space="preserve">
2
+ <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>
3
+ <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>
4
+ <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>
5
+ <rect x="99.3" y="101.1" fill="#FFFFFF" width="99.3" height="24.3"></rect>
6
+ </svg>
data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.jsx CHANGED
@@ -1,8 +1,24 @@
1
1
  import React from 'react'
2
+ import { UserBadge } from '../../'
2
3
 
3
4
  const UserBadgeDefault = () => {
4
5
  return (
5
- <h1>{'Coming Soon...'}</h1>
6
+ <div>
7
+ <div>
8
+ <UserBadge
9
+ badge="veteran"
10
+ size="md"
11
+ />
12
+ </div>
13
+ <br />
14
+ <br />
15
+ <div>
16
+ <UserBadge
17
+ badge="million-dollar"
18
+ size="md"
19
+ />
20
+ </div>
21
+ </div>
6
22
  )
7
23
  }
8
24
 
data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size.jsx ADDED
@@ -0,0 +1,33 @@
1
+ import React from 'react'
2
+ import { UserBadge } from '../../'
3
+
4
+ const UserBadgeSize = () => {
5
+ return (
6
+ <div>
7
+ <div>
8
+ <UserBadge
9
+ badge="veteran"
10
+ size="sm"
11
+ />
12
+ </div>
13
+ <br />
14
+ <br />
15
+ <div>
16
+ <UserBadge
17
+ badge="veteran"
18
+ size="md"
19
+ />
20
+ </div>
21
+ <br />
22
+ <br />
23
+ <div>
24
+ <UserBadge
25
+ badge="veteran"
26
+ size="lg"
27
+ />
28
+ </div>
29
+ </div>
30
+ )
31
+ }
32
+
33
+ export default UserBadgeSize
data/app/pb_kits/playbook/pb_user_badge/docs/example.yml CHANGED
@@ -7,3 +7,4 @@ examples:
7
7
 
8
8
  react:
9
9
  - user_badge_default: Default
10
+ - user_badge_size: Sizes
data/app/pb_kits/playbook/pb_user_badge/docs/index.js CHANGED
@@ -1 +1,2 @@
1
1
  export { default as UserBadgeDefault } from './_user_badge_default.jsx'
2
+ export { default as UserBadgeSize } from './_user_badge_size.jsx'
data/app/pb_kits/playbook/pb_user_badge/user_badge.rb CHANGED
@@ -19,7 +19,7 @@ module Playbook
19
19
  end
20
20
 
21
21
  def display_badge
22
- "pb_user_badge/badges/#{badge}"
22
+ "pb_user_badge/badges/#{badge}.svg"
23
23
  end
24
24
  end
25
25
  end
data/lib/playbook/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- VERSION = "4.4.1"
4
+ VERSION = "4.5.0"
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 4.4.1
4
+ version: 4.5.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2020-02-21 00:00:00.000000000 Z
12
+ date: 2020-02-28 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1357,11 +1357,12 @@ files:
1357
1357
  - app/pb_kits/playbook/pb_user_badge/_user_badge.html.erb
1358
1358
  - app/pb_kits/playbook/pb_user_badge/_user_badge.jsx
1359
1359
  - app/pb_kits/playbook/pb_user_badge/_user_badge.scss
1360
- - app/pb_kits/playbook/pb_user_badge/badges/_million-dollar.html.erb
1361
- - app/pb_kits/playbook/pb_user_badge/badges/_veteran.html.erb
1360
+ - app/pb_kits/playbook/pb_user_badge/badges/_million-dollar.svg
1361
+ - app/pb_kits/playbook/pb_user_badge/badges/_veteran.svg
1362
1362
  - app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.html.erb
1363
1363
  - app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.jsx
1364
1364
  - app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size.html.erb
1365
+ - app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size.jsx
1365
1366
  - app/pb_kits/playbook/pb_user_badge/docs/example.yml
1366
1367
  - app/pb_kits/playbook/pb_user_badge/docs/index.js
1367
1368
  - app/pb_kits/playbook/pb_user_badge/user_badge.rb
data/app/pb_kits/playbook/pb_user_badge/badges/_veteran.html.erb DELETED
@@ -1,17 +0,0 @@
1
- <style type="text/css">
2
- .veteran-st0{fill:#004876;}
3
- .veteran-st1{fill:#FFFFFF;}
4
- .veteran-st2{fill:#BB2432;}
5
- </style>
6
-
7
- <?xml version="1.0" encoding="utf-8"?>
8
- <!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
9
- <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"
10
- viewBox="0 0 198.6 242.9" style="enable-background:new 0 0 198.6 242.9;" xml:space="preserve">
11
- <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
12
- 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"/>
13
- <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"/>
14
- <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
15
- 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"/>
16
- <rect x="99.3" y="101.1" class="veteran-st1" width="99.3" height="24.3"/>
17
- </svg>