playbook_ui 15.0.0.pre.alpha.PLAY2316advancedtablerightsidedoubleborder10545 → 15.0.0.pre.alpha.PLAY2316advancedtablerightsidedoubleborder10693

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 (112) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +11 -11
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +7 -7
  5. data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +7 -2
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +16 -6
  7. data/app/pb_kits/playbook/pb_card/_card.scss +12 -4
  8. data/app/pb_kits/playbook/pb_card/_card.tsx +3 -3
  9. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +10 -0
  10. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +3 -0
  11. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +8 -0
  12. data/app/pb_kits/playbook/pb_contact/_contact.tsx +5 -0
  13. data/app/pb_kits/playbook/pb_contact/contact.rb +4 -0
  14. data/app/pb_kits/playbook/pb_contact/contact.test.js +21 -1
  15. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb +16 -1
  16. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +15 -0
  17. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.md +5 -0
  18. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb +6 -0
  19. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +6 -0
  20. data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx +1 -0
  21. data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +2 -1
  22. data/app/pb_kits/playbook/pb_nav/_item.tsx +19 -5
  23. data/app/pb_kits/playbook/pb_nav/item.html.erb +6 -2
  24. data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss +3 -0
  25. data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx +62 -0
  26. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +31 -0
  27. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +81 -0
  28. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +25 -0
  29. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +40 -0
  30. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +5 -0
  31. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +27 -0
  32. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +39 -0
  33. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +5 -0
  34. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +93 -0
  35. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +131 -0
  36. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +14 -0
  37. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +42 -0
  38. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +58 -0
  39. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +24 -0
  40. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +38 -0
  41. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +22 -0
  42. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +33 -0
  43. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +118 -0
  44. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +144 -0
  45. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +60 -0
  46. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +24 -0
  47. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +42 -0
  48. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +38 -0
  49. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +52 -0
  50. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +29 -0
  51. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +11 -0
  52. data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts +88 -0
  53. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb +1 -0
  54. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb +28 -0
  55. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +51 -0
  56. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +13 -5
  57. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb +23 -0
  58. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx +45 -7
  59. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +4 -1
  60. data/app/pb_kits/playbook/pb_section_separator/section_separator.test.js +165 -0
  61. data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +24 -8
  62. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb +0 -10
  63. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +0 -9
  64. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md +1 -0
  65. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +3 -17
  66. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +0 -15
  67. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.md +1 -0
  68. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +0 -2
  69. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +0 -2
  70. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.md +5 -0
  71. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.html.erb +12 -0
  72. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.jsx +25 -0
  73. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md +1 -0
  74. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.html.erb +4 -0
  75. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.jsx +17 -0
  76. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.md +1 -0
  77. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.html.erb +18 -0
  78. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.jsx +44 -0
  79. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.md +1 -0
  80. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb +0 -14
  81. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +0 -14
  82. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md +1 -0
  83. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb +0 -4
  84. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +0 -4
  85. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +0 -1
  86. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md +5 -0
  87. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb +16 -0
  88. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx +30 -0
  89. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md +1 -0
  90. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb +16 -0
  91. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx +30 -0
  92. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md +1 -0
  93. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb +26 -0
  94. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx +41 -0
  95. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md +1 -0
  96. data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +18 -6
  97. data/app/pb_kits/playbook/pb_timestamp/docs/index.js +6 -0
  98. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +29 -7
  99. data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +69 -4
  100. data/dist/chunks/{_line_graph-BBny-YYZ.js → _line_graph-CUfJ7E4h.js} +1 -1
  101. data/dist/chunks/{_typeahead-CeyJ6-GF.js → _typeahead-DCp1lVJx.js} +1 -1
  102. data/dist/chunks/{_weekday_stacked-XMCI3y-W.js → _weekday_stacked-BaC4WzmT.js} +3 -3
  103. data/dist/chunks/vendor.js +1 -1
  104. data/dist/menu.yml +6 -0
  105. data/dist/playbook-doc.js +2 -2
  106. data/dist/playbook-rails-react-bindings.js +1 -1
  107. data/dist/playbook-rails.js +1 -1
  108. data/dist/playbook.css +1 -1
  109. data/lib/playbook/forms/builder/form_field_builder.rb +28 -1
  110. data/lib/playbook/version.rb +1 -1
  111. metadata +62 -6
  112. data/app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4beffa4b591d56b99e2c38befa2305122ae8a8fd7185f5fd7a6160bc9e33d9b7
