pixel-react 1.4.9 → 1.5.1
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.
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/types.d.ts +12 -0
- package/lib/index.d.ts +7 -1
- package/lib/index.esm.js +86 -44
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +86 -44
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/icons/approval_pending.svg +8 -0
- package/src/assets/icons/configuration.svg +3 -0
- package/src/assets/icons/defects.svg +8 -0
- package/src/assets/icons/element.svg +4 -0
- package/src/assets/icons/project_element.svg +4 -0
- package/src/assets/icons/step_group.svg +10 -0
- package/src/assets/icons/variable.svg +3 -0
- package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +2 -0
- package/src/components/AppHeader/AppHeader.scss +132 -101
- package/src/components/AppHeader/AppHeader.stories.tsx +13 -10
- package/src/components/AppHeader/AppHeader.tsx +82 -61
- package/src/components/Icon/iconList.ts +14 -1
- package/src/components/MenuOption/MenuOption.scss +17 -0
- package/src/components/MenuOption/MenuOption.tsx +8 -1
- package/src/components/MenuOption/types.ts +12 -0
- package/src/components/Typography/Typography.scss +4 -4
@@ -207,7 +207,13 @@ import RunAutomationScriptsIcon from '../../assets/icons/run_automation_scripts_
|
|
207
207
|
import EyeOpenIcon from '../../assets/icons/eye_open_icon.svg?react';
|
208
208
|
import ReplaceIcon from '../../assets/icons/replace_icon.svg?react';
|
209
209
|
import HeaderPreset from '../../assets/icons/Header_preset.svg?react';
|
210
|
-
|
210
|
+
import ProjectElement from '../../assets/icons/project_element.svg?react';
|
211
|
+
import Element from '../../assets/icons/element.svg?react';
|
212
|
+
import StepGroup from '../../assets/icons/step_group.svg?react';
|
213
|
+
import Variable from '../../assets/icons/variable.svg?react';
|
214
|
+
import Defects from '../../assets/icons/defects.svg?react';
|
215
|
+
import ApprovalPending from '../../assets/icons/approval_pending.svg?react';
|
216
|
+
import Configuration from '../../assets/icons/configuration.svg?react';
|
211
217
|
|
212
218
|
Components['success'] = ToastSuccessIcon;
|
213
219
|
Components['delete_info'] = DeleteInfoIcon;
|
@@ -411,5 +417,12 @@ Components['run_automation_scripts'] = RunAutomationScriptsIcon;
|
|
411
417
|
Components['eye_open_icon'] = EyeOpenIcon;
|
412
418
|
Components['replace_icon']=ReplaceIcon;
|
413
419
|
Components['header_preset'] = HeaderPreset;
|
420
|
+
Components['project_element'] = ProjectElement;
|
421
|
+
Components['element'] = Element;
|
422
|
+
Components['step_group'] = StepGroup;
|
423
|
+
Components['variable'] = Variable;
|
424
|
+
Components['defects'] = Defects;
|
425
|
+
Components['approval_pending'] = ApprovalPending;
|
426
|
+
Components['configuration'] = Configuration;
|
414
427
|
|
415
428
|
export default Components;
|
@@ -54,6 +54,23 @@
|
|
54
54
|
min-width: 112px;
|
55
55
|
width: max-content;
|
56
56
|
border-radius: 4px;
|
57
|
+
&--primary{
|
58
|
+
background: var(--brand-color);
|
59
|
+
color: var(--primary-button-text-color);
|
60
|
+
svg {
|
61
|
+
path {
|
62
|
+
fill: var(--primary-icon-color);
|
63
|
+
}
|
64
|
+
}
|
65
|
+
:hover{
|
66
|
+
color: var(--brand-color);
|
67
|
+
svg {
|
68
|
+
path {
|
69
|
+
fill: var(--brand-color);
|
70
|
+
}
|
71
|
+
}
|
72
|
+
}
|
73
|
+
}
|
57
74
|
.ff-options {
|
58
75
|
@extend .fontSm;
|
59
76
|
cursor: pointer;
|
@@ -46,6 +46,7 @@ const OptionCard = ({
|
|
46
46
|
closeDropdown,
|
47
47
|
zIndex,
|
48
48
|
dropdownPlacement,
|
49
|
+
variant,
|
49
50
|
}: OptionCardProps) => {
|
50
51
|
const themeContext = useContext(ThemeContext);
|
51
52
|
const currentTheme = themeContext?.currentTheme;
|
@@ -95,7 +96,11 @@ const OptionCard = ({
|
|
95
96
|
|
96
97
|
return createPortal(
|
97
98
|
<div
|
98
|
-
className={classNames(
|
99
|
+
className={classNames(
|
100
|
+
'ff-option-card',
|
101
|
+
[{ 'ff-option-card--primary': variant === 'primary' }],
|
102
|
+
currentTheme
|
103
|
+
)}
|
99
104
|
style={{ ...style, zIndex }}
|
100
105
|
ref={optionCardRef}
|
101
106
|
>
|
@@ -121,6 +126,7 @@ const MenuOption = ({
|
|
121
126
|
variant = 'light',
|
122
127
|
zIndex = 99,
|
123
128
|
dropdownPlacement = 'down',
|
129
|
+
optionCardVariant
|
124
130
|
}: MenuOptionProps) => {
|
125
131
|
const [isClicked, setIsClicked] = useState(false);
|
126
132
|
const menuRef = useRef<HTMLDivElement>(null);
|
@@ -202,6 +208,7 @@ const MenuOption = ({
|
|
202
208
|
closeDropdown={closeDropDown}
|
203
209
|
zIndex={zIndex}
|
204
210
|
dropdownPlacement={dropdownPlacement}
|
211
|
+
variant={optionCardVariant}
|
205
212
|
/>
|
206
213
|
)}
|
207
214
|
</div>
|
@@ -91,6 +91,12 @@ interface OptionCardProps {
|
|
91
91
|
* @optional
|
92
92
|
*/
|
93
93
|
dropdownPlacement?: 'top' | 'down' | 'left' | 'right';
|
94
|
+
/**
|
95
|
+
* Variant for backgroung color of options card.
|
96
|
+
* @type {string}
|
97
|
+
* @optional
|
98
|
+
*/
|
99
|
+
variant?: 'primary';
|
94
100
|
}
|
95
101
|
|
96
102
|
interface MenuOptionProps {
|
@@ -194,6 +200,12 @@ interface MenuOptionProps {
|
|
194
200
|
* @optional
|
195
201
|
*/
|
196
202
|
zIndex?: number;
|
203
|
+
/**
|
204
|
+
* Variant for backgroung color of options card.
|
205
|
+
* @type {string}
|
206
|
+
* @optional
|
207
|
+
*/
|
208
|
+
optionCardVariant?: 'primary';
|
197
209
|
}
|
198
210
|
|
199
211
|
interface OptionProps {
|
@@ -8,7 +8,7 @@
|
|
8
8
|
font-weight: 400;
|
9
9
|
src:
|
10
10
|
local('Poppins-Regular'),
|
11
|
-
url(../../fonts/Poppins
|
11
|
+
url(../../assets/fonts/Poppins-Regular.woff2) format('woff2');
|
12
12
|
}
|
13
13
|
|
14
14
|
@font-face {
|
@@ -16,7 +16,7 @@
|
|
16
16
|
font-weight: 500;
|
17
17
|
src:
|
18
18
|
local('Poppins-Medium'),
|
19
|
-
url(../../fonts/Poppins
|
19
|
+
url(../../assets/fonts/Poppins-Medium.woff2) format('woff2');
|
20
20
|
}
|
21
21
|
|
22
22
|
@font-face {
|
@@ -24,7 +24,7 @@
|
|
24
24
|
font-weight: 600;
|
25
25
|
src:
|
26
26
|
local('Poppins-SemiBold'),
|
27
|
-
url(../../fonts/Poppins
|
27
|
+
url(../../assets/fonts/Poppins-SemiBold.woff2) format('woff2');
|
28
28
|
}
|
29
29
|
|
30
30
|
@font-face {
|
@@ -32,7 +32,7 @@
|
|
32
32
|
font-weight: 700;
|
33
33
|
src:
|
34
34
|
local('Poppins-Bold'),
|
35
|
-
url(../../fonts/Poppins
|
35
|
+
url(../../assets/fonts/Poppins-Bold.woff2) format('woff2');
|
36
36
|
}
|
37
37
|
|
38
38
|
.ff-text {
|