playbook_ui 14.4.0.pre.alpha.pbntr523enablekitsforradiofix3826 → 14.4.0.pre.alpha.stephenagreerpatch13908
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +23 -4
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +1 -1
- data/app/pb_kits/playbook/pb_contact/_contact.tsx +17 -5
- data/app/pb_kits/playbook/pb_contact/contact.html.erb +14 -6
- data/app/pb_kits/playbook/pb_contact/contact.rb +4 -0
- data/app/pb_kits/playbook/pb_contact/contact.test.js +1 -1
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +4 -3
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +4 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +6 -3
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb +1 -1
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss +6 -2
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +2 -0
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_drawer/_close_icon.tsx +25 -0
- data/app/pb_kits/playbook/pb_drawer/_drawer.scss +465 -0
- data/app/pb_kits/playbook/pb_drawer/_drawer.tsx +195 -0
- data/app/pb_kits/playbook/pb_drawer/_drawer_context.tsx +3 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +117 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +43 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +1 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +63 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +55 -0
- data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +113 -0
- data/app/pb_kits/playbook/pb_drawer/docs/example.yml +12 -0
- data/app/pb_kits/playbook/pb_drawer/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_drawer/drawer.html.erb +12 -0
- data/app/pb_kits/playbook/pb_drawer/drawer.rb +8 -0
- data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx +77 -0
- data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +3 -1
- data/app/pb_kits/playbook/pb_map/_map_controls.tsx +7 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +15 -4
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +12 -1
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +3 -1
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +10 -2
- data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb +2 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +5 -2
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +12 -5
- data/app/pb_kits/playbook/pb_select/_select.tsx +5 -2
- data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
- data/app/pb_kits/playbook/pb_select/select.rb +4 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +0 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +0 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +14 -0
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +3 -0
- data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +6 -5
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb +88 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx +60 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +6 -1
- data/app/pb_kits/playbook/utilities/icons/allicons.tsx +123 -0
- data/app/pb_kits/playbook/utilities/icons/angle-down.svg +3 -0
- data/app/pb_kits/playbook/utilities/icons/envelope.svg +3 -0
- data/dist/chunks/_typeahead-D72GNy0y.js +22 -0
- data/dist/chunks/_weekday_stacked-CBMwwJbo.js +45 -0
- data/dist/chunks/lib-CEpcaI8y.js +29 -0
- data/dist/chunks/{pb_form_validation-zV9OpdSt.js → pb_form_validation-D9zkwt2b.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +3 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +25 -6
- data/dist/chunks/_typeahead-Dl3m9Vf4.js +0 -22
- data/dist/chunks/_weekday_stacked-uTVCUBob.js +0 -45
- data/dist/chunks/lib-D2U4I1U6.js +0 -16
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 296511fa627c7244c6800792f275f2fa7f3381ce08dbfe4f3b779e0d1c05de2a
|
4
|
+
data.tar.gz: 66c56a9286406e505c88073a4f58054c5f6c90ee2cdb2e6c8f1cc22de5c4dd85
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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={
|
27
|
+
key={firstIcon}
|
21
28
|
>
|
22
|
-
|
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={
|
39
|
+
key={secondIcon}
|
27
40
|
>
|
28
|
-
|
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
|
</>
|
@@ -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
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
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
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
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: {
|
@@ -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('.
|
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
|
-
|
235
|
+
className="angle_down_icon svg-inline--fa"
|
236
|
+
customIcon={angleDown}
|
236
237
|
/>
|
237
238
|
</div>
|
238
239
|
</div>
|
@@ -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
|
260
|
-
dropdown.insertAdjacentHTML('afterend',
|
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',
|
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
|
// }
|
@@ -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
|
+
}
|
@@ -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
|
+
}
|