playbook_ui 14.13.0.pre.alpha.play1900progresspillwidth6122 → 14.13.0.pre.alpha.rails8compatible6228

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 (73) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +6 -5
  5. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +8 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_custom_cell.jsx +75 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +3 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +33 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +3 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
  14. data/app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.scss +58 -0
  15. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +64 -0
  16. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +1 -0
  17. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  19. data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +17 -8
  20. data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +16 -0
  21. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx +69 -0
  22. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md +1 -0
  23. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -1
  24. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
  25. data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +4 -0
  26. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +37 -0
  27. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md +1 -0
  28. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +1 -0
  29. data/app/pb_kits/playbook/pb_overlay/docs/index.js +1 -0
  30. data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx +48 -10
  31. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +1 -6
  32. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +1 -5
  33. data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +1 -5
  34. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +1 -5
  35. data/app/pb_kits/playbook/pb_radio/radio.html.erb +6 -11
  36. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +1 -1
  37. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb +51 -0
  38. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md +2 -0
  39. data/app/pb_kits/playbook/pb_table/docs/example.yml +1 -0
  40. data/app/pb_kits/playbook/pb_table/index.ts +41 -9
  41. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +4 -0
  42. data/app/pb_kits/playbook/pb_table/table_row.html.erb +1 -0
  43. data/app/pb_kits/playbook/pb_table/table_row.rb +10 -1
  44. data/dist/chunks/{_typeahead-C_q1qAtC.js → _typeahead-PqkcDf1H.js} +3 -3
  45. data/dist/chunks/_weekday_stacked-C7J0S4f7.js +45 -0
  46. data/dist/chunks/{lib-WQEeEj3t.js → lib-D3us1bGD.js} +1 -1
  47. data/dist/chunks/{pb_form_validation-Cq64l4zn.js → pb_form_validation-BpihMSOQ.js} +1 -1
  48. data/dist/chunks/vendor.js +1 -1
  49. data/dist/menu.yml +0 -7
  50. data/dist/playbook-doc.js +1 -1
  51. data/dist/playbook-rails-react-bindings.js +1 -1
  52. data/dist/playbook-rails.js +1 -1
  53. data/dist/playbook.css +1 -1
  54. data/lib/playbook/version.rb +1 -1
  55. metadata +27 -25
  56. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss +0 -66
  57. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx +0 -98
  58. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +0 -28
  59. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb +0 -42
  60. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb +0 -19
  61. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx +0 -26
  62. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb +0 -10
  63. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx +0 -17
  64. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx +0 -19
  65. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb +0 -16
  66. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb +0 -35
  67. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx +0 -42
  68. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb +0 -13
  69. data/app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml +0 -15
  70. data/app/pb_kits/playbook/pb_avatar_action_button/docs/index.js +0 -4
  71. data/app/pb_kits/playbook/pb_avatar_action_button/pb_avatar_action_button.test.js +0 -31
  72. data/dist/chunks/_weekday_stacked-CB-T-41Z.js +0 -45
  73. /data/app/pb_kits/playbook/pb_table/docs/{_table_with_collapsible_with_custom_click.md → _table_with_collapsible_with_custom_click_react.md} +0 -0
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.13.0"
5
- VERSION = "14.13.0.pre.alpha.play1900progresspillwidth6122"
5
+ VERSION = "14.13.0.pre.alpha.rails8compatible6228"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 14.13.0.pre.alpha.play1900progresspillwidth6122
4
+ version: 14.13.0.pre.alpha.rails8compatible6228
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2025-02-13 00:00:00.000000000 Z
12
+ date: 2025-02-21 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -71,16 +71,22 @@ dependencies:
71
71
  name: view_component
72
72
  requirement: !ruby/object:Gem::Requirement
73
73
  requirements:
74
- - - '='
74
+ - - ">="
75
75
  - !ruby/object:Gem::Version
76
76
  version: 2.83.0
77
+ - - "<"
78
+ - !ruby/object:Gem::Version
79
+ version: '3.0'
77
80
  type: :runtime
78
81
  prerelease: false
79
82
  version_requirements: !ruby/object:Gem::Requirement
80
83
  requirements:
81
- - - '='
84
+ - - ">="
82
85
  - !ruby/object:Gem::Version
