playbook_ui 14.9.0.pre.alpha.play1703errorstatealignment4991 → 14.9.0.pre.alpha.play1742globalheightfixes4766

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 (74) 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_bar_graph/docs/_bar_graph_custom.jsx +49 -53
  5. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb +36 -29
  6. data/app/pb_kits/playbook/pb_body/_body.scss +13 -14
  7. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +16 -22
  8. data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx +0 -6
  9. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +1 -2
  10. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +1 -1
  11. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +4 -9
  12. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +2 -2
  13. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +2 -2
  14. data/app/pb_kits/playbook/pb_drawer/_drawer.tsx +2 -2
  15. data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss +0 -5
  16. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +2 -7
  17. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +2 -8
  18. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +2 -48
  19. data/app/pb_kits/playbook/pb_layout/_layout.tsx +30 -11
  20. data/app/pb_kits/playbook/pb_link/_link.scss +3 -3
  21. data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss +1 -11
  22. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +2 -16
  23. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  24. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +4 -4
  25. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -1
  26. data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx +36 -44
  27. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +4 -4
  28. data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -5
  29. data/app/pb_kits/playbook/pb_table/docs/index.js +0 -5
  30. data/app/pb_kits/playbook/pb_table/index.ts +26 -100
  31. data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -2
  32. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +1 -106
  33. data/app/pb_kits/playbook/pb_table/table.html.erb +1 -1
  34. data/app/pb_kits/playbook/pb_table/table.rb +2 -17
  35. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +3 -35
  36. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -1
  37. data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
  38. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +2 -139
  39. data/app/pb_kits/playbook/pb_title/_title.scss +5 -6
  40. data/app/pb_kits/playbook/pb_title/_title_mixin.scss +0 -13
  41. data/app/pb_kits/playbook/tokens/_titles.scss +8 -0
  42. data/app/pb_kits/playbook/utilities/_hover.scss +2 -11
  43. data/app/pb_kits/playbook/utilities/globalProps.ts +0 -2
  44. data/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js +0 -15
  45. data/dist/chunks/_typeahead-B8fkIeXA.js +22 -0
  46. data/dist/chunks/_weekday_stacked-DjRTXEi-.js +45 -0
  47. data/dist/chunks/{lib-CuCy3_xO.js → lib-SyD3buPZ.js} +3 -3
  48. data/dist/chunks/{pb_form_validation-D37k10a0.js → pb_form_validation-Dt8UJgrJ.js} +1 -1
  49. data/dist/chunks/vendor.js +1 -1
  50. data/dist/menu.yml +1 -1
  51. data/dist/playbook-doc.js +1 -1
  52. data/dist/playbook-rails-react-bindings.js +1 -1
  53. data/dist/playbook-rails.js +1 -1
  54. data/dist/playbook.css +1 -1
  55. data/lib/playbook/hover.rb +1 -7
  56. data/lib/playbook/version.rb +1 -1
  57. metadata +6 -21
  58. data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss +0 -49
  59. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +0 -95
  60. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +0 -75
  61. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md +0 -1
  62. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +0 -108
  63. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md +0 -2
  64. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +0 -94
  65. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md +0 -0
  66. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +0 -83
  67. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +0 -3
  68. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +0 -120
  69. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +0 -1
  70. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +0 -35
  71. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx +0 -88
  72. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +0 -64
  73. data/dist/chunks/_typeahead-l1kq1p9m.js +0 -22
  74. data/dist/chunks/_weekday_stacked-B28kYXl9.js +0 -45
@@ -7,21 +7,14 @@ import {
7
7
  buildHtmlProps,
8
8
  } from "../../utilities/props";
9
9
  import { globalProps } from "../../utilities/globalProps";
10
- import Collapsible from "../../pb_collapsible/_collapsible";
11
- import useCollapsible from "../../pb_collapsible/useCollapsible";
12
10
 
13
11
  type TableRowPropTypes = {
14
12
  aria?: { [key: string]: string };
15
13
  children: React.ReactNode[] | React.ReactNode;
16
14
  className: string;
17
- collapsible?: boolean;
18
- collapsibleContent?: React.ReactNode[] | React.ReactNode;
19
- collapsibleSideHighlight?: boolean;
20
15
  data?: { [key: string]: string };
21
- dark?: boolean;
22
16
  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
23
17
  id?: string;
24
- toggleCellId?: string;
25
18
  sideHighlightColor: string;
26
19
  tag?: "table" | "div";
27
20
  };
@@ -30,15 +23,10 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
30
23
  const {
31
24
  aria = {},
32
25
  children,
33
- collapsible,
34
- collapsibleContent,
35
- collapsibleSideHighlight = true,
36
26
  className,
37
27
  data = {},
38
- dark = false,
39
28
  htmlOptions = {},
40
29
  id,
41
- toggleCellId,
42
30
  sideHighlightColor = "none",
43
31
  tag = "table",
44
32
  } = props;
@@ -48,110 +36,17 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
48
36
  const htmlProps = buildHtmlProps(htmlOptions);
49
37
  const sideHighlightClass =
50
38
  sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
