playbook_ui 7.0.1 → 7.1.0.pre.alpha1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (137) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/data/menu.yml +4 -3
  3. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +0 -1
  4. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +1 -0
  5. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx +3 -3
  6. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss +82 -90
  7. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss +57 -0
  8. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss +27 -0
  9. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb +4 -2
  10. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb +17 -7
  11. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx +32 -9
  12. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb +18 -7
  13. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx +37 -9
  14. data/app/pb_kits/playbook/pb_button_toolbar/docs/example.yml +3 -7
  15. data/app/pb_kits/playbook/pb_button_toolbar/docs/index.js +0 -2
  16. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +1 -2
  17. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +1 -3
  18. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +3 -2
  19. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +34 -32
  20. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +1 -2
  21. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +1 -2
  22. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +1 -0
  23. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +4 -0
  24. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +4 -0
  25. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb +9 -9
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx +8 -8
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md +3 -1
  28. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +1 -0
  29. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +1 -0
  30. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -4
  31. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -2
  32. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb +8 -14
  33. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +122 -39
  34. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss +33 -2
  35. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb +44 -9
  36. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.html.erb +14 -1
  37. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +45 -1
  38. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb +3 -2
  39. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +29 -15
  40. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +10 -0
  41. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb +21 -0
  42. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx +38 -0
  43. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb +2 -1
  44. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx +1 -2
  45. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +1 -1
  46. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb +1 -1
  48. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +1 -1
  49. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +2 -0
  50. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +1 -0
  51. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +7 -1
  52. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js +18 -0
  53. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
  54. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  55. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +3 -3
  56. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +3 -3
  57. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +1 -0
  58. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +0 -1
  59. data/app/pb_kits/playbook/pb_popover/_popover.scss +6 -4
  60. data/app/pb_kits/playbook/pb_popover/index.js +3 -1
  61. data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +3 -0
  62. data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +168 -33
  63. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb +3 -1
  64. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx +10 -8
  65. data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +1 -1
  66. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +14 -16
  67. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +6 -3
  68. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.html.erb +17 -1
  69. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx +17 -1
  70. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx +10 -3
  71. data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +11 -1
  72. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +1 -1
  73. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb +34 -0
  74. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx +68 -0
  75. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.md +2 -0
  76. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb +61 -0
  77. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.jsx +89 -0
  78. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.md +1 -0
  79. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb +34 -0
  80. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx +68 -0
  81. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.md +2 -0
  82. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb +43 -0
  83. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx +80 -0
  84. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.md +1 -0
  85. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb +34 -0
  86. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx +63 -0
  87. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md +1 -0
  88. data/app/pb_kits/playbook/pb_table/docs/example.yml +12 -0
  89. data/app/pb_kits/playbook/pb_table/docs/index.js +6 -0
  90. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +5 -5
  91. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_options.html.erb +10 -0
  92. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +1 -0
  93. data/app/pb_kits/playbook/pb_toggle/toggle.rb +4 -1
  94. data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb +24 -20
  95. data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +19 -1
  96. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +8 -1
  97. data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +21 -13
  98. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +1 -1
  99. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb +1 -1
  100. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +25 -0
  101. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +0 -3
  102. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +8 -0
  103. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb +30 -0
  104. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md +11 -0
  105. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb +25 -0
  106. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +0 -3
  107. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md +1 -0
  108. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +3 -0
  109. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +24 -1
  110. data/app/pb_kits/playbook/react_rails_kits.js +1 -0
  111. data/app/pb_kits/playbook/vendor.js +3 -0
  112. data/lib/playbook/version.rb +1 -1
  113. metadata +32 -28
  114. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.html.erb +0 -11
  115. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.jsx +0 -29
  116. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.html.erb +0 -11
  117. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.jsx +0 -34
  118. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb +0 -4
  119. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx +0 -13
  120. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md +0 -1
  121. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb +0 -4
  122. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx +0 -13
  123. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx +0 -45
  124. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx +0 -27
  125. data/lib/generators/kit/USAGE +0 -5
  126. data/lib/generators/kit/kit_generator.rb +0 -95
  127. data/lib/generators/kit/templates/kit_example_rails.erb.tt +0 -1
  128. data/lib/generators/kit/templates/kit_example_react.erb.tt +0 -10
  129. data/lib/generators/kit/templates/kit_example_yml.erb.tt +0 -9
  130. data/lib/generators/kit/templates/kit_html.erb.tt +0 -7
  131. data/lib/generators/kit/templates/kit_js.erb.tt +0 -1
  132. data/lib/generators/kit/templates/kit_jsx.erb.tt +0 -68
  133. data/lib/generators/kit/templates/kit_ruby.erb.tt +0 -11
  134. data/lib/generators/kit/templates/kit_ruby_spec.erb.tt +0 -11
  135. data/lib/generators/kit/templates/kit_scss.erb +0 -3
  136. data/lib/tasks/pb_release.rake +0 -88
  137. data/lib/tasks/playbook_tasks.rake +0 -26
