playbook_ui 14.14.0.pre.alpha.pbntr500currencykithandlingofnullvalues6311 → 14.14.0.pre.alpha.play1852reacthookformsupportradio6318

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 (23) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_currency/_currency.tsx +31 -46
  3. data/app/pb_kits/playbook/pb_currency/currency.html.erb +8 -15
  4. data/app/pb_kits/playbook/pb_currency/currency.rb +2 -17
  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_radio/_radio.tsx +85 -74
  8. data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx +60 -0
  9. data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.md +1 -0
  10. data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -1
  11. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  12. data/app/pb_kits/playbook/pb_radio/radio.test.js +16 -0
  13. data/dist/chunks/{_typeahead-PqkcDf1H.js → _typeahead-8okiJBmN.js} +1 -1
  14. data/dist/chunks/_weekday_stacked-DrKLZrfR.js +45 -0
  15. data/dist/chunks/vendor.js +1 -1
  16. data/dist/playbook-doc.js +1 -1
  17. data/dist/playbook-rails-react-bindings.js +1 -1
  18. data/dist/playbook-rails.js +1 -1
  19. data/lib/playbook/version.rb +1 -1
  20. metadata +5 -5
  21. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb +0 -22
  22. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx +0 -34
  23. data/dist/chunks/_weekday_stacked-BrSrpj7J.js +0 -45
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 17fca453caefd685c9ed41cdcc066aa79f6623d5bf4c9a8601a1e9f95ab47c26
4
- data.tar.gz: 2ed3fe8635e74c438de05d9c2d9c18d371d5e91abc0f43564f110cbc6ccaa381
3
+ metadata.gz: '08169588154946fcdb034524b646de6a050c504884a381f360f3a5470ea4917d'
4
+ data.tar.gz: d2794398a68601eeac259328439846e39816d671489e70cf35c9e9cc3669b76e
5
5
  SHA512:
6
- metadata.gz: c9da096a667206278c2029e809abad8cc4bd1e0923310d335532b8c8cfd267957bc77be6d1e3afffef2eb03d64ed1fb953cc5ebbff7e6f8e17336d85a5949d08
7
- data.tar.gz: 55c2c623531974e1bab492e272b3fa1cfa9996d3ab5efcb65d34ba0a0037d6e86d0576ea1376eeef937d4047f6adc92abb6194ce1ff0edd16e6c3db05d11f027
6
+ metadata.gz: ca7b5000b148f3a0e8beac0926d11b05e36b9cc32cef3ccd72b8c53e04a4bdb6822e957ac82c85d50910dd4240d165c912e2b4eeb09566c8dbae3b70b28320de
7
+ data.tar.gz: fa1e9d28c2a166f674ac45c0c662262fb86fb69815409769be724bdba9a36b31bf24fe484053f17f97c691f9083759827b054f5a2a6652c7aab72bd8dc1c06f3
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,57 +118,44 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
120
118
  id={id}
121
119
  >
122
120
  <Caption dark={dark}>{label}</Caption>
121
+
123
122
  <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
124
123
  {unstyled ? (
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
- )
124
+ <>
125
+ <div>{handleNegative}{symbol}</div>
126
+ <div>{getAmount}</div>
127
+ <div>
128
+ {getAbbreviation}
129
+ {unit ? unit : getDecimalValue}
130
+ </div>
131
+ </>
137
132
  ) : (
138
- nullDisplay && !amount ? (
133
+ <>
134
+ <Body
135
+ className="dollar_sign"
136
+ color="light"
137
+ dark={dark}
138
+ >
139
+ {handleNegative}{symbol}
140
+ </Body>
141
+
139
142
  <Title
140
143
  className="pb_currency_value"
141
144
  dark={dark}
142
145
  size={sizes[size]}
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
- )
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
+ </>
174
159
  )}
175
160
  </div>
176
161
  </div>
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: 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) %>
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
@@ -68,20 +65,10 @@ module Playbook
68
65
  }
69
66
  end
70
67
 
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
-
81
68
  def title_props
82
69
  {
83
70
  size: size_value,
84
- text: title_text,
71
+ text: swap_negative ? absolute_amount(abbr_or_format_amount) : abbr_or_format_amount,
85
72
  classname: "pb_currency_value",
86
73
  dark: dark,
87
74
  }
@@ -158,10 +145,8 @@ module Playbook
158
145
  1
159
146
  when "md"
160
147
  3
161
- when "sm"
162
- 4
163
148
  else
164
- 3
149
+ 4
165
150
  end
166
151
  end
167
152
 
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_radio/_radio.tsx CHANGED
@@ -1,6 +1,4 @@
1
- /*eslint-disable react/no-multi-comp */
2
-
3
- import React, { forwardRef, useRef } from 'react'
1
+ import React, { useRef, forwardRef } from 'react'
4
2
  import Body from '../pb_body/_body'
5
3
  import Flex from '../pb_flex/_flex'
6
4
  import classnames from 'classnames'
