playbook_ui 14.9.0.pre.alpha.PLAY1731inputmasking4868 → 14.9.0.pre.alpha.PLAY16264818

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 (47) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +3 -5
  3. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +2 -0
  4. data/app/pb_kits/playbook/pb_body/_body.scss +13 -14
  5. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +16 -22
  6. data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx +0 -6
  7. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +1 -2
  8. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -1
  9. data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss +0 -5
  10. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +2 -7
  11. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +2 -8
  12. data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss +1 -11
  13. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +2 -16
  14. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  15. data/app/pb_kits/playbook/pb_select/_select.tsx +19 -14
  16. data/app/pb_kits/playbook/pb_select/docs/_select_form.jsx +108 -0
  17. data/app/pb_kits/playbook/pb_select/docs/example.yml +1 -0
  18. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  19. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +4 -4
  20. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx +36 -44
  22. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +4 -4
  23. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +3 -35
  24. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -1
  25. data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
  26. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +2 -139
  27. data/app/pb_kits/playbook/pb_title/_title.scss +5 -6
  28. data/app/pb_kits/playbook/pb_title/_title_mixin.scss +0 -13
  29. data/app/pb_kits/playbook/tokens/_titles.scss +8 -0
  30. data/app/pb_kits/playbook/utilities/_hover.scss +2 -11
  31. data/app/pb_kits/playbook/utilities/globalProps.ts +0 -2
  32. data/app/pb_kits/playbook/utilities/hookFormProps.ts +16 -0
  33. data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js +0 -15
  34. data/dist/chunks/_typeahead-B8fkIeXA.js +22 -0
  35. data/dist/chunks/_weekday_stacked-DxlPBh55.js +45 -0
  36. data/dist/chunks/vendor.js +1 -1
  37. data/dist/playbook-doc.js +1 -1
  38. data/dist/playbook-rails-react-bindings.js +1 -1
  39. data/dist/playbook-rails.js +1 -1
  40. data/dist/playbook.css +1 -1
  41. data/lib/playbook/hover.rb +1 -7
  42. data/lib/playbook/version.rb +1 -1
  43. metadata +6 -6
  44. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx +0 -88
  45. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +0 -64
  46. data/dist/chunks/_typeahead-Cx7J1O_I.js +0 -22
  47. data/dist/chunks/_weekday_stacked-Z6CSak-K.js +0 -45
data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx CHANGED
@@ -1,46 +1,40 @@
1
- import React from "react"
2
- import classnames from "classnames"
1
+ import React from 'react'
2
+ import classnames from 'classnames'
3
3
 
4
- import { buildCss, buildHtmlProps } from "../utilities/props"
5
- import { globalProps } from "../utilities/globalProps"
4
+ import { buildCss, buildHtmlProps } from '../utilities/props'
5
+ import { globalProps } from '../utilities/globalProps'
6
6
 
7
- import Body from "../pb_body/_body"
8
- import Icon from "../pb_icon/_icon"
7
+ import Body from '../pb_body/_body'
8
+ import Icon from '../pb_icon/_icon'
9
9
 
