pixel-react 1.6.0 → 1.6.2

package/src/components/MachineInputField/MachineInputField.scss

@@ -13,7 +13,7 @@
     border-radius: 4px;
     display: flex;
     align-items: center;
-    justify-content: space-around;
+    justify-content: space-between;
 
     .ff-machine-icon-text-wrapper,
     .ff-machine-icon-text-wrapper-reverse {
@@ -23,8 +23,21 @@
       .ff-machine-icon {
         margin-left: 4px;
       }
+
+      .ff-machine-text-reverse,
+      .ff-machine-text {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        min-width: 30px;
+        max-width: 70px;
+      }
+
+      .ff-machine-text-reverse {
+        direction: ltr;
+      }
     }
-    
+
     .ff-machine-icon-text-wrapper-reverse {
       flex-direction: row-reverse;
     }

package/src/components/MachineInputField/MachineInputField.tsx

@@ -18,10 +18,19 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
     ref
   ) => {
     const getIcon: Record<MachineType['type'], string> = {
-      Local: 'browser_stack_icon',
+      Local: 'local',
+      Browserstack: 'browserstack_icon',
+      SauceLabs: 'sause_lab',
+      LambdaTest: 'lambda_icon',
       mac: 'mac_icon',
       android: 'android_icon',
+      linux: 'linux',
       'Google Chrome': 'chrome_icon',
+      'Mozilla Firefox': 'fire_fox',
+      'Microsoft Edge': 'edge',
+      'Internet Explorer': 'internet_explorer',
+      Safari: 'safari_icon',
+      Opera: 'opera',
     };
 
     return (
@@ -53,9 +62,14 @@ const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
                 'ff-machine-icon-text-wrapper-reverse': contentReverse,
               })}
             >
-              <Icon name={getIcon[type]} className="ff-machine-icon" />
+              <Icon
+                name={getIcon[type] || 'local'}
+                className="ff-machine-icon"
+              />
               <Typography
-                className="ff-machine-text"
+                className={classNames('ff-machine-text', {
+                  'ff-machine-text-reverse': contentReverse,
+                })}
                 color="var(--ff-machine-input-field-text-color)"
               >
                 {label}

package/src/components/MachineInputField/types.ts

@@ -1,5 +1,5 @@
 export interface MachineType {
-  type: 'Local' | 'mac' | 'android' | 'Google Chrome';
+  type: string;
   label: string;
 }
 

package/src/components/PopUpModal/PopUpModal.scss

@@ -0,0 +1,36 @@
+.warning_modal_container {
+  height: 100%;
+}
+.warning_modal_content {
+  display: flex;
+  height: 80%;
+  width: 100%;
+}
+.warning_modal_icon {
+  position: relative;
+  bottom: 16px;
+  right: 4px;
+}
+.warning_modal_title_wrapper {
+  line-height: 30px;
+}
+.warning_modal_message_wrapper {
+  padding-top: 8px;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.warning_modal_message {
+  display: flex;
+  flex-direction: column;
+  line-height: 24px;
+}
+.warning_modal_footer_button {
+  height: 20%;
+  width: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: 8px;
+}

package/src/components/PopUpModal/PopUpModal.stories.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import PopUpModal from './PopUpModal';
+import Button from '../Button';
+
+const meta: Meta<typeof PopUpModal> = {
+  title: 'Components/PopUpModal',
+  component: PopUpModal,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof PopUpModal>;
+
+const defaultArgs = {
+    iconName:"license_warning",
+    titleMessage:"Warning!",
+    subTitleMessage:"Unsaved Changes.",
+    modalMessage:"Your web service data will be lost. Are you sure you want to exit?",
+    footerMessage:"How do you want to proceed?",
+    firstButtonLabel:"Cancel",
+    secondButtonLabel:"Continue",
+    buttonVariant:"warning",
+    border:'1px solid var(--warning-modal-border-color)'
+}
+
+export const DefaultModal: Story = {
+  args: {
+    isOpen: true,
+    onClose: () => alert('Closed'),
+    onContinue: () => alert('Continued'),
+    iconName: 'license_warning',
+    titleMessage: 'Warning!',
+    subTitleMessage: 'Unsaved Changes.',
+  },
+};
+
+export const ControlledPopUp: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const handleContinue = () => {
+        alert('Continued!');
+        setIsOpen(false);
+      };
+    return (
+      <>
+        <Button variant="warning" onClick={() => setIsOpen(true)} label='Open PopUp'/>
+        <PopUpModal
+          {...defaultArgs}
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          onContinue={handleContinue}
+        />
+      </>
+    );
+  },
+};
+
+export default meta;

package/src/components/PopUpModal/PopUpModal.tsx

