playbook_ui 13.15.0 → 13.16.0.pre.alpha.PLAY11641992

Sign up to get free protection for your applications and to get access to all the features.
Files changed (63) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_colors_swift.md +27 -0
  3. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default_swift.md +22 -0
  4. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_props_table.md +8 -0
  5. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_sizes_swift.md +26 -0
  6. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +6 -0
  7. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +4 -2
  8. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +5 -3
  9. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +40 -33
  10. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +4 -4
  11. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +44 -30
  12. data/app/pb_kits/playbook/pb_flex/_flex.tsx +4 -4
  13. data/app/pb_kits/playbook/pb_form_group/_form_group.tsx +3 -2
  14. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +7 -4
  15. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +10 -10
  16. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +10 -9
  17. data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
  18. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
  19. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
  20. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +7 -12
  21. data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
  22. data/app/pb_kits/playbook/pb_icon/icon.rb +10 -10
  23. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +3 -2
  24. data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx +3 -2
  25. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_bold_swift.md +17 -0
  26. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_default_swift.md +17 -0
  27. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_no_highlight_swift.md +18 -0
  28. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_swift.md +18 -0
  29. data/app/pb_kits/playbook/pb_nav/docs/_nav_props_swift.md +11 -0
  30. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_bold_swift.md +18 -0
  31. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_default_swift.md +18 -0
  32. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_subtle_no_highlight_swift.md +19 -0
  33. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_subtle_swift.md +17 -0
  34. data/app/pb_kits/playbook/pb_nav/docs/example.yml +17 -0
  35. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +51 -50
  36. data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx +20 -19
  37. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +4 -3
  38. data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -4
  39. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +20 -20
  40. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx +4 -4
  41. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +19 -17
  42. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +1 -1
  43. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +23 -21
  44. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +18 -10
  45. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +46 -23
  46. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +8 -8
  47. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +7 -7
  48. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +17 -15
  49. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +9 -7
  50. data/app/pb_kits/playbook/pb_select/_select.scss +13 -4
  51. data/app/pb_kits/playbook/pb_select/_select.tsx +7 -4
  52. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb +24 -0
  53. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx +38 -0
  54. data/app/pb_kits/playbook/pb_select/docs/example.yml +2 -0
  55. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  56. data/app/pb_kits/playbook/pb_select/select.rb +6 -1
  57. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx +25 -24
  58. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +27 -26
  59. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +2 -1
  60. data/app/pb_kits/playbook/pb_source/_source.tsx +15 -15
  61. data/dist/playbook-rails.js +4 -4
  62. data/lib/playbook/version.rb +2 -2
  63. metadata +22 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: fd6f86769005f1cf4bd5400be7f925bf38d3e16560fbec5da24158c969873663
4
- data.tar.gz: 5c879bd8ecc90a4e2d02adbab1d208f81098708f949e60ece5c95eb2875bd81e
3
+ metadata.gz: 4cd4788a76e7f71a89bc1e668a5194acde861ca7c431598efd850956108c31bd
4
+ data.tar.gz: cfcd1b2b5ab5daca3b4382e3cc2fc136b372dc9c5d1d385c6a76bca745279b1c
5
5
  SHA512:
