playbook_ui 11.11.0 → 11.13.0.pre.alpha.fileupload1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (76) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +2 -0
  3. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +21 -1
  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/_circle_chart.jsx +15 -0
  14. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +16 -0
  15. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +86 -0
  16. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +114 -0
  17. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +17 -0
  18. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -0
  19. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +1 -0
  20. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +50 -50
  21. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.jsx +1 -0
  22. data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts +89 -89
  23. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss +15 -0
  24. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +30 -1
  25. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +28 -0
  26. data/app/pb_kits/playbook/pb_dialog/dialog.rb +7 -35
  27. data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +21 -0
  28. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +7 -0
  29. data/app/pb_kits/playbook/pb_dialog/dialog_body.rb +13 -0
  30. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +13 -0
  31. data/app/pb_kits/playbook/pb_dialog/dialog_footer.rb +16 -0
  32. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +13 -0
  33. data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +3 -20
  34. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +12 -0
  35. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md +3 -1
  36. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb +11 -0
  37. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.md +3 -0
  38. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb +29 -0
  39. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +3 -0
  40. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +38 -6
  41. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +71 -0
  42. data/app/pb_kits/playbook/pb_file_upload/docs/example.yml +1 -0
  43. data/app/pb_kits/playbook/pb_file_upload/docs/index.js +1 -0
  44. data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js +3 -3
  45. data/app/pb_kits/playbook/pb_icon/_icon.tsx +3 -1
  46. data/app/pb_kits/playbook/pb_icon/icon.rb +8 -1
  47. data/app/pb_kits/playbook/pb_icon/icon.test.js +155 -0
  48. data/app/pb_kits/playbook/pb_legend/{_legend.jsx → _legend.tsx} +6 -6
  49. data/app/pb_kits/playbook/pb_legend/legend.test.js +29 -0
  50. data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +20 -0
  51. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.html.erb +62 -0
  52. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx +83 -0
  53. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md +17 -0
  54. data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +2 -0
  55. data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
  56. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +17 -1
  57. data/app/pb_kits/playbook/pb_radio/_radio.scss +1 -1
  58. data/app/pb_kits/playbook/pb_title/_title.scss +5 -0
  59. data/app/pb_kits/playbook/pb_title/_title.tsx +4 -1
  60. data/app/pb_kits/playbook/pb_title/docs/{_title_light.html.erb → _title_default.html.erb} +3 -3
  61. data/app/pb_kits/playbook/pb_title/docs/{_title_light.jsx → _title_default.jsx} +14 -14
  62. data/app/pb_kits/playbook/pb_title/docs/{_title_light.md → _title_default.md} +0 -0
  63. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb +1 -0
  64. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx +19 -0
  65. data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md +4 -0
  66. data/app/pb_kits/playbook/pb_title/docs/example.yml +4 -2
  67. data/app/pb_kits/playbook/pb_title/docs/index.js +2 -1
  68. data/app/pb_kits/playbook/pb_title/title.rb +6 -1
  69. data/app/pb_kits/playbook/pb_title/title.test.js +13 -0
  70. data/app/pb_kits/playbook/playbook-rails.js +4 -0
  71. data/app/pb_kits/playbook/plugins/pb_chart.js +13 -0
  72. data/app/pb_kits/playbook/tokens/_titles.scss +10 -1
  73. data/app/pb_kits/playbook/tokens/_typography.scss +2 -2
  74. data/lib/playbook/version.rb +2 -2
  75. metadata +33 -9
  76. data/app/pb_kits/playbook/pb_dialog/_dialog.html.erb +0 -10
