pixel-react 1.1.9 → 1.2.1

package/src/components/Modal/Modal.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 import './modal.scss';
 import { ModalProps } from './types';
 import { ThemeContext } from '../ThemeProvider/ThemeProvider';
+import classNames from 'classnames';
 
 const Modal: React.FC<ModalProps> = ({
   isOpen,
@@ -54,7 +55,13 @@ const Modal: React.FC<ModalProps> = ({
       onClick={shouldCloseOnOverlayClick ? onClose : undefined}
     >
       <div
-        className={`ff-modal-content ${currentTheme} ${contentClassName || ''}`}
+        className={classNames(
+          `ff-modal-content ${currentTheme} ${contentClassName}`,
+          {
+            'modal-bottom-border': !isFooterDisplayed,
+            'modal-top-border': !isHeaderDisplayed,
+          }
+        )}
         style={{ width: customWidth, height: customHeight }}
         onClick={(e) => e.stopPropagation()}
         aria-label={contentLabel}

package/src/components/Modal/modal.scss

@@ -15,7 +15,6 @@
   background: var(--ff-mini-modal-border);
   position: relative;
   max-width: 100%;
-  border-radius: 12px;
   padding: 8px;
   
   .ff-modal-header {
@@ -24,6 +23,15 @@
   }
 }
 
+.modal-bottom-border {
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+}
+.modal-top-border {
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+
 .ff-modal-footer {
   background-color: var(--expandable-menu-option-bg);
   max-width: 100%;
@@ -35,5 +43,5 @@
   justify-content: end;
   align-items: center;
   gap: 8px;
-  padding: 4px 16px;
+  padding: 4px 8px;
 }

package/src/components/Select/Select.stories.tsx

@@ -17,10 +17,12 @@ type Story = StoryObj<typeof Select>;
 export const Primary: Story = {
   args: {
     label: 'Select',
+    labelAccessor: 'name',
+    valueAccessor: 'value',
     optionsList: [
-      { label: 'Option 1', value: '1' },
-      { label: 'Option 2', value: '2' },
-      { label: 'Option 3', value: '3' },
+      { label: 'Option 1', value: '1', name: 'abcd' },
+      { label: 'Option 2', value: '2', name: '123' },
+      { label: 'Option 3', value: '3', name: '456' },
     ],
   },
 };

package/src/components/Select/Select.tsx

@@ -8,6 +8,7 @@ import Icon from '../Icon';
 import './Select.scss';
 import usePortalPosition from '../../hooks/usePortalPosition';
 import Typography from '../Typography';
+import { getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
 
 const selectReducer = (
   state: SelectState,
@@ -116,6 +117,8 @@ const Select = ({
   required = false,
   optionsRequired = true,
   selectedOptionColor = 'var(--ff-select-text-color)',
+  labelAccessor,
+  valueAccessor,
 }: SelectProps) => {
   const initialState: SelectState = useMemo(
     () => ({
@@ -164,7 +167,7 @@ const Select = ({
       if (actionType === 'SHOW_ERROR' || actionType === 'BLUR_INPUT') {
         dispatch({
           type: actionType,
-          payload: { optionsList, option: selectedOption.value },
+          payload: { optionsList, option: getValue(selectedOption) },
         });
       } else {
         dispatch({ type: actionType });
@@ -176,9 +179,10 @@ const Select = ({
     if (disabled) return;
     const { value } = e.target;
     const filteredOptions = optionsList.filter((option) => {
-      return typeof option.value === 'string'
-        ? option.value.toLowerCase().includes(value.toLowerCase().trim())
-        : option.value === Number(value);
+      const valueData = getValue(option, valueAccessor);
+      return typeof valueData === 'string'
+        ? valueData.toLowerCase().includes(value.toLowerCase().trim())
+        : valueData === Number(value);
     });
     dispatch({ type: 'UPDATE_OPTION_LIST', payload: filteredOptions });
     dispatch({ type: 'UPDATE_OPTION', payload: value });
@@ -197,7 +201,10 @@ const Select = ({
   const onSelectOptionSelector = (option: Option) => {
     if (!disabled) {
       onSelectBlur();
-      dispatch({ type: 'UPDATE_OPTION', payload: option.value });
+      dispatch({
+        type: 'UPDATE_OPTION',
+        payload: getValue(option, valueAccessor),
+      });
       if (onChange) {
         onChange(option);
       }
@@ -361,6 +368,7 @@ const Select = ({
                 options={options}
                 optionZIndex={optionZIndex}
                 inputRef={InputRef}
+                labelAccessor={labelAccessor}
               />,
               document.body
             )}

package/src/components/Select/components/Dropdown/Dropdown.tsx

@@ -7,6 +7,7 @@ import Typography from '../../../Typography';
 import { ffid } from '../../../../utils/ffID/ffid';
 import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
+import { getLabel } from '../../../../utils/getSelectOptionValue/getSelectOptionValue';
 
 const Dropdown = ({
   onSelectBlur,
@@ -15,6 +16,7 @@ const Dropdown = ({
   options = [],
   optionZIndex = 100,
   inputRef,
+  labelAccessor,
 }: DropDownListProps) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
@@ -71,7 +73,7 @@ const Dropdown = ({
               color="var(--ff-select-text-color)"
               onClick={() => onSelectOptionSelector(option)}
             >
-              {option.label}
+              {getLabel(option, labelAccessor)}
             </Typography>
           ))
         ) : (

package/src/components/Select/components/Dropdown/dropdownTypes.ts

@@ -7,6 +7,8 @@ export interface DropDownListProps {
   options?: Option[];
   optionZIndex?: number;
   inputRef?: React.RefObject<HTMLInputElement>;
+  labelAccessor?: string;
+  valueAccessor?: string;
 }
 
 export const dropdownDefaultCSSData = {
@@ -17,3 +19,4 @@ export const dropdownDefaultCSSData = {
   // Future use case if we provide padding-top, padding-bottom for option wrapper
   dropDownWrapperPadding: 0,
 };
+

package/src/components/Select/types.ts

@@ -1,5 +1,3 @@
-import { ReactNode } from 'react';
-
 export interface SelectProps {
   /*
    * Label for the select dropdown
@@ -69,6 +67,15 @@ export interface SelectProps {
    * selectedOptionColor prop provides the custom color for the selected option
    */
   selectedOptionColor?: string;
+
+  /**
+   * Label accessor
+   */
+  labelAccessor?: string;
+  /**
+   * Value accessor
+   */
+  valueAccessor?: string;
 }
 
 export interface DrowdownPosition {
@@ -124,8 +131,8 @@ export type SelectAction =
       };
     };
 
+type OptionValue = any;
+
 export interface Option {
-  label: string | ReactNode;
-  value: string;
-  disabled?: boolean;
+  [key: string]: OptionValue;
 }

package/src/components/Table/Table.scss

@@ -3,7 +3,14 @@
 .ff-fixed-header-table {
   overflow-y: auto;
 }
-
+.ff-table-icon {
+  position: absolute;
+  top: 10px;
+  right: 0;
+  margin-right: 10px;
+  z-index: 100;
+  cursor: pointer;
+}
 .ff-table {
   width: 100%;
   th,
@@ -16,7 +23,6 @@
     tr {
       th {
         @extend .fontMd;
-        color: var(--text-color);
         border-bottom: 1px solid var(--slider-table-color);
         text-transform: uppercase;
       }
@@ -54,7 +60,7 @@
       }
       td {
         position: relative;
-        color: var(--text-color);
+        color: var(--table-column-text-color);
         @extend .fontSm;
 
         &.clickable-cell {
@@ -81,6 +87,12 @@
   .default-bg {
     background-color: transparent;
   }
+  .default-color {
+    color: var(--table-header-text-color);
+  }
+  .primary-color {
+    color: var(--brand-color);
+  }
 }
 .border-borderRadius {
   border: 1px solid var(--slider-table-color);
@@ -104,4 +116,4 @@
 tbody tr.disabled-row {
   opacity: 0.5;
   cursor: not-allowed;
-}
+}

package/src/components/Table/Table.stories.tsx

@@ -26,7 +26,7 @@ const sampleData = [
       type: 'Web',
       status: 'Open',
       checked: false,
-      disabled:true
+      disabled: true,
     },
   },
   {
@@ -37,7 +37,7 @@ const sampleData = [
       type: 'Mobile',
       status: 'Close',
       checked: true,
-      disabled:true
+      disabled: true,
     },
   },
   {
@@ -48,7 +48,7 @@ const sampleData = [
       type: 'Web',
       status: 'Close',
       checked: true,
-      disabled:true
+      disabled: true,
     },
   },
   {
@@ -59,7 +59,7 @@ const sampleData = [
       type: 'Web & Mobile',
       status: 'Open',
       checked: false,
-      disabled:false
+      disabled: false,
     },
   },
   {
@@ -70,7 +70,7 @@ const sampleData = [
       type: 'Web',
       status: 'Open',
       checked: false,
-      disabled:true
+      disabled: true,
     },
   },
   {
@@ -81,7 +81,7 @@ const sampleData = [
       type: 'Mobile',
       status: 'Close',
       checked: true,
-      disabled:true
+      disabled: true,
     },
   },
   {
@@ -92,7 +92,7 @@ const sampleData = [
       type: 'Web',
       status: 'Close',
       checked: true,
-      disabled:true
+      disabled: true,
     },
   },
   {
@@ -103,7 +103,7 @@ const sampleData = [
       type: 'Web & Mobile',
       status: 'Open',
       checked: false,
-      disabled:false
+      disabled: false,
     },
   },
   {
@@ -114,7 +114,7 @@ const sampleData = [
       type: 'Web',
       status: 'Open',
       checked: false,
-      disabled:false
+      disabled: false,
     },
   },
   {
@@ -125,7 +125,7 @@ const sampleData = [
       type: 'Mobile',
       status: 'Close',
       checked: true,
-      disabled:false
+      disabled: false,
     },
   },
   {
@@ -136,7 +136,7 @@ const sampleData = [
       type: 'Web',
       status: 'Close',
       checked: true,
-      disabled:false
+      disabled: false,
     },
   },
   {
@@ -147,7 +147,7 @@ const sampleData = [
       type: 'Web & Mobile',
       status: 'Open',
       checked: false,
-      disabled:false
+      disabled: false,
     },
   },
 ];
@@ -202,6 +202,27 @@ export const Default: Story = {
     columns: columnsData,
   },
 };
+
+export const PrimaryHeaderTextColor: Story = {
+  args: {
+    ...defaultArgs,
+    data: sampleData.map((x) => x.project),
+
+    columns: columnsData,
+    headerTextColor: 'primary',
+  },
+};
+
+export const TableDataTextColor: Story = {
+  args: {
+    ...defaultArgs,
+    data: sampleData.map((x) => x.project),
+
+    columns: columnsData,
+    tableDataTextColor: 'var(--brand-color)',
+  },
+};
+
 export const PageTable: Story = {
   args: {
     ...defaultArgs,
@@ -217,6 +238,7 @@ export const PageTable: Story = {
       });
       setTableData(sampleArray);
     }, []);
+    const handleIconClick = () => {};
 
     return (
       <>
@@ -226,6 +248,8 @@ export const PageTable: Story = {
           columns={columnsData}
           headerType="secondary"
           noDataContent="No data found"
+          headerIconName={'expand_icon'}
+          headerIconOnClick={handleIconClick}
         />
       </>
     );

package/src/components/Table/Table.tsx

@@ -1,5 +1,4 @@
 import './Table.scss';
-// import Checkbox from '../Checkbox';
 import { isFunction } from '../../assets/utils/functionUtils';
 import classNames from 'classnames';
 import {
@@ -11,6 +10,8 @@ import {
 import { prepareData } from '../../utils/TableCell/TableCell';
 import Checkbox from '../Checkbox';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import Typography from '../Typography';
+import Icon from '../Icon';
 
 // import NoData from '../NoData/NoData';
 
@@ -25,13 +26,17 @@ const Table = ({
   withFixedHeader = true,
   borderWithRadius = false,
   headerCheckboxDisabled = false,
-  // noDataContent,
+  noDataContent,
   // noDataImage,
   // noDataImageSize,
   height = '100%',
   className = '',
   tableHeadClass = '',
   tableBodyRowClass = '',
+  headerTextColor,
+  tableDataTextColor,
+  headerIconName = '',
+  headerIconOnClick = () => {},
 }: TableProps) => {
   const hanleOnclick = (column: ColumnsProps, row: DataProps) => {
     let { onClick, accessor } = column;
@@ -48,12 +53,22 @@ const Table = ({
 
   return (
     <div
-      style={{ height: height }}
+      style={{ height: height, position: 'relative' }}
       className={classNames(className, {
         'ff-fixed-header-table': withFixedHeader,
         'border-borderRadius': borderWithRadius,
       })}
     >
+      {/* {iconContainer ? iconContainer : ''} */}
+      <div className="ff-table-icon">
+        <Icon
+          height={14}
+          width={14}
+          name={headerIconName}
+          onClick={headerIconOnClick}
+        ></Icon>
+      </div>
+
       <table className={classNames(`ff-table`)} cellSpacing={0}>
         <thead
           className={classNames(
@@ -67,7 +82,10 @@ const Table = ({
             {/* columns.map((column, index) */}
             {columns.map((column, index) => (
               <th
-                className={headerType && `${headerType}-bg`}
+                className={classNames(
+                  `${headerType && `${headerType}-bg`}`,
+                  `${headerTextColor && `${headerTextColor}-color`}`
+                )}
                 key={column.header}
                 style={{ width: column?.width }}
               >
@@ -98,12 +116,9 @@ const Table = ({
             data.map((row: any, index: number) => (
               <tr
                 key={row.id || index}
-                className={classNames(
-                  tableBodyRowClass,
-                  {
-                    'disabled-row': row.disabled,
-                  },
-                )}
+                className={classNames(tableBodyRowClass, {
+                  'disabled-row': row.disabled,
+                })}
               >
                 {columns.map((column, i) => {
                   return (
@@ -114,7 +129,7 @@ const Table = ({
                         'clickable-cell': column.onClick,
                       })}
                     >
-                      <div>
+                      <Typography as="div" color={tableDataTextColor}>
                         {i === 0 && withCheckbox && (
                           <span className="ff-table-checkbox">
                             <Checkbox
@@ -127,7 +142,7 @@ const Table = ({
                           </span>
                         )}
                         {prepareData(row, column)}
-                      </div>
+                      </Typography>
                     </td>
                   );
                 })}
@@ -135,18 +150,20 @@ const Table = ({
             ))}
         </tbody>
       </table>
-      {/* {data.length <= 0 && (
+      {data.length <= 0 && (
         <div
           className="no-data-content"
           style={{ height: `calc(${height} - 50px)` }}
         >
-          <NoData
+          {/* commented for future requirement for adding image when the data will not be present*/}
+          {/* <NoData
             image={noDataImage ? noDataImage : 'no_data_found'}
             content={noDataContent}
             size={noDataImageSize}
-          />
+          /> */}
+          {noDataContent}
         </div>
-      )} */}
+      )}
     </div>
   );
 };