pixel-react 1.1.7 → 1.1.9

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" />,
+          ];
         },
       },
 

package/src/components/TableTree/TableTree.tsx

@@ -8,6 +8,7 @@ import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 import Checkbox from '../Checkbox';
 import './TableTree.scss';
 import RadioButton from '../RadioButton';
+import Typography from '../Typography';
 
 interface ColumnDataProps {
   name: string;
@@ -16,6 +17,7 @@ interface ColumnDataProps {
   isClickable?: boolean;
   minWidth?: string;
   cell?: (e: any) => JSX.Element | string | ReactNode;
+  actions?: (e: any) => JSX.Element | string | ReactNode;
 }
 
 interface ObjectProps {
@@ -162,11 +164,22 @@ const TableTree = ({
                 )}
                 {select === 'radio' && (
                   <RadioButton
-                    checked={selected.includes(node.key)}
+                    // checked={selected.includes(node.key)}
+                    name={node.title}
+                    value={node.key}
                     onChange={(e) => handleCheckBoxChange(e, node)}
                   />
                 )}
-                {prepareData(node, column)}
+
+                <Typography className="ff-title-label" fontWeight="medium">
+                  {prepareData(node, column)}
+                </Typography>
+
+                {column.actions && (
+                  <div className="ff-title-action-container">
+                    {column.actions(node)}
+                  </div>
+                )}
               </div>
             </td>
           );

package/src/index.ts

@@ -46,8 +46,10 @@ import Paper from './components/Paper';
 import DashboardDonutChart from './components/Charts/DashboardDonutChart';
 import Recaptcha from './components/FF_Captcha/Recaptcha';
 import NLPInput from './components/NLPInput';
+import IconRadioGroup from './components/IconRadioGroup';
 import MachineInputField from './components/MachineInputField';
 import SequentialConnectingBranch from './components/SequentialConnectingBranch';
+import AttachmentButton from './components/AttachmentButton';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -117,6 +119,8 @@ export {
   NLPInput,
   MachineInputField,
   SequentialConnectingBranch,
+  AttachmentButton,
+  IconRadioGroup,
 
   // utils exports
   checkEmpty,