@@ -10,7 +8,7 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
10
8
  type RadioProps = {
11
9
  aria?: { [key: string]: string },
12
10
  alignment?: string,
13
- checked?: boolean,
11
+ checked?: boolean, // removed default assignment here
14
12
  children?: React.ReactChild[] | React.ReactChild,
15
13
  customChildren?: boolean,
16
14
  className?: string,
@@ -24,10 +22,10 @@ type RadioProps = {
24
22
  name?: string,
25
23
  value?: string,
26
24
  text?: string,
27
- onChange: (event: React.FormEvent<HTMLInputElement> | null) => void,
25
+ onChange?: (event: React.FormEvent<HTMLInputElement> | null) => void,
28
26
  } & GlobalProps
29
27
 
30
- const Radio = ({
28
+ const Radio = forwardRef<HTMLInputElement, RadioProps>(({
31
29
  aria = {},
32
30
  alignment,
33
31
  children,
@@ -43,110 +41,123 @@ const Radio = ({
43
41
  name = 'radio_name',
44
42
  text = 'Radio Text',
45
43
  value = 'radio_text',
44
+ checked,
46
45
  onChange = () => { void 0 },
47
46
  ...props
48
- }: RadioProps, ref: any) => {
49
- const radioRef = useRef(null);
47
+ }, ref) => {
48
+ const internalRef = useRef<HTMLInputElement>(null)
49
+ const setRefs = (el: HTMLInputElement) => {
50
+ internalRef.current = el
51
+ if (typeof ref === 'function') {
52
+ ref(el)
53
+ } else if (ref) {
54
+ (ref as React.MutableRefObject<HTMLInputElement | null>).current = el
55
+ }
56
+ }
57
+
58
+ const ariaProps = buildAriaProps(aria)
59
+ const dataProps = buildDataProps(data)
60
+ const htmlProps = buildHtmlProps(htmlOptions)
50
61
 
51
- const ariaProps = buildAriaProps(aria);
52
- const dataProps = buildDataProps(data);
53
- const htmlProps = buildHtmlProps(htmlOptions);
54
62
  const classes = classnames(
55
63
  buildCss('pb_radio_kit', alignment),
56
64
  dark ? 'dark' : null,
57
65
  error ? 'error' : null,
58
66
  globalProps(props),
59
67
  className
60
- );
68
+ )
61
69
 
62
70
  const classesCustom = classnames(
63
71
  dark ? 'dark' : null,
64
72
  error ? 'error' : null,
65
73
  globalProps(props),
66
74
  className
67
- );
75
+ )
76
+
77
+ const checkedProps = checked !== undefined ? { checked } : {}
68
78
 
69
- const displayRadio = (props: RadioProps & any) => {
70
- if (children && customChildren == false)
71
- return (children)
79
+ const displayRadio = (inputProps: any) => {
80
+ if (children && customChildren === false)
81
+ return children
72
82
  else
73
- return (
74
- <input
75
- disabled={disabled}
76
- id={id}
77
- name={name}
78
- onChange={onChange}
79
- ref={ref}
80
- text={text}
81
- type="radio"
82
- value={value}
83
- {...props}
84
- />
85
- )}
83
+ return (
84
+ <input
85
+ {...checkedProps}
86
+ disabled={disabled}
87
+ id={id}
88
+ name={name}
89
+ onChange={onChange}
90
+ ref={setRefs}
91
+ type="radio"
92
+ value={value}
93
+ {...inputProps}
94
+ />
95
+ )
96
+ }
86
97
 
87
98
  const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
88
99
  if (event) {
89
- const target = event.target as HTMLElement;
100
+ const target = event.target as HTMLElement
90
101
  if (
91
102
  target.id === 'pb-radio-children-wrapper' ||
92
103
  target.closest('#pb-radio-children-wrapper')
93
104
  ) {
94
- radioRef.current?.click();
105
+ internalRef.current?.click()
95
106
  }
96
107
  }
97
- };
108
+ }
98
109
 
99
- return (
100
- customChildren ? (
101
- <Flex
102
- {...ariaProps}
103
- {...dataProps}
104
- {...htmlProps}
105
- align='center'
106
- className={classesCustom}
107
- cursor='pointer'
108
- htmlFor={id}
109
- htmlOptions={{
110
- onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
111
- handleContainerClick(event);
112
- }) as unknown as () => void
113
- }}
114
- id="radio-container"
115
- >
116
- <label className={buildCss('pb_radio_kit', alignment)}>
110
+ return customChildren ? (
111
+ <Flex
112
+ {...ariaProps}
113
+ {...dataProps}
114
+ {...htmlProps}
115
+ align="center"
116
+ className={classesCustom}
117
+ cursor="pointer"
118
+ htmlFor={id}
119
+ htmlOptions={{
120
+ onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
121
+ handleContainerClick(event)
122
+ }) as unknown as () => void
123
+ }}
124
+ id="radio-container"
125
+ >
126
+ <label className={buildCss('pb_radio_kit', alignment)}>
117
127
  <input
128
+ {...checkedProps}
118
129
  disabled={disabled}
119
130
  id={id}
120
131
  name={name}
121
132
  onChange={onChange}
122
- ref={radioRef}
133
+ ref={setRefs}
123
134
  type="radio"
124
135
  value={value}
125
136
  {...props}
126
137
  />
127
- <span className="pb_radio_button" />
128
- </label>
129
- <div id="pb-radio-children-wrapper"> {children} </div>
130
- </Flex>
131
- ) : (
132
- <label
133
- {...ariaProps}
134
- {...dataProps}
135
- {...htmlProps}
136
- className={classes}
137
- htmlFor={id}
138
- >
139
- <>{displayRadio(props)}</>
140
138
  <span className="pb_radio_button" />
141
- <Body
142
- dark={dark}
143
- status={error ? 'negative' : null}
144
- text={label}
145
- variant={null}
146
- />
147
139
  </label>
148
- )
149
- );
150
- };
140
+ <div id="pb-radio-children-wrapper"> {children} </div>
141
+ </Flex>
142
+ ) : (
143
+ <label
144
+ {...ariaProps}
145
+ {...dataProps}
146
+ {...htmlProps}
147
+ className={classes}
148
+ htmlFor={id}
149
+ >
150
+ {displayRadio(props)}
151
+ <span className="pb_radio_button" />
152
+ <Body
153
+ dark={dark}
154
+ status={error ? 'negative' : null}
155
+ text={label}
156
+ variant={null}
157
+ />
158
+ </label>
159
+ )
160
+ })
151
161
 
