playbook_ui 2.8.6 → 2.8.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (77) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/packs/application.js +1 -3
  3. data/app/pb_kits/playbook/packs/examples.js +12 -0
  4. data/app/pb_kits/playbook/packs/kits.js +4 -0
  5. data/app/pb_kits/playbook/packs/pb_currency.js +4 -0
  6. data/app/pb_kits/playbook/packs/pb_image.js +0 -1
  7. data/app/pb_kits/playbook/packs/pb_section_separator.js +4 -0
  8. data/app/pb_kits/playbook/packs/pb_stat_change.js +4 -0
  9. data/app/pb_kits/playbook/packs/pb_stat_value.js +4 -0
  10. data/app/pb_kits/playbook/packs/site_styles/_kit_style_index.scss +4 -0
  11. data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +43 -26
  12. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +34 -5
  13. data/app/pb_kits/playbook/pb_card/card.rb +1 -1
  14. data/app/pb_kits/playbook/pb_currency/_currency.html.erb +13 -0
  15. data/app/pb_kits/playbook/pb_currency/_currency.jsx +21 -0
  16. data/app/pb_kits/playbook/pb_currency/_currency.scss +40 -0
  17. data/app/pb_kits/playbook/pb_currency/currency.rb +100 -0
  18. data/app/pb_kits/playbook/pb_currency/docs/_currency_default.jsx +12 -0
  19. data/app/pb_kits/playbook/pb_currency/docs/_currency_large.html.erb +25 -0
  20. data/app/pb_kits/playbook/pb_currency/docs/_currency_small.html.erb +25 -0
  21. data/app/pb_kits/playbook/pb_currency/docs/example.yml +9 -0
  22. data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js +2 -0
  24. data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss +2 -3
  25. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb +5 -3
  26. data/app/pb_kits/playbook/pb_dashboard_value/docs/example.yml +0 -2
  27. data/app/pb_kits/playbook/pb_date/_date.scss +0 -7
  28. data/app/pb_kits/playbook/pb_date/date.rb +11 -9
  29. data/app/pb_kits/playbook/pb_label_pill/label_pill.rb +17 -16
  30. data/app/pb_kits/playbook/pb_owner/owner.rb +17 -17
  31. data/app/pb_kits/playbook/pb_owner_phone/owner_phone.rb +21 -23
  32. data/app/pb_kits/playbook/pb_phone/phone.rb +17 -16
  33. data/app/pb_kits/playbook/{pb_dashboard_value/child_kits/_stat_label.html.erb → pb_section_separator/_section_separator.html.erb} +1 -1
  34. data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx +21 -0
  35. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +29 -0
  36. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_default.jsx +12 -0
  37. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.html.erb +1 -0
  38. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.html.erb +1 -0
  39. data/app/pb_kits/playbook/pb_section_separator/docs/example.yml +9 -0
  40. data/app/pb_kits/playbook/pb_section_separator/docs/index.js +1 -0
  41. data/app/pb_kits/playbook/{pb_dashboard_value/stat_label.rb → pb_section_separator/section_separator.rb} +11 -18
  42. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +4 -4
  43. data/app/pb_kits/playbook/{pb_dashboard_value/child_kits → pb_stat_change}/_stat_change.html.erb +0 -0
  44. data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx +21 -0
  45. data/app/pb_kits/playbook/pb_stat_change/_stat_change.scss +2 -0
  46. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.html.erb +18 -0
  47. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx +12 -0
  48. data/app/pb_kits/playbook/pb_stat_change/docs/example.yml +9 -0
  49. data/app/pb_kits/playbook/pb_stat_change/docs/index.js +1 -0
  50. data/app/pb_kits/playbook/{pb_dashboard_value → pb_stat_change}/stat_change.rb +2 -3
  51. data/app/pb_kits/playbook/{pb_dashboard_value/child_kits → pb_stat_value}/_stat_value.html.erb +0 -0
  52. data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx +21 -0
  53. data/app/pb_kits/playbook/{pb_dashboard_value/child_kits → pb_stat_value}/_stat_value.scss +3 -1
  54. data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.html.erb +1 -0
  55. data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx +12 -0
  56. data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.html.erb +1 -0
  57. data/app/pb_kits/playbook/pb_stat_value/docs/example.yml +9 -0
  58. data/app/pb_kits/playbook/pb_stat_value/docs/index.js +1 -0
  59. data/app/pb_kits/playbook/{pb_dashboard_value → pb_stat_value}/stat_value.rb +2 -3
  60. data/app/pb_kits/playbook/pb_table/styles/_structure.scss +1 -1
  61. data/app/pb_kits/playbook/pb_time/time.rb +7 -7
  62. data/app/pb_kits/playbook/pb_title_count/title_count.rb +8 -4
  63. data/app/pb_kits/playbook/pb_toggle/toggle.rb +14 -13
  64. data/app/pb_kits/playbook/pb_user_badge/user_badge.rb +2 -2
  65. data/app/pb_kits/playbook/pb_vertical_nav/_vertical_nav.html.erb +1 -5
  66. data/app/pb_kits/playbook/pb_vertical_nav/docs/_block_no_title.html.erb +5 -0
  67. data/app/pb_kits/playbook/pb_vertical_nav/docs/example.yml +1 -0
  68. data/app/pb_kits/playbook/pb_vertical_nav/vertical_nav.rb +15 -9
  69. data/app/pb_kits/playbook/plugins/pb_chart_plugin.js +2 -0
  70. data/app/pb_kits/playbook/vendor.js +6 -0
  71. data/app/views/layouts/playbook/application.html.slim +0 -1
  72. data/lib/generators/kit/templates/kit_jsx.erb.tt +30 -12
  73. data/lib/playbook/engine.rb +1 -1
  74. data/lib/playbook/version.rb +1 -1
  75. metadata +43 -11
  76. data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_change.html.erb +0 -15
  77. data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_label.html.erb +0 -19
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 76a94704ea4a1aee3b57ea302589c863ce195ef2e5a13bbf57006cdf66f43f7b
4
- data.tar.gz: d59135b0711cbeee71a8499149b567eea897ae2d1e5704c9358f69d6f8b34c82
3
+ metadata.gz: 0a42e419ff336721df276fdf3b5b42e13645c628f60a08b07637934cc2d98974
4
+ data.tar.gz: 2b58fa57e6183c3a85ecd8a9b5b8f37b1eebbc948f12cf0bb96e6794f60fe44a
5
5
  SHA512:
6
- metadata.gz: 53ffc31b9f170dbfcbc10d58e109f2298ba3824268ccc868714ed10249302e4e9337e1092c51ff7480f9888f521392124f9296a817e20a8199abb22fb5b316ad
7
- data.tar.gz: f62eb9b6ecf504cc7896a7291c23492c6e6dd6d51ad6d6e90e905b61ee4defde8f041529911106748ab3fe4ac550cd408672dc0cc16f7e02d71f052f1b6a0892
6
+ metadata.gz: '04357696dbf7422c03cb9743c7f9c580bd7ceb1f9ed0ca766fdc51dac963d84c4d032d5cee74548077c3eeeb8ab4911257a59062e3a433851d8b416af9cec0fa'
7
+ data.tar.gz: 37d577d1189723e118498e326177ddaa7fc1d7041fa8217535bda8b10b45f564ee65eb0d0edcf7a955463f205ef4077dc90dad5b855568654fd4232028643fa5
@@ -1,10 +1,8 @@
1
1
  import "../../../../fonts/fontawesome.js"
2
2
  import "../../../../fonts/regular.js"
3
- import pbChart from "../plugins/pb_chart_plugin.js"
4
3
  import "./main.scss"
5
4
  import "./kits.js"
6
-
7
- window.pbChart = pbChart
5
+ import "../vendor.js"
8
6
 
9
7
  // Move to separate file
