playbook_ui 14.4.0.pre.alpha.pbntr523enablekitsforradiofix3826 → 14.4.0.pre.alpha.stephenagreerpatch13908

Sign up to get free protection for your applications and to get access to all the features.
Files changed (72) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +23 -4
  4. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +1 -1
  5. data/app/pb_kits/playbook/pb_contact/_contact.tsx +17 -5
  6. data/app/pb_kits/playbook/pb_contact/contact.html.erb +14 -6
  7. data/app/pb_kits/playbook/pb_contact/contact.rb +4 -0
  8. data/app/pb_kits/playbook/pb_contact/contact.test.js +1 -1
  9. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +4 -3
  10. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
  11. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +4 -0
  12. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +6 -3
  13. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss +6 -2
  15. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +2 -0
  16. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
  17. data/app/pb_kits/playbook/pb_drawer/_close_icon.tsx +25 -0
  18. data/app/pb_kits/playbook/pb_drawer/_drawer.scss +465 -0
  19. data/app/pb_kits/playbook/pb_drawer/_drawer.tsx +195 -0
  20. data/app/pb_kits/playbook/pb_drawer/_drawer_context.tsx +3 -0
  21. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +117 -0
  22. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +43 -0
  23. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +1 -0
  24. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +63 -0
  25. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +55 -0
  26. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +113 -0
  27. data/app/pb_kits/playbook/pb_drawer/docs/example.yml +12 -0
  28. data/app/pb_kits/playbook/pb_drawer/docs/index.js +5 -0
  29. data/app/pb_kits/playbook/pb_drawer/drawer.html.erb +12 -0
  30. data/app/pb_kits/playbook/pb_drawer/drawer.rb +8 -0
  31. data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx +77 -0
  32. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +3 -1
  33. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +7 -1
  34. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +15 -4
  35. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +12 -1
  36. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +3 -1
  37. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +10 -2
  38. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb +2 -0
  39. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +5 -2
  40. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +12 -5
  41. data/app/pb_kits/playbook/pb_select/_select.tsx +5 -2
  42. data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
  43. data/app/pb_kits/playbook/pb_select/select.rb +4 -0
  44. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +0 -1
  45. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +0 -1
  46. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +14 -0
  47. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +3 -0
  48. data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +6 -5
  49. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb +88 -0
  50. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx +60 -0
  51. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  52. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  53. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -1
  54. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +6 -1
  55. data/app/pb_kits/playbook/utilities/icons/allicons.tsx +123 -0
  56. data/app/pb_kits/playbook/utilities/icons/angle-down.svg +3 -0
  57. data/app/pb_kits/playbook/utilities/icons/envelope.svg +3 -0
  58. data/dist/chunks/_typeahead-D72GNy0y.js +22 -0
  59. data/dist/chunks/_weekday_stacked-CBMwwJbo.js +45 -0
  60. data/dist/chunks/lib-CEpcaI8y.js +29 -0
  61. data/dist/chunks/{pb_form_validation-zV9OpdSt.js → pb_form_validation-D9zkwt2b.js} +1 -1
  62. data/dist/chunks/vendor.js +1 -1
  63. data/dist/menu.yml +3 -1
  64. data/dist/playbook-doc.js +1 -1
  65. data/dist/playbook-rails-react-bindings.js +1 -1
  66. data/dist/playbook-rails.js +1 -1
  67. data/dist/playbook.css +1 -1
  68. data/lib/playbook/version.rb +1 -1
  69. metadata +25 -6
  70. data/dist/chunks/_typeahead-Dl3m9Vf4.js +0 -22
  71. data/dist/chunks/_weekday_stacked-uTVCUBob.js +0 -45
  72. data/dist/chunks/lib-D2U4I1U6.js +0 -16
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d3529e70e8a50a3f9eb8e62db3b2ee2897a0a419aa7580f4602f42219e18196a
4
- data.tar.gz: 1ca86443085ea9a2cea8b09b2eb9079855df754d88f6c43d62eec75bef666f33
3
+ metadata.gz: 296511fa627c7244c6800792f275f2fa7f3381ce08dbfe4f3b779e0d1c05de2a
4
+ data.tar.gz: 66c56a9286406e505c88073a4f58054c5f6c90ee2cdb2e6c8f1cc22de5c4dd85
5
5
  SHA512:
6
- metadata.gz: 28441d2ab7c7be90a121186f8de760c4676efa217f0934e224380218d597dd1930126d44636e36c6ad586969d156c479d01e31e346a41452c9f1876c4abbf96e
7
- data.tar.gz: 8a07bedf748cec61a3c596e787e18f452102928ac459f2e46ff6b5a0c45982ca135fa1d57eaa6770c9ff5af49ab004238ebaec692811a481bf4460d96920598a
6
+ metadata.gz: a401fb65fc99a34e09688477399df5e8b862e2c096815001f0d0c08e8c906bc03a80bb22b31f8e9318b5881bc49110e521ad00872aea214af5394d2d09d61a22
7
+ data.tar.gz: 00fb9ae82588a9aeb50ba582efda41a369b673602bbecafa22e6fffcac5f806f13719f4cf573a78f320a439dbf00d4eaaf5dc5028b0c91bed13533ddf0a33679
@@ -1,3 +1,4 @@
1
+
1
2
  @import 'pb_advanced_table/advanced_table';
2
3
  @import 'pb_avatar/avatar';
3
4
  @import 'pb_avatar_action_button/avatar_action_button';
@@ -105,6 +106,7 @@
105
106
  @import 'pb_user_badge/user_badge';
106
107
  @import 'pb_walkthrough/walkthrough';
107
108
  @import 'pb_weekday_stacked/weekday_stacked';
109
+ @import 'pb_drawer/drawer';
108
110
  @import 'utilities/mixins';
109
111
  @import 'utilities/spacing';
110
112
  @import 'utilities/cursor';
@@ -4,6 +4,7 @@ import { Header } from "@tanstack/react-table"
4
4
  import { GenericObject } from "../../types"
5
5
 
6
6
  import Icon from "../../pb_icon/_icon"
7
+ import { getAllIcons } from "../../utilities/icons/allicons"
7
8
 
8
9
  import { displayIcon } from "../Utilities/IconHelpers"
9
10
 
@@ -11,21 +12,39 @@ type SortIconButtonProps = {
11
12
  header: Header<GenericObject, unknown>
12
13
  sortIcon?: string | string[]
13
14
  }
15
+
14
16
  export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
15
17
 
18
+ const firstIcon = displayIcon(sortIcon)[0]
19
+ const secondIcon = displayIcon(sortIcon)[1]
20
+ const upIcon = getAllIcons()["arrowUpShortWide"].icon as unknown as { [key: string]: SVGElement }
21
+ const downIcon = getAllIcons()["arrowDownShortWide"].icon as unknown as { [key: string]: SVGElement }
22
+
16
23
  return (
17
24
  <>
18
25
  {header.column.getIsSorted() === "desc" ? (
19
26
  <div className="sort-button-icon"
20
- key={displayIcon(sortIcon)[0]}
27
+ key={firstIcon}
21
28
  >
22
- <Icon icon={displayIcon(sortIcon)[0]} />
29
+ { firstIcon === "arrow-up-short-wide" ? (
30
+ <Icon
31
+ className="svg-inline--fa"
32
+ customIcon={upIcon}
33
+ /> ) : (
34
+ <Icon icon={firstIcon} />
35
+ )}
23
36
  </div>
24
37
  ) : (
25
38
  <div className="sort-button-icon"
26
- key={displayIcon(sortIcon)[1]}
39
+ key={secondIcon}
27
40
  >
28
- <Icon icon={displayIcon(sortIcon)[1]} />
41
+ { secondIcon === "arrow-down-short-wide" ? (
42
+ <Icon
43
+ className="svg-inline--fa"
44
+ customIcon={downIcon}
45
+ /> ) : (
46
+ <Icon icon={secondIcon} />
47
+ )}
29
48
  </div>
30
49
  )}
31
50
  </>
@@ -462,4 +462,4 @@ test("responsive none prop functions as expected", () => {
462
462
 
463
463
  const kit = screen.getByTestId(testId)
464
464
  expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
465
- })
465
+ })
@@ -7,6 +7,7 @@ import { globalProps } from '../utilities/globalProps'
7
7
  import Body from '../pb_body/_body'
