playbook_ui 14.14.0 → 14.15.0.pre.rc.0
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/pb_currency/_currency.tsx +46 -31
- data/app/pb_kits/playbook/pb_currency/currency.html.erb +15 -8
- data/app/pb_kits/playbook/pb_currency/currency.rb +17 -2
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb +22 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx +34 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_currency/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
- data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx +71 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx +17 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx +61 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_icon_button/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_icon_button/icon_button.test.jsx +39 -0
- data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +2 -2
- data/app/pb_kits/playbook/pb_tooltip/index.js +1 -1
- data/dist/chunks/_weekday_stacked-BrSrpj7J.js +45 -0
- data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/forms/builder/time_zone_select_field.rb +19 -0
- data/lib/playbook/forms/builder.rb +1 -0
- data/lib/playbook/version.rb +2 -2
- metadata +14 -4
- data/dist/chunks/_weekday_stacked-B_pw5Znc.js +0 -45
- data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 9c4f4443e97e76b02ed78fb7b306ff8aeaca79582b9fe38a02cfa09e5d90c148
|
|
4
|
+
data.tar.gz: 8d08a8b0471fee5d751c9dabce727e28812b912bbfc69db54400092534f19def
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 6cdbfaee7b1b250617196e44a4cefc228b59cacd980d227eb817bd5ed88fbd2cc64c4c692a0ede4b1c8c79b7aaf172113509e9e132f2dce771dd6411cb6bccce
|
|
7
|
+
data.tar.gz: 5134dbe6b5f7861d5715818df3e136f69eb8089549f6715cac53aff1f251d16ec76c3cef912efbe4fd624bf3e4be79cb380767c475671302c3650b9729afd316
|
|
@@ -21,6 +21,7 @@ type CurrencyProps = {
|
|
|
21
21
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
|
22
22
|
id?: string,
|
|
23
23
|
label?: string,
|
|
24
|
+
nullDisplay?: string,
|
|
24
25
|
size?: 'sm' | 'md' | 'lg',
|
|
25
26
|
symbol?: string,
|
|
26
27
|
variant?: 'default' | 'light' | 'bold',
|
|
@@ -49,6 +50,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
|
|
|
49
50
|
unit,
|
|
50
51
|
className,
|
|
51
52
|
label = '',
|
|
53
|
+
nullDisplay = '',
|
|
52
54
|
size = 'sm',
|
|
53
55
|
symbol = '$',
|
|
54
56
|
variant = 'default',
|
|
@@ -118,44 +120,57 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
|
|
|
118
120
|
id={id}
|
|
119
121
|
>
|
|
120
122
|
<Caption dark={dark}>{label}</Caption>
|
|
121
|
-
|
|
122
123
|
<div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
|
|
123
124
|
{unstyled ? (
|
|
124
|
-
|
|
125
|
-
<div>{
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
{
|
|
129
|
-
{
|
|
130
|
-
|
|
131
|
-
|
|
125
|
+
nullDisplay && !amount ? (
|
|
126
|
+
<div>{nullDisplay}</div>
|
|
127
|
+
) : (
|
|
128
|
+
<>
|
|
129
|
+
<div>{handleNegative}{symbol}</div>
|
|
130
|
+
<div>{getAmount}</div>
|
|
131
|
+
<div>
|
|
132
|
+
{getAbbreviation}
|
|
133
|
+
{unit ? unit : getDecimalValue}
|
|
134
|
+
</div>
|
|
135
|
+
</>
|
|
136
|
+
)
|
|
132
137
|
) : (
|
|
133
|
-
|
|
134
|
-
<Body
|
|
135
|
-
className="dollar_sign"
|
|
136
|
-
color="light"
|
|
137
|
-
dark={dark}
|
|
138
|
-
>
|
|
139
|
-
{handleNegative}{symbol}
|
|
140
|
-
</Body>
|
|
141
|
-
|
|
138
|
+
nullDisplay && !amount ? (
|
|
142
139
|
<Title
|
|
143
140
|
className="pb_currency_value"
|
|
144
141
|
dark={dark}
|
|
145
142
|
size={sizes[size]}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
143
|
+
>
|
|
144
|
+
{nullDisplay}
|
|
145
|
+
</Title>
|
|
146
|
+
) : (
|
|
147
|
+
<>
|
|
148
|
+
<Body
|
|
149
|
+
className="dollar_sign"
|
|
150
|
+
color="light"
|
|
151
|
+
dark={dark}
|
|
152
|
+
>
|
|
153
|
+
{handleNegative}{symbol}
|
|
154
|
+
</Body>
|
|
155
|
+
|
|
156
|
+
<Title
|
|
157
|
+
className="pb_currency_value"
|
|
158
|
+
dark={dark}
|
|
159
|
+
size={sizes[size]}
|
|
160
|
+
>
|
|
161
|
+
{getAmount}
|
|
162
|
+
</Title>
|
|
163
|
+
|
|
164
|
+
<Body
|
|
165
|
+
className="unit"
|
|
166
|
+
color="light"
|
|
167
|
+
dark={dark}
|
|
168
|
+
>
|
|
169
|
+
{getAbbreviation}
|
|
170
|
+
{unit ? unit : getDecimalValue}
|
|
171
|
+
</Body>
|
|
172
|
+
</>
|
|
173
|
+
)
|
|
159
174
|
)}
|
|
160
175
|
</div>
|
|
161
176
|
</div>
|
|
@@ -1,17 +1,24 @@
|
|
|
1
1
|
<%= pb_content_tag do %>
|
|
2
2
|
<%= pb_rails("caption", props: object.caption_props) %>
|
|
3
|
-
|
|
4
3
|
<div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
|
|
5
4
|
<% if object.unstyled %>
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
<% if object.null_display && object.amount.blank? %>
|
|
6
|
+
<div><%= object.null_display %></div>
|
|
7
|
+
<% else %>
|
|
8
|
+
<div><%= object.negative_sign %><%= object.symbol %></div>
|
|
9
|
+
<div><%= object.title_props[:text] %></div>
|
|
10
|
+
<div><%= object.body_props[:text] %></div>
|
|
11
|
+
<% end %>
|
|
9
12
|
<% else %>
|
|
10
|
-
|
|
11
|
-
<%=
|
|
13
|
+
<% if object.null_display && object.amount.blank? %>
|
|
14
|
+
<%= pb_rails("title", props: object.title_props) %>
|
|
15
|
+
<% else %>
|
|
16
|
+
<%= pb_rails("body", props: object.currency_wrapper_props) do %>
|
|
17
|
+
<%= object.negative_sign %><%= object.symbol %>
|
|
18
|
+
<% end %>
|
|
19
|
+
<%= pb_rails("title", props: object.title_props) %>
|
|
20
|
+
<%= pb_rails("body", props: object.body_props) %>
|
|
12
21
|
<% end %>
|
|
13
|
-
<%= pb_rails("title", props: object.title_props) %>
|
|
14
|
-
<%= pb_rails("body", props: object.body_props) %>
|
|
15
22
|
<% end %>
|
|
16
23
|
</div>
|
|
17
24
|
<% end %>
|
|
@@ -46,6 +46,9 @@ module Playbook
|
|
|
46
46
|
prop :comma_separator, type: Playbook::Props::Boolean,
|
|
47
47
|
default: false
|
|
48
48
|
|
|
49
|
+
prop :null_display, type: Playbook::Props::String,
|
|
50
|
+
required: false
|
|
51
|
+
|
|
49
52
|
def classname
|
|
50
53
|
generate_classname("pb_currency_kit", align, size, dark_class)
|
|
51
54
|
end
|
|
@@ -65,10 +68,20 @@ module Playbook
|
|
|
65
68
|
}
|
|
66
69
|
end
|
|
67
70
|
|
|
71
|
+
def title_text
|
|
72
|
+
if null_display
|
|
73
|
+
null_display
|
|
74
|
+
elsif swap_negative
|
|
75
|
+
absolute_amount(abbr_or_format_amount)
|
|
76
|
+
else
|
|
77
|
+
abbr_or_format_amount
|
|
78
|
+
end
|
|
79
|
+
end
|
|
80
|
+
|
|
68
81
|
def title_props
|
|
69
82
|
{
|
|
70
83
|
size: size_value,
|
|
71
|
-
text:
|
|
84
|
+
text: title_text,
|
|
72
85
|
classname: "pb_currency_value",
|
|
73
86
|
dark: dark,
|
|
74
87
|
}
|
|
@@ -145,8 +158,10 @@ module Playbook
|
|
|
145
158
|
1
|
|
146
159
|
when "md"
|
|
147
160
|
3
|
|
148
|
-
|
|
161
|
+
when "sm"
|
|
149
162
|
4
|
|
163
|
+
else
|
|
164
|
+
3
|
|
150
165
|
end
|
|
151
166
|
end
|
|
152
167
|
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<%= pb_rails("currency", props: {
|
|
2
|
+
amount: "",
|
|
3
|
+
label: "Nil",
|
|
4
|
+
margin_bottom: "md",
|
|
5
|
+
null_display: "--",
|
|
6
|
+
size: "sm"
|
|
7
|
+
}) %>
|
|
8
|
+
|
|
9
|
+
<%= pb_rails("currency", props: {
|
|
10
|
+
amount: "",
|
|
11
|
+
label: "Nil",
|
|
12
|
+
margin_bottom: "md",
|
|
13
|
+
null_display: "$0.00",
|
|
14
|
+
size: "sm"
|
|
15
|
+
}) %>
|
|
16
|
+
|
|
17
|
+
<%= pb_rails("currency", props: {
|
|
18
|
+
amount: "",
|
|
19
|
+
label: "Nil",
|
|
20
|
+
null_display: " ",
|
|
21
|
+
size: "sm"
|
|
22
|
+
}) %>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Currency } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const CurrencyNullDisplay = (props) => {
|
|
5
|
+
return (
|
|
6
|
+
<>
|
|
7
|
+
<Currency
|
|
8
|
+
amount=""
|
|
9
|
+
label="Null"
|
|
10
|
+
marginBottom="md"
|
|
11
|
+
nullDisplay="--"
|
|
12
|
+
{...props}
|
|
13
|
+
/>
|
|
14
|
+
|
|
15
|
+
<Currency
|
|
16
|
+
amount=""
|
|
17
|
+
label="Null"
|
|
18
|
+
marginBottom="md"
|
|
19
|
+
nullDisplay="$0.00"
|
|
20
|
+
{...props}
|
|
21
|
+
/>
|
|
22
|
+
|
|
23
|
+
<Currency
|
|
24
|
+
amount=""
|
|
25
|
+
label="Null"
|
|
26
|
+
marginBottom="md"
|
|
27
|
+
nullDisplay=" "
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
</>
|
|
31
|
+
)
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export default CurrencyNullDisplay
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
To customize how the `amount` field appears when it is empty, use the `null_display` prop and set it to the desired value you want to display.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
To customize how the `amount` field appears when it is empty, use the `nullDisplay` prop and set it to the desired value you want to display.
|
|
@@ -10,6 +10,7 @@ examples:
|
|
|
10
10
|
- currency_unstyled: Unstyled
|
|
11
11
|
- currency_comma_separator: Comma Separator
|
|
12
12
|
- currency_negative: Negative
|
|
13
|
+
- currency_null_display: Null Display
|
|
13
14
|
|
|
14
15
|
react:
|
|
15
16
|
- currency_variants: Variants
|
|
@@ -21,6 +22,7 @@ examples:
|
|
|
21
22
|
- currency_unstyled: Unstyled
|
|
22
23
|
- currency_comma_separator: Comma Separator
|
|
23
24
|
- currency_negative: Negative
|
|
25
|
+
- currency_null_display: Null Display
|
|
24
26
|
|
|
25
27
|
swift:
|
|
26
28
|
- currency_size_swift: Size
|
|
@@ -6,4 +6,5 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
|
|
|
6
6
|
export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
|
|
7
7
|
export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
|
|
8
8
|
export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
|
|
9
|
-
export { default as CurrencyNegative } from './_currency_negative.jsx'
|
|
9
|
+
export { default as CurrencyNegative } from './_currency_negative.jsx'
|
|
10
|
+
export { default as CurrencyNullDisplay } from './_currency_null_display.jsx'
|
|
@@ -46,6 +46,7 @@
|
|
|
46
46
|
%>
|
|
47
47
|
<%= form.date_picker :example_date_picker_1, props: { label: true } %>
|
|
48
48
|
<%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
|
|
49
|
+
<%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
|
|
49
50
|
|
|
50
51
|
<%= form.actions do |action| %>
|
|
51
52
|
<%= action.submit %>
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
<%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
|
|
38
38
|
<%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
|
|
39
39
|
<%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
|
|
40
|
+
<%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
|
|
40
41
|
|
|
41
42
|
<%= form.actions do |action| %>
|
|
42
43
|
<%= action.submit %>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
|
|
2
|
+
import React from 'react'
|
|
3
|
+
import classnames from 'classnames'
|
|
4
|
+
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
|
5
|
+
import { globalProps } from '../utilities/globalProps'
|
|
6
|
+
|
|
7
|
+
import Button from '../pb_button/_button'
|
|
8
|
+
import Icon from '../pb_icon/_icon'
|
|
9
|
+
import { IconSizes } from "../pb_icon/_icon"
|
|
10
|
+
|
|
11
|
+
type IconButtonProps = {
|
|
12
|
+
aria?: { [key: string]: string },
|
|
13
|
+
className?: string,
|
|
14
|
+
data?: { [key: string]: string },
|
|
15
|
+
htmlType?: 'submit' | 'reset' | 'button' | undefined,
|
|
16
|
+
icon?: string,
|
|
17
|
+
id?: string,
|
|
18
|
+
link?: string,
|
|
19
|
+
newWindow?: boolean,
|
|
20
|
+
size?: IconSizes,
|
|
21
|
+
target?: string,
|
|
22
|
+
variant?: 'default' | 'link',
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const IconButton = (props: IconButtonProps) => {
|
|
26
|
+
const {
|
|
27
|
+
aria = {},
|
|
28
|
+
className,
|
|
29
|
+
data = {},
|
|
30
|
+
htmlType = 'button',
|
|
31
|
+
icon = 'bars',
|
|
32
|
+
id,
|
|
33
|
+
link,
|
|
34
|
+
newWindow = false,
|
|
35
|
+
size = "2x",
|
|
36
|
+
target,
|
|
37
|
+
variant = "default",
|
|
38
|
+
} = props
|
|
39
|
+
|
|
40
|
+
const ariaProps = buildAriaProps(aria)
|
|
41
|
+
const dataProps = buildDataProps(data)
|
|
42
|
+
const classes = classnames(buildCss('pb_icon_button_kit', variant), globalProps(props), className)
|
|
43
|
+
|
|
44
|
+
return (
|
|
45
|
+
<div
|
|
46
|
+
{...ariaProps}
|
|
47
|
+
{...dataProps}
|
|
48
|
+
className={classes}
|
|
49
|
+
id={id}
|
|
50
|
+
>
|
|
51
|
+
<Button
|
|
52
|
+
borderRadius="lg"
|
|
53
|
+
htmlType={htmlType}
|
|
54
|
+
link={link}
|
|
55
|
+
newWindow={newWindow}
|
|
56
|
+
target={target}
|
|
57
|
+
>
|
|
58
|
+
<Icon
|
|
59
|
+
className="icon_button_icon"
|
|
60
|
+
fixedWidth
|
|
61
|
+
icon={icon}
|
|
62
|
+
paddingX="xxs"
|
|
63
|
+
paddingY="xs"
|
|
64
|
+
size={size}
|
|
65
|
+
/>
|
|
66
|
+
</Button>
|
|
67
|
+
</div>
|
|
68
|
+
)
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export default IconButton
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { IconButton } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const IconButtonDefault = (props) => (
|
|
5
|
+
<div>
|
|
6
|
+
<IconButton
|
|
7
|
+
{...props}
|
|
8
|
+
/>
|
|
9
|
+
<IconButton
|
|
10
|
+
{...props}
|
|
11
|
+
marginTop="md"
|
|
12
|
+
variant="link"
|
|
13
|
+
/>
|
|
14
|
+
</div>
|
|
15
|
+
)
|
|
16
|
+
|
|
17
|
+
export default IconButtonDefault
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { IconButton, Flex } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const IconButtonSizes = (props) => (
|
|
5
|
+
<div>
|
|
6
|
+
<Flex align="center">
|
|
7
|
+
<IconButton
|
|
8
|
+
{...props}
|
|
9
|
+
size="lg"
|
|
10
|
+
/>
|
|
11
|
+
<span>Large</span>
|
|
12
|
+
</Flex>
|
|
13
|
+
<Flex align="center">
|
|
14
|
+
<IconButton
|
|
15
|
+
{...props}
|
|
16
|
+
size="sm"
|
|
17
|
+
/>
|
|
18
|
+
<span>Small</span>
|
|
19
|
+
</Flex>
|
|
20
|
+
<Flex align="center">
|
|
21
|
+
<IconButton
|
|
22
|
+
{...props}
|
|
23
|
+
size="xs"
|
|
24
|
+
/>
|
|
25
|
+
<span>XSmall</span>
|
|
26
|
+
</Flex>
|
|
27
|
+
<Flex
|
|
28
|
+
align="center"
|
|
29
|
+
marginTop="md"
|
|
30
|
+
>
|
|
31
|
+
<IconButton
|
|
32
|
+
{...props}
|
|
33
|
+
size="1x"
|
|
34
|
+
/>
|
|
35
|
+
<span>1x</span>
|
|
36
|
+
</Flex>
|
|
37
|
+
<Flex align="center">
|
|
38
|
+
<IconButton
|
|
39
|
+
{...props}
|
|
40
|
+
size="2x"
|
|
41
|
+
/>
|
|
42
|
+
<span>2x</span>
|
|
43
|
+
</Flex>
|
|
44
|
+
<Flex align="center">
|
|
45
|
+
<IconButton
|
|
46
|
+
{...props}
|
|
47
|
+
size="3x"
|
|
48
|
+
/>
|
|
49
|
+
<span>3x</span>
|
|
50
|
+
</Flex>
|
|
51
|
+
<Flex align="center">
|
|
52
|
+
<IconButton
|
|
53
|
+
{...props}
|
|
54
|
+
size="4x"
|
|
55
|
+
/>
|
|
56
|
+
<span>4x</span>
|
|
57
|
+
</Flex>
|
|
58
|
+
</div>
|
|
59
|
+
)
|
|
60
|
+
|
|
61
|
+
export default IconButtonSizes
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { ensureAccessible, renderKit } from '../utilities/test-utils'
|
|
2
|
+
|
|
3
|
+
import { IconButton } from 'playbook-ui'
|
|
4
|
+
|
|
5
|
+
const props = {
|
|
6
|
+
data: { testid: 'default', icon: 'plus' }
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
test('default test', () => {
|
|
10
|
+
const kit = renderKit(IconButton, props)
|
|
11
|
+
|
|
12
|
+
expect(kit).toBeInTheDocument()
|
|
13
|
+
expect(kit).toHaveClass('pb_icon_button_kit_default')
|
|
14
|
+
|
|
15
|
+
const iconElement = kit.querySelector('.icon_button_icon')
|
|
16
|
+
expect(iconElement).toBeInTheDocument()
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
it("should be accessible", async () => {
|
|
20
|
+
ensureAccessible(IconButton, props)
|
|
21
|
+
})
|
|
22
|
+
|
|
23
|
+
test('passes link variant prop', () => {
|
|
24
|
+
const kit = renderKit(IconButton, { ...props, variant: "link" })
|
|
25
|
+
expect(kit).toBeInTheDocument()
|
|
26
|
+
expect(kit).toHaveClass('pb_icon_button_kit_link')
|
|
27
|
+
})
|
|
28
|
+
|
|
29
|
+
test('should set button type to "submit" when htmlType prop is passed', () => {
|
|
30
|
+
const kit = renderKit(IconButton, { ...props, htmlType: 'submit' })
|
|
31
|
+
const buttonElement = kit.querySelector('button')
|
|
32
|
+
expect(buttonElement).toHaveAttribute('type', 'submit')
|
|
33
|
+
})
|
|
34
|
+
|
|
35
|
+
test('passes custom classname', () => {
|
|
36
|
+
const kit = renderKit(IconButton, { ...props, className: "extra_class" })
|
|
37
|
+
expect(kit).toBeInTheDocument()
|
|
38
|
+
expect(kit).toHaveClass('pb_icon_button_kit_default extra_class')
|
|
39
|
+
})
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<%= pb_content_tag(:li) do %>
|
|
2
|
-
<div class="box" style="max-width: min-content;"
|
|
3
|
-
<div class="circle">
|
|
2
|
+
<div class="box" style="max-width: min-content;">
|
|
3
|
+
<div class="circle" id="<%= object.tooltip_trigger_class %>" >
|
|
4
4
|
<%= pb_rails("icon", props: { icon: object.icon, size: "xs" }) if object.icon.present? %>
|
|
5
5
|
</div>
|
|
6
6
|
<% if object.tooltip.present? %>
|