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.
Files changed (84) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +24 -11
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +7 -7
  4. data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +7 -2
  5. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +67 -13
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +2 -2
  7. data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.html.erb +29 -0
  8. data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md +5 -0
  9. data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb +18 -0
  10. data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.md +5 -0
  11. data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
  12. data/app/pb_kits/playbook/pb_button/index.js +99 -0
  13. data/app/pb_kits/playbook/pb_contact/_contact.tsx +5 -0
  14. data/app/pb_kits/playbook/pb_contact/contact.rb +4 -0
  15. data/app/pb_kits/playbook/pb_contact/contact.test.js +21 -1
  16. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb +16 -1
  17. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +15 -0
  18. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.md +5 -0
  19. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb +6 -0
  20. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +6 -0
  21. data/app/pb_kits/playbook/pb_nav/_nav.scss +27 -0
  22. data/app/pb_kits/playbook/pb_nav/_nav.test.js +16 -0
  23. data/app/pb_kits/playbook/pb_nav/_nav.tsx +5 -0
  24. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.html.erb +6 -0
  25. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.jsx +39 -0
  26. data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.md +1 -0
  27. data/app/pb_kits/playbook/pb_nav/docs/example.yml +2 -0
  28. data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
  29. data/app/pb_kits/playbook/pb_nav/nav.rb +6 -1
  30. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +13 -5
  31. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb +23 -0
  32. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx +45 -7
  33. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +4 -1
  34. data/app/pb_kits/playbook/pb_section_separator/section_separator.test.js +165 -0
  35. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +24 -8
  36. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +0 -10
  37. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +0 -9
  38. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md +1 -0
  39. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +3 -17
  40. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +0 -15
  41. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.md +1 -0
  42. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +0 -2
  43. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +0 -2
  44. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.md +5 -0
  45. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.html.erb +12 -0
  46. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.jsx +25 -0
  47. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md +1 -0
  48. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.html.erb +4 -0
  49. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.jsx +17 -0
  50. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.md +1 -0
  51. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.html.erb +18 -0
  52. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.jsx +44 -0
  53. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.md +1 -0
  54. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +0 -14
  55. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +0 -14
  56. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md +1 -0
  57. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb +0 -4
  58. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +0 -4
  59. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +0 -1
  60. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md +5 -0
  61. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb +16 -0
  62. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx +30 -0
  63. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md +1 -0
  64. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb +16 -0
  65. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx +30 -0
  66. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md +1 -0
  67. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb +26 -0
  68. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx +41 -0
  69. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md +1 -0
  70. data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +18 -6
  71. data/app/pb_kits/playbook/pb_timestamp/docs/index.js +6 -0
  72. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +29 -7
  73. data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +69 -4
  74. data/dist/chunks/{_line_graph-DeH7NK-i.js → _line_graph-C9stNsP3.js} +1 -1
  75. data/dist/chunks/{_typeahead-CCGp0OQe.js → _typeahead-D3MtsWXG.js} +1 -1
  76. data/dist/chunks/{_weekday_stacked-BHLwECdV.js → _weekday_stacked-BMwekyel.js} +3 -3
  77. data/dist/chunks/vendor.js +1 -1
  78. data/dist/playbook-doc.js +2 -2
  79. data/dist/playbook-rails-react-bindings.js +1 -1
  80. data/dist/playbook-rails.js +1 -1
  81. data/dist/playbook.css +1 -1
  82. data/lib/playbook/version.rb +1 -1
  83. metadata +38 -6
  84. data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md +0 -1
@@ -33,6 +33,12 @@ const ContactDefault = (props) => {
33
33
  contactValue="1234"
34
34
  {...props}
35
35
  />
36
+ <Contact
37
+ contactDetail="International"
38
+ contactType="international"
39
+ contactValue="+44 7700 900461"
40
+ {...props}
41
+ />
36
42
  </div>
37
43
  )
38
44
  }
@@ -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
- display: none;
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 children = (
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
- <SectionSeparator
24
- {...props}
25
- lineStyle='dashed'
26
- >
27
- {children}
28
- </SectionSeparator>
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
- <%= pb_rails("flex", props: { orientation: "column"}) do %>
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
- let fullDisplay = `${DateTime.toMonth(timestamp, timezone)} ${DateTime.toDay(timestamp, timezone)}`
75
- if (DateTime.toYear(timestamp, timezone).toString() !== currentYear) {
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
- return `Last updated ${userDisplay} on ${dateDisplay} at ${timeDisplay}`
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
- return showDate ? timestamp ? fullDateDisplay() : text : fullTimeDisplay()
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
  }) %>