10
- const statusMap: {
11
- neutral: "neutral"
12
- decrease: "negative"
13
- increase: "positive"
14
- } = {
15
- increase: "positive",
16
- decrease: "negative",
17
- neutral: "neutral",
10
+ const statusMap: {neutral: 'neutral', decrease: 'negative' ,increase: 'positive'} = {
11
+ increase: 'positive',
12
+ decrease: 'negative',
13
+ neutral: 'neutral',
18
14
  }
19
15
 
20
16
  const iconMap = {
21
- increase: "arrow-up",
22
- decrease: "arrow-down",
17
+ increase: 'arrow-up',
18
+ decrease: 'arrow-down',
23
19
  }
24
20
 
25
21
  type StatChangeProps = {
26
- change?: "increase" | "decrease" | "neutral"
27
- className?: string
28
- dark?: boolean
29
- icon?: string
30
- id?: string
31
- htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
32
- value?: string | number
22
+ change?: 'increase' | 'decrease' | 'neutral',
23
+ className?: string,
24
+ icon?: string,
25
+ htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
26
+ id?: string,
27
+ value?: string | number,
33
28
  }
34
29
 
35
30
  const StatChange = (props: StatChangeProps): React.ReactElement => {
36
- const {
37
- change = "neutral",
38
- className,
39
- dark = false,
31
+ const {
32
+ change = 'neutral',
33
+ className,
40
34
  htmlOptions = {},
41
- icon,
42
- id,
43
- value,
35
+ icon,
36
+ id,
37
+ value
44
38
  } = props
45
39
 
46
40
  const status = statusMap[change as keyof typeof statusMap]
@@ -53,32 +47,30 @@ const StatChange = (props: StatChangeProps): React.ReactElement => {
53
47
 
54
48
  return (
55
49
  <>
56
- {value && (
50
+ {value &&
57
51
  <div
58
52
  className={classnames(
59
- buildCss("pb_stat_change_kit", status),
60
- globalProps(props),
61
- className
62
- )}
53
+ buildCss('pb_stat_change_kit', status),
54
+ globalProps(props),
55
+ className
56
+ )}
63
57
  id={id}
64
58
  {...htmlProps}
65
59
  >
66
- <Body dark={dark}
67
- status={status}
68
- >
69
- {" "}
70
- {returnedIcon && (
60
+ <Body status={status}>
61
+ {returnedIcon &&
71
62
  <>
72
- <Icon dark={dark}
63
+ <Icon
73
64
  fixed_width
74
65
  icon={returnedIcon}
75
- />{" "}
66
+ />
67
+ {' '}
76
68
  </>
77
- )}
69
+ }
78
70
  {`${value}%`}
79
71
  </Body>
80
72
  </div>
81
- )}
73
+ }
82
74
  </>
83
75
  )
84
76
  }
data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb CHANGED
@@ -1,6 +1,6 @@
1
1
  <%= pb_content_tag do %>
2
- <%= pb_rails("body", props: { status: object.status, dark: object.dark }) do %>
3
- <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon, dark: object.dark }) if object.returned_icon %>
4
- <%= "#{object.value}%" if object.value %>
5
- <% end %>
2
+ <%= pb_rails("body", props: { status: object.status }) do %>
3
+ <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
4
+ <%= "#{object.value}%" if object.value %>
5
+ <% end %>
6
6
  <% end %>
data/app/pb_kits/playbook/pb_text_input/_text_input.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import React, { forwardRef, ChangeEvent } from 'react'
1
+ import React, { forwardRef } from 'react'
2
2
  import classnames from 'classnames'
3
3
 
4
4
  import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
@@ -10,8 +10,6 @@ import Caption from '../pb_caption/_caption'
10
10
  import Body from '../pb_body/_body'
11
11
  import Icon from '../pb_icon/_icon'
12
12
 
13
- import { INPUTMASKS } from './inputMask'
14
-
15
13
  type TextInputProps = {
16
14
  aria?: { [key: string]: string },
17
15
  className?: string,
@@ -24,7 +22,6 @@ type TextInputProps = {
24
22
  inline?: boolean,
25
23
  name: string,
26
24
  label: string,
27
- mask?: 'currency' | 'zipCode' | 'postalCode' | 'ssn',
28
25
  onChange: (e: React.FormEvent<HTMLInputElement>) => void,
29
26
  placeholder: string,
30
27
  required?: boolean,
@@ -50,7 +47,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
50
47
  htmlOptions = {},
51
48
  id,
52
49
  inline = false,
53
- mask = null,
54
50
  name,
55
51
  label,
56
52
  onChange = () => { void 0 },
@@ -94,33 +90,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
94
90
  />
95
91
  )
96
92
 
97
- const isMaskedInput = mask && mask in INPUTMASKS
98
-
99
- const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
100
- if (isMaskedInput) {
101
- const inputValue = e.target.value
102
-
103
- let cursorPosition = e.target.selectionStart;
104
- const isAtEnd = cursorPosition === inputValue.length;
105
-
106
- const formattedValue = INPUTMASKS[mask].format(inputValue)
107
- e.target.value = formattedValue
108
-
109
- // Keep cursor position
110
- if (!isAtEnd) {
111
- // Account for extra characters (e.g., commas added/removed in currency)
112
- if (formattedValue.length - inputValue.length === 1) {
113
- cursorPosition = cursorPosition + 1
114
- } else if (mask === "currency" && formattedValue.length - inputValue.length === -1) {
115
- cursorPosition = cursorPosition - 1
116
- }
117
- e.target.selectionStart = e.target.selectionEnd = cursorPosition
118
- }
119
- }
120
-
121
- onChange(e)
122
- }
123
-
124
93
  const childInput = children ? children.type === "input" : undefined
