pixel-react 1.0.3 → 1.0.4

package/src/components/Search/Search.scss

@@ -1,87 +1,85 @@
 @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;

package/src/components/StateDropdown/StateDropdown.tsx

@@ -0,0 +1,223 @@
+import Select from './../Select/Select';
+import { StateDropdownProps } from './StateDropdownTypes';
+
+const StateDropdown = ({
+  value,
+  nodeObj,
+  isReviewer = false,
+  isApprovePage = false,
+  handleStateValueClick,
+  handleDropdownOptionsClick,
+  disabled = false,
+  isOnlyReviewer = false,
+  userHasOnlyViewAccess = false,
+}: StateDropdownProps) => {
+  let currentState=value.toUpperCase();
+  let content;
+  let options;
+  const isReviewerAndClickedOnReviewState: boolean =
+    isReviewer &&
+    !isApprovePage &&
+    currentState === 'REVIEW' &&
+    !nodeObj;
+  let selectedOption: { label: string; value: string } = {
+    label: '',
+    value: '',
+  };
+
+  if (isOnlyReviewer && !isApprovePage) {
+    options = [
+      {
+        label: 'New',
+        value: 'New',
+      },
+      {
+        label: 'Approve',
+        value: 'Approve',
+      },
+    ];
+  } else if (!isReviewer && !isApprovePage) {
+    options = [
+      {
+        label: currentState === 'REJECTED' ? 'Rejected' : 'New',
+        value: currentState === 'REJECTED' ? 'Rejected' : 'New',
+      },
+      {
+        label: 'Approve',
+        value: 'Approve',
+      },
+    ];
+  } else if (isReviewerAndClickedOnReviewState) {
+    options = [
+      {
+        label: 'Review',
+        value: 'Review',
+      },
+      {
+        label: 'Approve',
+        value: 'Approve',
+      },
+    ];
+  } else if (isReviewer && !isApprovePage) {
+    options = [
+      {
+        label: currentState === 'REJECTED' ? 'Rejected' : 'New',
+        value: currentState === 'REJECTED' ? 'Rejected' : 'New',
+      },
+      {
+        label: 'Review',
+        value: 'Review',
+      },
+      {
+        label: 'Approve',
+        value: 'Approve',
+      },
+    ];
+  } else if (isReviewer && isApprovePage) {
+    options = [
+      {
+        label: 'Review',
+        value: 'Review',
+      },
+      {
+        label: 'Approve',
+        value: 'Approve',
+      },
+      {
+        label: 'Reject',
+        value: 'Reject',
+      },
+    ];
+  } else {
+    options = [
+      {
+        label: 'New',
+        value: 'New',
+      },
+      {
+        label: 'Review',
+        value: 'Review',
+      },
+    ];
+  }
+
+  let handleSelectedOption:(value:string)=>{label:string,value:string}=(value)=>{
+    return {label:value , value: value};
+  };
+  if (currentState === 'REVIEW' && isApprovePage) {
+    selectedOption = handleSelectedOption(value);
+  } else if (currentState === 'REVIEW' && !isApprovePage) {
+    selectedOption = handleSelectedOption(value);
+  } else if (currentState === 'NEW' && !isApprovePage) {
+    selectedOption = handleSelectedOption(value);
+  } else if (currentState === 'REJECTED' && !isApprovePage) {
+    selectedOption = handleSelectedOption(value);
+  } else {
+    selectedOption = handleSelectedOption(value);
+  }
+
+  if (
+    ((currentState === 'NEW' && !isApprovePage) ||
+      (isApprovePage && currentState === 'REVIEW') ||
+      isReviewerAndClickedOnReviewState ||
+      (currentState === 'REJECTED' && !isApprovePage)) &&
+    !userHasOnlyViewAccess
+  ) {
+    content = !disabled ? (
+      <Select
+        label={value}
+        disabled={disabled}
+        onChange={handleDropdownOptionsClick}
+        optionsList={options}
+        selectedOption={selectedOption}
+        showLabel={false}
+        showBorder={true}
+      />
+    ) : (
+      <Select
+        label={value}
+        disabled={true}
+        onChange={handleDropdownOptionsClick}
+        optionsList={options}
+        selectedOption={selectedOption}
+        showLabel={false}
+        showBorder={true}
+      />
+    );
+  } else if (
+    currentState === 'REVIEW' &&
+    (!isApprovePage || userHasOnlyViewAccess)
+  ) {
+    content = (
+      <Select
+        label={value}
+        disabled={true}
+        onChange={handleDropdownOptionsClick}
+        optionsList={options}
+        selectedOption={selectedOption}
+        showLabel={false}
+        showBorder={true}
+      />
+    );
+  } else if (currentState === 'APPROVED') {
+    content = (
+      <Select
+        label={value}
+        disabled={true}
+        onChange={handleDropdownOptionsClick}
+        optionsList={options}
+        selectedOption={selectedOption}
+        showLabel={false}
+        showBorder={true}
+      />
+    );
+  } else if (
+    currentState === 'REJECTED' &&
+    userHasOnlyViewAccess
+  ) {
+    content = (
+      <Select
+        label={value}
+        disabled={true}
+        onChange={handleDropdownOptionsClick}
+        optionsList={options}
+        selectedOption={selectedOption}
+        showLabel={false}
+        showBorder={true}
+      />
+    );
+  } else if (currentState === 'NEW' && userHasOnlyViewAccess) {
+    content = (
+      <Select
+        label={value}
+        disabled={true}
+        onChange={handleDropdownOptionsClick}
+        optionsList={options}
+        selectedOption={selectedOption}
+        showLabel={false}
+        showBorder={true}
+      />
+    );
+  } else {
+      content = '';
+  }
+
+  return (
+    <div
+      onClick={() => {
+        if (
+          value.toLowerCase() === 'review' &&
+          !userHasOnlyViewAccess &&
+          !isApprovePage &&
+          !isReviewer
+        ) {
+          handleStateValueClick();
+        }
+      }}
+    >
+      {content}
+    </div>
+  );
+};
+
+export default StateDropdown;

