@onewelcome/react-lib-components 0.1.8-alpha → 0.1.9-alpha

package/dist/util/helper.d.ts

@@ -1,6 +1,6 @@
 declare type KeyValuePair = {
     [key: string]: unknown;
 };
-export declare const generateID: (length?: number, stringToWeaveIn?: string | undefined) => string;
+export declare const generateID: (length?: number, stringToWeaveIn?: string) => string;
 export declare const filterProps: (props: any, regexPattern: RegExp, returnFiltered?: boolean) => KeyValuePair;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "0.1.8-alpha",
+  "version": "0.1.9-alpha",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",
@@ -49,16 +49,16 @@
   "devDependencies": {
     "@babel/core": "^7.18.0",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-a11y": "^6.5.8",
-    "@storybook/addon-docs": "^6.5.8",
-    "@storybook/addon-essentials": "^6.5.8",
-    "@storybook/addon-links": "^6.5.8",
-    "@storybook/addons": "^6.5.8",
-    "@storybook/builder-webpack5": "^6.5.8",
-    "@storybook/manager-webpack5": "^6.5.8",
+    "@storybook/addon-a11y": "^6.5.9",
+    "@storybook/addon-docs": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addons": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.5.8",
-    "@storybook/theming": "^6.5.8",
+    "@storybook/react": "^6.5.9",
+    "@storybook/theming": "^6.5.9",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
@@ -70,8 +70,6 @@
     "@types/mdx": "^2.0.2",
     "@types/react": "^17.0.45",
     "@types/react-dom": "^17.0.17",
-    "@types/react-router": "^5.1.18",
-    "@types/react-router-dom": "^5.3.3",
     "babel-loader": "^8.2.5",
     "dts-cli": "^1.5.1",
     "html-webpack-plugin": "^5.5.0",

package/src/DataGrid/DataGrid.module.scss

@@ -1,3 +1,7 @@
+.grid-wrapper {
+  padding: 1rem 0;
+}
+
 .table-wrapper {
   overflow-x: auto;
 }

package/src/DataGrid/DataGrid.test.tsx

@@ -274,3 +274,148 @@ describe('ref should work', () => {
     render(<ExampleComponent propagateRef={refCheck} />);
   });
 });
