playbook_ui 13.15.0.pre.alpha.1132globalpropdatepickerspacing1929 → 13.16.0.pre.alpha.PLAY11641991

Sign up to get free protection for your applications and to get access to all the features.
Files changed (54) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +3 -2
  3. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +1 -43
  4. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -2
  5. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +1 -15
  6. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +40 -33
  7. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +4 -4
  8. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss +2 -1
  9. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +44 -30
  10. data/app/pb_kits/playbook/pb_flex/_flex.tsx +4 -4
  11. data/app/pb_kits/playbook/pb_form_group/_form_group.tsx +3 -2
  12. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +7 -4
  13. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +10 -10
  14. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +10 -9
  15. data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
  16. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
  17. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
  18. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +7 -12
  19. data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
  20. data/app/pb_kits/playbook/pb_icon/icon.rb +10 -10
  21. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +3 -2
  22. data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx +3 -2
  23. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +51 -50
  24. data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx +20 -19
  25. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +4 -3
  26. data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -4
  27. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +20 -20
  28. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx +4 -4
  29. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +19 -17
  30. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +1 -1
  31. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +23 -21
  32. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +18 -10
  33. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +46 -23
  34. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +8 -8
  35. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +7 -7
  36. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +17 -15
  37. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +9 -7
  38. data/app/pb_kits/playbook/pb_select/_select.scss +13 -4
  39. data/app/pb_kits/playbook/pb_select/_select.tsx +7 -4
  40. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb +24 -0
  41. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx +38 -0
  42. data/app/pb_kits/playbook/pb_select/docs/example.yml +2 -0
  43. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  44. data/app/pb_kits/playbook/pb_select/select.rb +6 -1
  45. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx +25 -24
  46. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +27 -26
  47. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +2 -1
  48. data/app/pb_kits/playbook/pb_source/_source.tsx +15 -15
  49. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -0
  50. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -4
  51. data/app/pb_kits/playbook/pb_text_input/text_input.rb +1 -5
  52. data/dist/playbook-rails.js +4 -4
  53. data/lib/playbook/version.rb +2 -2
  54. metadata +4 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d3d5b87f2b6c16e79587bb3c5e948214ab861f720b447f1de049940fe74d6d3f
4
- data.tar.gz: 35f0b35d0c9e112c30f0ca5af3916e1b57f05068650e320c1da973a97cf12936
3
+ metadata.gz: 57fca63de92f445e74e488eda8d295b1479dbe313650e923fee16c785cf6b45e
4
+ data.tar.gz: c560bc551c9ae918623a7162cdba1697c84abaad1734945179fc8f308d0d9291
5
5
  SHA512:
6
- metadata.gz: dcec116e1d5fb1e095e0b92fec1a0a80f85407472821bcd7a22bafdafbd6e3d412d72237ab150c3338e934043e7a5427e567ceb87b2615836716e1cf2928c5a1
7
- data.tar.gz: 88b6924b8a19996f02acad09f739e80a04aec6c2caf49374bb5ec37709f84939c29ecc8a9e591297d4d436c5e80c2c5060552423a073ba1bc3be4c02e38b4be8
6
+ metadata.gz: 4e4515916b811c21fcb4a83494c1da95070ab28eed128ec2c9fb39b468a85c1328afe2f129edfd9076ac87bab0229c1c83947b9d883997e536799b7fd6b4360c
7
+ data.tar.gz: 6140438567931eff178736f0264a9ead96dfbf29854b2ab0c373521168befbee0650d98bbb2d14771ecd455f5cbf0de1de288ca7f9b8d5e61a045707d39f087c
@@ -10,6 +10,7 @@
10
10
 
11
11
  [class^=pb_date_picker_kit] {
12
12
  .input_wrapper {
13
+ margin-bottom: $space_sm;
13
14
  position: relative;
14
15
 
15
16
  .flatpickr-wrapper {
@@ -46,7 +47,7 @@
46
47
  .text_input_wrapper_add_on .add-on-right .text_input{
47
48
  cursor: pointer;
48
49
  }
49
-
50
+
50
51
  }
51
52
 
52
53
 
@@ -75,4 +76,4 @@
75
76
  &:after {
76
77
  content: none;
77
78
  }
78
- }
79
+ }
@@ -1,8 +1,6 @@
1
1
  import React, { useEffect } from 'react'
2
2
  import classnames from 'classnames'
3
3
 
4
- import { Spacing } from "../types"
5
-
6
4
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
7
5
  import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
8
6
 
@@ -11,7 +9,6 @@ import Icon from '../pb_icon/_icon'
11
9
  import Caption from '../pb_caption/_caption'
12
10
  import Body from '../pb_body/_body'
