playbook_ui 11.12.1 → 11.13.0.pre.alpha.fontawesome1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js +50 -50
  3. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +3 -0
  4. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.jsx +28 -12
  6. data/app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts +93 -90
  7. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss +1 -15
  8. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +48 -8
  9. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +22 -8
  10. data/app/pb_kits/playbook/pb_dialog/dialog.rb +32 -0
  11. data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +18 -2
  12. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +10 -6
  13. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb +6 -3
  14. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb +4 -4
  15. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.html.erb +58 -0
  16. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.md +1 -2
  18. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb +58 -0
  19. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +1 -1
  20. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.md +2 -2
  21. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb +11 -0
  22. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.html.erb +12 -0
  23. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb +12 -12
  24. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx +1 -1
  25. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb +49 -0
  26. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md +1 -1
  27. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb +96 -0
  28. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md +3 -1
  29. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +7 -0
  30. data/app/pb_kits/playbook/pb_enhanced_element/{element_observer.js → element_observer.ts} +27 -19
  31. data/app/pb_kits/playbook/pb_enhanced_element/{index.js → index.ts} +22 -15
  32. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +38 -6
  33. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +71 -0
  34. data/app/pb_kits/playbook/pb_file_upload/docs/example.yml +1 -0
  35. data/app/pb_kits/playbook/pb_file_upload/docs/index.js +1 -0
  36. data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js +3 -3
  37. data/app/pb_kits/playbook/pb_selectable_list/_item.jsx +15 -4
  38. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx +24 -2
  39. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss +3 -0
  40. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +1 -1
  41. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb +6 -0
  42. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +32 -0
  43. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +7 -2
  44. data/lib/playbook/version.rb +2 -2
  45. metadata +13 -8
  46. data/fonts/fontawesome-min.js +0 -5
  47. data/fonts/regular-min.js +0 -5
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3257a43d2c224d202dcfa36f64ae30921ed80d752b8db6927059ebbe7032d6e6
4
- data.tar.gz: 573bb60fedf4fc904f3832026d46ac23ee22dc965792801565c9006449dbdcc7
3
+ metadata.gz: b29be7e95b59bc1c8ddb320a0975aae76de1ea5a8f219fdfd44f9529a5f5e464
4
+ data.tar.gz: 9f63bcf20ec8c50ac06ed844a2b2effd4b2e3dffcf5d827f8572e2bbe0f9f527
5
5
  SHA512:
6
- metadata.gz: 38e8c49e2e18ae015912af7ac41da7c6a9fc57b7e201f4ca55c9edb2ea93d0114c917963c98f67972aa4cf50dda11cb4ec40f494e4da260403d63fa9e5920e4a
7
- data.tar.gz: 9421ac89e00399825a91ed280324cd1b1a4a43aa8310b88c2143f21724d818c26aeca9af36e82cc9cf55e2e254a059d03d6c356364228631e82a4b8589d0a35e
6
+ metadata.gz: 400ab28faf00240b47e0ca3193ab9c1f40978a7b34b529244642e5c841788b2b3413765ad146c65ee2c3847de5f96a5992cbdf83be3f0551c35ddbbbe741aa63
7
+ data.tar.gz: 7482dc52f58913304cbe36a66ad5e0293fa9946953a7ea0286565d212895f8b00b01225a2232beb4669b779ff92e1ce3c62171739ffecfe1d2137d71610995d0
@@ -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
  })
@@ -9,6 +9,7 @@ const getPositionElement = (element: string | Element) => {
9
9
  }
10
10
 
