playbook_ui 15.4.0 → 15.5.0.pre.alpha.draggablefix12557

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 (200) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx +2 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx +1 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx +3 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx +1 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx +3 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx +2 -1
  8. data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +21 -8
  9. data/app/pb_kits/playbook/pb_copy_button/copy_button.html.erb +6 -2
  10. data/app/pb_kits/playbook/pb_copy_button/copy_button.rb +3 -0
  11. data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx +24 -0
  12. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.html.erb +9 -0
  13. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.jsx +24 -0
  14. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_rails.md +1 -0
  15. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_react.md +1 -0
  16. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb +2 -2
  17. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx +1 -2
  18. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +2 -2
  19. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx +2 -0
  20. data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +2 -0
  21. data/app/pb_kits/playbook/pb_copy_button/docs/index.js +1 -0
  22. data/app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.md +1 -0
  23. data/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals_rails.md +1 -0
  24. data/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals_react.md +1 -0
  25. data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.html.erb +10 -0
  26. data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.jsx +10 -0
  27. data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.md +1 -0
  28. data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol_rails.md +1 -0
  29. data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol_react.md +1 -0
  30. data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb +7 -0
  31. data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx +7 -0
  32. data/app/pb_kits/playbook/pb_currency/docs/_description.md +2 -2
  33. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +25 -11
  34. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +44 -3
  35. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +20 -13
  36. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb +6 -4
  37. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js +17 -0
  38. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.html.erb +4 -0
  39. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.jsx +43 -0
  40. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.md +1 -0
  41. data/app/pb_kits/playbook/pb_date_range_inline/docs/_description.md +1 -1
  42. data/app/pb_kits/playbook/pb_date_range_inline/docs/example.yml +3 -2
  43. data/app/pb_kits/playbook/pb_date_range_inline/docs/index.js +1 -0
  44. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +6 -4
  45. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +2 -3
  46. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb +11 -5
  47. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js +26 -9
  48. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.html.erb +12 -0
  49. data/app/pb_kits/playbook/pb_date_stacked/docs/{_date_stacked_not_current_year.jsx → _date_stacked_current_year.jsx} +6 -5
  50. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.md +1 -0
  51. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb +1 -1
  52. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx +1 -1
  53. data/app/pb_kits/playbook/pb_date_stacked/docs/_description.md +1 -1
  54. data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +2 -2
  55. data/app/pb_kits/playbook/pb_date_stacked/docs/index.js +1 -1
  56. data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +3 -0
  57. data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +1 -0
  58. data/app/pb_kits/playbook/pb_date_time/date_time.rb +1 -0
  59. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.html.erb +4 -0
  60. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.jsx +14 -0
  61. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_rails.md +1 -0
  62. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_react.md +1 -0
  63. data/app/pb_kits/playbook/pb_date_time/docs/example.yml +3 -1
  64. data/app/pb_kits/playbook/pb_date_time/docs/index.js +1 -0
  65. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +3 -0
  66. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +2 -2
  67. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb +2 -0
  68. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +33 -0
  69. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.html.erb +4 -0
  70. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.jsx +22 -0
  71. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.md +1 -0
  72. data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml +3 -1
  73. data/app/pb_kits/playbook/pb_date_time_stacked/docs/index.js +1 -0
  74. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +2 -2
  75. data/app/pb_kits/playbook/pb_draggable/context/index.tsx +101 -4
  76. data/app/pb_kits/playbook/pb_draggable/context/types.ts +6 -3
  77. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx +179 -0
  78. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +1 -0
  79. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
  80. data/app/pb_kits/playbook/pb_dropdown/index.js +32 -14
  81. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx +2 -1
  82. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx +2 -1
  83. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx +2 -1
  84. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx +2 -1
  85. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +31 -9
  86. data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +12 -5
  87. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +1 -0
  88. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx +4 -1
  89. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx +1 -1
  90. data/app/pb_kits/playbook/pb_nav/_item.tsx +18 -4
  91. data/app/pb_kits/playbook/pb_nav/_nav.scss +30 -5
  92. data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +192 -0
  93. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  94. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.html.erb +21 -0
  95. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.jsx +113 -0
  96. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.md +1 -0
  97. data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.html.erb +30 -0
  98. data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.jsx +117 -0
  99. data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.md +1 -0
  100. data/app/pb_kits/playbook/pb_nav/docs/example.yml +4 -0
  101. data/app/pb_kits/playbook/pb_nav/docs/index.js +3 -1
  102. data/app/pb_kits/playbook/pb_nav/item.html.erb +6 -4
  103. data/app/pb_kits/playbook/pb_nav/item.rb +11 -2
  104. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_description.md +3 -1
  105. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +1 -1
  106. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +1 -1
  107. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.md +1 -0
  108. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +1 -1
  109. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +1 -1
  110. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +1 -1
  111. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +1 -2
  112. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +1 -1
  113. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +1 -1
  114. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.md +11 -0
  115. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +1 -1
  116. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +1 -1
  117. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +1 -2
  118. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +1 -2
  119. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md +3 -1
  120. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +2 -1
  121. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +2 -1
  122. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +1 -1
  123. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +2 -1
  124. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +2 -1
  125. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +1 -1
  126. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +1 -1
  127. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +1 -1
  128. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.md +1 -0
  129. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +1 -1
  130. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +2 -1
  131. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +1 -1
  132. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +1 -1
  133. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_description.md +3 -1
  134. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.jsx +1 -1
  135. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.md +2 -2
  136. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.jsx +2 -1
  137. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.md +1 -0
  138. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_full_circle.jsx +2 -1
  139. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_height.jsx +2 -1
  140. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.jsx +2 -1
  141. data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.jsx +2 -1
  142. data/app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md +3 -1
  143. data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.jsx +1 -1
  144. data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.md +1 -0
  145. data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.html.erb +1 -1
  146. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx +4 -1
  147. data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +384 -262
  148. data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +1 -5
  149. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.html.erb +14 -0
  150. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.jsx +29 -0
  151. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.md +3 -0
  152. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.jsx +31 -0
  153. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.md +1 -0
  154. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +4 -1
  155. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +14 -3
  156. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.md +3 -0
  157. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.md +3 -0
  158. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb +1 -7
  159. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.md +1 -0
  160. data/app/pb_kits/playbook/pb_progress_step/docs/example.yml +3 -0
  161. data/app/pb_kits/playbook/pb_progress_step/docs/index.js +2 -0
  162. data/app/pb_kits/playbook/pb_progress_step/progress_step.test.js +41 -0
  163. data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx +3 -1
  164. data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx +3 -1
  165. data/app/pb_kits/playbook/pb_table/_table.tsx +28 -26
  166. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx +4 -1
  167. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +4 -0
  168. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -0
  169. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +2 -1
  170. data/app/pb_kits/playbook/pb_user/docs/_user_font_options.jsx +1 -1
  171. data/app/pb_kits/playbook/utilities/_truncate.scss +2 -0
  172. data/app/pb_kits/playbook/utilities/globalProps.ts +26 -8
  173. data/app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js +18 -0
  174. data/app/pb_kits/playbook/utilities/test/globalProps/alignItems.test.js +18 -0
  175. data/app/pb_kits/playbook/utilities/test/globalProps/alignSelf.test.js +18 -0
  176. data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js +18 -0
  177. data/app/pb_kits/playbook/utilities/test/globalProps/flex.test.js +18 -0
  178. data/app/pb_kits/playbook/utilities/test/globalProps/flexDirection.test.js +18 -0
  179. data/app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js +18 -0
  180. data/app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js +18 -0
  181. data/app/pb_kits/playbook/utilities/test/globalProps/flexWrap.test.js +18 -0
  182. data/app/pb_kits/playbook/utilities/test/globalProps/justifyContent.test.js +18 -0
  183. data/app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js +18 -0
  184. data/app/pb_kits/playbook/utilities/test/globalProps/order.test.js +18 -0
  185. data/dist/chunks/_typeahead-LoB4DX1N.js +6 -0
  186. data/dist/chunks/lib-CgpqUb6l.js +29 -0
  187. data/dist/chunks/vendor.js +37 -1
  188. data/dist/playbook-rails-react-bindings.js +1 -1
  189. data/dist/playbook-rails.js +1 -1
  190. data/dist/playbook.css +1 -1
  191. data/lib/playbook/version.rb +2 -2
  192. metadata +47 -11
  193. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.html.erb +0 -5
  194. data/dist/chunks/_line_graph-r__oOO2H.js +0 -1
  195. data/dist/chunks/_typeahead-B7c52zVj.js +0 -6
  196. data/dist/chunks/_weekday_stacked-DgiIj2w3.js +0 -37
  197. data/dist/chunks/componentRegistry-DzmmLR2x.js +0 -1
  198. data/dist/chunks/lib-CRUXizZe.js +0 -29
  199. data/dist/chunks/pb_form_validation-CywJN0ej.js +0 -1
  200. data/dist/playbook-doc.js +0 -19
