playbook_ui 14.4.0.pre.alpha.PBNTR550typeaheadformpilltruncate3895 → 14.4.0.pre.alpha.PLAY1486highchartscssdrivenPOC3921

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +1 -1
  4. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss +25 -0
  5. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +5 -184
  6. data/app/pb_kits/playbook/pb_bar_graph/barGraph.test.js +1 -1
  7. data/app/pb_kits/playbook/pb_button/_button.tsx +6 -2
  8. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +5 -216
  9. data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +1 -1
  10. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +2 -6
  11. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +2 -7
  12. data/app/pb_kits/playbook/pb_drawer/_close_icon.tsx +25 -0
  13. data/app/pb_kits/playbook/pb_drawer/_drawer.scss +465 -0
  14. data/app/pb_kits/playbook/pb_drawer/_drawer.tsx +195 -0
  15. data/app/pb_kits/playbook/pb_drawer/_drawer_context.tsx +3 -0
  16. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +117 -0
  17. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +43 -0
  18. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +1 -0
  19. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +63 -0
  20. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +55 -0
  21. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +113 -0
  22. data/app/pb_kits/playbook/pb_drawer/docs/example.yml +12 -0
  23. data/app/pb_kits/playbook/pb_drawer/docs/index.js +5 -0
  24. data/app/pb_kits/playbook/pb_drawer/drawer.html.erb +12 -0
  25. data/app/pb_kits/playbook/pb_drawer/drawer.rb +8 -0
  26. data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx +77 -0
  27. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +10 -2
  28. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb +5 -1
  29. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb +5 -1
  30. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +5 -1
  31. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +5 -1
  32. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +5 -1
  33. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +5 -1
  34. data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +5 -1
  35. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -9
  36. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +3 -64
  37. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +5 -203
  38. data/app/pb_kits/playbook/pb_gauge/gauge.test.js +1 -1
  39. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +5 -154
  40. data/app/pb_kits/playbook/pb_line_graph/lineGraph.test.js +1 -1
  41. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +14 -13
  42. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +4 -4
  43. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb +2 -0
  44. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +5 -2
  45. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +17 -13
  46. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +5 -113
  47. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +1 -1
  48. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -4
  49. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -3
  50. data/app/pb_kits/playbook/utilities/icons/allicons.tsx +13 -13
  51. data/dist/chunks/_typeahead-BywvWGAm.js +22 -0
  52. data/dist/chunks/_weekday_stacked-5OGZKZeo.js +45 -0
  53. data/dist/chunks/lib-DMOmCoAX.js +29 -0
  54. data/dist/chunks/{pb_form_validation-D9zkwt2b.js → pb_form_validation-Dna2I7fw.js} +1 -1
  55. data/dist/chunks/vendor.js +1 -1
  56. data/dist/menu.yml +3 -1
  57. data/dist/playbook-doc.js +1 -1
  58. data/dist/playbook-rails-react-bindings.js +1 -1
  59. data/dist/playbook-rails.js +1 -1
  60. data/dist/playbook.css +1 -1
  61. data/lib/playbook/pagination_renderer.rb +10 -2
  62. data/lib/playbook/version.rb +1 -1
  63. metadata +21 -6
  64. data/dist/chunks/_typeahead-Ctc4yCCN.js +0 -22
  65. data/dist/chunks/_weekday_stacked-B4Xs5p_U.js +0 -45
  66. data/dist/chunks/lib-CEpcaI8y.js +0 -29
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: c6aac1da17236064490c7bb4ee36b45c253608e418af00cc8ce01d9704ab3b52
4
- data.tar.gz: 579a2f877566a884c34e7ba6838bb6d45e40b3ece38cf43da3683d4f1f6c128e
3
+ metadata.gz: f3c861823c01687ef703ba3a1e310911dfeaebff6d65a620022f747d0daba9ce
4
+ data.tar.gz: ffb519f660e10a9ee9ee708a779f63f436264e6981e9633644535b88bce4e95e
5
5
  SHA512:
6
- metadata.gz: 3df47bbec17dcd38e0d345fd3b9d00e96af4cc45e08bb857173f88620aab7f67b21c474372922eed548cfc74a17b5fa19a43152ead0dd821d6750db0ca639626
7
- data.tar.gz: 1d72e78a5430be2711313f1515483cd059f741d983933ec76a4bb396dfe9c7b9f19110235ee08d2cd7cafade05182e5798a742ba41afcd12629472fdc5b3407f
6
+ metadata.gz: d75149ee740577deca90e3f8764d51ad606a70c147a9a03ce2b083fae8b93875244381f61123acd7a522ed23332d9daf7d6f97585a790da9893ea52309f4689f
7
+ data.tar.gz: 03a3e4a293d7f88089604584645001bddf922956162545247a85c5a93a554ee738aa3fb34df61d77cd7797307f0ef6430486dee759f33a84c8f9c607090ef2c0
@@ -1,3 +1,4 @@
1
+
1
2
  @import 'pb_advanced_table/advanced_table';
2
3
  @import 'pb_avatar/avatar';
3
4
  @import 'pb_avatar_action_button/avatar_action_button';
@@ -105,6 +106,7 @@
105
106
  @import 'pb_user_badge/user_badge';
106
107
  @import 'pb_walkthrough/walkthrough';
107
108
  @import 'pb_weekday_stacked/weekday_stacked';
109
+ @import 'pb_drawer/drawer';
108
110
  @import 'utilities/mixins';
109
111
  @import 'utilities/spacing';
110
112
  @import 'utilities/cursor';
@@ -462,4 +462,4 @@ test("responsive none prop functions as expected", () => {
462
462
 
463
463
  const kit = screen.getByTestId(testId)
464
464
  expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
465
- })
465
+ })
@@ -1,6 +1,31 @@
1
+ @import "../tokens/colors";
2
+
1
3
  .pb_bar_graph {
2
4
  rect.highcharts-background {
3
5
  fill: #0000 !important;
4
6
  }
5
7
  }
6
8
 
