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.
- 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 +19 -37
- 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.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-
|
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/
|
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-
|
3350
|
-
- dist/chunks/_weekday_stacked-
|
3331
|
+
- dist/chunks/_typeahead-PqkcDf1H.js
|
3332
|
+
- dist/chunks/_weekday_stacked-C7J0S4f7.js
|
3351
3333
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3352
|
-
- dist/chunks/lib-
|
3353
|
-
- dist/chunks/pb_form_validation-
|
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
|
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
|
-
})
|