playbook_ui 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6275 → 14.14.0.pre.alpha.play1755pbcontenttag6327

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_currency/_currency.tsx +32 -48
  3. data/app/pb_kits/playbook/pb_currency/currency.html.erb +8 -15
  4. data/app/pb_kits/playbook/pb_currency/currency.rb +0 -3
  5. data/app/pb_kits/playbook/pb_currency/docs/example.yml +0 -2
  6. data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -2
  7. data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx +71 -0
  8. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx +17 -0
  9. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx +61 -0
  10. data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +4 -0
  11. data/app/pb_kits/playbook/pb_icon_button/docs/index.js +2 -0
  12. data/app/pb_kits/playbook/pb_icon_button/icon_button.test.jsx +39 -0
  13. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +2 -2
  14. data/app/pb_kits/playbook/pb_select/select.html.erb +1 -5
  15. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -5
  16. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +1 -4
  17. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb +1 -5
  18. data/app/pb_kits/playbook/pb_tooltip/index.js +1 -1
  19. data/dist/chunks/_weekday_stacked-C3in3hCo.js +45 -0
  20. data/dist/chunks/vendor.js +1 -1
  21. data/dist/menu.yml +1 -1
  22. data/dist/playbook-doc.js +1 -1
  23. data/lib/playbook/version.rb +1 -1
  24. metadata +8 -5
  25. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb +0 -20
  26. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx +0 -34
  27. data/dist/chunks/_weekday_stacked-BhC8Xp9l.js +0 -45
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4c6ef102f160200110b47477b34a9a06798b4ef4f1122151a12341775c20c9a5
4
- data.tar.gz: 14eb41101975901c5f557d1d8b6721fc9301e9b54a30ec0c335b8717dccbe508
3
+ metadata.gz: 9bd391f5c229dffe74bfe2394afc942a2f4b2a39d94c73720edc0d456ee7307f
4
+ data.tar.gz: 9ceb47d5d88b6d0c393214fc646ff346728ec143e87b11165383f2b80b418c9f
5
5
  SHA512:
6
- metadata.gz: 301d0b715331e1e388be9b554865dc59f79b88f5ef11f3a7f038554f215c7b72d6541465d027adcf0c8f9a0fea2dd4e9e1e6f608c6b0d9b9f5360fc52a70ffc8
7
- data.tar.gz: 6e1bc33d1fbe6b1bebe4b112b42c73107685786fbc7ddd01df4f95fe302d015e1225edcfbe042e2931728dcd655fe97a9d3629417c639392fa3753a7cb533ee6
6
+ metadata.gz: 0306b000aa877e5bf7ca746d36e2dd0afdd7d3724c187fdaa44b3ed3cc789cfe4067a01e6699a4226d31fb9fa559bc4c9ca695cf09f7650d2663be85821f21d8
7
+ data.tar.gz: cf80ac9e99fc99d32e8855de6bf31f17ba8a3105976bd28c489e76afe4214c2752b34c125e7ddacd83c2cba74514e42280cc1d059c392482d236ac371f9ca2f0
data/app/pb_kits/playbook/pb_currency/_currency.tsx CHANGED
@@ -21,7 +21,6 @@ type CurrencyProps = {
21
21
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
22
22
  id?: string,
23
23
  label?: string,
24
- nullDisplay?: string,
25
24
  size?: 'sm' | 'md' | 'lg',
26
25
  symbol?: string,
27
26
  variant?: 'default' | 'light' | 'bold',
@@ -50,7 +49,6 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
50
49
  unit,
51
50
  className,
52
51
  label = '',
53
- nullDisplay = '',
54
52
  size = 'sm',
55
53
  symbol = '$',
56
54
  variant = 'default',
@@ -120,62 +118,48 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
120
118
  id={id}
121
119
  >
122
120
  <Caption dark={dark}>{label}</Caption>
123
-
121
+
124
122
  <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
125
123
  {unstyled ? (
126
- nullDisplay && !amount ? (
127
- <div>{nullDisplay}</div>
128
- ) : (
129
- <>
130
- <div>{handleNegative}{symbol}</div>
131
- <div>{getAmount}</div>
132
- <div>
133
- {getAbbreviation}
134
- {unit ? unit : getDecimalValue}
135
- </div>
136
- </>
137
- )
124
+ <>
125
+ <div>{handleNegative}{symbol}</div>
126
+ <div>{getAmount}</div>
127
+ <div>
128
+ {getAbbreviation}
129
+ {unit ? unit : getDecimalValue}
130
+ </div>
131
+ </>
138
132
  ) : (
139
- nullDisplay && !amount ? (
133
+ <>
134
+ <Body
135
+ className="dollar_sign"
136
+ color="light"
137
+ dark={dark}
138
+ >
139
+ {handleNegative}{symbol}
140
+ </Body>
141
+
140
142
  <Title
141
143
  className="pb_currency_value"
142
144
  dark={dark}
143
145
  size={sizes[size]}
144
- >
145
- {nullDisplay}
146
- </Title>
147
- ) : (
148
- <>
149
- <Body
150
- className="dollar_sign"
151
- color="light"
152
- dark={dark}
153
- >
154
- {handleNegative}{symbol}
155
- </Body>
156
-
157
- <Title
158
- className="pb_currency_value"
159
- dark={dark}
160
- size={sizes[size]}
161
- >
162
- {getAmount}
163
- </Title>
164
-
165
- <Body
166
- className="unit"
167
- color="light"
168
- dark={dark}
169
- >
170
- {getAbbreviation}
171
- {unit ? unit : getDecimalValue}
172
- </Body>
173
- </>
174
- )
146
+ >
147
+ {getAmount}
148
+ </Title>
149
+
150
+ <Body
151
+ className="unit"
152
+ color="light"
153
+ dark={dark}
154
+ >
155
+ {getAbbreviation}
156
+ {unit ? unit : getDecimalValue}
157
+ </Body>
158
+ </>
175
159
  )}
176
160
  </div>
177
161
  </div>
178
- );
162
+ )
179
163
  }