125
94
 
126
95
  const textInput = (
@@ -132,9 +101,8 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
132
101
  id={id}
133
102
  key={id}
134
103
  name={name}
135
- onChange={isMaskedInput ? handleChange : onChange}
136
- pattern={isMaskedInput ? INPUTMASKS[mask]?.pattern : undefined}
137
- placeholder={placeholder || (isMaskedInput ? INPUTMASKS[mask]?.placeholder : undefined)}
104
+ onChange={onChange}
105
+ placeholder={placeholder}
138
106
  ref={ref}
139
107
  required={required}
140
108
  type={type}
data/app/pb_kits/playbook/pb_text_input/docs/example.yml CHANGED
@@ -16,7 +16,6 @@ examples:
16
16
  - text_input_add_on: Add On
17
17
  - text_input_inline: Inline
18
18
  - text_input_no_label: No Label
19
- - text_input_mask: Mask
20
19
 
21
20
  swift:
22
21
  - text_input_default_swift: Default
data/app/pb_kits/playbook/pb_text_input/docs/index.js CHANGED
@@ -5,4 +5,3 @@ export { default as TextInputDisabled } from './_text_input_disabled.jsx'
5
5
  export { default as TextInputAddOn } from './_text_input_add_on.jsx'
6
6
  export { default as TextInputInline } from './_text_input_inline.jsx'
7
7
  export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
8
- export { default as TextInputMask } from './_text_input_mask.jsx'
data/app/pb_kits/playbook/pb_text_input/text_input.test.js CHANGED
@@ -1,5 +1,5 @@
1
- import React, { useState } from 'react'
2
- import { render, screen, fireEvent, within } from '../utilities/test-utils'
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
3
 
4
4
  import TextInput from './_text_input'
5
5
 
@@ -89,140 +89,3 @@ test('returns additional class name', () => {
89
89
  const kit = screen.getByTestId(testId)
90
90
  expect(kit).toHaveClass(`${kitClass} mb_lg`)
91
91
  })
92
-
93
-
94
- const TextInputCurrencyMask = (props) => {
95
- const [currency, setValue] = useState('')
96
- const handleOnChange = ({ target }) => {
97
- setValue(target.value)
98
- }
99
-
100
- return (
101
- <TextInput
102
- mask="currency"
103
- onChange={handleOnChange}
104
- value={currency}
105
- {...props}
106
- />
107
- )
108
- }
109
-
110
- test('returns masked currency value', () => {
111
- render(
112
- <TextInputCurrencyMask
113
- data={{ testid: testId }}
114
- />
115
- )
116
-
117
- const kit = screen.getByTestId(testId)
118
-
119
- const input = within(kit).getByRole('textbox');
120
-
121
- fireEvent.change(input, { target: { value: '123456' } });
122
-
123
- expect(input.value).toBe('$1,234.56')
124
-
125
- fireEvent.change(input, { target: { value: '1' } });
126
-
127
- expect(input.value).toBe('$0.01')
128
-
129
- fireEvent.change(input, { target: { value: '' } });
130
-
131
- expect(input.value).toBe('')
132
- })
133
-
134
- const TextInputZipCodeMask = (props) => {
135
- const [zipCode, setValue] = useState('')
136
- const handleOnChange = ({ target }) => {
137
- setValue(target.value)
138
- }
139
-
140
- return (
141
- <TextInput
142
- mask="zipCode"
143
- onChange={handleOnChange}
144
- value={zipCode}
145
- {...props}
146
- />
147
- )
148
- }
149
-
150
- test('returns masked zip code value', () => {
151
- render(
152
- <TextInputZipCodeMask
153
- data={{ testid: testId }}
154
- />
155
- )
156
-
157
- const kit = screen.getByTestId(testId)
158
-
159
- const input = within(kit).getByRole('textbox');
160
-
161
- fireEvent.change(input, { target: { value: '123456' } });
162
-
163
- expect(input.value).toBe('12345')
164
- })
165
-
166
- const TextInputPostalCodeMask = (props) => {
167
- const [postalCode, setValue] = useState('')
168
- const handleOnChange = ({ target }) => {
169
- setValue(target.value)
170
- }
171
-
172
- return (
173
- <TextInput
174
- mask="postalCode"
175
- onChange={handleOnChange}
176
- value={postalCode}
177
- {...props}
178
- />
179
- )
180
- }
181
-
182
- test('returns masked postal code value', () => {
183
- render(
184
- <TextInputPostalCodeMask
185
- data={{ testid: testId }}
186
- />
187
- )
188
-
189
- const kit = screen.getByTestId(testId)
190
-
191
- const input = within(kit).getByRole('textbox');
192
-
193
- fireEvent.change(input, { target: { value: '123456789' } });
194
-
195
- expect(input.value).toBe('12345-6789')
196
- })
197
-
198
- const TextInputSSNMask = (props) => {
199
- const [ssn, setValue] = useState('')
200
- const handleOnChange = ({ target }) => {
201
- setValue(target.value)
202
- }
203
-
204
- return (
205
- <TextInput
206
- mask="ssn"
207
- onChange={handleOnChange}
208
- value={ssn}
209
- {...props}
210
- />
211
- )
212
- }
213
-
214
- test('returns masked ssn value', () => {
215
- render(
216
- <TextInputSSNMask
217
- data={{ testid: testId }}
218
- />
219
- )
220
-
221
- const kit = screen.getByTestId(testId)
222
-
223
- const input = within(kit).getByRole('textbox');
224
-
225
- fireEvent.change(input, { target: { value: '123456789' } });
226
-
227
- expect(input.value).toBe('123-45-6789')
228
- })
data/app/pb_kits/playbook/pb_title/_title.scss CHANGED
@@ -49,11 +49,10 @@
49
49
  }
