playbook_ui 14.13.0.pre.alpha.PBNTR5596029 → 14.13.0.pre.alpha.PLAY1856doc6166

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 (79) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -1
  3. data/app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.scss +58 -0
  4. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +64 -0
  5. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +1 -0
  6. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
  7. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  8. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +3 -1
  9. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb +2 -2
  10. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md +4 -1
  11. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +1 -0
  12. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +1 -1
  13. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +71 -36
  14. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx +6 -6
  15. data/app/pb_kits/playbook/pb_drawer/docs/example.yml +1 -0
  16. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb +1 -2
  17. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb +27 -0
  18. data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +1 -3
  19. data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +1 -1
  20. data/app/pb_kits/playbook/pb_icon_button/icon_button.rb +3 -0
  21. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +1 -6
  22. data/app/pb_kits/playbook/pb_nav/item.html.erb +7 -19
  23. data/app/pb_kits/playbook/pb_nav/nav.html.erb +3 -8
  24. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +1 -6
  25. data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -6
  26. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss +2 -1
  27. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb +1 -0
  28. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx +7 -0
  29. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md +1 -0
  30. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb +47 -0
  31. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx +88 -0
  32. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md +1 -0
  33. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +1 -1
  34. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb +51 -0
  35. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md +2 -0
  36. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +96 -0
  37. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +101 -0
  38. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md +1 -0
  39. data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
  40. data/app/pb_kits/playbook/pb_table/docs/index.js +3 -1
  41. data/app/pb_kits/playbook/pb_table/index.ts +41 -9
  42. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +4 -0
  43. data/app/pb_kits/playbook/pb_table/table_body.html.erb +13 -7
  44. data/app/pb_kits/playbook/pb_table/table_body.rb +2 -0
  45. data/app/pb_kits/playbook/pb_table/table_row.html.erb +14 -7
  46. data/app/pb_kits/playbook/pb_table/table_row.rb +14 -1
  47. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +14 -0
  48. data/app/pb_kits/playbook/pb_text_input/index.js +9 -0
  49. data/app/pb_kits/playbook/pb_text_input/text_input.rb +5 -2
  50. data/dist/chunks/{_typeahead-TUUtEUg8.js → _typeahead-CAIQfP7X.js} +2 -2
  51. data/dist/chunks/_weekday_stacked-Dq02Kbeo.js +45 -0
  52. data/dist/chunks/{lib-DjpLC8uO.js → lib-D3us1bGD.js} +2 -2
  53. data/dist/chunks/{pb_form_validation-S56UaHZl.js → pb_form_validation-BpihMSOQ.js} +1 -1
  54. data/dist/chunks/vendor.js +1 -1
  55. data/dist/menu.yml +0 -7
  56. data/dist/playbook-doc.js +1 -1
  57. data/dist/playbook-rails-react-bindings.js +1 -1
  58. data/dist/playbook-rails.js +1 -1
  59. data/dist/playbook.css +1 -1
  60. data/lib/playbook/version.rb +1 -1
  61. metadata +20 -23
  62. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss +0 -66
  63. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx +0 -98
  64. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +0 -28
  65. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb +0 -42
  66. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb +0 -19
  67. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx +0 -26
  68. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb +0 -10
  69. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx +0 -17
  70. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx +0 -19
  71. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb +0 -16
  72. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb +0 -35
  73. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx +0 -42
  74. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb +0 -13
  75. data/app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml +0 -15
  76. data/app/pb_kits/playbook/pb_avatar_action_button/docs/index.js +0 -4
  77. data/app/pb_kits/playbook/pb_avatar_action_button/pb_avatar_action_button.test.js +0 -31
  78. data/dist/chunks/_weekday_stacked--GSH9pBR.js +0 -45
  79. /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.PBNTR5596029"
