playbook_ui 11.11.0 → 11.12.1.pre.alpha.charts1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (91) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +2 -1
  3. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +145 -0
  4. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +17 -1
  5. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.html.erb +62 -0
  6. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -0
  7. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md +17 -0
  8. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +2 -0
  9. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  10. data/app/pb_kits/playbook/pb_button/_button.scss +6 -0
  11. data/app/pb_kits/playbook/pb_button/docs/_button_default.html.erb +4 -4
  12. data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +18 -17
  13. data/app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts +2 -0
  14. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +216 -0
  15. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.html.erb +9 -21
  16. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +23 -47
  17. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +86 -0
  18. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +114 -0
  19. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +17 -0
  20. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -0
  21. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +1 -0
  22. data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts +16 -0
  23. data/app/pb_kits/playbook/pb_dashboard/{pbChartsDarkTheme.js → pbChartsDarkTheme.ts} +6 -21
  24. data/app/pb_kits/playbook/pb_dashboard/{pbChartsLightTheme.js → pbChartsLightTheme.ts} +6 -21
  25. data/app/pb_kits/playbook/pb_dashboard/themeTypes.ts +16 -0
  26. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +50 -50
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.jsx +1 -0
  28. data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts +89 -89
  29. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss +15 -0
  30. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +30 -1
  31. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +28 -0
  32. data/app/pb_kits/playbook/pb_dialog/dialog.rb +7 -35
  33. data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +21 -0
  34. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +7 -0
  35. data/app/pb_kits/playbook/pb_dialog/dialog_body.rb +13 -0
  36. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +13 -0
  37. data/app/pb_kits/playbook/pb_dialog/dialog_footer.rb +16 -0
  38. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +13 -0
  39. data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +3 -20
  40. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +12 -0
  41. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md +3 -1
  42. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb +11 -0
  43. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.md +3 -0
  44. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb +29 -0
  45. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +3 -0
  46. data/app/pb_kits/playbook/pb_gauge/_gauge.scss +4 -0
  47. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +213 -0
  48. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb +1 -1
  49. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +8 -8
  50. data/app/pb_kits/playbook/pb_gauge/gauge.html.erb +1 -11
  51. data/app/pb_kits/playbook/pb_gauge/gauge.rb +3 -8
  52. data/app/pb_kits/playbook/pb_icon/_icon.tsx +3 -1
  53. data/app/pb_kits/playbook/pb_icon/icon.rb +8 -1
  54. data/app/pb_kits/playbook/pb_icon/icon.test.js +155 -0
  55. data/app/pb_kits/playbook/pb_legend/{_legend.jsx → _legend.tsx} +6 -6
  56. data/app/pb_kits/playbook/pb_legend/legend.test.js +29 -0
  57. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +148 -0
  58. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.html.erb +62 -0
  59. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx +83 -0
  60. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md +17 -0
  61. data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +2 -0
  62. data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
  63. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +17 -1
  64. data/app/pb_kits/playbook/pb_radio/_radio.scss +1 -1
  65. data/app/pb_kits/playbook/pb_title/_title.scss +5 -0
  66. data/app/pb_kits/playbook/pb_title/_title.tsx +4 -1
  67. data/app/pb_kits/playbook/pb_title/docs/{_title_light.html.erb → _title_default.html.erb} +3 -3
  68. data/app/pb_kits/playbook/pb_title/docs/{_title_light.jsx → _title_default.jsx} +14 -14
  69. data/app/pb_kits/playbook/pb_title/docs/{_title_light.md → _title_default.md} +0 -0
  70. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb +1 -0
  71. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx +19 -0
  72. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md +4 -0
  73. data/app/pb_kits/playbook/pb_title/docs/example.yml +4 -2
  74. data/app/pb_kits/playbook/pb_title/docs/index.js +2 -1
  75. data/app/pb_kits/playbook/pb_title/title.rb +6 -1
  76. data/app/pb_kits/playbook/pb_title/title.test.js +13 -0
  77. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +111 -0
  78. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx +1 -1
  79. data/app/pb_kits/playbook/playbook-rails-react-bindings.js +4 -0
  80. data/app/pb_kits/playbook/playbook-rails.js +4 -4
  81. data/app/pb_kits/playbook/tokens/_titles.scss +10 -1
  82. data/app/pb_kits/playbook/tokens/_typography.scss +2 -2
  83. data/lib/playbook/version.rb +2 -2
  84. metadata +42 -17
  85. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +0 -91
  86. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +0 -136
  87. data/app/pb_kits/playbook/pb_dialog/_dialog.html.erb +0 -10
  88. data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +0 -112
  89. data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +0 -93
  90. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx +0 -79
  91. data/app/pb_kits/playbook/plugins/pb_chart.js +0 -309