50
50
 
51
51
  &.dark {
52
- @include title_dark;
53
- @each $name, $color in $pb_dark_title_colors {
54
- &[class*="_#{$name}"] {
55
- color: $color;
56
- }
57
- }
52
+ @include pb_title_dark;
53
+ }
54
+
55
+ &.dark[class*=_link] {
56
+ @include pb_title_dark_link;
58
57
  }
59
58
  }
data/app/pb_kits/playbook/pb_title/_title_mixin.scss CHANGED
@@ -9,15 +9,6 @@ $pb_title_colors: (
9
9
  link: $primary
10
10
  );
11
11
 
12
- $pb_dark_title_colors: (
13
- default: $text_dk_default,
14
- light: $text_dk_light,
15
- lighter: $text_dk_lighter,
16
- success: $success,
17
- error: $error_dark,
18
- link: $active_dark
19
- );
20
-
21
12
  @mixin title_colors {
22
13
  @each $name, $color in $pb_title_colors {
23
14
  &[class*=_#{$name}] {
@@ -25,7 +16,3 @@ $pb_dark_title_colors: (
25
16
  }
26
17
  }
27
18
  }
28
-
29
- @mixin title_dark {
30
- color: $text_dk_default;
31
- }
data/app/pb_kits/playbook/tokens/_titles.scss CHANGED
@@ -33,6 +33,14 @@
33
33
  @include pb_title($heading_4, $bolder, $letterSpacing: $lspace_normal);
34
34
  }
35
35
 
36
+ @mixin pb_title_dark {
37
+ color: $text_dk_default;
38
+ }
39
+
40
+ @mixin pb_title_dark_link {
41
+ color: $active_dark;
42
+ }
43
+
36
44
  @mixin pb_title_bold {
37
45
  font-weight: $bolder;
38
46
  }
