pixel-react 1.4.9 → 1.5.1

package/src/components/Icon/iconList.ts

@@ -207,7 +207,13 @@ import RunAutomationScriptsIcon from '../../assets/icons/run_automation_scripts_
 import EyeOpenIcon from '../../assets/icons/eye_open_icon.svg?react';
 import ReplaceIcon from '../../assets/icons/replace_icon.svg?react';
 import HeaderPreset from '../../assets/icons/Header_preset.svg?react';
-
+import ProjectElement from '../../assets/icons/project_element.svg?react';
+import Element from '../../assets/icons/element.svg?react';
+import StepGroup from '../../assets/icons/step_group.svg?react';
+import Variable from '../../assets/icons/variable.svg?react';
+import Defects from '../../assets/icons/defects.svg?react';
+import ApprovalPending from '../../assets/icons/approval_pending.svg?react';
+import Configuration from '../../assets/icons/configuration.svg?react';
 
 Components['success'] = ToastSuccessIcon;
 Components['delete_info'] = DeleteInfoIcon;
@@ -411,5 +417,12 @@ Components['run_automation_scripts'] = RunAutomationScriptsIcon;
 Components['eye_open_icon'] = EyeOpenIcon;
 Components['replace_icon']=ReplaceIcon;
 Components['header_preset'] = HeaderPreset;
+Components['project_element'] = ProjectElement;
+Components['element'] = Element;
+Components['step_group'] = StepGroup;
+Components['variable'] = Variable;
+Components['defects'] = Defects;
+Components['approval_pending'] = ApprovalPending;
+Components['configuration'] = Configuration;
 
 export default Components;

package/src/components/MenuOption/MenuOption.scss

@@ -54,6 +54,23 @@
   min-width: 112px;
   width: max-content;
   border-radius: 4px;
+  &--primary{
+    background: var(--brand-color);
+    color: var(--primary-button-text-color);
+    svg {
+      path {
+        fill: var(--primary-icon-color);
+      }
+    }
+    :hover{
+      color: var(--brand-color);
+    svg {
+      path {
+        fill: var(--brand-color);
+      }
+    }
+    }
+  }
   .ff-options {
     @extend .fontSm;
     cursor: pointer;

package/src/components/MenuOption/MenuOption.tsx

@@ -46,6 +46,7 @@ const OptionCard = ({
   closeDropdown,
   zIndex,
   dropdownPlacement,
+  variant,
 }: OptionCardProps) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
@@ -95,7 +96,11 @@ const OptionCard = ({
 
   return createPortal(
     <div
-      className={classNames('ff-option-card', currentTheme)}
+      className={classNames(
+        'ff-option-card',
+        [{ 'ff-option-card--primary': variant === 'primary' }],
+        currentTheme
+      )}
       style={{ ...style, zIndex }}
       ref={optionCardRef}
     >
@@ -121,6 +126,7 @@ const MenuOption = ({
   variant = 'light',
   zIndex = 99,
   dropdownPlacement = 'down',
+  optionCardVariant
 }: MenuOptionProps) => {
   const [isClicked, setIsClicked] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -202,6 +208,7 @@ const MenuOption = ({
           closeDropdown={closeDropDown}
           zIndex={zIndex}
           dropdownPlacement={dropdownPlacement}
+          variant={optionCardVariant}
         />
       )}
     </div>

package/src/components/MenuOption/types.ts

@@ -91,6 +91,12 @@ interface OptionCardProps {
    * @optional
    */
   dropdownPlacement?: 'top' | 'down' | 'left' | 'right';
+  /**
+   * Variant for backgroung color of options card.
+   * @type {string}
+   * @optional
+   */
+  variant?: 'primary';
 }
 
 interface MenuOptionProps {
@@ -194,6 +200,12 @@ interface MenuOptionProps {
    * @optional
    */
   zIndex?: number;
+  /**
+   * Variant for backgroung color of options card.
+   * @type {string}
+   * @optional
+   */
+  optionCardVariant?: 'primary';
 }
 
 interface OptionProps {

package/src/components/Typography/Typography.scss

@@ -8,7 +8,7 @@
   font-weight: 400;
   src:
     local('Poppins-Regular'),
-    url(../../fonts/Poppins/Poppins-Regular.woff2) format('woff2');
+    url(../../assets/fonts/Poppins-Regular.woff2) format('woff2');
 }
 
 @font-face {
@@ -16,7 +16,7 @@
   font-weight: 500;
   src:
     local('Poppins-Medium'),
-    url(../../fonts/Poppins/Poppins-Medium.woff2) format('woff2');
+    url(../../assets/fonts/Poppins-Medium.woff2) format('woff2');
 }
 
 @font-face {
@@ -24,7 +24,7 @@
   font-weight: 600;
   src:
     local('Poppins-SemiBold'),
-    url(../../fonts/Poppins/Poppins-SemiBold.woff2) format('woff2');
+    url(../../assets/fonts/Poppins-SemiBold.woff2) format('woff2');
 }
 
 @font-face {
@@ -32,7 +32,7 @@
   font-weight: 700;
   src:
     local('Poppins-Bold'),
-    url(../../fonts/Poppins/Poppins-Bold.woff2) format('woff2');
+    url(../../assets/fonts/Poppins-Bold.woff2) format('woff2');
 }
 
 .ff-text {