playbook_ui 11.4.0 → 11.5.0.pre.alpha.datepicker1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (128) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/data/menu.yml +0 -13
  3. data/app/pb_kits/playbook/pb_badge/badge.test.js +80 -0
  4. data/app/pb_kits/playbook/pb_button/_button.tsx +7 -2
  5. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +7 -0
  6. data/app/pb_kits/playbook/pb_button/button.html.erb +11 -0
  7. data/app/pb_kits/playbook/pb_button/button.rb +3 -0
  8. data/app/pb_kits/playbook/pb_button/button.test.js +6 -8
  9. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb +1 -1
  10. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +12 -9
  11. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md +1 -0
  12. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb +2 -0
  13. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +23 -0
  14. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.md +1 -0
  15. data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
  16. data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
  17. data/app/pb_kits/playbook/pb_date/_date.tsx +1 -1
  18. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +13 -1
  19. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +24 -19
  20. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +9 -0
  22. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +25 -3
  23. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb +44 -0
  24. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.jsx +60 -0
  25. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md +9 -0
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb +33 -0
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx +67 -0
  28. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -0
  29. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -0
  30. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +0 -3
  31. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss +4 -4
  32. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +142 -0
  33. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js +116 -0
  34. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +1 -1
  35. data/app/pb_kits/playbook/pb_date_time/{_date_time.jsx → _date_time.tsx} +2 -5
  36. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +110 -0
  37. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx +1 -1
  38. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +1 -1
  39. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx +1 -1
  40. data/app/pb_kits/playbook/pb_date_year_stacked/{_date_year_stacked.jsx → _date_year_stacked.tsx} +6 -6
  41. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js +67 -0
  42. data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +32 -14
  43. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +5 -0
  44. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.jsx +2 -2
  45. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx +22 -4
  46. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx +3 -3
  47. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +79 -17
  48. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +55 -93
  49. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +79 -42
  50. data/app/pb_kits/playbook/pb_file_upload/{_file_upload.jsx → _file_upload.tsx} +6 -10
  51. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +2 -0
  52. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +2 -0
  53. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +2 -2
  54. data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +1 -0
  55. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +34 -0
  56. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +66 -0
  57. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +4 -0
  58. data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
  59. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  60. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  61. data/app/pb_kits/playbook/pb_filter/filter.rb +3 -0
  62. data/app/pb_kits/playbook/pb_filter/filter.test.js +76 -0
  63. data/app/pb_kits/playbook/pb_form_group/{_form_group.jsx → _form_group.tsx} +1 -4
  64. data/app/pb_kits/playbook/pb_form_group/form_group.test.js +17 -0
  65. data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx +10 -1
  66. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.html.erb +5 -0
  67. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx +26 -0
  68. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.md +1 -0
  69. data/app/pb_kits/playbook/pb_hashtag/docs/example.yml +2 -0
  70. data/app/pb_kits/playbook/pb_hashtag/docs/index.js +1 -0
  71. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -1
  72. data/app/pb_kits/playbook/pb_hashtag/hashtag.rb +6 -0
  73. data/app/pb_kits/playbook/pb_hashtag/hashtag.test.js +54 -0
  74. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +129 -0
  75. data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb +2 -1
  76. data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb +2 -0
  77. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +1 -1
  78. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +2 -2
  79. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb +12 -0
  80. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx +23 -0
  81. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md +1 -0
  82. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +3 -0
  83. data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +1 -0
  84. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +4 -0
  85. data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +60 -0
  86. data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb +2 -1
  87. data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb +4 -1
  88. data/app/pb_kits/playbook/pb_icon_stat_value/{_icon_stat_value.jsx → _icon_stat_value.tsx} +2 -4
  89. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +154 -0
  90. data/app/pb_kits/playbook/pb_icon_value/{_icon_value.jsx → _icon_value.tsx} +2 -4
  91. data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +77 -0
  92. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +123 -0
  93. data/app/pb_kits/playbook/pb_label_value/label_value.test.js +109 -0
  94. data/app/pb_kits/playbook/pb_layout/{_layout.jsx → _layout.tsx} +13 -19
  95. data/app/pb_kits/playbook/pb_layout/layout.test.js +97 -0
  96. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +23 -15
  97. data/app/pb_kits/playbook/pb_popover/popover.rb +1 -1
  98. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -1
  99. data/app/pb_kits/playbook/pb_time/_time.tsx +2 -2
  100. data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +5 -2
  101. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +9 -0
  102. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +10 -0
  103. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +4 -1
  104. data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +164 -0
  105. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +0 -4
  106. data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +11 -8
  107. data/app/pb_kits/playbook/tokens/_colors.scss +74 -74
  108. data/app/pb_kits/playbook/tokens/_typography.scss +8 -8
  109. data/app/pb_kits/playbook/utilities/_flexbox.scss +11 -11
  110. data/app/pb_kits/playbook/utilities/{_align_content.scss → flexbox_global_props/_align_content.scss} +0 -0
  111. data/app/pb_kits/playbook/utilities/{_align_items.scss → flexbox_global_props/_align_items.scss} +0 -0
  112. data/app/pb_kits/playbook/utilities/{_align_self.scss → flexbox_global_props/_align_self.scss} +0 -0
  113. data/app/pb_kits/playbook/utilities/{_flex.scss → flexbox_global_props/_flex.scss} +0 -0
  114. data/app/pb_kits/playbook/utilities/{_flex_direction.scss → flexbox_global_props/_flex_direction.scss} +0 -0
  115. data/app/pb_kits/playbook/utilities/{_flex_grow.scss → flexbox_global_props/_flex_grow.scss} +0 -0
  116. data/app/pb_kits/playbook/utilities/{_flex_shrink.scss → flexbox_global_props/_flex_shrink.scss} +0 -0
  117. data/app/pb_kits/playbook/utilities/{_flex_wrap.scss → flexbox_global_props/_flex_wrap.scss} +0 -0
  118. data/app/pb_kits/playbook/utilities/{_justify_content.scss → flexbox_global_props/_justify_content.scss} +0 -0
  119. data/app/pb_kits/playbook/utilities/{_justify_self.scss → flexbox_global_props/_justify_self.scss} +0 -0
  120. data/app/pb_kits/playbook/utilities/{_order.scss → flexbox_global_props/_order.scss} +0 -0
  121. data/app/pb_kits/playbook/utilities/props.ts +1 -1
  122. data/app/pb_kits/playbook/utilities/test-utils.js +2 -3
  123. data/app/pb_kits/playbook/utilities/text.ts +1 -1
  124. data/lib/playbook/version.rb +2 -2
  125. metadata +56 -25
  126. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +0 -155
  127. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +0 -124
  128. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +0 -155
