pixel-react 1.0.2 → 1.0.4

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;
+  }
+}

package/src/components/StatusButton/StatusButton.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import StatusButton from './StatusButton';
+
+const meta: Meta<typeof StatusButton> = {
+  title: 'Components/StatusButton',
+  component: StatusButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof StatusButton>;
+
+const defaultArgs = {
+  disabled: false,
+};
+
+export const Passed: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Passed',
+    status: 'passed',
+  },
+};
+
+export const Failed: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Failed',
+    status: 'failed',
+  },
+};
+
+export const Running: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Running',
+    status: 'running',
+  },
+};
+
+export const Terminated: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Terminated',
+    status: 'terminated',
+  },
+};
+
+export const Skipped: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Skipped',
+    status: 'skipped',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Warning',
+    status: 'warning',
+  },
+};
+
+export const PartiallyExecuted: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Partially Executed',
+    status: 'partially-executed',
+  },
+};
+
+export const Aborted: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Aborted',
+    status: 'aborted',
+  },
+};
+
+export const NotExecuted: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Not Executed',
+    status: 'not-executed',
+  },
+};
+
+export default meta;

package/src/components/StatusButton/StatusButton.tsx

@@ -0,0 +1,40 @@
+import classNames from 'classnames';
+import './StatusButton.scss';
+import { StatusButtonProps } from './types';
+import Typography from '../Typography';
+
+const StatusButton = ({
+  status = 'passed',
+  label = '',
+  onClick = () => {},
+  className = '',
+  style = {},
+  disabled = false,
+  ...props
+}: StatusButtonProps) => {
+  return (
+    <button
+      className={classNames(
+        'ff-status-button',
+        `ff-status-button--${status}`,
+        className
+      )}
+      style={style}
+      onClick={onClick}
+      disabled={disabled}
+      {...props}
+    >
+      <Typography
+        as="div"
+        fontWeight="semi-bold"
+        lineHeight="16px"
+        textAlign="center"
+        className="ff-status-button__text"
+      >
+        {label}
+      </Typography>
+    </button>
+  );
+};
+
+export default StatusButton;

package/src/components/StatusButton/index.ts

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

package/src/components/StatusButton/types.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+
+export interface StatusButtonProps {
+  /**
+   * Status of the button
+   */
+  status:
+    | 'passed'
+    | 'failed'
+    | 'running'
+    | 'skipped'
+    | 'warning'
+    | 'terminated'
+    | 'partially-executed'
+    | 'aborted'
+    | 'not-executed';
+  /**
+   * Button label (status text)
+   */
+  label?: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /**
+   * Button content
+   */
+  children?: ReactNode;
+  /**
+   * Button id
+   */
+  id?: string;
+  /**
+   * Disabled state
+   */
+  disabled?: boolean;
+  /**
+   * Classname for the button
+   */
+  className?: string;
+  /**
+   * Additional styles for the button
+   */
+  style?: React.CSSProperties;
+}

package/src/components/Table/Table.scss

@@ -1,4 +1,4 @@
-@import '../../assets/styles/_fonts';
+@use '../../assets/styles/_fonts';
 
 .ff-fixed-header-table {
   overflow-y: auto;
@@ -44,7 +44,7 @@
         transform: translateX(20px);
       }
       &:hover {
-        background-color: var(--slider-table-color);
+        background-color: var(--hover-color);
 
         .icon-container {
           opacity: 1;
@@ -75,7 +75,7 @@
     background-color: var(--brand-color);
   }
   .secondary-bg {
-    background-color: var(--primary-icon-color);
+    background-color: var(--slider-table-color);
   }
   .default-bg {
     background-color: transparent;

package/src/components/Tabs/Tabs.scss

@@ -68,6 +68,9 @@
         }
       }
     }
+    &--no-border {
+      border: none;
+    }
   }
 
   .ff-tab-content {

package/src/components/Tabs/Tabs.stories.tsx

@@ -101,4 +101,35 @@ export const TabsWithDisabledTab: Story = {
   },
 };
 