@@ -0,0 +1,85 @@
+import { FC } from 'react';
+import './PopUpModal.scss';
+import Modal from '../Modal';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import Button from '../Button';
+import { PopUpModalProps } from './types';
+
+const PopUpModal: FC<PopUpModalProps> = ({
+  isOpen,
+  onClose,
+  onContinue,
+  titleMessage = 'Warning!',
+  subTitleMessage = 'Unsaved Changes.',
+  iconName,
+  modalMessage = 'Your web service data will be lost. Are you sure you want to exit?',
+  footerMessage = 'How do you want to proceed?',
+  firstButtonLabel = 'Cancel',
+  secondButtonLabel = 'Continue',
+  buttonVariant = 'warning',
+  border = '1px solid var(--warning-modal-border-color)',
+}) => {
+  return (
+    <Modal
+      overlayClassName="custom-overlay"
+      isOpen={isOpen}
+      onClose={onClose}
+      isHeaderDisplayed={false}
+      children={
+        <div className={'warning_modal_container'}>
+          <div className={'warning_modal_content'}>
+            <Icon
+              name={iconName}
+              className={'warning_modal_icon'}
+              width={94}
+              height={94}
+            />
+            <div className={'warning_modal_message'}>
+              <Typography
+                fontSize={20}
+                fontWeight="semi-bold"
+                className="warning_modal_title_wrapper"
+              >
+                {' '}
+                <Typography
+                  color="var(--status-button-bg-warning)"
+                  fontSize={20}
+                  fontWeight="semi-bold"
+                >
+                  {' '}
+                  {titleMessage}{' '}
+                </Typography>{' '}
+                {subTitleMessage}
+              </Typography>
+              <div className="warning_modal_message_wrapper">
+                <Typography fontSize={16}>{modalMessage}</Typography>
+                <Typography fontSize={16}>{footerMessage}</Typography>
+              </div>
+            </div>
+          </div>
+          <div className={'warning_modal_footer_button'}>
+            <Button
+              variant="secondary"
+              label={firstButtonLabel}
+              onClick={onClose}
+            />
+            <Button
+              variant={buttonVariant || 'warning'}
+              label={secondButtonLabel}
+              onClick={onContinue}
+            />
+          </div>
+        </div>
+      }
+      ariaHideApp
+      isFooterDisplayed={false}
+      customWidth="420px"
+      customHeight="226px"
+      boxShadow="0px 1px 4px 0px var(--toaster-boxshadow)"
+      border={border}
+    />
+  );
+};
+
+export default PopUpModal;

package/src/components/PopUpModal/types.ts

@@ -0,0 +1,14 @@
+export interface PopUpModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onContinue?: () => void;
+    titleMessage:string,
+    subTitleMessage?:string,
+    iconName:string,
+    modalMessage:string,
+    footerMessage:string,
+    firstButtonLabel?:string,
+    secondButtonLabel:string,
+    buttonVariant:any,
+    border:string,
+  }

package/src/components/RadioGroup/RadioGroup.scss

@@ -3,3 +3,10 @@
   flex-direction: row;
   gap: 12px;
 }
+.ff-radio-label-wrapper {
+  position: relative;
+  top: 2px;
+}
+.ff-required-asterisk {
+  color: var(--input-error-text-color);
+}

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -121,4 +121,30 @@ export const WithToolTipIcon: Story = {
   },
 };
 
+export const WithLabelled: Story = {
+  render: () => {
+    const [selectedOption, setSelectedOption] = useState('restApi');
+    const radioOptions = [
+      { value: 'restApi', label: 'RestAPI' },
+      { value: 'snippets', label: 'Snippet' },
+      { value: 'history', label: 'History' },
+    ];
+    const handleOptionChange = (option: Option) => {
+      setSelectedOption(option.value);
+    };
+    return (
+      <RadioGroup
+        options={radioOptions}
+        onChange={handleOptionChange}
+        name="option"
+        selectedValue={selectedOption}
+        isAsteriskRequired
+        isLabel
+        label={'Web Services'}
+        classNameForLabel='ff-radio-label-wrapper'
+      />
+    );
+  },
+};
+
 export default meta;

package/src/components/RadioGroup/RadioGroup.tsx

@@ -2,16 +2,32 @@ import React from 'react';
 import RadioButton from '../RadioButton/RadioButton'; // Adjust the import path as necessary
 import './RadioGroup.scss';
 import classNames from 'classnames';
