playbook_ui 2.8.8 → 2.8.9

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +23 -289
  3. data/app/pb_kits/playbook/packs/index.js +6 -0
  4. data/app/pb_kits/playbook/pb_body/_body.jsx +4 -4
  5. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +1 -1
  6. data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx +75 -17
  7. data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.jsx +31 -0
  8. data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx +20 -1
  9. data/app/pb_kits/playbook/pb_dashboard_value/docs/example.yml +2 -1
  10. data/app/pb_kits/playbook/pb_dashboard_value/docs/index.js +1 -0
  11. data/app/pb_kits/playbook/pb_date/date.rb +16 -2
  12. data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb +7 -0
  13. data/app/pb_kits/playbook/pb_icon/_icon.jsx +87 -18
  14. data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.jsx +14 -0
  15. data/app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx +12 -0
  16. data/app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx +12 -0
  18. data/app/pb_kits/playbook/pb_icon/docs/_icon_flip.jsx +14 -0
  19. data/app/pb_kits/playbook/pb_icon/docs/_icon_pull.jsx +13 -0
  20. data/app/pb_kits/playbook/pb_icon/docs/_icon_rotate.jsx +14 -0
  21. data/app/pb_kits/playbook/pb_icon/docs/_icon_sizes.jsx +27 -0
  22. data/app/pb_kits/playbook/pb_icon/docs/example.yml +8 -1
  23. data/app/pb_kits/playbook/pb_icon/docs/index.js +7 -0
  24. data/app/pb_kits/playbook/pb_pill/_pill.jsx +19 -12
  25. data/app/pb_kits/playbook/pb_pill/_pill.scss +1 -1
  26. data/app/pb_kits/playbook/pb_pill/pill.rb +1 -3
  27. data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx +78 -18
  28. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx +11 -1
  29. data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx +44 -16
  30. data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx +1 -1
  31. data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.jsx +10 -0
  32. data/app/pb_kits/playbook/pb_stat_value/docs/example.yml +1 -0
  33. data/app/pb_kits/playbook/pb_stat_value/docs/index.js +1 -0
  34. data/app/pb_kits/playbook/pb_toggle/_toggle.html.erb +1 -1
  35. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.html.erb +3 -0
  36. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.html.erb +22 -0
  37. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.html.erb +14 -18
  38. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +2 -0
  39. data/app/pb_kits/playbook/pb_toggle/toggle.rb +19 -5
  40. data/lib/playbook/version.rb +1 -1
  41. metadata +13 -2