@@ -14,7 +14,8 @@ module Playbook
14
14
  prop :align, type: Playbook::Props::Enum,
15
15
  values: %w[left center right],
16
16
  default: "left"
17
-
17
+ prop :show_current_year, type: Playbook::Props::Boolean,
18
+ default: false
18
19
  def classname
19
20
  generate_classname("pb_date_range_inline_kit", dark_class, align)
20
21
  end
@@ -38,11 +39,12 @@ module Playbook
38
39
  end
39
40
 
40
41
  def time_display(time)
42
+ include_year = show_current_year || !dates_in_current_year?
41
43
  content_tag(:time, datetime: time.to_iso) do
42
- if dates_in_current_year?
43
- "#{time.to_month_downcase} #{time.to_day}"
44
- else
44
+ if include_year
45
45
  "#{time.to_month_downcase} #{time.to_day}, #{time.to_year}"
46
+ else
47
+ "#{time.to_month_downcase} #{time.to_day}"
46
48
  end
47
49
  end
48
50
  end
@@ -111,6 +111,23 @@ describe("DateRangeInline Kit", () => {
111
111
  const text = kit.querySelector('.pb_caption_kit_md:first-child')
112
112
  expect(text.textContent).toEqual(" Jan 15 ")
113
113
  })
114
+
115
+ test("renders DateRangeInline with year when showCurrentYear is true", () => {
116
+ const currentYear = new Date().getFullYear()
117
+ render(
118
+ <DateRangeInline
119
+ data={{ testid: testId }}
120
+ endDate={new Date((`15 Aug ${currentYear}`))}
121
+ showCurrentYear
122
+ size="xs"
123
+ startDate={new Date(`15 Jan ${currentYear}`)}
124
+ />
125
+ )
126
+
127
+ const kit = screen.getByTestId(testId)
128
+ const text = kit.querySelector('.pb_caption_kit_md:first-child')
129
+ expect(text.textContent).toEqual(` Jan 15, ${currentYear} `)
130
+ })
114
131
 