@@ -0,0 +1,33 @@
1
+ <%= pb_rails("card", props: {id: "position-element", margin_bottom: "md"}) do %>
2
+ <%= pb_rails("body") do %>👋 Datepicker will position from here based on ID.<% end %>
3
+ <% end %>
4
+
5
+ <%= pb_rails("flex") do %>
6
+ <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
7
+ <%= pb_rails("date_picker", props: {
8
+ label: "Datepicker (opens on the right)",
9
+ picker_id: "date-picker-position-element",
10
+ position: "auto right",
11
+ position_element: "#position-element",
12
+ scroll_container: ".pb--page--content--main",
13
+ static_position: false
14
+ }) %>
15
+ <% end %>
16
+ <% end %>
17
+
18
+ <%= pb_rails("card", props: {classname: "position-element", margin_bottom: "md"}) do %>
19
+ <%= pb_rails("body") do %>👋 Datepicker will position from here based on class name.<% end %>
20
+ <% end %>
21
+
22
+ <%= pb_rails("flex") do %>
23
+ <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
24
+ <%= pb_rails("date_picker", props: {
25
+ label: "Datepicker (opens on the right)",
26
+ picker_id: "date-picker-position-element2",
27
+ position: "auto right",
28
+ position_element: ".position-element",
29
+ scroll_container: ".pb--page--content--main",
30
+ static_position: false
31
+ }) %>
32
+ <% end %>
33
+ <% end %>
@@ -0,0 +1,67 @@
1
+ import React, { useRef, useEffect, useState } from 'react'
2
+
3
+ import Card from '../../pb_card/_card'
4
+ import Flex from '../../pb_flex/_flex'
5
+ import FlexItem from '../../pb_flex/_flex_item'
6
+ import DatePicker from '../_date_picker'
7
+
8
+ const DatePickerPositionsElement = (props) => {
9
+ const cardRefTop = useRef(null),
10
+ cardRefBtm = useRef(null)
11
+
12
+ const [cardTop, setCardTop] = useState()
13
+ const [cardBtm, setCardBtm] = useState()
14
+
15
+ useEffect(() => {
16
+ setCardTop(cardRefTop.current)
17
+ setCardBtm(cardRefBtm.current)
18
+ }, [cardTop, cardBtm])
19
+
20
+ return (
21
+ <React.Fragment>
22
+ <div ref={cardRefTop}>
23
+ <Card
24
+ marginBottom="md"
25
+ >
26
+ {'👋 Datepicker will position from here based on ID.'}
27
+ </Card>
28
+ </div>
29
+ <Flex>
30
+ <FlexItem fixedSize="50%">
31
+ <DatePicker
32
+ label="Datepicker (opens on the right)"
33
+ pickerId="date-picker-position-element"
34
+ position="auto right"
35
+ positionElement={cardTop}
36
+ scrollContainer=".pb--page--content--main"
37
+ staticPosition={false}
38
+ {...props}
39
+ />
40
+ </FlexItem>
41
+ </Flex>
42
+
43
+ <div ref={cardRefBtm}>
44
+ <Card
45
+ marginBottom="md"
46
+ >
47
+ {'👋 Datepicker will position from here based on class name.'}
48
+ </Card>
49
+ </div>
50
+ <Flex>
51
+ <FlexItem fixedSize="50%">
52
+ <DatePicker
53
+ label="Datepicker (opens on the right)"
54
+ pickerId="date-picker-position-element2"
55
+ position="auto right"
56
+ positionElement={cardBtm}
57
+ scrollContainer=".pb--page--content--main"
58
+ staticPosition={false}
59
+ {...props}
60
+ />
61
+ </FlexItem>
62
+ </Flex>
63
+ </React.Fragment>
64
+ )
65
+ }
66
+
67
+ export default DatePickerPositionsElement
@@ -19,6 +19,8 @@ examples:
19
19
  - date_picker_month_and_year: Month & Year Only