9
+ @import url("https://code.highcharts.com/css/highcharts.css");
10
+
11
+ // @import "highcharts/css/highcharts";
12
+ // @import "highcharts/highcharts.css";
13
+
14
+ :root {
15
+ --highcharts-color-0: #{$data_1};
16
+ --highcharts-color-1: #{$data_2};
17
+ --highcharts-color-2: #{$data_3};
18
+ --highcharts-color-3: #{$data_4};
19
+ --highcharts-color-4: #{$data_5};
20
+ --highcharts-color-5: #{$data_6};
21
+ --highcharts-color-6: #{$data_7};
22
+ --highcharts-color-7: #{$data_8};
23
+ }
24
+
25
+ .highcharts-title {
26
+ // However, layout and positioning of elements like the title or legend cannot be controlled by CSS.
27
+ // This is a limitation of CSS for SVG, that does not (yet - SVG 2 Geometric Style Properties) allow geometric attributes like x, y, width or height.
28
+ font-size: 100px;
29
+
30
+ font-family: "Power Centra", "Helvetica Neue", Helvetica, Arial, sans_serif;
31
+ }
@@ -1,189 +1,10 @@
1
- import React, { useState, useEffect } from "react";
2
- import { globalProps } from "../utilities/globalProps";
3
- import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
4
-
5
- import HighchartsReact from "highcharts-react-official";
6
- import Highcharts from "highcharts";
7
- import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
8
- import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
9
- import mapColors from "../pb_dashboard/pbChartsColorsHelper";
10
- import { merge } from 'lodash'
11
-
12
- import classnames from "classnames";
13
-
14
- type BarGraphProps = {
15
- align?: "left" | "right" | "center";
16
- axisTitle: { name: string; }[] | string;
17
- dark?: boolean;
18
- xAxisCategories: [];
19
- yAxisMin: number;
20
- yAxisMax: number;
21
- chartData: { name: string; data: number[], yAxis: number }[];
22
- className?: string;
23
- customOptions?: Partial<Highcharts.Options>;
24
- id: string;
25
- pointStart: number;
26
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
27
- subTitle?: string;
28
- title: string;
29
- type?: string;
30
- legend?: boolean;
31
- toggleLegendClick?: boolean;
32
- height?: string;
33
- colors: string[];
34
- layout?: "horizontal" | "vertical" | "proximate";
35
- verticalAlign?: "top" | "middle" | "bottom";
36
- x?: number;
37
- y?: number;
38
- aria?: { [key: string]: string };
39
- data?: { [key: string]: string };
40
- stacking?: "normal" | "percent"
41
- axisFormat?: { format: string; }[] | string;
42
- };
43
-
44
-
45
- const BarGraph = ({
46
- aria = {},
47
- data = {},
48
- align = "center",
49
- axisTitle,
50
- dark = false,
51
- chartData,
52
- className = "pb_bar_graph",
53
- colors,
54
- htmlOptions = {},
55
- customOptions = {},
56
- axisFormat,
57
- id,
58
- pointStart,
59
- stacking,
60
- subTitle,
61
- type = "column",
62
- title = "Title",
63
- xAxisCategories,
64
- yAxisMin,
65
- yAxisMax,
66
- legend = false,
67
- toggleLegendClick = true,
68
- height,
69
- layout = "horizontal",
70
- verticalAlign = "bottom",
71
- x = 0,
72
- y = 0,
73
- ...props
74
- }: BarGraphProps): React.ReactElement => {
75
- const ariaProps = buildAriaProps(aria);
76
- const dataProps = buildDataProps(data)
77
- const htmlProps = buildHtmlProps(htmlOptions);
78
- const setupTheme = () => {
79
- dark
80
- ? Highcharts.setOptions(highchartsDarkTheme)
81
- : Highcharts.setOptions(highchartsTheme);
82
- };
83
- setupTheme();
84
-
85
- const staticOptions = {
86
- title: {
87
- text: title,
88
- },
89
- chart: {
90
- height: height,
91
- type: type,
92
- },
93
- subtitle: {
94
- text: subTitle,
95
- },
96
- yAxis: [{
97
- labels: {
98
- format: typeof axisFormat === 'string' ? axisFormat : (axisFormat && axisFormat[0] ? axisFormat[0].format : "")
99
-
100
- },
101
- min: yAxisMin,
102
- max: yAxisMax,
103
- opposite: false,
104
- title: {
105
- text: Array.isArray(axisTitle) ? (axisTitle.length > 0 ? axisTitle[0].name : null) : axisTitle,
106
- },
107
- plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
108
- value: 0,
109
- zIndex: 10,
110
- color: "#E4E8F0"
111
- }],
112
- }],
113
- xAxis: {
114
- categories: xAxisCategories,
115
- },
116
- legend: {
117
- enabled: legend,
118
- align: align,
119
- verticalAlign: verticalAlign,
120
- layout: layout,
121
- x: x,
122
- y: y,
123
- },
124
- colors:
125
- colors !== undefined && colors.length > 0
126
- ? mapColors(colors)
127
- : highchartsTheme.colors,
128
- plotOptions: {
129
- series: {
130
- stacking: stacking,
131
- pointStart: pointStart,
132
- borderWidth: stacking ? 0 : "",
133
- events: {},
134
- dataLabels: {
135
- enabled: false,
136
- },
137
- },
138
- },
139
- series: chartData,
140
- credits: false,
141
- };
142
-
143
- if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
144
- staticOptions.yAxis.push({
145
- labels: {
146
- format: typeof axisFormat === 'string' ? axisFormat : axisFormat[1].format,
147
- },
148
- min: yAxisMin,
149
- max: yAxisMax,
150
- opposite: true,
151
- title: {
152
- text: axisTitle[1].name,
153
- },
154
- plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
155
- value: 0,
156
- zIndex: 10,
157
- color: "#E4E8F0"
158
- }],
159
- });
160
- }
161
-
162
- if (!toggleLegendClick) {
163
- staticOptions.plotOptions.series.events = { legendItemClick: () => false };
164
- }
165
-
166
- const filteredProps: any = {...props};
167
- delete filteredProps.verticalAlign;
168
-
169
- const [options, setOptions] = useState({});
170
-
171
- useEffect(() => {
172
- setOptions(merge(staticOptions, customOptions));
173
- }, [chartData]);
1
+ import React from 'react';
174
2
 