+
+describe('spacing should work correctly', () => {
+  it('gives the proper paddings to the right elements', () => {
+    const { dataGrid } = createDataGrid((defaultParams) => ({
+      ...defaultParams,
+      spacing: { padding: 4 },
+      paginationProps: {
+        totalElements: 105,
+        pageSize: 10,
+        currentPage: 2,
+        onPageChange: jest.fn(),
+        onPageSizeChange: jest.fn(),
+      },
+    }));
+
+    const firstHeaderCell = dataGrid.querySelector('.table .thead .row .header-cell');
+    const lastHeaderCell = dataGrid.querySelector('.table .thead .row td');
+    const firstBodyCell = dataGrid.querySelector('.table tbody .row .cell');
+    const lastBodyCell = dataGrid.querySelector('.table tbody .row td:last-of-type');
+    const pagination = dataGrid.querySelector('.pagination-wrapper');
+
+    expect(dataGrid).toHaveStyle({ 'padding-top': '1rem', 'padding-bottom': '1rem' });
+    expect(firstHeaderCell).toHaveStyle({ 'padding-left': '1rem' });
+    expect(lastHeaderCell).toHaveStyle({ 'padding-right': '1rem' });
+    expect(firstBodyCell).toHaveStyle({ 'padding-left': '1rem' });
+    expect(lastBodyCell).toHaveStyle({ 'padding-right': '1rem' });
+    expect(pagination).toHaveStyle({ 'padding-left': '1rem', 'padding-right': '1rem' });
+  });
+
+  it('gives the proper paddings to the right elements', () => {
+    const { dataGrid } = createDataGrid((defaultParams) => ({
+      ...defaultParams,
+      spacing: { padding: '4 5' },
+      paginationProps: {
+        totalElements: 105,
+        pageSize: 10,
+        currentPage: 2,
+        onPageChange: jest.fn(),
+        onPageSizeChange: jest.fn(),
+      },
+    }));
+
+    const firstHeaderCell = dataGrid.querySelector('.table .thead .row .header-cell');
+    const lastHeaderCell = dataGrid.querySelector('.table .thead .row td');
+    const firstBodyCell = dataGrid.querySelector('.table tbody .row .cell');
+    const lastBodyCell = dataGrid.querySelector('.table tbody .row td:last-of-type');
+    const pagination = dataGrid.querySelector('.pagination-wrapper');
+
+    expect(dataGrid).toHaveStyle({ 'padding-top': '1rem', 'padding-bottom': '1rem' });
+    expect(firstHeaderCell).toHaveStyle({ 'padding-left': '1.25rem' });
+    expect(lastHeaderCell).toHaveStyle({ 'padding-right': '1.25rem' });
+    expect(firstBodyCell).toHaveStyle({ 'padding-left': '1.25rem' });
+    expect(lastBodyCell).toHaveStyle({ 'padding-right': '1.25rem' });
+    expect(pagination).toHaveStyle({ 'padding-left': '1.25rem', 'padding-right': '1.25rem' });
+  });
+
+  it('gives the proper paddings to the right elements', () => {
+    const { dataGrid } = createDataGrid((defaultParams) => ({
+      ...defaultParams,
+      spacing: { padding: '4 5 8' },
+      paginationProps: {
+        totalElements: 105,
+        pageSize: 10,
+        currentPage: 2,
+        onPageChange: jest.fn(),
+        onPageSizeChange: jest.fn(),
+      },
+    }));
+
+    const firstHeaderCell = dataGrid.querySelector('.table .thead .row .header-cell');
+    const lastHeaderCell = dataGrid.querySelector('.table .thead .row td');
+    const firstBodyCell = dataGrid.querySelector('.table tbody .row .cell');
+    const lastBodyCell = dataGrid.querySelector('.table tbody .row td:last-of-type');
+    const pagination = dataGrid.querySelector('.pagination-wrapper');
+
+    expect(dataGrid).toHaveStyle({ 'padding-top': '1rem', 'padding-bottom': '2rem' });
+    expect(firstHeaderCell).toHaveStyle({ 'padding-left': '1.25rem' });
+    expect(lastHeaderCell).toHaveStyle({ 'padding-right': '1.25rem' });
+    expect(firstBodyCell).toHaveStyle({ 'padding-left': '1.25rem' });
+    expect(lastBodyCell).toHaveStyle({ 'padding-right': '1.25rem' });
+    expect(pagination).toHaveStyle({ 'padding-left': '1.25rem', 'padding-right': '1.25rem' });
+  });
+
+  it('gives the proper paddings to the right elements', () => {
+    const { dataGrid } = createDataGrid((defaultParams) => ({
+      ...defaultParams,
+      spacing: { padding: '6 4 8 8' },
+      paginationProps: {
+        totalElements: 105,
+        pageSize: 10,
+        currentPage: 2,
+        onPageChange: jest.fn(),
+        onPageSizeChange: jest.fn(),
+      },
+    }));
+
+    const firstHeaderCell = dataGrid.querySelector('.table .thead .row .header-cell');
+    const lastHeaderCell = dataGrid.querySelector('.table .thead .row td');
+    const firstBodyCell = dataGrid.querySelector('.table tbody .row .cell');
+    const lastBodyCell = dataGrid.querySelector('.table tbody .row td:last-of-type');
+    const pagination = dataGrid.querySelector('.pagination-wrapper');
+
+    expect(dataGrid).toHaveStyle({ 'padding-top': '1.5rem', 'padding-bottom': '2rem' });
+    expect(firstHeaderCell).toHaveStyle({ 'padding-left': '2rem' });
+    expect(lastHeaderCell).toHaveStyle({ 'padding-right': '1rem' });
+    expect(firstBodyCell).toHaveStyle({ 'padding-left': '2rem' });
+    expect(lastBodyCell).toHaveStyle({ 'padding-right': '1rem' });
+    expect(pagination).toHaveStyle({ 'padding-left': '2rem', 'padding-right': '1rem' });
+  });
+
+  it('gives the proper paddings to the right elements, also with contextmenu disabled', () => {
+    const { dataGrid } = createDataGrid((defaultParams) => ({
+      ...defaultParams,
+      spacing: { padding: '6 4 8 8' },
+      disableContextMenuColumn: true,
+      paginationProps: {
+        totalElements: 105,
+        pageSize: 10,
+        currentPage: 2,
+        onPageChange: jest.fn(),
+        onPageSizeChange: jest.fn(),
+      },
+      children: ({ item }) => (
+        <DataGridRow key={item.firstName}>
+          <DataGridCell>{item.firstName}</DataGridCell>
+          <DataGridCell>{item.lastName}</DataGridCell>
+          <DataGridCell>{item.date}</DataGridCell>
+        </DataGridRow>
+      ),
+    }));
+
+    const firstHeaderCell = dataGrid.querySelector('.table .thead .row .header-cell');
+    const lastHeaderCell = dataGrid.querySelector('.table .thead .row th:last-of-type');
+    const firstBodyCell = dataGrid.querySelector('.table tbody .row .cell');
+    const lastBodyCell = dataGrid.querySelector('.table tbody .row td:last-of-type');
+    const pagination = dataGrid.querySelector('.pagination-wrapper');
+
+    expect(dataGrid).toHaveStyle({ 'padding-top': '1.5rem', 'padding-bottom': '2rem' });
+    expect(firstHeaderCell).toHaveStyle({ 'padding-left': '2rem' });
+    expect(lastHeaderCell).toHaveStyle({ 'padding-right': '1rem' });
+    expect(firstBodyCell).toHaveStyle({ 'padding-left': '2rem' });
+    expect(lastBodyCell).toHaveStyle({ 'padding-right': '1rem' });
+    expect(pagination).toHaveStyle({ 'padding-left': '2rem', 'padding-right': '1rem' });
+  });
+});

