playbook_ui 15.0.0.pre.alpha.PLAY2467contactkitinternational10329 → 15.0.0.pre.alpha.PLAY2473rowhighlightfix10510

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 (93) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +12 -11
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +8 -8
  5. data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts +7 -2
  6. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +0 -1
  7. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +2 -0
  8. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +1 -0
  9. data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +1 -0
  10. data/app/pb_kits/playbook/pb_contact/_contact.tsx +0 -5
  11. data/app/pb_kits/playbook/pb_contact/contact.rb +0 -4
  12. data/app/pb_kits/playbook/pb_contact/contact.test.js +1 -21
  13. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb +1 -16
  14. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +0 -15
  15. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb +0 -6
  16. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +0 -6
  17. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +6 -4
  18. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +48 -4
  19. data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +5 -1
  20. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +6 -8
  21. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -1
  22. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +2 -2
  23. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +9 -0
  24. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +3 -3
  25. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  26. data/app/pb_kits/playbook/pb_icon/_icon.tsx +13 -2
  27. data/app/pb_kits/playbook/pb_icon/icon.rb +9 -1
  28. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +1 -1
  29. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +3 -1
  30. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb +5 -0
  31. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx +24 -0
  32. data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +2 -0
  33. data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +1 -0
  34. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -1
  35. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb +11 -0
  36. data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.scss +0 -0
  37. data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx +62 -0
  38. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb +35 -0
  39. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +49 -0
  40. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md +1 -0
  41. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md +2 -0
  42. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb +38 -0
  43. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +51 -0
  44. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb +46 -0
  45. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +62 -0
  46. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md +3 -0
  47. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb +47 -0
  48. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +60 -0
  49. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb +25 -0
  50. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +36 -0
  51. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +44 -0
  52. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +100 -0
  53. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +126 -0
  54. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb +32 -0
  55. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +48 -0
  56. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb +68 -0
  57. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +81 -0
  58. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb +31 -0
  59. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +42 -0
  60. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md +2 -0
  61. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb +35 -0
  62. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +51 -0
  63. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml +27 -0
  64. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js +11 -0
  65. data/app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts +106 -0
  66. data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb +1 -0
  67. data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb +28 -0
  68. data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx +31 -0
  69. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +3 -0
  70. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.html.erb +41 -0
  71. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx +80 -0
  72. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md +1 -0
  73. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +3 -0
  74. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  75. data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -3
  76. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +38 -0
  77. data/dist/chunks/{_line_graph-CApw7aQD.js → _line_graph-BBny-YYZ.js} +1 -1
  78. data/dist/chunks/_typeahead-CeyJ6-GF.js +6 -0
  79. data/dist/chunks/_weekday_stacked-Dfq9Ls3V.js +37 -0
  80. data/dist/chunks/{lib-CY5ZPzic.js → lib-BTs5acfO.js} +1 -1
  81. data/dist/chunks/{pb_form_validation-D3b0JKHH.js → pb_form_validation-CKkaQFX3.js} +1 -1
  82. data/dist/chunks/vendor.js +1 -1
  83. data/dist/menu.yml +9 -1
  84. data/dist/playbook-doc.js +2 -2
  85. data/dist/playbook-rails-react-bindings.js +1 -1
  86. data/dist/playbook-rails.js +1 -1
  87. data/lib/playbook/forms/builder/form_field_builder.rb +9 -1
  88. data/lib/playbook/version.rb +1 -1
  89. metadata +45 -9
  90. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.md +0 -5
  91. data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +0 -65
  92. data/dist/chunks/_typeahead-J1_avqdO.js +0 -6
  93. data/dist/chunks/_weekday_stacked-BSRRJewP.js +0 -37
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5f20e205eef51d77bf9ce4b5694d675e30bfbe4ef8107c96b016868302ccaba3
4
- data.tar.gz: 89c8ffe59230989390b0cb8031a47b3191bd5463b190f62465b10679a2dbf531
3
+ metadata.gz: f3ed0631c51b54669ffc7faa87720d44235290b760f64df26d8cad1af3e527d5
4
+ data.tar.gz: 06da8419d842a780b2e5567affe683a5c28e227400a5231f82bdc6d920411186
5
5
  SHA512:
6
- metadata.gz: 6c25d0d330b79ffdc47501616db7bdbe0577c48ce9fa5d33b8ea7d6058c9ce98674d72664ca312f6d79ddaf59b662701b8a136bb0ca589447c4ea8b72bbf97a8
7
- data.tar.gz: f42561f7ad3f69134d46779d00d75c0aff2998c042a0c6ef5839131c80f788559de516772297a606049a2827222b863d0b434febf32ca28d0aadca4cb8e7b0c4
6
+ metadata.gz: 2ac52928a5ea5c597a37469b85f6509cbd26236e7e5195b9636d8409cfc7ad513d22ddb4a7889f47bf12d7d1fca748704fcd72007b89acef5e66a93cf4681db4
7
+ data.tar.gz: faa7715595570f694456f0d9a19430c3ff0b7cbdf66ab1f63e8a843110541e1da10fb22149e004069bc82dd8a27a7469f279e9fd41957befdcca61d3f21b8038
@@ -108,6 +108,7 @@
108
108
  @import 'pb_user_badge/user_badge';
109
109
  @import 'pb_weekday_stacked/weekday_stacked';
110
110
  @import 'pb_empty_state/empty_state';
111
+ @import 'pb_pb_bar_graph/pb_bar_graph';
111
112
  @import 'utilities/mixins';
112
113
  @import 'utilities/spacing';
113
114
  @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"