5
+ VERSION = "14.13.0.pre.alpha.PLAY1856doc6166"
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.PBNTR5596029
4
+ version: 14.13.0.pre.alpha.PLAY1856doc6166
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-11 00:00:00.000000000 Z
12
+ date: 2025-02-18 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -384,22 +384,6 @@ files:
384
384
  - app/pb_kits/playbook/pb_avatar/docs/_footer.md
385
385
  - app/pb_kits/playbook/pb_avatar/docs/example.yml
386
386
  - 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
387
  - app/pb_kits/playbook/pb_background/_background.scss
404
388
  - app/pb_kits/playbook/pb_background/_background.tsx
405
389
  - app/pb_kits/playbook/pb_background/background.html.erb
@@ -450,6 +434,7 @@ files:
450
434
  - app/pb_kits/playbook/pb_badge/docs/_description.md
451
435
  - app/pb_kits/playbook/pb_badge/docs/example.yml
452
436
  - app/pb_kits/playbook/pb_badge/docs/index.js
437
+ - app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.scss
453
438
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss
454
439
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
455
440
  - app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
@@ -478,6 +463,8 @@ files:
478
463
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
479
464
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
480
465
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
466
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
467
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
481
468
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
482
469
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
483
470
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
@@ -1631,6 +1618,7 @@ files:
1631
1618
  - app/pb_kits/playbook/pb_icon/icon.test.js
1632
1619
  - app/pb_kits/playbook/pb_icon_button/_icon_button.scss
1633
1620
  - app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb
1621
+ - app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb
1634
1622
  - app/pb_kits/playbook/pb_icon_button/docs/example.yml
1635
1623
  - app/pb_kits/playbook/pb_icon_button/icon_button.html.erb
1636
1624
  - app/pb_kits/playbook/pb_icon_button/icon_button.rb
@@ -2277,6 +2265,7 @@ files:
2277
2265
  - app/pb_kits/playbook/pb_progress_pills/docs/_description.md
2278
2266
  - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb
2279
2267
  - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx
2268
+ - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md
2280
2269
  - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.html.erb
2281
2270
  - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.jsx
2282
2271
  - app/pb_kits/playbook/pb_progress_pills/docs/example.yml
@@ -2745,12 +2734,17 @@ files:
2745
2734
  - app/pb_kits/playbook/pb_table/docs/_table_vertical_border.jsx
2746
2735
  - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb
2747
2736
  - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx
2737
+ - app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb
2738
+ - app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx
2739
+ - app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md
2748
2740
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.html.erb
2749
2741
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx
2750
2742
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md
2751
2743
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_react.md
2744
+ - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb
2752
2745
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx
2753
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md
2746
+ - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md
2747
+ - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_react.md
2754
2748
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx
2755
2749
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md
2756
2750
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb
@@ -2763,6 +2757,9 @@ files:
2763
2757
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md
2764
2758
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb
2765
2759
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md
2760
+ - app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb
2761
+ - app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx
2762
+ - app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md
2766
2763
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx
2767
2764
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md
2768
2765
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb
@@ -3334,11 +3331,11 @@ files:
3334
3331
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3335
3332
  - app/pb_kits/playbook/utilities/text.ts
3336
3333
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3337
- - dist/chunks/_typeahead-TUUtEUg8.js
3338
- - dist/chunks/_weekday_stacked--GSH9pBR.js
3334
+ - dist/chunks/_typeahead-CAIQfP7X.js
3335
+ - dist/chunks/_weekday_stacked-Dq02Kbeo.js
3339
3336
  - dist/chunks/lazysizes-B7xYodB-.js
3340
- - dist/chunks/lib-DjpLC8uO.js
3341
- - dist/chunks/pb_form_validation-S56UaHZl.js
3337
+ - dist/chunks/lib-D3us1bGD.js
3338
+ - dist/chunks/pb_form_validation-BpihMSOQ.js
3342
3339
  - dist/chunks/vendor.js
3343
3340
  - dist/menu.yml
3344
3341
  - 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
- })