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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_button/button.test.js +6 -8
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +13 -1
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +24 -19
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +8 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +25 -3
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb +44 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.jsx +60 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md +9 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb +33 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx +67 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss +4 -4
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +142 -0
- data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js +116 -0
- data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_year_stacked/{_date_year_stacked.jsx → _date_year_stacked.tsx} +6 -6
- data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js +67 -0
- data/app/pb_kits/playbook/pb_file_upload/{_file_upload.jsx → _file_upload.tsx} +6 -10
- data/app/pb_kits/playbook/pb_form_group/{_form_group.jsx → _form_group.tsx} +1 -4
- data/app/pb_kits/playbook/pb_form_group/form_group.test.js +17 -0
- data/app/pb_kits/playbook/pb_layout/{_layout.jsx → _layout.tsx} +13 -19
- data/app/pb_kits/playbook/pb_layout/layout.test.js +98 -0
- data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +23 -15
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +5 -2
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +9 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +10 -0
- data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +4 -1
- data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +164 -0
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +0 -4
- data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +11 -8
- data/app/pb_kits/playbook/utilities/_flexbox.scss +11 -11
- data/app/pb_kits/playbook/utilities/{_align_content.scss → flexbox_global_props/_align_content.scss} +0 -0
- data/app/pb_kits/playbook/utilities/{_align_items.scss → flexbox_global_props/_align_items.scss} +0 -0
- data/app/pb_kits/playbook/utilities/{_align_self.scss → flexbox_global_props/_align_self.scss} +0 -0
- data/app/pb_kits/playbook/utilities/{_flex.scss → flexbox_global_props/_flex.scss} +0 -0
- data/app/pb_kits/playbook/utilities/{_flex_direction.scss → flexbox_global_props/_flex_direction.scss} +0 -0
- data/app/pb_kits/playbook/utilities/{_flex_grow.scss → flexbox_global_props/_flex_grow.scss} +0 -0
- data/app/pb_kits/playbook/utilities/{_flex_shrink.scss → flexbox_global_props/_flex_shrink.scss} +0 -0
- data/app/pb_kits/playbook/utilities/{_flex_wrap.scss → flexbox_global_props/_flex_wrap.scss} +0 -0
- data/app/pb_kits/playbook/utilities/{_justify_content.scss → flexbox_global_props/_justify_content.scss} +0 -0
- data/app/pb_kits/playbook/utilities/{_justify_self.scss → flexbox_global_props/_justify_self.scss} +0 -0
- data/app/pb_kits/playbook/utilities/{_order.scss → flexbox_global_props/_order.scss} +0 -0
- data/app/pb_kits/playbook/utilities/props.ts +1 -1
- data/app/pb_kits/playbook/utilities/test-utils.js +2 -3
- data/lib/playbook/version.rb +2 -2
- metadata +29 -19
- 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
|
-
|
38
|
-
|
39
|
-
|
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
|
-
|
49
|
+
await waitFor(() => {
|
50
|
+
expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
|
51
|
+
cleanup();
|
52
|
+
})
|
50
53
|
});
|
@@ -1,11 +1,11 @@
|
|
1
|
-
@import './
|
2
|
-
@import './
|
3
|
-
@import './
|
4
|
-
@import './
|
5
|
-
@import './
|
6
|
-
@import './
|
7
|
-
@import './
|
8
|
-
@import './
|
9
|
-
@import './
|
10
|
-
@import './
|
11
|
-
@import './
|
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';
|
data/app/pb_kits/playbook/utilities/{_align_content.scss → flexbox_global_props/_align_content.scss}
RENAMED
File without changes
|
data/app/pb_kits/playbook/utilities/{_align_items.scss → flexbox_global_props/_align_items.scss}
RENAMED
File without changes
|
data/app/pb_kits/playbook/utilities/{_align_self.scss → flexbox_global_props/_align_self.scss}
RENAMED
File without changes
|
File without changes
|
File without changes
|
data/app/pb_kits/playbook/utilities/{_flex_grow.scss → flexbox_global_props/_flex_grow.scss}
RENAMED
File without changes
|
data/app/pb_kits/playbook/utilities/{_flex_shrink.scss → flexbox_global_props/_flex_shrink.scss}
RENAMED
File without changes
|
data/app/pb_kits/playbook/utilities/{_flex_wrap.scss → flexbox_global_props/_flex_wrap.scss}
RENAMED
File without changes
|
File without changes
|
data/app/pb_kits/playbook/utilities/{_justify_self.scss → flexbox_global_props/_justify_self.scss}
RENAMED
File without changes
|
File without changes
|
@@ -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
|
-
|
41
|
-
|
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) => {
|
data/lib/playbook/version.rb
CHANGED
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
|
+
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-
|
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.
|
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
|