playbook_ui 7.0.1.pre.alpha15 → 7.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/data/menu.yml +3 -4
- data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +1 -0
- data/app/pb_kits/playbook/pb_body/body.rb +1 -1
- data/app/pb_kits/playbook/pb_button/_button_mixins.scss +0 -1
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx +3 -3
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss +90 -82
- data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb +2 -4
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb +7 -17
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx +9 -32
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb +7 -18
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx +9 -37
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.html.erb +11 -0
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.jsx +29 -0
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.html.erb +11 -0
- data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.jsx +34 -0
- data/app/pb_kits/playbook/pb_button_toolbar/docs/example.yml +7 -3
- data/app/pb_kits/playbook/pb_button_toolbar/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_caption/_caption.html.erb +5 -7
- data/app/pb_kits/playbook/pb_caption/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_caption/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +2 -1
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +3 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -3
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +32 -34
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx +13 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx +13 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +2 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +2 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb +9 -9
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx +8 -8
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md +1 -3
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +0 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +0 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb +14 -8
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +39 -122
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss +2 -33
- data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb +9 -44
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.html.erb +1 -14
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +1 -45
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb +2 -3
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +15 -29
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +0 -10
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb +1 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx +2 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +1 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +1 -7
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +3 -3
- data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +3 -3
- data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +0 -1
- data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +1 -0
- data/app/pb_kits/playbook/pb_popover/_popover.scss +4 -6
- data/app/pb_kits/playbook/pb_popover/index.js +1 -3
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +0 -3
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +33 -168
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb +1 -3
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx +8 -10
- data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +1 -1
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +16 -14
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +3 -6
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.html.erb +1 -17
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx +1 -17
- data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx +3 -10
- data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +1 -11
- data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +1 -1
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -12
- data/app/pb_kits/playbook/pb_table/docs/index.js +0 -6
- data/app/pb_kits/playbook/pb_time/_time.html.erb +20 -17
- data/app/pb_kits/playbook/pb_time/_time.jsx +27 -40
- data/app/pb_kits/playbook/pb_time/_time.scss +24 -4
- data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx +1 -4
- data/app/pb_kits/playbook/pb_time/docs/_time_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx +1 -13
- data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx +1 -4
- data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx +1 -3
- data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx +2 -7
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +5 -5
- data/app/pb_kits/playbook/pb_toggle/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_toggle/toggle.rb +1 -4
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb +20 -24
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +1 -19
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +1 -8
- data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +13 -21
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +3 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx +45 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +3 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx +27 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -24
- data/app/pb_kits/playbook/react_rails_kits.js +0 -1
- data/app/pb_kits/playbook/vendor.js +0 -3
- data/lib/playbook/version.rb +1 -1
- metadata +15 -35
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss +0 -57
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss +0 -27
- data/app/pb_kits/playbook/pb_caption/docs/_caption_block.html.erb +0 -11
- data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx +0 -28
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +0 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb +0 -21
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx +0 -38
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js +0 -18
- data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb +0 -34
- data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx +0 -68
- data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.md +0 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb +0 -61
- data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.jsx +0 -89
- data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.md +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb +0 -34
- data/app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx +0 -68
- data/app/pb_kits/playbook/pb_table/docs/_table_one_action.md +0 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb +0 -43
- data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx +0 -80
- data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.md +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb +0 -34
- data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx +0 -63
- data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md +0 -1
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_options.html.erb +0 -10
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +0 -25
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +0 -8
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb +0 -30
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md +0 -11
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb +0 -25
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md +0 -1
- data/lib/tasks/changelog.rake +0 -14
@@ -6,25 +6,25 @@ const DatePickerInput = () => (
|
|
6
6
|
<DatePicker
|
7
7
|
inputAria={{ label: 'input-field' }}
|
8
8
|
inputData={{ key: 'value', key2: 'value2' }}
|
9
|
-
label="Aria, Name, and Data Attributes"
|
10
9
|
name="date-field"
|
11
10
|
pickerId="date-picker-input1"
|
11
|
+
type="date"
|
12
12
|
/>
|
13
13
|
<DatePicker
|
14
|
-
|
14
|
+
defaultDate="blank"
|
15
15
|
pickerId="date-picker-input2"
|
16
|
-
placeholder="
|
16
|
+
placeholder="Select Date"
|
17
17
|
/>
|
18
18
|
<DatePicker
|
19
|
-
|
19
|
+
defaultDate="blank"
|
20
|
+
disableInput
|
20
21
|
pickerId="date-picker-input3"
|
21
|
-
placeholder=""
|
22
|
+
placeholder="Disabled Input"
|
22
23
|
/>
|
23
24
|
<DatePicker
|
24
|
-
|
25
|
-
|
25
|
+
dark
|
26
|
+
hideLabel
|
26
27
|
pickerId="date-picker-input4"
|
27
|
-
placeholder="Disabled Input"
|
28
28
|
/>
|
29
29
|
</div>
|
30
30
|
)
|
@@ -1,5 +1,3 @@
|
|
1
1
|
The date picker is built with the text input kit. Text input props you pass to the date picker kit will be forwarded to the input, with a few exceptions. The `value` attribute is automatically handled and bound to whatever date string is contained by the input field. You cannot pass a custom value prop. `id` props passed to the date picker kit will be assigned to it's parent/wrapper div. The `pickerId` prop is passed directly to the input and is required to instatiate the date picker.
|
2
2
|
|
3
|
-
You must use `inputAria` or `input_aria` and `inputData` or `input_data` props if you wish to pass data or aria attributes to the text input kit. If you use `data` or `aria` props they will be passed to the date picker kit itself instead. Also be aware the default behavior of text input aria and data props is to pass those props to attributes on the wrapping div not on the input itself.
|
4
|
-
|
5
|
-
The placeholder prop has a default string value: "Select Date". You can replace this with your own string or an empty string if you'd prefer it blank.
|
3
|
+
You must use `inputAria` or `input_aria` and `inputData` or `input_data` props if you wish to pass data or aria attributes to the text input kit. If you use `data` or `aria` props they will be passed to the date picker kit itself instead. Also be aware the default behavior of text input aria and data props is to pass those props to attributes on the wrapping div not on the input itself.
|
@@ -12,7 +12,9 @@ examples:
|
|
12
12
|
- date_picker_min_max: Min Max
|
13
13
|
- date_picker_error: Error
|
14
14
|
- date_picker_hooks: Hooks
|
15
|
+
# - date_picker_allow_input: Allow Input
|
15
16
|
- date_picker_year_range: Year Range
|
17
|
+
- date_picker_dark: Dark
|
16
18
|
|
17
19
|
|
18
20
|
react:
|
@@ -28,5 +30,7 @@ examples:
|
|
28
30
|
- date_picker_min_max: Min Max
|
29
31
|
- date_picker_error: Error
|
30
32
|
- date_picker_hooks: Hooks
|
33
|
+
# - date_picker_allow_input: Allow Input
|
31
34
|
- date_picker_year_range: Year Range
|
35
|
+
- date_picker_dark: Dark
|
32
36
|
|
@@ -10,4 +10,6 @@ export { default as DatePickerDisabled } from './_date_picker_disabled.jsx'
|
|
10
10
|
export { default as DatePickerMinMax } from './_date_picker_min_max.jsx'
|
11
11
|
export { default as DatePickerError } from './_date_picker_error.jsx'
|
12
12
|
export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
|
13
|
+
// export { default as DatePickerAllowInput } from './_date_picker_allow_input.jsx'
|
13
14
|
export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
|
15
|
+
export { default as DatePickerDark } from './_date_picker_dark.jsx'
|
@@ -2,15 +2,21 @@
|
|
2
2
|
id: object.id,
|
3
3
|
data: object.data,
|
4
4
|
class: object.classname) do %>
|
5
|
-
<div class="pb_date_range_inline_wrapper">
|
6
|
-
<% if object.icon == true %>
|
7
|
-
<%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: object.size, classname: "pb_date_range_inline_icon" }) }) %>
|
8
|
-
<% end %>
|
9
5
|
|
10
|
-
|
6
|
+
<%= pb_rails("body", props: { tag: "span", color: "light" }) do %>
|
7
|
+
<%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
|
8
|
+
<% end %>
|
11
9
|
|
12
|
-
|
10
|
+
<%= pb_rails("body", props: { tag: "span"}) do %>
|
11
|
+
<%= object.start_date_display %>
|
12
|
+
<% end %>
|
13
|
+
|
14
|
+
<%= pb_rails("body", props: { tag: "span", color: "light" }) do %>
|
15
|
+
<%= pb_rails("icon", props: { icon: "long-arrow-right", fixed_width: true }) %>
|
16
|
+
<% end %>
|
17
|
+
|
18
|
+
<%= pb_rails("body", props: { tag: "span"}) do %>
|
19
|
+
<%= object.end_date_display %>
|
20
|
+
<% end %>
|
13
21
|
|
14
|
-
<%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.end_date_display }) %>
|
15
|
-
</div>
|
16
22
|
<% end %>
|
@@ -2,30 +2,21 @@
|
|
2
2
|
|
3
3
|
import React from 'react'
|
4
4
|
import DateTime from '../pb_kit/dateTime.js'
|
5
|
-
import { Body,
|
5
|
+
import { Body, Icon } from '../'
|
6
6
|
import classnames from 'classnames'
|
7
7
|
import { globalProps } from '../utilities/globalProps.js'
|
8
|
-
import { buildCss } from '../utilities/props'
|
9
8
|
|
10
9
|
type DateRangeInlineProps = {
|
11
10
|
className?: string,
|
12
|
-
id?: string,
|
13
11
|
data?: string,
|
14
|
-
|
15
|
-
|
16
|
-
dark?: boolean,
|
17
|
-
icon?: boolean,
|
12
|
+
endDate?: date,
|
13
|
+
id?: string,
|
18
14
|
startDate?: date,
|
19
|
-
endDate?: date
|
20
15
|
}
|
21
16
|
|
22
|
-
const dateTimestamp = (dateValue
|
17
|
+
const dateTimestamp = (dateValue) => {
|
23
18
|
const date = new DateTime({ value: dateValue })
|
24
|
-
|
25
|
-
return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`
|
26
|
-
} else {
|
27
|
-
return `${date.toMonth()} ${date.toDay()}`
|
28
|
-
}
|
19
|
+
return `${date.toDay()} ${date.toMonth()} ${date.toYear()}`
|
29
20
|
}
|
30
21
|
|
31
22
|
const dateTimeIso = (dateValue) => {
|
@@ -34,115 +25,41 @@ const dateTimeIso = (dateValue) => {
|
|
34
25
|
}
|
35
26
|
|
36
27
|
const DateRangeInline = (props: DateRangeInlineProps) => {
|
37
|
-
const {
|
38
|
-
icon = false,
|
39
|
-
dark = false,
|
40
|
-
size = 'sm',
|
41
|
-
align = 'left',
|
42
|
-
startDate,
|
43
|
-
endDate,
|
44
|
-
className,
|
45
|
-
} = props
|
46
|
-
|
47
|
-
const iconContent = () => {
|
48
|
-
return (
|
49
|
-
<If condition={icon}>
|
50
|
-
<Body
|
51
|
-
color="light"
|
52
|
-
tag="span"
|
53
|
-
>
|
54
|
-
<Icon
|
55
|
-
className="pb_date_range_inline_icon"
|
56
|
-
dark={dark}
|
57
|
-
fixedWidth
|
58
|
-
icon="calendar-alt"
|
59
|
-
size={size}
|
60
|
-
tag="span"
|
61
|
-
/>
|
62
|
-
</Body>
|
63
|
-
</If>
|
64
|
-
)
|
65
|
-
}
|
66
|
-
|
67
|
-
const dateInCurrentYear = () => {
|
68
|
-
const currentDate = new Date()
|
69
|
-
return startDate.getFullYear() == endDate.getFullYear() && startDate.getFullYear() == currentDate.getFullYear()
|
70
|
-
}
|
71
|
-
|
72
|
-
const dateRangeClasses = buildCss('pb_date_range_inline_kit', align)
|
73
|
-
|
74
|
-
const renderTime = (date) => {
|
75
|
-
return (
|
76
|
-
<time dateTime={dateTimeIso(date)}>
|
77
|
-
<Choose>
|
78
|
-
<When condition={dateInCurrentYear()}>
|
79
|
-
{` ${dateTimestamp(date, false)} `}
|
80
|
-
</When>
|
81
|
-
<Otherwise>
|
82
|
-
{` ${dateTimestamp(date, true)} `}
|
83
|
-
</Otherwise>
|
84
|
-
</Choose>
|
85
|
-
</time>
|
86
|
-
)
|
87
|
-
}
|
88
|
-
|
28
|
+
const { endDate, startDate } = props
|
89
29
|
return (
|
90
|
-
<div className={classnames(
|
91
|
-
<
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
>
|
124
|
-
{renderTime(startDate)}
|
125
|
-
</Body>
|
126
|
-
<Body
|
127
|
-
color="light"
|
128
|
-
dark={dark}
|
129
|
-
tag="span"
|
130
|
-
>
|
131
|
-
<Icon
|
132
|
-
className="pb_date_range_inline_arrow"
|
133
|
-
dark={dark}
|
134
|
-
fixedWidth
|
135
|
-
icon="long-arrow-right"
|
136
|
-
/>
|
137
|
-
</Body>
|
138
|
-
<Body
|
139
|
-
dark={dark}
|
140
|
-
tag="span"
|
141
|
-
>
|
142
|
-
{renderTime(endDate)}
|
143
|
-
</Body>
|
144
|
-
</If>
|
145
|
-
</div>
|
30
|
+
<div className={classnames('pb_date_range_inline', globalProps(props))}>
|
31
|
+
<Body
|
32
|
+
color="light"
|
33
|
+
tag="span"
|
34
|
+
>
|
35
|
+
<Icon
|
36
|
+
fixedWidth
|
37
|
+
icon="calendar-alt"
|
38
|
+
/>
|
39
|
+
</Body>
|
40
|
+
<Body tag="span">
|
41
|
+
<time dateTime={dateTimeIso(startDate)}>
|
42
|
+
{` ${dateTimestamp(
|
43
|
+
startDate
|
44
|
+
)} `}
|
45
|
+
</time>
|
46
|
+
</Body>
|
47
|
+
<Body
|
48
|
+
color="light"
|
49
|
+
tag="span"
|
50
|
+
>
|
51
|
+
<Icon
|
52
|
+
fixedWidth
|
53
|
+
icon="long-arrow-right"
|
54
|
+
/>
|
55
|
+
</Body>
|
56
|
+
<Body tag="span">
|
57
|
+
<time dateTime={dateTimeIso(endDate)}>
|
58
|
+
{` ${dateTimestamp(
|
59
|
+
endDate
|
60
|
+
)} `}
|
61
|
+
</time>
|
62
|
+
</Body>
|
146
63
|
</div>
|
147
64
|
)
|
148
65
|
}
|
@@ -1,34 +1,3 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
& > [class^=pb_caption],
|
4
|
-
& > [class^=pb_body] {
|
5
|
-
text-align: center;
|
6
|
-
}
|
7
|
-
& > [class*=pb_date_range_inline_wrapper] {
|
8
|
-
justify-content: center;
|
9
|
-
}
|
10
|
-
}
|
11
|
-
&[class*=_right] {
|
12
|
-
& > [class^=pb_caption],
|
13
|
-
& > [class^=pb_body] {
|
14
|
-
text-align: right;
|
15
|
-
}
|
16
|
-
& > [class*=pb_date_range_inline_wrapper] {
|
17
|
-
justify-content: flex-end;
|
18
|
-
}
|
19
|
-
}
|
20
|
-
[class^=pb_date_range_inline_wrapper] {
|
21
|
-
display: flex;
|
22
|
-
align-items: center;
|
23
|
-
[class*=pb_date_range_inline_arrow] {
|
24
|
-
margin-left: $space_xs/2;
|
25
|
-
margin-right: $space_xs/2;
|
26
|
-
}
|
27
|
-
[class*=pb_date_range_inline_timezone] {
|
28
|
-
margin-left: $space_xs/2;
|
29
|
-
}
|
30
|
-
[class*=pb_date_range_inline_icon] {
|
31
|
-
margin-right: $space_xs/2;
|
32
|
-
}
|
33
|
-
}
|
1
|
+
.pb_date_range_inline {
|
2
|
+
|
34
3
|
}
|
@@ -11,58 +11,23 @@ module Playbook
|
|
11
11
|
|
12
12
|
prop :end_date, type: Playbook::Props::Date, required: true
|
13
13
|
prop :start_date, type: Playbook::Props::Date, required: true
|
14
|
-
prop :icon, required: false
|
15
|
-
prop :dark, type: Playbook::Props::Boolean,
|
16
|
-
default: false
|
17
|
-
prop :size, type: Playbook::Props::Enum,
|
18
|
-
values: %w[xs sm],
|
19
|
-
default: "sm"
|
20
|
-
prop :align, type: Playbook::Props::Enum,
|
21
|
-
values: %w[left center right],
|
22
|
-
default: "left"
|
23
14
|
|
24
15
|
def classname
|
25
|
-
generate_classname("pb_date_range_inline_kit"
|
26
|
-
end
|
27
|
-
|
28
|
-
def text_kit
|
29
|
-
case size
|
30
|
-
when "xs"
|
31
|
-
"caption"
|
32
|
-
when "sm"
|
33
|
-
"body"
|
34
|
-
end
|
35
|
-
end
|
36
|
-
|
37
|
-
def icon_color
|
38
|
-
size == "sm" ? "light" : nil
|
39
|
-
end
|
40
|
-
|
41
|
-
def dates_in_current_year?
|
42
|
-
current_year = Time.current.year
|
43
|
-
start_date.year == current_year && end_date.year == current_year
|
44
|
-
end
|
45
|
-
|
46
|
-
def time_display(time)
|
47
|
-
content_tag(:time, datetime: time.to_iso) do
|
48
|
-
if dates_in_current_year?
|
49
|
-
"#{time.to_month_downcase} #{time.to_day}"
|
50
|
-
else
|
51
|
-
"#{time.to_month_downcase} #{time.to_day}, #{time.to_year}"
|
52
|
-
end
|
53
|
-
end
|
16
|
+
generate_classname("pb_date_range_inline_kit")
|
54
17
|
end
|
55
18
|
|
56
19
|
def end_date_display
|
57
|
-
|
20
|
+
date_time = Playbook::PbKit::PbDateTime.new(end_date)
|
21
|
+
content_tag(:time, datetime: date_time.to_iso) do
|
22
|
+
"#{date_time.to_day} #{date_time.to_month_downcase} #{date_time.to_year}"
|
23
|
+
end
|
58
24
|
end
|
59
25
|
|
60
26
|
def start_date_display
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
dark ? "dark" : nil
|
27
|
+
date_time = Playbook::PbKit::PbDateTime.new(start_date)
|
28
|
+
content_tag(:time, datetime: date_time.to_iso) do
|
29
|
+
"#{date_time.to_day} #{date_time.to_month_downcase} #{date_time.to_year}"
|
30
|
+
end
|
66
31
|
end
|
67
32
|
end
|
68
33
|
end
|
@@ -1,14 +1 @@
|
|
1
|
-
|
2
|
-
<%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20), size: "xs" }) %>
|
3
|
-
<%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %>
|
4
|
-
<br>
|
5
|
-
<br>
|
6
|
-
|
7
|
-
<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), size: "xs", icon: true, align: 'center' }) %>
|
8
|
-
<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), icon: true, align: 'center' }) %>
|
9
|
-
<br>
|
10
|
-
<br>
|
11
|
-
|
12
|
-
<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), size: "xs", icon: true, align: 'right' }) %>
|
13
|
-
<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), icon: true, align: 'right' }) %>
|
14
|
-
</div>
|
1
|
+
<%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %>
|
@@ -1,57 +1,13 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import DateRangeInline from '../_date_range_inline.jsx'
|
3
3
|
|
4
|
-
const DateRangeInlineDefault = (
|
4
|
+
const DateRangeInlineDefault = () => {
|
5
5
|
return (
|
6
6
|
<div>
|
7
7
|
<DateRangeInline
|
8
|
-
{...props}
|
9
8
|
endDate={new Date('20 Mar 2015')}
|
10
|
-
size="xs"
|
11
9
|
startDate={new Date('18 Jun 2013')}
|
12
10
|
/>
|
13
|
-
<DateRangeInline
|
14
|
-
{...props}
|
15
|
-
endDate={new Date('20 Mar 2015')}
|
16
|
-
size="sm"
|
17
|
-
startDate={new Date('18 Jun 2013')}
|
18
|
-
/>
|
19
|
-
<br />
|
20
|
-
<br />
|
21
|
-
<DateRangeInline
|
22
|
-
{...props}
|
23
|
-
align="center"
|
24
|
-
endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
|
25
|
-
icon
|
26
|
-
size="xs"
|
27
|
-
startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
|
28
|
-
/>
|
29
|
-
<DateRangeInline
|
30
|
-
{...props}
|
31
|
-
align="center"
|
32
|
-
endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
|
33
|
-
icon
|
34
|
-
size="sm"
|
35
|
-
startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
|
36
|
-
/>
|
37
|
-
<br />
|
38
|
-
<br />
|
39
|
-
<DateRangeInline
|
40
|
-
{...props}
|
41
|
-
align="right"
|
42
|
-
endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
|
43
|
-
icon
|
44
|
-
size="xs"
|
45
|
-
startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
|
46
|
-
/>
|
47
|
-
<DateRangeInline
|
48
|
-
{...props}
|
49
|
-
align="right"
|
50
|
-
endDate={new Date(`15 Aug ${new Date().getFullYear()}`)}
|
51
|
-
icon
|
52
|
-
size="sm"
|
53
|
-
startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
|
54
|
-
/>
|
55
11
|
</div>
|
56
12
|
)
|
57
13
|
}
|