+export const WithoutBorder: Story = {
+  render: () => {
+    const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('0');
+
+    const tabsData = [
+      { label: 'Tab--1', component: <TabContentOne /> },
+      { label: 'Tab--2', component: <TabContentTwo /> },
+      { label: 'Tab--3', component: <TabContentThree /> },
+    ];
+
+    return (
+      <div style={{ display: 'flex', gap: '10px' }}>
+        <Tabs
+          tabsData={tabsData}
+          activeTabId={activeTabIdDefault}
+          onTabClick={setActiveTabIdDefault}
+          noBorder={true}
+        />{' '}
+        <hr />
+        <Tabs
+          variant="capsule"
+          tabsData={tabsData}
+          activeTabId={activeTabIdDefault}
+          onTabClick={setActiveTabIdDefault}
+          noBorder={true}
+        />
+      </div>
+    );
+  },
+};
+
 export default meta;

package/src/components/Tabs/Tabs.tsx

@@ -9,6 +9,7 @@ const Tabs = ({
   tabsData,
   activeTabId,
   onTabClick,
+  noBorder = false,
 }: TabsProps) => {
   const tabs = tabsData.map((tab, index) => ({
     id: index.toString(),
@@ -19,7 +20,11 @@ const Tabs = ({
 
   return (
     <div className={`ff-tabs-container`}>
-      <div className={`ff-tab-row--${variant}`}>
+      <div
+        className={classNames(`ff-tab-row--${variant}`, {
+          'ff-tab-row--no-border': noBorder,
+        })}
+      >
         {tabs.map((tab) => (
           <button
             key={tab.id}

package/src/components/Tabs/types.ts

@@ -10,7 +10,7 @@ export interface Tab {
   /**
    * The content to display when this tab is active.
    */
-  component: JSX.Element | React.ReactNode;
+  component?: JSX.Element | React.ReactNode;
   /**
    * Optional property to indicate if the tab is disabled.
    */
@@ -21,7 +21,7 @@ export interface TabsProps {
   /**
    * An array of tab objects containing label, component, and optional disabled status.
    */
-  tabsData: { label: string; component: JSX.Element; disabled?: boolean }[];
+  tabsData: { label: string; component?: JSX.Element; disabled?: boolean }[];
   /**
    * Defines the styling variant of the tabs.
    */
@@ -35,4 +35,8 @@ export interface TabsProps {
    * onTabClick : function updates the active tab state when a user interacts with the tabs,
    */
   onTabClick: (id: string) => void;
+  /**
+   * noBorder:true , removes the outer border from tabs
+   */
+  noBorder?: boolean;
 }

package/src/components/TextArea/Textarea.scss

@@ -1,5 +1,4 @@
-@use '../../assets/styles/colors' as *;
-@import '../../assets/styles/fonts';
+@use '../../assets/styles/fonts';
 
 .ff-textarea-container {
   display: flex;

package/src/components/Toggle/Toggle.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 $switch-sizes: (
   small: (
     button-size: 16px,
@@ -20,10 +21,10 @@ $switch-sizes: (
 );
 
 @mixin switch-size($size) {
-  $button-size: map-get(map-get($switch-sizes, $size), button-size);
-  $container-width: map-get(map-get($switch-sizes, $size), container-width);
-  $container-height: map-get(map-get($switch-sizes, $size), container-height);
-  $translate-x: map-get(map-get($switch-sizes, $size), translate-x);
+  $button-size: map.get(map.get($switch-sizes, $size), button-size);
+  $container-width: map.get(map.get($switch-sizes, $size), container-width);
+  $container-height: map.get(map.get($switch-sizes, $size), container-height);
+  $translate-x: map.get(map.get($switch-sizes, $size), translate-x);
 
   width: $container-width;
   height: $container-height;

package/src/components/Tooltip/Tooltip.scss

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

package/src/index.ts

@@ -13,6 +13,7 @@ import RadialChart from './components/Charts/RadialChart';
 import ExpandableMenu from './components/ExpandableMenu';
 import Select from './components/Select/Select';
 import TextArea from './components/TextArea';
+import StatusButton from './components/StatusButton';
 
 import MenuOption from './components/MenuOption';
 import Table from './components/Table/Table';
@@ -35,6 +36,7 @@ import Tabs from './components/Tabs';
 import HighlightText from './components/HighlightText';
 import Checkbox from './components/Checkbox';
 import Search from './components/Search/Search';
+import StateDropdown from './components/StateDropdown';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -80,6 +82,9 @@ export {
   Tabs,
   Checkbox,
   Search,
+  StateDropdown,
+  StatusButton,
+
 
   // utils exports
   checkEmpty,