data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx ADDED
@@ -0,0 +1,111 @@
1
+ import React, { useState, useEffect } from "react";
2
+ import classnames from "classnames";
3
+
4
+ import { globalProps } from "../utilities/globalProps";
5
+ import { buildAriaProps, buildDataProps } from "../utilities/props";
6
+
7
+ import HighchartsReact from "highcharts-react-official";
8
+ import Highcharts from "highcharts";
9
+ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
10
+ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
11
+ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
12
+ import treemap from 'highcharts/modules/treemap'
13
+
14
+ type TreemapChartProps = {
15
+ chartData: {
16
+ name: string;
17
+ parent?: string | number;
18
+ value: number;
19
+ color?: string;
20
+ id?: string | number;
21
+ }[];
22
+ className?: string;
23
+ colors: string[];
24
+ dark?: boolean;
25
+ drillable: boolean;
26
+ grouped: boolean;
27
+ height?: string;
28
+ id: number | string;
29
+ title?: string;
30
+ tooltipHtml: string;
31
+ type?: string;
32
+ aria?: { [key: string]: string };
33
+ data?: { [key: string]: string };
34
+ };
35
+
36
+ const TreemapChart = ({
37
+ aria = {},
38
+ data = {},
39
+ chartData,
40
+ colors,
41
+ dark = false,
42
+ drillable = false,
43
+ grouped = false,
44
+ height,
45
+ id,
46
+ title = "",
47
+ tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
48
+ type = "treemap",
49
+ ...props
50
+ }: TreemapChartProps) => {
51
+ const ariaProps = buildAriaProps(aria);
52
+ const dataProps = buildDataProps(data);
53
+ const setupTheme = () => {
54
+ dark
55
+ ? Highcharts.setOptions(highchartsDarkTheme)
56
+ : Highcharts.setOptions(highchartsTheme);
57
+ };
58
+ treemap(Highcharts)
59
+ setupTheme();
60
+
61
+ const staticOptions = {
62
+ title: {
63
+ text: title,
64
+ },
65
+ chart: {
66
+ height: height,
67
+ type: type,
68
+ },
69
+ credits: false,
70
+ series: [
71
+ {
72
+ data: chartData,
73
+ },
74
+ ],
75
+ plotOptions: {
76
+ treemap: {
77
+ tooltip: {
78
+ pointFormat: tooltipHtml,
79
+ },
80
+ allowTraversingTree: drillable,
81
+ colorByPoint: !grouped,
82
+ colors:
83
+ colors !== undefined && colors.length > 0
84
+ ? mapColors(colors)
85
+ : highchartsTheme.colors,
86
+ },
87
+ },
88
+ };
89
+
90
+ const [options, setOptions] = useState({});
91
+
92
+ useEffect(() => {
93
+
94
+ setOptions({ ...staticOptions });
95
+ }, [chartData]);
96
+
97
+ return (
98
+ <HighchartsReact
99
+ containerProps={{
100
+ className: classnames(globalProps(props), "pb_treemap_chart"),
101
+ id: id,
102
+ ...ariaProps,
103
+ ...dataProps,
104
+ }}
105
+ highcharts={Highcharts}
106
+ options={options}
107
+ />
108
+ );
109
+ };
110
+
111
+ export default TreemapChart;
data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx CHANGED
@@ -39,7 +39,7 @@ const TreemapChartTooltip = (props) => (
39
39
  chartData={chartData}
40
40
  id="treemap-tooltip"
41
41
  title="Favored Pizza Toppings"
42
- tooltipHtml={"<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>"}
42
+ tooltipHtml= '<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>'
43
43
  {...props}
44
44
  />
45
45
  </div>
data/app/pb_kits/playbook/playbook-rails-react-bindings.js CHANGED
@@ -4,11 +4,13 @@ import WebpackerReact from 'webpacker-react'
4
4
  import ujs from 'webpacker-react/ujs'
5
5
 
6
6
  import BarGraph from './pb_bar_graph/_bar_graph'
7
+ import CircleChart from './pb_circle_chart/_circle_chart'
7
8
  import Dialog from './pb_dialog/_dialog'
8
9
  import DialogBody from './pb_dialog/child_kits/_dialog_body'
9
10
  import DialogFooter from './pb_dialog/child_kits/_dialog_footer'
10
11
  import DialogHeader from './pb_dialog/child_kits/_dialog_header'
11
12
  import DistributionBar from './pb_distribution_bar/_distribution_bar'
13
+ import Gauge from './pb_gauge/_gauge'
12
14
  import Legend from './pb_legend/_legend'
13
15
  import LineGraph from './pb_line_graph/_line_graph'
14
16
  import Passphrase from './pb_passphrase/_passphrase'
@@ -18,6 +20,7 @@ import Typeahead from './pb_typeahead/_typeahead'
18
20
 
19
21
  WebpackerReact.registerComponents({
20
22
  BarGraph,
23
+ CircleChart,
21
24
  Dialog,
22
25
  DialogBody,
23
26
  DialogFooter,
@@ -29,6 +32,7 @@ WebpackerReact.registerComponents({
29
32
  RichTextEditor,
30
33
  TreemapChart,
31
34
  Typeahead,
35
+ Gauge,
32
36
  })
33
37
 
34
38
  ujs.setup(
data/app/pb_kits/playbook/playbook-rails.js CHANGED
@@ -1,7 +1,3 @@
1
- // Charts
2
- import pbChart from './plugins/pb_chart'
3
- window.pbChart = pbChart
4
-
5
1
  // Forms
6
2
  import './pb_form/pb_form_validation'
7
3
 
@@ -9,6 +5,10 @@ import './pb_form/pb_form_validation'
9
5
  import datePickerHelper from './pb_date_picker/date_picker_helper'
10
6
  window.datePickerHelper = datePickerHelper
11
7
 
8
+ // Dialog
9
+ import dialogHelper from './pb_dialog/dialogHelper'
10
+ window.dialogHelper = dialogHelper
11
+
12
12
  // Lazy image loading
13
13
  import 'lazysizes'
14
14
 
data/app/pb_kits/playbook/tokens/_titles.scss CHANGED
@@ -18,7 +18,6 @@
18
18
 
19
19
  @mixin pb_title_1 {
20
20
  @include pb_title($heading_1);
21
- letter-spacing: -0.03em;
22
21
  }
23
22
 
24
23
  @mixin pb_title_2 {
@@ -31,8 +30,18 @@
31
30
 
32
31
  @mixin pb_title_4 {
33
32
  @include pb_title($heading_4, $bolder);
33
+ letter-spacing: -0.03em;
34
34
  }
35
35
 
36
36
  @mixin pb_title_dark {
37
37
  color: $text_dk_default;
38
38
  }
39
+
40
+ @mixin pb_title_bold {
41
+ font-weight: $bolder;
42
+ }
43
+
44
+ @mixin pb_title_thin {
45
+ font-weight: $lighter;
46
+ letter-spacing: $lspace_tight;
47
+ }
data/app/pb_kits/playbook/tokens/_typography.scss CHANGED
@@ -30,7 +30,7 @@ $text_smallest: $font_smallest;
30
30
 
31
31
 
32
32
  /* Headings */
33
- $heading_1: 48px;
33
+ $heading_1: 46px;
34
34
  $heading_2: 34px;
35
35
  $heading_3: $font_larger;
36
36
  $heading_4: $font_base;
@@ -41,7 +41,7 @@ $heading_4: $font_base;
41
41
  // Letter Spacing
42
42
  $lspace_tightest: -.1em;
43
43
  $lspace_tighter: -.07em;
44
- $lspace_tight: -.03em;
44
+ $lspace_tight: -.01em;
45
45
  $lspace_normal: 0;
46
46
  $lspace_loose: .03em;
47
47
  $lspace_looser: .07em;
data/lib/playbook/version.rb CHANGED
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "11.10.0"
5
- VERSION = "11.11.0"
4
+ PREVIOUS_VERSION = "11.12.1"
5
+ VERSION = "11.12.1.pre.alpha.charts1"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 11.11.0
4
+ version: 11.12.1.pre.alpha.charts1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2022-10-28 00:00:00.000000000 Z
12
+ date: 2022-11-30 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -361,8 +361,8 @@ files:
361
361
  - app/pb_kits/playbook/pb_badge/docs/_description.md
362
362
  - app/pb_kits/playbook/pb_badge/docs/example.yml
363
363
  - app/pb_kits/playbook/pb_badge/docs/index.js
364
- - app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx
365
364
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss
365
+ - app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
366
366
  - app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
367
367
  - app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
368
368
  - app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
@@ -377,6 +377,9 @@ files:
377
377
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx
378
378
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.html.erb
379
379
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx
380
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.html.erb
381
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx
382
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
380
383
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.html.erb
381
384
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx
382
385
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.md
@@ -537,8 +540,9 @@ files:
537
540
  - app/pb_kits/playbook/pb_checkbox/docs/_description.md
538
541
  - app/pb_kits/playbook/pb_checkbox/docs/example.yml
539
542
  - app/pb_kits/playbook/pb_checkbox/docs/index.js
540
- - app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx
543
+ - app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts
541
544
  - app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss
545
+ - app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx
542
546
  - app/pb_kits/playbook/pb_circle_chart/circle_chart.html.erb
543
547
  - app/pb_kits/playbook/pb_circle_chart/circle_chart.rb
544
548
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb
@@ -550,6 +554,9 @@ files:
550
554
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx
551
555
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.html.erb
552
556
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx
557
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb
558
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx
559
+ - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md
553
560
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx
554
561
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb
555
562
  - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx
@@ -632,8 +639,10 @@ files:
632
639
  - app/pb_kits/playbook/pb_currency/docs/example.yml
633
640
  - app/pb_kits/playbook/pb_currency/docs/index.js
634
641
  - app/pb_kits/playbook/pb_dashboard/commonSettings.js
635
- - app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js
636
- - app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js
642
+ - app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts
643
+ - app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts
644
+ - app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts
645
+ - app/pb_kits/playbook/pb_dashboard/themeTypes.ts
637
646
  - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx
638
647
  - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss
639
648
  - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value_mixins.scss
@@ -808,19 +817,28 @@ files:
808
817
  - app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml
809
818
  - app/pb_kits/playbook/pb_date_year_stacked/docs/index.js
810
819
  - app/pb_kits/playbook/pb_dialog/_close_icon.tsx
811
- - app/pb_kits/playbook/pb_dialog/_dialog.html.erb
812
820
  - app/pb_kits/playbook/pb_dialog/_dialog.scss
813
821
  - app/pb_kits/playbook/pb_dialog/_dialog.tsx
814
822
  - app/pb_kits/playbook/pb_dialog/_dialog_context.tsx
815
823
  - app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.tsx
816
824
  - app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx
817
825
  - app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx
826
+ - app/pb_kits/playbook/pb_dialog/dialog.html.erb
818
827
  - app/pb_kits/playbook/pb_dialog/dialog.rb
819
828
  - app/pb_kits/playbook/pb_dialog/dialog.test.jsx
829
+ - app/pb_kits/playbook/pb_dialog/dialogHelper.js
830
+ - app/pb_kits/playbook/pb_dialog/dialog_body.html.erb
831
+ - app/pb_kits/playbook/pb_dialog/dialog_body.rb
832
+ - app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb
833
+ - app/pb_kits/playbook/pb_dialog/dialog_footer.rb
834
+ - app/pb_kits/playbook/pb_dialog/dialog_header.html.erb
820
835
  - app/pb_kits/playbook/pb_dialog/dialog_header.rb
836
+ - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb
821
837
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx
822
838
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md
839
+ - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb
823
840
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
841
+ - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.md
824
842
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx
825
843
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.md
826
844
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx
@@ -831,6 +849,7 @@ files:
831
849
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.md
832
850
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx
833
851
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md
852
+ - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb
834
853
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx
835
854
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx
836
855
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md
@@ -1010,8 +1029,8 @@ files:
1010
1029
  - app/pb_kits/playbook/pb_form_pill/docs/index.js
1011
1030
  - app/pb_kits/playbook/pb_form_pill/form_pill.html.erb
1012
1031
  - app/pb_kits/playbook/pb_form_pill/form_pill.rb
1013
- - app/pb_kits/playbook/pb_gauge/_gauge.jsx
1014
1032
  - app/pb_kits/playbook/pb_gauge/_gauge.scss
1033
+ - app/pb_kits/playbook/pb_gauge/_gauge.tsx
1015
1034
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb
1016
1035
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx
1017
1036
  - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md
@@ -1116,6 +1135,7 @@ files:
1116
1135
  - app/pb_kits/playbook/pb_icon/docs/index.js
1117
1136
  - app/pb_kits/playbook/pb_icon/icon.html.erb
1118
1137
  - app/pb_kits/playbook/pb_icon/icon.rb
1138
+ - app/pb_kits/playbook/pb_icon/icon.test.js
1119
1139
  - app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
1120
1140
  - app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx
1121
1141
  - app/pb_kits/playbook/pb_icon_circle/docs/_description.md
@@ -1244,8 +1264,8 @@ files:
1244
1264
  - app/pb_kits/playbook/pb_layout/layout.test.js
1245
1265
  - app/pb_kits/playbook/pb_layout/sidebar.html.erb
1246
1266
  - app/pb_kits/playbook/pb_layout/sidebar.rb
1247
- - app/pb_kits/playbook/pb_legend/_legend.jsx
1248
1267
  - app/pb_kits/playbook/pb_legend/_legend.scss
1268
+ - app/pb_kits/playbook/pb_legend/_legend.tsx
1249
1269
  - app/pb_kits/playbook/pb_legend/docs/_description.md
1250
1270
  - app/pb_kits/playbook/pb_legend/docs/_footer.md
1251
1271
  - app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb
@@ -1287,8 +1307,8 @@ files:
1287
1307
  - app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.ts
1288
1308
  - app/pb_kits/playbook/pb_lightbox/lightbox.scss
1289
1309
  - app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx
1290
- - app/pb_kits/playbook/pb_line_graph/_line_graph.jsx
1291
1310
  - app/pb_kits/playbook/pb_line_graph/_line_graph.scss
1311
+ - app/pb_kits/playbook/pb_line_graph/_line_graph.tsx
1292
1312
  - app/pb_kits/playbook/pb_line_graph/docs/_description.md
1293
1313
  - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.html.erb
1294
1314
  - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx
@@ -1301,6 +1321,9 @@ files:
1301
1321
  - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx
1302
1322
  - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.html.erb
1303
1323
  - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx
1324
+ - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.html.erb
1325
+ - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx
1326
+ - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md
1304
1327
  - app/pb_kits/playbook/pb_line_graph/docs/example.yml
1305
1328
  - app/pb_kits/playbook/pb_line_graph/docs/index.js
1306
1329
  - app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js
@@ -1995,9 +2018,12 @@ files:
1995
2018
  - app/pb_kits/playbook/pb_title/docs/_title_colors.html.erb
1996
2019
  - app/pb_kits/playbook/pb_title/docs/_title_colors.jsx
1997
2020
  - app/pb_kits/playbook/pb_title/docs/_title_colors.md
1998
- - app/pb_kits/playbook/pb_title/docs/_title_light.html.erb
1999
- - app/pb_kits/playbook/pb_title/docs/_title_light.jsx
2000
- - app/pb_kits/playbook/pb_title/docs/_title_light.md
2021
+ - app/pb_kits/playbook/pb_title/docs/_title_default.html.erb
2022
+ - app/pb_kits/playbook/pb_title/docs/_title_default.jsx
2023
+ - app/pb_kits/playbook/pb_title/docs/_title_default.md
2024
+ - app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb
2025
+ - app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx
2026
+ - app/pb_kits/playbook/pb_title/docs/_title_light_weight.md
2001
2027
  - app/pb_kits/playbook/pb_title/docs/example.yml
2002
2028
  - app/pb_kits/playbook/pb_title/docs/index.js
2003
2029
  - app/pb_kits/playbook/pb_title/title.html.erb
@@ -2066,7 +2092,7 @@ files:
2066
2092
  - app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
2067
2093
  - app/pb_kits/playbook/pb_tooltip/tooltip.rb
2068
2094
  - app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx
2069
- - app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx
2095
+ - app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx
2070
2096
  - app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
2071
2097
  - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
2072
2098
  - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx
@@ -2192,7 +2218,6 @@ files:
2192
2218
  - app/pb_kits/playbook/playbook-doc.js
2193
2219
  - app/pb_kits/playbook/playbook-rails-react-bindings.js
2194
2220
  - app/pb_kits/playbook/playbook-rails.js
2195
- - app/pb_kits/playbook/plugins/pb_chart.js
2196
2221
  - app/pb_kits/playbook/tokens/_animation-curves.scss
2197
2222
  - app/pb_kits/playbook/tokens/_border_radius.scss
2198
2223
  - app/pb_kits/playbook/tokens/_colors.scss
@@ -2328,9 +2353,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
2328
2353
  version: '0'
2329
2354
  required_rubygems_version: !ruby/object:Gem::Requirement
2330
2355
  requirements:
2331
- - - ">="
2356
+ - - ">"
2332
2357
  - !ruby/object:Gem::Version
2333
- version: '0'
2358
+ version: 1.3.1
2334
2359
  requirements: []
2335
2360
  rubygems_version: 3.3.7
2336
2361
  signing_key:
data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx DELETED
@@ -1,91 +0,0 @@
1
- /* @flow */
2
-
3
- import React from 'react'
4
- import classnames from 'classnames'
5
-
6
- import { globalProps } from '../utilities/globalProps'
7
- import pbChart from '../plugins/pb_chart'
8
-
9
- type BarGraphProps = {
10
- axisTitle: string,
11
- dark?: Boolean,
12
- xAxisCategories: array,
13
- yAxisMin: number,
14
- yAxisMax: number,
15
- chartData: array<{
16
- name: string,
17
- data: array<number>,
18
- }>,
19
- className?: string,
20
- id: number,
21
- pointStart: number,
22
- subTitle?: string,
23
- title: string,
24
- type?: string,
25
- legend?: boolean,
26
- toggleLegendClick?: boolean,
27
- height?: string,
28
- colors: array,
29
- }
30
-
31
- export default class BarGraph extends React.Component<BarGraphProps> {
32
- static defaultProps = {
33
- className: 'pb_bar_graph',
34
- dark: false,
35
- type: 'column',
36
- legend: false,
37
- toggleLegendClick: true,
38
- }
39
-
40
- componentDidMount() {
41
- const {
42
- axisTitle,
43
- dark,
44
- xAxisCategories,
45
- yAxisMin,
46
- yAxisMax,
47
- className,
48
- chartData,
49
- id,
50
- pointStart,
51
- subTitle,
52
- title,
53
- type,
54
- legend,
55
- height,
56
- toggleLegendClick,
57
- colors = [],
58
- } = this.props
59
-
60
- new pbChart(`.${className}`, {
61
- axisTitle: axisTitle,
62
- dark,
63
- chartData: chartData,
64
- colors: colors,
65
- id: id,
66
- pointStart: pointStart,
67
- subtitle: subTitle,
68
- type,
69
- title: title,
70
- xAxisCategories: xAxisCategories,
71
- yAxisMin: yAxisMin,
72
- yAxisMax: yAxisMax,
73
- legend: legend,
74
- toggleLegendClick: toggleLegendClick,
75
- height: height,
76
- })
77
- }
78
-
79
- props: BarGraphProps
80
-
81
- render() {
82
- const { className, id } = this.props
83
-
84
- return (
85
- <div
86
- className={classnames(globalProps(this.props), className)}
87
- id={id}
88
- />
89
- )
90
- }
91
- }
data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx DELETED
@@ -1,136 +0,0 @@
1
- /* @flow */
2
-
3
- import React, { useEffect, useRef } from 'react'
4
- import classnames from 'classnames'
5
- import Highcharts from 'highcharts'
6
-
7
- import { globalProps } from '../utilities/globalProps'
8
- import { buildAriaProps, buildDataProps } from '../utilities/props'
9
-
10
- import pbChart from '../plugins/pb_chart'
11
- type CircleChartProps = {
12
- aria: Object,
13
- chartData?: array,
14
- children: Node,
15
- className?: string,
16
- colors: array,
17
- dark?: Boolean,
18
- data?: Object,
19
- dataLabelHtml: string,
20
- dataLabels: boolean,
21
- headerFormat: string,
22
- height?: string,
23
- id?: string,
24
- innerSize: "sm" | "md" | "lg" | "none",
25
- legend: boolean,
26
- maxPointSize: number,
27
- minPointSize: number,
28
- rounded: boolean,
29
- startAngle: number,
30
- style: string,
31
- title: string,
32
- tooltipHtml: string,
33
- useHtml: boolean,
34
- zMin: number,
35
- }
36
-
37
- const CircleChart = (props: CircleChartProps) => {
38
- const {
39
- aria = {},
40
- chartData = [{}],
41
- children,
42
- className,
43
- colors = [],
44
- dark = false,
45
- data = {},
46
- dataLabelHtml = '<div>{point.name}</div>',
47
- dataLabels = false,
48
- headerFormat = null,
49
- height,
50
- id,
51
- innerSize = 'md',
52
- legend = false,
53
- maxPointSize = null,
54
- minPointSize = null,
55
- rounded = false,
56
- startAngle = null,
57
- style = 'pie',
58
- title = '',
59
- tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
60
- '<b>{point.y}</b>',
61
- useHtml = false,
62
- zMin = null,
63
- } = props
64
-
65
- const ariaProps = buildAriaProps(aria)
66
- const dataProps = buildDataProps(data)
67
- const innerSizes = { sm: '35%', md: '50%', lg: '85%', none: '0%' }
68
- const innerSizeFormat = (size) => innerSizes[size]
69
- const roundedBorderWidth = rounded ? 20 : null
70
- const roundedBorderColor = rounded ? null : ''
71
-
72
- // Runs first time component Renders
73
- useEffect(() => {
74
- const formattedChartData = chartData.map((obj) => {
75
- obj.y = obj.value
76
- delete obj.value
77
- return obj
78
- })
79
-
80
- new pbChart('.selector', {
81
- id,
82
- colors,
83
- borderColor: roundedBorderColor,
84
- borderWidth: roundedBorderWidth,
85
- chartData: formattedChartData,
86
- dark,
87
- title,
88
- type: style,
89
- showInLegend: legend,
90
- dataLabelHtml,
91
- dataLabels,
92
- headerFormat,
93
- height: height,
94
- tooltipHtml,
95
- useHTML: useHtml,
96
- minPointSize,
97
- maxPointSize,
98
- innerSize: innerSizeFormat(innerSize),
99
- zMin,
100
- startAngle,
101
- })
102
- }, [])
103
-
104
- const componentDidMount = useRef(false)
105
-
106
- // Doesn't run the first time but runs every subsequent render
107
- useEffect(() => {
108
- if (componentDidMount.current) {
109
- Highcharts.charts.forEach((chart) => {
110
- if (chart && chart.renderTo.id === id) {
111
- const updatedValueArray = chartData.map((obj) => {
112
- return obj.value
113
- })
114
- chart.series[0].setData(updatedValueArray)
115
- }
116
- })
117
- } else {
118
- componentDidMount.current = true
119
- }
120
- }, [chartData])
121
- return (
122
- <div id={`wrapper-circle-chart-${id}`}>
123
- <div
124
- id={id}
125
- {...ariaProps}
126
- {...dataProps}
127
- className={classnames('pb_circle_chart', globalProps(props), className)}
128
- />
129
- <If condition={children}>
130
- <div className="pb-circle-chart-block">{children}</div>
131
- </If>
132
- </div>
133
- )
134
- }
135
-
136
- export default CircleChart
data/app/pb_kits/playbook/pb_dialog/_dialog.html.erb DELETED
@@ -1,10 +0,0 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- dark: object.dark) do %>
7
- <% if object.children %>
8
- <%= pb_rails("dialog/dialog_header", props: { children: object.children }) %>
9
- <% end %>
10
- <% end %>