playbook_ui 15.0.0.pre.alpha.removewebpacker10549 → 15.0.0.pre.alpha.removewebpacker10589

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 (66) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/pb_card/_card.scss +12 -4
  4. data/app/pb_kits/playbook/pb_card/_card.tsx +3 -3
  5. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +10 -0
  6. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +3 -0
  7. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +8 -0
  8. data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx +1 -0
  9. data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +2 -1
  10. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +12 -17
  11. data/app/pb_kits/playbook/pb_multi_level_select/index.js +39 -74
  12. data/app/pb_kits/playbook/pb_nav/_item.tsx +19 -5
  13. data/app/pb_kits/playbook/pb_nav/item.html.erb +6 -2
  14. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb +3 -3
  15. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb +3 -3
  16. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb +3 -3
  17. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb +3 -3
  18. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb +3 -3
  19. data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss +3 -0
  20. data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx +62 -0
  21. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +31 -0
  22. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +81 -0
  23. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +25 -0
  24. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +40 -0
  25. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +5 -0
  26. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +27 -0
  27. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +39 -0
  28. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +5 -0
  29. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +93 -0
  30. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +131 -0
  31. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +14 -0
  32. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +42 -0
  33. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +58 -0
  34. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +24 -0
  35. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +38 -0
  36. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +22 -0
  37. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +33 -0
  38. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +118 -0
  39. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +144 -0
  40. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +60 -0
  41. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +24 -0
  42. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +42 -0
  43. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +38 -0
  44. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +52 -0
  45. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +29 -0
  46. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +11 -0
  47. data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts +88 -0
  48. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb +1 -0
  49. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb +28 -0
  50. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +51 -0
  51. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +2 -2
  52. data/dist/chunks/{_line_graph-CCdlZO2L.js → _line_graph-DeH7NK-i.js} +1 -1
  53. data/dist/chunks/{_typeahead-ouDP07fM.js → _typeahead-CCGp0OQe.js} +1 -1
  54. data/dist/chunks/{_weekday_stacked-BwiHMjoq.js → _weekday_stacked-BHLwECdV.js} +2 -2
  55. data/dist/chunks/componentRegistry-DzmmLR2x.js +1 -0
  56. data/dist/chunks/vendor.js +1 -1
  57. data/dist/menu.yml +6 -0
  58. data/dist/playbook-doc.js +2 -2
  59. data/dist/playbook-rails-react-bindings.js +1 -1
  60. data/dist/playbook-rails.js +1 -1
  61. data/dist/playbook.css +1 -1
  62. data/lib/playbook/forms/builder/form_field_builder.rb +28 -1
  63. data/lib/playbook/kit_base.rb +3 -0
  64. data/lib/playbook/version.rb +1 -1
  65. metadata +38 -6
  66. data/dist/chunks/componentRegistry-BJW8wTi7.js +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c7ac1e8ff6d7cfcd2fcf7660fc26e5585eb1f54a37107e03ba8864df37fde50d
4
- data.tar.gz: a38023975d9ce5398f87737d4d2ee78fb9467ceb5fe801f2e11e09b0af90d099
3
+ metadata.gz: 5f1d58c0974115b7178c36d9cda95c0eacbfadd7b855f74d97d272acc9c62e1b
4
+ data.tar.gz: f602e748ae8b93fc70a7a4ee7a26876c7dcca1b8c68d65687d2c7e1d254c9238
5
5
  SHA512:
6
- metadata.gz: 3a9d6d917182a8ae335cf2741aff92c321a75332ca1db15a46b90ab31eb3c6dafbb3ac6bb39c066cec0e07cd216cdf676dfe22e7a474a07ca7bdae77b392c965
7
- data.tar.gz: 2f5dc9be0293d0e3dc7be1d10963c9527d7bd2e781041ad6f72fd6968ae01e16b9b444b421a4640d847ecd556e5790e0ddaec5665a24fab877c952e76c3094e9
6
+ metadata.gz: fb8ac648144f2747012cd782f136b169e1e2c041cb7cd80e51727811968233ec5121542cccc8daf4ad1781d662e16138dd8d689867fd2b2bafce700a7c7b1d15
7
+ data.tar.gz: 60ac54b5f6e52494d90565b6eaa63e2d322b84d776eba943445aa19d5e65e9bae06eddb32acf292ecb03b6d5c200d7cab0d2e351c18904497be2d0ca0db5f014
@@ -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';
@@ -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' }}
@@ -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,
@@ -93,8 +93,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
93
93
  className
94
94
  );
95
95
 
96
- const inputId = id ? `${id}_multiselect_input` : `${Math.random().toString(36).slice(2)}_multiselect_input`;
97
-
98
96
  const dropdownRef = useRef(null);
