playbook_ui 13.16.0 → 13.17.0.pre.alpha.nodealphaupgrade2157

Sign up to get free protection for your applications and to get access to all the features.
Files changed (97) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +14 -12
  3. data/app/pb_kits/playbook/_reset.scss +2 -2
  4. data/app/pb_kits/playbook/index.js +2 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +30 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +62 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx +5 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +30 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +61 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +127 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +28 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +5 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/README.md +288 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +95 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +51 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx +5 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +63 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx +8 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +8 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +98 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +246 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +345 -0
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +52 -0
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +1 -0
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +49 -0
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +18 -0
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +59 -0
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md +18 -0
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +60 -0
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +3 -0
  31. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +52 -0
  32. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md +5 -0
  33. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +63 -0
  34. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md +3 -0
  35. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +57 -0
  36. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +3 -0
  37. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +61 -0
  38. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +3 -0
  39. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +55 -0
  40. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md +1 -0
  41. data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +1 -0
  42. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +278 -0
  43. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +12 -0
  44. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +9 -0
  45. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss +72 -0
  46. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss +12 -0
  47. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +2 -2
  48. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +1 -1
  49. data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -1
  50. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  51. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -1
  52. data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
  53. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  54. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  55. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  56. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  57. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +30 -22
  58. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  59. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  60. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  61. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  62. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  63. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  64. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +15 -7
  65. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +4 -2
  66. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  67. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  68. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +46 -42
  69. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  70. data/app/pb_kits/playbook/pb_nav/_item.tsx +56 -47
  71. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  72. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +5 -7
  73. data/app/pb_kits/playbook/pb_popover/_popover.tsx +12 -14
  74. data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.html.erb +30 -0
  75. data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx +57 -0
  76. data/app/pb_kits/playbook/pb_popover/docs/example.yml +2 -1
  77. data/app/pb_kits/playbook/pb_popover/docs/index.js +1 -0
  78. data/app/pb_kits/playbook/pb_popover/popover.test.js +29 -31
  79. data/app/pb_kits/playbook/pb_table/_table.tsx +32 -29
  80. data/app/pb_kits/playbook/pb_table/docs/_table_striped.html.erb +48 -0
  81. data/app/pb_kits/playbook/pb_table/docs/_table_striped.jsx +58 -0
  82. data/app/pb_kits/playbook/pb_table/docs/_table_striped.md +1 -0
  83. data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
  84. data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
  85. data/app/pb_kits/playbook/pb_table/styles/_all.scss +1 -0
  86. data/app/pb_kits/playbook/pb_table/styles/_striped.scss +19 -0
  87. data/app/pb_kits/playbook/pb_table/table.rb +7 -1
  88. data/app/pb_kits/playbook/pb_table/table.test.js +5 -0
  89. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
  90. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -2
  91. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  92. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
  93. data/dist/menu.yml +105 -3
  94. data/dist/playbook-rails.js +14 -6
  95. data/dist/reset.css +1 -2
  96. data/lib/playbook/version.rb +2 -2
  97. metadata +55 -7