11
11
  type DatePickerConfig = {
12
+ closeOnSelect?: boolean,
12
13
  disableDate?: number[],
13
14
  disableRange?: number[],
14
15
  disableWeekdays?: number[],
@@ -29,6 +30,7 @@ type DatePickerConfig = {
29
30
  const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HTMLElement) => {
30
31
  const {
31
32
  allowInput,
33
+ closeOnSelect = true,
32
34
  defaultDate,
33
35
  disableDate,
34
36
  disableRange,
@@ -110,6 +112,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
110
112
  // ===========================================================
111
113
 
112
114
  flatpickr(`#${pickerId}`, {
115
+ closeOnSelect,
113
116
  disableMobile: true,
114
117
  dateFormat: getDateFormat(),
115
118
  defaultDate: defaultDateGetter(),
@@ -3,4 +3,4 @@
3
3
  picker_id: "date-picker-time",
4
4
  enable_time: true,
5
5
  show_timezone: true
6
- }) %>
6
+ }) %>
@@ -1,22 +1,38 @@
1
- import React from 'react'
1
+ /* eslint-disable react/no-multi-comp */
2
+ import React, { useMemo, useState } from 'react'
2
3
 
3
4
  import DatePicker from '../_date_picker'
5
+ import Body from '../../pb_body/_body'
4
6
 
5
7
  const DEFAULT_DATE = new Date()
6
8
  DEFAULT_DATE.setHours(12)
7
9
  DEFAULT_DATE.setMinutes(0)
8
10
 
9
- const DatePickerTime = (props) => (
10
- <div>
11
- <DatePicker
12
- defaultDate={DEFAULT_DATE}
13
- enableTime
14
- pickerId="date-picker-time"
15
- showTimezone
16
- {...props}
17
- />
11
+ const DatePickerTime = (props) => {
12
+ const [selectedDateTime, setSelectedDateTime] = useState(DEFAULT_DATE)
18
13
 
19
- </div>
20
- )
14
+ const refExample = React.createRef()
15
+
16
+ const handleOnInputChanged = (dateTime) => {
17
+ setSelectedDateTime(dateTime)
18
+ }
19
+
20
+ return (
21
+ <div ref={refExample}>
22
+ <Body marginBottom="md">{selectedDateTime.toString()}</Body>
23
+ {useMemo(() => (
24
+ <DatePicker
25
+ closeOnSelect={false}
26
+ defaultDate={DEFAULT_DATE}
27
+ enableTime
28
+ onChange={handleOnInputChanged}
29
+ pickerId="date-picker-time"
30
+ showTimezone
31
+ {...props}
32
+ />
33
+ ), [props])}
34
+ </div>
35
+ )
36
+ }
21
37
 
22
38
  export default DatePickerTime
@@ -40,97 +40,100 @@ export const getTimezoneText = (inputDate: {
40
40
  };
41
41
 
42
42
  function timeSelectPlugin(props: { caption: string; showTimezone: boolean }) {
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
- // };
43
+ return function (fp: FpTypes & any) {
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-${fp.element.id}-${text}`;
50
+ cardInput.className = "datePicker-AMPM"
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
+ fp.timeContainer.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(`datePicker-${fp.element.id}-AM`),
111
+ pickerPM: HTMLElement & { [x: string]: any } =
112
+ document.getElementById(`datePicker-${fp.element.id}-PM`),
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
+ },
135
+ onOpen() {
136
+ updateMeridiemToggle(true);
134
137
  },
135
138
  onReady() {
136
139
  const id = fp.input.id;
@@ -151,8 +154,8 @@ function timeSelectPlugin(props: { caption: string; showTimezone: boolean }) {
151
154
  }
152
155
 
153
156
  // add meridiem toggle
154
- // generateMeridiemToggle();
155
- // updateMeridiemToggle(true);
157
+ generateMeridiemToggle();
158
+ updateMeridiemToggle(true);
156
159
 
157
160
  // add timezone text
158
161
  if (props.showTimezone) {
@@ -8,20 +8,6 @@
8
8
  text-align: left;
9
9
  margin-left: $space_sm;
10
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
- }
25
11
  .numInputWrapper {
26
12
  width: auto;
27
13
  input.numInput {
@@ -59,7 +45,7 @@
59
45
  margin-left: $space_sm;
60
46
  }
61
47
 
62
- #datePickerAM, #datePickerPM {
48
+ .datePicker-AMPM {
63
49
  display: none;
64
50
  }
65
51
  &:focus, &:hover {
@@ -166,17 +166,51 @@
166
166
  }
167
167
  }
168
168
  }
169
- }
170
-
171
- .dialog-button-class {
172
- background-color: unset;
173
- border: none;
174
- cursor: pointer;
175
- }
176
-
169
+ }
177
170
  }
178
171
 
172
+ //styles specific to rails version of kit
179
173
  .pb_dialog_wrapper_rails {
174
+ $medium: 500px;
175
+ $large: 800px;
176
+ $xlarge: 1150px;
177
+
178
+ &[class*="full_height"] {
179
+ &[class*="_left"]{
180
+ .pb_dialog_rails {
181
+ margin: unset !important;
182
+ margin-right: auto !important;
183
+ }
184
+ }
185
+
186
+ &[class*="_center"]{
187
+ justify-content: center;
188
+ }
189
+
190
+ &[class*="_right"]{
191
+ .pb_dialog_rails {
192
+ margin: unset !important;
193
+ margin-left: auto !important;
194
+ }
195
+ }
196
+
197
+ .pb_dialog {
198
+ border-radius: 0;
199
+ height: 100% !important;
200
+ max-height: 100% !important;
201
+ max-width: 100%;
202
+ &[class*="_sm"] {
203
+ width: $medium;
204
+ }
205
+ &[class*="_md"] {
206
+ width: $large;
207
+ }
208
+ &[class*="_lg"] {
209
+ width: $xlarge;
210
+ }
211
+ }
212
+ }
213
+
180
214
  .pb_dialog_rails {
181
215
  top: 0 !important;
182
216
  padding: unset !important;
@@ -196,4 +230,10 @@
196
230
  animation-name: overlayFade;
197
231
  animation-duration: 0.2s;
198
232
  }
233
+
234
+ .dialog-button-class {
235
+ background-color: unset;
236
+ border: none;
237
+ cursor: pointer;
238
+ }
199
239
  }
@@ -1,22 +1,36 @@
1
- <div class="pb_dialog_wrapper_rails">
1
+ <div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
2
2
  <%= content_tag(:dialog,
3
3
  aria: object.aria,
4
4
  data: object.data,
5
5
  id: object.id,
6
6
  class: object.classname) do %>
7
- <% if object.title %>
7
+ <% if object.status === "" && object.title %>
8
8
  <%= pb_rails("dialog/dialog_header", props: {title: object.title, id: object.id }) %>
9
9
  <% end %>
10
- <% if object.text %>
10
+ <% if object.status === "" && object.text %>
11
11
  <%= pb_rails("dialog/dialog_body", props: { text: object.text }) %>
12
12
  <% end %>
13
+ <% if object.status != "" %>
14
+ <%= pb_rails("dialog/dialog_body", props: {padding: "md"}) do %>
15
+ <%= pb_rails("flex", props: {align: "center", orientation: "column"}) do %>
16
+ <%= pb_rails("icon_circle", props: {
17
+ icon: object.status_alerts[0],
18
+ variant: object.status_alerts[1],
19
+ size: "lg"
20
+ }) %>
21
+ <%= pb_rails("title", props: { text: object.title, tag: "h1", size: 3, margin_top: "sm" }) %>
22
+ <%= pb_rails("body", props: {text: object.text, margin_top: "sm"}) %>
23
+ <% end %>
24
+ <% end %>
25
+ <% end %>
13
26
  <% 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
- }) %>
27
+ <%= pb_rails("dialog/dialog_footer", props: {
28
+ cancel_button: object.cancel_button,
29
+ confirm_button: object.confirm_button,
30
+ id: object.id
31
+ }) %>
19
32
  <% end %>
33
+
20
34
  <%= content %>
21
35
  <% end %>
22
36
  </div>
@@ -6,14 +6,46 @@ module Playbook
6
6
  prop :size, type: Playbook::Props::Enum,
7
7
  values: %w[sm md lg xl status_size content],
8
8
  default: "md"
9
+ prop :full_height, type: Playbook::Props::Boolean, default: false
10
+ prop :placement, type: Playbook::Props::Enum,
11
+ values: %w[left right center],
12
+ default: "center"
13
+ prop :should_close_on_overlay_click, type: Playbook::Props::Boolean, default: true
9
14
  prop :title
10
15
  prop :text
11
16
  prop :confirm_button
12
17
  prop :cancel_button
18
+ prop :status, type: Playbook::Props::Enum,
19
+ values: ["info", "caution", "delete", "error", "success", "default", ""],
20
+ default: ""
13
21
 
14
22
  def classname
15
23
  generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}")
16
24
  end
25
+
26
+ def full_height_style
27
+ if full_height && size === "xl"
28
+ "full_height_center"
29
+ elsif full_height && size != "xl"
30
+ "full_height_#{placement}"
31
+ end
32
+ end
33
+
34
+ def overlay_close
35
+ !should_close_on_overlay_click ? "overlay_close" : ""
36
+ end
37
+
38
+ def status_alerts
39
+ alerts = {
40
+ "info" => %w[info-circle default],
41
+ "default" => %w[exclamation-circle default],
42
+ "caution" => %w[exclamation-triangle yellow],
43
+ "delete" => %w[trash-alt red],
44
+ "error" => %w[times-circle red],
45
+ "success" => %w[check-circle green],
46
+ }
47
+ alerts[status]
48
+ end
17
49
  end
18
50
  end
19
51
  end
@@ -5,8 +5,24 @@ const dialogHelper = () => {
5
5
  openTrigger.forEach((open) => {
6
6
  open.addEventListener("click", () => {
7
7
  var openTriggerData = open.dataset.openDialog;
8
- if (document.getElementById(openTriggerData).open) return;
9
- document.getElementById(openTriggerData).showModal();
8
+ var targetDialog = document.getElementById(openTriggerData)
9
+ if (targetDialog.open) return;
10
+ targetDialog.showModal();
11
+
12
+ //the following allows you to close dialog by clicking on overlay
13
+ targetDialog.addEventListener('click',((event) => {
14
+ var dialogContainerData = targetDialog.parentElement.dataset
15
+ if (dialogContainerData.overlayClick === "overlay_close") return;
16
+ let rect = event.target.getBoundingClientRect();
17
+ if (rect.left > event.clientX ||
18
+ rect.right < event.clientX ||
19
+ rect.top > event.clientY ||
20
+ rect.bottom < event.clientY
21
+ ) {
22
+ targetDialog.close();
23
+ }
24
+ })
25
+ );
10
26
  });
11
27
  });
12
28
 
@@ -2,12 +2,16 @@
2
2
  id: object.id,
3
3
  data: object.data,
4
4
  aria: object.aria) do %>
5
- <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
6
- <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
7
- <%= object.confirm_button %>
8
- <% end %>
9
- <%= pb_rails("button", props: { data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link"}) do %>
10
- <%= object.cancel_button %>
5
+ <% if object.confirm_button && object.cancel_button %>
6
+ <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
7
+ <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
8
+ <%= object.confirm_button %>
9
+ <% end %>
10
+ <%= pb_rails("button", props: { data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link"}) do %>
11
+ <%= object.cancel_button %>
12
+ <% end %>
11
13
  <% end %>
14
+ <% else %>
15
+ <% content.presence %>
12
16
  <% end %>
13
17
  <% end %>