pixel-react 1.1.9 → 1.2.0

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

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