180
164
 
181
165
  export default Currency
data/app/pb_kits/playbook/pb_currency/currency.html.erb CHANGED
@@ -1,24 +1,17 @@
1
1
  <%= pb_content_tag do %>
2
2
  <%= pb_rails("caption", props: object.caption_props) %>
3
+
3
4
  <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
4
5
  <% if object.unstyled %>
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 %>
6
+ <div><%= object.negative_sign %><%= object.symbol %></div>
7
+ <div><%= object.title_props[:text] %></div>
8
+ <div><%= object.body_props[:text] %></div>
12
9
  <% else %>
13
- <% if object.null_display && object.amount.blank? %>
14
- <%= pb_rails("title", props: {text: object.null_display}) %>
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) %>
10
+ <%= pb_rails("body", props: object.currency_wrapper_props) do %>
11
+ <%= object.negative_sign %><%= object.symbol %>
21
12
  <% end %>
13
+ <%= pb_rails("title", props: object.title_props) %>
14
+ <%= pb_rails("body", props: object.body_props) %>
22
15
  <% end %>
23
16
  </div>
24
17
  <% end %>
data/app/pb_kits/playbook/pb_currency/currency.rb CHANGED
@@ -46,9 +46,6 @@ 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
-
52
49
  def classname
53
50
  generate_classname("pb_currency_kit", align, size, dark_class)
54
51
  end
data/app/pb_kits/playbook/pb_currency/docs/example.yml CHANGED
@@ -10,7 +10,6 @@ examples:
10
10
  - currency_unstyled: Unstyled
11
11
  - currency_comma_separator: Comma Separator
12
12
  - currency_negative: Negative
13
- - currency_null_display: Null Display
14
13
 
15
14
  react:
16
15
  - currency_variants: Variants
@@ -22,7 +21,6 @@ examples:
22
21
  - currency_unstyled: Unstyled
23
22
  - currency_comma_separator: Comma Separator
24
23
  - currency_negative: Negative
25
- - currency_null_display: Null Display
26
24
 
27
25
  swift:
28
26
  - currency_size_swift: Size
data/app/pb_kits/playbook/pb_currency/docs/index.js CHANGED
@@ -6,5 +6,4 @@ 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'
10
- export { default as CurrencyNullDisplay } from './_currency_null_display.jsx'
9
+ export { default as CurrencyNegative } from './_currency_negative.jsx'
data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx ADDED
@@ -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
data/app/pb_kits/playbook/pb_icon_button/docs/example.yml CHANGED
@@ -3,3 +3,7 @@ examples:
3
3
  rails:
4
4
  - icon_button_default: Default
5
5
  - icon_button_sizes: Sizes
6
+
7
+ react:
8
+ - icon_button_default: Default
9
+ - icon_button_sizes: Sizes
data/app/pb_kits/playbook/pb_icon_button/docs/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export { default as IconButtonDefault } from './_icon_button_default.jsx'
2
+ export { default as IconButtonSizes } from './_icon_button_sizes.jsx'
data/app/pb_kits/playbook/pb_icon_button/icon_button.test.jsx ADDED
@@ -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
+ })
data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb CHANGED
@@ -1,6 +1,6 @@
1
1
  <%= pb_content_tag(:li) do %>
2
- <div class="box" style="max-width: min-content;" id="<%= object.tooltip_trigger_class %>">
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? %>
data/app/pb_kits/playbook/pb_select/select.html.erb CHANGED
@@ -1,8 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- data: object.data,
4
- class: object.classnames,
5
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
6
2
  <% if object.label %>
7
3
  <label class="pb_select_kit_label" for="<%= object.name %>">
8
4
  <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb CHANGED
@@ -1,8 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
6
2
 
7
3
  <% if object.multi %>
8
4
  <%= check_box_tag(object.name, object.value, object.checked, object.additional_input_options) %>
data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb CHANGED
@@ -1,7 +1,4 @@
1
- <%= content_tag(:div,
2
- data: object.data,
3
- class: object.classname,
4
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
5
2
 
6
3
  <%= pb_rails("selectable_card", props: {
7
4
  input_id: object.input_id,
data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb CHANGED
@@ -1,8 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
6
2
 
7
3
  <% if object.inputs == "disabled" %>
8
4
 
data/app/pb_kits/playbook/pb_tooltip/index.js CHANGED
@@ -152,4 +152,4 @@ export default class PbTooltip extends PbEnhancedElement {
152
152
  get triggerMethod() {
153
153
  return this.element.dataset.pbTooltipTriggerMethod || 'hover'
154
154
  }
155
- }
155
+ }