playbook_ui 16.1.0.pre.alpha.testingrailsfix14159 → 16.1.0.pre.alpha.2726requiredindicatorpropdropdown14179
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_dropdown/_dropdown.tsx +26 -13
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_required_indicator.html.erb +14 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_required_indicator.jsx +42 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_required_indicator.md +3 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +7 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +2 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +24 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +10 -0
- 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-BKSzddAX.js → _typeahead-CFu6S0am.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 +2 -2
- 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/forms/builder/dropdown_field.rb +7 -1
- data/lib/playbook/version.rb +1 -1
- metadata +9 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: fb74b44f4164ee03ad9876c3f170dbe115b549dad1abd868b2245180c61e394b
|
|
4
|
+
data.tar.gz: 33bd00f036f424cb4826b64a97c605a1e31b4b322b09814521e9cd21e030208f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0425a22be3f96fae0ff798cb508d694651b69bf7d82c4c129541b4156f487147eec3f76d9172869588f28186fc3c7388080e3caabcc0fd1d5b10c1790c9f7ea2
|
|
7
|
+
data.tar.gz: 502eb924a8aee2864623c040796ec60364765e8eeea0f4c695eeb639468b649a01c03c9eb239653a0c225414fa6c82c75072529fea7caab97aec136af064cc8c
|
|
@@ -6,13 +6,14 @@ import { GenericObject } from "../types";
|
|
|
6
6
|
|
|
7
7
|
import Body from '../pb_body/_body';
|
|
8
8
|
import Caption from "../pb_caption/_caption";
|
|
9
|
+
import colors from "../tokens/exports/_colors.module.scss";
|
|
9
10
|
|
|
10
11
|
import DropdownContainer from "./subcomponents/DropdownContainer";
|
|
11
12
|
import DropdownContext from "./context";
|
|
12
13
|
import DropdownOption from "./subcomponents/DropdownOption";
|
|
13
14
|
import DropdownTrigger from "./subcomponents/DropdownTrigger";
|
|
14
15
|
import useDropdown from "./hooks/useDropdown";
|
|
15
|
-
import
|
|
16
|
+
import getQuickPickOptions from "./quickpick";
|
|
16
17
|
|
|
17
18
|
import {
|
|
18
19
|
separateChildComponents,
|
|
@@ -61,6 +62,7 @@ type DropdownProps = {
|
|
|
61
62
|
backgroundColor?: string;
|
|
62
63
|
fontColor?: string;
|
|
63
64
|
};
|
|
65
|
+
requiredIndicator?: boolean;
|
|
64
66
|
};
|
|
65
67
|
|
|
66
68
|
interface DropdownComponent
|
|
@@ -99,6 +101,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
|
|
|
99
101
|
separators = true,
|
|
100
102
|
variant = "default",
|
|
101
103
|
activeStyle,
|
|
104
|
+
requiredIndicator = false
|
|
102
105
|
} = props;
|
|
103
106
|
|
|
104
107
|
const ariaProps = buildAriaProps(aria);
|
|
@@ -459,18 +462,28 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
|
|
|
459
462
|
}}
|
|
460
463
|
>
|
|
461
464
|
{label && (
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
465
|
+
<label
|
|
466
|
+
data-dropdown="pb-dropdown-label"
|
|
467
|
+
htmlFor={selectId}
|
|
468
|
+
onClick={handleLabelClick}
|
|
469
|
+
>
|
|
470
|
+
{requiredIndicator ? (
|
|
471
|
+
<Caption
|
|
472
|
+
className="pb_dropdown_kit_label"
|
|
473
|
+
dark={dark}
|
|
474
|
+
marginBottom="xs"
|
|
475
|
+
>
|
|
476
|
+
{label} <span style={{ color: `${colors.error}` }}>*</span>
|
|
477
|
+
</Caption>
|
|
478
|
+
) : (
|
|
479
|
+
<Caption
|
|
480
|
+
className="pb_dropdown_kit_label"
|
|
481
|
+
dark={dark}
|
|
482
|
+
marginBottom="xs"
|
|
483
|
+
text={label}
|
|
484
|
+
/>
|
|
485
|
+
)}
|
|
486
|
+
</label>
|
|
474
487
|
)}
|
|
475
488
|
<div className={`dropdown_wrapper ${error ? 'error' : ''}`}
|
|
476
489
|
onBlur={() => {
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<%
|
|
2
|
+
options = [
|
|
3
|
+
{ label: 'United States', value: 'unitedStates', id: 'us' },
|
|
4
|
+
{ label: 'Canada', value: 'canada', id: 'ca' },
|
|
5
|
+
{ label: 'Pakistan', value: 'pakistan', id: 'pk' }
|
|
6
|
+
]
|
|
7
|
+
%>
|
|
8
|
+
|
|
9
|
+
<%= pb_rails("dropdown", props: {
|
|
10
|
+
id: "dropdown_required_indicator",
|
|
11
|
+
label: "Select a Country",
|
|
12
|
+
options: options,
|
|
13
|
+
required_indicator: true
|
|
14
|
+
}) %>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import Dropdown from "../../pb_dropdown/_dropdown";
|
|
3
|
+
|
|
4
|
+
const DropdownRequiredIndicator = (props) => {
|
|
5
|
+
const options = [
|
|
6
|
+
{
|
|
7
|
+
label: "United States",
|
|
8
|
+
value: "unitedStates",
|
|
9
|
+
id: "us",
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
label: "Canada",
|
|
13
|
+
value: "canada",
|
|
14
|
+
id: "ca",
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
label: "Pakistan",
|
|
18
|
+
value: "pakistan",
|
|
19
|
+
id: "pk",
|
|
20
|
+
},
|
|
21
|
+
];
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<div>
|
|
25
|
+
<Dropdown
|
|
26
|
+
label="Select a Country"
|
|
27
|
+
options={options}
|
|
28
|
+
requiredIndicator
|
|
29
|
+
{...props}
|
|
30
|
+
>
|
|
31
|
+
{options.map((option) => (
|
|
32
|
+
<Dropdown.Option
|
|
33
|
+
key={option.id}
|
|
34
|
+
option={option}
|
|
35
|
+
/>
|
|
36
|
+
))}
|
|
37
|
+
</Dropdown>
|
|
38
|
+
</div>
|
|
39
|
+
);
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
export default DropdownRequiredIndicator;
|
|
@@ -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.
|
|
@@ -31,6 +31,7 @@ examples:
|
|
|
31
31
|
- dropdown_quickpick_custom_rails: Quick Pick Variant (Custom Quick Pick Dates)
|
|
32
32
|
- dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
|
|
33
33
|
- dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
|
|
34
|
+
- dropdown_required_indicator: Required Indicator
|
|
34
35
|
|
|
35
36
|
react:
|
|
36
37
|
- dropdown_default: Default
|
|
@@ -66,5 +67,4 @@ examples:
|
|
|
66
67
|
- dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
|
|
67
68
|
- dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
|
|
68
69
|
- dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
|
|
69
|
-
|
|
70
|
-
|
|
70
|
+
- dropdown_required_indicator: Required Indicator
|
|
@@ -30,4 +30,5 @@ export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_
|
|
|
30
30
|
export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
|
|
31
31
|
export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
|
|
32
32
|
export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx'
|
|
33
|
-
export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
|
|
33
|
+
export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
|
|
34
|
+
export { default as DropdownRequiredIndicator } from "./_dropdown_required_indicator.jsx";
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
<%= pb_content_tag do %>
|
|
2
2
|
<% if object.label.present? %>
|
|
3
3
|
<label for="<%= object.select_id %>" data-dropdown="pb-dropdown-label">
|
|
4
|
-
|
|
4
|
+
<% if object.required_indicator %>
|
|
5
|
+
<%= pb_rails("caption", props: { margin_bottom: "xs", classname: "pb_dropdown_kit_label", dark: object.dark }) do %>
|
|
6
|
+
<%= object.label %><span style="color: #DA0014;"> *</span>
|
|
7
|
+
<% end %>
|
|
8
|
+
<% else %>
|
|
9
|
+
<%= pb_rails("caption", props: { text: object.label, margin_bottom: "xs", classname: "pb_dropdown_kit_label", dark: object.dark }) %>
|
|
10
|
+
<% end %>
|
|
5
11
|
</label>
|
|
6
12
|
<% end %>
|
|
7
13
|
<div class="dropdown_wrapper<%= error_class %>" style="position: relative">
|
|
@@ -50,6 +50,8 @@ module Playbook
|
|
|
50
50
|
prop :placeholder, type: Playbook::Props::String
|
|
51
51
|
prop :constrain_height, type: Playbook::Props::Boolean,
|
|
52
52
|
default: false
|
|
53
|
+
prop :required_indicator, type: Playbook::Props::Boolean,
|
|
54
|
+
default: false
|
|
53
55
|
|
|
54
56
|
def data
|
|
55
57
|
Hash(prop(:data)).merge(
|
|
@@ -754,4 +754,27 @@ test("customQuickPickDates with timePeriod calculates dates correctly", () => {
|
|
|
754
754
|
|
|
755
755
|
const today = new Date()
|
|
756
756
|
expect(endDate.toDateString()).toBe(today.toDateString())
|
|
757
|
-
})
|
|
757
|
+
})
|
|
758
|
+
|
|
759
|
+
test("requiredIndicator prop renders asterisk when true", () => {
|
|
760
|
+
render(
|
|
761
|
+
<Dropdown
|
|
762
|
+
data={{ testid: testId }}
|
|
763
|
+
label="Required Dropdown"
|
|
764
|
+
options={options}
|
|
765
|
+
requiredIndicator
|
|
766
|
+
>
|
|
767
|
+
{options.map((option) => (
|
|
768
|
+
<Dropdown.Option key={option.id}
|
|
769
|
+
option={option}
|
|
770
|
+
/>
|
|
771
|
+
))}
|
|
772
|
+
</Dropdown>,
|
|
773
|
+
);
|
|
774
|
+
|
|
775
|
+
const kit = screen.getByTestId(testId);
|
|
776
|
+
const label = screen.getByText("Required Dropdown");
|
|
777
|
+
|
|
778
|
+
expect(label).toBeInTheDocument();
|
|
779
|
+
expect(kit).toHaveTextContent("*");
|
|
780
|
+
});
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
<%
|
|
2
|
+
example_dropdown_options = [
|
|
3
|
+
{ label: 'United States', value: 'United States', id: 'us' },
|
|
4
|
+
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
|
5
|
+
{ label: 'Pakistan', value: 'Pakistan', id: 'pk' }
|
|
6
|
+
]
|
|
7
|
+
%>
|
|
8
|
+
|
|
1
9
|
<%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
|
|
2
10
|
<%= form.typeahead :example_typeahead_field, props: { label: true, required: true, required_indicator: true } %>
|
|
3
11
|
<%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
|
|
@@ -12,6 +20,8 @@
|
|
|
12
20
|
<%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
|
|
13
21
|
<%# <%= form.check_box :example_checkbox, props: { label: true, text: "Checkbox Label", required: true, required_indicator: true } %>
|
|
14
22
|
<%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
|
|
23
|
+
<%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true, required_indicator: true } %>
|
|
24
|
+
<%= form.dropdown_field :example_dropdown_2, props: { label: "Dropdown Custom Label", options: example_dropdown_options, required: true, required_indicator: true } %>
|
|
15
25
|
|
|
16
26
|
<%= form.actions do |action| %>
|
|
17
27
|
<%= action.submit %>
|
|
@@ -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};
|