115
132
 
116
133
  })
@@ -0,0 +1,4 @@
1
+ <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), size: "xs", show_current_year: true }) %>
2
+ <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), show_current_year: true }) %>
3
+ <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), align: "center", icon: true, size: "xs", show_current_year: true }) %>
4
+ <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), align: "center", icon: true, show_current_year: true }) %>
@@ -0,0 +1,43 @@
1
+ import React from 'react'
2
+ import DateRangeInline from '../_date_range_inline'
3
+
4
+ const DateRangeInlineShowCurrentYear = (props) => {
5
+ return (
6
+ <div>
7
+ <DateRangeInline
8
+ endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
9
+ showCurrentYear
10
+ size="xs"
11
+ startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
12
+ {...props}
13
+ />
14
+ <DateRangeInline
15
+ endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
16
+ showCurrentYear
17
+ size="sm"
18
+ startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
19
+ {...props}
20
+ />
21
+ <DateRangeInline
22
+ align="center"
23
+ endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
24
+ icon
25
+ showCurrentYear
26
+ size="xs"
27
+ startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
28
+ {...props}
29
+ />
30
+ <DateRangeInline
31
+ align="center"
32
+ endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
33
+ icon
34
+ showCurrentYear
35
+ size="sm"
36
+ startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
37
+ {...props}
38
+ />
39
+ </div>
40
+ )
41
+ }
42
+
43
+ export default DateRangeInlineShowCurrentYear
@@ -0,0 +1 @@
1
+ By default, the Date Range Inline kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here.
@@ -1 +1 @@
1
- Use to display a date range. Year will not show if it is the current year.
1
+ Use to display a date range.
@@ -2,11 +2,12 @@ examples:
2
2
 