20
20
  - date_picker_week: Week
21
21
  - date_picker_time: Time Selection
22
+ - date_picker_positions: Custom Positions
23
+ - date_picker_positions_element: Custom Position (based on element)
22
24
 
23
25
 
24
26
  react:
@@ -40,3 +42,5 @@ examples:
40
42
  - date_picker_month_and_year: Month & Year Only
41
43
  - date_picker_week: Week
42
44
  - date_picker_time: Time Selection
45
+ - date_picker_positions: Custom Positions
46
+ - date_picker_positions_element: Custom Position (based on element)
@@ -16,3 +16,5 @@ export { default as DatePickerInline } from './_date_picker_inline.jsx'
16
16
  export { default as DatePickerMonthAndYear } from './_date_picker_month_and_year.jsx'
17
17
  export { default as DatePickerTime } from './_date_picker_time.jsx'
18
18
  export { default as DatePickerWeek } from './_date_picker_week.jsx'
19
+ export { default as DatePickerPositions } from './_date_picker_positions.jsx'
20
+ export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
@@ -659,9 +659,6 @@ span.flatpickr-weekday {
659
659
  -webkit-box-sizing: border-box;
660
660
  box-sizing: border-box;
661
661
  overflow: hidden;
662
- display: -webkit-box;
663
- display: -webkit-flex;
664
- display: -ms-flexbox;
665
662
  }
