pixel-react 1.6.5 → 1.6.7

package/src/assets/icons/web_service_icon.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.845864 11.5813C0.304532 10.504 0 9.28691 0 7.99998C0 6.71305 0.304532 5.49599 0.845864 4.41866C2.16053 1.79893 4.87199 0 7.99998 0C11.128 0 13.8394 1.79893 15.1541 4.41866C15.6954 5.49599 16 6.71305 16 7.99998C16 8.74122 15.8989 9.45928 15.7098 10.1408C15.5178 9.64596 15.2368 9.19545 14.8865 8.8089C14.9174 8.54352 14.9333 8.27358 14.9333 7.99998C14.9333 7.06079 14.7461 6.16479 14.4074 5.34772C13.5365 5.68532 12.5098 5.95626 11.3765 6.13866C11.4167 6.54759 11.4442 6.96932 11.4575 7.40092C11.0893 7.42113 10.7334 7.48763 10.3956 7.59469C10.386 7.14382 10.3603 6.70393 10.32 6.27892C9.57811 6.35786 8.80052 6.39999 7.99998 6.39999C7.19945 6.39999 6.42185 6.35786 5.67999 6.27892C5.62772 6.83039 5.59999 7.40692 5.59999 7.99998C5.59999 8.59305 5.62772 9.16958 5.67999 9.72105C6.40301 9.64412 7.15998 9.60215 7.93903 9.60006C7.75305 9.93264 7.60993 10.2924 7.51716 10.672C6.93298 10.6849 6.36403 10.7212 5.81545 10.7781C6.01065 11.9786 6.33066 13.0128 6.73812 13.7733C6.94452 14.1589 7.17065 14.4688 7.41812 14.6789C7.60265 14.8357 7.79465 14.9333 7.99998 14.9333C8.20532 14.9333 8.39732 14.8357 8.58185 14.6789L8.58903 14.6728C9.02045 15.1233 9.54884 15.4802 10.1407 15.7099C9.4592 15.8989 8.74129 16 7.99998 16C4.87199 16 2.16053 14.201 0.845864 11.5813ZM1.59253 5.34772C1.25386 6.16479 1.06666 7.06079 1.06666 7.99998C1.06666 8.93918 1.25386 9.83518 1.59253 10.6522C2.46346 10.3146 3.49013 10.0437 4.62346 9.86131C4.56479 9.26505 4.53332 8.64158 4.53332 7.99998C4.53332 7.35839 4.56479 6.73492 4.62346 6.13866C3.49013 5.95626 2.46346 5.68532 1.59253 5.34772ZM13.9205 4.39252C13.0378 2.94773 11.6416 1.8512 9.98665 1.35626C10.0608 1.47146 10.1328 1.5936 10.2021 1.72267C10.657 2.57226 11.0208 3.73279 11.2394 5.08159C12.2357 4.91999 13.1429 4.68479 13.9205 4.39252ZM6.01332 1.35626C4.35839 1.8512 2.96213 2.94773 2.07946 4.39252C2.85706 4.68532 3.76426 4.91999 4.76053 5.08159C4.97919 3.73279 5.34292 2.57226 5.79786 1.72267C5.86719 1.5936 5.93919 1.47146 6.01332 1.35626ZM2.07946 11.6074C2.96213 13.0522 4.35839 14.1488 6.01332 14.6437C5.93919 14.5285 5.86719 14.4064 5.79786 14.2773C5.34292 13.4277 4.97919 12.2672 4.76053 10.9184C3.76426 11.08 2.85706 11.3152 2.07946 11.6074ZM7.99998 1.06666C7.79465 1.06666 7.60265 1.16426 7.41812 1.32106C7.17065 1.5312 6.94452 1.84106 6.73812 2.22666C6.33066 2.9872 6.01065 4.02133 5.81545 5.22186C6.51412 5.29492 7.24585 5.33332 7.99998 5.33332C8.75412 5.33332 9.48585 5.29439 10.1845 5.22186C9.98931 4.02133 9.66931 2.9872 9.26185 2.22666C9.05545 1.84106 8.82932 1.5312 8.58185 1.32106C8.39732 1.16426 8.20532 1.06666 7.99998 1.06666ZM15.3852 11.7118L14.6747 11.839C14.6625 12.1002 14.6178 12.3527 14.5446 12.5925L15.1688 12.9585L14.5112 14.1149L13.8862 13.7485C13.7155 13.9359 13.5218 14.1016 13.3095 14.2404L13.5563 14.9286L12.3204 15.3853L12.0737 14.6971C11.9504 14.7129 11.8246 14.7211 11.6971 14.7211C11.5696 14.7211 11.4438 14.7129 11.3205 14.6971L11.0738 15.3853L9.83792 14.9286L10.0847 14.2404C9.8724 14.1016 9.6787 13.9359 9.50803 13.7485L8.88303 14.1149L8.22538 12.9585L8.84963 12.5925C8.77643 12.3527 8.73174 12.1002 8.71954 11.839L8.00897 11.7118L8.23727 10.3967L8.94724 10.5238C9.04546 10.2861 9.1728 10.064 9.32441 9.86175L8.86061 9.30034L9.86812 8.44189L10.3315 9.00283C10.5528 8.88684 10.7902 8.79826 11.0396 8.74126V8.00904H12.3546V8.74126C12.6039 8.79824 12.8414 8.88684 13.0627 9.00283L13.5261 8.44187L14.5336 9.30031L14.0698 9.86172C14.2214 10.064 14.3487 10.2861 14.447 10.5238L15.1569 10.3967L15.3852 11.7118ZM10.3235 11.6942C10.3235 12.4645 10.9385 13.0889 11.6971 13.0889C12.4557 13.0889 13.0707 12.4645 13.0707 11.6942C13.0707 10.9238 12.4557 10.2994 11.6971 10.2994C10.9385 10.2994 10.3235 10.9238 10.3235 11.6942Z" fill="currentColor"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.845864 11.5813C0.304532 10.504 0 9.28691 0 7.99998C0 6.71305 0.304532 5.49599 0.845864 4.41866C2.16053 1.79893 4.87199 0 7.99998 0C11.128 0 13.8394 1.79893 15.1541 4.41866C15.6954 5.49599 16 6.71305 16 7.99998C16 8.74122 15.8989 9.45928 15.7098 10.1408C15.5178 9.64596 15.2368 9.19545 14.8865 8.8089C14.9174 8.54352 14.9333 8.27358 14.9333 7.99998C14.9333 7.06079 14.7461 6.16479 14.4074 5.34772C13.5365 5.68532 12.5098 5.95626 11.3765 6.13866C11.4167 6.54759 11.4442 6.96932 11.4575 7.40092C11.0893 7.42113 10.7334 7.48763 10.3956 7.59469C10.386 7.14382 10.3603 6.70393 10.32 6.27892C9.57811 6.35786 8.80052 6.39999 7.99998 6.39999C7.19945 6.39999 6.42185 6.35786 5.67999 6.27892C5.62772 6.83039 5.59999 7.40692 5.59999 7.99998C5.59999 8.59305 5.62772 9.16958 5.67999 9.72105C6.40301 9.64412 7.15998 9.60215 7.93903 9.60006C7.75305 9.93264 7.60993 10.2924 7.51716 10.672C6.93298 10.6849 6.36403 10.7212 5.81545 10.7781C6.01065 11.9786 6.33066 13.0128 6.73812 13.7733C6.94452 14.1589 7.17065 14.4688 7.41812 14.6789C7.60265 14.8357 7.79465 14.9333 7.99998 14.9333C8.20532 14.9333 8.39732 14.8357 8.58185 14.6789L8.58903 14.6728C9.02045 15.1233 9.54884 15.4802 10.1407 15.7099C9.4592 15.8989 8.74129 16 7.99998 16C4.87199 16 2.16053 14.201 0.845864 11.5813ZM1.59253 5.34772C1.25386 6.16479 1.06666 7.06079 1.06666 7.99998C1.06666 8.93918 1.25386 9.83518 1.59253 10.6522C2.46346 10.3146 3.49013 10.0437 4.62346 9.86131C4.56479 9.26505 4.53332 8.64158 4.53332 7.99998C4.53332 7.35839 4.56479 6.73492 4.62346 6.13866C3.49013 5.95626 2.46346 5.68532 1.59253 5.34772ZM13.9205 4.39252C13.0378 2.94773 11.6416 1.8512 9.98665 1.35626C10.0608 1.47146 10.1328 1.5936 10.2021 1.72267C10.657 2.57226 11.0208 3.73279 11.2394 5.08159C12.2357 4.91999 13.1429 4.68479 13.9205 4.39252ZM6.01332 1.35626C4.35839 1.8512 2.96213 2.94773 2.07946 4.39252C2.85706 4.68532 3.76426 4.91999 4.76053 5.08159C4.97919 3.73279 5.34292 2.57226 5.79786 1.72267C5.86719 1.5936 5.93919 1.47146 6.01332 1.35626ZM2.07946 11.6074C2.96213 13.0522 4.35839 14.1488 6.01332 14.6437C5.93919 14.5285 5.86719 14.4064 5.79786 14.2773C5.34292 13.4277 4.97919 12.2672 4.76053 10.9184C3.76426 11.08 2.85706 11.3152 2.07946 11.6074ZM7.99998 1.06666C7.79465 1.06666 7.60265 1.16426 7.41812 1.32106C7.17065 1.5312 6.94452 1.84106 6.73812 2.22666C6.33066 2.9872 6.01065 4.02133 5.81545 5.22186C6.51412 5.29492 7.24585 5.33332 7.99998 5.33332C8.75412 5.33332 9.48585 5.29439 10.1845 5.22186C9.98931 4.02133 9.66931 2.9872 9.26185 2.22666C9.05545 1.84106 8.82932 1.5312 8.58185 1.32106C8.39732 1.16426 8.20532 1.06666 7.99998 1.06666ZM15.3852 11.7118L14.6747 11.839C14.6625 12.1002 14.6178 12.3527 14.5446 12.5925L15.1688 12.9585L14.5112 14.1149L13.8862 13.7485C13.7155 13.9359 13.5218 14.1016 13.3095 14.2404L13.5563 14.9286L12.3204 15.3853L12.0737 14.6971C11.9504 14.7129 11.8246 14.7211 11.6971 14.7211C11.5696 14.7211 11.4438 14.7129 11.3205 14.6971L11.0738 15.3853L9.83792 14.9286L10.0847 14.2404C9.8724 14.1016 9.6787 13.9359 9.50803 13.7485L8.88303 14.1149L8.22538 12.9585L8.84963 12.5925C8.77643 12.3527 8.73174 12.1002 8.71954 11.839L8.00897 11.7118L8.23727 10.3967L8.94724 10.5238C9.04546 10.2861 9.1728 10.064 9.32441 9.86175L8.86061 9.30034L9.86812 8.44189L10.3315 9.00283C10.5528 8.88684 10.7902 8.79826 11.0396 8.74126V8.00904H12.3546V8.74126C12.6039 8.79824 12.8414 8.88684 13.0627 9.00283L13.5261 8.44187L14.5336 9.30031L14.0698 9.86172C14.2214 10.064 14.3487 10.2861 14.447 10.5238L15.1569 10.3967L15.3852 11.7118ZM10.3235 11.6942C10.3235 12.4645 10.9385 13.0889 11.6971 13.0889C12.4557 13.0889 13.0707 12.4645 13.0707 11.6942C13.0707 10.9238 12.4557 10.2994 11.6971 10.2994C10.9385 10.2994 10.3235 10.9238 10.3235 11.6942Z" fill="currentColor"/>
+</svg>

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import Accordion from './Accordion';
 import Icon from '../Icon';
