playbook_ui 14.13.0.pre.alpha.play1900progresspillwidth6122 → 14.13.0.pre.alpha.rails8compatible6229

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 +19 -37
  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.rails8compatible6229"
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.rails8compatible6229
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
@@ -67,20 +67,6 @@ dependencies:
67
67
  - - '='
68
68
  - !ruby/object:Gem::Version
69
69
  version: 2.6.1
70
- - !ruby/object:Gem::Dependency
71
- name: view_component
72
- requirement: !ruby/object:Gem::Requirement
73
- requirements:
74
- - - '='
75
- - !ruby/object:Gem::Version
76
- version: 2.83.0
77
- type: :runtime
78
- prerelease: false
79
- version_requirements: !ruby/object:Gem::Requirement
80
- requirements:
81
- - - '='
82
- - !ruby/object:Gem::Version
83
- version: 2.83.0
84
70
  - !ruby/object:Gem::Dependency
85
71
  name: webpacker-react
86
72
  requirement: !ruby/object:Gem::Requirement
@@ -288,6 +274,7 @@ files:
288
274
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.html.erb
289
275
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx
290
276
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.md
277
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_custom_cell.jsx
291
278
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb
292
279
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx
293
280
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md
@@ -333,7 +320,9 @@ files:
333
320
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx
334
321
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md
335
322
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md
323
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb
336
324
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx
325
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md
337
326
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
338
327
  - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
339
328
  - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
@@ -384,22 +373,6 @@ files:
384
373
  - app/pb_kits/playbook/pb_avatar/docs/_footer.md
385
374
  - app/pb_kits/playbook/pb_avatar/docs/example.yml
386
375
  - 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
376
  - app/pb_kits/playbook/pb_background/_background.scss
404
377
  - app/pb_kits/playbook/pb_background/_background.tsx
405
378
  - app/pb_kits/playbook/pb_background/background.html.erb
@@ -450,6 +423,7 @@ files:
450
423
  - app/pb_kits/playbook/pb_badge/docs/_description.md
451
424
  - app/pb_kits/playbook/pb_badge/docs/example.yml
452
425
  - app/pb_kits/playbook/pb_badge/docs/index.js
426
+ - app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.scss
453
427
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss
454
428
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
455
429
  - app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
@@ -478,6 +452,8 @@ files:
478
452
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
479
453
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
480
454
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
455
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
456
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
481
457
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
482
458
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
483
459
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
@@ -682,6 +658,8 @@ files:
682
658
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_swift.md
683
659
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb
684
660
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md
661
+ - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx
662
+ - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md
685
663
  - app/pb_kits/playbook/pb_checkbox/docs/_description.md
686
664
  - app/pb_kits/playbook/pb_checkbox/docs/example.yml
687
665
  - app/pb_kits/playbook/pb_checkbox/docs/index.js
@@ -2124,6 +2102,8 @@ files:
2124
2102
  - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.html.erb
2125
2103
  - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx
2126
2104
  - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.md
2105
+ - app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx
2106
+ - app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md
2127
2107
  - app/pb_kits/playbook/pb_overlay/docs/example.yml
2128
2108
  - app/pb_kits/playbook/pb_overlay/docs/index.js
2129
2109
  - app/pb_kits/playbook/pb_overlay/overlay.html.erb
@@ -2758,8 +2738,10 @@ files:
2758
2738
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx
2759
2739
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md
2760
2740
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_react.md
2741
+ - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb
2761
2742
  - 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
2743
+ - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md
2744
+ - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_react.md
2763
2745
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx
2764
2746
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md
2765
2747
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb
@@ -3346,11 +3328,11 @@ files:
3346
3328
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3347
3329
  - app/pb_kits/playbook/utilities/text.ts
3348
3330
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3349
- - dist/chunks/_typeahead-C_q1qAtC.js
3350
- - dist/chunks/_weekday_stacked-CB-T-41Z.js
3331
+ - dist/chunks/_typeahead-PqkcDf1H.js
3332
+ - dist/chunks/_weekday_stacked-C7J0S4f7.js
3351
3333
  - dist/chunks/lazysizes-B7xYodB-.js
3352
- - dist/chunks/lib-WQEeEj3t.js
3353
- - dist/chunks/pb_form_validation-Cq64l4zn.js
3334
+ - dist/chunks/lib-D3us1bGD.js
3335
+ - dist/chunks/pb_form_validation-BpihMSOQ.js
3354
3336
  - dist/chunks/vendor.js
3355
3337
  - dist/menu.yml
3356
3338
  - 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
- })