666
663
  .flatpickr-time:after {
667
664
  content: "";
@@ -1,15 +1,15 @@
1
1
  @media (min-width: 500px) {
2
2
  .flatpickr-calendar {
3
3
  padding: $space_xs;
4
- width: 323.88px
4
+ // width: 323.88px;
5
5
  }
6
6
  .dayContainer {
7
7
  width: 315.88px
8
8
  }
9
9
  .flatpickr-months {
10
- margin-left: -$space_xs;
11
- margin-top: -$space_xs;
12
- width: 323.88px;
10
+ margin-left: $space_xs / 4;
11
+ margin-top: $space_xs / 3;
12
+ // width: 323.88px;
13
13
  }
14
14
  }
15
15
  @media (max-width: 499px) {
@@ -0,0 +1,142 @@
1
+ import React from "react";
2
+ import classnames from "classnames";
3
+
4
+ import { globalProps } from "../utilities/globalProps";
5
+ import { buildCss, buildDataProps } from "../utilities/props";
6
+ import DateTime from "../pb_kit/dateTime";
7
+
8
+ import Body from "../pb_body/_body";
9
+ import Caption from "../pb_caption/_caption";
10
+ import Icon from "../pb_icon/_icon";
11
+
12
+ type DateRangeInlineProps = {
13
+ className?: string;
14
+ id?: string;
15
+ data?: string;
16
+ align?: "left" | "center" | "vertical";
17
+ size?: "sm" | "xs";
18
+ dark?: boolean;
19
+ icon?: boolean;
20
+ startDate?: Date;
21
+ endDate?: Date;
22
+ };
23
+
24
+ const dateTimestamp = (dateValue: Date | string, includeYear: boolean) => {
25
+ const date = new DateTime({ value: dateValue });
26
+ if (includeYear) {
27
+ return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`;
28
+ } else {
29
+ return `${date.toMonth()} ${date.toDay()}`;
30
+ }
31
+ };
32
+
33
+ const dateTimeIso = (dateValue: Date | string) => {
34
+ const date = new DateTime({ value: dateValue });
35
+ return date.toIso();
36
+ };
37
+
38
+ const DateRangeInline = (props: DateRangeInlineProps) => {
39
+ const {
40
+ icon = false,
41
+ dark = false,
42
+ size = "sm",
43
+ align = "left",
44
+ data = {},
45
+ startDate,
46
+ endDate,
47
+ className,
48
+ } = props;
49
+
50
+ const iconContent = () => {
51
+ return (
52
+ <>
53
+ {icon && (
54
+ <>
55
+ <Body color="light" key={Math.random()} tag="span">
56
+ <Icon
57
+ className="pb_date_range_inline_icon"
58
+ dark={dark}
59
+ fixedWidth
60
+ icon="calendar-alt"
61
+ size={size}
62
+ tag="span"
63
+ />
64
+ </Body>
65
+ </>
66
+ )}
67
+ </>
68
+ );
69
+ };
70
+
71
+ const dateInCurrentYear = () => {
72
+ const currentDate = new Date();
73
+ return (
74
+ startDate.getFullYear() == endDate.getFullYear() &&
75
+ startDate.getFullYear() == currentDate.getFullYear()
76
+ );
77
+ };
78
+
79
+ const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
80
+ const dataProps = buildDataProps(data)
81
+ const renderTime = (date: Date | string) => {
82
+ return (
83
+ <time dateTime={dateTimeIso(date)}>
84
+ {dateInCurrentYear() ? (
85
+ <>{` ${dateTimestamp(date, false)} `}</>
86
+ ) : (
87
+ <>{` ${dateTimestamp(date, true)} `}</>
88
+ )}
89
+ </time>
90
+ );
91
+ };
92
+
93
+ return (
94
+ <div
95
+ {...dataProps}
96
+ className={classnames(dateRangeClasses, globalProps(props), className)}
97
+ >
98
+ <div className="pb_date_range_inline_wrapper">
99
+ {size == "xs" && (
100
+ <>
101
+ {iconContent()}
102
+ <Caption dark={dark} tag="span">
103
+ {renderTime(startDate)}
104
+ </Caption>
105
+ <Caption dark={dark} tag="span">
106
+ <Icon
107
+ className="pb_date_range_inline_arrow"
108
+ fixedWidth
109
+ icon="long-arrow-right"
110
+ />
111
+ </Caption>
112
+ <Caption dark={dark} tag="span">
113
+ {renderTime(endDate)}
114
+ </Caption>
115
+ </>
116
+ )}
117
+
118
+ {size == "sm" && (
119
+ <>
120
+ {iconContent()}
121
+ <Body dark={dark} tag="span">
122
+ {renderTime(startDate)}
123
+ </Body>
124
+ <Body color="light" dark={dark} tag="span">
125
+ <Icon
126
+ className="pb_date_range_inline_arrow"
127
+ dark={dark}
128
+ fixedWidth
129
+ icon="long-arrow-right"
130
+ />
131
+ </Body>
132
+ <Body dark={dark} tag="span">
133
+ {renderTime(endDate)}
134
+ </Body>
135
+ </>
136
+ )}
137
+ </div>
138
+ </div>
139
+ );
140
+ };
141
+
142
+ export default DateRangeInline;
@@ -0,0 +1,116 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+
4
+ import DateRangeInline from './_date_range_inline'
5
+
6
+ jest.useFakeTimers()
7
+ const testId = "daterangeinline-kit";
8
+
9
+ describe("DateRangeInline Kit", () => {
10
+ test("renders DateRangeInline className", () => {
11
+ render(
12
+ <DateRangeInline
13
+ data={{ testid: testId }}
14
+ endDate={new Date('20 Mar 2015')}
15
+ size="xs"
16
+ startDate={new Date('18 Jun 2013')}
17
+ />
18
+ )
19
+
20
+ const kit = screen.getByTestId(testId)
21
+ expect(kit).toHaveClass("pb_date_range_inline_kit_left")
22
+ })
23
+
24
+ test("renders DateRangeInline text left", () => {
25
+ render(
26
+ <DateRangeInline
27
+ data={{ testid: testId }}
28
+ endDate={new Date('20 Mar 2015')}
29
+ size="xs"
30
+ startDate={new Date('18 Jun 2013')}
31
+ />
32
+ )
33
+
34
+ const kit = screen.getByTestId(testId)
35
+ const text = kit.querySelector('.pb_caption_kit_md:first-child')
36
+ expect(text.textContent).toEqual(" Jun 18, 2013 ")
37
+ })
38
+
39
+ test("renders DateRangeInline text right", () => {
40
+ render(
41
+ <DateRangeInline
42
+ data={{ testid: testId }}
43
+ endDate={new Date('20 Mar 2015')}
44
+ size="xs"
45
+ startDate={new Date('18 Jun 2013')}
46
+ />
47
+ )
48
+
49
+ const kit = screen.getByTestId(testId)
50
+ const text = kit.querySelector('.pb_caption_kit_md:last-child')
51
+ expect(text.textContent).toEqual(" Mar 20, 2015 ")
52
+ })
53
+
54
+ test("renders DateRangeInline arrow icon center", () => {
55
+ render(
56
+ <DateRangeInline
57
+ data={{ testid: testId }}
58
+ endDate={new Date('20 Mar 2015')}
59
+ size="xs"
60
+ startDate={new Date('18 Jun 2013')}
61
+ />
62
+ )
63
+
64
+ const kit = screen.getByTestId(testId)
65
+ const arrow = kit.querySelector('.pb_icon_kit.fa-fw.fa-long-arrow-right')
66
+ expect(arrow).toBeInTheDocument()
67
+ })
68
+
69
+ test("renders DateRangeInline className if size sm", () => {
70
+ render(
71
+ <DateRangeInline
72
+ data={{ testid: testId }}
73
+ endDate={new Date('20 Mar 2015')}
74
+ size="sm"
75
+ startDate={new Date('18 Jun 2013')}
76
+ />
77
+ )
78
+
79
+ const kit = screen.getByTestId(testId)
80
+ const innerKit = kit.querySelector('.pb_body_kit')
81
+ expect(innerKit).toBeInTheDocument()
82
+ })
83
+
84
+ test("renders DateRangeInline calender icon left", () => {
85
+ render(
86
+ <DateRangeInline
87
+ data={{ testid: testId }}
88
+ endDate={new Date('20 Mar 2015')}
89
+ icon
90
+ size="xs"
91
+ startDate={new Date('18 Jun 2013')}
92
+ />
93
+ )
94
+
95
+ const kit = screen.getByTestId(testId)
96
+ const calendar = kit.querySelector('.pb_icon_kit.fa-fw.fa-calendar-alt')
97
+ expect(calendar).toBeInTheDocument()
98
+ })
99
+
100
+ test("renders DateRangeInline without year", () => {
101
+ render(
102
+ <DateRangeInline
103
+ data={{ testid: testId }}
104
+ endDate={new Date((`15 Aug ${new Date().getFullYear()}`))}
105
+ size="xs"
106
+ startDate={new Date(`15 Jan ${new Date().getFullYear()}`)}
107
+ />
108
+ )
109
+
110
+ const kit = screen.getByTestId(testId)
111
+ const text = kit.querySelector('.pb_caption_kit_md:first-child')
112
+ expect(text.textContent).toEqual(" Jan 15 ")
113
+ })
114
+
115
+
116
+ })
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import DateRangeInline from '../_date_range_inline.jsx'
2
+ import DateRangeInline from '../_date_range_inline'
3
3
 
4
4
  const DateRangeInlineDefault = (props) => {
5
5
  return (
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
@@ -12,9 +10,9 @@ import FormattedDate from '../pb_date/_date'
12
10
 
13
11
  type DateTimeProps = {
14
12
  align?: "left" | "center" | "right",
15
- aria?: object,
13
+ aria?: { [key: string]: string; },
16
14
  className?: string,
17
- data?: object,
15
+ data?: { [key: string]: string; },
18
16
  datetime: string,
19
17
  id?: string,
20
18
  size?: "sm" | "md",
@@ -59,7 +57,6 @@ const DateTime = (props: DateTimeProps) => {
59
57
  <FormattedDate
60
58
  showDayOfWeek={showDayOfWeek}
61
59
  size={size}
62
- timeZone={timeZone}
63
60
  value={datetime}
64
61
  />
65
62
  <Time
@@ -0,0 +1,110 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+
4
+ import DateTime from './_date_time'
5
+
6
+ const TEST_DATE = '01/01/2020 00:00:000 GMT-0500'
7
+ jest.setSystemTime(new Date(TEST_DATE));
8
+ const testId = 'datetime-kit'
9
+
10
+ const realDate = Date
11
+
12
+ beforeEach(() => {
13
+ global.Date.now = jest.fn(() => new Date(TEST_DATE).getTime());
14
+ })
15
+
16
+ afterEach(() => {
17
+ global.Date = realDate;
18
+ })
19
+
20
+ describe('DateTime Kit', () => {
21
+ test('renders DatePicker className', () => {
22
+ render(
23
+ <DateTime
24
+ data={{ testid: testId }}
25
+ datetime={new Date(Date.now())}
26
+ showDayOfWeek
27
+ showIcon
28
+ />
29
+ )
30
+
31
+ const kit = screen.getByTestId(testId)
32
+ expect(kit).toHaveClass('pb_date_time_md')
33
+ })
34
+ test('renders DatePicker text left', () => {
35
+ render(
36
+ <DateTime
37
+ data={{ testid: testId }}
38
+ datetime={new Date(Date.now())}
39
+ showDayOfWeek
40
+ showIcon
41
+ />
42
+ )
43
+
44
+ const kit = screen.getByTestId(testId)
45
+ const text = kit.querySelector('.pb_date_kit_left')
46
+ expect(text.textContent).toEqual('Wed • Jan 1')
47
+ })
48
+ test('renders DatePicker text right', () => {
49
+ render(
50
+ <DateTime
51
+ data={{ testid: testId }}
52
+ datetime={new Date(Date.now())}
53
+ showDayOfWeek
54
+ showIcon
55
+ />
56
+ )
57
+
58
+ const kit = screen.getByTestId(testId)
59
+ const text = kit.querySelector('.pb_time_kit_md.ml_sm')
60
+ const clock = kit.querySelector('.pb_icon_kit.far.fa-fw.fa-clock')
61
+
62
+ expect(clock).toBeInTheDocument()
63
+ expect(text.textContent).toEqual(' 12:00a EST')
64
+ })
65
+ test('renders DatePicker text right no icon', () => {
66
+ render(
67
+ <DateTime
68
+ data={{ testid: testId }}
69
+ datetime={new Date(Date.now())}
70
+ showDayOfWeek
71
+ />
72
+ )
73
+
74
+ const kit = screen.getByTestId(testId)
75
+ const clock = kit.querySelector('.pb_icon_kit.far.fa-fw.fa-clock')
76
+
77
+ expect(clock).toBeNull()
78
+ })
79
+ test('renders DatePicker text right timezone', () => {
80
+ render(
81
+ <DateTime
82
+ data={{ testid: testId }}
83
+ datetime={new Date(Date.now())}
84
+ showDayOfWeek
85
+ timeZone="Asia/Tokyo"
86
+ />
87
+ )
88
+
89
+ const kit = screen.getByTestId(testId)
90
+ const text = kit.querySelector('.pb_time_kit_md.ml_sm')
91
+
92
+ expect(text.textContent).toEqual('2:00p JST')
93
+ })
94
+ test('renders DatePicker size', () => {
95
+ render(
96
+ <DateTime
97
+ data={{ testid: testId }}
98
+ datetime={new Date(Date.now())}
99
+ showDayOfWeek
100
+ size="sm"
101
+ />
102
+ )
103
+
104
+ const kit = screen.getByTestId(testId)
105
+ const rightSide = kit.querySelector('.pb_time_kit_sm.ml_sm')
106
+
107
+ expect(kit).toHaveClass('pb_date_time_sm')
108
+ expect(rightSide).toBeInTheDocument()
109
+ })
110
+ })
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import DateTime from '../_date_time.jsx'
2
+ import DateTime from '../_date_time'
3
3
 
4
4
  const DateTimeAlign = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import DateTime from '../_date_time.jsx'
2
+ import DateTime from '../_date_time'
3
3
 
4
4
  const DateTimeDefault = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import DateTime from '../_date_time.jsx'
2
+ import DateTime from '../_date_time'
3
3
 
4
4
  const DateTimeDefault = (props) => (
5
5
  <div>
@@ -1,10 +1,8 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
6
4
  import DateTime from '../pb_kit/dateTime'
7
- import { buildCss } from '../utilities/props'
5
+ import { buildCss, buildDataProps } from '../utilities/props'
8
6
  import { globalProps } from '../utilities/globalProps'
9
7
 
10
8
  import Body from '../pb_body/_body'
@@ -12,7 +10,7 @@ import Title from '../pb_title/_title'
12
10
 
13
11
  type DateYearStackedProps = {
14
12
  align?: "left" | "center" | "right",
15
- className?: string | array<string>,
13
+ className?: string | string[],
16
14
  dark?: boolean,
17
15
  data?: string,
18
16
  date: string,
@@ -20,16 +18,18 @@ type DateYearStackedProps = {
20
18
  }
21
19
 
22
20
  const DateYearStacked = (props: DateYearStackedProps) => {
23
- const { align = 'left', className, dark = false, date } = props
21
+ const { align = 'left', className, dark = false, date, data={} } = props
24
22
  const dateTimestamp = new DateTime({ value: date })
25
23
  const css = classnames(
26
24
  buildCss('pb_date_year_stacked', align),
27
25
  globalProps(props),
28
26
  className
29
27
  )
28
+ const dataProps = buildDataProps(data)
30
29
 
31
30
  return (
32
- <div className={css}>
31
+ <div {...dataProps}
32
+ className={css}>
33
33
  <Title
34
34
  dark={dark}
35
35
  size={4}
@@ -0,0 +1,67 @@
1
+ import React from "react";
2
+ import { render, screen } from "../utilities/test-utils";
3
+
4
+ import DateYearStacked from "./_date_year_stacked";
5
+
6
+ const TEST_DATE = "01/01/2020 00:00:000 GMT-0500";
7
+ jest.setSystemTime(new Date(TEST_DATE));
8
+ const testId = "dateyearstacked-kit";
9
+ const realDate = Date;
10
+
11
+ beforeEach(() => {
12
+ global.Date.now = jest.fn(() => new Date(TEST_DATE));
13
+ });
14
+
15
+ afterEach(() => {
16
+ global.Date = realDate;
17
+ });
18
+
19
+ describe("DateYearStacked Kit", () => {
20
+ test("renders DateYearStacked className", () => {
21
+ render(
22
+ <DateYearStacked
23
+ data={{ testid: testId }}
24
+ date={new Date(Date.now())} />
25
+ );
26
+
27
+ const kit = screen.getByTestId(testId);
28
+ expect(kit).toHaveClass("pb_date_year_stacked_left");
29
+ });
30
+
31
+ test("renders DateYearStacked text top", () => {
32
+ render(
33
+ <DateYearStacked
34
+ data={{ testid: testId }}
35
+ date={new Date(Date.now())} />
36
+ );
37
+
38
+ const kit = screen.getByTestId(testId);
39
+ const text = kit.querySelector(".pb_title_kit_size_4");
40
+ expect(text.textContent).toEqual("1 JAN");
41
+ });
42
+
43
+ test("renders DateYearStacked text bottom", () => {
44
+ render(
45
+ <DateYearStacked
46
+ data={{ testid: testId }}
47
+ date={new Date(Date.now())} />
48
+ );
49
+
50
+ const kit = screen.getByTestId(testId);
51
+ const text = kit.querySelector(".pb_body_kit_light");
52
+ expect(text.textContent).toEqual("2020");
53
+ });
54
+
55
+ test("renders align prop", () => {
56
+ render(
57
+ <DateYearStacked
58
+ align="center"
59
+ data={{ testid: testId }}
60
+ date={new Date(Date.now())}
61
+ />
62
+ );
63
+
64
+ const kit = screen.getByTestId(testId);
65
+ expect(kit).toHaveClass("pb_date_year_stacked_center");
66
+ });
67
+ });