4
- data.tar.gz: 1922dbd0419fc18e4e7ef25b9b233b01a18cbd23c7cd6701787ed044debd9b47
3
+ metadata.gz: a7e3c1179f610534c2ad5f9cec17110232fa3d91790f76608905f85240d7f892
4
+ data.tar.gz: 6c9e1589b76f435d90b6b930b6ccece44a9e5c9bfe0d8520c862de5dcb4cf2c9
5
5
  SHA512:
6
- metadata.gz: 9a8ebd85a2a592ea647b915fc708fe9c6db08b70cd4241cb5e11a87626e56ed77e429012e08deb9651cf1ad5118d0797775883aff639958eaa527b0135bc5f99
7
- data.tar.gz: 5d680c7c1c86e8a8aa85c4f2d9336505bb5a54a51699e9b6c065ae61cb3e6fd80168d9e99562026ac60ce54b45ee44c9c87953ee72a8b076923ecf5c2a34e7e7
6
+ metadata.gz: 92c21c1cf9ed2e075a1a8128a1b0bfd49ff94486003b3e84ccf683d360e12e43be56980d36ee7bfe673a423612d6b109b30b3eab291843496fc4784d87a52278
7
+ data.tar.gz: 1983a1c99144d8a534d1e4b4d80059a4ce3e5d5b5e53e4cdba3c5b7942842d1715d04a3e33e7ffd4546fd6227b309083f0502530bb436b8f145139977eee5ca9
@@ -1,5 +1,6 @@
1
1
 
2
2
 
3
+
3
4
  @import 'pb_advanced_table/advanced_table';
4
5
  @import 'pb_avatar/avatar';
5
6
  @import 'pb_background/background';
@@ -109,6 +110,7 @@
109
110
  @import 'pb_weekday_stacked/weekday_stacked';
110
111
  @import 'pb_empty_state/empty_state';
111
112
  @import 'pb_pb_bar_graph/pb_bar_graph';
113
+ @import 'pb_pb_circle_chart/pb_circle_chart';
112
114
  @import 'utilities/mixins';
113
115
  @import 'utilities/spacing';
114
116
  @import 'utilities/cursor';
@@ -5,6 +5,7 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
5
5
  import { GenericObject } from "../../types"
6
6
  import { isChrome } from "../Utilities/BrowserCheck"
7
7
  import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
8
+ import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
8
9
 
9
10
  import LoadingInline from "../../pb_loading_inline/_loading_inline"
10
11
  import Checkbox from "../../pb_checkbox/_checkbox"
