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.
@@ -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('ff-option-card', currentTheme)}
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/Poppins-Regular.woff2) format('woff2');
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/Poppins-Medium.woff2) format('woff2');
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/Poppins-SemiBold.woff2) format('woff2');
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/Poppins-Bold.woff2) format('woff2');
35
+ url(../../assets/fonts/Poppins-Bold.woff2) format('woff2');
36
36
  }
37
37
 
38
38
  .ff-text {