playbook_ui 14.4.0.pre.alpha.dependabotnpmandyarntiptapextensionparagraph2723830 → 14.4.0.pre.alpha.javascriptassets3924
Sign up to get free protection for your applications and to get access to all the features.
- 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_button/_button.tsx +6 -2
- 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_dashboard/pbChartsDarkTheme.ts +2 -6
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +2 -7
- 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_filter/docs/_filter_default.html.erb +10 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb +5 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb +5 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +5 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +5 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +5 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +5 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +5 -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_popover/docs/_popover_list.html.erb +14 -13
- data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +4 -4
- data/app/pb_kits/playbook/pb_radio/_radio.tsx +92 -33
- 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 +62 -0
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
- 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_tooltip/_tooltip.tsx +17 -13
- 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 +136 -13
- 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-BYw0HEgO.js +22 -0
- data/dist/chunks/_weekday_stacked-DumiyWjh.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/pagination_renderer.rb +10 -2
- data/lib/playbook/version.rb +1 -1
- metadata +26 -6
- data/dist/chunks/_typeahead-B2zRxReA.js +0 -22
- data/dist/chunks/_weekday_stacked-Co95UEiW.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: 1260c404178e03014daf3a7a6104f4555d444090ad7a95c424d71b5625169d60
|
4
|
+
data.tar.gz: dcc996be074cbdc99ba2122796e88c566cb4a8b190664c6589f3bd144ee7eeda
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: eb3867b5ffd3f291fbbbea7f684c2bfbee7cbaf214f1f93c85f4aab1d4e9ffc185c331e45bc209647f97cfeb2e9f545672d7696d1caf54b29c9ec3d90f089736
|
7
|
+
data.tar.gz: 9726151e43057f6062f88e2dc469a98ba8ca65e34460cf4247834b1fef0af34cce2a755b30ff47486426b99384b5e1f3cf8b5b3441e615d8eeb3b028ab2fdcb1
|
@@ -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
|
</>
|
@@ -116,11 +116,15 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
|
|
116
116
|
const content = (
|
117
117
|
<span className="pb_button_content">
|
118
118
|
{icon && !iconRight && (
|
119
|
-
<
|
119
|
+
<Icon className='button_with_icon'
|
120
|
+
icon={icon}
|
121
|
+
/>
|
120
122
|
)}
|
121
123
|
<span>{text || children}</span>
|
122
124
|
{icon && iconRight && (
|
123
|
-
<
|
125
|
+
<Icon className='button_with_icon_right'
|
126
|
+
icon={icon}
|
127
|
+
/>
|
124
128
|
)}
|
125
129
|
</span>
|
126
130
|
)
|
@@ -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,11 +3,7 @@ import typography from '../tokens/exports/_typography.module.scss'
|
|
3
3
|
|
4
4
|
import { ThemeProps } from './themeTypes'
|
5
5
|
|
6
|
-
|
7
|
-
traverseUpButton?: {
|
8
|
-
position: { y: number };
|
9
|
-
};
|
10
|
-
}
|
6
|
+
import { PlotTreemapOptions } from "highcharts";
|
11
7
|
|
12
8
|
const highchartsDarkTheme: ThemeProps = {
|
13
9
|
lang: {
|
@@ -206,7 +202,7 @@ const highchartsDarkTheme: ThemeProps = {
|
|
206
202
|
traverseUpButton: {
|
207
203
|
position: { y: -50 },
|
208
204
|
},
|
209
|
-
} as
|
205
|
+
} as PlotTreemapOptions,
|
210
206
|
},
|
211
207
|
credits: {
|
212
208
|
enabled: false
|
@@ -3,12 +3,7 @@ import typography from '../tokens/exports/_typography.module.scss'
|
|
3
3
|
|
4
4
|
import { ThemeProps } from './themeTypes'
|
5
5
|
|
6
|
-
|
7
|
-
traverseUpButton?: {
|
8
|
-
position: { y: number };
|
9
|
-
};
|
10
|
-
}
|
11
|
-
|
6
|
+
import { PlotTreemapOptions } from "highcharts";
|
12
7
|
|
13
8
|
const highchartsTheme: ThemeProps = {
|
14
9
|
lang: {
|
@@ -206,7 +201,7 @@ const highchartsTheme: ThemeProps = {
|
|
206
201
|
traverseUpButton: {
|
207
202
|
position: { y: -50 },
|
208
203
|
},
|
209
|
-
} as
|
204
|
+
} as PlotTreemapOptions,
|
210
205
|
},
|
211
206
|
credits: {
|
212
207
|
enabled: false
|
@@ -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
|
+
}
|