83
86
  version: 2.83.0
87
+ - - "<"
88
+ - !ruby/object:Gem::Version
89
+ version: '3.0'
84
90
  - !ruby/object:Gem::Dependency
85
91
  name: webpacker-react
86
92
  requirement: !ruby/object:Gem::Requirement
@@ -288,6 +294,7 @@ files:
288
294
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.html.erb
289
295
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx
290
296
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.md
297
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_custom_cell.jsx
291
298
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb
292
299
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx
293
300
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md
@@ -333,7 +340,9 @@ files:
333
340
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx
334
341
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md
335
342
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md
343
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb
336
344
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx
345
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md
337
346
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
338
347
  - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
339
348
  - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
@@ -384,22 +393,6 @@ files:
384
393
  - app/pb_kits/playbook/pb_avatar/docs/_footer.md
385
394
  - app/pb_kits/playbook/pb_avatar/docs/example.yml
386
395
  - app/pb_kits/playbook/pb_avatar/docs/index.js
387
- - app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss
388
- - app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx
389
- - app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb
390
- - app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb
391
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb
392
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx
393
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb
394
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx
395
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx
396
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb
397
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb
398
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx
399
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb
400
- - app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml
401
- - app/pb_kits/playbook/pb_avatar_action_button/docs/index.js
402
- - app/pb_kits/playbook/pb_avatar_action_button/pb_avatar_action_button.test.js
403
396
  - app/pb_kits/playbook/pb_background/_background.scss
404
397
  - app/pb_kits/playbook/pb_background/_background.tsx
405
398
  - app/pb_kits/playbook/pb_background/background.html.erb
@@ -450,6 +443,7 @@ files:
450
443
  - app/pb_kits/playbook/pb_badge/docs/_description.md
451
444
  - app/pb_kits/playbook/pb_badge/docs/example.yml
452
445
  - app/pb_kits/playbook/pb_badge/docs/index.js
446
+ - app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.scss
453
447
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss
454
448
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
455
449
  - app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
@@ -478,6 +472,8 @@ files:
478
472
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
479
473
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
480
474
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
475
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
476
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
481
477
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
482
478
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
483
479
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
@@ -682,6 +678,8 @@ files:
682
678
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_swift.md
683
679
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb
684
680
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md
681
+ - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx
682
+ - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md
685
683
  - app/pb_kits/playbook/pb_checkbox/docs/_description.md
686
684
  - app/pb_kits/playbook/pb_checkbox/docs/example.yml
687
685
  - app/pb_kits/playbook/pb_checkbox/docs/index.js
@@ -2124,6 +2122,8 @@ files:
2124
2122
  - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.html.erb
2125
2123
  - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx
2126
2124
  - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.md
2125
+ - app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx
2126
+ - app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md
2127
2127
  - app/pb_kits/playbook/pb_overlay/docs/example.yml
2128
2128
  - app/pb_kits/playbook/pb_overlay/docs/index.js
2129
2129
  - app/pb_kits/playbook/pb_overlay/overlay.html.erb
@@ -2758,8 +2758,10 @@ files:
2758
2758
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx
2759
2759
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md
2760
2760
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_react.md
2761
+ - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb
2761
2762
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx
2762
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md
2763
+ - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md
2764
+ - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_react.md
2763
2765
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx
2764
2766
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md
2765
2767
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb
@@ -3346,11 +3348,11 @@ files:
3346
3348
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3347
3349
  - app/pb_kits/playbook/utilities/text.ts
3348
3350
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3349
- - dist/chunks/_typeahead-C_q1qAtC.js
3350
- - dist/chunks/_weekday_stacked-CB-T-41Z.js
3351
+ - dist/chunks/_typeahead-PqkcDf1H.js
3352
+ - dist/chunks/_weekday_stacked-C7J0S4f7.js
3351
3353
  - dist/chunks/lazysizes-B7xYodB-.js
3352
- - dist/chunks/lib-WQEeEj3t.js
3353
- - dist/chunks/pb_form_validation-Cq64l4zn.js
3354
+ - dist/chunks/lib-D3us1bGD.js
3355
+ - dist/chunks/pb_form_validation-BpihMSOQ.js
3354
3356
  - dist/chunks/vendor.js