@@ -12,9 +12,7 @@ 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
16
15
  - date_picker_year_range: Year Range
17
- - date_picker_dark: Dark
18
16
 
19
17
 
20
18
  react:
@@ -30,7 +28,5 @@ examples:
30
28
  - date_picker_min_max: Min Max
31
29
  - date_picker_error: Error
32
30
  - date_picker_hooks: Hooks
33
- # - date_picker_allow_input: Allow Input
34
31
  - date_picker_year_range: Year Range
35
- - date_picker_dark: Dark
36
32
 
@@ -10,6 +10,4 @@ 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'
14
13
  export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
15
- export { default as DatePickerDark } from './_date_picker_dark.jsx'
@@ -2,21 +2,15 @@
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 %>
5
9
 
6
- <%= pb_rails("body", props: { tag: "span", color: "light" }) do %>
7
- <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
8
- <% end %>
10
+ <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.start_date_display }) %>
9
11
 
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 %>
12
+ <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "long-arrow-right", fixed_width: true, size: object.size, classname: "pb_date_range_inline_arrow"}) }) %>
21
13
 
14
+ <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, text: object.end_date_display }) %>
15
+ </div>
22
16
  <% end %>
@@ -2,21 +2,30 @@
2
2
 
3
3
  import React from 'react'
4
4
  import DateTime from '../pb_kit/dateTime.js'
5
- import { Body, Icon } from '../'
5
+ import { Body, Caption, Icon } from '../'
6
6
  import classnames from 'classnames'
7
7
  import { globalProps } from '../utilities/globalProps.js'
8
+ import { buildCss } from '../utilities/props'
8
9
 
9
10
  type DateRangeInlineProps = {
10
11
  className?: string,
11
- data?: string,
12
- endDate?: date,
13
12
  id?: string,
13
+ data?: string,
14
+ align?: "left" | "center" | "vertical",
15
+ size?: "sm" | "xs",
16
+ dark?: boolean,
17
+ icon?: boolean,
14
18
  startDate?: date,
19
+ endDate?: date
15
20
  }
16
21
 