package/src/DataGrid/DataGrid.tsx

@@ -6,6 +6,7 @@ import { DataGridActions } from './DataGridActions/DataGridActions';
 import { DataGridBody } from './DataGridBody/DataGridBody';
 import { ColumnName, HeaderCell, OnSortFunction, Sort } from './datagrid.interfaces';
 import { Pagination, Props as PaginationProps } from '../Pagination/Pagination';
+import { Spacing, useSpacing } from '../hooks/useSpacing';
 
 export interface Props<T> extends ComponentPropsWithRef<'div'> {
   children: ({ item, index }: { item: T; index: number }) => ReactElement;
@@ -26,6 +27,7 @@ export interface Props<T> extends ComponentPropsWithRef<'div'> {
   disableContextMenuColumn?: boolean;
   isLoading?: boolean;
   enableMultiSorting?: boolean;
+  spacing?: Spacing;
 }
 
 const DataGridInner = <T extends {}>(
@@ -41,6 +43,8 @@ const DataGridInner = <T extends {}>(
     isLoading,
     enableMultiSorting,
     emptyLabel,
+    spacing,
+    style,
     ...rest
   }: Props<T>,
   ref: Ref<HTMLDivElement>
@@ -53,6 +57,7 @@ const DataGridInner = <T extends {}>(
   }
 
   const [internalHeaders, setInternalHeaders] = useState(headers);
+  const styleWithSpacing = useSpacing(spacing, style);
 
   useEffect(() => setInternalHeaders(headers), [headers]);
 
@@ -64,9 +69,53 @@ const DataGridInner = <T extends {}>(
     );
   };
 
+  if (styleWithSpacing?.padding) {
+    const splitPaddings = styleWithSpacing.padding.toString().split(' ');
+
+    let paddingLeftIndex: number = 0;
+
+    if (splitPaddings.length >= 2) {
+      paddingLeftIndex = 1;
+    }
+    if (splitPaddings.length === 4) {
+      paddingLeftIndex = 3;
+    }
+
+    Object.defineProperties(styleWithSpacing, {
+      paddingTop: {
+        value: splitPaddings[0],
+      },
+      paddingRight: {
+        value: splitPaddings[splitPaddings.length - 1 > 0 ? 1 : 0],
+      },
+      paddingBottom: {
+        value: splitPaddings[splitPaddings.length / 3 >= 1 ? 2 : 0],
+      },
+      paddingLeft: {
+        value: splitPaddings[paddingLeftIndex],
+      },
+    });
+  }
+
   return (
-    <div {...rest} ref={ref}>
-      <DataGridActions {...actions} headers={internalHeaders} onColumnToggled={onColumnToggled} />
+    <div
+      {...rest}
+      className={classes['grid-wrapper']}
+      ref={ref}
+      style={{
+        paddingTop: styleWithSpacing?.paddingTop,
+        paddingBottom: styleWithSpacing?.paddingBottom,
+      }}
+    >
+      <DataGridActions
+        {...actions}
+        style={{
+          paddingLeft: styleWithSpacing?.paddingLeft,
+          paddingRight: styleWithSpacing?.paddingRight,
+        }}
+        headers={internalHeaders}
+        onColumnToggled={onColumnToggled}
+      />
       <div className={classes['table-wrapper']}>
         <table className={classes['table']}>
           <DataGridHeader
@@ -75,6 +124,7 @@ const DataGridInner = <T extends {}>(
             onSort={onSort}
             disableContextMenuColumn={disableContextMenuColumn}
             enableMultiSorting={enableMultiSorting}
+            spacing={styleWithSpacing}
           />
           <DataGridBody
             children={children}
@@ -83,12 +133,18 @@ const DataGridInner = <T extends {}>(
             isLoading={isLoading}
             disableContextMenuColumn={disableContextMenuColumn}
             emptyLabel={emptyLabel}
+            spacing={styleWithSpacing}
           />
         </table>
       </div>
       {paginationProps && !isLoading && (
         <Pagination
           {...paginationProps}
+          style={{
+            ...paginationProps.style,
+            paddingLeft: styleWithSpacing?.paddingLeft,
+            paddingRight: styleWithSpacing?.paddingRight,
+          }}
           className={`${classes['pagination']} ${paginationProps.className ?? ''}`}
         />
       )}

package/src/DataGrid/DataGridBody/DataGridBody.tsx

@@ -12,12 +12,22 @@ export interface Props<T> extends ComponentPropsWithRef<'tbody'> {
   isLoading?: boolean;
   disableContextMenuColumn?: boolean;
   emptyLabel?: string;
+  spacing?: React.CSSProperties;
 }
 
 const skeletonLoadingRows = 9;
 
 const DataGridBodyInner = <T extends {}>(
-  { children, data, headers, isLoading, disableContextMenuColumn, emptyLabel, ...rest }: Props<T>,
+  {
+    children,
+    data,
+    headers,
+    isLoading,
+    disableContextMenuColumn,
+    emptyLabel,
+    spacing,
+    ...rest
+  }: Props<T>,
   ref: Ref<HTMLTableSectionElement>
 ) => {
   const renderContent = () => {
@@ -49,7 +59,13 @@ const DataGridBodyInner = <T extends {}>(
       );
     }
 
-    return data?.map((item, index) => React.cloneElement(children({ item, index }), { headers }));
+    return data?.map((item, index) => {
+      return React.cloneElement(children({ item, index }), {
+        headers,
+        spacing,
+        disableContextMenuColumn,
+      });
+    });
   };
 
   return (

package/src/DataGrid/DataGridBody/DataGridCell.tsx

@@ -5,12 +5,45 @@ import classes from './DataGridCell.module.scss';
 export interface Props extends ComponentPropsWithRef<'td'> {
   children?: ReactChild;
   isLoading?: boolean;
+  spacing?: React.CSSProperties;
+  cellIndex?: number;
+  columnLength?: number;
+  disableContextMenuColumn?: boolean;
 }
 
 export const DataGridCell = React.forwardRef<HTMLTableCellElement, Props>(
-  ({ children, className, isLoading, ...rest }: Props, ref) => {
+  (
+    {
+      children,
+      className,
+      isLoading,
+      spacing,
+      cellIndex,
+      columnLength,
+      disableContextMenuColumn,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    let cellStyle: React.CSSProperties = {};
+
+    if (cellIndex === 0) {
+      cellStyle.paddingLeft = spacing?.paddingLeft;
+    }
+    if (
+      (cellIndex === columnLength && !disableContextMenuColumn) ||
+      (columnLength && cellIndex === columnLength - 1 && disableContextMenuColumn)
+    ) {
+      cellStyle.paddingRight = spacing?.paddingRight;
+    }
+
     return (
-      <td {...rest} ref={ref} className={`${classes['cell']} ${className ?? ''}`}>
+      <td
+        {...rest}
+        ref={ref}
+        style={{ ...rest.style, ...cellStyle }}
+        className={`${classes['cell']} ${className ?? ''}`}
+      >
         {isLoading && (
           <div className={classes['loading']} aria-busy="true" aria-live="polite"></div>
         )}

package/src/DataGrid/DataGridBody/DataGridRow.tsx

@@ -5,13 +5,28 @@ import classes from './DataGridRow.module.scss';
 export interface Props extends ComponentPropsWithRef<'tr'> {
   headers?: HeaderCell[];
   isLoading?: boolean;
+  spacing?: React.CSSProperties;
+  disableContextMenuColumn?: boolean;
 }
 
 export const DataGridRow = React.forwardRef<HTMLTableRowElement, Props>(
-  ({ children, className, headers, isLoading, ...rest }: Props, ref) => {
-    const visibleCells = React.Children.map(children, (child, index) => {
-      const visible = headers?.length! > index ? !headers![index].hidden : true;
-      return visible && child;
+  (
+    { children, className, headers, isLoading, spacing, disableContextMenuColumn, ...rest }: Props,
+    ref
+  ) => {
+    const visibleCells = React.Children.map(children as React.ReactElement[], (child, index) => {
+      if (child) {
+        const cellWithSpacing = React.cloneElement(child, {
+          spacing: spacing,
+          cellIndex: index,
+          columnLength: headers?.length,
+          disableContextMenuColumn,
+        });
+
+        const visible = headers?.length! > index ? !headers![index].hidden : true;
+        return visible && cellWithSpacing;
+      }
+      return null;
     });
 
     const classNames = [classes['row']];

package/src/DataGrid/DataGridHeader/DataGridHeader.tsx

@@ -9,13 +9,22 @@ export interface Props extends ComponentPropsWithRef<'thead'> {
   onSort?: OnSortFunction;
   disableContextMenuColumn?: boolean;
   enableMultiSorting?: boolean;
+  spacing?: React.CSSProperties;
 }
 
 const sortingStates = [undefined, 'ASC', 'DESC'] as (Direction | undefined)[];
 
 export const DataGridHeader = React.forwardRef<HTMLTableSectionElement, Props>(
   (
-    { initialSort, onSort, headers, disableContextMenuColumn, enableMultiSorting, ...rest }: Props,
+    {
+      initialSort,
+      onSort,
+      headers,
+      disableContextMenuColumn,
+      enableMultiSorting,
+      spacing,
+      ...rest
+    }: Props,
     ref
   ) => {
     const [sortList, setSortList] = useState(initialSort || []);
@@ -48,11 +57,20 @@ export const DataGridHeader = React.forwardRef<HTMLTableSectionElement, Props>(
       setSortList(newSort);
     };
 
-    const headerCells = headers.map((header) => {
+    const headerCells = headers.map((header, index) => {
       if (header.hidden) {
         return null;
       }
 
+      let headerStyle: React.CSSProperties = {};
+
+      if (index === 0) {
+        headerStyle.paddingLeft = spacing?.paddingLeft;
+      }
+      if (index === headers.length - 1 && disableContextMenuColumn) {
+        headerStyle.paddingRight = spacing?.paddingRight;
+      }
+
       const sort = sortList.find((item) => item.name === header.name);
       return (
         <DataGridHeaderCell
@@ -62,6 +80,7 @@ export const DataGridHeader = React.forwardRef<HTMLTableSectionElement, Props>(
           disableSorting={header.disableSorting || !onSort}
           onSort={wrapOnSort}
           activeSortDirection={sort?.direction}
+          style={headerStyle}
         />
       );
     });
@@ -71,7 +90,11 @@ export const DataGridHeader = React.forwardRef<HTMLTableSectionElement, Props>(
         <tr className={classes['row']}>
           {headerCells}
           {!disableContextMenuColumn && (
-            <td aria-label="context menu" className={classes['context-menu']}></td>
+            <td
+              style={{ paddingRight: spacing?.paddingRight }}
+              aria-label="context menu"
+              className={classes['context-menu']}
+            ></td>
           )}
         </tr>
       </thead>

package/src/Form/Wrapper/Wrapper/Wrapper.module.scss

@@ -3,6 +3,7 @@
 }
 
 .floating-label {
+  font-family: var(--font-family);
   font-size: 1rem;
   position: absolute;
   z-index: 1;

package/src/Pagination/Pagination.module.scss

@@ -106,7 +106,7 @@
       .previous,
       .next {
         button {
-          margin: 0.5rem;
+          margin: 0 0.5rem;
         }
       }
     }