playbook_ui 15.4.0 → 15.5.0.pre.alpha.draggablefix12568
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx +2 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx +3 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx +3 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx +2 -1
- data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +21 -8
- data/app/pb_kits/playbook/pb_copy_button/copy_button.html.erb +6 -2
- data/app/pb_kits/playbook/pb_copy_button/copy_button.rb +3 -0
- data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx +24 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.html.erb +9 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.jsx +24 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_rails.md +1 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_react.md +1 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb +2 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx +1 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb +2 -2
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx +2 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals_rails.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals_react.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.html.erb +10 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.jsx +10 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol_rails.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol_react.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb +7 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx +7 -0
- data/app/pb_kits/playbook/pb_currency/docs/_description.md +2 -2
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +25 -11
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +44 -3
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +20 -13
- data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb +6 -4
- data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js +17 -0
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.html.erb +4 -0
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.jsx +43 -0
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.md +1 -0
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_date_range_inline/docs/example.yml +3 -2
- data/app/pb_kits/playbook/pb_date_range_inline/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +6 -4
- data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +2 -3
- data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb +11 -5
- data/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js +26 -9
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.html.erb +12 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/{_date_stacked_not_current_year.jsx → _date_stacked_current_year.jsx} +6 -5
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.md +1 -0
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_date_stacked/docs/index.js +1 -1
- data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +3 -0
- data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +1 -0
- data/app/pb_kits/playbook/pb_date_time/date_time.rb +1 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.html.erb +4 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.jsx +14 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_rails.md +1 -0
- data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_react.md +1 -0
- data/app/pb_kits/playbook/pb_date_time/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_date_time/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +3 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +2 -2
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb +2 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js +33 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.html.erb +4 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.jsx +22 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.md +1 -0
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +2 -2
- data/app/pb_kits/playbook/pb_draggable/context/index.tsx +122 -4
- data/app/pb_kits/playbook/pb_draggable/context/types.ts +6 -3
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx +179 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md +20 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +3 -2
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +77 -1
- data/app/pb_kits/playbook/pb_dropdown/index.js +32 -14
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx +2 -1
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx +2 -1
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx +2 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +31 -9
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +12 -5
- data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +1 -0
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx +4 -1
- data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx +1 -1
- data/app/pb_kits/playbook/pb_nav/_item.tsx +18 -4
- data/app/pb_kits/playbook/pb_nav/_nav.scss +30 -5
- data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +192 -0
- data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.html.erb +21 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.jsx +113 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.html.erb +30 -0
- data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.jsx +117 -0
- data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_nav/docs/index.js +3 -1
- data/app/pb_kits/playbook/pb_nav/item.html.erb +6 -4
- data/app/pb_kits/playbook/pb_nav/item.rb +11 -2
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_description.md +3 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.md +1 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +1 -2
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.md +11 -0
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +1 -2
- data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +1 -2
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md +3 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +2 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +2 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +2 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +2 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.md +1 -0
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +2 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_description.md +3 -1
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.md +2 -2
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.jsx +2 -1
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.md +1 -0
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_full_circle.jsx +2 -1
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_height.jsx +2 -1
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.jsx +2 -1
- data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.jsx +2 -1
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md +3 -1
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.jsx +1 -1
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.md +1 -0
- data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_legend_position.html.erb +1 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx +4 -1
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +384 -262
- data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +1 -5
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.html.erb +14 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.jsx +29 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_color.md +3 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.jsx +31 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_custom_icon.md +1 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +4 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +14 -3
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.md +3 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.md +3 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb +1 -7
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.md +1 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_progress_step/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_progress_step/progress_step.test.js +41 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx +3 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx +3 -1
- data/app/pb_kits/playbook/pb_table/_table.tsx +28 -26
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx +4 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +4 -0
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +2 -1
- data/app/pb_kits/playbook/pb_user/docs/_user_font_options.jsx +1 -1
- data/app/pb_kits/playbook/utilities/_truncate.scss +2 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +26 -8
- data/app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js +18 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/alignItems.test.js +18 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/alignSelf.test.js +18 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js +18 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/flex.test.js +18 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/flexDirection.test.js +18 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js +18 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js +18 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/flexWrap.test.js +18 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/justifyContent.test.js +18 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js +18 -0
- data/app/pb_kits/playbook/utilities/test/globalProps/order.test.js +18 -0
- data/dist/chunks/_typeahead-6571n2UL.js +6 -0
- data/dist/chunks/lib-CgpqUb6l.js +29 -0
- data/dist/chunks/vendor.js +37 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +48 -11
- data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.html.erb +0 -5
- data/dist/chunks/_line_graph-r__oOO2H.js +0 -1
- data/dist/chunks/_typeahead-B7c52zVj.js +0 -6
- data/dist/chunks/_weekday_stacked-DgiIj2w3.js +0 -37
- data/dist/chunks/componentRegistry-DzmmLR2x.js +0 -1
- data/dist/chunks/lib-CRUXizZe.js +0 -29
- data/dist/chunks/pb_form_validation-CywJN0ej.js +0 -1
- 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
|
|
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
|
})
|
data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.html.erb
ADDED
|
@@ -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.
|
|
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: ""
|
|
@@ -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 })
|
|
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 })
|
|
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
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
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
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import DateStacked from '../_date_stacked'
|
|
3
3
|
|
|
4
|
-
const
|
|
4
|
+
const DateStackedCurrentYear = (props) => {
|
|
5
5
|
return (
|
|
6
6
|
<div>
|
|
7
7
|
|
|
8
8
|
<DateStacked
|
|
9
|
-
date={new Date(
|
|
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(
|
|
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
|
|
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.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Use to display the date, stacking month and day.
|
|
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
|
-
-
|
|
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
|
-
-
|
|
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
|
|
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}
|
|
@@ -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,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 %>
|
|
@@ -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,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
|