pixel-react 1.0.2 → 1.0.4

package/src/components/Drawer/Drawer.scss

@@ -1,11 +1,10 @@
-@import '../../assets/styles/colors';
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-drawer-container {
   .ff-overlay {
     position: fixed;
     inset: 0;
-    background-color: $drawer-title-color;
+    background-color: var(--drawer-title-color);
     opacity: 0.5;
   }
 
@@ -16,7 +15,7 @@
     top: 0;
     bottom: 0;
     min-width: 450px;
-    background-color: $primary-button-text-color;
+    background-color: var(--primary-button-text-color);
     z-index: 999;
     transform: translateX(100%);
     opacity: 0;
@@ -43,19 +42,19 @@
     &--x-large {
       transition: all 0.4s ease-in-out;
       border-radius: 5px;
-      border: 2px solid $border-color;
+      border: 2px solid var(--border-color);
     }
 
     .ff-drawer-header {
       padding: 10px 8px 10px 8px;
       display: flex;
       gap: 10px;
-      border-bottom: 2px solid $border-color;
+      border-bottom: 2px solid var(--border-color);
 
       .ff-drawer-title {
         @extend .fontSm;
         font-weight: 600;
-        color: $drawer-title-color;
+        color: var(--drawer-title-color);
         display: flex;
         align-items: center;
         gap: 12px;
@@ -75,7 +74,7 @@
 
           .ff-expand-collapse-button {
             cursor: pointer;
-            background-color: $button-bg-color;
+            background-color: var(--button-bg-color);
             outline: none;
             border: none;
             margin: 0;
@@ -91,7 +90,7 @@
     }
 
     .ff-drawer-body {
-      background-color: $drawer-footer-bg;
+      background-color: var(--drawer-footer-bg);
       padding: 8px;
       height: calc(100vh - 76px);
       overflow: hidden auto;
@@ -109,7 +108,7 @@
       padding: 5px 16px 5px 16px;
       display: flex;
       justify-content: space-between;
-      border-top: 2px solid $drawer-footer-border;
+      border-top: 2px solid var(--drawer-footer-border);
 
       .button-container {
         display: flex;

package/src/components/ExpandableMenu/ExpandableMenu.scss

@@ -1,4 +1,4 @@
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-expandable-chip-menu {
   display: inline-flex;

package/src/components/Icon/Icons.scss

@@ -1,4 +1,3 @@
-@import '../../assets/styles/colors';
 
 .ff-icon-container {
   display: flex;
@@ -12,10 +11,10 @@
   box-sizing: content-box;
   &:hover {
     border-radius: 50%;
-    background-color: $drawer-footer-bg;
-    box-shadow: 0px 0px 16px $toggle-strip-shadow;
+    background-color: var(--drawer-footer-bg);
+    box-shadow: 0px 0px 16px var(--toggle-strip-shadow);
     & > svg {
-      color: $brand-color;
+      color: var(--brand-color);
     }
   }
 }
@@ -23,12 +22,12 @@
 .ff-icon-disabled {
   cursor: no-drop;
   & > svg {
-    color: $toggle-strip-color;
+    color: var(--toggle-strip-color);
   }
   &:hover {
     box-shadow: none;
     & > svg {
-      color: $toggle-strip-color;
+      color: var(--toggle-strip-color);
     }
   }
 }

package/src/components/Icon/iconList.ts

@@ -5,7 +5,7 @@ import Logo from '../../assets/icons/logo.svg?react';
 import ArrowUp from '../../assets/icons/arrow_up.svg?react';
 import ArrowRight from '../../assets/icons/arrow_right.svg?react';
 import AccordionHeaderIcon from '../../assets/icons/accordion_header_icon.svg?react';
-import DeleteIcon from '../../assets/icons/delete.svg?react';
+import DeleteInfoIcon from '../../assets/icons/delete_info.svg?react';
 import WarningIcon from '../../assets/icons/warning.svg?react';
 import ToastInfoIcon from '../../assets/icons/info.svg?react';
 import ToastErrorIcon from '../../assets/icons/error.svg?react';
@@ -29,9 +29,20 @@ import WrongMarkIcon from '../../assets/icons/wrong_mark.svg?react';
 import Tick from '../../assets/Icons/tick_icon.svg?react';
 import Search from '../../assets/icons/search.svg?react';
 import Filter from '../../assets/icons/filter.svg?react';
+import Edit from '../../assets/icons/edit_icon.svg?react';
+import ViewIcon from '../../assets/icons/view_icon.svg?react';
+import HideIcon from '../../assets/icons/hide_icon.svg?react';
+import ExportCollection from '../../assets/icons/export_collection_icon.svg?react';
+import RunIcon from '../../assets/icons/run_icon.svg?react';
 
+import ActiveLicenseIcon from '../../assets/icons/active_license_icon.svg?react';
+import ExpiredLicenseIcon from '../../assets/icons/expired_license_icon.svg?react';
+import ExpiringSoonLicenseIcon from '../../assets/icons/expiringSoon_license_icon.svg?react';
+import DeleteIcon from '../../assets/icons/delete.svg?react';
+import DetailsIcon from '../../assets/icons/details.svg?react';
+import ImpactListIcon from '../../assets/icons/impactList.svg?react';
 //icons
-Components['delete'] = DeleteIcon;
+Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
 Components['warning'] = WarningIcon;
 Components['info'] = ToastInfoIcon;
@@ -60,5 +71,16 @@ Components['tick'] = Tick;
 Components['arrow_right'] = ArrowRight;
 Components['search'] = Search;
 Components['filter'] = Filter;
+Components['edit'] = Edit;
+Components['view_icon'] = ViewIcon;
+Components['hide_icon'] = HideIcon;
+Components['export_collection'] = ExportCollection;
+Components['run_icon'] = RunIcon;
+Components['active_license_icon'] = ActiveLicenseIcon;
+Components['expired_license_icon'] = ExpiredLicenseIcon;
+Components['expiringSoon_license_icon'] = ExpiringSoonLicenseIcon;
+Components['delete'] = DeleteIcon;
+Components['details'] = DetailsIcon;
+Components['impactList'] = ImpactListIcon;
 
 export default Components;

package/src/components/Input/Input.stories.tsx

@@ -52,7 +52,7 @@ export const DisabledWithValue: Story = {
 
 export const Controlled: Story = {
   render: () => {
-    const [value, setValue] = useState<string>('');
+    const [value, setValue] = useState('');
     const [error, setError] = useState<boolean>(false);
     const [helperText, setHelperText] = useState<string>();
 

package/src/components/InputWithDropdown/InputWithDropdown.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import InputWithDropdown from './InputWithDropdown';
 import { ChangeEvent, useState } from 'react';
 import { Option } from './types';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 
 const meta: Meta<typeof InputWithDropdown> = {
   title: 'Components/InputWithDropdown',
@@ -51,7 +52,7 @@ export const DisabledWithValue: Story = {
 
 export const Controlled: Story = {
   render: () => {
-    const [value, setValue] = useState<string>('');
+    const [value, setValue] = useState<string | number>('');
     const [error, setError] = useState<boolean>(false);
     const [helperText, setHelperText] = useState<string>('');
 
@@ -76,7 +77,6 @@ export const Controlled: Story = {
       const inputValue = event.target.value;
       setValue(inputValue);
 
-      // Validation logic
       if (event.target) {
         if (inputValue.length <= 0) {
           setError(true);
@@ -111,4 +111,61 @@ export const Controlled: Story = {
   },
 };
 
+export const InputWithStaticLabelWithoutOptions: Story = {
+  render: () => {
+    const [value, setValue] = useState<string | number>('');
+    const [error, setError] = useState<boolean>(false);
+    const [helperText, setHelperText] = useState<string>('');
+
+    const optionsListToPass = [{ label: 'Days', value: 'Days' }];
+
+    const [selectedOption, setSelectedOption] = useState<Option>({
+      label: 'Days',
+      value: 'Days',
+    });
+
+    const onDropdownChangeHandler = (option: Option) => {
+      setSelectedOption(option);
+      setValue('0');
+    };
+
+    const onInputChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
+      const inputValue = event.target.value;
+      setValue(inputValue);
+
+      if (event.target) {
+        if (checkEmpty(inputValue)) {
+          setError(true);
+          setHelperText(`${event.target.name} is required`);
+        } else if (parseInt(inputValue, 10) >= 366) {
+          setError(true);
+          setHelperText(`${event.target.name} should be upto 365`);
+        } else {
+          setError(false);
+          setHelperText('');
+        }
+      }
+    };
+
+    return (
+      <InputWithDropdown
+        {...defaultArgs}
+        name="Duration"
+        label="Duration"
+        placeholder={`Enter Duration here`}
+        value={value}
+        type="number"
+        required={true}
+        error={error}
+        helperText={helperText}
+        optionsList={optionsListToPass}
+        selectedOption={selectedOption}
+        optionsRequired={false}
+        onInputChangeHandler={onInputChangeHandler}
+        onDropdownChangeHandler={onDropdownChangeHandler}
+      />
+    );
+  },
+};
+
 export default meta;

package/src/components/InputWithDropdown/InputWithDropdown.tsx

@@ -18,6 +18,7 @@ const InputWithDropdown = ({
   selectedOption,
   onDropdownChangeHandler = () => {},
   onInputChangeHandler,
+  optionsRequired = true,
 }: InputWithDropdownProps) => {
   return (
     <div
@@ -68,7 +69,8 @@ const InputWithDropdown = ({
           showLabel={false}
           showBorder={false}
           onChange={onDropdownChangeHandler}
-          disabled={disabled}
+          disabled={disabled || !optionsRequired}
+          optionsRequired={optionsRequired}
           className={classNames('ff-floating-dropdown', {
             'ff-floating-dropdown--disabled': !!disabled,
             'ff-floating-dropdown--error': !!error,

package/src/components/InputWithDropdown/types.ts

@@ -107,4 +107,8 @@ export interface InputWithDropdownProps {
    * background of the input field prop
    */
   isBackgroundTransparent?: boolean;
+  /**
+   * optionsRequired:false prop removes options from dropdown & shows static label only
+   */
+  optionsRequired?: boolean;
 }

package/src/components/MenuOption/MenuOption.scss

@@ -1,4 +1,4 @@
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-menu-option-container {
   cursor: pointer;

package/src/components/MenuOption/types.ts

@@ -103,7 +103,7 @@ interface MenuOptionProps {
    * @type {'top' | 'left' | 'right' | 'bottom'}
    * @optional
    */
-  dropdownPlacement?: 'top' | 'left' | 'right' | 'down';
+  dropdownPlacement?: string | 'top' | 'left' | 'right' | 'down';
 
   /**
    * Callback function triggered when the icon is clicked.

package/src/components/MultiSelect/MultiSelect.scss

@@ -1,4 +1,4 @@
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 @mixin flex-center($justify: space-between) {
   display: flex;

package/src/components/RadioButton/RadioButton.scss

@@ -1,5 +1,4 @@
-@import '../../assets/styles/_colors';
-@import '../../assets/styles/_fonts';
+@use '../../assets/styles/_fonts';
 
 @mixin circle($size, $border: none) {
   width: $size;
@@ -16,7 +15,7 @@
 .ff-radio {
   @extend .fontSm;
   position: relative;
-  color: $text-color;
+  color: var(--text-color);
   display: flex;
   align-items: center;
   cursor: pointer;

package/src/components/Search/Search.scss

@@ -1,87 +1,85 @@
-@import '../../assets/styles/fonts';
-
+@use '../../assets/styles/fonts';
 
 .ff-search-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .ff-search-icon {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    .ff-search-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        border: 1px solid var(--border-color);
-        border-radius: 4px;
-        padding: 5px;
-        .ff-icon-container {
-            svg {
-                path {
-                    fill: var(--brand-color)
-                }
-            }
+    justify-content: center;
+    cursor: pointer;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 4px;
+    .ff-icon-container {
+      svg {
+        path {
+          fill: var(--brand-color);
         }
+      }
+    }
+  }
+  .ff-search-input {
+    @extend .fontXs;
+    border: none;
+    color: var(--tooltip-bg-color);
+    line-height: 12px;
+    visibility: hidden;
+    transition: width 0.4s ease;
+    &:focus {
+      outline: none;
+      border: none;
     }
-    .ff-search-input {
-        @extend .fontXs;
-        border: none;
-        color: var(--tooltip-bg-color);
-        line-height: 12px;
-        visibility: hidden;
-        transition: width 0.4s ease;
-        &:focus {
-            outline: none;
-            border: none;
-        }
 
-        &:hover {
-            border: none;
-        }
+    &:hover {
+      border: none;
     }
-    &.disabled {
-        opacity: 0.5;
+  }
+  &.disabled {
+    opacity: 0.5;
+  }
+  &.expanded {
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    .ff-vertical-line {
+      height: 8px;
+      width: 1px;
+      position: relative;
+      right: 2px;
+      border-radius: 1px;
+      margin: 8px 0px;
+      background-color: var(--border-color);
     }
-    &.expanded {
-        border: 1px solid var(--border-color);
-        border-radius: 4px;
-        .ff-vertical-line {
-            height: 8px;
-            width: 1px;
-            position: relative;
-            right: 2px;
-            border-radius: 1px;
-            margin: 8px 0px;
-            background-color: var(--border-color);
-        }
-        .ff-search-input {
-            visibility: visible;
-
-            &::placeholder {
-                color: var(--ff-search-filed-placeholder-text);
-            }
-        }
-        .ff-search-icon {
-            padding: 4px;
-            border: none;
-            cursor: default;
+    .ff-search-input {
+      visibility: visible;
 
-        }
-        .ff-search-clear-button {
-            display: grid;
-            place-items: center;
-            cursor: pointer;
-            width: 22px;
-        }
-        .ff-search-close-icon {
-            margin: 4px;
-            cursor: pointer;
+      &::placeholder {
+        color: var(--ff-search-filed-placeholder-text);
+      }
+    }
+    .ff-search-icon {
+      padding: 4px;
+      border: none;
+      cursor: default;
+    }
+    .ff-search-clear-button {
+      display: grid;
+      place-items: center;
+      cursor: pointer;
+      width: 22px;
+    }
+    .ff-search-close-icon {
+      margin: 4px;
+      cursor: pointer;
 
-            .ff-icon-container {
-                svg {
-                    path {
-                        fill: var(--ff-search-filed-close-Icon)
-                    }
-                }
-            }
+      .ff-icon-container {
+        svg {
+          path {
+            fill: var(--ff-search-filed-close-Icon);
+          }
         }
+      }
     }
+  }
 }

package/src/components/Select/Select.tsx

@@ -114,6 +114,7 @@ const Select = ({
   borderRadius = true,
   showBorder = true,
   required = false,
+  optionsRequired = true,
 }: SelectProps) => {
   const initialState: SelectState = useMemo(
     () => ({
@@ -291,17 +292,18 @@ const Select = ({
             {label}
           </div>
         )}
-
-        <Icon
-          name="arrow_up"
-          height={7}
-          width={12}
-          className={classNames('ff-select-arrow', {
-            'ff-select-arrow--down': isIconClick,
-            'ff-select-arrow--no-label': !showLabel,
-          })}
-          color={iconColor}
-        />
+        {optionsRequired && (
+          <Icon
+            name="arrow_up"
+            height={7}
+            width={12}
+            className={classNames('ff-select-arrow', {
+              'ff-select-arrow--down': isIconClick,
+              'ff-select-arrow--no-label': !showLabel,
+            })}
+            color={iconColor}
+          />
+        )}
         <fieldset
           className={classNames('ff-select-fieldset', {
             'ff-select-fieldset--no-label': !showLabel,
@@ -347,20 +349,22 @@ const Select = ({
         </Typography>
       )}
 
-      <div ref={DropDownRef}>
-        {showOptions &&
-          createPortal(
-            <Dropdown
-              onSelectBlur={onSelectBlur}
-              onSelectOptionSelector={onSelectOptionSelector}
-              dropdownPosition={dropdownPosition}
-              options={options}
-              optionZIndex={optionZIndex}
-              inputRef={InputRef}
-            />,
-            document.body
-          )}
-      </div>
+      {optionsRequired && (
+        <div ref={DropDownRef}>
+          {showOptions &&
+            createPortal(
+              <Dropdown
+                onSelectBlur={onSelectBlur}
+                onSelectOptionSelector={onSelectOptionSelector}
+                dropdownPosition={dropdownPosition}
+                options={options}
+                optionZIndex={optionZIndex}
+                inputRef={InputRef}
+              />,
+              document.body
+            )}
+        </div>
+      )}
     </div>
   );
 };

package/src/components/Select/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode } from 'react';
 
 export interface SelectProps {
   /*
@@ -60,6 +60,10 @@ export interface SelectProps {
    * Provide the boolean value if the select component is required or not
    */
   required?: boolean;
+  /**
+   * optionsRequired:false prop removes options from dropdown & shows static label only
+   */
+  optionsRequired?: boolean;
 }
 
 export interface DrowdownPosition {

package/src/components/StateDropdown/StateDropdown.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import StateDropdown from './StateDropdown';
+
+const meta: Meta<typeof StateDropdown> = {
+  title: 'Components/StateDropdown',
+  component: StateDropdown,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof StateDropdown>;
+
+export const Disable: Story = {
+  args: {
+    value: 'New',
+    handleStateValueClick: () => {},
+    handleDropdownOptionsClick: () => {},
+    isOnlyReviewer: false,
+    nodeObj: { label: 'New', value: 'New' },
+    isReviewer: true,
+    isApprovePage: false,
+    disabled: true,
+    userHasOnlyViewAccess: true,
+  },
+};
+
+export const Review: Story = {
+  args: {
+    value: 'Review',
+    handleStateValueClick: () => {},
+    handleDropdownOptionsClick: () => {},
+    isOnlyReviewer: false,
+    nodeObj: { label: 'Review', value: 'Review' },
+    isReviewer: true,
+    isApprovePage: true,
+    disabled: false,
+    userHasOnlyViewAccess: false,
+  },
+};
+
+export const Reject: Story = {
+  args: {
+    value: 'Rejected',
+    handleStateValueClick: () => {},
+    handleDropdownOptionsClick: () => {},
+    isOnlyReviewer: false,
+    nodeObj: { label: 'Rejected', value: 'Rejected' },
+    isReviewer: false,
+    isApprovePage: false,
+    disabled: false,
+    userHasOnlyViewAccess: false,
+  },
+};
+
+export const Approved: Story = {
+  args: {
+    value: 'Approved',
+    handleStateValueClick: () => {},
+    handleDropdownOptionsClick: () => {},
+    isOnlyReviewer: false,
+    nodeObj: { label: 'Approved', value: 'Approved' },
+    isReviewer: false,
+    isApprovePage: false,
+    disabled: false,
+    userHasOnlyViewAccess: true,
+  },
+};
+
+export const NewState: Story = {
+  render: () => {
+    const value = 'New';
+    const state = {
+      label: 'New',
+      value: 'New',
+    };
+
+    const handleDropdownOptionsClick = () => {};
+
+    const handleStateValueClick = () => {};
+
+    return (
+      <StateDropdown
+        value={value}
+        nodeObj={state}
+        isReviewer={false}
+        isApprovePage={false}
+        handleStateValueClick={handleStateValueClick}
+        handleDropdownOptionsClick={handleDropdownOptionsClick}
+        disabled={false}
+        isOnlyReviewer={false}
+        userHasOnlyViewAccess={false}
+      />
+    );
+  },
+};
+
+export default meta;