data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx CHANGED
@@ -1,21 +1,81 @@
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 StatChange extends React.Component {
10
- render() {
11
- return (
12
- <div className="pb_stat_change">
13
- <span>STAT CHANGE CONTENT</span>
14
- </div>
15
- )
16
- }
1
+ /* @flow */
2
+
3
+ import React from 'react'
4
+ import classnames from 'classnames'
5
+ import Body from '../pb_body/_body.jsx'
6
+ import Icon from '../pb_icon/_icon.jsx'
7
+
8
+ type StatChangeProps = {
9
+ change?: 'increase' | 'decrease' | 'neutral',
10
+ className?: String,
11
+ id?: String,
12
+ value?: String | Number
13
+ }
14
+
15
+ const statChangeCSS = ({}: StatChangeProps, status) => {
16
+
17
+ const statusStyle = status !== '' ? `_${status}` : ''
18
+
19
+ return 'pb_stat_change_kit' + statusStyle
17
20
  }
18
21
 
19
- StatChange.propTypes = propTypes;
22
+ const StatChange = (props: StatChangeProps) => {
23
+ const {
24
+ change='neutral',
25
+ className,
26
+ id,
27
+ value,
28
+ } = props
29
+
30
+ const status = (function(change) {
31
+ switch(change) {
32
+ case 'increase':
33
+ return 'positive';
34
+ case 'decrease':
35
+ return 'negative';
36
+ default:
37
+ return 'neutral';
38
+ }
39
+ })(change)
40
+
41
+ const icon = (function(change) {
42
+ switch(change) {
43
+ case 'increase':
44
+ return 'arrow-up';
45
+ case 'decrease':
46
+ return 'arrow-down';
47
+ default:
48
+ return null;
49
+ }
50
+ })(change)
51
+
52
+ const displayIcon = function(icon) {
53
+ if (icon) {
54
+ return (
55
+ <span>
56
+ <Icon icon={icon} fixed_width={true} />
57
+ &nbsp;
58
+ </span>
59
+ )
60
+ }
61
+ }
62
+
63
+ const displayValue = function(status, value) {
64
+ if (value) {
65
+ return (
66
+ <Body status={status}>
67
+ {displayIcon(icon)}
68
+ {value}
69
+ </Body>
70
+ )
71
+ }
72
+ }
73
+
74
+ return (
75
+ <div id={id} className={classnames(statChangeCSS(props, status), className)}>
76
+ {displayValue(status, value)}
77
+ </div>
78
+ )
79
+ }
20
80
 
21
- export default StatChange;
81
+ export default StatChange
data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx CHANGED
@@ -3,7 +3,17 @@ import StatChange from "../_stat_change.jsx"
3
3
 
4
4
  function StatChangeDefault() {
5
5
  return (
6
- <h1>{`Coming Soon...`}</h1>
6
+ <div>
7
+ <StatChange change="increase" value="28.4%" />
8
+
9
+ <br/>
10
+
11
+ <StatChange change="decrease" value="6.1%" />
12
+
13
+ <br/>
14
+
15
+ <StatChange change="neutral" value="98%" />
16
+ </div>
7
17
  )
8
18
  }
9
19
 
data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx CHANGED
@@ -1,21 +1,49 @@
1
- import React from 'react';
2
- import PropTypes from "prop-types";
1
+ /* @flow */
3
2
 
4
- const propTypes = {
5
- className: PropTypes.string,
6
- id: PropTypes.string
7
- };
3
+ import React from 'react'
4
+ import classnames from 'classnames'
5
+ import Title from '../pb_title/_title.jsx'
8
6
 
9
- class StatValue extends React.Component {
10
- render() {
11
- return (
12
- <div className="pb_stat_value">
13
- <span>STAT VALUE CONTENT</span>
14
- </div>
15
- )
16
- }
7
+ type StatValueProps = {
8
+ className?: String,
9
+ id?: String,
10
+ unit?: String,
11
+ value: String | Number
17
12
  }
18
13
 
19
- StatValue.propTypes = propTypes;
14
+ const StatValue = (props: StatValueProps) => {
15
+ const {
16
+ className,
17
+ id,
18
+ unit,
19
+ value=0
20
+ } = props
21
+
22
+ const displayValue = function(value) {
23
+ if (value) {
24
+ return (
25
+ <Title size={1} text={value} />
26
+ )
27
+ }
28
+ }
29
+
30
+ const displayUnit = function(unit) {
31
+ if (unit) {
32
+ return (
33
+ <Title size={3} text={unit} />
34
+ )
35
+ }
36
+ }
37
+
38
+ return (
39
+ <div id={id} className={classnames('pb_stat_value_kit', className)}>
40
+ <div className="pb_stat_value_wrapper">
41
+ {displayValue(value)}
42
+ &nbsp;
43
+ {displayUnit(unit)}
44
+ </div>
45
+ </div>
46
+ )
47
+ }
20
48
 
21
- export default StatValue;
49
+ export default StatValue
data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx CHANGED
@@ -3,7 +3,7 @@ import StatValue from "../_stat_value.jsx"
3
3
 
4
4
  function StatValueDefault() {
5
5
  return (
6
- <h1>{`Coming Soon...`}</h1>
6
+ <StatValue value={1048} />
7
7
  )
8
8
  }
9
9
 
data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.jsx ADDED
@@ -0,0 +1,10 @@
1
+ import React from "react"
2
+ import StatValue from "../_stat_value.jsx"
3
+
4
+ function StatValueUnit() {
5
+ return (
6
+ <StatValue value="5,294" unit="appt" />
7
+ )
8
+ }
9
+
10
+ export default StatValueUnit;
data/app/pb_kits/playbook/pb_stat_value/docs/example.yml CHANGED
@@ -7,3 +7,4 @@ examples:
7
7
 
8
8
  react:
9
9
  - stat_value_default: Default
10
+ - stat_value_unit: Unit Value
data/app/pb_kits/playbook/pb_stat_value/docs/index.js CHANGED
@@ -1 +1,2 @@
1
1
  export {default as StatValueDefault} from './_stat_value_default.jsx';
2
+ export {default as StatValueUnit} from './_stat_value_unit.jsx';
data/app/pb_kits/playbook/pb_toggle/_toggle.html.erb CHANGED
@@ -6,7 +6,7 @@
6
6
  ) do %>
7
7
 
8
8
  <label class="pb_toggle_wrapper">
9
- <input type="checkbox" <%= object.name %> <%= object.value %> <%= object.checked %> />
9
+ <%= object.yield(context: self) %>
10
10
  <div class="pb_toggle_control"></div>
11
11
  </label>
12
12
  <% end %>
data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.html.erb ADDED
@@ -0,0 +1,3 @@
1
+ <%= pb_rails("toggle", props: { size: "sm" }) do %>
2
+ <input class="my_custom_input" type="checkbox" name="custom_checkbox" value="ABC" />
3
+ <% end %>
data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.html.erb ADDED
@@ -0,0 +1,22 @@
1
+ <%= pb_rails("title", props: { size: 4, text: "Select one option:" }) %>
2
+
3
+ <br>
4
+
5
+ <%= pb_rails("caption", props: { text: "Male" }) %>
6
+ <%= pb_rails("toggle", props: { size: "sm" }) do %>
7
+ <input type="radio" name="gender" value="male">
8
+ <% end %>
9
+
10
+ <br/>
11
+
12
+ <%= pb_rails("caption", props: { text: "Female" }) %>
13
+ <%= pb_rails("toggle", props: { size: "sm" }) do %>
14
+ <input type="radio" name="gender" value="female">
15
+ <% end %>
16
+
17
+ <br/>
18
+
19
+ <%= pb_rails("caption", props: { text: "Other" }) %>
20
+ <%= pb_rails("toggle", props: { size: "sm" }) do %>
21
+ <input type="radio" name="gender" value="other">
22
+ <% end %>
data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.html.erb CHANGED
@@ -2,24 +2,20 @@
2
2
 
3
3
  <br>
4
4
 
5
- <label>
6
- <%= pb_rails("caption", props: { text: "Car" }) %>
7
- <%= pb_rails("toggle", props: {
8
- size: "sm",
9
- checked: false,
10
- name: "vehicle",
11
- value: "car"
12
- }) %>
13
- </label>
5
+ <%= pb_rails("caption", props: { text: "Car" }) %>
6
+ <%= pb_rails("toggle", props: {
7
+ size: "sm",
8
+ checked: false,
9
+ name: "vehicle",
10
+ value: "car"
11
+ }) %>
14
12
 
15
13
  <br>
16
14
 
17
- <label>
18
- <%= pb_rails("caption", props: { text: "Bike" }) %>
19
- <%= pb_rails("toggle", props: {
20
- size: "sm",
21
- checked: false,
22
- name: "vehicle",
23
- value: "bike"
24
- }) %>
25
- </label>
15
+ <%= pb_rails("caption", props: { text: "Bike" }) %>
16
+ <%= pb_rails("toggle", props: {
17
+ size: "sm",
18
+ checked: false,
19
+ name: "vehicle",
20
+ value: "bike"
21
+ }) %>
data/app/pb_kits/playbook/pb_toggle/docs/example.yml CHANGED
@@ -4,6 +4,8 @@ examples:
4
4
  - toggle_default: Sizes
5
5
  - toggle_checked: Default State
6
6
  - toggle_name: Name and Value
7
+ - toggle_custom: Custom checkbox input
8
+ - toggle_custom_radio: Custom radio inputs
7
9
 
8
10
  react:
9
11
  - toggle_default: Default
data/app/pb_kits/playbook/pb_toggle/toggle.rb CHANGED
@@ -3,6 +3,9 @@
3
3
  module Playbook
4
4
  module PbToggle
5
5
  class Toggle < Playbook::PbKit::Base
6
+ include ActionView::Helpers::FormTagHelper
7
+ include ActionView::Context
8
+
6
9
  PROPS = %i[configured_aria
7
10
  configured_classname
8
11
  configured_checked
@@ -10,7 +13,8 @@ module Playbook
10
13
  configured_id
11
14
  configured_name
12
15
  configured_size
13
- configured_value].freeze
16
+ configured_value
17
+ block].freeze
14
18
 