+import Typography from '../Typography';
 
 const RadioGroup: React.FC<RadioGroupProps> = ({
   options,
   name,
   selectedValue,
   onChange,
+  label,
+  isLabel = false,
+  isAsteriskRequired = false,
   className,
+  classNameForLabel,
 }) => {
   return (
     <div className={classNames('ff-radio-group', className)}>
+      {isLabel && (
+        <Typography fontWeight='semi-bold' className={classNames(classNameForLabel)}>
+          {' '}
+          {isAsteriskRequired && (
+            <Typography className={classNames('ff-required-asterisk')}>
+              *{' '}
+            </Typography>
+          )}
+          {label}{' '}
+        </Typography>
+      )}
       {options.map((option) => (
         <RadioButton
           key={option.value}

package/src/components/RadioGroup/radioGroupTypes.tsx

@@ -64,9 +64,33 @@ interface RadioGroupProps {
    */
   onChange?: (option: Option) => void;
 
+   /**
+   * Provides a label at starting position when the string is passed.
+   * Optional.
+   */
+  label?: string,
+
+  /**
+   * if isLabel is true then we can display label if not then extra space is not added.
+   * Optional.
+   */
+  isLabel?: boolean,
+
+  /**
+   * if isAsteriskRequired is true then we can display asterisk if not then extra space is not added.
+   * Optional. 
+   */
+  isAsteriskRequired?:boolean,
+
   /**
    * Additional class names to apply to the radio group for custom styling.
    * Optional.
    */
   className?: string;
+
+  /**
+   * Additional class names to apply to the radio group Label for custom styling.
+   * Optional.
+   */
+  classNameForLabel?:string;
 }

package/src/components/Select/Select.tsx

@@ -142,7 +142,6 @@ const Select: FC<SelectProps> = ({
   }, [showDropdownOptions]);
 
   useEffect(() => {
-    if (checkEmpty(getValue(selectedOption, valueAccessor))) return;
     setSearchedOption(getValue(selectedOption, valueAccessor));
   }, [selectedOption]);
 
@@ -205,8 +204,8 @@ const Select: FC<SelectProps> = ({
             className={classNames('ff-select-labels', {
               'ff-select-labels__active': searchedOption,
             })}
-            fontSize={searchedOption && 8}
-            lineHeight={searchedOption && '8px'}
+            fontSize={searchedOption || showDropdownOptions ? 8 : 12}
+            lineHeight={searchedOption || showDropdownOptions ? '8px' : '12px'}
             required={required}
           >
             {label}

package/src/components/Select/components/Dropdown.tsx

@@ -51,7 +51,7 @@ const Dropdown: FC<DropdownProps> = ({
       return {
         left: positionX,
         top: positionY + heightFromTop,
-        width: width + 28,
+        width: width + 30,
         zIndex: optionZIndex,
         marginLeft: '-2px',
       };
@@ -59,7 +59,7 @@ const Dropdown: FC<DropdownProps> = ({
     return {
       zIndex: optionZIndex,
       left: positionX,
-      width: width + 28,
+      width: width + 30,
       top: positionY - selectInputHeight - dropdownContainerHeight + 4 * margin,
       marginLeft: '-2px',
     };
@@ -67,10 +67,8 @@ const Dropdown: FC<DropdownProps> = ({
 
   const getOptionLabel = (label: any) => {
     if (React.isValidElement(label)) {
-      console.log('test');
       return label;
     }
-    console.log('test112');
     return (
       <Typography
         as="div"
@@ -88,37 +86,39 @@ const Dropdown: FC<DropdownProps> = ({
       ref={optionsWrapperRef}
       style={updateDropdownPosition()}
     >
-      {!checkEmpty(options) ? (
-        options.map((option) => (
-          <div
-            className={classNames(
-              'ff-select-dropdown-option',
-              {
-                'ff-select-dropdown-option__selected':
-                  getValue(option, valueAccessor) === selectedOption,
-              },
-              currentTheme
-            )}
-            key={ffid()}
-            onClick={() => {
-              if ('disable' in option && option['disable']) return;
-              onSelectOptionSelector(option);
-            }}
+      <div>
+        {!checkEmpty(options) ? (
+          options.map((option) => (
+            <div
+              className={classNames(
+                'ff-select-dropdown-option',
+                {
+                  'ff-select-dropdown-option__selected':
+                    getValue(option, valueAccessor) === selectedOption,
+                },
+                currentTheme
+              )}
+              key={ffid()}
+              onClick={() => {
+                if ('disable' in option && option['disable']) return;
+                onSelectOptionSelector(option);
+              }}
+            >
+              {getOptionLabel(getLabel(option, labelAccessor))}
+            </div>
+          ))
+        ) : (
+          <Typography
+            textAlign="center"
+            as="div"
+            lineHeight="32px"
+            color="var(--ff-select-text-color)"
+            className={classNames('ff-select-no-option', currentTheme)}
           >
-            {getOptionLabel(getLabel(option, labelAccessor))}
-          </div>
-        ))
-      ) : (
-        <Typography
-          textAlign="center"
-          as="div"
-          lineHeight="32px"
-          color="var(--ff-select-text-color)"
-          className={classNames('ff-select-no-option', currentTheme)}
-        >
-          No Results found
-        </Typography>
-      )}
+            No Results found
+          </Typography>
+        )}
+      </div>
     </div>
   );
 };

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss

@@ -93,11 +93,20 @@
       .ff-scope-wrapper {
         @include item-center;
         margin-right: 12px;
+
+        .ff-scope-text {
+          text-transform: capitalize;
+          margin: 0;
+        }
       }
 
       .ff-datalist-wrapper {
         @include item-center;
 
+        #ff-sequential-machine-datalist {
+          @include item-center
+        }
+
         .ff-dataset-icon,
         .ff-run-delete-icon,
         .ff-datalist-text {