10
8
  $(document).on("click", "[data-toggle]", function(e) {
@@ -113,3 +113,15 @@ WebpackerReact.setup (Owner);
113
113
 
114
114
  import * as Toggle from "pb_toggle/docs";
115
115
  WebpackerReact.setup (Toggle);
116
+
117
+ import * as StatValue from "pb_stat_value/docs";
118
+ WebpackerReact.setup (StatValue);
119
+
120
+ import * as StatChange from "pb_stat_change/docs";
121
+ WebpackerReact.setup (StatChange);
122
+
123
+ import * as SectionSeparator from "pb_section_separator/docs";
124
+ WebpackerReact.setup (SectionSeparator);
125
+
126
+ import * as Currency from "pb_currency/docs";
127
+ WebpackerReact.setup (Currency);
@@ -33,3 +33,7 @@ import "./pb_phone.js";
33
33
  import "./pb_owner_phone.js";
34
34
  import "./pb_owner.js";
35
35
  import "./pb_toggle.js";
36
+ import "./pb_stat_value.js";
37
+ import "./pb_stat_change.js";
38
+ import "./pb_section_separator.js";
39
+ import "./pb_currency.js";
@@ -0,0 +1,4 @@
1
+ import Currency from "pb_currency/_currency.jsx";
2
+
3
+ import WebpackerReact from "webpacker-react";
4
+ WebpackerReact.setup({ Currency });
@@ -1,6 +1,5 @@
1
1
  import Image from "pb_image/_image.jsx";
2
2
  import WebpackerReact from "webpacker-react";
3
- import "lazysizes";
4
3
 
5
4
 
6
5
  WebpackerReact.setup({ Image });
@@ -0,0 +1,4 @@
1
+ import SectionSeparator from "pb_section_separator/_section_separator.jsx";
2
+
3
+ import WebpackerReact from "webpacker-react";
4
+ WebpackerReact.setup({ SectionSeparator });
@@ -0,0 +1,4 @@
1
+ import StatChange from "pb_stat_change/_stat_change.jsx";
2
+
3
+ import WebpackerReact from "webpacker-react";
4
+ WebpackerReact.setup({ StatChange });
@@ -0,0 +1,4 @@
1
+ import StatValue from "pb_stat_value/_stat_value.jsx";
2
+
3
+ import WebpackerReact from "webpacker-react";
4
+ WebpackerReact.setup({ StatValue });
@@ -35,3 +35,7 @@
35
35
  @import '../../pb_owner_phone/owner_phone';
36
36
  @import '../../pb_owner/owner';
37
37
  @import '../../pb_toggle/toggle';
38
+ @import '../../pb_stat_value/stat_value';
39
+ @import '../../pb_stat_change/stat_change';
40
+ @import '../../pb_section_separator/section_separator';
41
+ @import '../../pb_currency/currency';
@@ -1,26 +1,25 @@
1
- import React from 'react';
2
- import PropTypes from "prop-types";
3
- import classnames from 'classnames';
4
- import { map } from 'lodash';
5
- import Image from "../pb_image/_image.jsx";
6
-
7
- const propTypes = {
8
- className: PropTypes.string,
9
- name: PropTypes.string,
10
- size: PropTypes.string,
11
- url: PropTypes.string
12
- };
13
-
14
- const defaultProps = {
15
- name: null,
16
- size: "base"
17
- };
1
+ /* @flow */
2
+ /*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
3
+
4
+ import React from 'react'
5
+
6
+ import classnames from 'classnames'
7
+ import { map } from 'lodash'
8
+ import Image from "../pb_image/_image.jsx"
9
+
10
+ type AvatarProps = {
11
+ className?: String,
12
+ name: String,
13
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
14
+ status: 'online' | 'away',
15
+ url: String,
16
+ }
18
17
 
19
18
  const initials = function(name) {
20
19
  if (name) {
21
20
  return map(name.split(/\s/), name => name[0]).join('').substring(0,2)
22
21
  }
23
- };
22
+ }
24
23
 
25
24
  const image = function(url, name) {
26
25
  if (url) {
@@ -30,16 +29,28 @@ const image = function(url, name) {
30
29
  />
31
30
  )
32
31
  }
33
- };
32
+ }
33
+
34
+ const PbStatus = ({ size, status } : { size: String, status: String }) => (
35
+ <div className={`pb_online_status_kit_${status} size_${size}`}/>
36
+ )
37
+
38
+ class Avatar extends React.Component<AvatarProps> {
39
+ static defaultProps = {
40
+ name: null,
41
+ size: 'md'
42
+ }
43
+
44
+ props: AvatarProps
34
45
 
35
- class Avatar extends React.Component {
36
46
  render() {
37
47
  const {
38
48
  className,
39
49
  name,
40
50
  size,
51
+ status,
41
52
  url
42
- } = this.props;
53
+ } = this.props
43
54
 
44
55
  const css = classnames([
45
56
  `pb_avatar_kit`,
@@ -51,13 +62,19 @@ class Avatar extends React.Component {
51
62
  <div className={css}
52
63
  data-initials={initials(name)}
53
64
  >
54
- {image(url, name)}
65
+ <div
66
+ className="avatar_wrapper"
67
+ data-initials={initials(name)}
68
+ >
69
+ {image(url, name)}
70
+ </div>
71
+ <PbStatus
72
+ size={size}
73
+ status={status}
74
+ />
55
75
  </div>
56
76
  )
57
77
  }
58
78
  }
59
79
 
60
- Avatar.propTypes = propTypes;
61
- Avatar.defaultProps = defaultProps;
62
-
63
- export default Avatar;
80
+ export default Avatar
@@ -4,11 +4,40 @@ import Avatar from "../_avatar.jsx"
4
4
  function AvatarDefault() {
5
5
  return (
6
6
  <div>
7
- <Avatar name="Terry Johnson" size="xs" url="https://randomuser.me/api/portraits/men/44.jpg" />
8
- <Avatar name="Terry Johnson" size="sm" url="https://randomuser.me/api/portraits/men/44.jpg" />
9
- <Avatar name="Terry Johnson" size="md" url="https://randomuser.me/api/portraits/men/44.jpg" />
10
- <Avatar name="Terry Johnson" size="lg" url="https://randomuser.me/api/portraits/men/44.jpg" />
11
- <Avatar name="Terry Johnson" size="xl" url="https://randomuser.me/api/portraits/men/44.jpg" />
7
+ <Avatar
8
+ name="Terry Johnson"
9
+ size="xs"
10
+ status="online"
11
+ url="https://randomuser.me/api/portraits/men/44.jpg"
12
+ />
13
+ <br/>
14
+ <Avatar
15
+ name="Terry Johnson"
16
+ size="sm"
17
+ status="online"
18
+ url="https://randomuser.me/api/portraits/men/44.jpg"
19
+ />
20
+ <br/>
21
+ <Avatar
22
+ name="Terry Johnson"
23
+ size="md"
24
+ status="away"
25
+ url="https://randomuser.me/api/portraits/men/44.jpg"
26
+ />
27
+ <br/>
28
+ <Avatar
29
+ name="Terry Johnson"
30
+ size="lg"
31
+ status="offline"
32
+ url="https://randomuser.me/api/portraits/men/44.jpg"
33
+ />
34
+ <br/>
35
+ <Avatar
36
+ name="Terry Johnson"
37
+ size="xl"
38
+ status="offline"
39
+ url="https://randomuser.me/api/portraits/men/44.jpg"
40
+ />
12
41
  </div>
13
42
  )
14
43
  }
@@ -44,7 +44,7 @@ module Playbook
44
44
  end
45
45
 
46
46
  def yield(context:)
47
- if !block.nil?
47
+ unless block.nil?
48
48
  pb_card_body = Playbook::PbCard::CardBody.new(padding: configured_padding) do
49
49
  context.capture(&block)
50
50
  end
@@ -0,0 +1,13 @@
1
+ <%= content_tag(:div,
2
+ id: object.id,
3
+ data: object.data,
4
+ class: object.classname(object.kit_class)) do %>
5
+
6
+ <%= object.label %>
7
+ <div class="pb_currency_wrapper">
8
+ <%= object.dollar_sign %>
9
+ <%= object.value %>
10
+ <%= object.unit %>
11
+ </div>
12
+
13
+ <% end %>
@@ -0,0 +1,21 @@
1
+ import React from 'react';
2
+ import PropTypes from "prop-types";
3
+
4
+ const propTypes = {
5
+ className: PropTypes.string,
6
+ id: PropTypes.string
7
+ };
8
+
9
+ class Currency extends React.Component {
10
+ render() {
11
+ return (
12
+ <div className="pb_currency">
13
+ <span>{`CURRENCY CONTENT`}</span>
14
+ </div>
15
+ )
16
+ }
17
+ }
18
+
19
+ Currency.propTypes = propTypes;
20
+
21
+ export default Currency;
@@ -0,0 +1,40 @@
1
+
2
+ [class^=pb_currency_kit]{
3
+ &[class*=_center] {
4
+ & > [class^=pb_caption],
5
+ & > [class^=pb_title],
6
+ & > [class^=pb_body] {
7
+ text-align: center;
8
+ }
9
+ & > [class*=pb_currency_wrapper] {
10
+ justify-content: center;
11
+ }
12
+ }
13
+
14
+ &[class*=_right] {
15
+ & > [class^=pb_caption],
16
+ & > [class^=pb_title],
17
+ & > [class^=pb_body] {
18
+ text-align: right;
19
+ }
20
+ & > [class*=pb_currency_wrapper] {
21
+ justify-content: flex-end;
22
+ }
23
+ }
24
+ }
25
+
26
+ [class^=pb_currency_wrapper] {
27
+ display: flex;
28
+
29
+ & > [class*=dollar_sign] {
30
+ display: flex;
31
+ align-items: flex-start;
32
+ }
33
+ & > [class*=unit] {
34
+ display: flex;
35
+ align-items: flex-end;
36
+ }
37
+ & > [class*=pb_currency_value] {
38
+ line-height: .9;
39
+ }
40
+ }
@@ -0,0 +1,100 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbCurrency
5
+ class Currency < Playbook::PbKit::Base
6
+ PROPS = %i[configured_align
7
+ configured_classname
8
+ configured_data
9
+ configured_id
10
+ configured_label
11
+ configured_value
12
+ configured_unit
13
+ configured_dollar_sign
14
+ configured_size].freeze
15
+
16
+ def initialize(align: default_configuration,
17
+ classname: default_configuration,
18
+ data: default_configuration,
19
+ id: default_configuration,
20
+ label: default_configuration,
21
+ value: default_configuration,
22
+ unit: default_configuration,
23
+ dollar_sign: default_configuration,
24
+ size: default_configuration)
25
+ self.configured_align = align
26
+ self.configured_classname = classname
27
+ self.configured_data = data
28
+ self.configured_id = id
29
+ self.configured_label = label
30
+ self.configured_value = value
31
+ self.configured_unit = unit
32
+ self.configured_dollar_sign = dollar_sign
33
+ self.configured_size = size
34
+ end
35
+
36
+ def align
37
+ align_options = %w[left center right]
38
+ one_of_value(configured_align, align_options, "left")
39
+ end
40
+
41
+ def dollar_sign
42
+ pb_dollar_sign = Playbook::PbBody::Body.new(classname: "dollar_sign", color: "light") do
43
+ default_value(configured_dollar_sign, "")
44
+ end
45
+ ApplicationController.renderer.render(partial: pb_dollar_sign, as: :object)
46
+ end
47
+
48
+ def label
49
+ if is_set? configured_label
50
+ pb_label = Playbook::PbCaption::Caption.new(text: configured_label)
51
+ ApplicationController.renderer.render(partial: pb_label, as: :object)
52
+ end
53
+ end
54
+
55
+ def size
56
+ size_options = %w[lg sm]
57
+ one_of_value(configured_size, size_options, "sm")
58
+ end
59
+
60
+ def value_size
61
+ size == "lg" ? 1 : 2
62
+ end
63
+
64
+ def value
65
+ if is_set? configured_value
66
+ pb_title = Playbook::PbTitle::Title.new(size: value_size, text: configured_value, classname: "pb_currency_value")
67
+ ApplicationController.renderer.render(partial: pb_title, as: :object)
68
+ end
69
+ end
70
+
71
+ def unit
72
+ pb_unit = Playbook::PbBody::Body.new(classname: "unit", color: "light") do
73
+ default_value(configured_unit, "")
74
+ end
75
+ ApplicationController.renderer.render(partial: pb_unit, as: :object)
76
+ end
77
+
78
+ def kit_class
79
+ kit_options = [
80
+ "pb_currency_kit",
81
+ align,
82
+ ]
83
+ kit_options.join("_")
84
+ end
85
+
86
+ def to_partial_path
87
+ "pb_currency/currency"
88
+ end
89
+
90
+ private
91
+
92
+ DEFAULT = Object.new
93
+ private_constant :DEFAULT
94
+ def default_configuration
95
+ DEFAULT
96
+ end
97
+ attr_accessor(*PROPS)
98
+ end
99
+ end
100
+ end
@@ -0,0 +1,12 @@
1
+ import React from "react"
2
+ import Currency from "../_currency.jsx"
3
+
4
+ function CurrencyDefault() {
5
+ return (
6
+ <div>
7
+ <Currency />
8
+ </div>
9
+ )
10
+ }
11
+
12
+ export default CurrencyDefault;