playbook_ui 7.0.1 → 7.1.0.pre.alpha1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (137) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/data/menu.yml +4 -3
  3. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +0 -1
  4. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +1 -0
  5. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx +3 -3
  6. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss +82 -90
  7. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss +57 -0
  8. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss +27 -0
  9. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb +4 -2
  10. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb +17 -7
  11. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx +32 -9
  12. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb +18 -7
  13. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx +37 -9
  14. data/app/pb_kits/playbook/pb_button_toolbar/docs/example.yml +3 -7
  15. data/app/pb_kits/playbook/pb_button_toolbar/docs/index.js +0 -2
  16. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +1 -2
  17. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +1 -3
  18. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +3 -2
  19. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +34 -32
  20. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +1 -2
  21. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +1 -2
  22. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +1 -0
  23. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +4 -0
  24. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +4 -0
  25. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb +9 -9
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx +8 -8
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md +3 -1
  28. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +1 -0
  29. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +1 -0
  30. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -4
  31. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -2
  32. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb +8 -14
  33. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +122 -39
  34. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss +33 -2
  35. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb +44 -9
  36. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.html.erb +14 -1
  37. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +45 -1
  38. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb +3 -2
  39. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +29 -15
  40. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +10 -0
  41. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb +21 -0
  42. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx +38 -0
  43. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb +2 -1
  44. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx +1 -2
  45. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +1 -1
  46. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb +1 -1
  48. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +1 -1
  49. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +2 -0
  50. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +1 -0
  51. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +7 -1
  52. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js +18 -0
  53. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
  54. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  55. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +3 -3
  56. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +3 -3
  57. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +1 -0
  58. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +0 -1
  59. data/app/pb_kits/playbook/pb_popover/_popover.scss +6 -4
  60. data/app/pb_kits/playbook/pb_popover/index.js +3 -1
  61. data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +3 -0
  62. data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +168 -33
  63. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb +3 -1
  64. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx +10 -8
  65. data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +1 -1
  66. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +14 -16
  67. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +6 -3
  68. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.html.erb +17 -1
  69. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx +17 -1
  70. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx +10 -3
  71. data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +11 -1
  72. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +1 -1
  73. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb +34 -0
  74. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx +68 -0
  75. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.md +2 -0
  76. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb +61 -0
  77. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.jsx +89 -0
  78. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.md +1 -0
  79. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb +34 -0
  80. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx +68 -0
  81. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.md +2 -0
  82. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb +43 -0
  83. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx +80 -0
  84. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.md +1 -0
  85. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb +34 -0
  86. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx +63 -0
  87. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md +1 -0
  88. data/app/pb_kits/playbook/pb_table/docs/example.yml +12 -0
  89. data/app/pb_kits/playbook/pb_table/docs/index.js +6 -0
  90. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +5 -5
  91. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_options.html.erb +10 -0
  92. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +1 -0
  93. data/app/pb_kits/playbook/pb_toggle/toggle.rb +4 -1
  94. data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb +24 -20
  95. data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +19 -1
  96. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +8 -1
  97. data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +21 -13
  98. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +1 -1
  99. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb +1 -1
  100. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +25 -0
  101. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +0 -3
  102. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +8 -0
  103. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb +30 -0
  104. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md +11 -0
  105. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb +25 -0
  106. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +0 -3
  107. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md +1 -0
  108. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +3 -0
  109. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +24 -1
  110. data/app/pb_kits/playbook/react_rails_kits.js +1 -0
  111. data/app/pb_kits/playbook/vendor.js +3 -0
  112. data/lib/playbook/version.rb +1 -1
  113. metadata +32 -28
  114. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.html.erb +0 -11
  115. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.jsx +0 -29
  116. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.html.erb +0 -11
  117. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.jsx +0 -34
  118. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb +0 -4
  119. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx +0 -13
  120. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md +0 -1
  121. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb +0 -4
  122. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx +0 -13
  123. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx +0 -45
  124. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx +0 -27
  125. data/lib/generators/kit/USAGE +0 -5
  126. data/lib/generators/kit/kit_generator.rb +0 -95
  127. data/lib/generators/kit/templates/kit_example_rails.erb.tt +0 -1
  128. data/lib/generators/kit/templates/kit_example_react.erb.tt +0 -10
  129. data/lib/generators/kit/templates/kit_example_yml.erb.tt +0 -9
  130. data/lib/generators/kit/templates/kit_html.erb.tt +0 -7
  131. data/lib/generators/kit/templates/kit_js.erb.tt +0 -1
  132. data/lib/generators/kit/templates/kit_jsx.erb.tt +0 -68
  133. data/lib/generators/kit/templates/kit_ruby.erb.tt +0 -11
  134. data/lib/generators/kit/templates/kit_ruby_spec.erb.tt +0 -11
  135. data/lib/generators/kit/templates/kit_scss.erb +0 -3
  136. data/lib/tasks/pb_release.rake +0 -88
  137. data/lib/tasks/playbook_tasks.rake +0 -26
