playbook_ui 15.0.0.pre.alpha.PLAY236510413 → 15.0.0.pre.alpha.play1986inlineloadingsolidvariant10321

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -3
  3. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +0 -2
  4. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +0 -1
  5. data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +0 -1
  6. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +4 -48
  7. data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +1 -5
  8. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +8 -6
  9. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -1
  10. data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +65 -0
  11. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +2 -2
  12. data/app/pb_kits/playbook/pb_icon/_icon.tsx +2 -13
  13. data/app/pb_kits/playbook/pb_icon/icon.rb +1 -9
  14. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +1 -1
  15. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -3
  16. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -3
  17. data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
  18. data/app/pb_kits/playbook/pb_text_input/text_input.rb +3 -2
  19. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +0 -38
  20. data/dist/chunks/{_line_graph-B5Dr0Huy.js → _line_graph-CApw7aQD.js} +1 -1
  21. data/dist/chunks/_typeahead-J1_avqdO.js +6 -0
  22. data/dist/chunks/{_weekday_stacked-DjQv3Sok.js → _weekday_stacked-BvW0QnF8.js} +2 -2
  23. data/dist/chunks/{lib-BTs5acfO.js → lib-CY5ZPzic.js} +1 -1
  24. data/dist/chunks/{pb_form_validation-CKkaQFX3.js → pb_form_validation-D3b0JKHH.js} +1 -1
  25. data/dist/chunks/vendor.js +1 -1
  26. data/dist/menu.yml +0 -6
  27. data/dist/playbook-doc.js +2 -2
  28. data/dist/playbook-rails-react-bindings.js +1 -1
  29. data/dist/playbook-rails.js +1 -1
  30. data/dist/playbook.css +1 -1
  31. data/lib/playbook/version.rb +1 -1
  32. metadata +8 -42
  33. data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss +0 -3
  34. data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx +0 -62
  35. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +0 -31
  36. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +0 -81
  37. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +0 -25
  38. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +0 -40
  39. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +0 -5
  40. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +0 -27
  41. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +0 -39
  42. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +0 -5
  43. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +0 -93
  44. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +0 -131
  45. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +0 -14
  46. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +0 -42
  47. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +0 -58
  48. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +0 -24
  49. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +0 -38
  50. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +0 -22
  51. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +0 -33
  52. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +0 -118
  53. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +0 -144
  54. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +0 -60
  55. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +0 -24
  56. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +0 -42
  57. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +0 -38
  58. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +0 -52
  59. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +0 -29
  60. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +0 -11
  61. data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts +0 -88
  62. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb +0 -1
  63. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb +0 -28
  64. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +0 -51
  65. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.html.erb +0 -41
  66. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx +0 -80
  67. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md +0 -1
  68. data/dist/chunks/_typeahead-GbjDoSSQ.js +0 -6
