pixel-react 1.1.6 → 1.1.8

package/src/components/RadioButton/RadioButton.scss

@@ -12,87 +12,93 @@
   transition: $properties $duration;
 }
 
-.ff-radio {
-  @extend .fontSm;
-  position: relative;
-  color: var(--text-color);
+.ff-radio-wrapper {
   display: flex;
   align-items: center;
-  cursor: pointer;
-  .ff-radio-input {
-    display: none;
-  }
-  .ff-radio-custom {
-    box-sizing: content-box;
-    @include circle(14px, 1px solid var(--radio-button-border)); //todo
-    position: relative;
-    margin-right: 8px;
-    @include transition(border-color, background-color);
+  gap: 4px;
 
-    &::before {
-      content: '';
-      @include circle(12px);
-      background: #fbfdff; //todo
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      @include transition(background-color);
+  .ff-radio {
+    @extend .fontSm;
+    position: relative;
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    .ff-radio-input {
+      display: none;
     }
+    .ff-radio-custom {
+      box-sizing: content-box;
+      @include circle(14px, 1px solid var(--radio-button-border)); //todo
+      position: relative;
+      margin-right: 8px;
+      @include transition(border-color, background-color);
 
-    &::after {
-      content: '';
-      @include circle(16px, 4px solid #f7edff); //todo
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      opacity: 0;
-      @include transition(opacity);
-    }
-  }
+      &::before {
+        content: '';
+        @include circle(12px);
+        background: #fbfdff; //todo
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        @include transition(background-color);
+      }
 
-  &:hover .ff-radio-custom {
-    border: 1px solid var(--brand-color);
-    &::before {
-      background-color: var(--drawer-footer-bg);
-    }
-    &::after {
-      opacity: 1;
-      @include transition(opacity);
+      &::after {
+        content: '';
+        @include circle(16px, 4px solid #f7edff); //todo
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0;
+        @include transition(opacity);
+      }
     }
-  }
-  .ff-radio-input:checked + .ff-radio-custom {
-    border-color: var(--brand-color);
 
-    &::before {
-      background: var(--brand-color);
-      height: 12px;
-      width: 12px;
+    &:hover .ff-radio-custom {
+      border: 1px solid var(--brand-color);
+      &::before {
+        background-color: var(--drawer-footer-bg);
+      }
+      &::after {
+        opacity: 1;
+        @include transition(opacity);
+      }
     }
-  }
-  .ff-radio-input:disabled + .ff-radio-custom {
-    border: 1px solid var(--radio-button-border);
-    &::before {
-      background: var(--drawer-footer-bg);
+    .ff-radio-input:checked + .ff-radio-custom {
+      border-color: var(--brand-color);
+
+      &::before {
+        background: var(--brand-color);
+        height: 12px;
+        width: 12px;
+      }
     }
+    .ff-radio-input:disabled + .ff-radio-custom {
+      border: 1px solid var(--radio-button-border);
+      &::before {
+        background: var(--drawer-footer-bg);
+      }
 
-    &::after {
-      border: 4px solid var(--radio-button-hover);
-      opacity: 0;
-      @include transition(opacity);
+      &::after {
+        border: 4px solid var(--radio-button-hover);
+        opacity: 0;
+        @include transition(opacity);
+      }
     }
-  }
 
-  .ff-radio-input:checked:disabled + .ff-radio-custom {
-    border-color: var(--brand-color);
-    background-color: var(--drawer-footer-bg);
-    &::before {
-      background: var(--brand-color);
+    .ff-radio-input:checked:disabled + .ff-radio-custom {
+      border-color: var(--brand-color);
+      background-color: var(--drawer-footer-bg);
+      &::before {
+        background: var(--brand-color);
+      }
+    }
+    &--disabled {
+      cursor: default;
+      opacity: 0.5;
     }
-  }
-  &--disabled {
-    cursor: default;
-    opacity: 0.5;
   }
 }

package/src/components/RadioButton/RadioButton.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import './RadioButton.scss';
 import classNames from 'classnames';
+import Tooltip from '../Tooltip';
 
 const RadioButton: React.FC<RadioButtonProps> = ({
   label,
@@ -9,23 +10,29 @@ const RadioButton: React.FC<RadioButtonProps> = ({
   onChange,
   value,
   disabled = false,
+  showTooltip = false,
+  tooltipChildren = 'Custom JSX',
+  tooltipTitle = 'Custom JSX',
 }) => {
   return (
-    <label
-      className={classNames('ff-radio', { 'ff-radio--disabled': disabled })}
-    >
-      <input
-        disabled={disabled}
-        type="radio"
-        name={name}
-        value={value}
-        checked={checked}
-        onChange={onChange}
-        className="ff-radio-input"
-      />
-      <span className="ff-radio-custom" />
-      {label}
-    </label>
+    <div className="ff-radio-wrapper">
+      <label
+        className={classNames('ff-radio', { 'ff-radio--disabled': disabled })}
+      >
+        <input
+          disabled={disabled}
+          type="radio"
+          name={name}
+          value={value}
+          checked={checked}
+          onChange={onChange}
+          className="ff-radio-input"
+        />
+        <span className="ff-radio-custom" />
+        {label}
+      </label>
+      {showTooltip && <Tooltip title={tooltipTitle}>{tooltipChildren}</Tooltip>}
+    </div>
   );
 };
 

package/src/components/RadioButton/radioButtonTypes.tsx

@@ -37,4 +37,22 @@ interface RadioButtonProps {
    * Optional.
    */
   disabled?: boolean;
+
+  /**
+   * Indicates whether the radio button show the tooltip.
+   * Optional.
+   */
+  showTooltip?: boolean;
+
+  /**
+   * The content of the tooltip.
+   * Optional.
+   */
+  tooltipChildren?: React.ReactNode;
+
+  /**
+   * The content of the tooltip.
+   * Optional.
+   */
+  tooltipTitle?: React.ReactNode;
 }

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import RadioGroup from './RadioGroup';
 import { useState } from 'react';
+import Icon from '../Icon';
 
 const meta: Meta<typeof RadioGroup> = {
   title: 'Components/RadioGroup',
@@ -57,7 +58,7 @@ export const WithDisabledOption: Story = {
   },
 };
 
-export const DisabledSelcted: Story = {
+export const DisabledSelected: Story = {
   render: () => {
     const radioOptions = [
       { value: 'men', label: 'Men' },
@@ -78,4 +79,44 @@ export const DisabledSelcted: Story = {
     );
   },
 };
+
+export const WithToolTipIcon: Story = {
+  render: () => {
+    const radioOptions = [
+      {
+        value: 'men',
+        label: 'Men',
+        showTooltip: true,
+        tooltipChildren: <Icon name="info" />,
+        tooltipTitle: 'Info',
+      },
+      {
+        value: 'women',
+        label: 'Women',
+        showTooltip: true,
+        disabled: true,
+      },
+      {
+        value: 'other',
+        label: 'Other',
+        showTooltip: true,
+        tooltipChildren: <Icon name="info" />,
+        tooltipTitle: 'Info',
+      },
+    ];
+    const [selectedOption, setSelectedOption] = useState('women');
+    const handleOptionChange = (option: Option) => {
+      setSelectedOption(option.value);
+    };
+    return (
+      <RadioGroup
+        options={radioOptions}
+        onChange={handleOptionChange}
+        name="gender"
+        selectedValue={selectedOption}
+      />
+    );
+  },
+};
+
 export default meta;

package/src/components/RadioGroup/RadioGroup.tsx

@@ -16,6 +16,9 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
         <RadioButton
           key={option.value}
           label={option.label}
+          showTooltip={option?.showTooltip}
+          tooltipChildren={option?.tooltipChildren}
+          tooltipTitle={option?.tooltipTitle}
           name={name}
           value={option.value}
           checked={selectedValue === option.value}

package/src/components/RadioGroup/radioGroupTypes.tsx

@@ -17,6 +17,24 @@ interface Option {
    * Optional.
    */
   disabled?: boolean;
+
+  /**
+   * Indicates whether the radio button show the tooltip.
+   * Optional.
+   */
+  showTooltip?: boolean;
+
+  /**
+   * The content of the tooltip.
+   * Optional.
+   */
+  tooltipChildren?: React.ReactNode;
+
+  /**
+   * The content of the tooltip.
+   * Optional.
+   */
+  tooltipTitle?: React.ReactNode;
 }
 
 /**

package/src/components/Select/Select.scss

@@ -110,7 +110,7 @@
     &-input {
       @extend .fontSm;
       @include absolute-position(6px, auto, auto, auto);
-      width: calc(100% - 38px);
+      width: 100%;
       min-height: calc(100% - 8px);
       padding: 0 28px 0 8px;
       border-radius: 4px;
@@ -118,7 +118,6 @@
       z-index: 100;
       background: transparent;
       outline: none;
-      color: var(--ff-select-text-color);
 
       &:hover {
         ~ .ff-select-label {

package/src/components/Select/Select.tsx

@@ -115,6 +115,7 @@ const Select = ({
   showBorder = true,
   required = false,
   optionsRequired = true,
+  selectedOptionColor = 'var(--ff-select-text-color)',
 }: SelectProps) => {
   const initialState: SelectState = useMemo(
     () => ({
@@ -248,7 +249,7 @@ const Select = ({
   return (
     <div className={classNames(`ff-select-wrapper ${className}`)}>
       <div className="ff-select">
-        <input  
+        <input
           type="text"
           className={classNames('ff-select-input', {
             'ff-select-input--default': !isInputFocused,
@@ -261,7 +262,7 @@ const Select = ({
             'ff-select-input--no-border': !showBorder,
           })}
           // inline css required due to multiple overlay scenarios are present
-          style={{ zIndex: optionZIndex }}
+          style={{ zIndex: optionZIndex, color: selectedOptionColor }}
           onFocus={() => handleSelectAction('FOCUS_INPUT')}
           onMouseEnter={() => handleSelectAction('MOUSE_ENTER')}
           onMouseLeave={() => handleSelectAction('MOUSE_LEAVE')}

package/src/components/Select/types.ts

@@ -64,6 +64,11 @@ export interface SelectProps {
    * optionsRequired:false prop removes options from dropdown & shows static label only
    */
   optionsRequired?: boolean;
+
+  /**
+   * selectedOptionColor prop provides the custom color for the selected option
+   */
+  selectedOptionColor?: string;
 }
 
 export interface DrowdownPosition {

package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss

@@ -1,5 +1,5 @@
 @mixin arrow-style(
-  $size: 7px,
+  $size: 6px,
   $color: var(--ff-connecting-branch-color),
   $z-index: 2
 ) {
@@ -25,7 +25,7 @@
   $size: 5px,
   $color: var(--ff-connecting-branch-color),
   $position: right,
-  $offset: -4px
+  $offset: -2px
 ) {
   position: absolute;
   height: $size;
@@ -43,8 +43,8 @@
   $offset: -1px
 ) {
   position: absolute;
-  height: 7px;
-  width: 7px;
+  height: 5px;
+  width: 5px;
   background-color: var(--ff-connecting-branch-color);
   clip-path: $clip;
   top: calc(25% - 4px);
@@ -180,5 +180,5 @@
 
 .ff-connecting-branch-grid-reverse {
   direction: rtl;
-  margin-left: 1px;
+  margin: 0px 0px 16px 0px;
 }

package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx

@@ -106,7 +106,7 @@ const Branches = ({
                     })}
                   ></div>
                   <MachineInputField
-                    width="180px"
+                    width={`${machineColumnWidth}px`}
                     runCount={runCount}
                     key={ffid()}
                     options={[

package/src/components/Table/Table.scss

@@ -5,6 +5,7 @@
 }
 
 .ff-table {
+  width: 100%;
   th,
   td {
     text-align: left;

package/src/components/Table/Table.tsx

@@ -2,7 +2,12 @@ import './Table.scss';
 // import Checkbox from '../Checkbox';
 import { isFunction } from '../../assets/utils/functionUtils';
 import classNames from 'classnames';
-import { ColumnsProps, DataProps, TableProps ,SelectedItemProps} from './Types';
+import {
+  ColumnsProps,
+  DataProps,
+  TableProps,
+  SelectedItemProps,
+} from './Types';
 import { prepareData } from '../../utils/TableCell/TableCell';
 import Checkbox from '../Checkbox';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
@@ -19,12 +24,14 @@ const Table = ({
   partialSelected = false,
   withFixedHeader = true,
   borderWithRadius = false,
-   headerCheckboxDisabled = false,
+  headerCheckboxDisabled = false,
   // noDataContent,
   // noDataImage,
   // noDataImageSize,
   height = '100%',
   className = '',
+  tableHeadClass = '',
+  tableBodyRowClass = '',
 }: TableProps) => {
   const hanleOnclick = (column: ColumnsProps, row: DataProps) => {
     let { onClick, accessor } = column;
@@ -38,7 +45,7 @@ const Table = ({
     }
   };
   if (checkEmpty(data)) return null;
-  
+
   return (
     <div
       style={{ height: height }}
@@ -49,11 +56,14 @@ const Table = ({
     >
       <table className={classNames(`ff-table`)} cellSpacing={0}>
         <thead
-          className={classNames({
-            'ff-fixed-header': withFixedHeader,
-          })}
+          className={classNames(
+            {
+              'ff-fixed-header': withFixedHeader,
+            },
+            tableHeadClass
+          )}
         >
-          <tr >
+          <tr>
             {/* columns.map((column, index) */}
             {columns.map((column, index) => (
               <th
@@ -62,7 +72,7 @@ const Table = ({
                 style={{ width: column?.width }}
               >
                 <div>
-                   {index === 0 && withCheckbox && (
+                  {index === 0 && withCheckbox && (
                     <span className="ff-table-checkbox">
                       <Checkbox
                         onChange={(e) => {
@@ -75,7 +85,7 @@ const Table = ({
                         disabled={headerCheckboxDisabled}
                       />
                     </span>
-                  )} 
+                  )}
 
                   {column.header}
                 </div>
@@ -86,10 +96,15 @@ const Table = ({
         <tbody>
           {data.length > 0 &&
             data.map((row: any, index: number) => (
-              <tr key={row.id || index} className={classNames(className,{
-                'disabled-row': row.disabled
-              })} 
-              >                
+              <tr
+                key={row.id || index}
+                className={classNames(
+                  tableBodyRowClass,
+                  {
+                    'disabled-row': row.disabled,
+                  },
+                )}
+              >
                 {columns.map((column, i) => {
                   return (
                     <td

package/src/components/Table/Types.ts

@@ -97,4 +97,12 @@ export interface ColumnsProps {
      *  classNames for the table container
      */
     className?: string;
+    /**
+     *  classNames for the table Header container
+     */
+    tableHeadClass?:string;
+    /**
+     *  classNames for the table Row container
+     */
+    tableBodyRowClass?:string;
   }

package/src/components/TableTree/TableTree.scss

@@ -55,8 +55,8 @@
     }
     &:hover {
       background-color: var(--hover-color);
-      .ff-action-section {
-        display: block;
+      .ff-title-action-container {
+        display: flex;
       }
     }
   }
@@ -86,11 +86,22 @@
       font-weight: 400;
       cursor: pointer;
 
+      .ff-title-label {
+        display: flex;
+        align-items: center;
+      }
+
       .ff-hover-icon {
         display: none;
         position: absolute;
         right: 10px;
       }
+
+      // &:hover {
+      //   > .ff-title-action-container {
+      //     display: flex;
+      //   }
+      // }
     }
   }
 
@@ -140,3 +151,8 @@
     }
   }
 }
+
+.ff-title-action-container {
+  display: none;
+  align-items: center;
+}

package/src/components/TableTree/TableTree.stories.tsx

@@ -2,9 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import TableTree from './TableTree';
 import Button from '../Button';
 import treeData from './data';
-import Typography from '../Typography/Typography';
 import Icon from '../Icon/Icon';
-import Chip from '../Chip/Chip';
 import './TableTreeStories.scss';
 
 const meta: Meta<typeof TableTree> = {
@@ -19,52 +17,6 @@ type Story = StoryObj<typeof TableTree>;
 
 // TODO :: below code is a temporary will Modify later
 
-const createTilteAndAction = (row: any): JSX.Element => {
-  if (row?.folder) {
-    return (
-      <div className="ff-parent-node-section">
-        <div className="ff-folder-name-style">
-          <Typography fontWeight="semi-bold">{`${row?.title} - Action Folder lenthy name`}</Typography>
-        </div>
-
-        <Chip
-          fullText={`Sub Modules ${row?.scriptCount}`}
-          label={`SM ${row?.subModuleCount}`}
-          variant="primary"
-        />
-        <Chip
-          fullText={`Scripts Count ${row?.scriptCount}`}
-          label={`SC ${row?.scriptCount}`}
-          variant="primary"
-        />
-        <div className="ff-action-section">
-          <div className="ff-action-menu">
-            <Icon hoverEffect name="logo" />
-            <Icon hoverEffect name="sun_icon" />
-            <Icon hoverEffect name="more" />
-          </div>
-        </div>
-      </div>
-    );
-  } else {
-    return (
-      <div className="ff-parent-node-section">
-        <div className="ff-file-name-style">
-          <Typography>{`${row.title} - Action File with lenthy name`}</Typography>
-        </div>
-        <div className="ff-action-section">
-          <div className="ff-action-menu">
-            <Icon hoverEffect name="file" />
-            <Icon hoverEffect name="manage_apps" />
-            <Icon hoverEffect name="dropzone_icon" />
-            <Icon hoverEffect name="more" />
-          </div>
-        </div>
-      </div>
-    );
-  }
-};
-
 export const Default: Story = {
   args: {
     select: 'radio',
@@ -72,7 +24,7 @@ export const Default: Story = {
       e.preventDefault();
       e.stopPropagation();
 
-      console.log(node, '------------', e);
+      console.log(node, '------------', e.target.value);
     },
     selected: ['MOD1003'],
     treeData,
@@ -82,8 +34,14 @@ export const Default: Story = {
         accessor: 'title',
         width: '400px',
         isClickable: true,
-        cell: (e) => {
-          return createTilteAndAction(e.row);
+        actions: (row) => {
+          console.log('🚀 ~ row:', row);
+          return [
+            <Icon hoverEffect name="file" />,
+            <Icon hoverEffect name="manage_apps" />,
+            <Icon hoverEffect name="dropzone_icon" />,
+            <Icon hoverEffect name="more" />,
+          ];
         },
       },