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

Sign up to get free protection for your applications and to get access to all the features.
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
  });