15
19
  def initialize(aria: default_configuration,
16
20
  classname: default_configuration,
@@ -19,7 +23,8 @@ module Playbook
19
23
  id: default_configuration,
20
24
  name: default_configuration,
21
25
  size: default_configuration,
22
- value: default_configuration)
26
+ value: default_configuration,
27
+ &block)
23
28
  self.configured_aria = aria
24
29
  self.configured_classname = classname
25
30
  self.configured_checked = checked
@@ -28,14 +33,15 @@ module Playbook
28
33
  self.configured_name = name
29
34
  self.configured_size = size
30
35
  self.configured_value = value
36
+ self.block = block_given? ? block : nil
31
37
  end
32
38
 
33
39
  def checked
34
- true_value(configured_checked, "checked='true'", "")
40
+ is_true? configured_checked
35
41
  end
36
42
 
37
43
  def name
38
- "name=\"#{configured_name}\"" if is_set? configured_name
44
+ configured_name if is_set? configured_name
39
45
  end
40
46
 
41
47
  def size
@@ -44,7 +50,15 @@ module Playbook
44
50
  end
45
51
 
46
52
  def value
47
- "value=\"#{configured_value}\"" if is_set? configured_value
53
+ configured_value if is_set? configured_value
54
+ end
55
+
56
+ def input
57
+ check_box_tag(name, value, checked)
58
+ end
59
+
60
+ def yield(context:)
61
+ !block.nil? ? context.capture(&block) : input
48
62
  end
