playbook_ui 11.4.0.pre.alpha.rubytheme2 → 11.5.0.pre.alpha.pre.rubocop

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_button/button.test.js +6 -8
  3. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +13 -1
  4. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +24 -19
  5. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
  6. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +8 -0
  7. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +25 -3
  8. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb +44 -0
  9. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.jsx +60 -0
  10. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md +9 -0
  11. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb +33 -0
  12. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx +67 -0
  13. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -0
  14. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -0
  15. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss +4 -4
  16. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +142 -0
  17. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js +116 -0
  18. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +1 -1
  19. data/app/pb_kits/playbook/pb_date_year_stacked/{_date_year_stacked.jsx → _date_year_stacked.tsx} +6 -6
  20. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js +67 -0
  21. data/app/pb_kits/playbook/pb_file_upload/{_file_upload.jsx → _file_upload.tsx} +6 -10
  22. data/app/pb_kits/playbook/pb_form_group/{_form_group.jsx → _form_group.tsx} +1 -4
  23. data/app/pb_kits/playbook/pb_form_group/form_group.test.js +17 -0
  24. data/app/pb_kits/playbook/pb_layout/{_layout.jsx → _layout.tsx} +13 -19
  25. data/app/pb_kits/playbook/pb_layout/layout.test.js +98 -0
  26. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +23 -15
  27. data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +5 -2
  28. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +9 -0
  29. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +10 -0
  30. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +4 -1
  31. data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +164 -0
  32. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +0 -4
  33. data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +11 -8
  34. data/app/pb_kits/playbook/utilities/_flexbox.scss +11 -11
  35. data/app/pb_kits/playbook/utilities/{_align_content.scss → flexbox_global_props/_align_content.scss} +0 -0
  36. data/app/pb_kits/playbook/utilities/{_align_items.scss → flexbox_global_props/_align_items.scss} +0 -0
  37. data/app/pb_kits/playbook/utilities/{_align_self.scss → flexbox_global_props/_align_self.scss} +0 -0
  38. data/app/pb_kits/playbook/utilities/{_flex.scss → flexbox_global_props/_flex.scss} +0 -0
  39. data/app/pb_kits/playbook/utilities/{_flex_direction.scss → flexbox_global_props/_flex_direction.scss} +0 -0
  40. data/app/pb_kits/playbook/utilities/{_flex_grow.scss → flexbox_global_props/_flex_grow.scss} +0 -0
  41. data/app/pb_kits/playbook/utilities/{_flex_shrink.scss → flexbox_global_props/_flex_shrink.scss} +0 -0
  42. data/app/pb_kits/playbook/utilities/{_flex_wrap.scss → flexbox_global_props/_flex_wrap.scss} +0 -0
  43. data/app/pb_kits/playbook/utilities/{_justify_content.scss → flexbox_global_props/_justify_content.scss} +0 -0
  44. data/app/pb_kits/playbook/utilities/{_justify_self.scss → flexbox_global_props/_justify_self.scss} +0 -0
  45. data/app/pb_kits/playbook/utilities/{_order.scss → flexbox_global_props/_order.scss} +0 -0
  46. data/app/pb_kits/playbook/utilities/props.ts +1 -1
  47. data/app/pb_kits/playbook/utilities/test-utils.js +2 -3
  48. data/lib/playbook/version.rb +2 -2
  49. metadata +29 -19
  50. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +0 -155