13
11
 
14
-
15
12
  type DatePickerProps = {
16
13
  allowInput?: boolean,
17
14
  aria?: { [key: string]: string },
@@ -37,13 +34,6 @@ type DatePickerProps = {
37
34
  inputOnChange?: (e: React.FormEvent<HTMLInputElement>) => void,
38
35
  inputValue?: string,
39
36
  label?: string,
40
- margin?: Spacing;
41
- marginBottom?: Spacing;
42
- marginTop?: Spacing;
43
- marginRight?: Spacing;
44
- marginLeft?: Spacing;
45
- marginX?: Spacing;
46
- marginY?: Spacing;
47
37
  maxDate: string,
48
38
  minDate: string,
49
39
  name: string,
@@ -88,13 +78,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
88
78
  inputOnChange,
89
79
  inputValue,
90
80
  label = 'Date Picker',
91
- margin,
92
- marginBottom = "sm",
93
- marginTop,
94
- marginRight,
95
- marginLeft,
96
- marginX,
97
- marginY,
98
81
  maxDate,
99
82
  minDate,
100
83
  mode = 'single',
@@ -151,33 +134,8 @@ useEffect(() => {
151
134
  required: false,
152
135
  }, scrollContainer)
153
136
  })
154
-
155
- const spacingMarginProps = {
156
- margin,
157
- marginBottom,
158
- marginTop,
159
- marginRight,
160
- marginLeft,
161
- marginX,
162
- marginY,
163
- }
164
-
165
137
  const filteredProps = {...props}
166
138
  delete filteredProps?.position
167
- delete filteredProps?.margin;
168
- delete filteredProps?.marginX;
169
- delete filteredProps?.marginY;
170
- delete filteredProps?.marginBottom;
171
- delete filteredProps?.marginTop;
172
- delete filteredProps?.marginRight;
173
- delete filteredProps?.marginLeft;
174
-
175
- const inputClasses = classnames(
176
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
177
- //@ts-ignore
178
- globalProps(spacingMarginProps),
179
- className
180
- )
181
139
 
182
140
  const classes = classnames(
183
141
  buildCss('pb_date_picker_kit'),
@@ -221,7 +179,7 @@ useEffect(() => {
221
179
  text={hideLabel ? null : label}
222
180
  />
223
181
  <>
224
- <div className={`date_picker_input_wrapper ${inputClasses}`}>
182
+ <div className="date_picker_input_wrapper">
225
183
  <input
226
184
  autoComplete="off"
227
185
  className="date_picker_input"
@@ -19,7 +19,6 @@
19
19
  name: object.name,
20
20
  placeholder: object.placeholder,
21
21
  required: object.required,
22
- classname: margins_to_remove.join(" ")
23
22
  }) %>
24
23
  <% end %>
25
24
 
@@ -81,4 +80,4 @@
81
80
  }
82
81
  })
83
82
  <% end %>
84
- <% end %>
83
+ <% end %>
@@ -74,22 +74,8 @@ module Playbook
74
74
  prop :year_range, type: Playbook::Props::Array,
75
75
  default: [1900, 2100]
76
76
 
77
- def margins_to_remove
78
- margin_classes_to_remove = []
79
- margin_classes_to_remove << "m_#{object.margin}" if object.margin
80
- margin_classes_to_remove << "mx_#{object.margin_x}" if object.margin_x
81
- margin_classes_to_remove << "my_#{object.margin_y}" if object.margin_y
82
- margin_classes_to_remove << "mb_#{object.margin_bottom}" if object.margin_bottom
83
- margin_classes_to_remove << "mt_#{object.margin_top}" if object.margin_top
84
- margin_classes_to_remove << "mr_#{object.margin_right}" if object.margin_right
85
- margin_classes_to_remove << "ml_#{object.margin_left}" if object.margin_left
86
- margin_classes_to_remove
87
- end
88
-
89
77
  def classname
90
- regex = Regexp.union(margins_to_remove)
91
- classnames = generate_classname("pb_date_picker_kit")
92
- classnames.gsub(regex, "").strip.gsub(/\s+/, " ")
78
+ generate_classname("pb_date_picker_kit")
93
79
  end
94
80
 
95
81
  def date_picker_config
@@ -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) => {
@@ -1,6 +1,7 @@
1
1
  @import "../../pb_textarea/textarea_mixin";
2
2
 
3
3
  [class^=pb_date_picker_kit] {
4
+ margin-bottom: $space_sm;
4
5
 
5
6
  .pb_date_picker_kit_label {
6
7
  margin-bottom: $space_xs;
@@ -64,4 +65,4 @@
64
65
  }
65
66
  }
66
67
  }
67
- }
68
+ }
@@ -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"