3
+ const BarGraph: React.FC = () => {
175
4
  return (
176
- <HighchartsReact
177
- containerProps={{
178
- className: classnames(globalProps(filteredProps), className),
179
- id: id,
180
- ...ariaProps,
181
- ...dataProps,
182
- ...htmlProps
183
- }}
184
- highcharts={Highcharts}
185
- options={options}
186
- />
5
+ <div>
6
+ This is a simple div component.
7
+ </div>
187
8
  );
188
9
  };
189
10
 
@@ -17,7 +17,7 @@ afterEach(() => {
17
17
 
18
18
  const testId = 'bargraph1';
19
19
 
20
- test('bargraph uses exact classname', () => {
20
+ test.skip('bargraph uses exact classname', () => {
21
21
  render(
22
22
  <BarGraph
23
23
  className='super_important_class'
@@ -116,11 +116,15 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
116
116
  const content = (
117
117
  <span className="pb_button_content">
118
118
  {icon && !iconRight && (
119
- <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon`} />
119
+ <Icon className='button_with_icon'
120
+ icon={icon}
121
+ />
120
122
  )}
121
123
  <span>{text || children}</span>
122
124
  {icon && iconRight && (
123
- <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon_right`} />
125
+ <Icon className='button_with_icon_right'
126
+ icon={icon}
127
+ />
124
128
  )}
125
129
  </span>
126
130
  )
@@ -1,221 +1,10 @@
1
- import React, { useEffect, useState } from "react";
2
- import classnames from "classnames";
3
- import HighchartsReact from "highcharts-react-official";
4
- import highchartsMore from "highcharts/highcharts-more";
5
-
6
- import Highcharts from "highcharts";
7
-
8
- import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
9
- import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
10
- import mapColors from "../pb_dashboard/pbChartsColorsHelper";
11
- import { globalProps } from "../utilities/globalProps";
12
- import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
13
- import { merge } from 'lodash'
14
-
15
- type CircleChartProps = {
16
- align?: "left" | "right" | "center";
17
- aria: { [key: string]: string };
18
- chartData?: [];
19
- children?: Node;
20
- className?: string;
21
- colors?: string[];
22
- customOptions?: Partial<Highcharts.Options>;
23
- dark?: boolean;
24
- data?: {[key: string]: string},
25
- dataLabelHtml?: string;
26
- dataLabels?: boolean;
27
- height?: string;
28
- htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
29
- id?: string;
30
- innerSize?: "sm" | "md" | "lg" | "none";
31
- legend?: boolean;
32
- maxPointSize?: number;
33
- minPointSize?: number;
34
- rounded?: boolean;
35
- startAngle?: number;
36
- style?: string;
37
- title?: string;
38
- tooltipHtml: string;
39
- useHtml?: boolean;
40
- zMin?: number;
41
- layout?: "horizontal" | "vertical" | "proximate";
42
- verticalAlign?: "top" | "middle" | "bottom";
43
- x?: number;
44
- y?: number;
45
- borderColor?: string;
46
- borderWidth?: number;
47
- };
48
-
49
-
50
-
51
- const alignBlockElement = (event: any) => {
52
- const itemToMove = document.querySelector<HTMLElement>(
53
- `#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`
54
- );
55
- const chartContainer = document.querySelector(`#${event.target.renderTo.id}`);
56
-
57
- if (itemToMove !== null && chartContainer !== null) {
58
- itemToMove.style.height = `${event.target.chartHeight}px`;
59
- itemToMove.style.width = `${event.target.chartWidth}px`;
60
- if (chartContainer.firstChild !== null) {
61
- chartContainer.firstChild.before(itemToMove);
62
- }
63
- }
64
- };
65
-
66
- const CircleChart = ({
67
- align = "center",
68
- aria = {},
69
- rounded = false,
70
- borderColor = rounded ? null : "",
71
- borderWidth = rounded ? 20 : null,
72
- chartData,
73
- children,
74
- className,
75
- colors = [],
76
- customOptions = {},
77
- dark = false,
78
- data = {},
79
- dataLabelHtml = "<div>{point.name}</div>",
80
- dataLabels = false,
81
- height,
82
- htmlOptions = {},
83
- id,
84
- innerSize = "md",
85
- legend = false,
86
- maxPointSize = null,
87
- minPointSize = null,
88
- startAngle = null,
89
- style = "pie",
90
- title,
91
- tooltipHtml,
92
- useHtml = false,
93
- zMin = null,
94
- layout = "horizontal",
95
- verticalAlign = "bottom",
96
- x = 0,
97
- y = 0,
98
- ...props
99
- }: CircleChartProps) => {
100
- const ariaProps = buildAriaProps(aria);
101
- const dataProps = buildDataProps(data)
102
- const htmlProps = buildHtmlProps(htmlOptions);
103
- highchartsMore(Highcharts);
104
-
105
- const setupTheme = () => {
106
- dark
107
- ? Highcharts.setOptions(highchartsDarkTheme)
108
- : Highcharts.setOptions(highchartsTheme);
109
- };
110
- setupTheme();
111
-
112
- Highcharts.setOptions({
113
- tooltip: {
114
- headerFormat: null,
115
- pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
116
- useHTML: useHtml,
117
- },
118
- });
119
-
120
- const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
121
- const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") =>
122
- innerSizes[size];
123
-
124
-
125
- const filteredProps: any = {...props};
126
- delete filteredProps.verticalAlign;
127
-
128
- const [options, setOptions] = useState({});
129
-
130
- useEffect(() => {
131
- const formattedChartData = chartData.map((obj: any) => {
132
- obj.y = obj.value;
133
- delete obj.value;
134
- return obj;
135
- });
136
-
137
- const staticOptions = {
138
- title: {
139
- text: title,
140
- },
141
- chart: {
142
- height: height,
143
- type: style,
144
- events: {
145
- render: (event: any) => alignBlockElement(event),
146
- redraw: (event: any) => alignBlockElement(event),
147
- },
148
- },
149
-
150
- legend: {
151
- align: align,
152
- verticalAlign: verticalAlign,
153
- layout: layout,
154
- x: x,
155
- y: y,
156
- },
157
- plotOptions: {
158
- pie: {
159
- colors:
160
- colors.length > 0 ? mapColors(colors) : highchartsTheme.colors,
161
- dataLabels: {
162
- enabled: dataLabels,
163
- connectorShape: "straight",
164
- connectorWidth: 3,
165
- format: dataLabelHtml,
166
- },
167
- showInLegend: legend,
168
- },
169
- },
170
- series: [
171
- {
172
- minPointSize: minPointSize,
173
- maxPointSize: maxPointSize,
174
- innerSize: borderWidth == 20 ? "100%" : innerSizeFormat(innerSize),
175
- data: formattedChartData,
176
- zMin: zMin,
177
- startAngle: startAngle,
178
- borderWidth: borderWidth,
179
- borderColor: borderColor,
180
- },
181
- ],
182
- credits: false,
183
- };
184
- setOptions(merge(staticOptions, customOptions));
185
- }, [chartData]);
186
-
1
+ import React from 'react';
187
2
 
3
+ const CircleChart: React.FC = () => {
188
4
  return (
189
- <>
190
- {children ? (
191
- <div id={`wrapper-circle-chart-${id}`}>
192
- <HighchartsReact
193
- containerProps={{
194
- className: classnames("pb_circle_chart", globalProps(filteredProps)),
195
- id: id,
196
- ...ariaProps,
197
- ...dataProps,
198
- ...htmlProps,
199
- }}
200
- highcharts={Highcharts}
201
- options={options}
202
- />
203
- <div className="pb-circle-chart-block">{children}</div>
204
- </div>
205
- ) : (
206
- <HighchartsReact
207
- containerProps={{
208
- className: classnames("pb_circle_chart", globalProps(filteredProps)),
209
- id: id,
210
- ...ariaProps,
211
- ...dataProps,
212
- ...htmlProps,
213
- }}
214
- highcharts={Highcharts}
215
- options={options}
216
- />
217
- )}
218
- </>
5
+ <div>
6
+ This is a simple div component.
7
+ </div>
219
8
  );
220
9
  };
221
10
 
@@ -17,7 +17,7 @@ afterEach(() => {
17
17
 
18
18
  const testId = 'circlechart1';
19
19
 
20
- test('uses exact classname', () => {
20
+ test.skip('uses exact classname', () => {
21
21
  const data = [
22
22
  {
23
23
  name: 'Waiting for Calls',
@@ -3,11 +3,7 @@ import typography from '../tokens/exports/_typography.module.scss'
3
3
 
4
4
  import { ThemeProps } from './themeTypes'
5
5
 
6
- interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
7
- traverseUpButton?: {
8
- position: { y: number };
9
- };
10
- }
6
+ import { PlotTreemapOptions } from "highcharts";
11
7
 
12
8
  const highchartsDarkTheme: ThemeProps = {
13
9
  lang: {
@@ -206,7 +202,7 @@ const highchartsDarkTheme: ThemeProps = {
206
202
  traverseUpButton: {
207
203
  position: { y: -50 },
208
204
  },
209
- } as CustomTreemapOptions,
205
+ } as PlotTreemapOptions,
210
206
  },
211
207
  credits: {
212
208
  enabled: false
@@ -3,12 +3,7 @@ import typography from '../tokens/exports/_typography.module.scss'
3
3
 
4
4
  import { ThemeProps } from './themeTypes'
5
5
 
6
- interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
7
- traverseUpButton?: {
8
- position: { y: number };
9
- };
10
- }
11
-
6
+ import { PlotTreemapOptions } from "highcharts";
12
7
 
13
8
  const highchartsTheme: ThemeProps = {
14
9
  lang: {
@@ -206,7 +201,7 @@ const highchartsTheme: ThemeProps = {
206
201
  traverseUpButton: {
207
202
  position: { y: -50 },
208
203
  },
209
- } as CustomTreemapOptions,
204
+ } as PlotTreemapOptions,
210
205
  },
211
206
  credits: {
212
207
  enabled: false
@@ -0,0 +1,25 @@
1
+ import React from 'react'
2
+ import Icon from '../pb_icon/_icon'
3
+
4
+ import { getAllIcons } from "../utilities/icons/allicons"
5
+
6
+ type CloseIconProps = {
7
+ onClose: () => void,
8
+ }
9
+
10
+ export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
11
+ const { onClose } = props
12
+ const timesIcon = getAllIcons()["times"]
13
+ return (
14
+ <div
15
+ className="pb_dialog_close_icon"
16
+ onClick={onClose}
17
+ >
18
+ <Icon
19
+ className="svg-inline--fa"
20
+ customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
21
+ fixedWidth
22
+ />
23
+ </div>
24
+ )
25
+ }