playbook_ui 15.0.0.pre.alpha.removewebpacker10589 → 15.0.0.pre.alpha.stimulusbutton10763
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_advanced_table/Components/RegularTableView.tsx +24 -11
- data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +7 -7
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +7 -2
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +67 -13
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +2 -2
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.html.erb +29 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md +5 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb +18 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.md +5 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_button/index.js +99 -0
- data/app/pb_kits/playbook/pb_contact/_contact.tsx +5 -0
- data/app/pb_kits/playbook/pb_contact/contact.rb +4 -0
- data/app/pb_kits/playbook/pb_contact/contact.test.js +21 -1
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb +16 -1
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +15 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_default.md +5 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb +6 -0
- data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +6 -0
- data/app/pb_kits/playbook/pb_nav/_nav.scss +27 -0
- data/app/pb_kits/playbook/pb_nav/_nav.test.js +16 -0
- data/app/pb_kits/playbook/pb_nav/_nav.tsx +5 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.jsx +39 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_nav/nav.rb +6 -1
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +13 -5
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb +23 -0
- data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx +45 -7
- data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +4 -1
- data/app/pb_kits/playbook/pb_section_separator/section_separator.test.js +165 -0
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +24 -8
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +0 -10
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +0 -9
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +3 -17
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +0 -15
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +0 -2
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +0 -2
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.md +5 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.html.erb +12 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.jsx +25 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.html.erb +4 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.jsx +17 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.html.erb +18 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.jsx +44 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +0 -14
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +0 -14
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb +0 -4
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +0 -4
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +0 -1
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md +5 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb +16 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx +30 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb +16 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx +30 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb +26 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx +41 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md +1 -0
- data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +18 -6
- data/app/pb_kits/playbook/pb_timestamp/docs/index.js +6 -0
- data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +29 -7
- data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +69 -4
- data/dist/chunks/{_line_graph-DeH7NK-i.js → _line_graph-C9stNsP3.js} +1 -1
- data/dist/chunks/{_typeahead-CCGp0OQe.js → _typeahead-D3MtsWXG.js} +1 -1
- data/dist/chunks/{_weekday_stacked-BHLwECdV.js → _weekday_stacked-BMwekyel.js} +3 -3
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +38 -6
- data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md +0 -1
@@ -48,3 +48,30 @@
|
|
48
48
|
&:hover { cursor: pointer; }
|
49
49
|
}
|
50
50
|
}
|
51
|
+
|
52
|
+
.pb_nav_extended_underline {
|
53
|
+
position: relative;
|
54
|
+
|
55
|
+
// Add full-width border using pseudo-element so as not to break the active item border
|
56
|
+
&::after {
|
57
|
+
content: '';
|
58
|
+
position: absolute;
|
59
|
+
bottom: 0;
|
60
|
+
left: 0;
|
61
|
+
right: 0;
|
62
|
+
height: 3px;
|
63
|
+
background-color: $border_light;
|
64
|
+
z-index: 1;
|
65
|
+
}
|
66
|
+
|
67
|
+
.pb_nav_list_kit_item_active.pb_nav_list_item_link {
|
68
|
+
position: relative;
|
69
|
+
z-index: 2;
|
70
|
+
}
|
71
|
+
|
72
|
+
&.dark {
|
73
|
+
&::after {
|
74
|
+
background-color: rgba($white, $opacity_3);
|
75
|
+
}
|
76
|
+
}
|
77
|
+
}
|
@@ -117,3 +117,19 @@ test('should change variant', () => {
|
|
117
117
|
const kit = screen.getByTestId(navTestId)
|
118
118
|
expect(kit).toHaveClass('pb_nav_list_subtle_vertical_highlight')
|
119
119
|
})
|
120
|
+
|
121
|
+
test('extendedUnderline should work as expected', () => {
|
122
|
+
render(
|
123
|
+
<NavDefault extendedUnderline
|
124
|
+
orientation="horizontal"
|
125
|
+
/>
|
126
|
+
)
|
127
|
+
const kit = screen.getByTestId(navTestId)
|
128
|
+
expect(kit).toHaveClass('pb_nav_extended_underline')
|
129
|
+
})
|
130
|
+
|
131
|
+
test('extendedUnderline should not be applied when orientation is vertical', () => {
|
132
|
+
render(<NavDefault extendedUnderline />)
|
133
|
+
const kit = screen.getByTestId(navTestId)
|
134
|
+
expect(kit).not.toHaveClass('pb_nav_extended_underline')
|
135
|
+
})
|
@@ -14,6 +14,7 @@ type NavProps = {
|
|
14
14
|
className?: string | string[],
|
15
15
|
data?: Record<string, unknown>,
|
16
16
|
dark?: boolean,
|
17
|
+
extendedUnderline?: boolean,
|
17
18
|
highlight?: boolean,
|
18
19
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
19
20
|
id?: string,
|
@@ -33,6 +34,7 @@ const Nav = (props: NavProps): React.ReactElement => {
|
|
33
34
|
className,
|
34
35
|
data = {},
|
35
36
|
dark = false,
|
37
|
+
extendedUnderline = false,
|
36
38
|
highlight = true,
|
37
39
|
htmlOptions = {},
|
38
40
|
id,
|
@@ -52,6 +54,9 @@ const Nav = (props: NavProps): React.ReactElement => {
|
|
52
54
|
highlight: highlight,
|
53
55
|
borderless: borderless,
|
54
56
|
}),
|
57
|
+
// extended underline is only applicable for horizontal normal nav, should not
|
58
|
+
// affect other variants or orientations
|
59
|
+
variant === 'normal' && orientation === 'horizontal' && extendedUnderline && 'pb_nav_extended_underline',
|
55
60
|
globalProps(props),
|
56
61
|
className
|
57
62
|
)
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= pb_rails("nav", props: { orientation: "horizontal", extended_underline: true }) do %>
|
2
|
+
<%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
|
3
|
+
<%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
|
4
|
+
<%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
|
5
|
+
<%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
|
6
|
+
<% end %>
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import Nav from '../_nav'
|
4
|
+
import NavItem from '../_item'
|
5
|
+
|
6
|
+
const HorizontalNavExtendedunderline = (props) => {
|
7
|
+
return (
|
8
|
+
<Nav
|
9
|
+
extendedUnderline
|
10
|
+
link="#"
|
11
|
+
orientation="horizontal"
|
12
|
+
{...props}
|
13
|
+
>
|
14
|
+
<NavItem
|
15
|
+
link="#"
|
16
|
+
text="About"
|
17
|
+
{...props}
|
18
|
+
/>
|
19
|
+
<NavItem
|
20
|
+
active
|
21
|
+
link="#"
|
22
|
+
text="Case Studies"
|
23
|
+
{...props}
|
24
|
+
/>
|
25
|
+
<NavItem
|
26
|
+
link="#"
|
27
|
+
text="Service"
|
28
|
+
{...props}
|
29
|
+
/>
|
30
|
+
<NavItem
|
31
|
+
link="#"
|
32
|
+
text="Contacts"
|
33
|
+
{...props}
|
34
|
+
/>
|
35
|
+
</Nav>
|
36
|
+
)
|
37
|
+
}
|
38
|
+
|
39
|
+
export default HorizontalNavExtendedunderline
|
@@ -0,0 +1 @@
|
|
1
|
+
The optional `extendedUnderline`/`extended_underline` prop can be used with the default `normal` variant of the horizontal orientation of the nav to extend the underline to take up the full width of the container.
|
@@ -17,6 +17,7 @@ examples:
|
|
17
17
|
- horizontal_nav: Horizontal Nav
|
18
18
|
- subtle_horizontal_nav: Subtle Horizontal Nav
|
19
19
|
- bold_horizontal_nav: Bold Horizontal Nav
|
20
|
+
- horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
|
20
21
|
- block_nav: Block
|
21
22
|
- block_no_title_nav: Without Title
|
22
23
|
- new_tab: Open in a New Tab
|
@@ -42,6 +43,7 @@ examples:
|
|
42
43
|
- horizontal_nav: Horizontal Nav
|
43
44
|
- subtle_horizontal_nav: Subtle Horizontal Nav
|
44
45
|
- bold_horizontal_nav: Bold Horizontal Nav
|
46
|
+
- horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
|
45
47
|
- block_nav: Block
|
46
48
|
- block_no_title_nav: Without Title
|
47
49
|
- new_tab: Open in a New Tab
|
@@ -19,4 +19,5 @@ export { default as CollapsibleNavWithAllOptions} from "./_collapsible_nav_with_
|
|
19
19
|
export { default as NavWithFontControl } from "./_nav_with_font_control.jsx"
|
20
20
|
export { default as NavWithSpacingControl } from "./_nav_with_spacing_control.jsx"
|
21
21
|
export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_spacing.jsx"
|
22
|
-
export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
|
22
|
+
export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
|
23
|
+
export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
|
@@ -14,9 +14,10 @@ module Playbook
|
|
14
14
|
prop :highlight, type: Playbook::Props::Boolean, default: true
|
15
15
|
prop :borderless, type: Playbook::Props::Boolean, default: false
|
16
16
|
prop :tabbing, type: Playbook::Props::Boolean, default: false
|
17
|
+
prop :extended_underline, type: Playbook::Props::Boolean, default: false
|
17
18
|
|
18
19
|
def classname
|
19
|
-
generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class)
|
20
|
+
generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class) + extended_underline_class
|
20
21
|
end
|
21
22
|
|
22
23
|
def data
|
@@ -34,6 +35,10 @@ module Playbook
|
|
34
35
|
def borderless_class
|
35
36
|
borderless ? "borderless" : nil
|
36
37
|
end
|
38
|
+
|
39
|
+
def extended_underline_class
|
40
|
+
variant === "normal" && orientation === "horizontal" && extended_underline ? " pb_nav_extended_underline" : ""
|
41
|
+
end
|
37
42
|
end
|
38
43
|
end
|
39
44
|
end
|
@@ -53,10 +53,13 @@ $section_colors_dark: (
|
|
53
53
|
.pb_section_separator_vertical {
|
54
54
|
margin-left: $space_xs;
|
55
55
|
margin-right: $space_xs;
|
56
|
+
flex-direction: column;
|
56
57
|
&::before {
|
57
|
-
|
58
|
+
flex: 1;
|
59
|
+
@include section_separator_vertical(false);
|
58
60
|
}
|
59
61
|
&::after {
|
62
|
+
flex: 1;
|
60
63
|
@include section_separator_vertical(false);
|
61
64
|
}
|
62
65
|
}
|
@@ -87,7 +90,7 @@ $section_colors_dark: (
|
|
87
90
|
background: none;
|
88
91
|
}
|
89
92
|
&.pb_section_separator_vertical {
|
90
|
-
&::after {
|
93
|
+
&::before, &::after {
|
91
94
|
border: 1px dashed $color_value;
|
92
95
|
background: none;
|
93
96
|
}
|
@@ -106,7 +109,7 @@ $section_colors_dark: (
|
|
106
109
|
}
|
107
110
|
|
108
111
|
&.pb_section_separator_vertical {
|
109
|
-
&::after {
|
112
|
+
&::before, &::after {
|
110
113
|
@include section_separator_vertical(true);
|
111
114
|
}
|
112
115
|
}
|
@@ -115,6 +118,11 @@ $section_colors_dark: (
|
|
115
118
|
&::before, &::after {
|
116
119
|
@include section_separator_dashed(true);
|
117
120
|
}
|
121
|
+
&.pb_section_separator_vertical {
|
122
|
+
&::before, &::after {
|
123
|
+
@include section_separator_dashed(true);
|
124
|
+
}
|
125
|
+
}
|
118
126
|
}
|
119
127
|
}
|
120
128
|
|
@@ -126,7 +134,7 @@ $section_colors_dark: (
|
|
126
134
|
}
|
127
135
|
|
128
136
|
&.pb_section_separator_vertical {
|
129
|
-
&::after {
|
137
|
+
&::before, &::after {
|
130
138
|
@include section_separator_vertical(false);
|
131
139
|
background: $color_value;
|
132
140
|
}
|
@@ -138,7 +146,7 @@ $section_colors_dark: (
|
|
138
146
|
background: none;
|
139
147
|
}
|
140
148
|
&.pb_section_separator_vertical {
|
141
|
-
&::after {
|
149
|
+
&::before, &::after {
|
142
150
|
border: 1px dashed $color_value;
|
143
151
|
background: none;
|
144
152
|
}
|
@@ -11,4 +11,27 @@
|
|
11
11
|
padding_right: "xs"
|
12
12
|
}) %>
|
13
13
|
<% end %>
|
14
|
+
<% end %>
|
15
|
+
|
16
|
+
<%= pb_rails("flex", props: { classname: "flex-container", margin_top: "lg", vertical: "stretch" }) do %>
|
17
|
+
<%= pb_rails("body", props: { classname: "flex-item" }) do %>
|
18
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
|
19
|
+
<% end %>
|
20
|
+
<%= pb_rails("section_separator", props: { orientation: "vertical" }) do %>
|
21
|
+
<%= pb_rails("card", props: {
|
22
|
+
border_radius: "rounded",
|
23
|
+
justify_content: "center",
|
24
|
+
padding: "none"
|
25
|
+
}) do %>
|
26
|
+
<%= pb_rails("caption", props: {
|
27
|
+
text: "TODAY",
|
28
|
+
size: "xs",
|
29
|
+
padding_left: "xs",
|
30
|
+
padding_right: "xs"
|
31
|
+
}) %>
|
32
|
+
<% end %>
|
33
|
+
<% end %>
|
34
|
+
<%= pb_rails("body", props: { classname: "flex-item" }) do %>
|
35
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
|
36
|
+
<% end %>
|
14
37
|
<% end %>
|
@@ -2,8 +2,25 @@ import React from 'react'
|
|
2
2
|
import Card from '../../pb_card/_card'
|
3
3
|
import Caption from '../../pb_caption/_caption'
|
4
4
|
import SectionSeparator from '../../pb_section_separator/_section_separator'
|
5
|
+
import Flex from '../../pb_flex/_flex'
|
6
|
+
import FlexItem from '../../pb_flex/_flex_item'
|
5
7
|
|
6
|
-
const
|
8
|
+
const childrenHorizontal = (
|
9
|
+
<Card
|
10
|
+
borderRadius="rounded"
|
11
|
+
justifyContent="center"
|
12
|
+
padding="none"
|
13
|
+
>
|
14
|
+
<Caption
|
15
|
+
paddingLeft="xs"
|
16
|
+
paddingRight="xs"
|
17
|
+
size="xs"
|
18
|
+
text="TODAY"
|
19
|
+
/>
|
20
|
+
</Card>
|
21
|
+
)
|
22
|
+
|
23
|
+
const childrenVertical = (
|
7
24
|
<Card
|
8
25
|
borderRadius="rounded"
|
9
26
|
justifyContent="center"
|
@@ -20,12 +37,33 @@ const children = (
|
|
20
37
|
|
21
38
|
const SectionSeparatorChildren = (props) => {
|
22
39
|
return (
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
40
|
+
<>
|
41
|
+
<SectionSeparator
|
42
|
+
{...props}
|
43
|
+
lineStyle='dashed'
|
44
|
+
>
|
45
|
+
{childrenHorizontal}
|
46
|
+
</SectionSeparator>
|
47
|
+
<Flex
|
48
|
+
inline="flex-container"
|
49
|
+
marginTop="lg"
|
50
|
+
vertical="stretch"
|
51
|
+
>
|
52
|
+
<FlexItem>
|
53
|
+
{'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
|
54
|
+
</FlexItem>
|
55
|
+
<SectionSeparator
|
56
|
+
orientation="vertical"
|
57
|
+
{...props}
|
58
|
+
>
|
59
|
+
{childrenVertical}
|
60
|
+
</SectionSeparator>
|
61
|
+
<FlexItem>
|
62
|
+
{'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'}
|
63
|
+
</FlexItem>
|
64
|
+
</Flex>
|
65
|
+
</>
|
66
|
+
|
29
67
|
)
|
30
68
|
}
|
31
69
|
|
@@ -7,7 +7,10 @@
|
|
7
7
|
<% end %>
|
8
8
|
<% end %>
|
9
9
|
<% if object.orientation === 'vertical' %>
|
10
|
-
|
10
|
+
<% if content %>
|
11
|
+
<%= content %>
|
12
|
+
<% elsif object.text %>
|
13
|
+
<span><%= pb_rails("caption", props: { text: object.text }) %></span>
|
11
14
|
<% end %>
|
12
15
|
<%end%>
|
13
16
|
<% end %>
|
@@ -0,0 +1,165 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { render, screen } from '../utilities/test-utils'
|
3
|
+
|
4
|
+
import SectionSeparator from './_section_separator'
|
5
|
+
|
6
|
+
const testId = "section-separator-kit"
|
7
|
+
|
8
|
+
describe("Section Separator Kit", () => {
|
9
|
+
test("renders basic section separator with default props", () => {
|
10
|
+
render(
|
11
|
+
<SectionSeparator
|
12
|
+
data={{ testid: testId }}
|
13
|
+
/>
|
14
|
+
)
|
15
|
+
|
16
|
+
const kit = screen.getByTestId(testId)
|
17
|
+
expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_default")
|
18
|
+
})
|
19
|
+
|
20
|
+
test("renders with text prop", () => {
|
21
|
+
const text = "Section Title"
|
22
|
+
render(
|
23
|
+
<SectionSeparator
|
24
|
+
data={{ testid: testId }}
|
25
|
+
text={text}
|
26
|
+
/>
|
27
|
+
)
|
28
|
+
|
29
|
+
const kit = screen.getByTestId(testId)
|
30
|
+
const textElement = screen.getByText(text)
|
31
|
+
|
32
|
+
expect(kit).toHaveClass("pb_section_separator_kit")
|
33
|
+
expect(textElement).toBeInTheDocument()
|
34
|
+
})
|
35
|
+
|
36
|
+
test("renders with children", () => {
|
37
|
+
const childText = "Custom Content"
|
38
|
+
render(
|
39
|
+
<SectionSeparator
|
40
|
+
data={{ testid: testId }}
|
41
|
+
>
|
42
|
+
<span>{childText}</span>
|
43
|
+
</SectionSeparator>
|
44
|
+
)
|
45
|
+
|
46
|
+
const kit = screen.getByTestId(testId)
|
47
|
+
const childElement = screen.getByText(childText)
|
48
|
+
|
49
|
+
expect(kit).toHaveClass("pb_section_separator_kit")
|
50
|
+
expect(childElement).toBeInTheDocument()
|
51
|
+
})
|
52
|
+
|
53
|
+
test("renders vertical orientation", () => {
|
54
|
+
render(
|
55
|
+
<SectionSeparator
|
56
|
+
data={{ testid: testId }}
|
57
|
+
orientation="vertical"
|
58
|
+
/>
|
59
|
+
)
|
60
|
+
|
61
|
+
const kit = screen.getByTestId(testId)
|
62
|
+
expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_vertical pb_section_separator_solid pb_section_separator_color_default")
|
63
|
+
})
|
64
|
+
|
65
|
+
test("renders background variant", () => {
|
66
|
+
render(
|
67
|
+
<SectionSeparator
|
68
|
+
data={{ testid: testId }}
|
69
|
+
variant="background"
|
70
|
+
/>
|
71
|
+
)
|
72
|
+
|
73
|
+
const kit = screen.getByTestId(testId)
|
74
|
+
expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_background pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_default")
|
75
|
+
})
|
76
|
+
|
77
|
+
test("renders dashed line style", () => {
|
78
|
+
render(
|
79
|
+
<SectionSeparator
|
80
|
+
data={{ testid: testId }}
|
81
|
+
lineStyle="dashed"
|
82
|
+
/>
|
83
|
+
)
|
84
|
+
|
85
|
+
const kit = screen.getByTestId(testId)
|
86
|
+
expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_dashed pb_section_separator_color_default")
|
87
|
+
})
|
88
|
+
|
89
|
+
test("renders primary color", () => {
|
90
|
+
render(
|
91
|
+
<SectionSeparator
|
92
|
+
color="primary"
|
93
|
+
data={{ testid: testId }}
|
94
|
+
/>
|
95
|
+
)
|
96
|
+
|
97
|
+
const kit = screen.getByTestId(testId)
|
98
|
+
expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_primary")
|
99
|
+
})
|
100
|
+
|
101
|
+
test("renders dark mode", () => {
|
102
|
+
render(
|
103
|
+
<SectionSeparator
|
104
|
+
dark
|
105
|
+
data={{ testid: testId }}
|
106
|
+
/>
|
107
|
+
)
|
108
|
+
|
109
|
+
const kit = screen.getByTestId(testId)
|
110
|
+
expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_default")
|
111
|
+
})
|
112
|
+
|
113
|
+
test("renders with custom className", () => {
|
114
|
+
const customClass = "custom-class"
|
115
|
+
render(
|
116
|
+
<SectionSeparator
|
117
|
+
className={customClass}
|
118
|
+
data={{ testid: testId }}
|
119
|
+
/>
|
120
|
+
)
|
121
|
+
|
122
|
+
const kit = screen.getByTestId(testId)
|
123
|
+
expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_horizontal pb_section_separator_solid pb_section_separator_color_default custom-class")
|
124
|
+
})
|
125
|
+
|
126
|
+
test("renders vertical with children", () => {
|
127
|
+
const childText = "Vertical Content"
|
128
|
+
render(
|
129
|
+
<SectionSeparator
|
130
|
+
data={{ testid: testId }}
|
131
|
+
orientation="vertical"
|
132
|
+
>
|
133
|
+
<span>{childText}</span>
|
134
|
+
</SectionSeparator>
|
135
|
+
)
|
136
|
+
|
137
|
+
const kit = screen.getByTestId(testId)
|
138
|
+
const childElement = screen.getByText(childText)
|
139
|
+
|
140
|
+
expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_card pb_section_separator_vertical pb_section_separator_solid pb_section_separator_color_default")
|
141
|
+
expect(childElement).toBeInTheDocument()
|
142
|
+
})
|
143
|
+
|
144
|
+
test("renders all props combined", () => {
|
145
|
+
const text = "Combined Props"
|
146
|
+
render(
|
147
|
+
<SectionSeparator
|
148
|
+
color="primary"
|
149
|
+
dark
|
150
|
+
data={{ testid: testId }}
|
151
|
+
lineStyle="dashed"
|
152
|
+
orientation="vertical"
|
153
|
+
variant="background"
|
154
|
+
>
|
155
|
+
<span>{text}</span>
|
156
|
+
</SectionSeparator>
|
157
|
+
)
|
158
|
+
|
159
|
+
const kit = screen.getByTestId(testId)
|
160
|
+
const childElement = screen.getByText(text)
|
161
|
+
|
162
|
+
expect(kit).toHaveClass("pb_section_separator_kit pb_section_separator_background pb_section_separator_vertical pb_section_separator_dashed pb_section_separator_color_primary")
|
163
|
+
expect(childElement).toBeInTheDocument()
|
164
|
+
})
|
165
|
+
})
|
@@ -18,9 +18,11 @@ type TimestampProps = {
|
|
18
18
|
timezone: string,
|
19
19
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
20
20
|
id?: string,
|
21
|
+
showCurrentYear?: boolean,
|
21
22
|
showDate?: boolean,
|
22
23
|
showUser?: boolean,
|
23
24
|
hideUpdated?: boolean,
|
25
|
+
showTime?: boolean,
|
24
26
|
showTimezone?: boolean,
|
25
27
|
unstyled?: boolean,
|
26
28
|
variant?: "default" | "elapsed" | "updated"
|
@@ -37,9 +39,11 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
|
|
37
39
|
text,
|
38
40
|
timezone,
|
39
41
|
timestamp,
|
42
|
+
showCurrentYear = false,
|
40
43
|
showDate = true,
|
41
44
|
showUser = false,
|
42
45
|
hideUpdated = false,
|
46
|
+
showTime = true,
|
43
47
|
showTimezone = false,
|
44
48
|
unstyled = false,
|
45
49
|
variant = 'default',
|
@@ -55,7 +59,6 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
|
|
55
59
|
)
|
56
60
|
|
57
61
|
const currentYear = new Date().getFullYear().toString()
|
58
|
-
const dateDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
|
59
62
|
const shouldShowUser = showUser == true && text.length > 0
|
60
63
|
const shouldShowTimezone = showTimezone == true && timezone.length > 0
|
61
64
|
const updatedText = hideUpdated ? "" : "Last updated"
|
@@ -70,16 +73,26 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
|
|
70
73
|
return timeDisplay
|
71
74
|
}
|
72
75
|
|
76
|
+
const baseDateDisplay = () => {
|
77
|
+
let display = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
|
78
|
+
if (DateTime.toYear(timestamp, timezone).toString() !== currentYear || showCurrentYear) {
|
79
|
+
display = `${display}, ${DateTime.toYear(timestamp, timezone)}`
|
80
|
+
}
|
81
|
+
return display
|
82
|
+
}
|
83
|
+
|
73
84
|
const fullDateDisplay = () => {
|
74
|
-
|
75
|
-
|
76
|
-
fullDisplay = `${fullDisplay}, ${DateTime.toYear(timestamp, timezone)}`
|
77
|
-
}
|
78
|
-
return `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}`
|
85
|
+
const fullDisplay = baseDateDisplay()
|
86
|
+
return showTime ? `${fullDisplay} ${' \u00b7 '} ${fullTimeDisplay()}` : fullDisplay
|
79
87
|
}
|
80
88
|
|
81
89
|
const formatUpdatedString = () => {
|
82
|
-
|
90
|
+
const finalUpdatedString = []
|
91
|
+
if (shouldShowUser) finalUpdatedString.push(`by ${text}`)
|
92
|
+
if (showDate && !showTime) finalUpdatedString.push(`on ${baseDateDisplay()}`)
|
93
|
+
if (showDate && showTime) finalUpdatedString.push(`on ${baseDateDisplay()} at ${timeDisplay}`)
|
94
|
+
if (showTime && !showDate) finalUpdatedString.push(`at ${timeDisplay}`)
|
95
|
+
return `Last updated ${finalUpdatedString.join(' ')}`
|
83
96
|
}
|
84
97
|
|
85
98
|
const formatElapsedString = () => {
|
@@ -93,7 +106,10 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
|
|
93
106
|
case 'elapsed':
|
94
107
|
return formatElapsedString()
|
95
108
|
default:
|
96
|
-
|
109
|
+
if (showDate && showTime) return timestamp ? fullDateDisplay() : text
|
110
|
+
if (showDate && !showTime) return baseDateDisplay()
|
111
|
+
if (!showDate && showTime) return fullTimeDisplay()
|
112
|
+
return text
|
97
113
|
}
|
98
114
|
}
|
99
115
|
|
@@ -8,7 +8,6 @@
|
|
8
8
|
|
9
9
|
<%= pb_rails("timestamp", props: {
|
10
10
|
timestamp: DateTime.now,
|
11
|
-
show_date: true,
|
12
11
|
align: "left"
|
13
12
|
}) %>
|
14
13
|
|
@@ -16,7 +15,6 @@
|
|
16
15
|
|
17
16
|
<%= pb_rails("timestamp", props: {
|
18
17
|
timestamp: DateTime.now + 4.years,
|
19
|
-
show_date: true,
|
20
18
|
align: "left"
|
21
19
|
}) %>
|
22
20
|
|
@@ -24,7 +22,6 @@
|
|
24
22
|
|
25
23
|
<%= pb_rails("timestamp", props: {
|
26
24
|
timestamp: DateTime.now - 1.year,
|
27
|
-
show_date: true,
|
28
25
|
align: "left"
|
29
26
|
}) %>
|
30
27
|
|
@@ -40,7 +37,6 @@
|
|
40
37
|
|
41
38
|
<%= pb_rails("timestamp", props: {
|
42
39
|
timestamp: DateTime.now,
|
43
|
-
show_date: true,
|
44
40
|
align: "center"
|
45
41
|
}) %>
|
46
42
|
|
@@ -48,7 +44,6 @@
|
|
48
44
|
|
49
45
|
<%= pb_rails("timestamp", props: {
|
50
46
|
timestamp: DateTime.now + 4.years,
|
51
|
-
show_date: true,
|
52
47
|
align: "center"
|
53
48
|
}) %>
|
54
49
|
|
@@ -56,7 +51,6 @@
|
|
56
51
|
|
57
52
|
<%= pb_rails("timestamp", props: {
|
58
53
|
timestamp: DateTime.now - 1.year,
|
59
|
-
show_date: true,
|
60
54
|
align: "center"
|
61
55
|
}) %>
|
62
56
|
|
@@ -64,7 +58,6 @@
|
|
64
58
|
|
65
59
|
<%= pb_rails("timestamp", props: {
|
66
60
|
timestamp: DateTime.now,
|
67
|
-
show_date: false,
|
68
61
|
align: "right"
|
69
62
|
}) %>
|
70
63
|
|
@@ -72,7 +65,6 @@
|
|
72
65
|
|
73
66
|
<%= pb_rails("timestamp", props: {
|
74
67
|
timestamp: DateTime.now,
|
75
|
-
show_date: true,
|
76
68
|
align: "right"
|
77
69
|
}) %>
|
78
70
|
|
@@ -80,7 +72,6 @@
|
|
80
72
|
|
81
73
|
<%= pb_rails("timestamp", props: {
|
82
74
|
timestamp: DateTime.now + 4.years,
|
83
|
-
show_date: true,
|
84
75
|
align: "right"
|
85
76
|
}) %>
|
86
77
|
|
@@ -88,6 +79,5 @@
|
|
88
79
|
|
89
80
|
<%= pb_rails("timestamp", props: {
|
90
81
|
timestamp: DateTime.now - 1.year,
|
91
|
-
show_date: true,
|
92
82
|
align: "right"
|
93
83
|
}) %>
|