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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +0 -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_date_picker/_date_picker.tsx +3 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb +2 -2
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md +4 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +71 -36
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx +6 -6
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb +1 -2
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb +27 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +1 -1
- data/app/pb_kits/playbook/pb_icon_button/icon_button.rb +3 -0
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +1 -6
- data/app/pb_kits/playbook/pb_nav/item.html.erb +7 -19
- data/app/pb_kits/playbook/pb_nav/nav.html.erb +3 -8
- data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +1 -6
- data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -6
- data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss +2 -1
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb +1 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx +7 -0
- data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb +47 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx +88 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md +1 -0
- 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/_table_with_selectable_rows.html.erb +96 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +101 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +3 -1
- 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_body.html.erb +13 -7
- data/app/pb_kits/playbook/pb_table/table_body.rb +2 -0
- data/app/pb_kits/playbook/pb_table/table_row.html.erb +14 -7
- data/app/pb_kits/playbook/pb_table/table_row.rb +14 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +14 -0
- data/app/pb_kits/playbook/pb_text_input/index.js +9 -0
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +5 -2
- data/dist/chunks/{_typeahead-TUUtEUg8.js → _typeahead-CAIQfP7X.js} +2 -2
- data/dist/chunks/_weekday_stacked-Dq02Kbeo.js +45 -0
- data/dist/chunks/{lib-DjpLC8uO.js → lib-D3us1bGD.js} +2 -2
- data/dist/chunks/{pb_form_validation-S56UaHZl.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 +20 -23
- 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--GSH9pBR.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.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-
|
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/
|
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-
|
3338
|
-
- dist/chunks/_weekday_stacked
|
3334
|
+
- dist/chunks/_typeahead-CAIQfP7X.js
|
3335
|
+
- dist/chunks/_weekday_stacked-Dq02Kbeo.js
|
3339
3336
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3340
|
-
- dist/chunks/lib-
|
3341
|
-
- dist/chunks/pb_form_validation-
|
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
|
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
|
-
})
|