@@ -20,6 +20,16 @@ $confirmation_toast_colors: (
20
20
  border-radius: $border_rad_mega;
21
21
  box-shadow: $shadow_deeper;
22
22
 
23
+ .fa-times {
24
+ cursor: pointer;
25
+ opacity: 0.5;
26
+ position: relative;
27
+ right: -8px;
28
+ }
29
+ &:hover .fa-times {
30
+ opacity: 1;
31
+ }
32
+
23
33
  @each $color_name, $color_value in $confirmation_toast_colors {
24
34
  &[class*=_#{$color_name}] {
25
35
  background: $color_value;
@@ -0,0 +1,21 @@
1
+ <%= pb_rails("fixed_confirmation_toast", props: {
2
+ text: "Error Message",
3
+ status: "error",
4
+ closeable: true
5
+ })%>
6
+
7
+ <br><br>
8
+
9
+ <%= pb_rails("fixed_confirmation_toast", props: {
10
+ text: "Items Successfully Moved",
11
+ status: "success",
12
+ closeable: true
13
+ })%>
14
+
15
+ <br><br>
16
+
17
+ <%= pb_rails("fixed_confirmation_toast", props: {
18
+ text: "Scan to Assign Selected Items",
19
+ status: "neutral",
20
+ closeable: true
21
+ })%>
@@ -0,0 +1,38 @@
1
+ import React from 'react'
2
+ import { FixedConfirmationToast } from '../../'
3
+
4
+ const FixedConfirmationToastClose = () => {
5
+ return (
6
+ <div>
7
+ <div>
8
+ <FixedConfirmationToast
9
+ closeable
10
+ status="error"
11
+ text="Error Message"
12
+ />
13
+ </div>
14
+
15
+ <br />
16
+
17
+ <div>
18
+ <FixedConfirmationToast
19
+ closeable
20
+ status="success"
21
+ text="Items Successfully Moved"
22
+ />
23
+ </div>
24
+
25
+ <br />
26
+
27
+ <div>
28
+ <FixedConfirmationToast
29
+ closeable
30
+ status="neutral"
31
+ text="Scan to Assign Selected Items"
32
+ />
33
+ </div>
34
+ </div>
35
+ )
36
+ }
37
+
38
+ export default FixedConfirmationToastClose
@@ -1,6 +1,7 @@
1
1
  <%= pb_rails("fixed_confirmation_toast", props: {
2
2
  text: "Error Message",
3
- status: "error"
3
+ status: "error",
4
+ closeable: true
4
5
  })%>
5
6
 
6
7
  <br><br>
@@ -6,12 +6,12 @@ const FixedConfirmationToastDefault = () => {
6
6
  <div>
7
7
  <div>
8
8
  <FixedConfirmationToast
9
+ closeable
9
10
  status="error"
10
11
  text="Error Message"
11
12
  />
12
13
  </div>
13
14
 
14
- <br />
15
15
  <br />
16
16
 
17
17
  <div>
@@ -21,7 +21,6 @@ const FixedConfirmationToastDefault = () => {
21
21
  />
22
22
  </div>
23
23
 
24
- <br />
25
24
  <br />
26
25
 
27
26
  <div>
@@ -1,4 +1,4 @@
1
1
  <%= pb_rails("fixed_confirmation_toast", props: {
2
- text: "Scan to Assign Selected Items.\nClick X to close at any time",
2
+ text: "Scan to Assign Selected Items.\nClick here to generate report",
3
3
  status: "tip",
4
4
  }) %>
@@ -6,7 +6,7 @@ const FixedConfirmationToastMultiLine = () => {
6
6
  <div>
7
7
  <FixedConfirmationToast
8
8
  status="tip"
9
- text={'Scan to Assign Selected Items.\n Click X to close at any time'}
9
+ text={'Scan to Assign Selected Items.\n Click here to generate report'}
10
10
  />
11
11
  </div>
12
12
  )
@@ -1,5 +1,5 @@
1
1
  <%= pb_rails("fixed_confirmation_toast", props: {
2
2
  dark: true,
3
- text: "Scan to Assign Selected Items.\nClick X to close at any time",
3
+ text: "Scan to Assign Selected Items.\nClick here to generate report.",
4
4
  status: "tip",
5
5
  }) %>
@@ -7,7 +7,7 @@ const FixedConfirmationToastMultiLineDark = () => {
7
7
  <FixedConfirmationToast
8
8
  dark
9
9
  status="tip"
10
- text={'Scan to Assign Selected Items.\n Click X to close at any time'}
10
+ text={'Scan to Assign Selected Items.\n Click here to generate report'}
11
11
  />
12
12
  </div>
13
13
  )
@@ -3,12 +3,14 @@ examples:
3
3
  rails:
4
4
  - fixed_confirmation_toast_default: Default
5
5
  - fixed_confirmation_toast_multi_line: Multi Line
6
+ - fixed_confirmation_toast_close: Click to Close
6
7
  - fixed_confirmation_toast_dark: Dark
7
8
  - fixed_confirmation_toast_multi_line_dark: Multi Line Dark
8
9
 
9
10
  react:
10
11
  - fixed_confirmation_toast_default: Default
11
12
  - fixed_confirmation_toast_multi_line: Multi Line
13
+ - fixed_confirmation_toast_close: Click to Close
12
14
  - fixed_confirmation_toast_dark: Dark
13
15
  - fixed_confirmation_toast_multi_line_dark: Multi Line Dark
14
16
 
@@ -1,4 +1,5 @@
1
1
  export { default as FixedConfirmationToastDefault } from './_fixed_confirmation_toast_default.jsx'
2
2
  export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmation_toast_multi_line.jsx'
3
+ export { default as FixedConfirmationToastClose } from './_fixed_confirmation_toast_close.jsx'
3
4
  export { default as FixedConfirmationToastDark } from './_fixed_confirmation_toast_dark.jsx'
4
5
  export { default as FixedConfirmationToastMultiLineDark } from './_fixed_confirmation_toast_multi_line_dark.jsx'
@@ -11,11 +11,17 @@ module Playbook
11
11
  values: %w[success error neutral tip],
12
12
  default: "neutral"
13
13
  prop :text, type: Playbook::Props::String
14
+ prop :closeable, type: Playbook::Props::Boolean,
15
+ default: false
14
16
 
15
17
  def show_text?
16
18
  text.present?
17
19
  end
18
20
 
21
+ def close_class
22
+ closeable.present? ? " remove_toast" : ""
23
+ end
24
+
19
25
  def icon_value
20
26
  case status
21
27
  when "success"
@@ -30,7 +36,7 @@ module Playbook
30
36
  end
31
37
 
32
38
  def classname
33
- generate_classname("pb_fixed_confirmation_toast_kit", status)
39
+ generate_classname("pb_fixed_confirmation_toast_kit", status) + close_class
34
40
  end
35
41
  end
36
42
  end
@@ -0,0 +1,18 @@
1
+ import PbEnhancedElement from '../pb_enhanced_element'
2
+
3
+ export default class PbFixedConfirmationToast extends PbEnhancedElement {
4
+ static get selector() {
5
+ return '.remove_toast'
6
+ }
7
+
8
+ connect() {
9
+ this.self = this.element
10
+ this.self.addEventListener('click', () => {
11
+ this.removeToast(this.self)
12
+ })
13
+ }
14
+
15
+ removeToast(elem) {
16
+ elem.parentNode.removeChild(elem)
17
+ }
18
+ }
@@ -33,7 +33,7 @@
33
33
  name: "checkbox-name",
34
34
  class: "checkbox-class"
35
35
  %>
36
- <%= form.date_picker :example_date_picker1, props: { default_date: "blank" } %>
36
+ <%= form.date_picker :example_date_picker_1, props: { default_date: "blank", label: true } %>
37
37
 
38
38
  <%= form.actions do |action| %>
39
39
  <%= action.submit %>
@@ -28,7 +28,7 @@
28
28
  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
29
29
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
30
30
  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
31
- <%= form.date_picker :example_date_picker2, props: { default_date: 'blank', required: true } %>
31
+ <%= form.date_picker :example_date_picker_2, props: { default_date: 'blank', label: true, required: true } %>
32
32
 
33
33
  <%= form.actions do |action| %>
34
34
  <%= action.submit %>
@@ -14,8 +14,8 @@
14
14
  :example_text_area,
15
15
  :example_select_field,
16
16
  :example_collection_select_field,
17
- :example_checkbox_field
18
- :example_date_picker_field1
17
+ :example_checkbox_field,
18
+ :example_date_picker_field_1
19
19
 
20
20
 
21
21
  def self.model_name
@@ -52,7 +52,7 @@
52
52
  <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
53
53
  <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
54
54
  <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true } %>
55
- <%= form.date_picker :example_date_picker_field1, props: { default_date: 'blank' } %>
55
+ <%= form.date_picker :example_date_picker_field_1, props: { default_date: 'blank', label: true } %>
56
56
 
57
57
  <%= form.actions do |action| %>
58
58
  <%= action.submit %>
@@ -14,8 +14,8 @@
14
14
  :example_text_area,
15
15
  :example_select_field,
16
16
  :example_collection_select_field,
17
- :example_checkbox_field
18
- :example_date_picker_field2
17
+ :example_checkbox_field,
18
+ :example_date_picker_field_2
19
19
 
20
20
 
21
21
  def self.model_name
@@ -52,7 +52,7 @@
52
52
  <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { required: true, blank_selection: "Select One...", label: true } %>
53
53
  <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { required: true, blank_selection: "Select One...", label: true } %>
54
54
  <%= form.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true, required: true } %>
55
- <%= form.date_picker :example_date_picker_field2, props: { default_date: 'blank', required: true } %>
55
+ <%= form.date_picker :example_date_picker_field_2, props: { default_date: 'blank', label: true, required: true } %>
56
56
 
57
57
  <%= form.actions do |action| %>
58
58
  <%= action.submit %>
@@ -8,6 +8,7 @@ module Playbook
8
8
  prefix = @object_name
9
9
  html_attribute_name = "#{prefix}[#{name}]"
10
10
  html_id = "#{prefix}_#{name}"
11
+ props[:label] = @template.label(@object_name, name) if props[:label] == true
11
12
 
12
13
  props[:name] = html_attribute_name
13
14
  props[:picker_id] = html_id
@@ -32,7 +32,6 @@ module Playbook
32
32
  def chart_options
33
33
  {
34
34
  id: id,
35
- className: classname,
36
35
  chartData: chart_data,
37
36
  type: chart_type,
38
37
  title: title,
@@ -31,12 +31,14 @@
31
31
 
32
32
  .pb_popover_tooltip {
33
33
  opacity: 0;
34
- animation-name: fadeOut;
35
- animation-duration: 150ms;
36
- animation-timing-function: linear;
37
- animation-fill-mode: forwards;
38
34
  visibility: hidden;
39
35
  pointer-events: none;
36
+ &.hide {
37
+ animation-name: fadeOut;
38
+ animation-duration: 150ms;
39
+ animation-timing-function: linear;
40
+ animation-fill-mode: forwards;
41
+ }
40
42
  &.show {
41
43
  animation-name: fadeIn;
42
44
  animation-duration: 150ms;
@@ -37,7 +37,7 @@ export default class PbPopover extends PbEnhancedElement {
37
37
 
38
38
  setTimeout(() => {
39
39
  this.popper.update()
40
- this.tooltip.classList.toggle('show')
40
+ this.toggleTooltip()
41
41
  }, 0)
42
42
  })
43
43
  }
@@ -71,10 +71,12 @@ export default class PbPopover extends PbEnhancedElement {
71
71
 
72
72
  hideTooltip() {
73
73
  this.tooltip.classList.remove('show')
74
+ this.tooltip.classList.add('hide')
74
75
  }
75
76
 
76
77
  toggleTooltip() {
77
78
  this.tooltip.classList.toggle('show')
79
+ this.tooltip.classList.toggle('hide')
78
80
  }
79
81
 
80
82
  get triggerElement() {
@@ -13,12 +13,14 @@ type ProgressStepProps = {
13
13
  orientation?: "horizontal" | "vertical",
14
14
  icon?: boolean,
15
15
  variant?: string,
16
+ color?: string,
16
17
  }
17
18
 
18
19
  const ProgressStep = (props: ProgressStepProps) => {
19
20
  const {
20
21
  className,
21
22
  children,
23
+ color,
22
24
  orientation = 'horizontal',
23
25
  icon = false,
24
26
  variant,
@@ -29,6 +31,7 @@ const ProgressStep = (props: ProgressStepProps) => {
29
31
  orientation,
30
32
  iconStyle,
31
33
  variant,
34
+ color,
32
35
  )
33
36
 
34
37
  return (
@@ -4,18 +4,17 @@
4
4
  @import "../tokens/opacity";
5
5
  @import "../tokens/typography";
6
6
 
7
+
8
+
7
9
  [class^=pb_progress_step_kit]{
8
10
  list-style:none;
9
11
  display: flex;
10
-
11
12
  [class*=pb_progress_step_item] {
12
13
  display:flex;
13
- flex-basis:100%;
14
14
  flex-direction:column;
15
- justify-content:space-between;
16
15
  position: relative;
17
- align-items: center;
18
-
16
+ flex-basis: 100%;
17
+
19
18
  .circle {
20
19
  height:14px;
21
20
  width:14px;
@@ -39,7 +38,6 @@
39
38
  height: 4px;
40
39
  position: absolute;
41
40
  top: 5px;
42
- left: -50%;
43
41
  width:100%;
44
42
  background-color:$border_light;
45
43
  }
@@ -58,7 +56,7 @@
58
56
  .circle{
59
57
  background-color: $white;
60
58
  border: solid 2px $primary;
61
- color: rgba($color: $primary, $alpha: 0)
59
+ color: rgba( $primary, 0)
62
60
  }
63
61
  &::before{
64
62
  background-color: $primary;
@@ -74,18 +72,163 @@
74
72
  }
75
73
  }
76
74
  }
77
-
75
+ // Start of Horizontal
78
76
  &[class*=horizontal]{
79
77
  flex-direction: row;
78
+ [class*=pb_progress_step_item]{
79
+ align-items: flex-end;
80
+ &::before{
81
+ width: calc(100% + .04em);
82
+ }
83
+ [class*=box]{
84
+ display: flex;
85
+ flex-direction: column;
86
+ align-items: center;
87
+ .content{
88
+ top: 16px;
89
+ position: absolute;
90
+ width: fit-content;
91
+ min-width: max-content;
92
+ }
93
+ }
94
+ &:first-child {
95
+ position: relative;
96
+ align-items: flex-start;
97
+ flex-basis: 0;
98
+ .box{
99
+ align-items: flex-start;
100
+ }
101
+ }
102
+ &:last-child{
103
+ .box{
104
+ align-items: flex-end;
105
+ }
106
+
107
+ }
108
+ }
109
+ // Start of Tracker
110
+ &[class*=tracker] {
111
+ background-color: $border_light;
112
+ border-radius: 1rem;
113
+ height:24px;
114
+ align-items: center;
115
+ [class*=box]{
116
+ .circle{
117
+ box-shadow: none;
118
+ height: 24px;
119
+ width: 24px;
120
+ border: $primary solid 4px;
121
+ }
122
+ .content{
123
+ top:-24px;
124
+ position: absolute;
125
+ }
126
+ }
127
+ li[class*=pb_progress_step_item]{
128
+ &::before{
129
+ background-color: $border_light;
130
+ height: 24px;
131
+ border-radius: 1rem;
132
+ top: 0;
133
+ width: calc(100% + 1.5em);
134
+ }
135
+ .box{
136
+ align-items: center;
137
+ }
138
+ &:first-child{
139
+ position: relative;
140
+ .box{
141
+ align-items: flex-start;
142
+ }
143
+ }
144
+ &:last-child{
145
+ .box{
146
+ align-items: flex-end;
147
+ }
148
+ }
149
+ }
150
+ li[class*=_active]{
151
+ .circle{
152
+ height: 24px;
153
+ width: 24px;
154
+ border: $primary solid 6px;
155
+ background-color: rgba($white, $opacity_8);
156
+ }
157
+ &::before {
158
+ background-color: $primary;
159
+ }
160
+ }
161
+ li[class*=_inactive]{
162
+ &::before {
163
+ display: none;
164
+ background-color: $border_light;
165
+ }
166
+ .circle{
167
+ background-color: darken($border_light,10%);
168
+ border: $border_light solid 6px;
169
+ }
170
+
171
+ }
172
+ li[class*=_complete]{
173
+ &::before {
174
+ background-color: $primary;
175
+ }
176
+ .circle{
177
+ background-color: darken($primary,25%);
178
+ }
179
+ }
180
+ li[class*=_hidden]{
181
+ &::before, .circle {
182
+ display: none;
183
+ }
184
+ }
185
+ li[class*=_hidden] ~ li[class*=_active],
186
+ li[class*=_hidden] ~ li[class*=_complete] {
187
+ &::before {
188
+ width: calc(200% + 1.5em);
189
+ }
190
+ }
191
+ &[class*=dark]{
192
+ background-color: tint($bg_dark,20%);
193
+ [class*=_inactive]{
194
+ .circle{
195
+ border-color: tint($bg_dark,20%);
196
+ }
197
+ }
198
+ }
199
+ &[class*=info]{
200
+ li[class*=inactive] .circle{
201
+ border-color: $border_light;
202
+ }
203
+ .box .circle , li[class*=_active] .circle{
204
+ border-color: $teal;
205
+ }
206
+ li[class*=_complete],li[class*=_active]{
207
+ &::before {
208
+ background-color: $teal;
209
+ }
210
+ }
211
+ li[class*=_complete] .circle{
212
+ background-color: darken($teal,25%);
213
+ }
214
+ }
215
+ }
216
+ //End of Tracker
217
+
80
218
  }
219
+ // End of Horizontal
81
220
 
221
+ // Start of Vertical
82
222
  &[class*=vertical]{
83
223
  flex-direction: column;
84
224
  [class*=pb_progress_step_item]{
225
+ [class*=box]{
226
+ display:flex;
85
227
  flex-direction: row;
86
228
  align-items: flex-start;
87
229
  justify-content: flex-start;
88
230
  margin: 8px;
231
+ }
89
232
  &::before {
90
233
  display: flex;
91
234
  flex-direction: column;
@@ -93,7 +236,7 @@
93
236
  height: 100%;
94
237
  position: absolute;
95
238
  top:14px;
96
- left: 13px;
239
+ left: 21px;
97
240
  width:4px;
98
241
  background-color:$border_light;
99
242
  }
@@ -105,47 +248,39 @@
105
248
  }
106
249
  }
107
250
  }
251
+ //End of Vertical
108
252
 
109
253
  &[class*=icon] [class*=_complete] svg{
110
254
  opacity: 1;
111
255
  }
112
256
 
113
257
  &[class*=dark] {
258
+ [class*=progress_step_item]{
259
+ &::before{
260
+ background-color: tint($bg_dark,20%);
261
+ }
262
+ }
114
263
  .circle{
115
- box-shadow: 0 0 0 2px $bg_dark;
264
+ box-shadow: 0 0 0 2px tint($bg_dark,10%);
116
265
  }
117
266
  [class*=active]{
118
267
  .circle{
119
- background-color: $bg_dark;
268
+ background-color: tint($bg_dark,10%);
269
+ }
270
+ &::before{
271
+ background-color: $primary;
120
272
  }
121
273
  }
122
274
  [class*=inactive]{
123
275
  .circle, &::before{
124
- background-color: tint($bg_dark,10%);
276
+ background-color: tint($bg_dark,20%);
125
277
  }
126
278
  }
127
- }
128
- &[class*=tracker] {
129
- .circle{
130
- box-shadow: none;
131
- }
132
- li[class*=pb_progress_step_item]{
133
- flex-direction: column-reverse;
134
- &::before{
135
- background-color: $border_light;
136
- top:auto;
137
- bottom: 5px;
138
- }
139
- }
140
- li[class*=active] .circle,li[class*=inactive] .circle{
141
- background-color: $border_light;
142
- border:none;
143
- }
144
- li[class*=complete]{
145
- .circle, &::before {
146
- background-color: $teal;
279
+ [class*=complete]{
280
+ .circle, &::before{
281
+ background-color: $primary;
147
282
  }
148
283
  }
149
284
  }
150
285
 
151
- }
286
+ }