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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +6 -5
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +8 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_custom_cell.jsx +75 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +3 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.scss +58 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +64 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +17 -8
- data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +16 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx +69 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +4 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +37 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx +48 -10
- data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +1 -6
- data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +1 -5
- data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +1 -5
- data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +1 -5
- data/app/pb_kits/playbook/pb_radio/radio.html.erb +6 -11
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb +51 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_table/index.ts +41 -9
- data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +4 -0
- data/app/pb_kits/playbook/pb_table/table_row.html.erb +1 -0
- data/app/pb_kits/playbook/pb_table/table_row.rb +10 -1
- data/dist/chunks/{_typeahead-C_q1qAtC.js → _typeahead-PqkcDf1H.js} +3 -3
- data/dist/chunks/_weekday_stacked-C7J0S4f7.js +45 -0
- data/dist/chunks/{lib-WQEeEj3t.js → lib-D3us1bGD.js} +1 -1
- data/dist/chunks/{pb_form_validation-Cq64l4zn.js → pb_form_validation-BpihMSOQ.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +0 -7
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +27 -25
- data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss +0 -66
- data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx +0 -98
- data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +0 -28
- data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb +0 -42
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb +0 -19
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx +0 -26
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb +0 -10
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx +0 -17
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx +0 -19
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb +0 -16
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb +0 -35
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx +0 -42
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb +0 -13
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml +0 -15
- data/app/pb_kits/playbook/pb_avatar_action_button/docs/index.js +0 -4
- data/app/pb_kits/playbook/pb_avatar_action_button/pb_avatar_action_button.test.js +0 -31
- data/dist/chunks/_weekday_stacked-CB-T-41Z.js +0 -45
- /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
data/lib/playbook/version.rb
CHANGED
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.
|
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-
|
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/
|
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-
|
3350
|
-
- dist/chunks/_weekday_stacked-
|
3351
|
+
- dist/chunks/_typeahead-PqkcDf1H.js
|
3352
|
+
- dist/chunks/_weekday_stacked-C7J0S4f7.js
|
3351
3353
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3352
|
-
- dist/chunks/lib-
|
3353
|
-
- dist/chunks/pb_form_validation-
|
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
|
data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb
DELETED
@@ -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,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
|
data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb
DELETED
@@ -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>
|
data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb
DELETED
@@ -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
|
data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb
DELETED
@@ -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
|
-
})
|