8
8
  import Caption from '../pb_caption/_caption'
9
9
  import Icon from '../pb_icon/_icon'
10
+ import { getAllIcons } from "../utilities/icons/allicons"
10
11
 
11
12
  const contactTypeMap: { [key: string]: string } = {
12
13
  'cell': 'mobile',
@@ -18,6 +19,8 @@ const contactTypeMap: { [key: string]: string } = {
18
19
  'wrong-phone': 'phone-slash',
19
20
  }
20
21
 
22
+ const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string]: SVGElement }
23
+
21
24
  const formatContact = (contactString: string, contactType: string) => {
22
25
  if (contactType === 'email') return contactString
23
26
 
@@ -91,11 +94,20 @@ const Contact = (props: ContactProps): React.ReactElement => {
91
94
  dark={dark}
92
95
  tag="span"
93
96
  >
94
- <Icon
95
- dark={dark}
96
- fixedWidth
97
- icon={contactTypeMap[contactType] || 'phone'}
98
- />
97
+ {contactType === 'email' ? (
98
+ <Icon
99
+ className="svg-inline--fa envelope"
100
+ customIcon={envelopeIcon}
101
+ dark={dark}
102
+ fixedWidth
103
+ />
104
+ ) : (
105
+ <Icon
106
+ dark={dark}
107
+ fixedWidth
108
+ icon={contactTypeMap[contactType] || 'phone'}
109
+ />
110
+ )}
99
111
  {` ${formatContact(contactValue, contactType)} `}
100
112
  {contactDetail && (
101
113
  <Caption
@@ -4,12 +4,20 @@
4
4
  classname: "pb_contact_kit",
5
5
  color: "light",
6
6
  dark: object.dark
7
- }) do %>
8
- <%= pb_rails("icon", props: {
9
- icon: object.contact_icon,
10
- fixed_width: true,
11
- dark: object.dark
12
- }) %>
7
+ }) do %>
8
+ <% if contact_type == "email" %>
9
+ <%= pb_rails("icon", props: {
10
+ custom_icon: Playbook::Engine::root.join(envelope_path),
11
+ fixed_width: true,
12
+ dark: object.dark
13
+ }) %>
14
+ <% else %>
15
+ <%= pb_rails("icon", props: {
16
+ icon: object.contact_icon,
17
+ fixed_width: true,
18
+ dark: object.dark
19
+ }) %>
20
+ <% end %>
13
21
  <%= object.formatted_contact_value if object.contact_value %>
14
22
 
