playbook_ui 13.15.0 → 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2010

Sign up to get free protection for your applications and to get access to all the features.
Files changed (108) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +14 -12
  3. data/app/pb_kits/playbook/index.js +2 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +30 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +59 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx +5 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +30 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +61 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +120 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +28 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +5 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/SubComponents/TableBody.tsx +95 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/SubComponents/TableHeader.tsx +51 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/Utilities/helper_functions.tsx +77 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +8 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +97 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +237 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +56 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +52 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +278 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +5 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss +60 -0
  24. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss +12 -0
  25. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_colors_swift.md +27 -0
  26. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default_swift.md +22 -0
  27. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_props_table.md +8 -0
  28. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_sizes_swift.md +26 -0
  29. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +6 -0
  30. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +4 -2
  31. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +5 -3
  32. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +40 -33
  33. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +4 -4
  34. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +44 -30
  35. data/app/pb_kits/playbook/pb_flex/_flex.tsx +5 -5
  36. data/app/pb_kits/playbook/pb_form_group/_form_group.tsx +3 -2
  37. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +7 -4
  38. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +10 -10
  39. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +10 -9
  40. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +3 -2
  41. data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx +3 -2
  42. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  43. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -1
  44. data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
  45. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  46. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  47. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  48. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  49. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +30 -22
  50. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  51. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  52. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  53. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  54. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  55. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  56. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +15 -7
  57. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +4 -2
  58. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  59. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  60. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +46 -42
  61. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  62. data/app/pb_kits/playbook/pb_nav/_item.tsx +56 -47
  63. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  64. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_bold_swift.md +17 -0
  65. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_default_swift.md +17 -0
  66. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_no_highlight_swift.md +18 -0
  67. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_swift.md +18 -0
  68. data/app/pb_kits/playbook/pb_nav/docs/_nav_props_swift.md +11 -0
  69. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_bold_swift.md +18 -0
  70. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_default_swift.md +18 -0
  71. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_subtle_no_highlight_swift.md +19 -0
  72. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_subtle_swift.md +17 -0
  73. data/app/pb_kits/playbook/pb_nav/docs/example.yml +17 -0
  74. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +51 -50
  75. data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx +20 -19
  76. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +4 -3
  77. data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -4
  78. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +20 -20
  79. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx +4 -4
  80. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +19 -17
  81. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +1 -1
  82. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +23 -21
  83. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +18 -10
  84. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +46 -23
  85. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +8 -8
  86. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +7 -7
  87. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +17 -15
  88. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +9 -7
  89. data/app/pb_kits/playbook/pb_select/_select.scss +13 -4
  90. data/app/pb_kits/playbook/pb_select/_select.tsx +7 -4
  91. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb +24 -0
  92. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx +38 -0
  93. data/app/pb_kits/playbook/pb_select/docs/example.yml +2 -0
  94. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  95. data/app/pb_kits/playbook/pb_select/select.rb +6 -1
  96. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx +25 -24
  97. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +27 -26
  98. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +2 -1
  99. data/app/pb_kits/playbook/pb_source/_source.tsx +15 -15
  100. data/app/pb_kits/playbook/pb_table/_table.tsx +29 -29
  101. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
  102. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -2
  103. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  104. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
  105. data/dist/menu.yml +4 -1
  106. data/dist/playbook-rails.js +14 -6
  107. data/lib/playbook/version.rb +2 -2
  108. metadata +43 -7
@@ -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,15 +2,15 @@ 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
- 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",
@@ -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"
@@ -9,11 +9,12 @@ import Caption from '../pb_caption/_caption'
9
9
  import Flex from '../pb_flex/_flex'
10
10
  import IconCircle from '../pb_icon_circle/_icon_circle'
11
11
  import Title from '../pb_title/_title'
12
+ import { GenericObject } from '../types'
12
13
 
13
14
  type IconStatValueProps = {
14
15
  aria?: { [key: string]: string },
15
16
  className?: string,
16
- data?: object,
17
+ data?: GenericObject,
17
18
  dark?: boolean,
18
19
  icon: string,
19
20
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -34,7 +35,7 @@ type IconStatValueProps = {
34
35
  | "green",
35
36
  }
36
37
 
37
- const IconStatValue = (props: IconStatValueProps) => {
38
+ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
38
39
  const {
39
40
  aria = {},
40
41
  className,
@@ -6,20 +6,21 @@ import { globalProps } from '../utilities/globalProps'
6
6
 
7
7
  import Body from '../pb_body/_body'
8
8
  import Icon from '../pb_icon/_icon'
9
+ import { GenericObject } from '../types'
9
10
 
10
11
  type IconValueProps = {
11
12
  align?: "left" | "center" | "right",
12
13
  aria?: { [key: string]: string; },
13
14
  className?: string,
14
15
  dark?: boolean,
15
- data?: object,
16
+ data?: GenericObject,
16
17
  icon: string,
17
18
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
18
19
  id?: string,
19
20
  text: string,
20
21
  }
21
22
 
22
- const IconValue = (props: IconValueProps) => {
23
+ const IconValue = (props: IconValueProps): React.ReactElement => {
23
24
  const {
24
25
  align = 'left',
25
26
  aria = {},
@@ -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}
@@ -19,7 +19,7 @@ type LightboxType = {
19
19
  id?: string,
20
20
  photos: [],
21
21
  initialPhoto?: number,
22
- onChange?: (index: number)=> {},
22
+ onChange?: (index: number)=> void,
23
23
  onClickRight?: () => void,
24
24
  onClose?: () => void,
25
25
  icon: string,
@@ -40,7 +40,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
40
40
  id = '',
41
41
  initialPhoto = 0,
42
42
  photos,
43
- onChange = ()=>{},
43
+ onChange = () => undefined,
44
44
  onClose,
45
45
  onClickRight,
46
46
  icon = 'times',
@@ -107,18 +107,18 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
107
107
  <div className="carousel">
108
108
  <Lightbox.Header
109
109
  icon={icon}
110
- onClose={onClose}
110
+ navRight={navRight}
111
111
  onClickRight={onClickRight}
112
+ onClose={onClose}
112
113
  text={description}
113
- navRight={navRight}
114
114
  title={title}
115
115
  />
116
116
  {children}
117
117
  <Carousel
118
- setIndex={setActivePhoto}
119
118
  currentIndex={activePhoto}
120
119
  onChange={handleOnSlide}
121
120
  photos={photosMap}
121
+ setIndex={setActivePhoto}
122
122
  />
123
123
  </div>
124
124
  </div>