@@ -0,0 +1,164 @@
1
+ import React from "react";
2
+ import { render, screen } from "../utilities/test-utils";
3
+
4
+ import Timestamp from "./_timestamp";
5
+
6
+ const TEST_DATE = "01/01/2020 00:00:000 GMT-0500";
7
+ jest.setSystemTime(new Date(TEST_DATE));
8
+
9
+ const testId = "timestamp-kit";
10
+ const realDate = Date;
11
+ const futureDate = new Date(
12
+ new Date().getFullYear() + 4,
13
+ new Date().getMonth(),
14
+ new Date().getDate(),
15
+ new Date().getHours(),
16
+ new Date().getMinutes()
17
+ );
18
+
19
+ beforeEach(() => {
20
+ global.Date.now = jest.fn(() => new Date(TEST_DATE).getTime());
21
+ });
22
+
23
+ afterEach(() => {
24
+ global.Date = realDate;
25
+ });
26
+
27
+ describe("Timestamp Kit", () => {
28
+ test("renders Timestamp className", () => {
29
+ render(
30
+ <Timestamp
31
+ align="left"
32
+ data={{ testid: testId }}
33
+ showDate
34
+ timestamp={new Date(Date.now())}
35
+ />
36
+ );
37
+
38
+ const kit = screen.getByTestId(testId);
39
+ expect(kit).toHaveClass("pb_timestamp_kit_left_variant");
40
+ });
41
+
42
+ test("renders Timestamp time", () => {
43
+ render(
44
+ <Timestamp
45
+ align="left"
46
+ data={{ testid: testId }}
47
+ showDate={false}
48
+ timestamp={new Date(Date.now())}
49
+ />
50
+ );
51
+
52
+ const kit = screen.getByTestId(testId);
53
+ const text = kit.querySelector(".pb_caption_kit_xs");
54
+ expect(text.textContent).toEqual("12:00a");
55
+ });
56
+
57
+ test("renders Timestamp date and time with future year", () => {
58
+ render(
59
+ <Timestamp
60
+ align="left"
61
+ data={{ testid: testId }}
62
+ showDate
63
+ timestamp={new Date(futureDate)}
64
+ />
65
+ );
66
+ const kit = screen.getByTestId(testId);
67
+ const text = kit.querySelector(".pb_caption_kit_xs");
68
+ expect(text.textContent).toEqual("Jan 1, 2024 · 12:00a");
69
+ });
70
+
71
+ test("renders Timestamp className with alignment", () => {
72
+ render(
73
+ <Timestamp
74
+ align="center"
75
+ data={{ testid: testId }}
76
+ showDate
77
+ timestamp={new Date(Date.now())}
78
+ />
79
+ );
80
+
81
+ const kit = screen.getByTestId(testId);
82
+ expect(kit).toHaveClass("pb_timestamp_kit_center_variant");
83
+ });
84
+
85
+ test("renders Timestamp timezone", () => {
86
+ render(
87
+ <Timestamp
88
+ align="left"
89
+ data={{ testid: testId }}
90
+ showDate={false}
91
+ showTimezone
92
+ timestamp={new Date()}
93
+ timezone="America/New_York"
94
+ />
95
+ );
96
+ const kit = screen.getByTestId(testId);
97
+ const text = kit.querySelector(".pb_caption_kit_xs");
98
+ expect(text.textContent).toEqual("12:00a EST");
99
+ });
100
+
101
+ test("renders Timestamp updated variant with user", () => {
102
+ render(
103
+ <Timestamp
104
+ data={{ testid: testId }}
105
+ showDate={false}
106
+ showUser
107
+ text="Maricris Nonato"
108
+ timestamp={new Date()}
109
+ variant="updated"
110
+ />
111
+ );
112
+ const kit = screen.getByTestId(testId);
113
+ const text = kit.querySelector(".pb_caption_kit_xs");
114
+ expect(text.textContent).toEqual(
115
+ "Last updated by Maricris Nonato on Jan 1 at 12:00a"
116
+ );
117
+ });
118
+
119
+ test("renders Timestamp updated variant without user", () => {
120
+ render(
121
+ <Timestamp
122
+ data={{ testid: testId }}
123
+ showDate={false}
124
+ timestamp={new Date()}
125
+ variant="updated"
126
+ />
127
+ );
128
+ const kit = screen.getByTestId(testId);
129
+ const text = kit.querySelector(".pb_caption_kit_xs");
130
+ expect(text.textContent).toEqual("Last updated on Jan 1 at 12:00a");
131
+ });
132
+
133
+ test("renders Timestamp elapsed variant with user", () => {
134
+ render(
135
+ <Timestamp
136
+ data={{ testid: testId }}
137
+ showUser
138
+ text="Maricris Nonato"
139
+ timestamp={new Date()}
140
+ variant="elapsed"
141
+ />
142
+ );
143
+ const kit = screen.getByTestId(testId);
144
+ const text = kit.querySelector(".pb_caption_kit_xs");
145
+ expect(text.textContent).toEqual(
146
+ "Last updated by Maricris Nonato a few seconds ago"
147
+ );
148
+ });
149
+
150
+ test("renders Timestamp elapsed variant without user and without updated text", () => {
151
+ render(
152
+ <Timestamp
153
+ data={{ testid: testId }}
154
+ hideUpdated
155
+ showUser={false}
156
+ timestamp={new Date()}
157
+ variant="elapsed"
158
+ />
159
+ );
160
+ const kit = screen.getByTestId(testId);
161
+ const text = kit.querySelector(".pb_caption_kit_xs");
162
+ expect(text.textContent).toEqual(" a few seconds ago");
163
+ });
164
+ });
@@ -1,5 +1,3 @@
1
- /* @flow*/
2
-
3
1
  import React, { useRef, useState } from "react"