@@ -67,7 +68,7 @@ const TableCellRenderer = ({
67
68
  const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
68
69
  const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
69
70
  const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
70
-
71
+
71
72
  return (
72
73
  <td
73
74
  align={cellAlignment}
@@ -155,7 +156,7 @@ export const RegularTableView = ({
155
156
  backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
156
157
  color: customRowStyle?.fontColor,
157
158
  position: 'sticky',
158
- top:
159
+ top:
159
160
  row.getIsPinned() === 'top'
160
161
  ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
161
162
  : undefined,
@@ -181,21 +182,20 @@ export const RegularTableView = ({
181
182
  return (
182
183
  <>
183
184
  {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
184
- <PinnedRow key={row.id}
185
- row={row}
185
+ <PinnedRow key={row.id}
186
+ row={row}
186
187
  />
187
188
  ))}
188
189
  {totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
189
- const isExpandable = row.getIsExpanded();
190
190
  const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
191
- const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
192
191
  const numberOfColumns = table.getAllFlatColumns().length;
193
- const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0]?.cellAccessors?.length);
194
- const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
195
- const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
196
192
  const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
197
193
  const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
198
194
 
195
+ // Use functions from RowUtils for consistent cell coloring
196
+ const rowColor = getRowColorClass(row, inlineRowLoading || false);
197
+ const isDataLoading = shouldShowLoadingIndicator(row, inlineRowLoading || false, columnDefinitions[0]?.cellAccessors?.length || 0);
198
+
199
199
  return (
200
200
  <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
201
201
  {isFirstChildofSubrow && subRowHeaders && (
@@ -241,7 +241,7 @@ export const RegularTableView = ({
241
241
 
242
242
  {/* Display LoadingInline if Row Data is querying and there are no children already */}
243
243
  {isDataLoading && (
244
- <tr key={`${row.id}-row`}>
244
+ <tr key={`${row.id}-loading-row`}>
245
245
  <td colSpan={numberOfColumns}
246
246
  style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
247
247
  >
@@ -256,4 +256,4 @@ export const RegularTableView = ({
256
256
  );
257
257
  }
258
258
 
259
- export default RegularTableView;
259
+ export default RegularTableView;
@@ -7,6 +7,7 @@ import { GenericObject } from "../../types"
7
7
 
8
8
  import { isChrome } from "../Utilities/BrowserCheck"
9
9
  import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
10
+ import { getRowColorClass } from "../Utilities/RowUtils"
10
11
 
11
12
  import LoadingInline from "../../pb_loading_inline/_loading_inline"
12
13
  import Checkbox from "../../pb_checkbox/_checkbox"
@@ -45,10 +46,10 @@ export const VirtualizedTableView = ({
45
46
 
46
47
  const columnPinning = table.getState().columnPinning || { left: [] };
47
48
  const sortingState = JSON.stringify(table.getState().sorting || []);
48
-
49
+
49
50
  // Store column widths extracted from header
50
51
  const [columnWidths, setColumnWidths] = useState<{[key: string]: string}>({});
51
-
52
+
52
53
  // Function to get header cell widths
53
54
  const getHeaderCellWidths = () => {
54
55
  const widths: {[key: string]: string} = {};
@@ -136,7 +137,7 @@ export const VirtualizedTableView = ({
136
137
  </tr>
137
138
  );
138
139
  }
139
-
140
+
140
141
  // Establish # of Parent Rows (so that Footer count does not include every single row)
141
142
  const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
142
143
 
@@ -172,10 +173,9 @@ export const VirtualizedTableView = ({
172
173
 
173
174
  if (item.type === 'row') {
174
175
  const row = item.row;
175
- const isExpandable = row.getIsExpanded();
176
- const rowHasNoChildren = row.original?.children && !row.original.children.length;
177
- const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
178
- const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
176
+
177
+ // Use the utility function to get consistent row color
178
+ const rowColor = getRowColorClass(row, inlineRowLoading || false);
179
179
 
180
180
  return (
181
181
  <tr
@@ -10,9 +10,14 @@ export const getRowColorClass = (
10
10
  ): string => {
11
11
  const isExpandable = row.getIsExpanded();
12
12
  const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
13
- const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
14
13
 
15
- return row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
14
+ // Check if row can expand or is currently expanded
15
+ const shouldShowExpandedBackground = isExpandable && (
16
+ (!inlineRowLoading && row.getCanExpand()) ||
17
+ (inlineRowLoading && (rowHasNoChildren || row.getCanExpand()))
18
+ );
19
+
20
+ return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "bg-white";
16
21
  }
17
22
 
18
23
  /**
@@ -249,8 +249,10 @@
249
249
  }
250
250
 
251
251
  .pb_advanced_table_body {
252
- .last-cell {
253
- border-right: 1px solid $border_light !important;
252
+ tr {
253
+ .last-cell:not(:last-of-type) {
254
+ border-right: 1px solid $border_light !important;
255
+ }
254
256
  }
255
257
  tr td:first-child {
256
258
  padding-left: 8px !important;
@@ -701,6 +703,14 @@
701
703
  }
702
704
  }
703
705
  }
706
+
707
+ .pb_advanced_table_header {
708
+ > tr {
709
+ .last-header-cell:last-of-type {
710
+ border-right-width: 0 !important;
711
+ }
712
+ }
713
+ }
704
714
  }
705
715
  }
706
716
 
@@ -975,14 +985,14 @@
975
985
  // Firefox-specific fix for last-header-cell and last-cell vertical borders
976
986
  @-moz-document url-prefix() {
977
987
  .pb_advanced_table_header {
978
- .last-header-cell {
988
+ .last-header-cell:not(:last-child) {
979
989
  border-right: none !important;
980
990
  box-shadow: 1px 0 0 0 $border_light !important;
981
991
  }
982
992
  }
983
993
 
984
994
  .pb_advanced_table_body {
985
- .last-cell {
995
+ .last-cell:not(:last-child) {
986
996
  border-right: none !important;
987
997
  box-shadow: 1px 0 0 0 $border_light !important;
988
998
  }
@@ -991,14 +1001,14 @@
991
1001
  // Dark mode Firefox fixes
992
1002
  &.dark {
993
1003
  .pb_advanced_table_header {
994
- .last-header-cell {
1004
+ .last-header-cell:not(:last-child) {
995
1005
  border-right: none !important;
996
1006
  box-shadow: 1px 0 0 0 $border_dark !important;
997
1007
  }
998
1008
  }
999
1009
 
1000
1010
  .pb_advanced_table_body {
1001
- .last-cell {
1011
+ .last-cell:not(:last-child) {
1002
1012
  border-right: none !important;
1003
1013
  box-shadow: 1px 0 0 0 $border_dark !important;
1004
1014
  }
@@ -20,7 +20,7 @@
20
20
  // Dark mode
21
21
  .pb_card_kit.dark {
22
22
  @include pb_card_dark;
23
-
23
+
24
24
  &.pb_card_kit_selected {
25
25
  @include pb_card_selected_dark;
26
26
  }
@@ -33,7 +33,8 @@
33
33
 
34
34
  // Highlight styles
35
35
  .pb_card_kit_highlight_top,
36
- .pb_card_kit_highlight_side {
36
+ .pb_card_kit_highlight_side,
37
+ .pb_card_kit_highlight_right_side {
37
38
  overflow: hidden;
38
39
  }
39
40
 
@@ -52,13 +53,20 @@
52
53
  }
53
54
  }
54
55
 
55
- // Highlight side variants
56
+ // Highlight side variants
56
57
  @each $color_name, $color_value in $pb_card_highlight_colors {
57
58
  .pb_card_kit_highlight_side.pb_card_kit_highlight_#{$color_name}::before {
58
59
  @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
59
60
  }
60
61
  }
61
62
 
63
+ // Highlight side right variants
64
+ @each $color_name, $color_value in $pb_card_highlight_colors {
65
+ .pb_card_kit_highlight_right_side.pb_card_kit_highlight_#{$color_name}::before {
66
+ @include pb_card_right_highlight($pb_card_highlight_size, 100%, $color_value);
67
+ }
68
+ }
69
+
62
70
  // Card Header
63
71
  .pb_card_header_kit {
64
72
  flex-grow: 0;
@@ -68,7 +76,7 @@
68
76
  padding: $space_sm;
69
77
  border: 0;
70
78
  border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
71
-
79
+
72
80
  // Inherit border radius from parent card
73
81
  .pb_card_kit_border_radius_xs & {
74
82
  border-radius: $border_radius_xs $border_radius_xs 0px 0px;
@@ -26,7 +26,7 @@ type CardPropTypes = {
26
26
  dragHandle?: boolean,
27
27
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
28
28
  highlight?: {
29
- position?: "side" | "top",
29
+ position?: "side" | "right_side" | "top",
30
30
  color?: string,
31
31
  },
32
32
  id?: string,
@@ -56,7 +56,7 @@ const Header = (props: CardHeaderProps) => {
56
56
  const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
57
57
  const headerColorCSS = `pb_card_header_kit_${headerColor}`
58
58
  const headerStripedCSS = headerColorStriped ? `pb_card_header_kit_${headerColor}_striped` : ''
59
-
59
+
60
60
  const headerCSS = classnames(
61
61
  'pb_card_header_kit',
62
62
  headerColorCSS,
@@ -108,7 +108,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
108
108
  const borderRadiusCSS = borderRadius !== 'md' ? `pb_card_kit_border_radius_${borderRadius}` : ''
109
109
  const highlightPositionCSS = highlight.position ? `pb_card_kit_highlight_${highlight.position}` : ''
110
110
  const highlightColorCSS = highlight.color ? `pb_card_kit_highlight_${highlight.color}` : ''
111
-
111
+
112
112
  const cardCss = classnames(
113
113
  'pb_card_kit', // Base class
114
114
  selectedCSS,
@@ -87,6 +87,16 @@ $pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $addition
87
87
  background: $background;
88
88
  }
89
89
 
90
+ @mixin pb_card_right_highlight($width, $height, $background){
91
+ content: "";
92
+ position: absolute;
93
+ top: 0;
94
+ right: 0;
95
+ width: $width;
96
+ height: $height;
97
+ background: $background;
98
+ }
99
+
90
100
  @mixin pb_card_header_color($header_color) {
91
101
  background: $header_color;
92
102
  }
@@ -4,6 +4,9 @@
4
4
  <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
5
5
  Top Position & Warning Color
6
6
  <% end %>
7
+ <%= pb_rails("card", props: {highlight: {position: "right_side", color:"product_5_highlight"}, margin_bottom: "sm"}) do %>
8
+ Right Side Position & Product 5 Highlight Color
9
+ <% end %>
7
10
  <%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
8
11
  Side Position & Category 2 Color
9
12
  <% end %>
@@ -21,6 +21,14 @@ const CardHighlight = (props) => {
21
21
  {'Top Position & Warning Color'}
22
22
  </Card>
23
23
 
24
+ <Card
25
+ {...props}
26
+ highlight={{ position: 'right_side', color: 'product_5_highlight' }}
27
+ marginBottom="sm"
28
+ >
29
+ {'Right Side Position & Product 5 Highlight Color'}
30
+ </Card>
31
+
24
32
  <Card
25
33
  {...props}
26
34
  highlight={{ position: 'side', color: 'category_2' }}
@@ -17,6 +17,7 @@ const contactTypeMap: { [key: string]: string } = {
17
17
  'work': 'phone-office',
18
18
  'work-cell': 'phone-laptop',
19
19
  'wrong-phone': 'phone-slash',
20
+ 'international': 'globe',
20
21
  }
21
22
 
22
23
  const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string]: SVGElement }
@@ -24,6 +25,10 @@ const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string
24
25
  const formatContact = (contactString: string, contactType: string) => {
25
26
  if (contactType === 'email') return contactString
26
27
 
28
+ // International phone numbers are unformatted
29
+ if (contactType === 'international') return contactString
30
+
31
+ // Format US numbers
27
32
  const cleaned = contactString.replace(/\D/g, '')
28
33
  const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
29
34
 
@@ -29,6 +29,8 @@ module Playbook
29
29
  "phone-slash"
30
30
  when "extension"
31
31
  "phone-plus"
32
+ when "international"
33
+ "globe"
32
34
  else # "unknown" || "other"
33
35
  "phone"
34
36
  end
@@ -39,6 +41,8 @@ module Playbook
39
41
  contact_value
40
42
  elsif contact_type == "extension" && contact_value.match(/^\d{4}$/)
41
43
  contact_value
44
+ elsif contact_type == "international"
45
+ contact_value
42
46
  else
43
47
  number_to_phone(formatted_value, area_code: true)
44
48
  end
@@ -66,6 +66,12 @@ test('returns correct icon', () => {
66
66
  contactValue="1234"
67
67
  data={{ testid: 'test-extension' }}
68
68
  />
69
+ <Contact
70
+ contactDetail="International"
71
+ contactType="international"
72
+ contactValue="+44 20 7946 0958"
73
+ data={{ testid: 'test-international' }}
74
+ />
69
75
  <Contact
70
76
  contactDetail=""
71
77
  contactType=""
@@ -83,10 +89,11 @@ test('returns correct icon', () => {
83
89
  expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_custom_icon')).toBeInTheDocument()
84
90
  expect(screen.getByTestId('test-wrong-type').querySelector('.pb_custom_icon')).toBeInTheDocument()
85
91
  expect(screen.getByTestId('test-extension').querySelector('.pb_custom_icon')).toBeInTheDocument()
92
+ expect(screen.getByTestId('test-international').querySelector('.pb_custom_icon')).toBeInTheDocument()
86
93
  expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
87
94
  })
88
95
 
89
- test("not compliant values return null in phone related contact types", () => {
96
+ test("not compliant values return null in US phone related contact types", () => {
90
97
  const notCompliantValues = [
91
98
  "349-185-998223",
92
99
  "349-1858",
@@ -129,3 +136,16 @@ test("not compliant values return null in phone related contact types", () => {
129
136
  )
130
137
  })
131
138
  })
139
+
140
+ test('international contact type preserves original format', () => {
141
+ render(
142
+ <Contact
143
+ contactType="international"
144
+ contactValue="+44 20 7946 0958"
145
+ data={{ testid: 'test-international-format' }}
146
+ />
147
+ )
148
+
149
+ const kit = screen.getByTestId('test-international-format')
150
+ expect(kit).toHaveTextContent('+44 20 7946 0958')
151
+ })
@@ -13,7 +13,7 @@
13
13
  }) %>
14
14
 
15
15
  <%= pb_rails("contact", props: {
16
- contact_type: "wrong number",
16
+ contact_type: "work",
17
17
  contact_value: "3245627482",
18
18
  }) %>
19
19
 
@@ -21,3 +21,18 @@
21
21
  contact_type: "work-cell",
22
22
  contact_value: "349-185-9988",
23
23
  }) %>
24
+
25
+ <%= pb_rails("contact", props: {
26
+ contact_type: "wrong-phone",
27
+ contact_value: "2124396666",
28
+ }) %>
29
+
30
+ <%= pb_rails("contact", props: {
31
+ contact_type: "extension",
32
+ contact_value: "1233",
33
+ }) %>
34
+
35
+ <%= pb_rails("contact", props: {
36
+ contact_type: "international",
37
+ contact_value: "+44 7700 900461",
38
+ }) %>
@@ -28,6 +28,21 @@ const ContactDefault = (props) => {
28
28
  contactValue="3245627482"
29
29
  {...props}
30
30
  />
31
+ <Contact
32
+ contactType="wrong-phone"
33
+ contactValue="2124396666"
34
+ {...props}
35
+ />
36
+ <Contact
37
+ contactType='extension'
38
+ contactValue="1234"
39
+ {...props}
40
+ />
41
+ <Contact
42
+ contactType="international"
43
+ contactValue="+44 7700 900461"
44
+ {...props}
45
+ />
31
46
  </div>
32
47
  )
33
48
  }
@@ -0,0 +1,5 @@
1
+ The Contact kit automatically formats US phone numbers when the `contactType` / `contact_type` is one of: `home` (default), `work`, `cell`, `work-cell`, `wrong-phone`.
2
+
3
+ - Use `email` to display emails.
4
+ - Use `international` to display International phone numbers exactly as provided (no formatting applied).
5
+ - Use `extension` to display four digit phone extensions.
@@ -26,3 +26,9 @@
26
26
  contact_value: "1233",
27
27
  contact_detail: "Ext",
28
28
  }) %>
29
+
30
+ <%= pb_rails("contact", props: {
31
+ contact_type: "international",
32
+ contact_value: "+44 7700 900461",
33
+ contact_detail: "International",
34
+ }) %>
@@ -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
  }
@@ -51,6 +51,7 @@ const IconButton = (props: IconButtonProps) => {
51
51
  id={id}
52
52
  >
53
53
  <Button
54
+ aria={aria}
54
55
  borderRadius="xs"
55
56
  htmlType={htmlType}
56
57
  link={link}
@@ -1,5 +1,6 @@
1
1
  <%= pb_content_tag do %>
2
- <%= pb_rails("button", props: { type: object.type,
2
+ <%= pb_rails("button", props: { aria: object.aria,
3
+ type: object.type,
3
4
  link: object.link,
4
5
  new_window:object.new_window,
5
6
  target: object.target,
@@ -140,7 +140,8 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
140
140
  delete filteredProps?.marginLeft;
141
141
 
142
142
 
143
- const Tag = link ? "a" : "div";
143
+ const isLink = !!link
144
+ const Tag = isLink ? "a" : "div"
144
145
  const activeClass = active === true ? "active" : "";
145
146
  const highlightedBorderClass = active === true && highlighted_border === false ? "highlighted_border_none" : "";
146
147
  const collapsibleTrailClass = collapsible && collapsibleTrail ? "collapsible_trail" : "";
@@ -200,6 +201,13 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
200
201
 
201
202
  const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass)
202
203
 
204
+ const handleKeyDown = (e: React.KeyboardEvent) => {
205
+ if (!isLink && (e.key === "Enter" || e.key === " ")) {
206
+ e.preventDefault()
207
+ onClick?.()
208
+ }
209
+ }
210
+
203
211
  return (
204
212
  <>
205
213
  {collapsible ? (
@@ -222,15 +230,18 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
222
230
  {...dataProps}
223
231
  {...htmlProps}
224
232
  className={classes}
225
- href={link}
233
+ href={isLink ? link : undefined}
226
234
  id={id}
227
- target={target}
235
+ role={!isLink ? "button" : undefined}
236
+ tabIndex={!isLink ? 0 : undefined}
237
+ target={isLink ? target : undefined}
228
238
  >
229
239
  {imageUrl && (
230
240
  <div
231
241
  className="pb_nav_list_item_icon_section_collapsible"
232
242
  key={imageUrl}
233
243
  onClick={(e) => handleIconClick(e)}
244
+ onKeyDown={!isLink ? handleKeyDown : undefined}
234
245
  >
235
246
  <Image className="pb_nav_img_wrapper"
236
247
  url={imageUrl}
@@ -265,10 +276,13 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
265
276
  {...dataProps}
266
277
  {...htmlProps}
267
278
  className={classes}
268
- href={link}
279
+ href={isLink ? link : undefined}
269
280
  id={id}
270
281
  onClick={onClick}
271
- target={target}
282
+ onKeyDown={!isLink ? handleKeyDown : undefined}
283
+ role={!isLink ? "button" : undefined}
284
+ tabIndex={!isLink ? 0 : undefined}
285
+ target={isLink ? target : undefined}
272
286
  >
273
287
  {imageUrl && (
274
288
  <div className="pb_nav_list_item_icon_section"
@@ -3,7 +3,9 @@
3
3
  <%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
4
4
  <%= pb_content_tag( object.tag,
5
5
  href: object.link && object.link,
6
- target: object.link && object.target
6
+ target: object.link && object.target,
7
+ onkeydown: !object.link ? "if(event.key==='Enter'||event.key===' '){event.preventDefault(); this.click();}" : nil,
8
+ tabindex: object.link ? nil : 0,
7
9
  ) do %>
8
10
  <% if object.image_url %>
9
11
  <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper_collapsible" }) %>
@@ -23,7 +25,9 @@
23
25
  <% else %>
24
26
  <%= pb_content_tag( object.tag,
25
27
  href: object.link && object.link,
26
- target: object.link && object.target
28
+ target: object.link && object.target,
29
+ onkeydown: !object.link ? "if(event.key==='Enter'||event.key===' '){event.preventDefault(); this.click();}" : nil,
30
+ tabindex: object.link ? nil : 0,
27
31
  ) do %>
28
32
  <% if object.image_url %>
29
33
  <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
@@ -0,0 +1,3 @@
1
+ .pb_pb_circle_chart {
2
+
3
+ }