152
- export default forwardRef(Radio);
162
+ Radio.displayName = "Radio"
163
+ export default Radio
data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx ADDED
@@ -0,0 +1,60 @@
1
+ import React from "react"
2
+ import { useForm } from "react-hook-form"
3
+ import { Radio, Flex, Body } from "playbook-ui"
4
+
5
+ const RadioReactHook = () => {
6
+ const { register, watch } = useForm({
7
+ defaultValues: {
8
+ size: "Small",
9
+ },
10
+ })
11
+
12
+ const selectedSize = watch("size", "Small")
13
+
14
+ return (
15
+ <Flex orientation="row">
16
+ <Flex
17
+ align="start"
18
+ orientation="column"
19
+ paddingRight="lg"
20
+ >
21
+ <Radio
22
+ alignment="left"
23
+ label="Small"
24
+ marginBottom='sm'
25
+ name="size"
26
+ value="Small"
27
+ {...register("size")}
28
+ />
29
+ <br />
30
+ <Radio
31
+ alignment="left"
32
+ label="Medium"
33
+ marginBottom='sm'
34
+ name="size"
35
+ value="Medium"
36
+ {...register("size")}
37
+ />
38
+ <br />
39
+ <Radio
40
+ alignment="left"
41
+ label="Large"
42
+ marginBottom='sm'
43
+ name="size"
44
+ value="Large"
45
+ {...register("size")}
46
+ />
47
+ </Flex>
48
+ <Flex
49
+ align="start"
50
+ orientation="column"
51
+ >
52
+ <Body
53
+ text={`Selected Size: ${selectedSize}`}
54
+ />
55
+ </Flex>
56
+ </Flex>
57
+ )
58
+ }
59
+
60
+ export default RadioReactHook
data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.md ADDED
@@ -0,0 +1 @@
1
+ You can pass react hook props to the radio kit.
data/app/pb_kits/playbook/pb_radio/docs/example.yml CHANGED
@@ -16,6 +16,7 @@ examples:
16
16
  - radio_alignment: Alignment
17
17
  - radio_disabled: Disabled
18
18
  - radio_custom_children: Custom Children
19
+ - radio_react_hook: React Hook Form
19
20
 
20
21
  swift:
21
22
  - radio_default_swift: Default
@@ -26,4 +27,4 @@ examples:
26
27
  - radio_spacing_swift: Spacing
27
28
  - radio_padding_swift: Padding
28
29
  - radio_subtitle_swift: Subtitle
29
- - radio_props_swift: ""
30
+ - radio_props_swift: ""
data/app/pb_kits/playbook/pb_radio/docs/index.js CHANGED
@@ -4,3 +4,4 @@ export { default as RadioError } from './_radio_error.jsx'
4
4
  export { default as RadioAlignment } from './_radio_alignment.jsx'
5
5
  export { default as RadioDisabled } from './_radio_disabled.jsx'
6
6
  export { default as RadioCustomChildren } from './_radio_custom_children.jsx'
7
+ export { default as RadioReactHook } from './_radio_react_hook.jsx'
data/app/pb_kits/playbook/pb_radio/radio.test.js CHANGED
@@ -86,3 +86,19 @@ test('has disabled attribute', () => {
86
86
  expect(input).toHaveAttribute('disabled')
87
87
  })
88
88
 
89
+
90
+ test('has ref in the input element', () => {
91
+ const ref = React.createRef()
92
+ render(
93
+ <Radio
94
+ data={{ testid: testId }}
95
+ name="Radio-name"
96
+ ref={ref}
97
+ text="Radio"
98
+ value="radio value"
99
+ />
100
+ )
101
+
102
+ expect(ref.current).not.toBeNull()
103
+ expect(ref.current?.tagName).toBe('INPUT')
104
+ })