15
23
  <%= pb_rails("caption", props: {
@@ -44,6 +44,10 @@ module Playbook
44
44
  end
45
45
  end
46
46
 
47
+ def envelope_path
48
+ "app/pb_kits/playbook/utilities/icons/envelope.svg"
49
+ end
50
+
47
51
  private
48
52
 
49
53
  def formatted_value
@@ -79,7 +79,7 @@ test('returns correct icon', () => {
79
79
  expect(screen.getByTestId('test-home').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
80
80
  expect(screen.getByTestId('test-work').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-office')
81
81
  expect(screen.getByTestId('test-work-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-laptop')
82
- expect(screen.getByTestId('test-email').querySelector('.pb_icon_kit')).toHaveClass('fa-envelope')
82
+ expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toHaveClass('envelope')
83
83
  expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-slash')
84
84
  expect(screen.getByTestId('test-wrong-type').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
85
85
  expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')
@@ -3,6 +3,7 @@ import classnames from 'classnames'
3
3
 
4
4
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
5
5
  import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
6
+ import { getAllIcons } from "../utilities/icons/allicons"
6
7
 
7
8
  import datePickerHelper from './date_picker_helper'
8
9
  import Icon from '../pb_icon/_icon'
@@ -161,7 +162,7 @@ useEffect(() => {
161
162
  }
162
163
  return base
163
164
  }
164
-
165
+ const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
165
166
 
166
167
  return (
167
168
  <div
@@ -231,8 +232,8 @@ useEffect(() => {
231
232
  id={`${pickerId}-angle-down`}
232
233
  >
233
234
  <Icon
234
- className="angle_down_icon"
235
- icon="angle-down"
235
+ className="angle_down_icon svg-inline--fa"
236
+ customIcon={angleDown}
236
237
  />
237
238
  </div>
238
239
  </div>
@@ -61,7 +61,7 @@
61
61
  >
62
62
  <%= pb_rails("icon", props: {
63
63
  classname: "angle_down_icon",
64
- icon: "angle-down"
64
+ custom_icon: Playbook::Engine::root.join(angle_down_path)
65
65
  }) %>
66
66
  </div>
67
67
  <% end %>
@@ -118,6 +118,10 @@ module Playbook
118
118
  class_string += error_class
119
119
  class_string
120
120
  end
121
+
122
+ def angle_down_path
123
+ "app/pb_kits/playbook/utilities/icons/angle-down.svg"
124
+ end
121
125
  end
122
126
  end
123
127
  end
@@ -5,6 +5,9 @@ import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
5
5
  import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
6
6
  import timeSelectPlugin from './plugins/timeSelect'
7
7
  import quickPickPlugin from './plugins/quickPick'
8
+ import { getAllIcons } from '../utilities/icons/allicons';
9
+
10
+ const angleDown = getAllIcons().angleDown.string
8
11
 
9
12
  const getPositionElement = (element: string | Element) => {
10
13
  return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
@@ -256,10 +259,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
256
259
  })
257
260
  }
258
261
 
259
- // Adding dropdown icons to year and month selects
260
- dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
262
+ // Adding dropdown icons to year and month select
263
+ dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
261
264
  if (picker.monthElements[0].parentElement) {
262
- return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')}
265
+ return picker.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${angleDown}</i>`)}
263
266
  // if (picker.weekElements[0].parentElement){
264
267
  // return picker.weekElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
265
268
  // }
@@ -14,4 +14,4 @@
14
14
  }
15
15
  fpInline.config.onChange.push(showAngleDownHandler)
16
16
  })
17
- <% end %>
17
+ <% end %>
@@ -76,7 +76,11 @@
76
76
  pointer-events: none;
77
77
  color: $text_lt_light;
78
78
  }
79
-
79
+ .year-dropdown-icon svg, .month-dropdown-icon svg {
80
+ width: 16px;
81
+ margin-top: 6px;
82
+ margin-left: -2px;
83
+ }
80
84
  // Left - Right Arrow Styling
81
85
  .flatpickr-prev-month {
82
86
  display: flex;
@@ -113,4 +117,4 @@
113
117
  }
114
118
  }
115
119
  }
116
- }
120
+ }
@@ -187,6 +187,8 @@
187
187
 
188
188
  &_close_icon {
189
189
  cursor: pointer;
190
+ font-size: $font_base;
191
+ line-height: $lh_normal;
190
192
  }
191
193
 
192
194
  &_overlay {
@@ -2,7 +2,7 @@
2
2
  <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
3
3
  <%= content.presence || object.title %>
4
4
 
5
- <button class="dialog-button-class" type="button" data-close-dialog= <%= object.id %> >
5
+ <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> >
6
6
  <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon) }) %>
7
7
  </button>
8
8
  <% end %>
@@ -0,0 +1,25 @@
1
+ import React from 'react'
2
+ import Icon from '../pb_icon/_icon'
3
+
4
+ import { getAllIcons } from "../utilities/icons/allicons"
5
+
6
+ type CloseIconProps = {
7
+ onClose: () => void,
8
+ }
9
+
10
+ export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
11
+ const { onClose } = props
12
+ const timesIcon = getAllIcons()["times"]
13
+ return (
14
+ <div
15
+ className="pb_dialog_close_icon"
16
+ onClick={onClose}
17
+ >
18
+ <Icon
19
+ className="svg-inline--fa"
20
+ customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
21
+ fixedWidth
22
+ />
23
+ </div>
24
+ )
25
+ }