17
- const dateTimestamp = (dateValue) => {
22
+ const dateTimestamp = (dateValue, includeYear) => {
18
23
  const date = new DateTime({ value: dateValue })
19
- return `${date.toDay()} ${date.toMonth()} ${date.toYear()}`
24
+ if (includeYear) {
25
+ return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`
26
+ } else {
27
+ return `${date.toMonth()} ${date.toDay()}`
28
+ }
20
29
  }
21
30
 
22
31
  const dateTimeIso = (dateValue) => {
@@ -25,41 +34,115 @@ const dateTimeIso = (dateValue) => {
25
34
  }
26
35
 
27
36
  const DateRangeInline = (props: DateRangeInlineProps) => {
28
- const { endDate, startDate } = props
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
+
29
89
  return (
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>
90
+ <div className={classnames(dateRangeClasses, globalProps(props), className)}>
91
+ <div className="pb_date_range_inline_wrapper">
92
+ <If condition={size == 'xs'}>
93
+ {iconContent()}
94
+ <Caption
95
+ dark={dark}
96
+ tag="span"
97
+ >
98
+ {renderTime(startDate)}
99
+ </Caption>
100
+ <Caption
101
+ dark={dark}
102
+ tag="span"
103
+ >
104
+ <Icon
105
+ className="pb_date_range_inline_arrow"
106
+ fixedWidth
107
+ icon="long-arrow-right"
108
+ />
109
+ </Caption>
110
+ <Caption
111
+ dark={dark}
112
+ tag="span"
113
+ >
114
+ {renderTime(endDate)}
115
+ </Caption>
116
+ </If>
117
+
118
+ <If condition={size == 'sm'}>
119
+ {iconContent()}
120
+ <Body
121
+ dark={dark}
122
+ tag="span"
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>
63
146
  </div>
64
147
  )
65
148
  }
@@ -1,3 +1,34 @@
1
- .pb_date_range_inline {
2
-
1
+ [class^=pb_date_range_inline_kit] {
2
+ &[class*=_center] {
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
+ }
3
34
  }
@@ -11,24 +11,59 @@ 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"
14
23
 
15
24
  def classname
16
- generate_classname("pb_date_range_inline_kit")
25
+ generate_classname("pb_date_range_inline_kit", dark_class, align)
17
26
  end
18
27
 
19
- def end_date_display
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}"
28
+ def text_kit
29
+ case size
30
+ when "xs"
31
+ "caption"
32
+ when "sm"
33
+ "body"
23
34
  end
24
35
  end
25
36
 
26
- def start_date_display
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}"
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
30
53
  end
31
54
  end
55
+
56
+ def end_date_display
57
+ time_display(Playbook::PbKit::PbDateTime.new(end_date))
58
+ end
59
+
60
+ def start_date_display
61
+ time_display(Playbook::PbKit::PbDateTime.new(start_date))
62
+ end
63
+
64
+ def dark_class
65
+ dark ? "dark" : nil
66
+ end
32
67
  end
33
68
  end
34
69
  end
@@ -1 +1,14 @@
1
- <%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %>
1
+ <div>
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,13 +1,57 @@
1
1
  import React from 'react'
2
2
  import DateRangeInline from '../_date_range_inline.jsx'
3
3
 
4
- const DateRangeInlineDefault = () => {
4
+ const DateRangeInlineDefault = (props) => {
5
5
  return (
6
6
  <div>
7
7
  <DateRangeInline
8
+ {...props}
8
9
  endDate={new Date('20 Mar 2015')}
10
+ size="xs"
9
11
  startDate={new Date('18 Jun 2013')}
10
12
  />
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
+ />
11
55
  </div>
12
56
  )
13
57
  }
@@ -3,6 +3,7 @@
3
3
  id: object.id,
4
4
  data: object.data,
5
5
  class: object.classname) do %>
6
- <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon" }) %>
7
- <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) if object.show_text?%>
6
+ <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
7
+ <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) if object.show_text? %>
8
+ <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon" }) if object.closeable %>
8
9
  <% end %>
@@ -1,6 +1,6 @@
1
1
  /* @flow */
2
2
 
3
- import React from 'react'
3
+ import React, { useState } from 'react'
4
4
  import classnames from 'classnames'
5
5
  import { Icon, Title } from '../'
6
6
  import { globalProps } from '../utilities/globalProps.js'
@@ -14,6 +14,7 @@ const iconMap = {
14
14
 
15
15
  type FixedConfirmationToastProps = {
16
16
  className?: string,
17
+ closeable?: boolean,
17
18
  data?: string,
18
19
  id?: string,
19
20
  status?: "success" | "error" | "neutral" | "tip",
@@ -21,7 +22,8 @@ type FixedConfirmationToastProps = {
21
22
  }
22
23
 
23
24
  const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
24
- const { className, status = 'neutral', text } = props
25
+ const [showToast, toggleToast] = useState(true)
26
+ const { className, closeable = false, status = 'neutral', text } = props
25
27
  const css = classnames(
26
28
  `pb_fixed_confirmation_toast_kit_${status}`,
27
29
  globalProps(props),
@@ -30,20 +32,32 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
30
32
  const icon = iconMap[status]
31
33
 
32
34
  return (
33
- <div className={css}>
34
- <If condition={icon}>
35
- <Icon
36
- className="pb_icon"
37
- fixed_width
38
- icon={icon}
35
+ <If condition={showToast}>
36
+ <div
37
+ className={css}
38
+ onClick={closeable && (() => toggleToast(false))}
39
+ >
40
+ <If condition={icon}>
41
+ <Icon
42
+ className="pb_icon"
43
+ fixedWidth
44
+ icon={icon}
45
+ />
46
+ </If>
47
+ <Title
48
+ className="pb_fixed_confirmation_toast_text"
49
+ size={4}
50
+ text={text}
39
51
  />
40
- </If>
41
- <Title
42
- className="pb_fixed_confirmation_toast_text"
43
- size={4}
44
- text={text}
45
- />
46
- </div>
52
+ <If condition={closeable}>
53
+ <Icon
54
+ className="pb_icon"
55
+ fixedWidth={false}
56
+ icon="times"
57
+ />
58
+ </If>
59
+ </div>
60
+ </If>
47
61
  )
48
62
  }
49
63