@onewelcome/react-lib-components 0.2.0 → 0.2.3

package/src/DataGrid/DataGridBody/DataGridBody.test.tsx

@@ -1,12 +1,12 @@
-import React, { useEffect, useRef } from 'react';
-import { DataGridBody, Props } from './DataGridBody';
-import { render, getAllByRole } from '@testing-library/react';
-import { DataGridRow } from './DataGridRow';
-import { DataGridCell } from './DataGridCell';
-import { ContextMenu } from '../../ContextMenu/ContextMenu';
-import { IconButton } from '../../Button/IconButton';
-import { Icon, Icons } from '../../Icon/Icon';
-import { ContextMenuItem } from '../../ContextMenu/ContextMenuItem';
+import React, { useEffect, useRef } from "react";
+import { DataGridBody, Props } from "./DataGridBody";
+import { render, getAllByRole } from "@testing-library/react";
+import { DataGridRow } from "./DataGridRow";
+import { DataGridCell } from "./DataGridCell";
+import { ContextMenu } from "../../ContextMenu/ContextMenu";
+import { IconButton } from "../../Button/IconButton";
+import { Icon, Icons } from "../../Icon/Icon";
+import { ContextMenuItem } from "../../ContextMenu/ContextMenuItem";
 
 type DataType = { firstName: string; lastName: string; date: string };
 
