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

Sign up to get free protection for your applications and to get access to all the features.
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