@@ -60,7 +61,7 @@ const TableCellRenderer = ({
60
61
  const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
61
62
  const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
62
63
  const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
63
-
64
+
64
65
  return (
65
66
  <td
66
67
  align={cellAlignment}
@@ -132,6 +133,7 @@ export const RegularTableView = ({
132
133
 
133
134
  const columnPinning = table.getState().columnPinning || { left: [] };
134
135
  const columnDefinitions = table.options.meta?.columnDefinitions || [];
136
+
135
137
  // Row pinning
136
138
  function PinnedRow({ row }: { row: Row<any> }) {
137
139
  const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
@@ -144,7 +146,7 @@ export const RegularTableView = ({
144
146
  backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
145
147
  color: customRowStyle?.fontColor,
146
148
  position: 'sticky',
147
- top:
149
+ top:
148
150
  row.getIsPinned() === 'top'
149
151
  ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
150
152
  : undefined,
@@ -169,21 +171,20 @@ export const RegularTableView = ({
169
171
  return (
170
172
  <>
171
173
  {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
172
- <PinnedRow key={row.id}
173
- row={row}
174
+ <PinnedRow key={row.id}
175
+ row={row}
174
176
  />
175
177
  ))}
176
178
  {totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
177
- const isExpandable = row.getIsExpanded();
178
179
  const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
179
- const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
180
180
  const numberOfColumns = table.getAllFlatColumns().length;
181
- const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0]?.cellAccessors?.length);
182
- const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
183
- const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
184
181
  const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
185
182
  const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
186
183
 
184
+ // Use functions from RowUtils for consistent cell coloring
185
+ const rowColor = getRowColorClass(row, inlineRowLoading || false);
186
+ const isDataLoading = shouldShowLoadingIndicator(row, inlineRowLoading || false, columnDefinitions[0]?.cellAccessors?.length || 0);
187
+
187
188
  return (
188
189
  <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
189
190
  {isFirstChildofSubrow && subRowHeaders && (
@@ -228,7 +229,7 @@ export const RegularTableView = ({
228
229
 
229
230
  {/* Display LoadingInline if Row Data is querying and there are no children already */}
230
231
  {isDataLoading && (
231
- <tr key={`${row.id}-row`}>
232
+ <tr key={`${row.id}-loading-row`}>
232
233
  <td colSpan={numberOfColumns}
233
234
  style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
234
235
  >
@@ -243,4 +244,4 @@ export const RegularTableView = ({
243
244
  );
244
245
  }
245
246
 
246
- export default RegularTableView;
247
+ 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} = {};
@@ -103,7 +104,7 @@ export const VirtualizedTableView = ({
103
104
  // Create debounced version of the width measurement function
104
105
  const handleResize = debounce(() => {
105
106
  setColumnWidths(getHeaderCellWidths());
106
- }, 0);
107
+ }, 100);
107
108
 
108
109
  // Add the event listener
109
110
  window.addEventListener('resize', handleResize);
@@ -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
  /**
@@ -4,7 +4,6 @@ examples:
4
4
  - bar_graph_default: Default
5
5
  - bar_graph_legend: Legend
6
6
  - bar_graph_legend_position: Legend Position
7
- - bar_graph_legend_non_clickable: Legend Non Clickable
8
7
  - bar_graph_height: Height
9
8
  - bar_graph_spline: Spline
10
9
  - bar_graph_colors: Color Overrides
@@ -65,6 +65,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
65
65
  id={id}
66
66
  >
67
67
  <Button
68
+ aria={aria}
68
69
  dark={dark}
69
70
  disabled={disabled}
70
71
  htmlType={type}
@@ -78,6 +79,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
78
79
  >
79
80
  <Icon
80
81
  fixedWidth
82
+ htmlOptions={{'aria-hidden': true}}
81
83
  icon={icon}
82
84
  />
83
85
  </Button>
@@ -1,5 +1,6 @@
1
1
  <%= pb_content_tag do %>
2
2
  <%= pb_rails("button", props: {
3
+ aria: object.aria,
3
4
  type: object.type,
4
5
  loading: object.loading,
5
6
  link: object.link,
@@ -28,6 +28,7 @@ exports[`html structure is correct 1`] = `
28
28
  style="vertical-align: middle; color: rgb(193, 205, 214);"
29
29
  >
30
30
  <svg
31
+ aria-label="chevron-down icon"
31
32
  class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
32
33
  color="currentColor"
33
34
  fill="none"
@@ -17,7 +17,6 @@ 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',
21
20
  }
22
21
 
23
22
  const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string]: SVGElement }
@@ -25,10 +24,6 @@ const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string
25
24
  const formatContact = (contactString: string, contactType: string) => {
26
25
  if (contactType === 'email') return contactString
27
26
 
28
- // International phone numbers are unformatted
29
- if (contactType === 'international') return contactString
30
-
31
- // Format US numbers
32
27
  const cleaned = contactString.replace(/\D/g, '')
33
28
  const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
34
29
 
@@ -29,8 +29,6 @@ module Playbook
29
29
  "phone-slash"
30
30
  when "extension"
31
31
  "phone-plus"
32
- when "international"
33
- "globe"
34
32
  else # "unknown" || "other"
35
33
  "phone"
36
34
  end
@@ -41,8 +39,6 @@ module Playbook
41
39
  contact_value
42
40
  elsif contact_type == "extension" && contact_value.match(/^\d{4}$/)
43
41
  contact_value
44
- elsif contact_type == "international"
45
- contact_value
46
42
  else
47
43
  number_to_phone(formatted_value, area_code: true)
48
44
  end
@@ -66,12 +66,6 @@ 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
- />
75
69
  <Contact
76
70
  contactDetail=""
77
71
  contactType=""
@@ -89,11 +83,10 @@ test('returns correct icon', () => {
89
83
  expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_custom_icon')).toBeInTheDocument()
90
84
  expect(screen.getByTestId('test-wrong-type').querySelector('.pb_custom_icon')).toBeInTheDocument()
91
85
  expect(screen.getByTestId('test-extension').querySelector('.pb_custom_icon')).toBeInTheDocument()
92
- expect(screen.getByTestId('test-international').querySelector('.pb_custom_icon')).toBeInTheDocument()
93
86
  expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
94
87
  })
95
88
 
96
- test("not compliant values return null in US phone related contact types", () => {
89
+ test("not compliant values return null in phone related contact types", () => {
97
90
  const notCompliantValues = [
98
91
  "349-185-998223",
99
92
  "349-1858",
@@ -136,16 +129,3 @@ test("not compliant values return null in US phone related contact types", () =>
136
129
  )
137
130
  })
138
131
  })
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: "work",
16
+ contact_type: "wrong number",
17
17
  contact_value: "3245627482",
18
18
  }) %>
19
19
 
@@ -21,18 +21,3 @@
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,21 +28,6 @@ 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
- />
46
31
  </div>
47
32
  )
48
33
  }
@@ -26,9 +26,3 @@
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,12 +33,6 @@ 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
- />
42
36
  </div>
43
37
  )
44
38
  }
@@ -210,10 +210,12 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
210
210
  className="input_wrapper"
211
211
  >
212
212
 
213
- <Caption
214
- className="pb_date_picker_kit_label"
215
- text={hideLabel ? null : label}
216
- />
213
+ {!hideLabel && (
214
+ <Caption
215
+ className="pb_date_picker_kit_label"
216
+ text={label}
217
+ />
218
+ )}
217
219
  <>
218
220
  <div className="date_picker_input_wrapper">
219
221
  <input
@@ -89,6 +89,48 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
89
89
  }
90
90
  }
91
91
 
92
+ // Helper function to get min/max years based on yearRange. If minDate/maxDate provided, grab year from those values
93
+ const getMinMaxYears = () => {
94
+ const [minYear, maxYear] = yearRange;
95
+
96
+ const extractYear = (dateOption: typeof minDate | typeof maxDate): number | null => {
97
+ if (!dateOption) return null;
98
+
99
+ // If it's already a number, assume it's a year
100
+ if (typeof dateOption === 'number') {
101
+ return dateOption;
102
+ }
103
+
104
+ // If it's a string, extract year with regex
105
+ if (typeof dateOption === 'string') {
106
+ const match = dateOption.match(/\b(19|20)\d{2}\b/);
107
+ return match ? parseInt(match[0], 10) : null;
108
+ }
109
+
110
+ // If it's a Date object, get the year directly
111
+ if (dateOption instanceof Date) {
112
+ return dateOption.getFullYear();
113
+ }
114
+
115
+ return null;
116
+ };
117
+
118
+ const setMinYear = minDate ? (extractYear(minDate) ?? minYear) : minYear;
119
+ const setMaxYear = maxDate ? (extractYear(maxDate) ?? maxYear) : maxYear;
120
+
121
+ return { setMinYear, setMaxYear };
122
+ };
123
+
124
+ const { setMinYear, setMaxYear } = getMinMaxYears()
125
+
126
+ // Helper function to get min/max dates based on yearRange
127
+ const getMinMaxDates = () => {
128
+ const setMinDate = minDate || `01/01/${setMinYear}`
129
+ const setMaxDate = maxDate || `12/31/${setMaxYear}`
130
+
131
+ return { setMinDate, setMaxDate }
132
+ }
133
+
92
134
  const disabledWeekDays = () => {
93
135
  return (
94
136
  [
@@ -201,6 +243,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
201
243
  // | Flatpickr initializer w/ config |
202
244
  // ===========================================================
203
245
 
246
+ const { setMinDate, setMaxDate } = getMinMaxDates()
247
+
204
248
  flatpickr(`#${pickerId}`, {
205
249
  allowInput,
206
250
  closeOnSelect,
@@ -212,8 +256,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
212
256
  locale: {
213
257
  rangeSeparator: ' to '
214
258
  },
215
- maxDate,
216
- minDate,
259
+ maxDate: setMaxDate,
260
+ minDate: setMinDate,
217
261
  mode,
218
262
  nextArrow: '<i class="far fa-angle-right"></i>',
219
263
  onOpen: [() => {
@@ -250,7 +294,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
250
294
 
251
295
  // create html option tags for desired years
252
296
  let years = ''
253
- for (let year = yearRange[1]; year >= yearRange[0]; year--) {
297
+ for (let year = setMaxYear; year >= setMinYear; year--) {
254
298
  years += `<option value="${year}">${year}</option>`
255
299
  }
256
300
 
@@ -323,7 +367,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
323
367
  }
324
368
  // === End of Automatic Sync Logic ===
325
369
 
326
-
370
+
327
371
  // Adding dropdown icons to year and month select
328
372
  dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
329
373
  if (picker.monthElements[0].parentElement) {
@@ -12,10 +12,14 @@ export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
12
12
  const timesIcon = getAllIcons()["times"]
13
13
  return (
14
14
  <div
15
+ aria-label="Close Dialog"
15
16
  className="pb_dialog_close_icon"
16
- onClick={onClose}
17
+ onClick={onClose}
18
+ role="button"
19
+ tabIndex={0}
17
20
  >
18
21
  <Icon
22
+ aria={{ "hidden": true }}
19
23
  className="svg-inline--fa"
20
24
  customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
21
25
  fixedWidth
@@ -73,8 +73,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
73
73
  const ariaProps = buildAriaProps(aria);
74
74
  const dataProps = buildDataProps(data)
75
75
  const htmlProps = buildHtmlProps(htmlOptions);
76
- const dialogClassNames = {
77
- base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
76
+ const classes = {
77
+ base: classnames("pb_dialog", buildCss("pb_dialog", size, placement), globalProps(props), className),
78
78
  afterOpen: "pb_dialog_after_open",
79
79
  beforeClose: "pb_dialog_before_close",
80
80
  };
@@ -93,10 +93,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
93
93
 
94
94
  const dynamicInlineProps = globalInlineProps(props);
95
95
 
96
- const classes = classnames(
96
+ const wrapperClasses = classnames(
97
97
  buildCss("pb_dialog_wrapper"),
98
- globalProps(props),
99
- className
100
98
  );
101
99
 
102
100
  const [triggerOpened, setTriggerOpened] = useState(false),
@@ -173,13 +171,13 @@ const Dialog = (props: DialogProps): React.ReactElement => {
173
171
  {...ariaProps}
174
172
  {...dataProps}
175
173
  {...htmlProps}
176
- className={classes}
174
+ className={wrapperClasses}
177
175
  >
178
176
  <Modal
179
177
  ariaHideApp={false}
180
- className={dialogClassNames}
178
+ className={classes}
181
179
  closeTimeoutMS={200}
182
- contentLabel="Minimal Modal Example"
180
+ contentLabel="Dialog"
183
181
  id={id}
184
182
  isOpen={modalIsOpened}
185
183
  onRequestClose={onClose}
@@ -12,7 +12,7 @@
12
12
  data-cancel-button-id="<%= object.cancel_button_id %>"
13
13
  <% end %>
14
14
  >
15
- <%= pb_content_tag(:dialog) do %>
15
+ <%= pb_content_tag(:dialog, role: "dialog", "aria-modal": "true", "aria-label": "Dialog") do %>
16
16
  <% if object.status === "" && object.title %>
17
17
  <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
18
18
  <% end %>
@@ -2,8 +2,8 @@
2
2
  <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
3
3
  <%= content.presence || object.title %>
4
4
 
5
- <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> >
6
- <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon) }) %>
5
+ <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> aria-label="Close Dialog" >
6
+ <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon), aria: { hidden: true } }) %>
7
7
  </button>
8
8
  <% end %>
9
9
  <%= pb_rails("section_separator") %>
@@ -35,6 +35,7 @@ type FixedConfirmationToastProps = {
35
35
 
36
36
  const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
37
37
  const [showToast, toggleToast] = useState(true);
38
+
38
39
  const {
39
40
  autoClose = 0,
40
41
  children,
@@ -87,8 +88,15 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
87
88
  <>
88
89
  {showToast && (
89
90
  <div
91
+ aria-atomic="true"
92
+ aria-live="polite"
90
93
  className={css}
91
94
  onClick={handleClick}
95
+ onKeyDown={(e) => {
96
+ if (e.key === "Enter" || e.key === " ") handleClick();
97
+ }}
98
+ role="status"
99
+ tabIndex={0}
92
100
  {...htmlProps}
93
101
  >
94
102
  {returnedIcon && icon !== "none" && (
@@ -111,6 +119,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
111
119
 
112
120
  {closeable && (
113
121
  <Icon
122
+ aria={{ "label": "Close Toast" }}
114
123
  className="pb_icon"
115
124
  cursor="pointer"
116
125
  fixedWidth={false}
@@ -1,6 +1,6 @@
1
- <%= pb_content_tag do %>
1
+ <%= pb_content_tag(:div, "aria-atomic": "true", "aria-live": "polite", role: "status", tabindex: 0, onkeydown: "if(event.key==='Enter'||event.key===' '){ this.remove(); }" ) do %>
2
2
  <% if object.icon_value && object.icon_value != "none" %>
3
- <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
3
+ <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true, aria: { "aria-label": "#{object.icon_value} icon" } }) %>
4
4
  <% end %>
5
5
  <% if content %>
6
6
  <%= content %>
@@ -8,5 +8,5 @@
8
8
  <%= pb_rails("title", props: { text: object.text, size: 4, flex: "1", classname: "pb_fixed_confirmation_toast_text" }) %>
9
9
  <% end %>
10
10
 
11
- <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true }) if object.closeable %>
11
+ <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true, aria: { "aria-label": "Close Toast" } }) if object.closeable %>
12
12
  <% end %>
@@ -91,6 +91,7 @@
91
91
  <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
92
92
  <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
93
93
  <%= form.text_field :example_text_field, props: { label: true } %>
94
+ <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
94
95
  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
95
96
  <%= form.email_field :example_email_field, props: { label: true } %>
96
97
  <%= form.number_field :example_number_field, props: { label: true } %>
@@ -20,7 +20,7 @@ export type IconSizes = "lg"
20
20
  | ""
21
21
 
22
22
  type IconProps = {
23
- aria?: {[key: string]: string},
23
+ aria?: { [key: string]: string | boolean }
24
24
  border?: string,
25
25
  className?: string,
26
26
  color?: string,
@@ -211,7 +211,15 @@ const Icon = (props: IconProps) => {
211
211
  )
212
212
 
213
213
  aria.label ? null : aria.label = `${icon} icon`
214
- const ariaProps: {[key: string]: any} = buildAriaProps(aria)
214
+
215
+ const normalizedAria: { [key: string]: string } = Object.fromEntries(
216
+ Object.entries(aria).map(([key, value]) => [
217
+ key,
218
+ typeof value === "boolean" ? String(value) : value,
219
+ ])
220
+ )
221
+
222
+ const ariaProps = buildAriaProps(normalizedAria)
215
223
  const dataProps: {[key: string]: any} = buildDataProps(data)
216
224
  const htmlProps = buildHtmlProps(htmlOptions)
217
225
 
@@ -222,6 +230,7 @@ const Icon = (props: IconProps) => {
222
230
  <>
223
231
  {
224
232
  React.cloneElement(iconElement || customIcon, {
233
+ ...ariaProps,
225
234
  ...dataProps,
226
235
  ...htmlProps,
227
236
  className: classes,
@@ -237,6 +246,7 @@ const Icon = (props: IconProps) => {
237
246
  return (
238
247
  <>
239
248
  <span
249
+ {...ariaProps}
240
250
  {...dataProps}
241
251
  {...htmlProps}
242
252
  className={classesEmoji}
@@ -250,6 +260,7 @@ const Icon = (props: IconProps) => {
250
260
  return (
251
261
  <>
252
262
  <i
263
+ {...ariaProps}
253
264
  {...dataProps}
254
265
  {...htmlProps}
255
266
  className={classes}