@@ -31,16 +31,16 @@ const defaultParams: Props<DataType> = {
     </DataGridRow>
   ),
   headers: [
-    { name: 'firstName', headline: 'First name' },
-    { name: 'lastName', headline: 'Last name' },
-    { name: 'date', headline: 'Date' },
+    { name: "firstName", headline: "First name" },
+    { name: "lastName", headline: "Last name" },
+    { name: "date", headline: "Date" }
   ],
   data: [
-    { firstName: 'Paweł', lastName: 'Napieracz', date: '12.12.1990' },
-    { firstName: 'Michał', lastName: 'Górski', date: '12.12.1994' },
-    { firstName: 'Daniel', lastName: 'Velden', date: '12.12.199x' },
-    { firstName: 'Jasha', lastName: 'Joachimsthal', date: '12.12.198x' },
-  ],
+    { firstName: "Paweł", lastName: "Napieracz", date: "12.12.1990" },
+    { firstName: "Michał", lastName: "Górski", date: "12.12.1994" },
+    { firstName: "Daniel", lastName: "Velden", date: "12.12.199x" },
+    { firstName: "Jasha", lastName: "Joachimsthal", date: "12.12.198x" }
+  ]
 };
 
 const createDataGridBody = (params?: (defaultParams: Props<DataType>) => Props<DataType>) => {
@@ -48,59 +48,59 @@ const createDataGridBody = (params?: (defaultParams: Props<DataType>) => Props<D
   if (params) {
     parameters = params(defaultParams);
   }
-  const container = document.createElement('table');
+  const container = document.createElement("table");
   const queries = render(<DataGridBody {...parameters} data-testid="dataGridBody" />, {
-    container,
+    container
   });
-  const dataGridBody = queries.getByTestId('dataGridBody');
+  const dataGridBody = queries.getByTestId("dataGridBody");
 
   return {
     ...queries,
-    dataGridBody,
+    dataGridBody
   };
 };
 
-describe('DataGridBody should render', () => {
-  it('renders without crashing', () => {
+describe("DataGridBody should render", () => {
+  it("renders without crashing", () => {
     const { dataGridBody } = createDataGridBody();
 
     expect(dataGridBody).toBeDefined();
-    const rows = getAllByRole(dataGridBody, 'row');
+    const rows = getAllByRole(dataGridBody, "row");
     expect(rows).toMatchSnapshot();
   });
 
-  it('renders loading state with only visible columns', () => {
+  it("renders loading state with only visible columns", () => {
     const headers = [...defaultParams.headers];
     headers[0] = { ...headers[0], hidden: true };
-    const { dataGridBody } = createDataGridBody((params) => ({ ...params, headers }));
+    const { dataGridBody } = createDataGridBody(params => ({ ...params, headers }));
 
     expect(dataGridBody).toBeDefined();
-    const rows = getAllByRole(dataGridBody, 'row');
-    const firstRowCells = getAllByRole(rows[0], 'cell');
+    const rows = getAllByRole(dataGridBody, "row");
+    const firstRowCells = getAllByRole(rows[0], "cell");
     expect(firstRowCells).toHaveLength(3);
     expect(firstRowCells[0]).toHaveTextContent(defaultParams.data?.[0].lastName!);
   });
 
-  it('renders empty state', () => {
-    const emptyLabel = 'emptyLabel';
-    const { dataGridBody } = createDataGridBody((params) => ({
+  it("renders empty state", () => {
+    const emptyLabel = "emptyLabel";
+    const { dataGridBody } = createDataGridBody(params => ({
       ...params,
       emptyLabel,
-      data: undefined,
+      data: undefined
     }));
 
-    const rows = getAllByRole(dataGridBody, 'row');
-    const firstRowCells = getAllByRole(rows[0], 'cell');
+    const rows = getAllByRole(dataGridBody, "row");
+    const firstRowCells = getAllByRole(rows[0], "cell");
     expect(firstRowCells).toHaveLength(1);
-    expect(firstRowCells[0]).toHaveAttribute('colspan', `${defaultParams.headers.length + 1}`);
+    expect(firstRowCells[0]).toHaveAttribute("colspan", `${defaultParams.headers.length + 1}`);
     expect(firstRowCells[0]).toHaveTextContent(emptyLabel);
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -114,10 +114,10 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
-    const container = document.createElement('table');
+    const container = document.createElement("table");
     render(<ExampleComponent propagateRef={refCheck} />, { container });
   });
 });

package/src/DataGrid/DataGridBody/DataGridBody.tsx

@@ -1,11 +1,11 @@
-import React, { ComponentPropsWithRef, ReactElement, Ref } from 'react';
-import { HeaderCell } from '../datagrid.interfaces';
-import { DataGridCell } from './DataGridCell';
-import { DataGridRow } from './DataGridRow';
-import classes from './DataGridBody.module.scss';
-import { Typography } from '../../Typography/Typography';
+import React, { ComponentPropsWithRef, ReactElement, Ref } from "react";
+import { HeaderCell } from "../datagrid.interfaces";
+import { DataGridCell } from "./DataGridCell";
+import { DataGridRow } from "./DataGridRow";
+import classes from "./DataGridBody.module.scss";
+import { Typography } from "../../Typography/Typography";
 
-export interface Props<T> extends ComponentPropsWithRef<'tbody'> {
+export interface Props<T> extends ComponentPropsWithRef<"tbody"> {
   children: ({ item, index }: { item: T; index: number }) => ReactElement;
   data?: T[];
   headers: HeaderCell[];
@@ -31,7 +31,7 @@ const DataGridBodyInner = <T extends {}>(
   ref: Ref<HTMLTableSectionElement>
 ) => {
   const renderContent = () => {
-    const visibleColumns = headers.filter((header) => !header.hidden).length;
+    const visibleColumns = headers.filter(header => !header.hidden).length;
     if (isLoading) {
       return Array.from(Array(skeletonLoadingRows)).map((_, rowIdx) => (
         <DataGridRow key={rowIdx} isLoading>
@@ -48,7 +48,7 @@ const DataGridBodyInner = <T extends {}>(
       return (
         <tr>
           <td
-            className={classes['empty']}
+            className={classes["empty"]}
             colSpan={visibleColumns + (disableContextMenuColumn ? 0 : 1)}
           >
             <Typography variant="body" spacing={{ margin: 0 }}>
@@ -63,7 +63,7 @@ const DataGridBodyInner = <T extends {}>(
       return React.cloneElement(children({ item, index }), {
         headers,
         spacing,
-        disableContextMenuColumn,
+        disableContextMenuColumn
       });
     });
   };

package/src/DataGrid/DataGridBody/DataGridCell.module.scss

@@ -1,4 +1,4 @@
-@import '../../mixins.module.scss';
+@import "../../mixins.module.scss";
 
 .cell {
   min-height: 3.5rem;

package/src/DataGrid/DataGridBody/DataGridCell.test.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useRef } from 'react';
-import { DataGridCell, Props } from './DataGridCell';
-import { render } from '@testing-library/react';
+import React, { useEffect, useRef } from "react";
+import { DataGridCell, Props } from "./DataGridCell";
+import { render } from "@testing-library/react";
 
 const defaultParams: Props = {
-  children: 'cell',
+  children: "cell"
 };
 
 const createDataGridCell = (params?: (defaultParams: Props) => Props) => {
@@ -11,47 +11,47 @@ const createDataGridCell = (params?: (defaultParams: Props) => Props) => {
   if (params) {
     parameters = params(defaultParams);
   }
-  const container = document.createElement('tr');
+  const container = document.createElement("tr");
   const queries = render(<DataGridCell {...parameters} data-testid="dataGridCell" />, {
-    container,
+    container
   });
-  const dataGridCell = queries.getByTestId('dataGridCell');
+  const dataGridCell = queries.getByTestId("dataGridCell");
 
   return {
     ...queries,
-    dataGridCell,
+    dataGridCell
   };
 };
 
-describe('DataGridCell should render', () => {
-  it('renders without crashing', () => {
+describe("DataGridCell should render", () => {
+  it("renders without crashing", () => {
     const { dataGridCell } = createDataGridCell();
 
     expect(dataGridCell).toBeDefined();
-    expect(dataGridCell).toHaveClass('cell');
+    expect(dataGridCell).toHaveClass("cell");
     expect(dataGridCell).toHaveTextContent(defaultParams.children as string);
   });
 
-  it('renders with additional class', () => {
-    const { dataGridCell } = createDataGridCell((params) => ({ ...params, className: 'test' }));
+  it("renders with additional class", () => {
+    const { dataGridCell } = createDataGridCell(params => ({ ...params, className: "test" }));
 
-    expect(dataGridCell).toHaveClass('cell', 'test');
+    expect(dataGridCell).toHaveClass("cell", "test");
   });
 
-  it('renders loading state', () => {
-    const { dataGridCell } = createDataGridCell((params) => ({ ...params, isLoading: true }));
+  it("renders loading state", () => {
+    const { dataGridCell } = createDataGridCell(params => ({ ...params, isLoading: true }));
 
-    const skeletonLoadingEl = dataGridCell.querySelector('div');
-    expect(skeletonLoadingEl).toHaveClass('loading');
-    expect(skeletonLoadingEl).toHaveAttribute('aria-busy', 'true');
-    expect(skeletonLoadingEl).toHaveAttribute('aria-live', 'polite');
+    const skeletonLoadingEl = dataGridCell.querySelector("div");
+    expect(skeletonLoadingEl).toHaveClass("loading");
+    expect(skeletonLoadingEl).toHaveAttribute("aria-busy", "true");
+    expect(skeletonLoadingEl).toHaveAttribute("aria-live", "polite");
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -65,10 +65,10 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
-    const container = document.createElement('tr');
+    const container = document.createElement("tr");
     render(<ExampleComponent propagateRef={refCheck} />, { container });
   });
 });

package/src/DataGrid/DataGridBody/DataGridCell.tsx

@@ -1,8 +1,8 @@
-import React, { ComponentPropsWithRef, ReactChild } from 'react';
-import { Typography } from '../../Typography/Typography';
-import classes from './DataGridCell.module.scss';
+import React, { ComponentPropsWithRef, ReactChild } from "react";
+import { Typography } from "../../Typography/Typography";
+import classes from "./DataGridCell.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'td'> {
+export interface Props extends ComponentPropsWithRef<"td"> {
   children?: ReactChild;
   isLoading?: boolean;
   spacing?: React.CSSProperties;
@@ -42,10 +42,10 @@ export const DataGridCell = React.forwardRef<HTMLTableCellElement, Props>(
         {...rest}
         ref={ref}
         style={{ ...rest.style, ...cellStyle }}
-        className={`${classes['cell']} ${className ?? ''}`}
+        className={`${classes["cell"]} ${className ?? ""}`}
       >
         {isLoading && (
-          <div className={classes['loading']} aria-busy="true" aria-live="polite"></div>
+          <div className={classes["loading"]} aria-busy="true" aria-live="polite"></div>
         )}
         {!isLoading && (
           <Typography variant="body" tag="span">

package/src/DataGrid/DataGridBody/DataGridRow.test.tsx

@@ -1,14 +1,14 @@
-import React, { useEffect, useRef } from 'react';
-import { DataGridRow, Props } from './DataGridRow';
-import { render } from '@testing-library/react';
-import { DataGridCell } from './DataGridCell';
+import React, { useEffect, useRef } from "react";
+import { DataGridRow, Props } from "./DataGridRow";
+import { render } from "@testing-library/react";
+import { DataGridCell } from "./DataGridCell";
 
 const defaultParams: Props = {
   children: [<DataGridCell>1</DataGridCell>, <DataGridCell>2</DataGridCell>],
   headers: [
-    { name: 'firstName', headline: 'first name' },
-    { name: 'lastName', headline: 'last name' },
-  ],
+    { name: "firstName", headline: "first name" },
+    { name: "lastName", headline: "last name" }
+  ]
 };
 
 const createDataGridRow = (params?: (defaultParams: Props) => Props) => {
@@ -16,69 +16,69 @@ const createDataGridRow = (params?: (defaultParams: Props) => Props) => {
   if (params) {
     parameters = params(defaultParams);
   }
-  const container = document.createElement('tbody');
+  const container = document.createElement("tbody");
   const queries = render(<DataGridRow {...parameters} data-testid="dataGridRow" />, { container });
-  const dataGridRow = queries.getByTestId('dataGridRow');
+  const dataGridRow = queries.getByTestId("dataGridRow");
 
   return {
     ...queries,
-    dataGridRow,
+    dataGridRow
   };
 };
 
-describe('DataGridRow should render', () => {
-  it('renders without crashing', () => {
+describe("DataGridRow should render", () => {
+  it("renders without crashing", () => {
     const { dataGridRow, getAllByRole } = createDataGridRow();
 
     expect(dataGridRow).toBeDefined();
-    expect(dataGridRow).toHaveClass('row', { exact: true });
-    const cells = getAllByRole('cell');
+    expect(dataGridRow).toHaveClass("row", { exact: true });
+    const cells = getAllByRole("cell");
     expect(cells).toHaveLength(2);
-    expect(cells[0]).toHaveTextContent('1');
-    expect(cells[1]).toHaveTextContent('2');
+    expect(cells[0]).toHaveTextContent("1");
+    expect(cells[1]).toHaveTextContent("2");
   });
 
-  it('renders with additional class', () => {
-    const { dataGridRow } = createDataGridRow((params) => ({ ...params, className: 'test' }));
+  it("renders with additional class", () => {
+    const { dataGridRow } = createDataGridRow(params => ({ ...params, className: "test" }));
 
-    expect(dataGridRow).toHaveClass('row test', { exact: true });
+    expect(dataGridRow).toHaveClass("row test", { exact: true });
   });
 
-  it('renders loading state', () => {
-    const { dataGridRow } = createDataGridRow((params) => ({ ...params, isLoading: true }));
+  it("renders loading state", () => {
+    const { dataGridRow } = createDataGridRow(params => ({ ...params, isLoading: true }));
 
-    expect(dataGridRow).toHaveClass('row loading', { exact: true });
+    expect(dataGridRow).toHaveClass("row loading", { exact: true });
   });
 
-  it('renders only visible columns', () => {
-    const { dataGridRow, getAllByRole } = createDataGridRow((params) => ({
+  it("renders only visible columns", () => {
+    const { dataGridRow, getAllByRole } = createDataGridRow(params => ({
       ...params,
       headers: [
-        { name: 'firstName', headline: 'first name', hidden: true },
-        { name: 'lastName', headline: 'last name', hidden: true },
-        { name: 'date', headline: 'date' },
-        { name: 'status', headline: 'status' },
+        { name: "firstName", headline: "first name", hidden: true },
+        { name: "lastName", headline: "last name", hidden: true },
+        { name: "date", headline: "date" },
+        { name: "status", headline: "status" }
       ],
       children: [
         <DataGridCell>1</DataGridCell>,
         <DataGridCell>2</DataGridCell>,
         <DataGridCell>3</DataGridCell>,
-        <DataGridCell>4</DataGridCell>,
-      ],
+        <DataGridCell>4</DataGridCell>
+      ]
     }));
 
     expect(dataGridRow).toBeDefined();
-    const cells = getAllByRole('cell');
+    const cells = getAllByRole("cell");
     expect(cells).toHaveLength(2);
-    expect(cells[0]).toHaveTextContent('3');
-    expect(cells[1]).toHaveTextContent('4');
+    expect(cells[0]).toHaveTextContent("3");
+    expect(cells[1]).toHaveTextContent("4");
   });
 });
 
-describe('ref should work', () => {
-  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+describe("ref should work", () => {
+  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
     const ExampleComponent = ({
-      propagateRef,
+      propagateRef
     }: {
       propagateRef: (ref: React.RefObject<HTMLElement>) => void;
     }) => {
@@ -92,10 +92,10 @@ describe('ref should work', () => {
     };
 
     const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+      expect(ref.current).toHaveAttribute("data-ref", "testing");
     };
 
-    const container = document.createElement('tbody');
+    const container = document.createElement("tbody");
     render(<ExampleComponent propagateRef={refCheck} />, { container });
   });
 });

package/src/DataGrid/DataGridBody/DataGridRow.tsx

@@ -1,8 +1,8 @@
-import React, { ComponentPropsWithRef } from 'react';
-import { HeaderCell } from '../datagrid.interfaces';
-import classes from './DataGridRow.module.scss';
+import React, { ComponentPropsWithRef } from "react";
+import { HeaderCell } from "../datagrid.interfaces";
+import classes from "./DataGridRow.module.scss";
 
-export interface Props extends ComponentPropsWithRef<'tr'> {
+export interface Props extends ComponentPropsWithRef<"tr"> {
   headers?: HeaderCell[];
   isLoading?: boolean;
   spacing?: React.CSSProperties;
@@ -20,7 +20,7 @@ export const DataGridRow = React.forwardRef<HTMLTableRowElement, Props>(
           spacing: spacing,
           cellIndex: index,
           columnLength: headers?.length,
-          disableContextMenuColumn,
+          disableContextMenuColumn
         });
 
         const visible = headers?.length! > index ? !headers![index].hidden : true;
@@ -29,12 +29,12 @@ export const DataGridRow = React.forwardRef<HTMLTableRowElement, Props>(
       return null;
     });
 
-    const classNames = [classes['row']];
+    const classNames = [classes["row"]];
     className && classNames.push(className);
-    isLoading && classNames.push(classes['loading']);
+    isLoading && classNames.push(classes["loading"]);
 
     return (
-      <tr {...rest} ref={ref} className={classNames.join(' ')}>
+      <tr {...rest} ref={ref} className={classNames.join(" ")}>
         {visibleCells}
       </tr>
     );

package/src/DataGrid/DataGridHeader/DataGridHeader.module.scss

@@ -1,8 +1,7 @@
 .thead {
   &::after {
-    content: '';
+    content: "";
     position: absolute;
-    top: 2.5rem;
     width: calc(100% - 2rem);
     left: 1rem;
     border-bottom: 1px solid #c3c3c7;