package/src/components/StateDropdown/StateDropdownTypes.tsx

@@ -0,0 +1,21 @@
+export interface StateDropdownProps{
+
+    value:string;
+
+    nodeObj:{};
+
+    isReviewer:boolean;
+
+    isApprovePage:boolean;
+
+    handleDropdownOptionsClick:()=>void;
+
+    disabled:boolean;
+
+    isOnlyReviewer:boolean;
+
+    userHasOnlyViewAccess:boolean;
+
+    handleStateValueClick:()=>void;
+}
+

package/src/components/StateDropdown/index.ts

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

package/src/components/StatusButton/StatusButton.scss

@@ -0,0 +1,90 @@
+@mixin status-colors($bg-color, $text-color) {
+  background-color: $bg-color;
+  color: $text-color;
+}
+
+.ff-status-button {
+  border: none;
+  border-radius: 4px;
+  padding: 0 4px;
+  cursor: pointer;
+  width: 76px;
+  height: 16px;
+
+  &__text {
+    color: inherit;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 76px;
+    text-transform: capitalize;
+  }
+
+  &--passed {
+    @include status-colors(
+      var(--status-button-bg-passed),
+      var(--status-button-text-passed)
+    );
+  }
+
+  &--failed {
+    @include status-colors(
+      var(--status-button-bg-failed),
+      var(--status-button-text-failed)
+    );
+  }
+
+  &--running {
+    @include status-colors(
+      var(--status-button-bg-running),
+      var(--status-button-text-running)
+    );
+  }
+
+  &--skipped {
+    @include status-colors(
+      var(--status-button-bg-skipped),
+      var(--status-button-text-skipped)
+    );
+  }
+
+  &--warning {
+    @include status-colors(
+      var(--status-button-bg-warning),
+      var(--status-button-text-warning)
+    );
+  }
+
+  &--terminated {
+    @include status-colors(
+      var(--status-button-bg-terminated),
+      var(--status-button-text-terminated)
+    );
+  }
+
+  &--partially-executed {
+    @include status-colors(
+      var(--status-button-bg-partiallyExecuted),
+      var(--status-button-text-partiallyExecuted)
+    );
+  }
+
+  &--aborted {
+    @include status-colors(
+      var(--status-button-bg-aborted),
+      var(--status-button-text-aborted)
+    );
+  }
+
+  &--not-executed {
+    @include status-colors(
+      var(--status-button-bg-notExecuted),
+      var(--status-button-text-notExecuted)
+    );
+  }
+
+  &:disabled {
+    opacity: 50%;
+    cursor: not-allowed;
+  }
+}