99
97
 
100
98
  // State for whether dropdown is open or closed
@@ -328,11 +326,14 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
328
326
 
329
327
  // Handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
330
328
  const handleInputWrapperClick = (e: any) => {
331
- console.log("test", inputId, e.target.id)
332
- if (disabled) return
333
- // ignore clicks that originated from the input or pills
334
- if (e.target.id === inputId || e.target.classList?.contains('pb_form_pill_tag')) return
335
- setIsDropdownClosed(false)
329
+ if (
330
+ e.target.id === "multiselect_input" ||
331
+ e.target.classList.contains("pb_form_pill_tag") ||
332
+ disabled
333
+ ) {
334
+ return;
335
+ }
336
+ setIsDropdownClosed(!isDropdownClosed);
336
337
  };
337
338
 
338
339
  // Main function to handle any click inside dropdown
@@ -441,10 +442,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
441
442
  }
442
443
  };
443
444
 
444
- const handleChevronClick = (e: React.MouseEvent) => {
445
- e.stopPropagation()
446
- setIsDropdownClosed(prev => !prev)
447
- }
448
445
 
449
446
  return (
450
447
  <div
@@ -558,13 +555,13 @@ const handleChevronClick = (e: React.MouseEvent) => {
558
555
 
559
556
  <input
560
557
  disabled={disabled}
561
- id={inputId}
558
+ id="multiselect_input"
562
559
  onChange={(e) => {
563
560
  variant === "single"
564
561
  ? handleRadioInputChange(e.target.value)
565
562
  : setFilterItem(e.target.value);
566
563
  }}
567
- onClick={(e) => { e.stopPropagation(); setIsDropdownClosed(false) }}
564
+ onClick={() => setIsDropdownClosed(false)}
568
565
  placeholder={
569
566
  inputDisplay === "none" && itemsSelectedLength()
570
567
  ? `${itemsSelectedLength()} ${
@@ -579,8 +576,7 @@ const handleChevronClick = (e: React.MouseEvent) => {
579
576
 
580
577
  {isDropdownClosed ? (
581
578
  <div id={arrowDownElementId}
582
- key="chevron-down"
583
- onClick={handleChevronClick}>
579
+ key="chevron-down">
584
580
  <Icon
585
581
  icon="chevron-down"
586
582
  id={arrowDownElementId}
@@ -589,8 +585,7 @@ const handleChevronClick = (e: React.MouseEvent) => {
589
585
  </div>
590
586
  ) : (
591
587
  <div id={arrowUpElementId}
592
- key="chevron-up"
593
- onClick={handleChevronClick}>
588
+ key="chevron-up">
594
589
  <Icon
595
590
  icon="chevron-up"
596
591
  id={arrowUpElementId}
@@ -12,129 +12,94 @@ export default class PbMultiLevelSelect extends PbEnhancedElement {
12
12
  }
13
13
 
14
14
  connect() {
15
- this.justBlurred = false;
16
15
  this.addEventListeners();
17
16
  this.observeHiddenInputs();
18
17
  this.observeRogueErrorInsideInnerContainer();
19
- // @ts-ignore
20
- console.log("[MLS ENHANCER] connect", this.element);
21
- }
22
-
23
- disconnect() {
24
- if (this.inputElement && this.onInvalid) {
25
- this.inputElement.removeEventListener("invalid", this.onInvalid);
26
- }
27
- if (this.inputElement && this.onBlur) {
28
- this.inputElement.removeEventListener("blur", this.onBlur);
29
- }
30
- if (this.mutationObserver) {
31
- this.mutationObserver.disconnect();
32
- }
33
- if (this.rogueErrorObserver) {
34
- this.rogueErrorObserver.disconnect();
35
- }
36
- // @ts-ignore
37
- console.log("[MLS ENHANCER] disconnect", this.element);
38
18
  }
39
19
 
40
20
  addEventListeners() {
41
21
  const inputElement = this.element.querySelector("input");
42
- if (!inputElement) {
43
- // @ts-ignore
44
- console.log("[MLS ENHANCER] no input found");
45
- return;
46
- }
47
-
48
- this.inputElement = inputElement;
49
22
 
50
- this.onInvalid = () => {
51
- // @ts-ignore
52
- console.log("[MLS ENHANCER] input invalid");
23
+ inputElement.addEventListener("invalid", () => {
53
24
  this.handleErrorLabel(300);
54
- };
55
-
56
- this.onBlur = () => {
25
+ });
26
+ inputElement.addEventListener("blur", () => {
57
27
  this.justBlurred = true;
58
- // @ts-ignore
59
- console.log("[MLS ENHANCER] input blur");
28
+
60
29
  setTimeout(() => {
61
30
  this.justBlurred = false;
62
31
  }, 300);
63
- };
64
-
65
- inputElement.addEventListener("invalid", this.onInvalid);
66
- inputElement.addEventListener("blur", this.onBlur);
67
- // @ts-ignore
68
- console.log("[MLS ENHANCER] listeners attached");
32
+ });
69
33
  }
70
34
 
71
35
  handleErrorLabel(delay) {
72
36
  setTimeout(() => {
73
37
  const errorLabelElement = this.target;
74
38
  const wrapper = this.element.querySelector(".wrapper");
75
- // @ts-ignore
76
- console.log("[MLS ENHANCER] handleErrorLabel", {
77
- hasErrorLabel: !!errorLabelElement,
78
- hasWrapper: !!wrapper,
79
- });
39
+
40
+ if (errorLabelElement) {
41
+ errorLabelElement.remove();
42
+ if (wrapper) {
43
+ if (wrapper.querySelector(".pb_body_kit_negative")) {
44
+ wrapper.querySelector(".pb_body_kit_negative").remove();
45
+ }
46
+ wrapper.appendChild(errorLabelElement);
47
+ }
48
+ this.element.classList.add("error");
49
+ } else {
50
+ this.handleErrorLabel(100);
51
+ }
80
52
  }, delay);
81
53
  }
82
54
 
83
55
  observeHiddenInputs() {
84
56
  const container = this.element.querySelector(".input_inner_container");
85
- if (!container) {
86
- // @ts-ignore
87
- console.log("[MLS ENHANCER] no .input_inner_container found");
88
- return;
89
- }
57
+ if (!container) return;
90
58
 
91
- this.mutationObserver = new MutationObserver((mutations) => {
92
- // @ts-ignore
93
- console.log("[MLS ENHANCER] hidden inputs observer mutations", mutations.length);
59
+ this.mutationObserver = new MutationObserver(() => {
94
60
  const hiddenInputs = container.querySelectorAll('input[type="hidden"]');
95
- // @ts-ignore
96
- console.log("[MLS ENHANCER] hidden inputs count", hiddenInputs.length);
97
61
  if (hiddenInputs.length > 0) {
98
- this.clearError({});
62
+ // At least one hidden input exists, so clear the error
63
+ this.clearError();
99
64
  }
100
65
  });
101
66
 
102
- this.mutationObserver.observe(container, { childList: true });
103
- // @ts-ignore
104
- console.log("[MLS ENHANCER] hidden inputs observer attached");
67
+ this.mutationObserver.observe(container, {
68
+ childList: true,
69
+ });
105
70
  }
106
71
 
107
72
  observeRogueErrorInsideInnerContainer() {
108
73
  const container = this.element.querySelector(".input_inner_container");
109
- if (!container) {
110
- // @ts-ignore
111
- console.log("[MLS ENHANCER] no .input_inner_container for rogue observer");
112
- return;
113
- }
114
74
 
115
75
  this.rogueErrorObserver = new MutationObserver((mutations) => {
116
- // @ts-ignore
117
- console.log("[MLS ENHANCER] rogue error observer mutations", mutations.length, "justBlurred:", this.justBlurred);
118
76
  for (const mutation of mutations) {
119
77
  for (const node of mutation.addedNodes) {
120
78
  if (
121
79
  node.nodeType === Node.ELEMENT_NODE &&
122
80
  node.classList.contains("pb_body_kit_negative")
123
81
  ) {
124
- // @ts-ignore
125
- console.log("[MLS ENHANCER] pb_body_kit_negative added inside inner container", node);
82
+ if (this.justBlurred) {
83
+ node.remove();
84
+ }
126
85
  }
127
86
  }
128
87
  }
129
88
  });
130
89
 
131
- this.rogueErrorObserver.observe(container, { childList: true, subtree: true });
132
- // @ts-ignore
133
- console.log("[MLS ENHANCER] rogue error observer attached");
90
+ this.rogueErrorObserver.observe(container, {
91
+ childList: true,
92
+ subtree: true,
93
+ });
134
94
  }
135
95
 
136
96
  clearError(e) {
137
- // @ts-ignore
138
- console.log("[MLS ENHANCER] clearError called", e);
97
+ const errorLabelElement = this.target;
98
+
99
+ if (errorLabelElement) {
100
+ errorLabelElement.remove();
101
+ this.element.classList.remove("error");
102
+ this.element.querySelector("input").value = e.detail.value;
103
+ }
139
104
  }
140
105
  }
@@ -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" }) %>
@@ -4,8 +4,8 @@
4
4
 
5
5
  <%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_breached" }) %>
6
6
 
7
- <%= javascript_tag do %>
8
- window.addEventListener("DOMContentLoaded", () => {
7
+ <script>
8
+ window.addEventListener("load", () => {
9
9
 
10
10
  // variables for the kits you are targeting
11
11
  const passphrase = document.querySelector(".passphrase_breached").querySelector("input")
@@ -142,4 +142,4 @@
142
142
  });
143
143
 
144
144
  })
145
- <% end %>
145
+ </script>
@@ -10,8 +10,8 @@
10
10
  <%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_common" }) %>
11
11
 
12
12
 
13
- <%= javascript_tag do %>
14
- window.addEventListener("DOMContentLoaded", () => {
13
+ <script>
14
+ window.addEventListener("load", () => {
15
15
 
16
16
  const commonText = document.querySelector("#body_common")
17
17
 
@@ -133,4 +133,4 @@
133
133
  });
134
134
 
135
135
  })
136
- <% end %>
136
+ </script>
@@ -4,8 +4,8 @@
4
4
 
5
5
  <div id="match"> </div>
6
6
 
7
- <%= javascript_tag do %>
8
- window.addEventListener("DOMContentLoaded", () => {
7
+ <script>
8
+ window.addEventListener("load", () => {
9
9
 
10
10
  const useState = (defaultValue) => {
11
11
  let value = defaultValue;
@@ -48,4 +48,4 @@
48
48
 
49
49
  }
50
50
  })
51
- <% end %>
51
+ </script>
@@ -32,8 +32,8 @@
32
32
 
33
33
 
34
34
 
35
- <%= javascript_tag do %>
36
- window.addEventListener("DOMContentLoaded", () => {
35
+ <script>
36
+ window.addEventListener("load", () => {
37
37
 
38
38
 
39
39
  // variables for the passphrase kits you are targeting
@@ -320,4 +320,4 @@
320
320
 
321
321
 
322
322
  })
323
- <% end %>
323
+ </script>
@@ -7,8 +7,8 @@
7
7
  <%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>
8
8
 
9
9
 
10
- <%= javascript_tag do %>
11
- window.addEventListener("DOMContentLoaded", () => {
10
+ <script>
11
+ window.addEventListener("load", () => {
12
12
 
13
13
  // variables for the kits you are targeting
14
14
  const passphrase = document.querySelector(".passphrase_change").querySelector("input")
@@ -120,4 +120,4 @@
120
120
  });
121
121
 
122
122
  })
123
- <% end %>
123
+ </script>
@@ -0,0 +1,3 @@
1
+ .pb_pb_circle_chart {
2
+
3
+ }
@@ -0,0 +1,62 @@
1
+
2
+ import React, { useMemo } from 'react'
3
+ import classnames from 'classnames'
4
+ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
5
+ import Highcharts from "highcharts"
6
+ import HighchartsReact from "highcharts-react-official"
7
+ import pbCircleGraphTheme from './pbCircleChartTheme'
8
+ import { globalProps } from '../utilities/globalProps'
9
+
10
+ type PbCircleChartProps = {
11
+ aria?: { [key: string]: string },
12
+ className?: string,
13
+ data?: { [key: string]: string },
14
+ id?: string,
15
+ htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
16
+ options: Record<string, unknown>
17
+ }
18
+
19
+ const PbCircleChart = (props: PbCircleChartProps) => {
20
+ const {
21
+ aria = {},
22
+ className,
23
+ data = {},
24
+ id,
25
+ htmlOptions = {},
26
+ options
27
+ } = props
28
+
29
+ const ariaProps = buildAriaProps(aria)
30
+ const dataProps = buildDataProps(data)
31
+ const htmlProps = buildHtmlProps(htmlOptions);
32
+ const classes = classnames(buildCss('pb_pb_circle_chart'), globalProps(props), className)
33
+
34
+ const mergedOptions = useMemo(() => {
35
+ if (!options || typeof options !== "object") {
36
+ // eslint-disable-next-line no-console
37
+ console.error("❌ Invalid options passed to <PbCircleChart />", options)
38
+ return {}
39
+ }
40
+
41
+ return Highcharts.merge({}, pbCircleGraphTheme, options)
42
+ }, [options])
43
+
44
+ return (
45
+
46
+ <div>
47
+ <HighchartsReact
48
+ containerProps={{
49
+ className: classnames(globalProps, className),
50
+ id: id,
51
+ ...ariaProps,
52
+ ...dataProps,
53
+ ...htmlProps
54
+ }}
55
+ highcharts={Highcharts}
56
+ options={mergedOptions}
57
+ />
58
+ </div>
59
+ )
60
+ }
61
+
62
+ export default PbCircleChart