+import React from 'react';
 
 const meta: Meta<typeof Accordion> = {
   title: 'Components/Accordion',
@@ -14,6 +15,9 @@ const meta: Meta<typeof Accordion> = {
 type Story = StoryObj<typeof Accordion>;
 const defaultArgs = {
   headerTitle: 'Accordion',
+  accordionStateIconName : 'arrow_down',
+  AccordionStateIconWidth:4,
+  AccordionStateIconHeight:8,
 };
 
 export const SampleAccordion: Story = {

package/src/components/Accordion/Accordion.tsx

@@ -16,6 +16,9 @@ const Accordion = ({
   accordionContent = <>This is accordion content</>,
   disable = false,
   disableInfoMessage = '',
+  accordionStateIconName = 'arrow_down',
+  AccordionStateIconWidth=12,
+  AccordionStateIconHeight=8,
 }: AccordionProps) => {
   const [isAccordionExpanded, setIsAccordionExpanded] = useState(true);
 
@@ -45,9 +48,12 @@ const Accordion = ({
         </Tooltip>
 
         <Icon
-          name={'arrow_down'}
+          name={accordionStateIconName}
           hoverEffect={false}
           className={`accordion-arrow  ${isAccordionExpanded && 'expanded'}`}
+          width={AccordionStateIconWidth}
+          height={AccordionStateIconHeight}
+          color='var(--table-with-accordion-icon-color)'
         />
       </div>
       {!disable && isAccordionExpanded && (

package/src/components/Accordion/types.ts

@@ -25,4 +25,16 @@ export interface AccordionProps {
    * Info message to user for disabling accordion
    */
   disableInfoMessage?: string;
+  /**
+   * Icon name for the Accordion state like expand and collapse
+   */
+  accordionStateIconName?: string; 
+  /**
+     * Accordion collapse and expand Icon width
+     */
+  AccordionStateIconWidth:number,
+  /**
+   * Accordion collapse and expand Icon height
+   */
+  AccordionStateIconHeight:number,
 }

package/src/components/AddVariables/AddVariables.scss

@@ -0,0 +1,14 @@
+.ff-add-variable-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+  .ff-add-variable-input {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+  }
+}

package/src/components/AddVariables/AddVariables.stories.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import AddVariables from './AddVariables';
+import { AddVariableProps } from './types';
+import { variableList } from '../Editor/constants';
+
+export default {
+  title: 'Components/AddVariables',
+  component: AddVariables,
+  args: {
+    label: 'Add Variables',
+    placeholder: 'Enter text',
+    variableList,
+    dropdownWidth: '138px',
+  },
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<AddVariableProps>;
+
+// Wrapper component to handle state inside Storybook stories
+const Template: StoryFn<AddVariableProps> = (args) => {
+  const [inputValue, setInputValue] = useState<string>('');
+
+  return (
+    <AddVariables
+      {...args}
+      onChange={(value: string) => setInputValue(value)}
+      value={inputValue}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  onCreateVariableClick: () => alert('Create Variable clicked'),
+};
+
+// Customized story with pre-filled input value
+export const WithInitialValue = Template.bind({});
+WithInitialValue.args = {
+  inputValue: 'Initial Text with $',
+  onCreateVariableClick: () => alert('Create Variable clicked'),
+};

package/src/components/AddVariables/AddVariables.tsx

@@ -0,0 +1,113 @@
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import VariableDropdown from '../Editor/VariableDropdown';
+import Icon from '../Icon';
+import Input from '../Input';
+import { AddVariableProps, dynamicObject } from './types';
+import './AddVariables.scss';
+import React, { useState, useRef, useEffect } from 'react';
+
+const AddVariables: React.FC<AddVariableProps> = ({
+  label = '',
+  variableList = [],
+  placeholder = 'Enter text',
+  onChange,
+  onCreateVariableClick,
+  value = '',
+  dropdownWidth = 'inherit',
+}) => {
+  const [showDropdown, setShowDropdown] = useState<boolean>(false);
+  const [cursorPosition, setCursorPosition] = useState<number | null>(null);
+  const [showCreateVariableIcon, setShowCreateVariableIcon] =
+    useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (cursorPosition !== null && inputRef.current) {
+      inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
+      inputRef.current.focus();
+    }
+  }, [cursorPosition]);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    onChange?.(value);
+
+    // Show dropdown only if the last character typed is `$`
+    const cursorPos = inputRef.current?.selectionStart || 0;
+    const isDollarTyped = value[cursorPos - 1] === '$';
+
+    if (isDollarTyped) {
+      setShowDropdown(true);
+    } else {
+      setShowDropdown(false); // Close if it's a space or other characters
+    }
+    if (value?.includes('$')) {
+      setShowCreateVariableIcon(false);
+    } else {
+      setShowCreateVariableIcon(true);
+    }
+  };
+
+  const handleDropdownClick = (item: dynamicObject) => {
+    if (inputRef.current) {
+      const { selectionStart, selectionEnd } = inputRef.current;
+      const dollarSyntax = `{${
+        item.type === 'LOCAL'
+          ? 'LV'
+          : item.type === 'GLOBAL'
+          ? 'GV'
+          : item.type === 'GROUP'
+          ? 'SG'
+          : 'PEV'
+      }_${item.name}}`;
+
+      const newValue =
+        value.slice(0, selectionStart || 0) +
+        dollarSyntax +
+        value.slice(selectionEnd || 0);
+
+      onChange(newValue);
+      setCursorPosition((selectionStart || 0) + dollarSyntax.length);
+
+      // Close the dropdown after inserting the variable
+      setShowDropdown(false);
+      onChange?.(newValue);
+    }
+  };
+
+  return (
+    <div className="ff-add-variable-container">
+      <div className="ff-add-variable-input">
+        <Input
+          name="add_variable"
+          ref={inputRef}
+          type="text"
+          value={value}
+          onChange={handleChange}
+          variant="primary"
+          label={label}
+          placeholder={placeholder}
+        />
+        {!checkEmpty(value) && showCreateVariableIcon && (
+          <Icon
+            onClick={onCreateVariableClick}
+            name="add_variable"
+            width={24}
+            height={24}
+            hoverEffect
+          />
+        )}
+      </div>
+      {showDropdown && (
+        <VariableDropdown
+          position="relative"
+          width={dropdownWidth}
+          optionsList={variableList}
+          onSelectVariable={handleDropdownClick}
+        />
+      )}
+    </div>
+  );
+};
+
+export default AddVariables;

package/src/components/AddVariables/index.ts

@@ -0,0 +1 @@
+export { default } from './AddVariables';

package/src/components/AddVariables/types.ts

@@ -0,0 +1,36 @@
+export type dynamicObject = {
+  [key: string]: any;
+};
+
+export interface AddVariableProps {
+  /**
+   * Label for the field
+   */
+  label?: string;
+  /**
+   * List of variables
+   */
+  variableList?: dynamicObject[];
+  /**
+   * Place holder for the input field
+   */
+  placeholder?: string;
+  /**
+   * Function to handle input change
+   * @param value
+   * @returns
+   */
+  onChange: (value: string) => void;
+  /**
+   * Function to handle create variable icon click
+   */
+  onCreateVariableClick?: () => void;
+  /**
+   * Value of the input field
+   */
+  value: string;
+  /**
+   * Width of the dropdown
+   */
+  dropdownWidth?: string;
+}

package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss

@@ -7,7 +7,7 @@
   .ff-all-project-dropdown {
     width: fit-content;
     border-radius: 16px;
-    background-color: var(--ff-all-projects-default-color);
+    // background-color: var(--ff-all-projects-default-color);
     color: var(--expandable-menu-default-bg);
     line-height: 18px;
     @include mixins.center-content();

package/src/components/AppHeader/AppHeader.scss

@@ -32,6 +32,10 @@
           cursor: pointer;
           display: flex;
           position: relative;
+          flex: 1 1 auto;
+          overflow: hidden;
+          transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;
+          max-width: 100px; /* Initial max-width */
           &:not(.ff-app-header-nav-bar-item--selected):hover::after {
             animation: oscillate-border-width 0.5s ease-in-out forwards;
           }
@@ -54,7 +58,9 @@
             padding: 3px;
             background-color: var(--primary-icon-color);
             border-radius: 20px;
-            transition: width 3s ease-in-out;
+            flex-grow: 12; /* Increase size on hover */
+            max-width: 550px;
+            opacity: 1;
             .ff-app-header-nav-bar-item-label {
               box-shadow: 0px 4px 4px 0px #00000040 inset;
               background: linear-gradient(

package/src/components/AppHeader/types.ts

@@ -6,7 +6,6 @@ export interface AppHeaderProps {
   rightContent?: ReactNode;
   projectsList?: optionsType[];
   appHeaderMenuItems: appHeaderMenuItemProps[];
-
   selectedMenu: string;
   selectedSubMenu?: string;
   selectedQuickMenu?: string;
@@ -22,16 +21,16 @@ export interface appHeaderMenuItemProps {
   label: string;
   path?: string;
   disable?: boolean;
-  disableText?:string;
-  hide?:boolean;
+  disableText?: string;
+  hide?: boolean;
   subMenuItems?: appHeaderSubMenuItemProps[];
 }
 export interface appHeaderSubMenuItemProps {
   label: string;
   path?: string;
   disable?: boolean;
-  disableText?:string;
-  hide?:boolean;
+  disableText?: string;
+  hide?: boolean;
   quickMenuItems?: appHeaderQuickMenuItemProps[];
   hiddenMenuItems?: appHeaderHiddenMenuItemProps[];
 }
@@ -40,14 +39,14 @@ export interface appHeaderQuickMenuItemProps {
   path?: string;
   iconName: string;
   disable?: boolean;
-  disableText?:string;
-  hide?:boolean;
+  disableText?: string;
+  hide?: boolean;
 }
 export interface appHeaderHiddenMenuItemProps {
   label: string;
   value: string | string[];
   icon: string;
   disable?: boolean;
-  disableText?:string;
-  hide?:boolean;
+  disableText?: string;
+  hide?: boolean;
 }

package/src/components/Checkbox/Checkbox.scss

@@ -55,10 +55,49 @@
   .ff-checkbox-input:checked + .ff-checkbox-custom {
     background: var(--brand-color);
     border-color: var(--brand-color);
+    &.ff-checkbox-checked {
+      &--passed {
+        background-color: var(--ff-card-passed-status-bg-color);
+        border-color: var(--ff-card-passed-status-bg-color);
+      }
+      &--failed {
+        background-color: var(--ff-card-failed-status-bg-color);
+        border-color: var(--ff-card-failed-status-bg-color);
+      }
+      &--warning {
+        background-color: var(--ff-card-warning-status-bg-color);
+        border-color: var(--ff-card-warning-status-bg-color);
+      }
+      &--skipped {
+        background-color: var(--ff-card-skipped-status-bg-color);
+        border-color: var(--ff-card-skipped-status-bg-color);
+      }
+      &--flaky {
+        background-color: var(-- ff-card-flaky-status-bg-color);
+        border-color: var(-- ff-card-flaky-status-bg-color);
+      }
+    }
   }
 
   .ff-checkbox-input:checked:hover + .ff-checkbox-custom {
     background: var(--brand-color);
+    &.ff-checkbox-checked {
+      &--passed {
+        background: var(--ff-card-passed-status-bg-color);
+      }
+      &--failed {
+        background: var(--ff-card-failed-status-bg-color);
+      }
+      &--warning {
+        background: var(--ff-card-warning-status-bg-color);
+      }
+      &--skipped {
+        background: var(--ff-card-skipped-status-bg-color);
+      }
+      &--flaky {
+        background: var(-- ff-card-flaky-status-bg-color);
+      }
+    }
     &::after {
       opacity: 1;
     }
@@ -86,4 +125,22 @@
       }
     }
   }
+
+  .ff-checkbox {
+    &--passed {
+      border-color: var(--ff-card-passed-status-bg-color);
+    }
+    &--failed {
+      border-color: var(--ff-card-failed-status-bg-color);
+    }
+    &--warning {
+      border-color: var(--ff-card-warning-status-bg-color);
+    }
+    &--skipped {
+      border-color: var(--ff-card-skipped-status-bg-color);
+    }
+    &--flaky {
+      border-color: var(-- ff-card-flaky-status-bg-color);
+    }
+  }
 }

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
+import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import Checkbox from './Checkbox';
-import { useState } from 'react';
 
 const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
@@ -10,38 +10,114 @@ const meta: Meta<typeof Checkbox> = {
     layout: 'centered',
   },
 };
+
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const useCheckboxState = (initialState = false) => {
+  const [checked, setChecked] = useState(initialState);
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+  return { checked, handleChange };
+};
+
+// Story: Default Checkbox
 export const Default: Story = {
-  args: {
-    label: 'Enter label',
+  render: () => {
+    const { checked, handleChange } = useCheckboxState();
+    return <Checkbox label="Default Checkbox" checked={checked} onChange={handleChange} />;
   },
 };
 
+// Story: Partial Checkbox
 export const Partial: Story = {
+  render: () => {
+    const { checked, handleChange } = useCheckboxState();
+    const [partial, setPartial] = useState(true);
+
+    const handlePartialChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setPartial(!event.target.checked);
+      handleChange(event);
+    };
+
+    return (
+      <Checkbox
+        label="Partially Selected Checkbox"
+        partial={partial}
+        checked={checked}
+        onChange={handlePartialChange}
+      />
+    );
+  },
+};
+
+// Story: Disabled Checkbox
+export const Disabled: Story = {
   args: {
-    label: 'Enter label',
-    partial: true,
+    label: 'Disabled Checkbox',
+    disabled: true,
   },
 };
 
-export const Controlled: Story = {
+// Story: Checkbox Variants
+export const Variants: Story = {
   render: () => {
-    const [checked, setChecked] = useState(false);
+    const variants = ['passed', 'failed', 'warning', 'skipped', 'flaky'] as const;
+    const initialStates = variants.reduce((acc, variant) => ({ ...acc, [variant]: false }), {});
+    const [checkedStates, setCheckedStates] = useState(initialStates);
 
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setChecked((event.target as HTMLInputElement).checked);
+    const handleChange = (variant: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
+      setCheckedStates({ ...checkedStates, [variant]: event.target.checked });
     };
 
     return (
-      <Checkbox
-        label="click here to proceed with controlled component"
-        disabled={false}
-        checked={checked}
-        onChange={handleChange}
-      />
+      <div style={{ display: 'flex', gap: '16px' }}>
+        {variants.map((variant) => (
+          <Checkbox
+            key={variant}
+            label={variant.charAt(0).toUpperCase() + variant.slice(1)}
+            variant={variant}
+            checked={checkedStates[variant]}
+            onChange={handleChange(variant)}
+          />
+        ))}
+      </div>
+    );
+  },
+};
+
+// Story: Controlled Checkbox
+export const Controlled: Story = {
+  render: () => {
+    const { checked, handleChange } = useCheckboxState();
+    return <Checkbox label="Controlled Checkbox" checked={checked} onChange={handleChange} />;
+  },
+};
+
+// Story: All Features Showcase
+export const AllFeatures: Story = {
+  render: () => {
+    const { checked: defaultChecked, handleChange: handleDefaultChange } = useCheckboxState();
+    const { checked: partialChecked, handleChange: handlePartialChange } = useCheckboxState(true);
+    const variants = ['passed', 'failed', 'warning', 'skipped', 'flaky'] as const;
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <Checkbox label="Default Checkbox" checked={defaultChecked} onChange={handleDefaultChange} />
+        <Checkbox
+          label="Partially Selected"
+          partial={partialChecked}
+          onChange={handlePartialChange}
+        />
+        <Checkbox label="Disabled Checkbox" disabled />
+        <div style={{ display: 'flex', gap: '16px' }}>
+          {variants.map((variant) => (
+            <Checkbox key={variant} label={variant} variant={variant} />
+          ))}
+        </div>
+      </div>
     );
   },
 };

package/src/components/Checkbox/Checkbox.tsx

@@ -14,6 +14,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
   checked: initialChecked = false,
   partial = false,
   onChange,
+  variant
 }) => {
   const [checked, setChecked] = useState(initialChecked);
 
@@ -34,8 +35,10 @@ const Checkbox: React.FC<CheckboxProps> = ({
       />
       <span
         className={classNames('ff-checkbox-custom', {
-          'ff-checkbox-checked': checked,
+          'ff-checkbox-checked': checked ,
           'ff-storybook-checkbox--partial': partial && !checked,
+          [`ff-checkbox--${variant}`]: variant,
+          [`ff-checkbox-checked--${variant}`]: checked && variant,
         })}
       >
         {checked && (

package/src/components/Checkbox/types.ts

@@ -27,4 +27,8 @@ export interface CheckboxProps {
    * For partially checked checkbox
    */
   partial?: boolean;
+  /**
+   * For variant color
+   */
+  variant?: 'passed' | 'failed' | 'warning' | 'skipped' | 'flaky';
 }