@@ -0,0 +1,278 @@
1
+ export const MOCK_DATA = [
2
+ {
3
+ year: "2021",
4
+ quarter: null,
5
+ month: null,
6
+ day: null,
7
+ newEnrollments: "20",
8
+ scheduledMeetings: "10",
9
+ attendanceRate: "51%",
10
+ completedClasses: "3",
11
+ classCompletionRate: "33%",
12
+ graduatedStudents: "19",
13
+ children: [
14
+ {
15
+ year: "2021",
16
+ quarter: "Q1",
17
+ month: null,
18
+ day: null,
19
+ newEnrollments: "2",
20
+ scheduledMeetings: "35",
21
+ attendanceRate: "32%",
22
+ completedClasses: "15",
23
+ classCompletionRate: "52%",
24
+ graduatedStudents: "36",
25
+ children: [
26
+ {
27
+ year: "2021",
28
+ quarter: "Q1",
29
+ month: "January",
30
+ day: null,
31
+ newEnrollments: "16",
32
+ scheduledMeetings: "20",
33
+ attendanceRate: "11%",
34
+ completedClasses: "13",
35
+ classCompletionRate: "47%",
36
+ graduatedStudents: "28",
37
+ children: [
38
+ {
39
+ year: "2021",
40
+ quarter: "Q1",
41
+ month: "January",
42
+ day: "10",
43
+ newEnrollments: "34",
44
+ scheduledMeetings: "28",
45
+ attendanceRate: "97%",
46
+ completedClasses: "20",
47
+ classCompletionRate: "15%",
48
+ graduatedStudents: "17",
49
+ },
50
+ {
51
+ year: "2021",
52
+ quarter: "Q1",
53
+ month: "January",
54
+ day: "20",
55
+ newEnrollments: "43",
56
+ scheduledMeetings: "23",
57
+ attendanceRate: "66%",
58
+ completedClasses: "26",
59
+ classCompletionRate: "47%",
60
+ graduatedStudents: "9",
61
+ },
62
+ ],
63
+ },
64
+ {
65
+ year: "2021",
66
+ quarter: "Q1",
67
+ month: "February",
68
+ day: null,
69
+ newEnrollments: "20",
70
+ scheduledMeetings: "41",
71
+ attendanceRate: "95%",
72
+ completedClasses: "26",
73
+ classCompletionRate: "83%",
74
+ graduatedStudents: "43",
75
+ children: [
76
+ {
77
+ year: "2011",
78
+ quarter: "Q1",
79
+ month: "February",
80
+ day: "15",
81
+ newEnrollments: "19",
82
+ scheduledMeetings: "35",
83
+ attendanceRate: "69%",
84
+ completedClasses: "8",
85
+ classCompletionRate: "75%",
86
+ graduatedStudents: "23",
87
+ },
88
+ ],
89
+ },
90
+ ],
91
+ },
92
+ ],
93
+ },
94
+ {
95
+ year: "2022",
96
+ quarter: null,
97
+ month: null,
98
+ day: null,
99
+ newEnrollments: "25",
100
+ scheduledMeetings: "17",
101
+ attendanceRate: "75%",
102
+ completedClasses: "5",
103
+ classCompletionRate: "45%",
104
+ graduatedStudents: "32",
105
+ children: [
106
+ {
107
+ year: "2022",
108
+ quarter: "Q1",
109
+ month: null,
110
+ day: null,
111
+ newEnrollments: "2",
112
+ scheduledMeetings: "35",
113
+ attendanceRate: "32%",
114
+ completedClasses: "15",
115
+ classCompletionRate: "52%",
116
+ graduatedStudents: "36",
117
+ children: [
118
+ {
119
+ year: "2022",
120
+ quarter: "Q1",
121
+ month: "January",
122
+ day: null,
123
+ newEnrollments: "16",
124
+ scheduledMeetings: "20",
125
+ attendanceRate: "11%",
126
+ completedClasses: "13",
127
+ classCompletionRate: "47%",
128
+ graduatedStudents: "28",
129
+ children: [
130
+ {
131
+ year: "2022",
132
+ quarter: "Q1",
133
+ month: "January",
134
+ day: "15",
135
+ newEnrollments: "34",
136
+ scheduledMeetings: "28",
137
+ attendanceRate: "97%",
138
+ completedClasses: "20",
139
+ classCompletionRate: "15%",
140
+ graduatedStudents: "17",
141
+ },
142
+ {
143
+ year: "2022",
144
+ quarter: "Q1",
145
+ month: "January",
146
+ day: "25",
147
+ newEnrollments: "43",
148
+ scheduledMeetings: "23",
149
+ attendanceRate: "66%",
150
+ completedClasses: "26",
151
+ classCompletionRate: "47%",
152
+ graduatedStudents: "9",
153
+ },
154
+ ],
155
+ },
156
+ {
157
+ year: "2022",
158
+ quarter: "Q1",
159
+ month: "May",
160
+ day: null,
161
+ newEnrollments: "20",
162
+ scheduledMeetings: "41",
163
+ attendanceRate: "95%",
164
+ completedClasses: "26",
165
+ classCompletionRate: "83%",
166
+ graduatedStudents: "43",
167
+ children: [
168
+ {
169
+ year: "2011",
170
+ quarter: "Q1",
171
+ month: "May",
172
+ day: "2",
173
+ newEnrollments: "19",
174
+ scheduledMeetings: "35",
175
+ attendanceRate: "69%",
176
+ completedClasses: "8",
177
+ classCompletionRate: "75%",
178
+ graduatedStudents: "23",
179
+ },
180
+ ],
181
+ },
182
+ ],
183
+ },
184
+ ],
185
+ },
186
+ {
187
+ year: "2023",
188
+ quarter: null,
189
+ month: null,
190
+ day: null,
191
+ newEnrollments: "10",
192
+ scheduledMeetings: "15",
193
+ attendanceRate: "65%",
194
+ completedClasses: "4",
195
+ classCompletionRate: "49%",
196
+ graduatedStudents: "29",
197
+ children: [
198
+ {
199
+ year: "2023",
200
+ quarter: "Q1",
201
+ month: null,
202
+ day: null,
203
+ newEnrollments: "2",
204
+ scheduledMeetings: "35",
205
+ attendanceRate: "32%",
206
+ completedClasses: "15",
207
+ classCompletionRate: "52%",
208
+ graduatedStudents: "36",
209
+ children: [
210
+ {
211
+ year: "2023",
212
+ quarter: "Q1",
213
+ month: "March",
214
+ day: null,
215
+ newEnrollments: "16",
216
+ scheduledMeetings: "20",
217
+ attendanceRate: "11%",
218
+ completedClasses: "13",
219
+ classCompletionRate: "47%",
220
+ graduatedStudents: "28",
221
+ children: [
222
+ {
223
+ year: "2023",
224
+ quarter: "Q1",
225
+ month: "March",
226
+ day: "10",
227
+ newEnrollments: "34",
228
+ scheduledMeetings: "28",
229
+ attendanceRate: "97%",
230
+ completedClasses: "20",
231
+ classCompletionRate: "15%",
232
+ graduatedStudents: "17",
233
+ },
234
+ {
235
+ year: "2023",
236
+ quarter: "Q1",
237
+ month: "March",
238
+ day: "11",
239
+ newEnrollments: "43",
240
+ scheduledMeetings: "23",
241
+ attendanceRate: "66%",
242
+ completedClasses: "26",
243
+ classCompletionRate: "47%",
244
+ graduatedStudents: "9",
245
+ },
246
+ ],
247
+ },
248
+ {
249
+ year: "2023",
250
+ quarter: "Q1",
251
+ month: "April",
252
+ day: null,
253
+ newEnrollments: "20",
254
+ scheduledMeetings: "41",
255
+ attendanceRate: "95%",
256
+ completedClasses: "26",
257
+ classCompletionRate: "83%",
258
+ graduatedStudents: "43",
259
+ children: [
260
+ {
261
+ year: "2023",
262
+ quarter: "Q1",
263
+ month: "April",
264
+ day: "15",
265
+ newEnrollments: "19",
266
+ scheduledMeetings: "35",
267
+ attendanceRate: "69%",
268
+ completedClasses: "8",
269
+ classCompletionRate: "75%",
270
+ graduatedStudents: "23",
271
+ },
272
+ ],
273
+ },
274
+ ],
275
+ },
276
+ ],
277
+ },
278
+ ];
@@ -0,0 +1,12 @@
1
+ examples:
2
+ react:
3
+ - advanced_table_default: Default (Required Props)
4
+ - advanced_table_loading: Loading State
5
+ - advanced_table_sort: enable Sorting
6
+ - advanced_table_sort_control: Sort Control
7
+ - advanced_table_expanded_control: Expanded Control
8
+ - advanced_table_subrow_headers: SubRow Headers
9
+ - advanced_table_collapsible_trail: Collapsible Trail
10
+ - advanced_table_table_options: Table Options
11
+ - advanced_table_table_props: Table Props
12
+
@@ -0,0 +1,9 @@
1
+ export { default as AdvancedTableDefault } from './_advanced_table_default.jsx'
2
+ export { default as AdvancedTableSort } from './_advanced_table_sort.jsx'
3
+ export { default as AdvancedTableSortControl } from './_advanced_table_sort_control.jsx'
4
+ export { default as AdvancedTableLoading } from './_advanced_table_loading.jsx'
5
+ export { default as AdvancedTableExpandedControl } from './_advanced_table_expanded_control.jsx'
6
+ export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_headers.jsx'
7
+ export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
8
+ export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
9
+ export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
@@ -0,0 +1,72 @@
1
+
2
+ //animation scss
3
+ @keyframes wave {
4
+ 0% {
5
+ background-position: -468px 0;
6
+ }
7
+ 100% {
8
+ background-position: 468px 0;
9
+ }
10
+ }
11
+
12
+ .content-loading {
13
+ pointer-events: none;
14
+ p,
15
+ .pb_body_kit_light,
16
+ .loading-toggle-icon,
17
+ .pb_caption_kit_md,
18
+ h4,
19
+ .loading-cell {
20
+ position: relative;
21
+ color: rgba($white, 0) !important;
22
+ background: rgba($white, 0) !important;
23
+ border: 0 !important;
24
+ &::after {
25
+ content: "";
26
+ position: absolute;
27
+ top: $space-xxs;
28
+ left: 0;
29
+ width: 100%;
30
+ height: calc(100% - #{$space-xxs * 2});
31
+ display: block;
32
+ border-radius: $border-rad-light;
33
+ animation-duration: 1.5s;
34
+ animation-fill-mode: forwards;
35
+ animation-iteration-count: infinite;
36
+ animation-name: wave;
37
+ animation-timing-function: linear;
38
+ background: $silver;
39
+ background-color: $silver;
40
+ background-image: linear-gradient(
41
+ to left,
42
+ $silver 0%,
43
+ lighten($silver, 1%) 50%,
44
+ lighten($silver, 1%) 60%,
45
+ $silver 80%,
46
+ $silver 100%
47
+ );
48
+ background-repeat: no-repeat;
49
+ background-size: 800px 104px;
50
+ }
51
+ }
52
+
53
+ .loading-cell {
54
+ height: $space_sm + 4;
55
+ }
56
+
57
+ .loading-toggle-icon {
58
+ width: $space_sm - 3;
59
+ height: $space_sm - 4;
60
+ margin-right: $space_xxs;
61
+ margin-bottom: $space_xxs + 2;
62
+ &::after {
63
+ height: $space_sm - 4;
64
+ border-radius: $border_radius_rounded;
65
+ }
66
+ }
67
+
68
+ svg,
69
+ img {
70
+ visibility: hidden;
71
+ }
72
+ }
@@ -0,0 +1,12 @@
1
+ %primary-color-pseudo {
2
+ &:hover,
3
+ &:active {
4
+ color: $primary;
5
+ }
6
+
7
+ &:focus-visible {
8
+ border-color: transparent;
9
+ box-shadow: 0px 0px 0 2px $primary_action;
10
+ outline: none;
11
+ }
12
+ }
@@ -1,5 +1,5 @@
1
- @import "./tokens/colors";
2
- @import "./tokens/spacing";
1
+ @import "tokens/colors";
2
+ @import "tokens/spacing";
3
3
 
4
4
  [class^=pb_collapsible_kit] {
5
5
  padding: $space_md;
@@ -1,5 +1,5 @@
1
1
  // Manual Import -- Flatpickr Styles
2
- @import "./tokens/typography";
2
+ @import "tokens/typography";
3
3
 
4
4
  .flatpickr-calendar {
5
5
  background: transparent;
@@ -10,7 +10,7 @@ type FlexProps = {
10
10
  data?: GenericObject,
11
11
  horizontal?: "left" | "center" | "right" | "stretch" | "none",
12
12
  justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
13
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
13
+ htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: unknown) => void)},
14
14
  id?: string,
15
15
  inline?: boolean,
16
16
  orientation?: "row" | "column",
@@ -15,7 +15,7 @@ type LabelValueProps = {
15
15
  aria?: { [key: string]: string };
16
16
  className?: string;
17
17
  dark?: boolean;
18
- data?: object;
18
+ data?: Record<string, unknown>;
19
19
  date?: Date;
20
20
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
21
21
  id?: string;
@@ -10,7 +10,7 @@ type LayoutPropTypes = {
10
10
  className?: string,
11
11
  collapse?: "xs" | "sm" | "md" | "lg" | "xl",
12
12
  dark?: boolean,
13
- data?: object,
13
+ data?: Record<string, unknown>,
14
14
  full?: boolean,
15
15
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
16
16
  position?: "left" | "right",
@@ -168,6 +168,7 @@ const Layout = (props: LayoutPropTypes) => {
168
168
  layoutCss,
169
169
  layoutCollapseCss,
170
170
  className,
171
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
171
172
  //@ts-ignore
172
173
  globalProps(filteredProps)
173
174
  )}
@@ -16,7 +16,8 @@ test("render all color variants", () => {
16
16
  testValues.forEach((variant) => {
17
17
  const { getByTestId } = render(
18
18
  <LayoutTest data={{ testid: `test-${variant}` }}
19
- variant={variant} />
19
+ variant={variant}
20
+ />
20
21
  )
21
22
  expect(getByTestId(`test-${variant}`)).toHaveClass(
22
23
  `pb_layout_kit_sidebar_size_md_left_${
@@ -33,7 +34,8 @@ test("render transparent class", () => {
33
34
 
34
35
  const { getByTestId } = render(
35
36
  <LayoutTest data={{ testid: `test-${id}` }}
36
- variant={id} />
37
+ variant={id}
38
+ />
37
39
  )
38
40
  expect(getByTestId(`test-${id}`)).toHaveClass(
39
41
  `pb_layout_kit_sidebar_size_md_left_${id}`
@@ -47,7 +49,8 @@ test("render all sizes variants", () => {
47
49
  testValues.forEach((size) => {
48
50
  const { getByTestId } = render(
49
51
  <LayoutTest data={{ testid: `test-${size}` }}
50
- size={size} />
52
+ size={size}
53
+ />
51
54
  )
52
55
  expect(getByTestId(`test-${size}`)).toHaveClass(
53
56
  `pb_layout_kit_sidebar_size_${size}_left_light`
@@ -84,7 +87,8 @@ test("render all layout variants", () => {
84
87
  testValues.forEach(({ layout, expected }) => {
85
88
  const { getByTestId } = render(
86
89
  <Layout data={{ testid: `test-${layout}` }}
87
- layout={layout}>
90
+ layout={layout}
91
+ >
88
92
  <Layout.Body>
89
93
  <Card>{"Card content"}</Card>
90
94
  </Layout.Body>
@@ -12,7 +12,7 @@ type LegendProps = {
12
12
  className?: string,
13
13
  color?: string,
14
14
  dark?: boolean,
15
- data?: object,
15
+ data?: Record<string, unknown>,
16
16
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
17
17
  id?: string,
18
18
  prefixText?: string,
@@ -64,11 +64,11 @@ const Legend = (props: LegendProps) => {
64
64
  {
65
65
  prefixText && (
66
66
  <Title
67
- dark={dark}
68
- size={4}
69
- tag="span"
70
- text={` ${prefixText} `}
71
- />
67
+ dark={dark}
68
+ size={4}
69
+ tag="span"
70
+ text={` ${prefixText} `}
71
+ />
72
72
  )
73
73
  }
74
74
  {` ${text} `}
@@ -56,15 +56,15 @@ const arrowRight = () => setIndex(current < urls.length - 1 ? current + 1 : urls
56
56
  return (
57
57
  <div
58
58
  className="Slides"
59
- onTouchStart={onTouchStart}
59
+ onTouchEnd={onTouchEnd}
60
60
  onTouchMove={onTouchMove}
61
- onTouchEnd={onTouchEnd}
61
+ onTouchStart={onTouchStart}
62
62
  >
63
63
  {
64
64
  urls.length > 1 && (
65
65
  <CircleIconButton
66
66
  className='carousel-arrow-left'
67
- dark={true}
67
+ dark
68
68
  icon="chevron-left"
69
69
  onClick={arrowLeft}
70
70
  variant="link"
@@ -81,7 +81,7 @@ const arrowRight = () => setIndex(current < urls.length - 1 ? current + 1 : urls
81
81
  urls.length > 1 && (
82
82
  <CircleIconButton
83
83
  className='carousel-arrow-right'
84
- dark={true}
84
+ dark
85
85
  icon="chevron-right"
86
86
  onClick={arrowRight}
87
87
  variant="link"
@@ -16,7 +16,7 @@ export default function Thumbnail({
16
16
  alt,
17
17
  width,
18
18
  url,
19
- onClick = ()=>{},
19
+ onClick,
20
20
  buttonRef,
21
21
  }: ThumbnailType): React.ReactElement {
22
22
  const activeClasses = classnames('Thumbnail', { active })
@@ -20,8 +20,8 @@ type CarouselType = {
20
20
  export default function Carousel({
21
21
  currentIndex,
22
22
  photos,
23
- onClick = ()=>{},
24
- onChange = ()=>{},
23
+ onClick,
24
+ onChange = () => undefined,
25
25
  setIndex,
26
26
  }: CarouselType): React.ReactElement {
27
27
  useEffect(() => {
@@ -39,10 +39,10 @@ export default function Carousel({
39
39
  return (
40
40
  <div className="Lightbox">
41
41
  <Slides
42
- setIndex={setIndex}
43
42
  current={currentIndex}
44
43
  onChange={handleChange}
45
44
  onClick={onClick}
45
+ setIndex={setIndex}
46
46
  urls={photos.map((photo) => photo.url)}
47
47
  />
48
48
  {photos.length > 1 ? (
@@ -61,23 +61,31 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
61
61
 
62
62
  const HeaderBody = () => (
63
63
  <React.Fragment>
64
- <FlexItem flex="1" marginLeft="sm">
64
+ <FlexItem flex="1"
65
+ marginLeft="sm"
66
+ >
65
67
  <CircleIconButton
66
- onClick={handleOnLightboxClose}
67
- dark={true}
68
- variant="link"
69
- icon={icon}
68
+ dark
69
+ icon={icon}
70
+ onClick={handleOnLightboxClose}
71
+ variant="link"
70
72
  />
71
73
  </FlexItem>
72
74
  {title && text && (
73
75
  <FlexItem flex="5">
74
76
  <Flex justify="center">
75
- <Flex align="center" orientation="column">
77
+ <Flex align="center"
78
+ orientation="column"
79
+ >
76
80
  {typeof title === "string" ? (
77
- <Title dark paddingBottom="xxs" size={4} text={title} />
81
+ <Title dark
82
+ paddingBottom="xxs"
83
+ size={4}
84
+ text={title}
85
+ />
78
86
  ) : (
79
- <Flex justify="center"
80
- className="custom-header"
87
+ <Flex className="custom-header"
88
+ justify="center"
81
89
  >
82
90
  {title}
83
91
  </Flex>
@@ -86,8 +94,8 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
86
94
  {typeof text === "string" ? (
87
95
  <Caption dark>{text}</Caption>
88
96
  ) : (
89
- <Flex justify="center"
90
- className="custom-header"
97
+ <Flex className="custom-header"
98
+ justify="center"
91
99
  >
92
100
  {text}
93
101
  </Flex>
@@ -99,12 +107,12 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
99
107
  <FlexItem flex="1">
100
108
  <Flex justify="end">
101
109
  <Button
102
- className="nav-right-btn"
103
- htmlType="button"
104
- onClick={onClickRight}
105
- dark
106
- variant="link"
107
- text={navRight}
110
+ className="nav-right-btn"
111
+ dark
112
+ htmlType="button"
113
+ onClick={onClickRight}
114
+ text={navRight}
115
+ variant="link"
108
116
  />
109
117
  </Flex>
110
118
  </FlexItem>
@@ -114,11 +122,11 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
114
122
  return (
115
123
  <div className="carousel-header">
116
124
  <Flex
117
- {...ariaProps}
118
- {...dataProps}
119
- {...htmlProps}
120
- className={classnames(headerCSS, headerSpacing, className)}
121
- spacing={spacing}
125
+ {...ariaProps}
126
+ {...dataProps}
127
+ {...htmlProps}
128
+ className={classnames(headerCSS, headerSpacing, className)}
129
+ spacing={spacing}
122
130
  >
123
131
  {closeable && <HeaderBody />}
124
132
  {children}