pixel-react 1.1.8 → 1.2.0

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

package/src/components/Table/Types.ts

@@ -1,108 +1,124 @@
 import { ReactNode } from 'react';
 
 export interface ColumnsProps {
-    /**
-     * column name
-     */
-    header: string;
-    /**
-     * data key for particular column
-     */
-    accessor: string;
-    /**
-     * className for a column
-     */
-    className?: string;
-    /**
-     * width of a column
-     */
-    width?: number;
-    /**
-     * data for the column
-     */
-    cell?: (e: any) => JSX.Element | string | ReactNode;
-  
-    onClick?: (colum: string, row: DataProps) => void;
-  }
-  export interface DataProps {
-    /**
-     * data for each row
-     */
-    [key: string]: any;
-  }
-  export interface SelectedItemProps {
-    /**
-     * selected row object | All selected flag
-     */
-    [key: string]: string | number | boolean;
-  }
-  export interface TableProps {
-    /**
-     * Data for table
-     */
-    data: Array<number | string | DataProps>;
-    /**
-     * Column details for table
-     */
-    columns: Array<any>;
-    /**
-     * Header type to have different background color
-     */
-    headerType: 'default' | 'primary' | 'secondary';
-    /**
-     * withFixedHeader prop to have non-scrollable fixed table header
-     */
-    withFixedHeader?: boolean;
-    /**
-     * borderWithRadius prop to have table with border 1px and borderRadius 5px
-     */
-    borderWithRadius?: boolean;
-    /**
-     * Check box feature to select the row
-     */
-    withCheckbox?: boolean;
-    /**
-     * Event for checkbox onClick
-     */
-    onSelect?: (e: object, arg: SelectedItemProps) => void;
-    /**
-     * Check box feature to select the row
-     */
-    allSelected?: boolean;
-    /**
-     * send true to show partial checkbox in the header
-     */
-    partialSelected?: boolean;
-    /**
-     * send true to disable the checkbox in the header
-     */
-    headerCheckboxDisabled?: boolean;
-    /**
-     * The content that to be displayed if no data not found
-     */
-    noDataContent: string | ReactNode;
-    /**
-     * Image that to be displayed if you don't have data
-     */
-    noDataImage?: string;
-    /**
-     * Size of the image that to be displayed if you don't have data
-     */
-    noDataImageSize?: 'x-large' | 'large' | 'medium' | 'small' | 'x-small';
-    /**
-     *  Height of the table in string
-     */
-    height?: string;
-    /**
-     *  classNames for the table container
-     */
-    className?: string;
-    /**
-     *  classNames for the table Header container
-     */
-    tableHeadClass?:string;
-    /**
-     *  classNames for the table Row container
-     */
-    tableBodyRowClass?:string;
-  }
+  /**
+   * column name
+   */
+  header: string;
+  /**
+   * data key for particular column
+   */
+  accessor: string;
+  /**
+   * className for a column
+   */
+  className?: string;
+  /**
+   * width of a column
+   */
+  width?: number;
+  /**
+   * data for the column
+   */
+  cell?: (e: any) => JSX.Element | string | ReactNode;
+
+  onClick?: (colum: string, row: DataProps) => void;
+}
+export interface DataProps {
+  /**
+   * data for each row
+   */
+  [key: string]: any;
+}
+export interface SelectedItemProps {
+  /**
+   * selected row object | All selected flag
+   */
+  [key: string]: string | number | boolean;
+}
+export interface TableProps {
+  /**
+   * Data for table
+   */
+  data: Array<number | string | DataProps>;
+  /**
+   * Column details for table
+   */
+  columns: Array<any>;
+  /**
+   * Header type to have different background color
+   */
+  headerType: 'default' | 'primary' | 'secondary';
+  /**
+   * withFixedHeader prop to have non-scrollable fixed table header
+   */
+  withFixedHeader?: boolean;
+  /**
+   * borderWithRadius prop to have table with border 1px and borderRadius 5px
+   */
+  borderWithRadius?: boolean;
+  /**
+   * Check box feature to select the row
+   */
+  withCheckbox?: boolean;
+  /**
+   * Event for checkbox onClick
+   */
+  onSelect?: (e: object, arg: SelectedItemProps) => void;
+  /**
+   * Check box feature to select the row
+   */
+  allSelected?: boolean;
+  /**
+   * send true to show partial checkbox in the header
+   */
+  partialSelected?: boolean;
+  /**
+   * send true to disable the checkbox in the header
+   */
+  headerCheckboxDisabled?: boolean;
+  /**
+   * The content that to be displayed if no data not found
+   */
+  noDataContent: string | ReactNode;
+  /**
+   * Image that to be displayed if you don't have data
+   */
+  noDataImage?: string;
+  /**
+   * Size of the image that to be displayed if you don't have data
+   */
+  noDataImageSize?: 'x-large' | 'large' | 'medium' | 'small' | 'x-small';
+  /**
+   *  Height of the table in string
+   */
+  height?: string;
+  /**
+   *  classNames for the table container
+   */
+  className?: string;
+  /**
+   *  classNames for the table Header container
+   */
+  tableHeadClass?: string;
+  /**
+   *  classNames for the table Row container
+   */
+  tableBodyRowClass?: string;
+  /**
+   * custom color for the column text
+   */
+  headerTextColor?: 'default' | 'primary';
+  /**
+   * custom color for the row text
+   */
+  tableDataTextColor?: string;
+  /**
+   * icon for the table header, for expand or other purposes
+   */
+  headerIconName?: string;
+  /**
+   * handle function for the table header icon
+   */
+  headerIconOnClick?: () => void;
+}

package/src/index.ts

@@ -46,6 +46,7 @@ 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';
@@ -119,6 +120,7 @@ export {
   MachineInputField,
   SequentialConnectingBranch,
   AttachmentButton,
+  IconRadioGroup,
 
   // utils exports
   checkEmpty,