@@ -0,0 +1,114 @@
1
+ import React from 'react'
2
+
3
+ import CircleChart from '../_circle_chart'
4
+
5
+ import {Title} from '../..'
6
+
7
+ const data = [
8
+ {
9
+ name: 'Waiting for Calls',
10
+ value: 41,
11
+ },
12
+ {
13
+ name: 'On Call',
14
+ value: 49,
15
+ },
16
+ {
17
+ name: 'After call',
18
+ value: 10,
19
+ },
20
+ ]
21
+
22
+ const dataFirst = [{
23
+ name: 'Bugs',
24
+ value: 8,
25
+
26
+ },
27
+ {
28
+ name: 'Chores',
29
+ value: 1,
30
+
31
+ },
32
+ {
33
+ name: 'Stories',
34
+ value: 12,
35
+ },
36
+ ]
37
+
38
+ const dataSecond = [
39
+ {
40
+ name: 'Queued',
41
+ value: 7,
42
+ },
43
+ {
44
+ name: 'In Progress',
45
+ value: 6,
46
+ },
47
+ {
48
+ name: 'Validation',
49
+ value: 3,
50
+ },
51
+ {
52
+ name: 'Done',
53
+ value: 6,
54
+ },
55
+ ]
56
+
57
+
58
+ const CircleChartLegendPosition = (props) => (
59
+ <div>
60
+ <Title
61
+ paddingBottom="sm"
62
+ paddingTop="sm"
63
+ size={4}
64
+ tag="h4"
65
+ text="align | verticalAlign"
66
+ />
67
+ <CircleChart
68
+ align='right'
69
+ chartData={data}
70
+ id="legend-position-circle"
71
+ legend
72
+ paddingBottom="sm"
73
+ title="Alignment of Legend"
74
+ verticalAlign="top"
75
+ {...props}
76
+ />
77
+ <Title
78
+ paddingBottom="sm"
79
+ paddingTop="sm"
80
+ size={4}
81
+ tag="h4"
82
+ text="layout"
83
+ />
84
+ <CircleChart
85
+ chartData={dataFirst}
86
+ id="legend-position-circle-1"
87
+ layout="vertical"
88
+ legend
89
+ paddingBottom="sm"
90
+ paddingTop="sm"
91
+ title="Layout of Legend"
92
+ {...props}
93
+ />
94
+ <Title
95
+ paddingBottom="sm"
96
+ paddingTop="sm"
97
+ size={4}
98
+ tag="h4"
99
+ text="x | y"
100
+ />
101
+ <CircleChart
102
+ chartData={dataSecond}
103
+ id="legend-position-circle-2"
104
+ layout="vertical"
105
+ legend
106
+ title="Offset of Legend"
107
+ x={100}
108
+ y={10}
109
+ {...props}
110
+ />
111
+ </div>
112
+ )
113
+
114
+ export default CircleChartLegendPosition
@@ -0,0 +1,17 @@
1
+ ##### Prop
2
+
3
+ `align` **Type**: String | **Values**: left | center | right (defaults to center)
4
+ `verticalAlign` **Type**: String | **Values**: top | middle | bottom (defaults middle)
5
+ `layout` **Type**: String | **Values**: horizontal | vertical | proximate (defaults to horizontal)
6
+ `x` **Type**: Number (defaults to 0)
7
+ `y` **Type**: Number (defaults to 0)
8
+
9
+ -
10
+
11
+ - `layout` determines the position of the legend items
12
+ `layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
13
+
14
+ - `x` offsets the legend relative to its horizontal alignmnet. Negative x moves it to the left, positive x moves it to the right
15
+
16
+
17
+ - `y` offsets the legend relative to its vertical alignmnet. Negative y moves it up, positive y moves it down.
@@ -7,6 +7,7 @@ examples:
7
7
  - circle_chart_colors: Color Overrides
8
8
  - circle_chart_with_labels: Data Labels
9
9
  - circle_chart_with_legend_kit: Legend
10
+ - circle_chart_legend_position: Legend Position
10
11
  - circle_chart_with_title: Title
11
12
  - circle_chart_inner_sizes: Inner Circle Size Options
12
13
 
@@ -18,6 +19,7 @@ examples:
18
19
  - circle_chart_colors: Color Overrides
19
20
  - circle_chart_with_labels: Data Labels
20
21
  - circle_chart_with_legend_kit: Legend
22
+ - circle_chart_legend_position: Legend Position
21
23
  - circle_chart_with_title: Title
22
24
  - circle_chart_inner_sizes: Inner Circle Size Options
23
25
 
@@ -5,5 +5,6 @@ export { default as CircleChartBlock } from './_circle_chart_block.jsx'
5
5
  export { default as CircleChartColors } from './_circle_chart_colors.jsx'
6
6
  export { default as CircleChartWithLabels } from './_circle_chart_with_labels.jsx'
7
7
  export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend_kit.jsx'
8
+ export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
8
9
  export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
9
10
  export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
@@ -108,54 +108,54 @@ describe('DatePicker Kit', () => {
108
108
  })
109
109
  })
110
110
 
111
- test('shows DatePicker meridiem toggle', async () => {
112
- const testId = 'datepicker-meridiem'
113
- render(
114
- <DatePicker
115
- data={{ testid: testId }}
116
- defaultDate={DEFAULT_DATE}
117
- enableTime
118
- pickerId="date-picker-meridiem"
119
- />
120
- )
121
-
122
- const kit = screen.getByTestId(testId)
123
- const input = within(kit).getByPlaceholderText('Select Date')
124
-
125
- fireEvent(
126
- input,
127
- new MouseEvent('click', {
128
- bubbles: true,
129
- cancelable: true,
130
- }),
131
- )
132
- const meridiemToggleAM = within(kit).getByLabelText('AM')
133
- const meridiemTogglePM = within(kit).getByLabelText('PM')
134
- await waitFor(() => {
135
- expect(meridiemToggleAM).toBeInTheDocument()
136
- expect(meridiemTogglePM).toBeInTheDocument()
137
- })
138
-
139
- fireEvent(
140
- meridiemToggleAM,
141
- new MouseEvent('click', {
142
- bubbles: true,
143
- cancelable: true,
144
- }),
145
- )
146
- await waitFor(() => {
147
- expect(input).toHaveValue('01/01/2020 at 12:00 AM')
148
- })
149
-
150
- fireEvent(
151
- meridiemTogglePM,
152
- new MouseEvent('click', {
153
- bubbles: true,
154
- cancelable: true,
155
- }),
156
- )
157
- await waitFor(() => {
158
- expect(input).toHaveValue('01/01/2020 at 12:00 PM')
159
- })
160
- })
111
+ // test('shows DatePicker meridiem toggle', async () => {
112
+ // const testId = 'datepicker-meridiem'
113
+ // render(
114
+ // <DatePicker
115
+ // data={{ testid: testId }}
116
+ // defaultDate={DEFAULT_DATE}
117
+ // enableTime
118
+ // pickerId="date-picker-meridiem"
119
+ // />
120
+ // )
121
+
122
+ // const kit = screen.getByTestId(testId)
123
+ // const input = within(kit).getByPlaceholderText('Select Date')
124
+
125
+ // fireEvent(
126
+ // input,
127
+ // new MouseEvent('click', {
128
+ // bubbles: true,
129
+ // cancelable: true,
130
+ // }),
131
+ // )
132
+ // const meridiemToggleAM = within(kit).getByLabelText('AM')
133
+ // const meridiemTogglePM = within(kit).getByLabelText('PM')
134
+ // await waitFor(() => {
135
+ // expect(meridiemToggleAM).toBeInTheDocument()
136
+ // expect(meridiemTogglePM).toBeInTheDocument()
137
+ // })
138
+
139
+ // fireEvent(
140
+ // meridiemToggleAM,
141
+ // new MouseEvent('click', {
142
+ // bubbles: true,
143
+ // cancelable: true,
144
+ // }),
145
+ // )
146
+ // await waitFor(() => {
147
+ // expect(input).toHaveValue('01/01/2020 at 12:00 AM')
148
+ // })
149
+
150
+ // fireEvent(
151
+ // meridiemTogglePM,
152
+ // new MouseEvent('click', {
153
+ // bubbles: true,
154
+ // cancelable: true,
155
+ // }),
156
+ // )
157
+ // await waitFor(() => {
158
+ // expect(input).toHaveValue('01/01/2020 at 12:00 PM')
159
+ // })
160
+ // })
161
161
  })
@@ -15,6 +15,7 @@ const DatePickerTime = (props) => (
15
15
  showTimezone
16
16
  {...props}
17
17
  />
18
+
18
19
  </div>
19
20
  )
20
21
 
@@ -41,96 +41,96 @@ export const getTimezoneText = (inputDate: {
41
41
 
42
42
  function timeSelectPlugin(props: { caption: string; showTimezone: boolean }) {
43
43
  return function (fp: FpTypes) {
44
- const generateMeridiemCard = (text: string) => {
45
- const selectableCard = document.createElement("div");
46
- selectableCard.className = "pb_selectable_card_kit_enabled";
47
-
48
- const cardInput = document.createElement("input"),
49
- cardInputId = `datePicker${text}`;
50
-
51
- cardInput.id = cardInputId;
52
- cardInput.name = "datepicker-ampm";
53
- cardInput.type = "radio";
54
- cardInput.value = text;
55
-
56
- const cardLabel = document.createElement("label"),
57
- cardLabelBuffer = document.createElement("div");
58
- cardLabel.className = `label-${text.toLowerCase()}`;
59
- cardLabel.setAttribute("for", cardInputId);
60
- cardLabelBuffer.className = "buffer";
61
- cardLabelBuffer.innerHTML = text;
62
-
63
- cardLabel.append(cardLabelBuffer);
64
- selectableCard.prepend(cardInput);
65
- selectableCard.append(cardLabel);
66
-
67
- return selectableCard;
68
- };
69
-
70
- const generateMeridiemToggle = () => {
71
- fp.amPM.style.display = "none";
72
- const formGroupKit = document.createElement("div");
73
- formGroupKit.className = "pb_form_group_kit";
74
-
75
- const amCard = generateMeridiemCard("AM");
76
- amCard.addEventListener("click", () => {
77
- fp.selectedDates[0].setHours(
78
- (fp.selectedDates[0].getHours() % 12) + 12 * 0
79
- );
80
- fp.setDate(fp.selectedDates[0], true);
81
- });
82
-
83
- const pmCard = generateMeridiemCard("PM");
84
- pmCard.addEventListener("click", () => {
85
- fp.selectedDates[0].setHours(
86
- (fp.selectedDates[0].getHours() % 12) + 12 * 1
87
- );
88
- fp.setDate(fp.selectedDates[0], true);
89
- });
90
-
91
- formGroupKit.prepend(amCard);
92
- formGroupKit.append(pmCard);
93
-
94
- const meridiemContainer = document.createElement("div");
95
- meridiemContainer.className = "meridiem";
96
- meridiemContainer.append(formGroupKit);
97
- document.querySelector(".pb_time_selection").append(meridiemContainer);
98
- };
99
-
100
- const getMeridiem = (dateObj: string | any[]) => {
101
- return dateObj[0].getHours() < 12 ? "AM" : "PM";
102
- };
103
-
104
- const updateMeridiemToggle = (forceClick: boolean) => {
105
- if (!fp.selectedDates.length) return;
106
-
107
- const uncheckedClass = "pb_selectable_card_kit_enabled",
108
- checkedClass = "pb_selectable_card_kit_checked_enabled",
109
- pickerAM: HTMLElement & { [x: string]: any } =
110
- document.getElementById("datePickerAM"),
111
- pickerPM: HTMLElement & { [x: string]: any } =
112
- document.getElementById("datePickerPM"),
113
- meridiem = getMeridiem(fp.selectedDates);
114
-
115
- if (forceClick) {
116
- pickerAM.checked = false;
117
- pickerPM.checked = false;
118
- pickerPM.checked = meridiem === "PM";
119
- pickerAM.checked = meridiem === "AM";
120
- }
121
-
122
- if (meridiem === "PM") {
123
- pickerPM.parentElement.className = checkedClass;
124
- pickerAM.parentElement.className = uncheckedClass;
125
- } else if (meridiem === "AM") {
126
- pickerAM.parentElement.className = checkedClass;
127
- pickerPM.parentElement.className = uncheckedClass;
128
- }
129
- };
44
+ // const generateMeridiemCard = (text: string) => {
45
+ // const selectableCard = document.createElement("div");
46
+ // selectableCard.className = "pb_selectable_card_kit_enabled";
47
+
48
+ // const cardInput = document.createElement("input"),
49
+ // cardInputId = `datePicker${text}`;
50
+
51
+ // cardInput.id = cardInputId;
52
+ // cardInput.name = "datepicker-ampm";
53
+ // cardInput.type = "radio";
54
+ // cardInput.value = text;
55
+
56
+ // const cardLabel = document.createElement("label"),
57
+ // cardLabelBuffer = document.createElement("div");
58
+ // cardLabel.className = `label-${text.toLowerCase()}`;
59
+ // cardLabel.setAttribute("for", cardInputId);
60
+ // cardLabelBuffer.className = "buffer";
61
+ // cardLabelBuffer.innerHTML = text;
62
+
63
+ // cardLabel.append(cardLabelBuffer);
64
+ // selectableCard.prepend(cardInput);
65
+ // selectableCard.append(cardLabel);
66
+
67
+ // return selectableCard;
68
+ // };
69
+
70
+ // const generateMeridiemToggle = () => {
71
+ // fp.amPM.style.display = "none";
72
+ // const formGroupKit = document.createElement("div");
73
+ // formGroupKit.className = "pb_form_group_kit";
74
+
75
+ // const amCard = generateMeridiemCard("AM");
76
+ // amCard.addEventListener("click", () => {
77
+ // fp.selectedDates[0].setHours(
78
+ // (fp.selectedDates[0].getHours() % 12) + 12 * 0
79
+ // );
80
+ // fp.setDate(fp.selectedDates[0], true);
81
+ // });
82
+
83
+ // const pmCard = generateMeridiemCard("PM");
84
+ // pmCard.addEventListener("click", () => {
85
+ // fp.selectedDates[0].setHours(
86
+ // (fp.selectedDates[0].getHours() % 12) + 12 * 1
87
+ // );
88
+ // fp.setDate(fp.selectedDates[0], true);
89
+ // });
90
+
91
+ // formGroupKit.prepend(amCard);
92
+ // formGroupKit.append(pmCard);
93
+
94
+ // const meridiemContainer = document.createElement("div");
95
+ // meridiemContainer.className = "meridiem";
96
+ // meridiemContainer.append(formGroupKit);
97
+ // document.querySelector(".pb_time_selection").append(meridiemContainer);
98
+ // };
99
+
100
+ // const getMeridiem = (dateObj: string | any[]) => {
101
+ // return dateObj[0].getHours() < 12 ? "AM" : "PM";
102
+ // };
103
+
104
+ // const updateMeridiemToggle = (forceClick: boolean) => {
105
+ // if (!fp.selectedDates.length) return;
106
+
107
+ // const uncheckedClass = "pb_selectable_card_kit_enabled",
108
+ // checkedClass = "pb_selectable_card_kit_checked_enabled",
109
+ // pickerAM: HTMLElement & { [x: string]: any } =
110
+ // document.getElementById("datePickerAM"),
111
+ // pickerPM: HTMLElement & { [x: string]: any } =
112
+ // document.getElementById("datePickerPM"),
113
+ // meridiem = getMeridiem(fp.selectedDates);
114
+
115
+ // if (forceClick) {
116
+ // pickerAM.checked = false;
117
+ // pickerPM.checked = false;
118
+ // pickerPM.checked = meridiem === "PM";
119
+ // pickerAM.checked = meridiem === "AM";
120
+ // }
121
+
122
+ // if (meridiem === "PM") {
123
+ // pickerPM.parentElement.className = checkedClass;
124
+ // pickerAM.parentElement.className = uncheckedClass;
125
+ // } else if (meridiem === "AM") {
126
+ // pickerAM.parentElement.className = checkedClass;
127
+ // pickerPM.parentElement.className = uncheckedClass;
128
+ // }
129
+ // };
130
130
 
131
131
  return {
132
132
  onValueUpdate() {
133
- updateMeridiemToggle(true);
133
+ // updateMeridiemToggle(true);
134
134
  },
135
135
  onReady() {
136
136
  const id = fp.input.id;
@@ -151,8 +151,8 @@ function timeSelectPlugin(props: { caption: string; showTimezone: boolean }) {
151
151
  }
152
152
 
153
153
  // add meridiem toggle
154
- generateMeridiemToggle();
155
- updateMeridiemToggle(true);
154
+ // generateMeridiemToggle();
155
+ // updateMeridiemToggle(true);
156
156
 
157
157
  // add timezone text
158
158
  if (props.showTimezone) {
@@ -7,6 +7,21 @@
7
7
  color: inherit;
8
8
  text-align: left;
9
9
  margin-left: $space_sm;
10
+
11
+ span.flatpickr-am-pm {
12
+ margin-left: $space_sm;
13
+ border-radius: 5px;
14
+ color: $primary;
15
+ &:hover{
16
+ background-color: rgba($primary, 0.03);
17
+ }
18
+ &:focus{
19
+ background-color: unset;
20
+ &:hover{
21
+ background-color: rgba($primary, 0.03);
22
+ }
23
+ }
24
+ }
10
25
  .numInputWrapper {
11
26
  width: auto;
12
27
  input.numInput {
@@ -68,7 +68,7 @@
68
68
  $opacity_visible: 1;
69
69
  $opacity_hidden: 0;
70
70
 
71
- @include pb_card;
71
+ // @include pb_card;
72
72
  background-color: $white;
73
73
  box-shadow: $shadow_deepest;
74
74
  border: 0;
@@ -167,4 +167,33 @@
167
167
  }
168
168
  }
169
169
  }
170
+
171
+ .dialog-button-class {
172
+ background-color: unset;
173
+ border: none;
174
+ cursor: pointer;
175
+ }
176
+
177
+ }
178
+
179
+ .pb_dialog_wrapper_rails {
180
+ .pb_dialog_rails {
181
+ top: 0 !important;
182
+ padding: unset !important;
183
+ margin: auto;
184
+
185
+ }
186
+ dialog::backdrop {
187
+ position: fixed;
188
+ top: 0;
189
+ left: 0;
190
+ right: 0;
191
+ bottom: 0;
192
+ display: flex;
193
+ align-items: center;
194
+ justify-content: center;
195
+ background-color: rgba($bg_dark, $opacity_4);
196
+ animation-name: overlayFade;
197
+ animation-duration: 0.2s;
198
+ }
170
199
  }
@@ -0,0 +1,28 @@
1
+ <div class="pb_dialog_wrapper_rails">
2
+ <%= content_tag(:dialog,
3
+ aria: object.aria,
4
+ data: object.data,
5
+ id: object.id,
6
+ class: object.classname) do %>
7
+ <% if object.title %>
8
+ <%= pb_rails("dialog/dialog_header", props: {title: object.title, id: object.id }) %>
9
+ <% end %>
10
+ <% if object.text %>
11
+ <%= pb_rails("dialog/dialog_body", props: { text: object.text }) %>
12
+ <% end %>
13
+ <% if object.cancel_button && object.confirm_button %>
14
+ <%= pb_rails("dialog/dialog_footer", props: {
15
+ cancel_button: object.cancel_button,
16
+ confirm_button: object.confirm_button,
17
+ id: object.id
18
+ }) %>
19
+ <% end %>
20
+ <%= content %>
21
+ <% end %>
22
+ </div>
23
+
24
+ <%= javascript_tag do %>
25
+ window.addEventListener("DOMContentLoaded", () => {
26
+ dialogHelper()
27
+ })
28
+ <% end %>
@@ -2,45 +2,17 @@
2
2
 
3
3
  module Playbook
4
4
  module PbDialog
5
- class Dialog
6
- include Playbook::Props
7
-
8
- partial "pb_dialog/dialog"
9
-
10
- prop :ref
11
- prop :cancel_button
12
- prop :closeable, type: Playbook::Props::Boolean, default: true
13
- prop :confirm_button
14
- prop :oncancel
15
- prop :onchange
16
- prop :onclose
17
- prop :onconfirm
18
- prop :opened, type: Playbook::Props::Boolean, default: false
5
+ class Dialog < Playbook::KitBase
19
6
  prop :size, type: Playbook::Props::Enum,
20
- values: %w[sm md lg content],
7
+ values: %w[sm md lg xl status_size content],
21
8
  default: "md"
22
- prop :text
23
9
  prop :title
24
- prop :trigger
10
+ prop :text
11
+ prop :confirm_button
12
+ prop :cancel_button
25
13
 
26
- def dialog_options
27
- {
28
- id: id,
29
- ref: ref,
30
- trigger: trigger,
31
- className: classname,
32
- cancelButton: cancel_button,
33
- closeable: closeable,
34
- confirmButton: confirm_button,
35
- onCancel: oncancel,
36
- onChange: onchange,
37
- onClose: onclose,
38
- onConfirm: onconfirm,
39
- opened: opened,
40
- size: size,
41
- text: text,
42
- title: title,
43
- }
14
+ def classname
15
+ generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}")
44
16
  end
45
17
  end
46
18
  end
@@ -0,0 +1,21 @@
1
+ const dialogHelper = () => {
2
+ const openTrigger = document.querySelectorAll("[data-open-dialog]");
3
+ const closeTrigger = document.querySelectorAll("[data-close-dialog]");
4
+
5
+ openTrigger.forEach((open) => {
6
+ open.addEventListener("click", () => {
7
+ var openTriggerData = open.dataset.openDialog;
8
+ if (document.getElementById(openTriggerData).open) return;
9
+ document.getElementById(openTriggerData).showModal();
10
+ });
11
+ });
12
+
13
+ closeTrigger.forEach((close) => {
14
+ close.addEventListener("click", () => {
15
+ var closeTriggerData = close.dataset.closeDialog;
16
+ document.getElementById(closeTriggerData).close();
17
+ });
18
+ });
19
+ };
20
+
21
+ export default dialogHelper;
@@ -0,0 +1,7 @@
1
+ <%= content_tag(:div,
2
+ id: object.id,
3
+ data: object.data,
4
+ class: object.classname,
5
+ aria: object.aria) do %>
6
+ <%= content.presence || object.text %>
7
+ <% end %>
@@ -0,0 +1,13 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbDialog
5
+ class DialogBody < Playbook::KitBase
6
+ prop :text
7
+
8
+ def classname
9
+ generate_classname("dialog_body p_sm")
10
+ end
11
+ end
12
+ end
13
+ end