3355
3357
  - dist/menu.yml
3356
3358
  - dist/playbook-doc.js
@@ -1,66 +0,0 @@
1
- [class^=pb_avatar_action_button_kit] {
2
-
3
- $icon_size: 0px;
4
- $border_size: 0px;
5
-
6
- $action-colors: (
7
- "add": $primary,
8
- "remove": $error,
9
- );
10
-
11
- @each $key, $value in $action-colors {
12
- &[class*=_#{$key}] a {
13
- color: $value;
14
- }
15
- }
16
-
17
- @mixin icon-base {
18
- &.dark{
19
- background-color: $bg_dark
20
- }
21
- width: $icon_size;
22
- height: $icon_size;
23
- position: absolute;
24
- background-color: $white;
25
- border-radius: $icon_size;
26
- font-size: ($icon_size - $border_size * 2);
27
- display: flex;
28
- justify-content: center;
29
- align-items: center;
30
- z-index: 1;
31
- }
32
-
33
- @each $name, $size in $avatar-sizes {
34
-
35
- &[class*=_#{$name}] {
36
-
37
- $avatar_size: map-get($avatar-sizes, $name);
38
- $icon_size: $avatar_size / 2;
39
- $border_size: $icon_size / 10;
40
-
41
- position: relative;
42
- width: $avatar_size * 1.25;
43
- height: $avatar_size * 1.1;
44
- display: flex;
45
-
46
- [class^=pb_tooltip_kit] {
47
- justify-self: center;
48
- }
49
-
50
- &[class*=_bottom] .icon {
51
- @include icon-base;
52
- top: $icon_size * 1.27;
53
- }
54
- &[class*=_top] .icon {
55
- @include icon-base;
56
- bottom: $icon_size * 1.27;
57
- }
58
- &[class*=_right] .icon {
59
- left: $icon_size * 1.5;
60
- }
61
- &[class*=_left] [class^=pb_avatar_kit] {
62
- padding-left: $icon_size / 2;
63
- }
64
- }
65
- }
66
- }
@@ -1,98 +0,0 @@
1
- import React from 'react'
2
- import classnames from 'classnames'
3
-
4
- import {
5
- buildAriaProps,
6
- buildCss,
7
- buildDataProps,
8
- buildHtmlProps } from '../utilities/props'
9
- import { globalProps } from '../utilities/globalProps'
10
-
11
- import Avatar from '../pb_avatar/_avatar'
12
- import Icon from '../pb_icon/_icon'
13
-
14
- type AvatarActionButtonProps = {
15
- action?: "add" | "remove",
16
- aria?: {[key: string]: string},
17
- linkAriaLabel?: string,
18
- className?: string,
19
- dark?: boolean,
20
- data?: {[key: string]: string},
21
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
22
- id?: string,
23
- imageAlt?: string,
24
- imageUrl?: string,
25
- linkUrl?: string,
26
- name?: string,
27
- onClick?: React.MouseEventHandler<HTMLSpanElement>,
28
- placement?: string,
29
- size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
30
- }
31
-
32
- const AvatarActionButton = (props: AvatarActionButtonProps): React.ReactElement => {
33
- const {
34
- action = 'add',
35
- aria = {},
36
- linkAriaLabel,
37
- className,
38
- dark = false,
39
- data = {},
40
- htmlOptions = {},
41
- id,
42
- imageAlt = '',
43
- imageUrl,
44
- linkUrl,
45
- name,
46
- onClick,
47
- placement = 'bottom left',
48
- size = 'md',
49
- } = props
50
-
51
- const ariaProps = buildAriaProps(aria)
52
- const dataProps = buildDataProps(data)
53
- const htmlProps = buildHtmlProps(htmlOptions)
54
-
55
- const classes = classnames(buildCss(
56
- 'pb_avatar_action_button_kit',
57
- action,
58
- placement,
59
- size),
60
- globalProps(props),
61
- className)
62
-
63
- const icons = {
64
- add: 'plus-circle',
65
- remove: 'times-circle',
66
- }
67
-
68
- return (
69
- <div
70
- {...ariaProps}
71
- {...dataProps}
72
- {...htmlProps}
73
- className={classes}
74
- id={id}
75
- >
76
- <a
77
- aria-label={linkAriaLabel}
78
- href={linkUrl}
79
- onClick={onClick}
80
- >
81
- <Avatar
82
- imageAlt={imageAlt}
83
- imageUrl={imageUrl}
84
- name={name}
85
- size={size}
86
- />
87
- <div className={`icon ${dark ? 'dark' : ''}`}>
88
- <Icon
89
- dark={dark}
90
- icon={icons[action]}
91
- />
92
- </div>
93
- </a>
94
- </div>
95
- )
96
- }
97
-
98
- export default AvatarActionButton
@@ -1,28 +0,0 @@
1
- <%= pb_content_tag do %>
2
- <% if object.tooltip_text.present? %>
3
- <%= pb_rails("tooltip", props: {
4
- trigger_element_id: object.tooltip_id,
5
- tooltip_id: "tooltip-2",
6
- position: 'top'
7
- }) do %>
8
- <%= object.tooltip_text %>
9
- <% end %>
10
- <% end %>
11
-
12
- <%= link_to object.link_url, id: object.tooltip_id, 'aria-label': object.link_aria_label do %>
13
- <%= pb_rails("avatar", props: {
14
- dark: object.dark,
15
- name: object.name,
16
- size: object.size,
17
- image_alt: object.image_alt,
18
- image_url: object.image_url,
19
- class: "avatar_action"
20
- }) %>
21
- <div class="icon <%= object.dark ? 'dark' : '' %> ">
22
- <%= pb_rails("icon", props: {
23
- dark: object.dark,
24
- icon: object.action_icons
25
- }) %>
26
- </div>
27
- <% end %>
28
- <% end %>
@@ -1,42 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Playbook
4
- module PbAvatarActionButton
5
- class AvatarActionButton < Playbook::KitBase
6
- prop :action, type: Playbook::Props::String,
7
- default: "add"
8
- prop :link_aria_label, type: Playbook::Props::String
9
- prop :image_alt, type: Playbook::Props::String
10
- prop :image_url, type: Playbook::Props::String
11
- prop :link_url, type: Playbook::Props::String, default: "#"
12
- prop :tooltip_text, type: Playbook::Props::String
13
- prop :tooltip_id, type: Playbook::Props::String
14
- prop :name, type: Playbook::Props::String,
15
- default: ""
16
- prop :size, type: Playbook::Props::Enum,
17
- values: %w[xs sm md lg xl],
18
- default: "md"
19
- prop :placement, type: Playbook::Props::Enum,
20
- values: %w[bottom_left bottom_right top_left top_right],
21
- default: "bottom_left"
22
-
23
- def classname
24
- generate_classname("pb_avatar_action_button_kit", action, size, placement)
25
- end
26
-
27
- def action_icons
28
- icon_hash = {
29
- add: "plus-circle",
30
- remove: "times-circle",
31
- }
32
- # if an 'action' prop is passed that isn't
33
- # in the icon_hash an empty string is returned
34
- # instead of a null value, which would break the page
35
-
36
- # double pipe ruby syntax below is essentially a reduced if-else statement
37
- # if icon_hash[action.to_sym] returns a falsey value, return "" instead
38
- icon_hash[action.to_sym] ||= ""
39
- end
40
- end
41
- end
42
- end
@@ -1,19 +0,0 @@
1
- <div class="pb--doc-demo-row">
2
-
3
- <%= pb_rails("avatar_action_button", props: {
4
- link_aria_label: "Add Sophia Carden",
5
- name: "Sophia Carden",
6
- image_alt: "Add Sophia Carden",
7
- image_url: "https://randomuser.me/api/portraits/women/8.jpg",
8
- action: "add",
9
- }) %>
10
-
11
- <%= pb_rails("avatar_action_button", props: {
12
- link_aria_label: "Remove Sophia Carden",
13
- name: "Sophia Carden",
14
- image_alt: "Remove Sophia Carden",
15
- image_url: "https://randomuser.me/api/portraits/women/8.jpg",
16
- action: "remove",
17
- }) %>
18
-
19
- </div>
@@ -1,26 +0,0 @@
1
- import React from 'react'
2
-
3
- import AvatarActionButton from '../_avatar_action_button'
4
-
5
- const AvatarActionButtonActions = (props) => (
6
- <div className="pb--doc-demo-row">
7
- <AvatarActionButton
8
- action="add"
9
- imageAlt="Add Sophia Carden"
10
- imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
11
- linkAriaLabel="Add Sophia Carden"
12
- name="Sophia Carden"
13
- {...props}
14
- />
15
- <AvatarActionButton
16
- action="remove"
17
- imageAlt="Remove Sophia Carden"
18
- imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
19
- linkAriaLabel="Remove Sophia Carden"
20
- name="Sophia Carden"
21
- {...props}
22
- />
23
- </div>
24
- )
25
-
26
- export default AvatarActionButtonActions
@@ -1,10 +0,0 @@
1
- <div class="pb--doc-demo-row">
2
-
3
- <%= pb_rails("avatar_action_button", props: {
4
- link_aria_label: "Sophia Carden",
5
- name: "Sophia Carden",
6
- image_alt: "Sophia Carden",
7
- image_url: "https://randomuser.me/api/portraits/women/8.jpg"
8
- }) %>
9
-
10
- </div>
@@ -1,17 +0,0 @@
1
- import React from 'react'
2
-
3
- import AvatarActionButton from '../_avatar_action_button'
4
-
5
- const AvatarActionButtonDefault = (props) => (
6
- <div className="pb--doc-demo-row">
7
- <AvatarActionButton
8
- imageAlt="Sophia Carden"
9
- imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
10
- linkAriaLabel="Sophia Carden"
11
- name="Sophia Carden"
12
- {...props}
13
- />
14
- </div>
15
- )
16
-
17
- export default AvatarActionButtonDefault
@@ -1,19 +0,0 @@
1
- import React from 'react'
2
-
3
- import AvatarActionButton from '../_avatar_action_button'
4
-
5
- const AvatarActionButtonOnClick = (props) => (
6
- <div className="pb--doc-demo-row">
7
- <AvatarActionButton
8
- imageAlt="Sophia Carden"
9
- imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
10
- linkAriaLabel="Alert Sophia Carden"
11
- linkUrl="https://www.google.com"
12
- name="Sophia Carden"
13
- onClick={() => alert('clicked!')}
14
- {...props}
15
- />
16
- </div>
17
- )
18
-
19
- export default AvatarActionButtonOnClick
@@ -1,16 +0,0 @@
1
- <div class="pb--doc-demo-row">
2
-
3
- <%= pb_rails("avatar_action_button", props: {
4
- link_aria_label: "Alert Sophia Carden",
5
- name: "Sophia Carden",
6
- id: "clickable",
7
- link_url: "http://www.google.com",
8
- image_alt: "Sophia Carden",
9
- image_url: "https://randomuser.me/api/portraits/women/8.jpg",
10
- }) %>
11
-
12
- <%= javascript_tag do %>
13
- document.querySelector('#clickable').addEventListener('click', () => alert('clickable clicked!'))
14
- <% end %>
15
-
16
- </div>
@@ -1,35 +0,0 @@
1
- <div class="pb--doc-demo-row">
2
-
3
- <%= pb_rails("avatar_action_button", props: {
4
- link_aria_label: "Sophia Carden",
5
- name: "Sophia Carden",
6
- image_alt: "Sophia Carden",
7
- image_url: "https://randomuser.me/api/portraits/women/8.jpg",
8
- placement: "bottom_left"
9
- }) %>
10
-
11
- <%= pb_rails("avatar_action_button", props: {
12
- link_aria_label: "Sophia Carden",
13
- name: "Sophia Carden",
14
- image_alt: "Sophia Carden",
15
- image_url: "https://randomuser.me/api/portraits/women/8.jpg",
16
- placement: "bottom_right"
17
- }) %>
18
-
19
- <%= pb_rails("avatar_action_button", props: {
20
- link_aria_label: "Sophia Carden",
21
- name: "Sophia Carden",
22
- image_alt: "Sophia Carden",
23
- image_url: "https://randomuser.me/api/portraits/women/8.jpg",
24
- placement: "top_left"
25
- }) %>
26
-
27
- <%= pb_rails("avatar_action_button", props: {
28
- link_aria_label: "Sophia Carden",
29
- name: "Sophia Carden",
30
- image_alt: "Sophia Carden",
31
- image_url: "https://randomuser.me/api/portraits/women/8.jpg",
32
- placement: "top_right"
33
- }) %>
34
-
35
- </div>
@@ -1,42 +0,0 @@
1
- import React from 'react'
2
-
3
- import AvatarActionButton from '../_avatar_action_button'
4
-
5
- const AvatarActionButtonPlacement = (props) => (
6
- <div className="pb--doc-demo-row">
7
- <AvatarActionButton
8
- imageAlt="Sophia Carden"
9
- imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
10
- linkAriaLabel="Sophia Carden"
11
- name="Sophia Carden"
12
- placement="bottom_left"
13
- {...props}
14
- />
15
- <AvatarActionButton
16
- imageAlt="Sophia Carden"
17
- imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
18
- linkAriaLabel="Sophia Carden"
19
- name="Sophia Carden"
20
- placement="bottom_right"
21
- {...props}
22
- />
23
- <AvatarActionButton
24
- imageAlt="Sophia Carden"
25
- imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
26
- linkAriaLabel="Sophia Carden"
27
- name="Sophia Carden"
28
- placement="top_left"
29
- {...props}
30
- />
31
- <AvatarActionButton
32
- imageAlt="Sophia Carden"
33
- imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
34
- linkAriaLabel="Sophia Carden"
35
- name="Sophia Carden"
36
- placement="top_right"
37
- {...props}
38
- />
39
- </div>
40
- )
41
-
42
- export default AvatarActionButtonPlacement
@@ -1,13 +0,0 @@
1
- <div class="pb--doc-demo-row">
2
-
3
- <%= pb_rails("avatar_action_button", props: {
4
- link_aria_label: "Sophia Carden",
5
- name: "Sophia Carden",
6
- link_url: "http://www.google.com",
7
- image_alt: "Sophia Carden",
8
- image_url: "https://randomuser.me/api/portraits/women/8.jpg",
9
- tooltip_text: "Tooltip Text",
10
- tooltip_id: "avatar_1",
11
- }) %>
12
-
13
- </div>
@@ -1,15 +0,0 @@
1
- examples:
2
-
3
- rails:
4
- - avatar_action_button_default: Default
5
- - avatar_action_button_placement: Placement
6
- - avatar_action_button_actions: Actions
7
- - avatar_action_button_onclick: On Click
8
- - avatar_action_button_tooltip: Tooltip
9
-
10
-
11
- react:
12
- - avatar_action_button_default: Default
13
- - avatar_action_button_placement: Placement
14
- - avatar_action_button_actions: Actions
15
- - avatar_action_button_on_click: On Click
@@ -1,4 +0,0 @@
1
- export { default as AvatarActionButtonDefault } from './_avatar_action_button_default.jsx'
2
- export { default as AvatarActionButtonPlacement } from './_avatar_action_button_placement.jsx'
3
- export { default as AvatarActionButtonActions } from './_avatar_action_button_actions.jsx'
4
- export { default as AvatarActionButtonOnClick } from './_avatar_action_button_on_click.jsx'
@@ -1,31 +0,0 @@
1
- import React from 'react'
2
- import { render, screen } from '../utilities/test-utils'
3
-
4
- import AvatarActionButton from './_avatar_action_button'
5
-
6
- const imageUrl = 'https://randomuser.me/api/portraits/women/8.jpg',
7
- testId = 'scarden',
8
- name = 'Sophia Carden',
9
- imageAlt = 'Sophia Carden Profile'
10
-
11
- test('loads the given image url and name', () => {
12
- render(
13
- <AvatarActionButton
14
- data={{ testid: testId }}
15
- imageAlt={imageAlt}
16
- imageUrl={imageUrl}
17
- linkAriaLabel={name}
18
- name={name}
19
- />
20
- )
21
-
22
- const kit = screen.getByTestId(testId)
23
- const image = screen.getByAltText(imageAlt)
24
- const link = kit.children[0]
25
-
26
- expect(kit).toHaveClass('pb_avatar_action_button_kit_add_bottom_left_md')
27
- expect(image).toHaveAttribute('data-src', imageUrl)
28
- expect(image).toHaveAttribute('src', imageUrl)
29
- expect(image).toHaveAttribute('alt', imageAlt)
30
- expect(link).toHaveAttribute('aria-label', name)
31
- })