4
2
  import classnames from "classnames"
5
3
  import {
@@ -41,8 +39,6 @@ const Tooltip = (props: TooltipProps) => {
41
39
  ...rest
42
40
  } = props
43
41
 
44
- console.log(rest)
45
-
46
42
  const dataProps: { [key: string]: any } = buildDataProps(data)
47
43
  const ariaProps: { [key: string]: any } = buildAriaProps(aria)
48
44
 
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { cleanup, render, screen, fireEvent } from "../utilities/test-utils";
2
+ import { cleanup, render, screen, fireEvent, waitFor } from "../utilities/test-utils";
3
3
  import { Button, Tooltip } from "..";
4
4
 
5
5
  function TooltipTest() {
@@ -30,21 +30,24 @@ test("renders the component", () => {
30
30
  cleanup();
31
31
  });
32
32
 
33
- test("opens on mouseenter", () => {
33
+ test("opens on mouseenter", async () => {
34
34
  render(<TooltipTest />);
35
35
 
36
36
  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
37
- expect(screen.queryByRole("tooltip")).toBeInTheDocument();
38
-
39
- cleanup();
37
+ await waitFor(() => {
38
+ expect(screen.queryByRole("tooltip")).toBeInTheDocument();
39
+ cleanup();
40
+ })
40
41
  });
41
42
 
42
- test("closes on mouseleave", () => {
43
+ test("closes on mouseleave", async () => {
43
44
  render(<TooltipTest />);
44
45
 
45
46
  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
46
47
  fireEvent.mouseLeave(screen.getByRole("tooltip_trigger"));
47
- expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
48
48
 
49
- cleanup();
49
+ await waitFor(() => {
50
+ expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
51
+ cleanup();
52
+ })
50
53
  });
@@ -1,11 +1,11 @@
1
- @import './utilities/flex_direction';
2
- @import './utilities/justify_content';
3
- @import './utilities/flex_wrap';
4
- @import './utilities/justify_self';
5
- @import './utilities/align_items';
6
- @import './utilities/align_content';
7
- @import './utilities/align_self';
8
- @import './utilities/flex';
9
- @import './utilities/flex_grow';
10
- @import './utilities/flex_shrink';
11
- @import './utilities/order';
1
+ @import './flexbox_global_props/flex_direction';
2
+ @import './flexbox_global_props/justify_content';
3
+ @import './flexbox_global_props/flex_wrap';
4
+ @import './flexbox_global_props/justify_self';
5
+ @import './flexbox_global_props/align_items';
6
+ @import './flexbox_global_props/align_content';
7
+ @import './flexbox_global_props/align_self';
8
+ @import './flexbox_global_props/flex';
9
+ @import './flexbox_global_props/flex_grow';
10
+ @import './flexbox_global_props/flex_shrink';
11
+ @import './flexbox_global_props/order';
@@ -47,5 +47,5 @@ export const buildDataProps = (data: {[key: string]: any}) => buildPrefixedProps
47
47
  * @param {Object} rules a 'classnames' compliant rules object, used to derive the root className.
48
48
  * @returns {String} the derived root className value.
49
49
  */
50
- export const buildCss = (...rules: (string | { [x: string]: string; })[]): string => classnames(rules).replace(/\s/g, '_')
50
+ export const buildCss = (...rules: (string | { [x: string]: string | boolean; })[]): string => classnames(rules).replace(/\s/g, '_')
51
51
 
@@ -37,9 +37,8 @@ export const renderKit = (Kit, props = {}, newProps = {}) => {
37
37
 
38
38
  export const ensureAccessible = async (Kit, props = {}, newProps = {}) => {
39
39
  const kitProps = { ...props, ...newProps }
40
- const render = () => <Kit {...kitProps} />
41
- const html = render()
42
- expect(await axe(html)).toHaveNoViolations()
40
+ render(<Kit {...kitProps} />)
41
+ expect(await axe(screen.getByTestId(kitProps.data.testid))).toHaveNoViolations()
43
42
  }
44
43
 
45
44
  export const appendAlert = (message) => {
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "11.4.0.pre.alpha.rubytheme1"
5
- VERSION = "11.4.0.pre.alpha.rubytheme2"
4
+ PREVIOUS_VERSION = "11.5.0"
5
+ VERSION = "11.5.0.pre.alpha-rubocop"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 11.4.0.pre.alpha.rubytheme2
4
+ version: 11.5.0.pre.alpha.pre.rubocop
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2022-09-09 00:00:00.000000000 Z
12
+ date: 2022-09-15 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -689,6 +689,11 @@ files:
689
689
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md
690
690
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx
691
691
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md
692
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb
693
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.jsx
694
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
695
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb
696
+ - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx
692
697
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
693
698
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
694
699
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb
@@ -713,10 +718,11 @@ files:
713
718
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
714
719
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss
715
720
  - app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss
716
- - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx
717
721
  - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
722
+ - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx
718
723
  - app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb
719
724
  - app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb
725
+ - app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js
720
726
  - app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.html.erb
721
727
  - app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx
722
728
  - app/pb_kits/playbook/pb_date_range_inline/docs/_description.md
@@ -773,10 +779,11 @@ files:
773
779
  - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx
774
780
  - app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml
775
781
  - app/pb_kits/playbook/pb_date_time_stacked/docs/index.js
776
- - app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx
777
782
  - app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.scss
783
+ - app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx
778
784
  - app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb
779
785
  - app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.rb
786
+ - app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js
780
787
  - app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.html.erb
781
788
  - app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx
782
789
  - app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.md
@@ -829,8 +836,8 @@ files:
829
836
  - app/pb_kits/playbook/pb_docs/kit_example.rb
830
837
  - app/pb_kits/playbook/pb_enhanced_element/element_observer.js
831
838
  - app/pb_kits/playbook/pb_enhanced_element/index.js
832
- - app/pb_kits/playbook/pb_file_upload/_file_upload.jsx
833
839
  - app/pb_kits/playbook/pb_file_upload/_file_upload.scss
840
+ - app/pb_kits/playbook/pb_file_upload/_file_upload.tsx
834
841
  - app/pb_kits/playbook/pb_file_upload/docs/_description.md
835
842
  - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx
836
843
  - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx
@@ -941,8 +948,8 @@ files:
941
948
  - app/pb_kits/playbook/pb_form/docs/example.yml
942
949
  - app/pb_kits/playbook/pb_form/form.rb
943
950
  - app/pb_kits/playbook/pb_form/pb_form_validation.js
944
- - app/pb_kits/playbook/pb_form_group/_form_group.jsx
945
951
  - app/pb_kits/playbook/pb_form_group/_form_group.scss
952
+ - app/pb_kits/playbook/pb_form_group/_form_group.tsx
946
953
  - app/pb_kits/playbook/pb_form_group/docs/_form_group_button.html.erb
947
954
  - app/pb_kits/playbook/pb_form_group/docs/_form_group_button.jsx
948
955
  - app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.html.erb
@@ -964,6 +971,7 @@ files:
964
971
  - app/pb_kits/playbook/pb_form_group/docs/index.js
965
972
  - app/pb_kits/playbook/pb_form_group/form_group.html.erb
966
973
  - app/pb_kits/playbook/pb_form_group/form_group.rb
974
+ - app/pb_kits/playbook/pb_form_group/form_group.test.js
967
975
  - app/pb_kits/playbook/pb_form_pill/_form_pill.scss
968
976
  - app/pb_kits/playbook/pb_form_pill/_form_pill.tsx
969
977
  - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb
@@ -1167,8 +1175,8 @@ files:
1167
1175
  - app/pb_kits/playbook/pb_label_value/docs/index.js
1168
1176
  - app/pb_kits/playbook/pb_label_value/label_value.html.erb
1169
1177
  - app/pb_kits/playbook/pb_label_value/label_value.rb
1170
- - app/pb_kits/playbook/pb_layout/_layout.jsx
1171
1178
  - app/pb_kits/playbook/pb_layout/_layout.scss
1179
+ - app/pb_kits/playbook/pb_layout/_layout.tsx
1172
1180
  - app/pb_kits/playbook/pb_layout/_layout_mixin.scss
1173
1181
  - app/pb_kits/playbook/pb_layout/body.html.erb
1174
1182
  - app/pb_kits/playbook/pb_layout/body.rb
@@ -1203,6 +1211,7 @@ files:
1203
1211
  - app/pb_kits/playbook/pb_layout/item.rb
1204
1212
  - app/pb_kits/playbook/pb_layout/layout.html.erb
1205
1213
  - app/pb_kits/playbook/pb_layout/layout.rb
1214
+ - app/pb_kits/playbook/pb_layout/layout.test.js
1206
1215
  - app/pb_kits/playbook/pb_layout/sidebar.html.erb
1207
1216
  - app/pb_kits/playbook/pb_layout/sidebar.rb
1208
1217
  - app/pb_kits/playbook/pb_legend/_legend.jsx
@@ -1941,6 +1950,7 @@ files:
1941
1950
  - app/pb_kits/playbook/pb_timestamp/docs/index.js
1942
1951
  - app/pb_kits/playbook/pb_timestamp/timestamp.html.erb
1943
1952
  - app/pb_kits/playbook/pb_timestamp/timestamp.rb
1953
+ - app/pb_kits/playbook/pb_timestamp/timestamp.test.js
1944
1954
  - app/pb_kits/playbook/pb_title/_title.scss
1945
1955
  - app/pb_kits/playbook/pb_title/_title.tsx
1946
1956
  - app/pb_kits/playbook/pb_title/_title_mixin.scss
@@ -2162,29 +2172,29 @@ files:
2162
2172
  - app/pb_kits/playbook/tokens/exports/_spacing.scss
2163
2173
  - app/pb_kits/playbook/tokens/exports/_typography.scss
2164
2174
  - app/pb_kits/playbook/tokens/index.scss
2165
- - app/pb_kits/playbook/utilities/_align_content.scss
2166
- - app/pb_kits/playbook/utilities/_align_items.scss
2167
- - app/pb_kits/playbook/utilities/_align_self.scss
2168
2175
  - app/pb_kits/playbook/utilities/_background_colors.scss
2169
2176
  - app/pb_kits/playbook/utilities/_colors.scss
2170
2177
  - app/pb_kits/playbook/utilities/_cursor.scss
2171
2178
  - app/pb_kits/playbook/utilities/_display.scss
2172
- - app/pb_kits/playbook/utilities/_flex.scss
2173
- - app/pb_kits/playbook/utilities/_flex_direction.scss
2174
- - app/pb_kits/playbook/utilities/_flex_grow.scss
2175
- - app/pb_kits/playbook/utilities/_flex_shrink.scss
2176
- - app/pb_kits/playbook/utilities/_flex_wrap.scss
2177
2179
  - app/pb_kits/playbook/utilities/_flexbox.scss
2178
- - app/pb_kits/playbook/utilities/_justify_content.scss
2179
- - app/pb_kits/playbook/utilities/_justify_self.scss
2180
2180
  - app/pb_kits/playbook/utilities/_line_height.scss
2181
2181
  - app/pb_kits/playbook/utilities/_max_width.scss
2182
2182
  - app/pb_kits/playbook/utilities/_mixins.scss
2183
2183
  - app/pb_kits/playbook/utilities/_number_spacing.scss
2184
- - app/pb_kits/playbook/utilities/_order.scss
2185
2184
  - app/pb_kits/playbook/utilities/_positioning.scss
2186
2185
  - app/pb_kits/playbook/utilities/_shadow.scss
2187
2186
  - app/pb_kits/playbook/utilities/_spacing.scss
2187
+ - app/pb_kits/playbook/utilities/flexbox_global_props/_align_content.scss
2188
+ - app/pb_kits/playbook/utilities/flexbox_global_props/_align_items.scss
2189
+ - app/pb_kits/playbook/utilities/flexbox_global_props/_align_self.scss
2190
+ - app/pb_kits/playbook/utilities/flexbox_global_props/_flex.scss
2191
+ - app/pb_kits/playbook/utilities/flexbox_global_props/_flex_direction.scss
2192
+ - app/pb_kits/playbook/utilities/flexbox_global_props/_flex_grow.scss
2193
+ - app/pb_kits/playbook/utilities/flexbox_global_props/_flex_shrink.scss
2194
+ - app/pb_kits/playbook/utilities/flexbox_global_props/_flex_wrap.scss
2195
+ - app/pb_kits/playbook/utilities/flexbox_global_props/_justify_content.scss
2196
+ - app/pb_kits/playbook/utilities/flexbox_global_props/_justify_self.scss
2197
+ - app/pb_kits/playbook/utilities/flexbox_global_props/_order.scss
2188
2198
  - app/pb_kits/playbook/utilities/globalProps.ts
2189
2199
  - app/pb_kits/playbook/utilities/props.ts
2190
2200
  - app/pb_kits/playbook/utilities/test-utils.js
@@ -2278,7 +2288,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
2278
2288
  - !ruby/object:Gem::Version
2279
2289
  version: 1.3.1
2280
2290
  requirements: []
2281
- rubygems_version: 3.3.21
2291
+ rubygems_version: 3.3.7
2282
2292
  signing_key:
2283
2293
  specification_version: 4
2284
2294
  summary: Playbook Design System
@@ -1,155 +0,0 @@
1
- /* @flow */
2
-
3
- import React from 'react'
4
- import classnames from 'classnames'
5
-
6
- import { globalProps } from '../utilities/globalProps'
7
- import { buildCss } from '../utilities/props'
8
- import DateTime from '../pb_kit/dateTime'
9
-
10
- import Body from '../pb_body/_body'
11
- import Caption from '../pb_caption/_caption'
12
- import Icon from '../pb_icon/_icon'
13
-
14
- type DateRangeInlineProps = {
15
- className?: string,
16
- id?: string,
17
- data?: string,
18
- align?: "left" | "center" | "vertical",
19
- size?: "sm" | "xs",
20
- dark?: boolean,
21
- icon?: boolean,
22
- startDate?: date,
23
- endDate?: date
24
- }
25
-
26
- const dateTimestamp = (dateValue, includeYear) => {
27
- const date = new DateTime({ value: dateValue })
28
- if (includeYear) {
29
- return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`
30
- } else {
31
- return `${date.toMonth()} ${date.toDay()}`
32
- }
33
- }
34
-
35
- const dateTimeIso = (dateValue) => {
36
- const date = new DateTime({ value: dateValue })
37
- return date.toIso()
38
- }
39
-
40
- const DateRangeInline = (props: DateRangeInlineProps) => {
41
- const {
42
- icon = false,
43
- dark = false,
44
- size = 'sm',
45
- align = 'left',
46
- startDate,
47
- endDate,
48
- className,
49
- } = props
50
-
51
- const iconContent = () => {
52
- return (
53
- <If condition={icon}>
54
- <Body
55
- color="light"
56
- key={Math.random()}
57
- tag="span"
58
- >
59
- <Icon
60
- className="pb_date_range_inline_icon"
61
- dark={dark}
62
- fixedWidth
63
- icon="calendar-alt"
64
- size={size}
65
- tag="span"
66
- />
67
- </Body>
68
- </If>
69
- )
70
- }
71
-
72
- const dateInCurrentYear = () => {
73
- const currentDate = new Date()
74
- return startDate.getFullYear() == endDate.getFullYear() && startDate.getFullYear() == currentDate.getFullYear()
75
- }
76
-
77
- const dateRangeClasses = buildCss('pb_date_range_inline_kit', align)
78
-
79
- const renderTime = (date) => {
80
- return (
81
- <time dateTime={dateTimeIso(date)}>
82
- <Choose>
83
- <When condition={dateInCurrentYear()}>
84
- {` ${dateTimestamp(date, false)} `}
85
- </When>
86
- <Otherwise>
87
- {` ${dateTimestamp(date, true)} `}
88
- </Otherwise>
89
- </Choose>
90
- </time>
91
- )
92
- }
93
-
94
- return (
95
- <div className={classnames(dateRangeClasses, globalProps(props), className)}>
96
- <div className="pb_date_range_inline_wrapper">
97
- <If condition={size == 'xs'}>
98
- {iconContent()}
99
- <Caption
100
- dark={dark}
101
- tag="span"
102
- >
103
- {renderTime(startDate)}
104
- </Caption>
105
- <Caption
106
- dark={dark}
107
- tag="span"
108
- >
109
- <Icon
110
- className="pb_date_range_inline_arrow"
111
- fixedWidth
112
- icon="long-arrow-right"
113
- />
114
- </Caption>
115
- <Caption
116
- dark={dark}
117
- tag="span"
118
- >
119
- {renderTime(endDate)}
120
- </Caption>
121
- </If>
122
-
123
- <If condition={size == 'sm'}>
124
- {iconContent()}
125
- <Body
126
- dark={dark}
127
- tag="span"
128
- >
129
- {renderTime(startDate)}
130
- </Body>
131
- <Body
132
- color="light"
133
- dark={dark}
134
- tag="span"
135
- >
136
- <Icon
137
- className="pb_date_range_inline_arrow"
138
- dark={dark}
139
- fixedWidth
140
- icon="long-arrow-right"
141
- />
142
- </Body>
143
- <Body
144
- dark={dark}
145
- tag="span"
146
- >
147
- {renderTime(endDate)}
148
- </Body>
149
- </If>
150
- </div>
151
- </div>
152
- )
153
- }
154
-
155
- export default DateRangeInline