data/app/pb_kits/playbook/utilities/_hover.scss CHANGED
@@ -20,13 +20,6 @@
20
20
  }
21
21
  }
22
22
 
23
- @mixin hover-underline {
24
- .hover_underline:hover {
25
- text-decoration: underline;
26
- transition: text-decoration $transition-speed ease;
27
- }
28
- }
29
-
30
23
  @mixin hover-color-classes($colors-list) {
31
24
  @each $name, $color in $colors-list {
32
25
  .hover_background-#{"" + $name}:hover {
@@ -39,9 +32,7 @@
39
32
  }
40
33
  }
41
34
  }
42
-
43
-
44
- @include hover-underline;
35
+
45
36
  @include hover-scale-classes($scales);
46
37
  @include hover-shadow-classes($box_shadows);
47
38
  @include hover-color-classes($product_colors);
@@ -73,4 +64,4 @@
73
64
  .group_hover.hover_visibility {
74
65
  opacity: 1;
75
66
  }
76
- }
67
+ }
data/app/pb_kits/playbook/utilities/globalProps.ts CHANGED
@@ -64,7 +64,6 @@ type Hover = Shadow & {
64
64
  background?: string,
65
65
  color?: string,
66
66
  scale?: "sm" | "md" | "lg",
67
- underline?: boolean,
68
67
  visibility?: boolean,
69
68
  }
70
69
 
@@ -237,7 +236,6 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
237
236
  if (!hover) return css;
238
237
  css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
239
238
  css += hover.background ? `hover_background-${hover.background } ` : '';
240
- css += hover.underline ? `hover_underline ` : '';
241
239
  css += hover.scale ? `hover_scale_${hover.scale} ` : '';
242
240
  css += hover.color ? `hover_color-${hover.color } ` : '';
243
241
  css += hover.visibility ? `hover_visibility` : '';
data/app/pb_kits/playbook/utilities/hookFormProps.ts ADDED
@@ -0,0 +1,16 @@
1
+ import { UseFormRegister, FieldValues, RegisterOptions } from 'react-hook-form'
2
+
3
+ export type HookFormProps<T extends FieldValues = FieldValues> = {
4
+ register?: UseFormRegister<T>
5
+ rules?: RegisterOptions
6
+ name: string
7
+ }
8
+
9
+ export const withHookForm = <T extends FieldValues = FieldValues>(
10
+ props: HookFormProps<T>
11
+ ) => {
12
+ const { register, name, rules } = props
13
+ if (!register) return {}
14
+
15
+ return register(name, rules)
16
+ }
data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js CHANGED
@@ -57,19 +57,6 @@ test('Hover Props: returns proper class name', () => {
57
57
  expectedClassName = `hover_scale_xl`;
58
58
  expect(kit).toHaveClass(expectedClassName);
59
59
 
60
- const testIdUnderline = `${testSubject}-hover-underline`;
61
- render(
62
- <Body
63
- data={{ testid: testIdUnderline }}
64
- hover={{ underline: true }}
65
- text="Hi"
66
- />
67
- );
68
-
69
- kit = screen.getByTestId(testIdUnderline);
70
- expectedClassName = `hover_underline`;
71
- expect(kit).toHaveClass(expectedClassName);
72
-
73
60
  const testIdMultiple = `${testSubject}-hover-multiple`;
74
61
  render(
75
62
  <Body
@@ -79,7 +66,6 @@ test('Hover Props: returns proper class name', () => {
79
66
  background: 'error',
80
67
  shadow: 'deeper',
81
68
  scale: 'xl',
82
- underline: true,
83
69
  }}
84
70
  text="Hi"
85
71
  />
@@ -90,5 +76,4 @@ test('Hover Props: returns proper class name', () => {
90
76
  expect(kit).toHaveClass('hover_background-error');
91
77
  expect(kit).toHaveClass('hover_shadow_deeper');
92
78
  expect(kit).toHaveClass('hover_scale_xl');
93
- expect(kit).toHaveClass('hover_underline');
94
79
  });