49
63
 
50
64
  def kit_class
data/lib/playbook/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- VERSION = "2.8.8"
4
+ VERSION = "2.8.9"
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: 2.8.8
4
+ version: 2.8.9
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: 2019-09-19 00:00:00.000000000 Z
12
+ date: 2019-09-20 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: method_source
@@ -493,6 +493,7 @@ files:
493
493
  - app/pb_kits/playbook/pb_dashboard_value/dashboardValueSettings.js
494
494
  - app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb
495
495
  - app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.html.erb
496
+ - app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.jsx
496
497
  - app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.html.erb
497
498
  - app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx
498
499
  - app/pb_kits/playbook/pb_dashboard_value/docs/example.yml
@@ -509,14 +510,21 @@ files:
509
510
  - app/pb_kits/playbook/pb_icon/_icon.jsx
510
511
  - app/pb_kits/playbook/pb_icon/_icon.scss
511
512
  - app/pb_kits/playbook/pb_icon/docs/_icon_animate.html.erb
513
+ - app/pb_kits/playbook/pb_icon/docs/_icon_animate.jsx
512
514
  - app/pb_kits/playbook/pb_icon/docs/_icon_border.html.erb
515
+ - app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx
513
516
  - app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb
514
517
  - app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx
515
518
  - app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb
519
+ - app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx
516
520
  - app/pb_kits/playbook/pb_icon/docs/_icon_flip.html.erb
521
+ - app/pb_kits/playbook/pb_icon/docs/_icon_flip.jsx
517
522
  - app/pb_kits/playbook/pb_icon/docs/_icon_pull.html.erb
523
+ - app/pb_kits/playbook/pb_icon/docs/_icon_pull.jsx
518
524
  - app/pb_kits/playbook/pb_icon/docs/_icon_rotate.html.erb
525
+ - app/pb_kits/playbook/pb_icon/docs/_icon_rotate.jsx
519
526
  - app/pb_kits/playbook/pb_icon/docs/_icon_sizes.html.erb
527
+ - app/pb_kits/playbook/pb_icon/docs/_icon_sizes.jsx
520
528
  - app/pb_kits/playbook/pb_icon/docs/example.yml
521
529
  - app/pb_kits/playbook/pb_icon/docs/index.js
522
530
  - app/pb_kits/playbook/pb_icon/icon.rb
@@ -730,6 +738,7 @@ files:
730
738
  - app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.html.erb
731
739
  - app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx
732
740
  - app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.html.erb
741
+ - app/pb_kits/playbook/pb_stat_value/docs/_stat_value_unit.jsx
733
742
  - app/pb_kits/playbook/pb_stat_value/docs/example.yml
734
743
  - app/pb_kits/playbook/pb_stat_value/docs/index.js
735
744
  - app/pb_kits/playbook/pb_stat_value/stat_value.rb
@@ -820,6 +829,8 @@ files:
820
829
  - app/pb_kits/playbook/pb_toggle/_toggle.jsx
821
830
  - app/pb_kits/playbook/pb_toggle/_toggle.scss
822
831
  - app/pb_kits/playbook/pb_toggle/docs/_toggle_checked.html.erb
832
+ - app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.html.erb
833
+ - app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.html.erb
823
834
  - app/pb_kits/playbook/pb_toggle/docs/_toggle_default.html.erb
824
835
  - app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx
825
836
  - app/pb_kits/playbook/pb_toggle/docs/_toggle_name.html.erb