3
3
  rails:
4
4
  - date_range_inline_default: Default
5
-
5
+ - date_range_inline_show_current_year: Show Current Year
6
6
 
7
7
  react:
8
8
  - date_range_inline_default: Default
9
-
9
+ - date_range_inline_show_current_year: Show Current Year
10
+
10
11
  swift:
11
12
  - date_range_inline_default_swift: Default
12
13
  - date_range_inline_props_swift: ""
@@ -1 +1,2 @@
1
1
  export { default as DateRangeInlineDefault } from './_date_range_inline_default.jsx'
2
+ export { default as DateRangeInlineShowCurrentYear } from './_date_range_inline_show_current_year.jsx'
@@ -19,6 +19,7 @@ type DateStackedProps = {
19
19
  size?: "sm" | "md";
20
20
  id?: string;
21
21
  reverse?: boolean;
22
+ showCurrentYear?: boolean;
22
23
  };
23
24
 
24
25
  const sizes: {sm: 4, md: 3} = {
@@ -37,6 +38,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
37
38
  data={},
38
39
  htmlOptions={},
39
40
  size = "sm",
41
+ showCurrentYear = false,
40
42
  } = props;
41
43
  const classes = classnames(
42
44
  buildCss("pb_date_stacked_kit", align, size, {
@@ -55,7 +57,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
55
57
  return (
56
58
  <>
57
59
  {bold == false ? (
58
- <div
60
+ <div
59
61
  {...dataProps}
60
62
  {...htmlProps}
61
63
  className={classes}
@@ -68,10 +70,10 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
68
70
  text={DateTime.toDay(date).toString()}
69
71
  />
70
72
  </div>
71
- {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
73
+ {(currentYear != inputYear || showCurrentYear) && <Caption size="xs">{inputYear}</Caption>}
72
74
  </div>
73
75
  ) : (
74
- <div
76
+ <div
75
77
  {...dataProps}
76
78
  {...htmlProps}
77
79
  className={classes}
@@ -89,7 +91,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
89
91
  size="4"
90
92
  text={DateTime.toDay(date).toString()}
91
93
  />
92
- {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
94
+ {(currentYear != inputYear || showCurrentYear) && <Title size="4">{inputYear}</Title>}
93
95
  </div>
94
96
  </div>
95
97
  )}
@@ -4,16 +4,15 @@
4
4
 
5
5
  <div class="pb_date_stacked_day_month">
6
6
  <%= pb_rails("caption", props: { text: object.month }) %>
7
- <%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %><% end %>
7
+ <%= pb_rails("title", props: { text: object.day , size: object.title_size }) %>
8
8
  <%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
9
9
  </div>
10
10
 
11
11
  <% else %>
12
12
  <div class="pb_date_stacked_day_month">
13
13
  <%= pb_rails("title", props: { text: object.month, size: 4 }) %>
14
- <%= pb_rails("title", props: { text: object.day, size: 4 }) do %><% end %>
14
+ <%= pb_rails("title", props: { text: object.day, size: 4 }) %>
15
15
  <%= pb_rails("title", props: { text: object.year, size:4 }) %>
16
-
17
16
  </div>
18
17
 
19
18
  <% end %>
@@ -16,6 +16,8 @@ module Playbook
16
16
  default: false
17
17
  prop :bold, type: Playbook::Props::Boolean,
18
18
  default: false
19
+ prop :show_current_year, type: Playbook::Props::Boolean,
20
+ default: false
19
21
 
20
22
  def classname
21
23
  generate_classname("pb_date_stacked_kit", align, size, reverse_class, dark_class)
@@ -37,11 +39,15 @@ module Playbook
37
39
  end
38
40
 
39
41
  def year
40
- current_year = DateTime.now.year.to_i
41
- year = Playbook::PbKit::PbDateTime.new(date).to_year.to_i
42
- if current_year != year
43
- content_tag(:time, datetime: year) do
44
- year.to_s
42
+ if show_current_year
43
+ Playbook::PbKit::PbDateTime.new(date).to_year.to_s
44
+ else
45
+ current_year = DateTime.now.year.to_i
46
+ year = Playbook::PbKit::PbDateTime.new(date).to_year.to_i
47
+ if current_year != year
48
+ content_tag(:time, datetime: year) do
49
+ year.to_s
50
+ end
45
51
  end
46
52
  end
47
53
  end
@@ -22,7 +22,7 @@ describe("DateStacked Kit", () => {
22
22
  align="left"
23
23
  data={{ testid: testId }}
24
24
  date={new Date()}
25
- size="sm"
25
+ size="sm"
26
26
  />
27
27
  )
28
28
 
@@ -36,7 +36,7 @@ describe("DateStacked Kit", () => {
36
36
  align="left"
37
37
  data={{ testid: testId }}
38
38
  date={new Date()}
39
- size="sm"
39
+ size="sm"
40
40
  />
41
41
  )
42
42
 
@@ -51,7 +51,7 @@ describe("DateStacked Kit", () => {
51
51
  align="left"
52
52
  data={{ testid: testId }}
53
53
  date={new Date()}
54
- size="sm"
54
+ size="sm"
55
55
  />
56
56
  )
57
57
 
@@ -66,7 +66,7 @@ describe("DateStacked Kit", () => {
66
66
  align="left"
67
67
  data={{ testid: testId }}
68
68
  date={new Date()}
69
- size="md"
69
+ size="md"
70
70
  />
71
71
  )
72
72
 
@@ -80,7 +80,7 @@ describe("DateStacked Kit", () => {
80
80
  align="left"
81
81
  data={{ testid: testId }}
82
82
  date={futureDate}
83
- size="sm"
83
+ size="sm"
84
84
  />
85
85
  )
86
86
 
@@ -89,6 +89,23 @@ describe("DateStacked Kit", () => {
89
89
  expect(text.textContent).toEqual("2016")
90
90
  })
91
91
 
92
+ test("renders current year when showCurrentYear is true", () => {
93
+ render(
94
+ <DateStacked
95
+ align="left"
96
+ data={{ testid: testId }}
97
+ date={new Date()}
98
+ showCurrentYear
99
+ size="sm"
100
+ />
101
+ )
102
+
103
+ const kit = screen.getByTestId(testId)
104
+ const text = kit.querySelector(".pb_caption_kit_xs")
105
+ const currentYear = new Date().getFullYear()
106
+ expect(text.textContent).toEqual(`${currentYear}`)
107
+ })
108
+
92
109
  test("renders correct className when order reversed", () => {
93
110
  render(
94
111
  <DateStacked
@@ -96,7 +113,7 @@ describe("DateStacked Kit", () => {
96
113
  data={{ testid: testId }}
97
114
  date={futureDate}
98
115
  reverse
99
- size="sm"
116
+ size="sm"
100
117
  />
101
118
  )
102
119
  const kit = screen.getByTestId(testId)
@@ -110,7 +127,7 @@ describe("DateStacked Kit", () => {
110
127
  bold
111
128
  data={{ testid: testId }}
112
129
  date={futureDate}
113
- size="md"
130
+ size="md"
114
131
  />
115
132
  )
116
133
 
@@ -125,7 +142,7 @@ describe("DateStacked Kit", () => {
125
142
  align="center"
126
143
  data={{ testid: testId }}
127
144
  date={futureDate}
128
- size="md"
145
+ size="md"
129
146
  />
130
147
  )
131
148
 
@@ -139,7 +156,7 @@ describe("DateStacked Kit", () => {
139
156
  align="right"
140
157
  data={{ testid: testId }}
141
158
  date={futureDate}
142
- size="md"
159
+ size="md"
143
160
  />
144
161
  )
145
162
 
@@ -0,0 +1,12 @@
1
+ <%= pb_rails("date_stacked", props: {
2
+ date: DateTime.now,
3
+ show_current_year: true
4
+ }) %>
5
+
6
+ <br>
7
+
8
+ <%= pb_rails("date_stacked", props: {
9
+ date: DateTime.now,
10
+ show_current_year: true,
11
+ size: "md"
12
+ }) %>
@@ -1,12 +1,13 @@
1
1
  import React from 'react'
2
2
  import DateStacked from '../_date_stacked'
3
3
 
4
- const DateStackedNotCurrentYear = (props) => {
4
+ const DateStackedCurrentYear = (props) => {
5
5
  return (
6
6
  <div>
7
7
 
8
8
  <DateStacked
9
- date={new Date('20 Mar 2018')}
9
+ date={new Date()}
10
+ showCurrentYear
10
11
  size="sm"
11
12
  {...props}
12
13
  />
@@ -14,13 +15,13 @@ const DateStackedNotCurrentYear = (props) => {
14
15
  <br />
15
16
 
16
17
  <DateStacked
17
- date={new Date('20 Mar 2018')}
18
+ date={new Date()}
19
+ showCurrentYear
18
20
  size="md"
19
21
  {...props}
20
22
  />
21
-
22
23
  </div>
23
24
  )
24
25
  }
25
26
 
26
- export default DateStackedNotCurrentYear
27
+ export default DateStackedCurrentYear
@@ -0,0 +1 @@
1
+ By default, the Date Stacked kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here.
@@ -2,4 +2,4 @@
2
2
 
3
3
  <br>
4
4
 
5
- <%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md"}) %>
5
+ <%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), size: "md"}) %>
@@ -15,7 +15,7 @@ const DateStackedDefault = (props) => {
15
15
  <br />
16
16
 
17
17
  <DateStacked
18
- date={new Date()}
18
+ date={new Date('20 Mar 2018')}
19
19
  size="md"
20
20
  {...props}
21
21
  />
@@ -1 +1 @@
1
- Use to display the date, stacking month and day. Year will not show if it is the current year.
1
+ Use to display the date, stacking month and day.
@@ -2,7 +2,7 @@ examples:
2
2
 
3
3
  rails:
4
4
  - date_stacked_default: Default
5
- - date_stacked_not_current_year: Not Current Year
5
+ - date_stacked_current_year: Show Current Year
6
6
  - date_stacked_reverse: Day & Month Reverse
7
7
  - date_stacked_sizes: Sizes
8
8
  - date_stacked_align: Alignment
@@ -11,7 +11,7 @@ examples:
11
11
 
12
12
  react:
13
13
  - date_stacked_default: Default
14
- - date_stacked_not_current_year: Not Current Year
14
+ - date_stacked_current_year: Show Current Year
15
15
  - date_stacked_reverse: Day & Month Reverse
16
16
  - date_stacked_sizes: Sizes
17
17
  - date_stacked_bold: Bold
@@ -1,6 +1,6 @@
1
1
  export { default as DateStackedBold } from './_date_stacked_bold.jsx'
2
2
  export { default as DateStackedDefault } from './_date_stacked_default.jsx'
3
- export { default as DateStackedNotCurrentYear } from './_date_stacked_not_current_year.jsx'
3
+ export { default as DateStackedCurrentYear } from './_date_stacked_current_year.jsx'
4
4
  export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'
5
5
  export { default as DateStackedSizes } from './_date_stacked_sizes.jsx'
6
6
  export { default as DateStackedAlign } from './_date_stacked_align.jsx'
@@ -17,6 +17,7 @@ type DateTimeProps = {
17
17
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
18
18
  id?: string,
19
19
  size?: "sm" | "md",
20
+ showCurrentYear?: boolean,
20
21
  showDayOfWeek: boolean,
21
22
  showIcon?: boolean,
22
23
  timeZone?: string
@@ -32,6 +33,7 @@ const DateTime = (props: DateTimeProps): React.ReactElement => {
32
33
  showDayOfWeek = false,
33
34
  datetime,
34
35
  id,
36
+ showCurrentYear = false,
35
37
  showIcon = false,
36
38
  size = 'md',
37
39
  timeZone = 'America/New_York',
@@ -59,6 +61,7 @@ const DateTime = (props: DateTimeProps): React.ReactElement => {
59
61
  vertical="baseline"
60
62
  >
61
63
  <FormattedDate
64
+ showCurrentYear={showCurrentYear}
62
65
  showDayOfWeek={showDayOfWeek}
63
66
  size={size}
64
67
  value={datetime}
@@ -9,6 +9,7 @@
9
9
  dark: object.dark,
10
10
  date: object.date,
11
11
  show_day_of_week: object.show_day_of_week,
12
+ show_current_year: object.show_current_year,
12
13
  size: object.size,
13
14
  timezone: object.timezone,
14
15
  }) %>
@@ -16,6 +16,7 @@ module Playbook
16
16
  prop :dark, type: Playbook::Props::Boolean, default: false
17
17
  prop :show_icon, type: Playbook::Props::Boolean, default: false
18
18
  prop :show_day_of_week, type: Playbook::Props::Boolean, default: false
19
+ prop :show_current_year, type: Playbook::Props::Boolean, default: false
19
20
 
20
21
  def classname
21
22
  generate_classname("pb_date_time_kit", align)
@@ -0,0 +1,4 @@
1
+ <%= pb_rails("date_time", props: {
2
+ date: DateTime.now,
3
+ show_current_year: true
4
+ }) %>
@@ -0,0 +1,14 @@
1
+ import React from 'react'
2
+ import DateTime from '../_date_time'
3
+
4
+ const DateTimeShowCurrentYear = (props) => (
5
+ <div>
6
+ <DateTime
7
+ datetime={new Date()}
8
+ showCurrentYear
9
+ {...props}
10
+ />
11
+ </div>
12
+ )
13
+
14
+ export default DateTimeShowCurrentYear
@@ -0,0 +1 @@
1
+ Pass in `show_current_year` to show this date's current year.
@@ -0,0 +1 @@
1
+ Pass in `showCurrentYear` to show this date's current year.
@@ -1,14 +1,16 @@
1
1
  examples:
2
-
2
+
3
3
  rails:
4
4
  - date_time_default: Default
5
5
  - date_time_align: Alignment
6
6
  - date_time_size: Size
7
+ - date_time_show_current_year: Show Current Year
7
8
 
8
9
  react:
9
10
  - date_time_default: Default
10
11
  - date_time_align: Alignment
11
12
  - date_time_size: Size
13
+ - date_time_show_current_year: Show Current Year
12
14
 
13
15
  swift:
14
16
  - date_time_default_swift: Default
@@ -1,3 +1,4 @@
1
1
  export { default as DateTimeDefault } from './_date_time_default.jsx'
2
2
  export { default as DateTimeAlign } from './_date_time_align.jsx'
3
3
  export { default as DateTimeSize } from './_date_time_size.jsx'
4
+ export { default as DateTimeShowCurrentYear } from './_date_time_show_current_year.jsx'
@@ -17,6 +17,7 @@ type DateTimeStackedProps = {
17
17
  datetime: Date,
18
18
  dark: boolean,
19
19
  timeZone?: string,
20
+ showCurrentYear?: boolean,
20
21
  }
21
22
 
22
23
  const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
@@ -28,6 +29,7 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
28
29
  dark,
29
30
  htmlOptions = {},
30
31
  timeZone = 'America/New_York',
32
+ showCurrentYear = false,
31
33
  } = props
32
34
 
33
35
  const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
@@ -46,6 +48,7 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
46
48
  bold
47
49
  dark={dark}
48
50
  date={date || datetime}
51
+ showCurrentYear={showCurrentYear}
49
52
  />
50
53
  </FlexItem>
51
54
 
@@ -1,8 +1,8 @@
1
- <%= pb_content_tag do %>
1
+ <%= pb_content_tag do %>
2
2
 
3
3
  <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
4
4
  <%= pb_rails("body", props: {classname: "flex-item"}) do %>
5
- <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark }) %>
5
+ <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark, show_current_year: object.show_current_year }) %>
6
6
  <% end %>
7
7
  <%= pb_rails("section_separator", props: { orientation: "vertical", classname: "date-time-padding" }) %>
8
8
  <%= pb_rails("body", props: {classname: "flex-item"}) do %>
@@ -10,6 +10,8 @@ module Playbook
10
10
  default: false
11
11
  prop :timezone, type: Playbook::Props::String,
12
12
  default: "America/New_York"
13
+ prop :show_current_year, type: Playbook::Props::Boolean,
14
+ default: false
13
15
 
14
16
  def date_time_value
15
17
  date || date_time
@@ -41,3 +41,36 @@ test('renders time in timezone', () => {
41
41
  const kit = renderKit(DateTimeStacked, props)
42
42
  expect(kit).toHaveTextContent(`${monthDayYear}11:00aMDT`)
43
43
  })
44
+
45
+ test('renders current year when showCurrentYear is true', () => {
46
+ const currentYearDate = new Date()
47
+ const currentYear = currentYearDate.getFullYear()
48
+
49
+ const kit = renderKit(DateTimeStacked, {
50
+ data: { testid: 'datetimestacked-current-year' },
51
+ datetime: currentYearDate,
52
+ dark: false,
53
+ showCurrentYear: true,
54
+ })
55
+ expect(kit).toHaveTextContent(currentYear.toString())
56
+ })
57
+
58
+ test('hides current year by default', () => {
59
+ const currentYearDate = new Date()
60
+ const currentYear = currentYearDate.getFullYear()
61
+
62
+ const kit = renderKit(DateTimeStacked, {
63
+ data: { testid: 'datetimestacked-hide-year' },
64
+ datetime: currentYearDate,
65
+ dark: false,
66
+ })
67
+
68
+ const yearElement = kit.querySelector('.pb_caption_kit_xs')
69
+
70
+ if (yearElement) {
71
+ expect(yearElement.textContent).not.toBe(currentYear.toString())
72
+ } else {
73
+
74
+ expect(yearElement).toBeNull()
75
+ }
76
+ })
@@ -0,0 +1,4 @@
1
+ <%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, show_current_year: true }) %>
2
+ <br>
3
+ <%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, show_current_year: true, timezone: "America/Denver" }) %>
4
+
@@ -0,0 +1,22 @@
1
+ import React from 'react'
2
+
3
+ import DateTimeStacked from '../_date_time_stacked'
4
+
5
+ const DateTimeStackedShowCurrentYear = (props) => (
6
+ <div>
7
+ <DateTimeStacked
8
+ datetime={new Date()}
9
+ showCurrentYear
10
+ {...props}
11
+ />
12
+ <br />
13
+ <DateTimeStacked
14
+ datetime={new Date()}
15
+ showCurrentYear
16
+ timeZone="America/Denver"
17
+ {...props}
18
+ />
19
+ </div>
20
+ );
21
+
22
+ export default DateTimeStackedShowCurrentYear;
@@ -0,0 +1 @@
1
+ By default, the Date Time Stacked kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here.
@@ -2,9 +2,11 @@ examples:
2
2
 
3
3
  rails:
4
4
  - date_time_stacked_default: Default
5
-
5
+ - date_time_stacked_show_current_year: Show Current Year
6
+
6
7
  react:
7
8
  - date_time_stacked_default: Default
9
+ - date_time_stacked_show_current_year: Show Current Year
8
10
 
9
11
  swift:
10
12
  - date_time_stacked_default_swift: Default
@@ -1 +1,2 @@
1
1
  export { default as DateTimeStackedDefault } from './_date_time_stacked_default.jsx'
2
+ export { default as DateTimeStackedShowCurrentYear } from './_date_time_stacked_show_current_year.jsx'