playbook_ui 16.1.0.pre.alpha.play274314102 → 16.1.0.pre.alpha.play274314184
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/pb_advanced_table/docs/_advanced_table_sort.md +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +17 -9
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.md +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx +2 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx +2 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +9 -9
- data/app/pb_kits/playbook/tokens/_colors.scss +3 -0
- data/app/pb_kits/playbook/tokens/_colors_accessible.scss +250 -0
- data/app/pb_kits/playbook/tokens/exports/_colors.module.scss +10 -0
- data/dist/chunks/{_pb_line_graph-DuJNCf7N.js → _pb_line_graph-CC2Ywwix.js} +1 -1
- data/dist/chunks/{_typeahead-Cx2lp7TD.js → _typeahead-BqoIZGFP.js} +1 -1
- data/dist/chunks/{globalProps-Bc-FVsRt.js → globalProps-DYr2qrIf.js} +1 -1
- data/dist/chunks/{lib-BwX82vim.js → lib-DgqmX9CF.js} +1 -1
- data/dist/chunks/vendor.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/dist/reset.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +8 -6
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: fa237fa2967781e50f7313e0c5ed1a6fc434f8303dc96fa87b2baf4776c622f0
|
|
4
|
+
data.tar.gz: 1fc62b25a91ef183344c112a90c88745221c7feb0904b58f38f645cf5e5f1e78
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 48da3104c2b8ac90c3ad10cc4ae7b82b5d0d674adfc6a54428cef808cc1f22b7e581f0c6f41234288458d69f7fa79ba59482b3c3f3be5dfc16a6eab09b30c7cb
|
|
7
|
+
data.tar.gz: e8319c242c588fbc986a42ccd37124217506677ba91d7c67133986b3adb99c015e6d713ca41e135674781823f97ab8d1bda3eaa9b2cc8a8cb34d4d70dca29bf2
|
|
@@ -2,4 +2,4 @@ the `enableSorting` prop is a boolean prop set to false by default. If true, the
|
|
|
2
2
|
|
|
3
3
|
### sortIcon
|
|
4
4
|
|
|
5
|
-
An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-short
|
|
5
|
+
An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-wide-short", "arrow-down-short-wide"]`. All strings must be valid FA icons.
|
|
@@ -8,6 +8,7 @@ import Caption from '../pb_caption/_caption'
|
|
|
8
8
|
import colors from '../tokens/exports/_colors.module.scss'
|
|
9
9
|
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
|
10
10
|
import { buildAriaProps, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
|
|
11
|
+
import './_dedupe_trix_toolbar'
|
|
11
12
|
|
|
12
13
|
import EditorToolbar from './TipTap/Toolbar'
|
|
13
14
|
|
|
@@ -48,6 +49,7 @@ type RichTextEditorProps = {
|
|
|
48
49
|
value?: string,
|
|
49
50
|
maxWidth?: string
|
|
50
51
|
TrixEditor?: React.ComponentType<any>,
|
|
52
|
+
trixInstance?: any,
|
|
51
53
|
} & GlobalProps
|
|
52
54
|
|
|
53
55
|
const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
|
|
@@ -78,6 +80,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
|
|
|
78
80
|
requiredIndicator = false,
|
|
79
81
|
label,
|
|
80
82
|
TrixEditor,
|
|
83
|
+
trixInstance: trixInstance = undefined,
|
|
81
84
|
} = props
|
|
82
85
|
|
|
83
86
|
const ariaProps = buildAriaProps(aria),
|
|
@@ -91,6 +94,11 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
|
|
|
91
94
|
const fieldId = id ? (id as string) : null
|
|
92
95
|
const labelElementId = fieldId ? `${fieldId}-label` : null
|
|
93
96
|
|
|
97
|
+
|
|
98
|
+
trixInstance && (trixInstance.config.textAttributes.inlineCode = {
|
|
99
|
+
tagName: 'code',
|
|
100
|
+
inheritable: true,
|
|
101
|
+
})
|
|
94
102
|
const handleOnEditorReady = (editorInstance: Editor) => {
|
|
95
103
|
setEditor(editorInstance)
|
|
96
104
|
|
|
@@ -290,15 +298,15 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
|
|
|
290
298
|
</div>
|
|
291
299
|
) : (
|
|
292
300
|
TrixEditor ? (
|
|
293
|
-
|
|
294
|
-
className
|
|
295
|
-
fileParamName
|
|
296
|
-
mergeTags
|
|
297
|
-
onChange
|
|
298
|
-
onEditorReady
|
|
299
|
-
placeholder
|
|
300
|
-
value
|
|
301
|
-
|
|
301
|
+
React.createElement(TrixEditor, {
|
|
302
|
+
className: "",
|
|
303
|
+
fileParamName: name,
|
|
304
|
+
mergeTags: [],
|
|
305
|
+
onChange: onChange,
|
|
306
|
+
onEditorReady: handleOnEditorReady,
|
|
307
|
+
placeholder: placeholder,
|
|
308
|
+
value: value,
|
|
309
|
+
})
|
|
302
310
|
) : (
|
|
303
311
|
<div style={{ color: 'red', padding: '1em', border: '1px solid #f00', background: '#fff0f0' }}>
|
|
304
312
|
<strong>Trix Editor is not available.</strong><br />
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
|
|
3
3
|
import { TrixEditor } from 'react-trix'
|
|
4
|
-
// eslint-disable-next-line no-unused-vars
|
|
5
4
|
import Trix from 'trix'
|
|
6
5
|
|
|
7
6
|
const RichTextEditorAttributes = (props) => (
|
|
@@ -11,6 +10,7 @@ const RichTextEditorAttributes = (props) => (
|
|
|
11
10
|
aria={{ label: 'rich textarea' }}
|
|
12
11
|
data={{ key: 'value', key2: 'value2' }}
|
|
13
12
|
name="name-attribute"
|
|
13
|
+
trixInstance={Trix}
|
|
14
14
|
{...props}
|
|
15
15
|
/>
|
|
16
16
|
</div>
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { useState } from 'react'
|
|
2
2
|
import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
|
|
3
3
|
import { TrixEditor } from 'react-trix'
|
|
4
|
-
// eslint-disable-next-line no-unused-vars
|
|
5
4
|
import Trix from 'trix'
|
|
6
5
|
|
|
7
6
|
const RichTextEditorDefault = (props) => {
|
|
@@ -13,6 +12,7 @@ const RichTextEditorDefault = (props) => {
|
|
|
13
12
|
<RichTextEditor
|
|
14
13
|
TrixEditor={TrixEditor}
|
|
15
14
|
onChange={handleOnChange}
|
|
15
|
+
trixInstance={Trix}
|
|
16
16
|
value={value}
|
|
17
17
|
{...props}
|
|
18
18
|
/>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
**IMPORTANT**: The Trix version of the RichTextEditor is a Legacy kit and no longer being actively maintained. Please use the advanced Editor above.
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
|
|
3
3
|
import { TrixEditor } from 'react-trix'
|
|
4
|
-
// eslint-disable-next-line no-unused-vars
|
|
5
4
|
import Trix from 'trix'
|
|
6
5
|
|
|
7
6
|
const RichTextEditorFocus = (props) => (
|
|
@@ -9,12 +8,14 @@ const RichTextEditorFocus = (props) => (
|
|
|
9
8
|
<RichTextEditor
|
|
10
9
|
TrixEditor={TrixEditor}
|
|
11
10
|
focus
|
|
11
|
+
trixInstance={Trix}
|
|
12
12
|
{...props}
|
|
13
13
|
/>
|
|
14
14
|
<br />
|
|
15
15
|
<RichTextEditor
|
|
16
16
|
TrixEditor={TrixEditor}
|
|
17
17
|
focus
|
|
18
|
+
trixInstance={Trix}
|
|
18
19
|
{...props}
|
|
19
20
|
/>
|
|
20
21
|
</>
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
|
|
3
3
|
import { TrixEditor } from 'react-trix'
|
|
4
|
-
// eslint-disable-next-line no-unused-vars
|
|
5
4
|
import Trix from 'trix'
|
|
6
5
|
|
|
7
6
|
const RichTextEditorInline = (props) => (
|
|
@@ -11,6 +10,7 @@ const RichTextEditorInline = (props) => (
|
|
|
11
10
|
id="inline"
|
|
12
11
|
inline
|
|
13
12
|
toolbarBottom
|
|
13
|
+
trixInstance={Trix}
|
|
14
14
|
value="Try hovering over this text. Then try modifying it or adding more of your own text."
|
|
15
15
|
{...props}
|
|
16
16
|
/>
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { useState } from 'react'
|
|
2
2
|
import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
|
|
3
3
|
import { TrixEditor } from 'react-trix'
|
|
4
|
-
// eslint-disable-next-line no-unused-vars
|
|
5
4
|
import Trix from 'trix'
|
|
6
5
|
|
|
7
6
|
const RichTextEditorLabel = (props) => {
|
|
@@ -15,6 +14,7 @@ const RichTextEditorLabel = (props) => {
|
|
|
15
14
|
id="example"
|
|
16
15
|
label="Example Label"
|
|
17
16
|
onChange={handleOnChange}
|
|
17
|
+
trixInstance={Trix}
|
|
18
18
|
value={value}
|
|
19
19
|
{...props}
|
|
20
20
|
/>
|
|
@@ -23,6 +23,7 @@ const RichTextEditorLabel = (props) => {
|
|
|
23
23
|
TrixEditor={TrixEditor}
|
|
24
24
|
label="Example Label No ID"
|
|
25
25
|
onChange={handleOnChange}
|
|
26
|
+
trixInstance={Trix}
|
|
26
27
|
value={value}
|
|
27
28
|
{...props}
|
|
28
29
|
/>
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { useState } from 'react'
|
|
2
2
|
import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
|
|
3
3
|
import { TrixEditor } from 'react-trix'
|
|
4
|
-
// eslint-disable-next-line no-unused-vars
|
|
5
4
|
import Trix from 'trix'
|
|
6
5
|
|
|
7
6
|
const RichTextEditorRequiredIndicator = (props) => {
|
|
@@ -16,6 +15,7 @@ const RichTextEditorRequiredIndicator = (props) => {
|
|
|
16
15
|
label="Label"
|
|
17
16
|
onChange={handleOnChange}
|
|
18
17
|
requiredIndicator
|
|
18
|
+
trixInstance={Trix}
|
|
19
19
|
value={value}
|
|
20
20
|
{...props}
|
|
21
21
|
/>
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
|
|
3
3
|
import { TrixEditor } from 'react-trix'
|
|
4
|
-
// eslint-disable-next-line no-unused-vars
|
|
5
4
|
import Trix from 'trix'
|
|
6
5
|
|
|
7
6
|
const RichTextEditorSimple = (props) => (
|
|
@@ -9,6 +8,7 @@ const RichTextEditorSimple = (props) => (
|
|
|
9
8
|
<RichTextEditor
|
|
10
9
|
TrixEditor={TrixEditor}
|
|
11
10
|
simple
|
|
11
|
+
trixInstance={Trix}
|
|
12
12
|
{...props}
|
|
13
13
|
/>
|
|
14
14
|
</div>
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
|
|
3
3
|
import { TrixEditor } from 'react-trix'
|
|
4
|
-
// eslint-disable-next-line no-unused-vars
|
|
5
4
|
import Trix from 'trix'
|
|
6
5
|
|
|
7
6
|
const RichTextEditorSticky = (props) => (
|
|
@@ -10,6 +9,7 @@ const RichTextEditorSticky = (props) => (
|
|
|
10
9
|
TrixEditor={TrixEditor}
|
|
11
10
|
id="sticky"
|
|
12
11
|
sticky
|
|
12
|
+
trixInstance={Trix}
|
|
13
13
|
value="In this example, when you scroll down, the rich text editor's toolbar will scroll along with the page and it will no longer be visible at the top of the page. Dummy text to enable scroll.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis."
|
|
14
14
|
{...props}
|
|
15
15
|
/>
|
|
@@ -3,7 +3,6 @@ import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
|
|
|
3
3
|
import Select from '../../pb_select/_select'
|
|
4
4
|
import { changelog, release } from './templates.js'
|
|
5
5
|
import { TrixEditor } from 'react-trix'
|
|
6
|
-
// eslint-disable-next-line no-unused-vars
|
|
7
6
|
import Trix from 'trix'
|
|
8
7
|
|
|
9
8
|
const RichTextEditorTemplates = (props) => {
|
|
@@ -37,6 +36,7 @@ const RichTextEditorTemplates = (props) => {
|
|
|
37
36
|
TrixEditor={TrixEditor}
|
|
38
37
|
id="template"
|
|
39
38
|
template={editorContent}
|
|
39
|
+
trixInstance={Trix}
|
|
40
40
|
{...props}
|
|
41
41
|
/>
|
|
42
42
|
</div>
|
|
@@ -18,15 +18,15 @@ examples:
|
|
|
18
18
|
- rich_text_editor_advanced_required_indicator: Advanced Required Indicator
|
|
19
19
|
- rich_text_editor_advanced_preview: Advanced Preview
|
|
20
20
|
- rich_text_editor_default: Legacy Default (Trix)
|
|
21
|
-
- rich_text_editor_simple: Legacy Simple (Trix)
|
|
22
|
-
- rich_text_editor_attributes: Legacy Attributes (Trix)
|
|
23
|
-
- rich_text_editor_focus: Legacy Focus (Trix)
|
|
24
|
-
- rich_text_editor_sticky: Legacy Sticky (Trix)
|
|
25
|
-
- rich_text_editor_templates: Legacy Templates (Trix)
|
|
26
|
-
- rich_text_editor_inline: Legacy Inline (Trix)
|
|
27
|
-
- rich_text_editor_label: Legacy Label (Trix)
|
|
28
|
-
- rich_text_editor_required_indicator: Legacy Required Indicator (Trix)
|
|
29
|
-
- rich_text_editor_preview: Legacy Preview (Trix)
|
|
21
|
+
# - rich_text_editor_simple: Legacy Simple (Trix)
|
|
22
|
+
# - rich_text_editor_attributes: Legacy Attributes (Trix)
|
|
23
|
+
# - rich_text_editor_focus: Legacy Focus (Trix)
|
|
24
|
+
# - rich_text_editor_sticky: Legacy Sticky (Trix)
|
|
25
|
+
# - rich_text_editor_templates: Legacy Templates (Trix)
|
|
26
|
+
# - rich_text_editor_inline: Legacy Inline (Trix)
|
|
27
|
+
# - rich_text_editor_label: Legacy Label (Trix)
|
|
28
|
+
# - rich_text_editor_required_indicator: Legacy Required Indicator (Trix)
|
|
29
|
+
# - rich_text_editor_preview: Legacy Preview (Trix)
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
/*=====================================
|
|
2
|
+
Accessible Color Tokens (WCAG-compliant)
|
|
3
|
+
Source of truth for new color tokens, starting with accessible text, border, input, and status colors.
|
|
4
|
+
Do not document base values; document usage only.
|
|
5
|
+
=====================================*/
|
|
6
|
+
|
|
7
|
+
/* Text Colors ----------------------*/
|
|
8
|
+
$text_default_color: #242B42 !default; // text_default_color is temporary name accounting for conflict with typography token text_default
|
|
9
|
+
$text_light: #4B546B !default;
|
|
10
|
+
$text_lighter: #617290 !default;
|
|
11
|
+
$text_success: #158149 !default;
|
|
12
|
+
$text_error: #DA0014 !default;
|
|
13
|
+
$text_link: #0056CF !default;
|
|
14
|
+
|
|
15
|
+
$text_default_dark: #FFFFFF !default;
|
|
16
|
+
$text_light_dark: #B4B2BE !default;
|
|
17
|
+
$text_lighter_dark: #8A879A !default;
|
|
18
|
+
$text_success_dark: #00CA74 !default;
|
|
19
|
+
$text_error_dark: #FF1A1A !default;
|
|
20
|
+
$text_link_dark: #0E89FF !default;
|
|
21
|
+
|
|
22
|
+
$accessible_text_colors: (
|
|
23
|
+
text_default: $text_default_color,
|
|
24
|
+
text_light: $text_light,
|
|
25
|
+
text_lighter: $text_lighter,
|
|
26
|
+
text_success: $text_success,
|
|
27
|
+
text_error: $text_error,
|
|
28
|
+
text_link: $text_link,
|
|
29
|
+
text_default_dark: $text_default_dark,
|
|
30
|
+
text_light_dark: $text_light_dark,
|
|
31
|
+
text_lighter_dark: $text_lighter_dark,
|
|
32
|
+
text_success_dark: $text_success_dark,
|
|
33
|
+
text_error_dark: $text_error_dark,
|
|
34
|
+
text_link_dark: $text_link_dark
|
|
35
|
+
);
|
|
36
|
+
|
|
37
|
+
/* Input Text & Icon Colors ----------------------*/
|
|
38
|
+
$input_text_default: #617290 !default;
|
|
39
|
+
$input_text_active: #242B42 !default;
|
|
40
|
+
$input_text_disabled: #B4BBC3 !default;
|
|
41
|
+
$input_text_error: #DA0014 !default;
|
|
42
|
+
|
|
43
|
+
$input_text_default_dark: #B0B0B0 !default;
|
|
44
|
+
$input_text_state_active: #FFFFFF !default;
|
|
45
|
+
$input_text_disabled_dark: #615D73 !default;
|
|
46
|
+
$input_text_error_dark: #FF1A1A !default;
|
|
47
|
+
|
|
48
|
+
$accessible_input_text_colors: (
|
|
49
|
+
input_text_default: $input_text_default,
|
|
50
|
+
input_text_active: $input_text_active,
|
|
51
|
+
input_text_disabled: $input_text_disabled,
|
|
52
|
+
input_text_error: $input_text_error,
|
|
53
|
+
input_text_default_dark: $input_text_default_dark,
|
|
54
|
+
input_text_state_active: $input_text_state_active,
|
|
55
|
+
input_text_disabled_dark: $input_text_disabled_dark,
|
|
56
|
+
input_text_error_dark: $input_text_error_dark
|
|
57
|
+
);
|
|
58
|
+
|
|
59
|
+
/* Input Background Colors ----------------------*/
|
|
60
|
+
$input_background_default: #FFFFFF !default;
|
|
61
|
+
$input_background_state: #FBFDFF !default;
|
|
62
|
+
$input_background_disabled: #F4F4F6 !default;
|
|
63
|
+
|
|
64
|
+
$input_background_default_dark: #44405A !default;
|
|
65
|
+
$input_background_state_dark: #36324E !default;
|
|
66
|
+
$input_background_disabled_dark: #171333 !default;
|
|
67
|
+
|
|
68
|
+
$accessible_input_background_colors: (
|
|
69
|
+
input_background_default: $input_background_default,
|
|
70
|
+
input_background_state: $input_background_state,
|
|
71
|
+
input_background_disabled: $input_background_disabled,
|
|
72
|
+
input_background_default_dark: $input_background_default_dark,
|
|
73
|
+
input_background_state_dark: $input_background_state_dark,
|
|
74
|
+
input_background_disabled_dark: $input_background_disabled_dark
|
|
75
|
+
);
|
|
76
|
+
|
|
77
|
+
/* Input Border Colors ----------------------*/
|
|
78
|
+
$input_border_default: #828EA7 !default;
|
|
79
|
+
$input_border_state: #0056CF !default;
|
|
80
|
+
$input_border_error: #DA0014 !default;
|
|
81
|
+
$input_border_disabled: #E4E8F0 !default;
|
|
82
|
+
|
|
83
|
+
$input_border_default_dark: #6E6A84 !default;
|
|
84
|
+
$input_border_state_dark: #0E89FF !default;
|
|
85
|
+
$input_border_error_dark: #FF1A1A !default;
|
|
86
|
+
$input_border_disabled_dark: #6E6A84 !default;
|
|
87
|
+
|
|
88
|
+
$accessible_input_border_colors: (
|
|
89
|
+
input_border_default: $input_border_default,
|
|
90
|
+
input_border_state: $input_border_state,
|
|
91
|
+
input_border_error: $input_border_error,
|
|
92
|
+
input_border_disabled: $input_border_disabled,
|
|
93
|
+
input_border_default_dark: $input_border_default_dark,
|
|
94
|
+
input_border_state_dark: $input_border_state_dark,
|
|
95
|
+
input_border_error_dark: $input_border_error_dark,
|
|
96
|
+
input_border_disabled_dark: $input_border_disabled_dark
|
|
97
|
+
);
|
|
98
|
+
|
|
99
|
+
/* Status Text and Icon colors ----------------------*/
|
|
100
|
+
$status_text_neutral: #576775 !default;
|
|
101
|
+
$status_text_primary: #0056CF !default;
|
|
102
|
+
$status_text_success: #107441 !default;
|
|
103
|
+
$status_text_error: #BF0012 !default;
|
|
104
|
+
$status_text_warning: #886600 !default;
|
|
105
|
+
$status_text_info: #16747E !default;
|
|
106
|
+
$status_text_notification: #FFFFFF !default;
|
|
107
|
+
|
|
108
|
+
$status_text_neutral_dark: #93A8B8 !default;
|
|
109
|
+
$status_text_primary_dark: #0E89FF !default;
|
|
110
|
+
$status_text_success_dark: #00CA74 !default;
|
|
111
|
+
$status_text_error_dark: #FF4A50 !default;
|
|
112
|
+
$status_text_warning_dark: #F9BB00 !default;
|
|
113
|
+
$status_text_info_dark: #00C4D7 !default;
|
|
114
|
+
|
|
115
|
+
$accessible_status_text_colors: (
|
|
116
|
+
status_text_neutral: $status_text_neutral,
|
|
117
|
+
status_text_primary: $status_text_primary,
|
|
118
|
+
status_text_success: $status_text_success,
|
|
119
|
+
status_text_error: $status_text_error,
|
|
120
|
+
status_text_warning: $status_text_warning,
|
|
121
|
+
status_text_info: $status_text_info,
|
|
122
|
+
status_text_notification: $status_text_notification,
|
|
123
|
+
status_text_neutral_dark: $status_text_neutral_dark,
|
|
124
|
+
status_text_primary_dark: $status_text_primary_dark,
|
|
125
|
+
status_text_success_dark: $status_text_success_dark,
|
|
126
|
+
status_text_error_dark: $status_text_error_dark,
|
|
127
|
+
status_text_warning_dark: $status_text_warning_dark,
|
|
128
|
+
status_text_info_dark: $status_text_info_dark
|
|
129
|
+
);
|
|
130
|
+
|
|
131
|
+
/* Status Background colors ----------------------*/
|
|
132
|
+
$status_background_neutral: #EDEDED !default;
|
|
133
|
+
$status_background_primary: #E5EEFA !default;
|
|
134
|
+
$status_background_success: #E0F0E8 !default;
|
|
135
|
+
$status_background_error: #FBE5E7 !default;
|
|
136
|
+
$status_background_warning: #FBF5E3 !default;
|
|
137
|
+
$status_background_info: #DEF8FC !default;
|
|
138
|
+
$status_background_notification: #0056CF !default;
|
|
139
|
+
$status_background_notificationError: #DA0014 !default;
|
|
140
|
+
|
|
141
|
+
$status_background_neutral_hover: #E3E3E3 !default;
|
|
142
|
+
$status_background_primary_hover: #CEE0F7 !default;
|
|
143
|
+
$status_background_success_hover: #CDEADB !default;
|
|
144
|
+
$status_background_error_hover: #F9CDD1 !default;
|
|
145
|
+
$status_background_warning_hover: #FAEDC7 !default;
|
|
146
|
+
$status_background_info_hover: #C4F2F7 !default;
|
|
147
|
+
|
|
148
|
+
$status_background_dark: #231E3D !default;
|
|
149
|
+
$status_background_notification_dark: #0E89FF !default;
|
|
150
|
+
$status_background_notificationError_dark: #FF4A50 !default;
|
|
151
|
+
|
|
152
|
+
$status_background_neutral_hover_dark: #292543 !default;
|
|
153
|
+
$status_background_primary_hover_dark: #0B2137 !default;
|
|
154
|
+
$status_background_success_hover_dark: #1C2B25 !default;
|
|
155
|
+
$status_background_error_hover_dark: #2E1F1F !default;
|
|
156
|
+
$status_background_warning_hover_dark: #2B261D !default;
|
|
157
|
+
$status_background_info_hover_dark: #212645 !default;
|
|
158
|
+
|
|
159
|
+
$accessible_status_background_colors: (
|
|
160
|
+
status_background_neutral: $status_background_neutral,
|
|
161
|
+
status_background_primary: $status_background_primary,
|
|
162
|
+
status_background_success: $status_background_success,
|
|
163
|
+
status_background_error: $status_background_error,
|
|
164
|
+
status_background_warning: $status_background_warning,
|
|
165
|
+
status_background_info: $status_background_info,
|
|
166
|
+
status_background_notification: $status_background_notification,
|
|
167
|
+
status_background_notificationError: $status_background_notificationError,
|
|
168
|
+
status_background_neutral_hover: $status_background_neutral_hover,
|
|
169
|
+
status_background_primary_hover: $status_background_primary_hover,
|
|
170
|
+
status_background_success_hover: $status_background_success_hover,
|
|
171
|
+
status_background_error_hover: $status_background_error_hover,
|
|
172
|
+
status_background_warning_hover: $status_background_warning_hover,
|
|
173
|
+
status_background_info_hover: $status_background_info_hover,
|
|
174
|
+
status_background_dark: $status_background_dark,
|
|
175
|
+
status_background_notification_dark: $status_background_notification_dark,
|
|
176
|
+
status_background_notificationError_dark: $status_background_notificationError_dark,
|
|
177
|
+
status_background_neutral_hover_dark: $status_background_neutral_hover_dark,
|
|
178
|
+
status_background_primary_hover_dark: $status_background_primary_hover_dark,
|
|
179
|
+
status_background_success_hover_dark: $status_background_success_hover_dark,
|
|
180
|
+
status_background_error_hover_dark: $status_background_error_hover_dark,
|
|
181
|
+
status_background_warning_hover_dark: $status_background_warning_hover_dark,
|
|
182
|
+
status_background_info_hover_dark: $status_background_info_hover_dark
|
|
183
|
+
);
|
|
184
|
+
|
|
185
|
+
/* Status Icon Background colors ----------------------*/
|
|
186
|
+
$status_iconBackground_neutral_hover: #EDEDED !default;
|
|
187
|
+
$status_iconBackground_primary_hover: #E5EEFA !default;
|
|
188
|
+
$status_iconBackground_success_hover: #E0F0E8 !default;
|
|
189
|
+
$status_iconBackground_error_hover: #FBE5E7 !default;
|
|
190
|
+
$status_iconBackground_warning_hover: #FBF5E3 !default;
|
|
191
|
+
$status_iconBackground_info_hover: #DEF8FC !default;
|
|
192
|
+
|
|
193
|
+
$status_iconBackground_neutral_hover_dark: #403C57 !default;
|
|
194
|
+
$status_iconBackground_primary_hover_dark: #1B3956 !default;
|
|
195
|
+
$status_iconBackground_success_hover_dark: #2D483D !default;
|
|
196
|
+
$status_iconBackground_error_hover_dark: #522F2F !default;
|
|
197
|
+
$status_iconBackground_warning_hover_dark: #463B27 !default;
|
|
198
|
+
$status_iconBackground_info_hover_dark: #1A4662 !default;
|
|
199
|
+
|
|
200
|
+
$accessible_status_icon_background_colors: (
|
|
201
|
+
status_iconBackground_neutral_hover: $status_iconBackground_neutral_hover,
|
|
202
|
+
status_iconBackground_primary_hover: $status_iconBackground_primary_hover,
|
|
203
|
+
status_iconBackground_success_hover: $status_iconBackground_success_hover,
|
|
204
|
+
status_iconBackground_error_hover: $status_iconBackground_error_hover,
|
|
205
|
+
status_iconBackground_warning_hover: $status_iconBackground_warning_hover,
|
|
206
|
+
status_iconBackground_info_hover: $status_iconBackground_info_hover,
|
|
207
|
+
status_iconBackground_neutral_hover_dark: $status_iconBackground_neutral_hover_dark,
|
|
208
|
+
status_iconBackground_primary_hover_dark: $status_iconBackground_primary_hover_dark,
|
|
209
|
+
status_iconBackground_success_hover_dark: $status_iconBackground_success_hover_dark,
|
|
210
|
+
status_iconBackground_error_hover_dark: $status_iconBackground_error_hover_dark,
|
|
211
|
+
status_iconBackground_warning_hover_dark: $status_iconBackground_warning_hover_dark,
|
|
212
|
+
status_iconBackground_info_hover_dark: $status_iconBackground_info_hover_dark
|
|
213
|
+
);
|
|
214
|
+
|
|
215
|
+
/* Status Border colors ----------------------*/
|
|
216
|
+
$status_border_neutral: #576775 !default;
|
|
217
|
+
$status_border_primary: #0056CF !default;
|
|
218
|
+
$status_border_success: #107441 !default;
|
|
219
|
+
$status_border_error: #BF0012 !default;
|
|
220
|
+
$status_border_warning: #886600 !default;
|
|
221
|
+
$status_border_info: #16747E !default;
|
|
222
|
+
$status_border_notification: #FFFFFF !default;
|
|
223
|
+
|
|
224
|
+
$status_border_neutral_dark: #93A8B8 !default;
|
|
225
|
+
$status_border_primary_dark: #0E89FF !default;
|
|
226
|
+
$status_border_success_dark: #00CA74 !default;
|
|
227
|
+
$status_border_error_dark: #FF4A50 !default;
|
|
228
|
+
$status_border_warning_dark: #F9BB00 !default;
|
|
229
|
+
$status_border_info_dark: #00C4D7 !default;
|
|
230
|
+
|
|
231
|
+
$status_border_focus: #0056CF !default;
|
|
232
|
+
$status_border_focus_dark: #0E89FF !default;
|
|
233
|
+
|
|
234
|
+
$accessible_status_border_colors: (
|
|
235
|
+
status_border_neutral: $status_border_neutral,
|
|
236
|
+
status_border_primary: $status_border_primary,
|
|
237
|
+
status_border_success: $status_border_success,
|
|
238
|
+
status_border_error: $status_border_error,
|
|
239
|
+
status_border_warning: $status_border_warning,
|
|
240
|
+
status_border_info: $status_border_info,
|
|
241
|
+
status_border_notification: $status_border_notification,
|
|
242
|
+
status_border_neutral_dark: $status_border_neutral_dark,
|
|
243
|
+
status_border_primary_dark: $status_border_primary_dark,
|
|
244
|
+
status_border_success_dark: $status_border_success_dark,
|
|
245
|
+
status_border_error_dark: $status_border_error_dark,
|
|
246
|
+
status_border_warning_dark: $status_border_warning_dark,
|
|
247
|
+
status_border_info_dark: $status_border_info_dark,
|
|
248
|
+
status_border_focus: $status_border_focus,
|
|
249
|
+
status_border_focus_dark: $status_border_focus_dark
|
|
250
|
+
);
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
#{"" + $name}: $color;
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
|
+
/* Legacy tokens — from _colors.scss */
|
|
9
10
|
@include export-colors($product_colors);
|
|
10
11
|
@include export-colors($status_colors);
|
|
11
12
|
@include export-colors($data_colors);
|
|
@@ -23,4 +24,13 @@
|
|
|
23
24
|
@include export-colors($category_colors);
|
|
24
25
|
gradient_start: $gradient_start;
|
|
25
26
|
gradient_end: $gradient_end;
|
|
27
|
+
/* Accessible tokens — from _colors_accessible.scss */
|
|
28
|
+
@include export-colors($accessible_text_colors);
|
|
29
|
+
@include export-colors($accessible_input_text_colors);
|
|
30
|
+
@include export-colors($accessible_input_background_colors);
|
|
31
|
+
@include export-colors($accessible_input_border_colors);
|
|
32
|
+
@include export-colors($accessible_status_text_colors);
|
|
33
|
+
@include export-colors($accessible_status_background_colors);
|
|
34
|
+
@include export-colors($accessible_status_icon_background_colors);
|
|
35
|
+
@include export-colors($accessible_status_border_colors);
|
|
26
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-
|
|
1
|
+
import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-DYr2qrIf.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-DgqmX9CF.js";import highchartsMore from"highcharts/highcharts-more";import solidGauge from"highcharts/modules/solid-gauge";const barGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"column"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],credits:{enabled:false},legend:{enabled:false,itemStyle:{color:colors.text_lt_light,fill:colors.text_lt_light,fontSize:typography.text_smaller}},xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbBarGraph=props=>{const{aria:aria={},data:data={},id:id,htmlOptions:htmlOptions={},options:options,className:className}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_bar_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbBarGraph />",options);return{}}return Highcharts.merge({},barGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbCircleChartTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},chart:{type:"pie"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{pie:{dataLabels:{enabled:false,connectorShape:"straight",connectorWidth:3,format:"<div>{point.name}</div>",style:{fontFamily:typography.font_family_base,fontSize:typography.text_smaller,color:colors.text_lt_light,fontWeight:typography.regular,textOutline:"2px $white"}},innerSize:"50%",borderColor:"",borderWidth:null,colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7]}},legend:{layout:"horizontal",align:"center",verticalAlign:"bottom",itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},credits:{enabled:false}};const PbCircleChart=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_circle_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbCircleChart />",options);return{}}return Highcharts.merge({},pbCircleChartTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbGaugeGraphTheme={title:{text:"",style:{fontFamily:typography.font_family_base,fontSize:typography.text_larger}},chart:{type:"solidgauge",events:{render(){this.container;const arc=this.container.querySelector("path.gauge-pane");if(arc)arc.setAttribute("stroke-linejoin","round")}}},pane:{size:"90%",startAngle:-100,endAngle:100,background:[{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane",borderColor:colors.border_light,borderRadius:"50%"}]},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},yAxis:{min:0,max:100,lineWidth:0,tickPositions:[]},plotOptions:{solidgauge:{borderColor:colors.data_1,borderWidth:20,color:colors.data_1,radius:90,innerRadius:"90%",y:-26,dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:'<span class="fix">{y:,f}</span>',style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}},credits:{enabled:false}};const PbGaugeChart=props=>{const{aria:aria={},className:className,data:data={},htmlOptions:htmlOptions={},id:id,ref:ref,options:options={}}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_gauge_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbGaugeGraphTheme,options)}),[options]);highchartsMore(Highcharts);solidGauge(Highcharts);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,ref:ref,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbLineGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"line"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{line:{dataLabels:{enabled:false}}},credits:{enabled:false},legend:{enabled:false,itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,tickPixelInterval:50,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbLineGraph=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_line_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbLineGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};export{PbBarGraph as P,PbCircleChart as a,PbGaugeChart as b,PbLineGraph as c};
|