51
-
52
- const [isCollapsed, setIsCollapsed] = useCollapsible(true);
53
-
54
- const collapsibleRow = collapsible && isCollapsed === true ? "collapsible_table_row" : null;
55
39
  const classes = classnames(
56
40
  buildCss("pb_table_row_kit", sideHighlightClass),
57
41
  "pb_table_tr",
58
- collapsibleRow,
59
42
  globalProps(props),
60
43
  className
61
44
  );
62
45
  const isTableTag = tag === "table";
63
46
 
64
- // const [isCollapsed, setIsCollapsed] = useCollapsible(true);
65
-
66
- const colSpan = React.Children.count(children);
67
-
68
- const handleRowClick = (event: React.MouseEvent) => {
69
- if (toggleCellId) {
70
- const target = event.target as HTMLElement;
71
- const clickedCell = target.closest(`#${toggleCellId}`);
72
- const isIconClick =
73
- target instanceof SVGElement &&
74
- (target.matches("svg.pb_custom_icon") || target.closest("svg.pb_custom_icon"));
75
-
76
- if (clickedCell || isIconClick) {
77
- setIsCollapsed(!isCollapsed);
78
- }
79
- } else {
80
- setIsCollapsed(!isCollapsed);
81
- }
82
- };
83
-
84
47
  return (
85
48
  <>
86
- {collapsible ? (
87
- isTableTag ? (
88
- <>
89
- <tr
90
- {...ariaProps}
91
- {...dataProps}
92
- {...htmlProps}
93
- className={classes}
94
- id={id}
95
- onClick={(e)=>handleRowClick(e)}
96
- style={{ cursor: toggleCellId ? "default" : "pointer" }}
97
- >
98
- {children}
99
- </tr>
100
- <tr>
101
- <Collapsible
102
- collapsed={isCollapsed}
103
- dark={dark}
104
- htmlOptions={{ colSpan: colSpan }}
105
- padding="none"
106
- tag="td"
107
- >
108
- <tr/>
109
- <Collapsible.Content
110
- className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
111
- dark={dark}
112
- margin="none"
113
- padding="none"
114
- >
115
- {collapsibleContent}
116
- </Collapsible.Content>
117
- </Collapsible>
118
- </tr>
119
- </>
120
- ) : (
121
- <>
122
- <div
123
- {...ariaProps}
124
- {...dataProps}
125
- {...htmlProps}
126
- className={classes}
127
- id={id}
128
- onClick={handleRowClick}
129
- style={{ cursor: "pointer" }}
130
- >
131
- {children}
132
- </div>
133
- <tr>
134
- <Collapsible
135
- collapsed={isCollapsed}
136
- dark={dark}
137
- htmlOptions={{ colSpan: colSpan }}
138
- padding="none"
139
- tag="td"
140
- >
141
- <tr/>
142
- <Collapsible.Content
143
- className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
144
- dark={dark}
145
- margin="none"
146
- padding="none"
147
- >
148
- {collapsibleContent}
149
- </Collapsible.Content>
150
- </Collapsible>
151
- </tr>
152
- </>
153
- )
154
- ) : isTableTag ? (
49
+ {isTableTag ? (
155
50
  <tr
156
51
  {...ariaProps}
157
52
  {...dataProps}
@@ -18,4 +18,4 @@
18
18
  <%= content.presence %>
19
19
  <% end %>
20
20
  <% end %>
21
- <% end %>
21
+ <% end %>
@@ -23,8 +23,6 @@ module Playbook
23
23
  prop :text
24
24
  prop :sticky, type: Playbook::Props::Boolean,
25
25
  default: false
26
- prop :sticky_left_column, type: Playbook::Props::Array,
27
- default: []
28
26
  prop :vertical_border, type: Playbook::Props::Boolean,
29
27
  default: false
30
28
  prop :striped, type: Playbook::Props::Boolean,
@@ -39,8 +37,8 @@ module Playbook
39
37
  def classname
40
38
  generate_classname(
41
39
  "pb_table", "table-#{size}", single_line_class, dark_class,
42
- disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
43
- collapse_class, vertical_border_class, striped_class, outer_padding_class,
40
+ disable_hover_class, container_class, data_table_class, sticky_class, collapse_class,
41
+ vertical_border_class, striped_class, outer_padding_class,
44
42
  "table-responsive-#{responsive}", separator: " "
45
43
  )
46
44
  end
@@ -75,19 +73,6 @@ module Playbook
75
73
  sticky ? "sticky-header" : nil
76
74
  end
77
75
 
78
- def sticky_left_column_class
79
- if sticky_left_column.empty?
80
- nil
81
- else
82
- sticky_col_classname = "sticky-left-column sticky-columns"
83
- sticky_left_column.each do |id|
84
- sticky_col_classname += "-#{id}"
85
- end
86
-
87
- sticky_col_classname
88
- end
89
- end
90
-
91
76
  def striped_class
92
77
  striped ? "striped" : nil
93
78
  end
@@ -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}
@@ -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
@@ -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'
@@ -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
- })
@@ -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
  }
@@ -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
- }
@@ -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
  }
@@ -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
+ }
@@ -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` : '';
@@ -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
  });