playbook_ui 16.2.0.pre.rc.3 → 16.2.0.pre.rc.4
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_checkbox/_checkbox.scss +1 -1
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +17 -0
- data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +10 -1
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +2 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.html.erb +6 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.jsx +17 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_required_indicator.md +3 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +46 -11
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +3 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +11 -5
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +9 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +15 -10
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +4 -0
- data/app/pb_kits/playbook/pb_dropdown/index.js +132 -79
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +16 -0
- data/app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx +6 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +5 -3
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +7 -0
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +638 -549
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb +3 -3
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx +4 -7
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md +3 -0
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx +4 -4
- data/app/pb_kits/playbook/pb_nav/_item.tsx +5 -3
- data/app/pb_kits/playbook/pb_nav/_nav.scss +82 -3
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.html.erb +24 -0
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.jsx +87 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +2 -6
- data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_nav/item.html.erb +1 -1
- data/app/pb_kits/playbook/pb_nav/item.rb +1 -1
- data/app/pb_kits/playbook/pb_nav/navTypes.ts +1 -0
- data/app/pb_kits/playbook/pb_text_input/text_input.html.erb +10 -10
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +29 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +411 -323
- data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.html.erb +16 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.jsx +23 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_required_indicator.md +3 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +22 -21
- data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +3 -2
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -1
- 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-CG2X7d4a.js → _pb_line_graph-CC2Ywwix.js} +1 -1
- data/dist/chunks/_typeahead-CmMqokN8.js +1 -0
- data/dist/chunks/{globalProps-B_OY_vR9.js → globalProps-DYr2qrIf.js} +1 -1
- data/dist/chunks/lib-DgqmX9CF.js +29 -0
- data/dist/chunks/vendor.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +2 -2
- data/dist/reset.css +1 -1
- data/lib/playbook/forms/builder/form_field_builder.rb +1 -1
- data/lib/playbook/forms/builder/typeahead_field.rb +15 -1
- data/lib/playbook/forms/builder.rb +2 -2
- data/lib/playbook/version.rb +1 -1
- metadata +16 -6
- data/dist/chunks/_typeahead-DjDiMPdY.js +0 -1
- data/dist/chunks/lib-9vEH4omL.js +0 -29
|
@@ -9,6 +9,7 @@ type Props = {
|
|
|
9
9
|
dark?: boolean,
|
|
10
10
|
label: string,
|
|
11
11
|
error?: string,
|
|
12
|
+
requiredIndicator?: boolean,
|
|
12
13
|
},
|
|
13
14
|
}
|
|
14
15
|
|
|
@@ -19,6 +20,7 @@ const TypeaheadControl = (props: Props) => (
|
|
|
19
20
|
error={props.selectProps.error}
|
|
20
21
|
label={props.selectProps.label}
|
|
21
22
|
marginBottom="none"
|
|
23
|
+
requiredIndicator={props.selectProps.requiredIndicator}
|
|
22
24
|
>
|
|
23
25
|
<Flex>
|
|
24
26
|
<components.Control
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'Orange', value: '#FFA500' },
|
|
4
|
+
{ label: 'Red', value: '#FF0000' },
|
|
5
|
+
{ label: 'Green', value: '#00FF00' },
|
|
6
|
+
{ label: 'Blue', value: '#0000FF' },
|
|
7
|
+
]
|
|
8
|
+
%>
|
|
9
|
+
|
|
10
|
+
<%= pb_rails("typeahead", props: {
|
|
11
|
+
id: "typeahead-required-indicator",
|
|
12
|
+
is_multi: false,
|
|
13
|
+
label: "Colors",
|
|
14
|
+
options: options,
|
|
15
|
+
required_indicator: true,
|
|
16
|
+
}) %>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import Typeahead from "../../pb_typeahead/_typeahead"
|
|
3
|
+
|
|
4
|
+
const options = [
|
|
5
|
+
{label: "Orange", value: "#FFA500"},
|
|
6
|
+
{label: "Red", value: "#FF0000"},
|
|
7
|
+
{label: "Green", value: "#00FF00"},
|
|
8
|
+
{label: "Blue", value: "#0000FF"},
|
|
9
|
+
]
|
|
10
|
+
|
|
11
|
+
const TypeaheadRequiredIndicator = (props) => {
|
|
12
|
+
return (
|
|
13
|
+
<Typeahead
|
|
14
|
+
id="typeahead_required_indicator"
|
|
15
|
+
label="Colors"
|
|
16
|
+
options={options}
|
|
17
|
+
requiredIndicator
|
|
18
|
+
{...props}
|
|
19
|
+
/>
|
|
20
|
+
)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export default TypeaheadRequiredIndicator
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
|
|
2
|
+
|
|
3
|
+
You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.
|
|
@@ -19,6 +19,7 @@ examples:
|
|
|
19
19
|
- typeahead_dynamic_options_pure_rails: Dynamic Options (Pure Rails)
|
|
20
20
|
- typeahead_disabled: Disabled
|
|
21
21
|
- typeahead_preserve_input: Preserve Search Input
|
|
22
|
+
- typeahead_required_indicator: Required Indicator
|
|
22
23
|
|
|
23
24
|
react:
|
|
24
25
|
- typeahead_default: Default
|
|
@@ -42,3 +43,4 @@ examples:
|
|
|
42
43
|
- typeahead_truncated_text: Truncated Text
|
|
43
44
|
- typeahead_disabled: Disabled
|
|
44
45
|
- typeahead_preserve_input: Preserve Search Input
|
|
46
|
+
- typeahead_required_indicator: Required Indicator
|
|
@@ -1,21 +1,22 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export {
|
|
3
|
-
export {
|
|
4
|
-
export {
|
|
5
|
-
export {
|
|
6
|
-
export {
|
|
7
|
-
export {
|
|
8
|
-
export {
|
|
9
|
-
export {
|
|
10
|
-
export {
|
|
11
|
-
export {
|
|
12
|
-
export {
|
|
13
|
-
export {
|
|
14
|
-
export {
|
|
15
|
-
export {
|
|
16
|
-
export {
|
|
17
|
-
export {
|
|
18
|
-
export {
|
|
19
|
-
export {
|
|
20
|
-
export {
|
|
21
|
-
export {
|
|
1
|
+
export {default as TypeaheadDefault} from "./_typeahead_default.jsx"
|
|
2
|
+
export {default as TypeaheadWithHighlight} from "./_typeahead_with_highlight.jsx"
|
|
3
|
+
export {default as TypeaheadWithPills} from "./_typeahead_with_pills.jsx"
|
|
4
|
+
export {default as TypeaheadWithPillsAsync} from "./_typeahead_with_pills_async.jsx"
|
|
5
|
+
export {default as TypeaheadWithPillsAsyncUsers} from "./_typeahead_with_pills_async_users.jsx"
|
|
6
|
+
export {default as TypeaheadWithPillsAsyncCustomOptions} from "./_typeahead_with_pills_async_custom_options.jsx"
|
|
7
|
+
export {default as TypeaheadInline} from "./_typeahead_inline.jsx"
|
|
8
|
+
export {default as TypeaheadMultiKit} from "./_typeahead_multi_kit.jsx"
|
|
9
|
+
export {default as TypeaheadCreateable} from "./_typeahead_createable.jsx"
|
|
10
|
+
export {default as TypeaheadAsyncCreateable} from "./_typeahead_async_createable.jsx"
|
|
11
|
+
export {default as TypeaheadErrorState} from "./_typeahead_error_state.jsx"
|
|
12
|
+
export {default as TypeaheadCustomMenuList} from "./_typeahead_custom_menu_list.jsx"
|
|
13
|
+
export {default as TypeaheadMarginBottom} from "./_typeahead_margin_bottom.jsx"
|
|
14
|
+
export {default as TypeaheadWithPillsColor} from "./_typeahead_with_pills_color.jsx"
|
|
15
|
+
export {default as TypeaheadTruncatedText} from "./_typeahead_truncated_text.jsx"
|
|
16
|
+
export {default as TypeaheadReactHook} from "./_typeahead_react_hook.jsx"
|
|
17
|
+
export {default as TypeaheadDisabled} from "./_typeahead_disabled.jsx"
|
|
18
|
+
export {default as TypeaheadPreserveInput} from "./_typeahead_preserve_input.jsx"
|
|
19
|
+
export {default as TypeaheadDefaultValue} from "./_typeahead_default_value.jsx"
|
|
20
|
+
export {default as TypeaheadCustomOptions} from "./_typeahead_custom_options.jsx"
|
|
21
|
+
export {default as TypeaheadInputDisplay} from "./_typeahead_input_display.jsx"
|
|
22
|
+
export {default as TypeaheadRequiredIndicator} from "./_typeahead_required_indicator.jsx"
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<% if object.is_react? %>
|
|
2
2
|
<%= react_component('Typeahead', object.typeahead_react_options) %>
|
|
3
3
|
<% else %>
|
|
4
|
-
<%= pb_content_tag(:div,
|
|
5
|
-
|
|
4
|
+
<%= pb_content_tag(:div, class: object.classname + object.inline_class) do %>
|
|
5
|
+
|
|
6
6
|
<div class="pb_typeahead_wrapper">
|
|
7
7
|
<div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
|
|
8
8
|
<%= pb_rails("icon", props: {
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
required: object.required,
|
|
22
22
|
validation: object.validation,
|
|
23
23
|
label: object.label,
|
|
24
|
+
required_indicator: object.required_indicator,
|
|
24
25
|
id: object.input_options[:id],
|
|
25
26
|
dark: object.dark,
|
|
26
27
|
}) %>
|
|
@@ -60,7 +60,8 @@ module Playbook
|
|
|
60
60
|
default: false
|
|
61
61
|
prop :preserve_search_input, type: Playbook::Props::Boolean,
|
|
62
62
|
default: false
|
|
63
|
-
|
|
63
|
+
prop :required_indicator, type: Playbook::Props::Boolean,
|
|
64
|
+
default: false
|
|
64
65
|
def classname
|
|
65
66
|
default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
|
|
66
67
|
generate_classname("pb_typeahead_kit") + default_margin_bottom
|
|
@@ -107,6 +108,7 @@ module Playbook
|
|
|
107
108
|
truncate: truncate,
|
|
108
109
|
wrapped: wrapped,
|
|
109
110
|
required: required,
|
|
111
|
+
requiredIndicator: required_indicator,
|
|
110
112
|
validation: validation,
|
|
111
113
|
searchContextSelector: search_context_selector,
|
|
112
114
|
optionsByContext: options_by_context,
|
|
@@ -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};
|