@@ -1,42 +0,0 @@
1
- <% data = [
2
- {
3
- name: "Facebook",
4
- y: 2498,
5
- },
6
- {
7
- name: "YouTube",
8
- y: 2000,
9
- },
10
- {
11
- name: "WhatsApp",
12
- y: 2000,
13
- },
14
- {
15
- name: "Facebook Messenger",
16
- y: 1300,
17
- },
18
- {
19
- name: "WeChat",
20
- y: 1165,
21
- },
22
- {
23
- name: "Instagram",
24
- y: 1000,
25
- },
26
- {
27
- name: "Tik Tok",
28
- y: 800,
29
- },] %>
30
-
31
- <% chart_options = {
32
- series: [{ data: data }],
33
- plotOptions: {
34
- pie: {
35
- dataLabels: {
36
- enabled: true,
37
- },
38
- },
39
- },
40
- } %>
41
-
42
- <%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
@@ -1,58 +0,0 @@
1
- import React from "react";
2
- import { PbCircleChart } from "playbook-ui";
3
-
4
- const data = [
5
- {
6
- name: "Facebook",
7
- y: 2498,
8
- },
9
- {
10
- name: "YouTube",
11
- y: 2000,
12
- },
13
- {
14
- name: "WhatsApp",
15
- y: 2000,
16
- },
17
- {
18
- name: "Facebook Messenger",
19
- y: 1300,
20
- },
21
- {
22
- name: "WeChat",
23
- y: 1165,
24
- },
25
- {
26
- name: "Instagram",
27
- y: 1000,
28
- },
29
- {
30
- name: "Tik Tok",
31
- y: 800,
32
- },
33
- ];
34
-
35
-
36
- const PbCircleChartDataWithLabels = (props) => {
37
- const chartOptions = {
38
- series: [{ data: data }],
39
- plotOptions: {
40
- pie: {
41
- dataLabels: {
42
- enabled: true,
43
- },
44
- },
45
- },
46
- };
47
-
48
- return (
49
- <div>
50
- <PbCircleChart
51
- options={chartOptions}
52
- {...props}
53
- />
54
- </div>
55
- );
56
- }
57
-
58
- export default PbCircleChartDataWithLabels;
@@ -1,24 +0,0 @@
1
- <% data = [
2
- {
3
- name: 'Bugs',
4
- y: 8,
5
- },
6
- {
7
- name: 'Chores',
8
- y: 1,
9
- },
10
- {
11
- name: 'Stories',
12
- y: 12,
13
- }] %>
14
-
15
- <% chart_options = {
16
- series: [{ data: data }],
17
- plotOptions: {
18
- pie: {
19
- showInLegend: true,
20
- },
21
- },
22
- } %>
23
-
24
- <%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
@@ -1,38 +0,0 @@
1
- import React from "react";
2
- import { PbCircleChart } from "playbook-ui";
3
-
4
- const data = [{
5
- name: 'Bugs',
6
- y: 8,
7
- },
8
- {
9
- name: 'Chores',
10
- y: 1,
11
- },
12
- {
13
- name: 'Stories',
14
- y: 12,
15
- }]
16
-
17
-
18
- const PbCircleChartDataWithLegend = (props) => {
19
- const chartOptions = {
20
- series: [{ data: data }],
21
- plotOptions: {
22
- pie: {
23
- showInLegend: true,
24
- },
25
- },
26
- };
27
-
28
- return (
29
- <div>
30
- <PbCircleChart
31
- options={chartOptions}
32
- {...props}
33
- />
34
- </div>
35
- );
36
- }
37
-
38
- export default PbCircleChartDataWithLegend;
@@ -1,22 +0,0 @@
1
- <% chart_options = {
2
- series: [
3
- {
4
- data: [
5
- {
6
- name: "Waiting for Calls",
7
- y: 41,
8
- },
9
- {
10
- name: "On Call",
11
- y: 49,
12
- },
13
- {
14
- name: "After Call",
15
- y: 10,
16
- },
17
- ],
18
- },
19
- ],
20
- } %>
21
-
22
- <%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
@@ -1,33 +0,0 @@
1
- import React from "react";
2
- import { PbCircleChart } from "playbook-ui";
3
-
4
- const chartOptions = {
5
- series: [
6
- {
7
- data: [
8
- {
9
- name: "Waiting for Calls",
10
- y: 41,
11
- },
12
- {
13
- name: "On Call",
14
- y: 49,
15
- },
16
- {
17
- name: "After Call",
18
- y: 10,
19
- },
20
- ],
21
- },
22
- ],
23
- };
24
- const PbCircleChartDefault = (props) => (
25
- <div>
26
- <PbCircleChart
27
- options={chartOptions}
28
- {...props}
29
- />
30
- </div>
31
- );
32
-
33
- export default PbCircleChartDefault;
@@ -1,118 +0,0 @@
1
- <% data_first = [
2
- {
3
- name: 'Bugs',
4
- y: 8,
5
- },
6
- {
7
- name: 'Chores',
8
- y: 1,
9
- },
10
- {
11
- name: 'Stories',
12
- y: 12,
13
- },
14
- ] %>
15
-
16
- <% data_second = [
17
- {
18
- name: 'Queued',
19
- y: 7,
20
- },
21
- {
22
- name: 'In Progress',
23
- y: 6,
24
- },
25
- {
26
- name: 'Validation',
27
- y: 3,
28
- },
29
- {
30
- name: 'Done',
31
- y: 6,
32
- },
33
- ] %>
34
-
35
- <% data_third = [
36
- {
37
- name: '1 Point Tickets',
38
- y: 2,
39
- },
40
- {
41
- name: '3 Point Tickets',
42
- y: 5,
43
- },
44
- {
45
- name: '5 Point Tickets',
46
- y: 6,
47
- },
48
- {
49
- name: '8 Point Tickets',
50
- y: 3,
51
- },
52
- {
53
- name: '13 Point Tickets',
54
- y: 1,
55
- },
56
- ] %>
57
-
58
- <% data_fourth = [
59
- {
60
- name: 'Facebook',
61
- y: 2498,
62
- },
63
- {
64
- name: 'YouTube',
65
- y: 2000,
66
- },
67
- {
68
- name: 'WhatsApp',
69
- y: 2000,
70
- },
71
- {
72
- name: 'Facebook Messenger',
73
- y: 1300,
74
- },
75
- {
76
- name: 'WeChat',
77
- y: 1165,
78
- },
79
- {
80
- name: 'Instagram',
81
- y: 1000,
82
- },
83
- {
84
- name: 'Tik Tok',
85
- y: 800,
86
- },
87
- ] %>
88
-
89
- <% chart_options_small = {
90
- series: [{
91
- data: data_first,
92
- innerSize: '35%'
93
- }], } %>
94
-
95
- <% chart_options_md = {
96
- series: [{
97
- data: data_second,
98
- innerSize: '50%'
99
- }], } %>
100
-
101
- <% chart_options_lg = {
102
- series: [{
103
- data: data_third,
104
- innerSize: '85%'
105
- }], } %>
106
-
107
- <% chart_options_xl = {
108
- series: [{
109
- data: data_fourth,
110
- innerSize: '0%'
111
- }], } %>
112
-
113
-
114
-
115
- <%= pb_rails("pb_circle_chart", props: { options: chart_options_small }) %>
116
- <%= pb_rails("pb_circle_chart", props: { options: chart_options_md }) %>
117
- <%= pb_rails("pb_circle_chart", props: { options: chart_options_lg }) %>
118
- <%= pb_rails("pb_circle_chart", props: { options: chart_options_xl }) %>
@@ -1,144 +0,0 @@
1
- import React from "react";
2
- import { PbCircleChart } from "playbook-ui";
3
-
4
- const dataFirst = [
5
- {
6
- name: 'Bugs',
7
- y: 8,
8
- },
9
- {
10
- name: 'Chores',
11
- y: 1,
12
- },
13
- {
14
- name: 'Stories',
15
- y: 12,
16
- },
17
- ]
18
-
19
- const dataSecond = [
20
- {
21
- name: 'Queued',
22
- y: 7,
23
- },
24
- {
25
- name: 'In Progress',
26
- y: 6,
27
- },
28
- {
29
- name: 'Validation',
30
- y: 3,
31
- },
32
- {
33
- name: 'Done',
34
- y: 6,
35
- },
36
- ]
37
-
38
- const dataThird = [
39
- {
40
- name: '1 Point Tickets',
41
- y: 2,
42
- },
43
- {
44
- name: '3 Point Tickets',
45
- y: 5,
46
- },
47
- {
48
- name: '5 Point Tickets',
49
- y: 6,
50
- },
51
- {
52
- name: '8 Point Tickets',
53
- y: 3,
54
- },
55
- {
56
- name: '13 Point Tickets',
57
- y: 1,
58
- },
59
- ]
60
-
61
- const dataFourth = [
62
- {
63
- name: 'Facebook',
64
- y: 2498,
65
- },
66
- {
67
- name: 'YouTube',
68
- y: 2000,
69
- },
70
- {
71
- name: 'WhatsApp',
72
- y: 2000,
73
- },
74
- {
75
- name: 'Facebook Messenger',
76
- y: 1300,
77
- },
78
- {
79
- name: 'WeChat',
80
- y: 1165,
81
- },
82
- {
83
- name: 'Instagram',
84
- y: 1000,
85
- },
86
- {
87
- name: 'Tik Tok',
88
- y: 800,
89
- },
90
- ]
91
-
92
- const PbCircleChartInnerSizes= (props) => {
93
- const chartOptionsSmall = {
94
- series: [{
95
- data: dataFirst,
96
- innerSize: '35%'
97
- }],
98
- }
99
-
100
- const chartOptionsMedium = {
101
- series: [{
102
- data: dataSecond,
103
- innerSize: '50%'
104
- }],
105
- }
106
-
107
- const chartOptionsLarge = {
108
- series: [{
109
- data: dataThird,
110
- innerSize: '85%'
111
- }],
112
- }
113
-
114
- const chartOptionsNone = {
115
- series: [{
116
- data: dataFourth,
117
- innerSize: '0%'
118
- }],
119
- }
120
-
121
- return (
122
- <div>
123
- <PbCircleChart
124
- options={chartOptionsSmall}
125
- {...props}
126
- />
127
- <PbCircleChart
128
- options={chartOptionsMedium}
129
- {...props}
130
- />
131
- <PbCircleChart
132
- options={chartOptionsLarge}
133
- {...props}
134
- />
135
- <PbCircleChart
136
- options={chartOptionsNone}
137
- {...props}
138
- />
139
- </div>
140
- );
141
- };
142
-
143
-
144
- export default PbCircleChartInnerSizes;
@@ -1,60 +0,0 @@
1
- import React, { useState } from "react";
2
- import { PbCircleChart, Button } from "playbook-ui";
3
-
4
- const chartData = [
5
- {
6
- name: "Waiting for Calls",
7
- y: 41,
8
- },
9
- {
10
- name: "On Call",
11
- y: 49,
12
- },
13
- {
14
- name: "After Call",
15
- y: 10,
16
- },
17
- ];
18
-
19
- const chartData2 = [
20
- {
21
- name: "Waiting for Calls",
22
- y: 48,
23
- },
24
- {
25
- name: "On Call",
26
- y: 12,
27
- },
28
- {
29
- name: "After Call",
30
- y: 140,
31
- },
32
- ];
33
-
34
-
35
- const PbCircleChartLiveData = (props) => {
36
-
37
- const [data, setData] = useState(chartData);
38
-
39
- const updateValue = () => {
40
- setData(chartData2)
41
- }
42
- const chartOptions = {
43
- series: [{ data: data }],
44
- }
45
-
46
- return (
47
- <div>
48
- <Button
49
- onClick={updateValue}
50
- text="Update Value"
51
- />
52
- <PbCircleChart
53
- options={chartOptions}
54
- {...props}
55
- />
56
- </div>
57
- );
58
- };
59
-
60
- export default PbCircleChartLiveData;
@@ -1,24 +0,0 @@
1
- <% data = [
2
- {
3
- name: "Waiting for Calls",
4
- y: 41,
5
- },
6
- {
7
- name: "On Call",
8
- y: 49,
9
- },
10
- {
11
- name: "After Call",
12
- y: 10,
13
- },
14
- ] %>
15
-
16
- <% chart_options = {
17
- series: [{
18
- data: data,
19
- innerSize: '100%',
20
- borderWidth: '20',
21
- }],
22
- } %>
23
-
24
- <%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
@@ -1,42 +0,0 @@
1
- import React from "react";
2
- import { PbCircleChart } from "playbook-ui";
3
-
4
- const data= [
5
- {
6
- name: "Waiting for Calls",
7
- y: 41,
8
- },
9
- {
10
- name: "On Call",
11
- y: 49,
12
- },
13
- {
14
- name: "After Call",
15
- y: 10,
16
- },
17
- ]
18
-
19
-
20
- const PbCircleChartRounded = (props) => {
21
- const chartOptions = {
22
- series: [{ data: data }],
23
- plotOptions: {
24
- pie: {
25
- borderColor: null,
26
- borderWidth: 20,
27
- innerSize: '100%',
28
- },
29
- },
30
- };
31
-
32
- return (
33
- <div>
34
- <PbCircleChart
35
- options={chartOptions}
36
- {...props}
37
- />
38
- </div>
39
- );
40
- };
41
-
42
- export default PbCircleChartRounded;
@@ -1,38 +0,0 @@
1
- <% data = [
2
- {
3
- name: 'Facebook',
4
- y: 2498,
5
- },
6
- {
7
- name: 'YouTube',
8
- y: 2000,
9
- },
10
- {
11
- name: 'WhatsApp',
12
- y: 2000,
13
- },
14
- {
15
- name: 'Facebook Messenger',
16
- y: 1300,
17
- },
18
- {
19
- name: 'WeChat',
20
- y: 1165,
21
- },
22
- {
23
- name: 'Instagram',
24
- y: 1000,
25
- },
26
- {
27
- name: 'Tik Tok',
28
- y: 800,
29
- },
30
- ] %>
31
-
32
- <% chart_options = {
33
- series: [{ data: data }],
34
- title: { text: "Active Users on Social Media" },
35
- } %>
36
-
37
-
38
- <%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
@@ -1,52 +0,0 @@
1
- import React from "react";
2
- import { PbCircleChart } from "playbook-ui";
3
-
4
- const data= [
5
- {
6
- name: 'Facebook',
7
- y: 2498,
8
- },
9
- {
10
- name: 'YouTube',
11
- y: 2000,
12
- },
13
- {
14
- name: 'WhatsApp',
15
- y: 2000,
16
- },
17
- {
18
- name: 'Facebook Messenger',
19
- y: 1300,
20
- },
21
- {
22
- name: 'WeChat',
23
- y: 1165,
24
- },
25
- {
26
- name: 'Instagram',
27
- y: 1000,
28
- },
29
- {
30
- name: 'Tik Tok',
31
- y: 800,
32
- },
33
- ]
34
-
35
-
36
- const PbCircleChartWithTitle = (props) => {
37
- const chartOptions = {
38
- title: { text: "Active Users on Social Media" },
39
- series: [{ data: data }],
40
- };
41
-
42
- return (
43
- <div>
44
- <PbCircleChart
45
- options={chartOptions}
46
- {...props}
47
- />
48
- </div>
49
- );
50
- };
51
-
52
- export default PbCircleChartWithTitle;