6
- metadata.gz: 3d4bfff63b93a145834de3cfe80f3ecfa04f3d29ef10e7194fe2ad9149111a61efaeb70557b289db0fe499b1297e150ef0008af6f712289f45a84eaa83eab120
7
- data.tar.gz: 94718a4b5a91761a32365bcb149b47c4e2aaea0a58fbc9860773117069875627018e92ea69626de9556d064fa50fde854107eee264e86bbede4d5bf0e14054da
6
+ metadata.gz: 57a2bcdf06df31304d6b22d845ffc2c6e3e73f5a0e81884cd6c22a43707abcf2c32e8541ea95efa3c14f67288ee1b1a3c81898c17cb54f69e63f681db245de0c
7
+ data.tar.gz: 279b0e0eebb3629d66b7bf9de1f8c3062d230f6635e63b5966d110faa58965e74a1df5fe64416190c1edb19a7ca551c6ba2d6bcaa99a04b03431cd02162c3910
@@ -0,0 +1,27 @@
1
+ ![collapsible-colors](https://github.com/powerhome/playbook/assets/54749071/daafd129-fd0a-4992-8fee-bfa55aed8a23)
2
+
3
+ ```swift
4
+ let iconSize: PBIcon.IconSize
5
+ let iconColor: CollapsibleIconColor
6
+ let text: String
7
+ @State private var isCollapsed = true
8
+ let lorem =
9
+ "
10
+ Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
11
+ Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
12
+ Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
13
+ "
14
+ PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
15
+ VStack(spacing: Spacing.medium) {
16
+ CollapsibleDoc(iconColor: .default, text: "Default Section")
17
+ CollapsibleDoc(iconColor: .light, text: "Light Section")
18
+ CollapsibleDoc(iconColor: .lighter, text: "Lighter Section")
19
+ CollapsibleDoc(iconColor: .link, text: "Link Section")
20
+ CollapsibleDoc(iconColor: .error, text: "Error Section")
21
+ CollapsibleDoc(iconColor: .success, text: "Success Section")
22
+ }
23
+ } content: {
24
+ Text(lorem).pbFont(.body)
25
+ }
26
+
27
+ ```
@@ -0,0 +1,22 @@
1
+ ![collapsible-default](https://github.com/powerhome/playbook/assets/54749071/3e97095b-f6bb-45b7-bd33-99ebde0d40fd)
2
+
3
+
4
+ ```swift
5
+ let iconSize: PBIcon.IconSize
6
+ let iconColor: CollapsibleIconColor
7
+ let text: String
8
+ @State private var isCollapsed = true
9
+ let lorem =
10
+ "
11
+ Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
12
+ Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
13
+ Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
14
+ "
15
+
16
+ PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
17
+ CollapsibleDoc(text: "Main Section")
18
+ } content: {
19
+ Text(lorem).pbFont(.body)
20
+ }
21
+
22
+ ```
@@ -0,0 +1,8 @@
1
+ ### Props
2
+ | Name | Type | Description | Default | Values |
3
+ | --- | ----------- | --------- | --------- | --------- |
4
+ | **isCollapsed** | `Bool` | Value for whether or not the dropdown is closed or open | `false` | `true` `false` |
5
+ | **headerView** | `View` | Title of dropdown | | |
6
+ | **contentView** | `View` | Content of dropdown | | |
7
+ | **iconSize** | `PBIcon.IconSize` | Sets size of chevron icon | `.small` | `xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10` |
8
+ | **iconColor** | `CollapsibleIconColor` | Sets color of chevron icon | `.default` | `default` `light` `lighter` `link` `error` `success` |
@@ -0,0 +1,26 @@
1
+ ![collapsible-sizes](https://github.com/powerhome/playbook/assets/54749071/557bfe16-26e4-4966-9f1c-689a2dc44412)
2
+
3
+ ```swift
4
+ let iconSize: PBIcon.IconSize
5
+ let iconColor: CollapsibleIconColor
6
+ let text: String
7
+ @State private var isCollapsed = true
8
+ let lorem =
9
+ "
10
+ Group members... Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit vive.
11
+ Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo.
12
+ Praesent lorem arcu. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis.
13
+ "
14
+
15
+ PBCollapsible(isCollapsed: $isCollapsed, iconSize: iconSize, iconColor: iconColor) {
16
+ VStack(spacing: Spacing.medium) {
17
+ CollapsibleDoc(iconSize: .xSmall, text: "Extra Small Section")
18
+ CollapsibleDoc(iconSize: .small, text: "Small Section")
19
+ CollapsibleDoc(text: "Default Section")
20
+ CollapsibleDoc(iconSize: .large, text: "Large Section")
21
+ }
22
+ } content: {
23
+ Text(lorem).pbFont(.body)
24
+ }
25
+
26
+ ```
@@ -14,3 +14,9 @@ examples:
14
14
  - collapsible_color: Icon Color
15
15
  - collapsible_icons: Custom Icons
16
16
  - collapsible_state: useCollapsible Hook
17
+
18
+ swift:
19
+ - collapsible_default_swift: Default
20
+ - collapsible_sizes_swift: Sizes
21
+ - collapsible_colors_swift: Colors
22
+ - collapsible_props_table: ""
@@ -122,9 +122,11 @@ const highchartsDarkTheme: ThemeProps = {
122
122
  // specific to gauge
123
123
  // unfilled gauge color
124
124
  pane: {
125
- background: [{
125
+ background: {
126
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
127
+ // @ts-ignore
126
128
  borderColor: colors.border_dark,
127
- }],
129
+ },
128
130
  },
129
131
 
130
132
  plotOptions: {
@@ -122,9 +122,11 @@ const highchartsTheme: ThemeProps = {
122
122
  // specific to gauge
123
123
  // unfilled gauge color
124
124
  pane: {
125
- background: [{
126
- borderColor: colors.border_light,
127
- }],
125
+ background: {
126
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
127
+ // @ts-ignore
128
+ borderColor: colors.border_light,
129
+ },
128
130
  },
129
131
 
130
132
  plotOptions: {
@@ -32,6 +32,10 @@ type DatePickerConfig = {
32
32
  } & Pick<BaseOptions, "allowInput" | "defaultDate" | "enableTime" | "maxDate" | "minDate" | "mode" | "plugins" | "position" | "positionElement" >
33
33
 
34
34
  const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
35
+ const noop = () => {
36
+ // intentionally left empty as a no-op placeholder
37
+ }
38
+
35
39
  const {
36
40
  allowInput,
37
41
  closeOnSelect = true,
@@ -45,8 +49,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
45
49
  maxDate,
46
50
  minDate,
47
51
  mode,
48
- onChange = () => {},
49
- onClose = () => {},
52
+ onChange = noop,
53
+ onClose = noop,
50
54
  pickerId,
51
55
  plugins,
52
56
  position = "auto",
@@ -72,20 +76,11 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
72
76
  return defaultDate
73
77
  }
74
78
  }
75
- const disabledParser = () => {
76
- const disabledArray=[]
77
-
78
- disableDate && disableDate.length > 0 && disabledArray.push(...disableDate)
79
- disableRange && disableRange.length > 0 && disabledArray.push(...disableRange)
80
- disableWeekdays && disableWeekdays.length > 0 && disabledArray.push(...disabledWeekDays())
81
-
82
- return disabledArray
83
- }
84
79
 
85
80
  const disabledWeekDays = () => {
86
81
  return (
87
82
  [
88
- (date:any) => {
83
+ (date: any) => {
89
84
  const weekdayObj: {
90
85
  [day: string]: number
91
86
  } = {
@@ -110,6 +105,16 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
110
105
  ]
111
106
  )
112
107
  }
108
+
109
+ const disabledParser = () => {
110
+ const disabledArray=[]
111
+
112
+ disableDate && disableDate.length > 0 && disabledArray.push(...disableDate)
113
+ disableRange && disableRange.length > 0 && disabledArray.push(...disableRange)
114
+ disableWeekdays && disableWeekdays.length > 0 && disabledArray.push(...disabledWeekDays())
115
+
116
+ return disabledArray
117
+ }
113
118
  const calendarResizer = () => {
114
119
  const cal = document.querySelector(`#cal-${pickerId}.open`) as HTMLElement
115
120
  const parentInput = cal.parentElement
@@ -125,28 +130,46 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
125
130
 
126
131
  const setPlugins = (thisRangesEndToday: boolean, customQuickPickDates: any) => {
127
132
  const pluginList = []
128
-
133
+
129
134
  // month and week selection
130
135
  if (selectionType === "month" || plugins.length > 0) {
131
136
  pluginList.push(monthSelectPlugin({ shorthand: true, dateFormat: 'F Y', altFormat: 'F Y' }))
132
137
  } else if ( selectionType === "week") {
133
138
  pluginList.push(weekSelect())
134
-
139
+
135
140
  } else if (selectionType === "quickpick") {
136
141
  //------- QUICKPICK VARIANT PLUGIN -------------//
137
142
  pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates))
138
143
  }
139
-
144
+
140
145
  // time selection
141
146
  if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
142
-
147
+
143
148
  return pluginList
144
149
  }
145
-
150
+
146
151
  const getDateFormat = () => {
147
152
  return enableTime ? `${format} ${timeFormat}` : format
148
153
  }
149
154
 
155
+ // Attach / detach to / from scroll events
156
+ const initialPicker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
157
+ const scrollEvent = () => {
158
+ initialPicker._positionCalendar()
159
+ }
160
+ function attachToScroll(scrollParent: string | HTMLElement) {
161
+ document.querySelectorAll(scrollParent as string)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
162
+ }
163
+ function detachFromScroll(scrollParent: string | HTMLElement = document.body) {
164
+ document.querySelectorAll(scrollParent as string)[0]?.removeEventListener("scroll", scrollEvent)
165
+ }
166
+
167
+ // two way binding
168
+ const initialDropdown = document.querySelector<HTMLElement & { [x: string]: any }>(`#year-${pickerId}`)
169
+ const yearChangeHook = () => {
170
+ initialDropdown.value = initialPicker.currentYear
171
+ }
172
+
150
173
  // ===========================================================
151
174
  // | Flatpickr initializer w/ config |
152
175
  // ===========================================================
@@ -193,17 +216,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
193
216
  const picker = document.querySelector<HTMLElement & { [x: string]: any }>(`#${pickerId}`)._flatpickr
194
217
  picker.innerContainer.parentElement.id = `cal-${pickerId}`
195
218
 
196
- // Attach / detach to / from scroll events
197
- const scrollEvent = () => {
198
- picker._positionCalendar()
199
- }
200
- function attachToScroll(scrollParent: string | HTMLElement) {
201
- document.querySelectorAll(scrollParent as string)[0]?.addEventListener("scroll", scrollEvent, { passive: true })
202
- }
203
- function detachFromScroll(scrollParent: string | HTMLElement = document.body) {
204
- document.querySelectorAll(scrollParent as string)[0]?.removeEventListener("scroll", scrollEvent)
205
- }
206
-
207
219
  // replace year selector with dropdown
208
220
  picker.yearElements[0].parentElement.innerHTML = `<select class="numInput cur-year" type="number" tabIndex="-1" aria-label="Year" id="year-${pickerId}"></select>`
209
221
 
@@ -242,11 +254,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
242
254
  })
243
255
  }
244
256
 
245
- // two way binding
246
- const yearChangeHook = () => {
247
- dropdown.value = picker.currentYear
248
- }
249
-
250
257
  // Adding dropdown icons to year and month selects
251
258
  dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
252
259
  if (picker.monthElements[0].parentElement) {
@@ -53,8 +53,8 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
53
53
 
54
54
  const calculateDateRange = (timePeriod: string, amount: number): Date[] => {
55
55
  const endDate = new Date();
56
- let startDate = new Date();
57
-
56
+ const startDate = new Date();
57
+
58
58
  switch (timePeriod) {
59
59
  case 'days':
60
60
  startDate.setDate(endDate.getDate() - amount);
@@ -76,7 +76,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
76
76
  }
77
77
  return [startDate, endDate];
78
78
  };
79
-
79
+
80
80
 
81
81
  type rangesType = {
82
82
  [key: string]: Date[]
@@ -95,7 +95,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
95
95
  'Last year': [lastYearStartDate, lastYearEndDate]
96
96
  };
97
97
 
98
-
98
+
99
99
  if (customQuickPickDates && Object.keys(customQuickPickDates).length !== 0) {
100
100
  if (customQuickPickDates.dates.length && customQuickPickDates.override === false) {
101
101
  customQuickPickDates.dates.forEach((item) => {
@@ -2,7 +2,8 @@ import React, { useEffect, useState } from "react";
2
2
  import classnames from "classnames";
3
3
 
4
4
  import { globalProps } from "../utilities/globalProps";
5
- import { buildHtmlProps } from '../utilities/props'
5
+ import { buildHtmlProps } from "../utilities/props";
6
+ import { VoidCallback } from "../types";
6
7
 
7
8
  import Icon from "../pb_icon/_icon";
8
9
  import Title from "../pb_title/_title";
@@ -15,23 +16,23 @@ const iconMap = {
15
16
  };
16
17
 
17
18
  type FixedConfirmationToastProps = {
18
- autoClose?: number,
19
- children?: React.ReactChild[] | React.ReactChild,
20
- className?: string,
21
- closeable?: boolean,
22
- data?: string,
23
- horizontal?: "right" | "left" | "center",
24
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
25
- id?: string,
26
- multiLine?: boolean,
27
- onClose?: () => void,
28
- open?: boolean,
29
- status?: "success" | "error" | "neutral" | "tip",
30
- text?: string,
31
- vertical?: "top" | "bottom",
32
- }
19
+ autoClose?: number;
20
+ children?: React.ReactChild[] | React.ReactChild;
21
+ className?: string;
22
+ closeable?: boolean;
23
+ data?: string;
24
+ horizontal?: "right" | "left" | "center";
25
+ htmlOptions?: { [key: string]: string | number | boolean | (VoidCallback) };
26
+ id?: string;
27
+ multiLine?: boolean;
28
+ onClose?: VoidCallback;
29
+ open?: boolean;
30
+ status?: "success" | "error" | "neutral" | "tip";
31
+ text?: string;
32
+ vertical?: "top" | "bottom";
33
+ };
33
34
 
34
- const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
35
+ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
35
36
  const [showToast, toggleToast] = useState(true);
36
37
  const {
37
38
  autoClose = 0,
@@ -41,7 +42,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
41
42
  horizontal,
42
43
  htmlOptions = {},
43
44
  multiLine = false,
44
- onClose = () => { },
45
+ onClose = () => undefined,
45
46
  open = true,
46
47
  status = "neutral",
47
48
  text,
@@ -65,7 +66,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
65
66
  onClose();
66
67
  }, autoClose);
67
68
  }
68
- }
69
+ };
69
70
 
70
71
  useEffect(() => {
71
72
  toggleToast(open);
@@ -80,22 +81,35 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
80
81
  return (
81
82
  <>
82
83
  {showToast && (
83
- <div className={css} onClick={handleClick} {...htmlProps}>
84
- {icon && <Icon className="pb_icon" fixedWidth icon={icon} />}
84
+ <div
85
+ className={css}
86
+ onClick={handleClick}
87
+ {...htmlProps}
88
+ >
89
+ {icon && (
90
+ <Icon
91
+ className="pb_icon"
92
+ fixedWidth
93
+ icon={icon}
94
+ />
95
+ )}
85
96
 
86
- {
87
- children && children ||
88
- text && (
97
+ {(children && children) ||
98
+ (text && (
89
99
  <Title
90
- className="pb_fixed_confirmation_toast_text"
91
- size={4}
92
- text={text}
100
+ className="pb_fixed_confirmation_toast_text"
101
+ size={4}
102
+ text={text}
93
103
  />
94
- )
95
- }
104
+ ))}
96
105
 
97
106
  {closeable && (
98
- <Icon className="pb_icon" cursor="pointer" fixedWidth={false} icon="times" />
107
+ <Icon
108
+ className="pb_icon"
109
+ cursor="pointer"
110
+ fixedWidth={false}
111
+ icon="times"
112
+ />
99
113
  )}
100
114
  </div>
101
115
  )}
@@ -2,12 +2,12 @@ import React from 'react'
2
2
  import classnames from 'classnames'
3
3
  import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
4
4
  import { GlobalProps, globalProps } from '../utilities/globalProps'
5
- import { Sizes } from '../types'
5
+ import { GenericObject, Sizes } from '../types'
6
6
 
7
7
  type FlexProps = {
8
8
  children: React.ReactChild[] | React.ReactNode,
9
9
  className?: string,
10
- data?: object,
10
+ data?: GenericObject,
11
11
  horizontal?: "left" | "center" | "right" | "stretch" | "none",
12
12
  justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
13
13
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -25,7 +25,7 @@ type FlexProps = {
25
25
  alignSelf?: "start" | "end" | "center" | "stretch" | "none"
26
26
  } & GlobalProps
27
27
 
28
- const Flex = (props: FlexProps) => {
28
+ const Flex = (props: FlexProps): React.ReactElement => {
29
29
  const {
30
30
  align = 'none',
31
31
  children,
@@ -45,7 +45,7 @@ const Flex = (props: FlexProps) => {
45
45
  wrap = false,
46
46
  alignSelf = 'none',
47
47
  } = props
48
-
48
+
49
49
  const orientationClass =
50
50
  orientation !== undefined ? `orientation_${orientation}` : ''
51
51
  const justifyClass =
@@ -2,18 +2,19 @@ import React from 'react'
2
2
  import classnames from 'classnames'
3
3
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
4
4
  import { globalProps } from '../utilities/globalProps'
5
+ import { GenericObject } from '../types'
5
6
 
6
7
  type FormGroupProps = {
7
8
  aria?: {[key: string]: string},
8
9
  children?: Node,
9
10
  className?: string,
10
- data?: object,
11
+ data?: GenericObject,
11
12
  fullWidth?: boolean,
12
13
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
13
14
  id?: string,
14
15
  }
15
16
 
16
- const FormGroup = (props: FormGroupProps) => {
17
+ const FormGroup = (props: FormGroupProps): React.ReactElement => {
17
18
  const {
18
19
  aria = {},
19
20
  className,
@@ -22,16 +22,16 @@ type FormPillProps = {
22
22
  onClick?: React.MouseEventHandler<HTMLSpanElement>,
23
23
  onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
24
24
  onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
25
- },
25
+ },
26
26
  } & GlobalProps
27
- const FormPill = (props: FormPillProps) => {
27
+ const FormPill = (props: FormPillProps): React.ReactElement => {
28
28
  const {
29
29
  className,
30
30
  htmlOptions = {},
31
31
  id,
32
32
  text,
33
33
  name,
34
- onClick = () => {},
34
+ onClick = () => undefined,
35
35
  avatarUrl,
36
36
  closeProps = {},
37
37
  size = '',
@@ -48,7 +48,10 @@ const FormPill = (props: FormPillProps) => {
48
48
  const htmlProps = buildHtmlProps(htmlOptions)
49
49
 
50
50
  return (
51
- <div className={css} id={id} {...htmlProps}>
51
+ <div className={css}
52
+ id={id}
53
+ {...htmlProps}
54
+ >
52
55
  {name &&
53
56
  <>
54
57
  <Avatar
@@ -12,12 +12,13 @@ import typography from "../tokens/exports/_typography.scss";
12
12
 
13
13
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
14
14
  import { globalProps } from "../utilities/globalProps";
15
+ import { GenericObject } from "../types";
15
16
 
16
17
  type GaugeProps = {
17
18
  aria: { [key: string]: string };
18
19
  className?: string;
19
20
  chartData?: { name: string; value: number[] | number }[];
20
- dark?: Boolean;
21
+ dark?: boolean;
21
22
  data?: { [key: string]: string };
22
23
  disableAnimation?: boolean;
23
24
  fullCircle?: boolean;
@@ -33,13 +34,12 @@ type GaugeProps = {
33
34
  title?: string;
34
35
  tooltipHtml?: string;
35
36
  colors: string[];
36
- minorTickInterval: any;
37
+ minorTickInterval?: number;
37
38
  circumference: number[];
38
39
  };
39
40
 
40
41
  const Gauge = ({
41
42
  aria = {},
42
- className,
43
43
  chartData,
44
44
  dark = false,
45
45
  data = {},
@@ -61,9 +61,9 @@ const Gauge = ({
61
61
  minorTickInterval = null,
62
62
  circumference = fullCircle ? [0, 360] : [-100, 100],
63
63
  ...props
64
- }: GaugeProps) => {
64
+ }: GaugeProps): React.ReactElement => {
65
65
  const ariaProps = buildAriaProps(aria);
66
- const dataProps = buildDataProps(data)
66
+ const dataProps = buildDataProps(data)
67
67
  const htmlProps = buildHtmlProps(htmlOptions);
68
68
  highchartsMore(Highcharts);
69
69
  solidGauge(Highcharts);
@@ -89,7 +89,7 @@ const Gauge = ({
89
89
  const [options, setOptions] = useState({});
90
90
 
91
91
  useEffect(() => {
92
- const formattedChartData = chartData.map((obj: any) => {
92
+ const formattedChartData = chartData.map((obj: GenericObject) => {
93
93
  obj.y = obj.value;
94
94
  delete obj.value;
95
95
  return obj;
@@ -185,20 +185,20 @@ const Gauge = ({
185
185
  .querySelectorAll(".fix")
186
186
  .forEach((fix) => fix.setAttribute("y", "38"));
187
187
  }
188
-
188
+ // eslint-disable-next-line react-hooks/exhaustive-deps
189
189
  }, [chartData]);
190
190
 
191
191
  return (
192
192
  <HighchartsReact
193
- containerProps={{
193
+ containerProps={{
194
194
  className: classnames(css, globalProps(props)),
195
195
  id: id,
196
196
  ...ariaProps,
197
197
  ...dataProps,
198
198
  ...htmlProps,
199
199
  }}
200
- highcharts={Highcharts}
201
- options={options}
200
+ highcharts={Highcharts}
201
+ options={options}
202
202
  />
203
203
  );
204
204
  };
@@ -8,6 +8,7 @@ import Body from '../pb_body/_body'
8
8
  import Hashtag from '../pb_hashtag/_hashtag'
9
9
  import Title from '../pb_title/_title'
10
10
  import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
11
+ import { GenericObject } from '../types'
11
12
 
12
13
  type HomeAddressStreetProps = {
13
14
  aria?: { [key: string]: string },
@@ -28,7 +29,7 @@ type HomeAddressStreetProps = {
28
29
  territory: string,
29
30
  }
30
31
 
31
- const HomeAddressStreet = (props: HomeAddressStreetProps) => {
32
+ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement => {
32
33
  const {
33
34
  address,
34
35
  addressCont,
@@ -58,17 +59,17 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
58
59
  className
59
60
  )
60
61
 
61
- const dataProps: { [key: string]: any } = buildDataProps(data)
62
- const ariaProps: { [key: string]: any } = buildAriaProps(aria)
62
+ const dataProps: GenericObject = buildDataProps(data)
63
+ const ariaProps: GenericObject = buildAriaProps(aria)
63
64
  const htmlProps = buildHtmlProps(htmlOptions)
64
65
  return (
65
- <div
66
- className={classes(className, dark)}
67
- {...ariaProps}
68
- {...dataProps}
69
- {...htmlProps}
66
+ <div
67
+ className={classes(className, dark)}
68
+ {...ariaProps}
69
+ {...dataProps}
70
+ {...htmlProps}
70
71
  >
71
- {emphasis == 'street' &&
72
+ {emphasis == 'street' &&
72
73
  <div>
73
74
  <Title
74
75
  className="pb_home_address_street_address"