@onewelcome/react-lib-components 0.1.7-alpha → 0.1.10-alpha

package/src/Pagination/Pagination.module.scss

@@ -4,117 +4,117 @@
   color: var(--greyed-out);
   display: flex;
   flex-direction: column;
-}
 
-.form-element {
-  height: 2.5rem;
+  .form-element {
+    height: 2.5rem;
 
-  button {
-    min-height: 2.5rem;
+    button {
+      min-height: 2.5rem;
+    }
   }
-}
 
-.total {
-  flex: 1 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  span > span {
-    font-weight: 700;
-    font-family: var(--font-family);
-    font-size: var(--font-size);
-    margin-left: 0.25rem;
-  }
-}
+  .total {
+    flex: 1 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-.pagination {
-  flex: 1 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 1rem;
+    span > span {
+      font-weight: 700;
+      font-family: var(--font-family);
+      font-size: var(--font-size);
+      margin-left: 0.25rem;
+    }
+  }
 
-  .previous,
-  .next {
+  .pagination {
+    flex: 1 0 auto;
     display: flex;
     align-items: center;
+    justify-content: center;
+    margin-top: 1rem;
 
-    button {
-      margin: 0.25rem;
-    }
+    .previous,
+    .next {
+      display: flex;
+      align-items: center;
+
+      button {
+        margin: 0.25rem;
+      }
 
-    button span:before {
-      font-size: 0.75rem;
+      button span:before {
+        font-size: 0.75rem;
+      }
     }
   }
-}
 
-.per-page {
-  display: none;
-  align-items: center;
-}
+  .per-page {
+    display: none;
+    align-items: center;
+  }
 
-.page {
-  display: flex;
-  align-items: center;
-  flex-basis: min-content;
-}
+  .page {
+    display: flex;
+    align-items: center;
+    flex-basis: min-content;
+  }
 
-.page-size-select {
-  border-color: #fff;
-  margin: 0 0.25rem;
+  .page-size-select {
+    border-color: #fff;
+    margin: 0 0.25rem;
 
-  button {
-    min-width: 55px;
-    padding: 0;
+    button {
+      min-width: 3.4375rem;
+      padding: 0;
 
-    div[data-display] {
-      left: 0.5rem;
-    }
+      div[data-display] {
+        left: 0.5rem;
+      }
 
-    div:not([data-display]) {
-      right: 0.5rem;
+      div:not([data-display]) {
+        right: 0.5rem;
+      }
     }
   }
-}
 
-.current-value-input {
-  margin: 0 0.25rem 0 0;
-  padding: 0;
+  .current-value-input {
+    margin: 0 0.25rem 0 0;
+    padding: 0;
 
-  input {
-    border-radius: var(--input-border-radius);
-    padding: 0 1rem;
-    width: auto;
-    text-align: center;
+    input {
+      border-radius: var(--input-border-radius);
+      padding: 0 1rem;
+      width: auto;
+      text-align: center;
+    }
   }
 }
 
 @media screen and (min-width: 30em) {
   .pagination-wrapper {
     flex-direction: row;
-  }
 
-  .total {
-    justify-content: flex-start;
-  }
+    .total {
+      justify-content: flex-start;
+    }
 
-  .pagination {
-    margin-top: 0;
-    justify-content: flex-end;
+    .pagination {
+      margin-top: 0;
+      justify-content: flex-end;
 
-    .previous,
-    .next {
-      button {
-        margin: 0.5rem;
+      .previous,
+      .next {
+        button {
+          margin: 0 0.5rem;
+        }
       }
     }
   }
 }
 
 @media screen and (min-width: 48em) {
-  .per-page {
+  .pagination-wrapper .per-page {
     display: flex;
   }
 }

package/src/Pagination/Pagination.tsx

@@ -53,7 +53,15 @@ export const Pagination = React.forwardRef<HTMLDivElement, Props>(
   ) => {
     /** We use an internal state variable, because we don't want to fire onCurrentPageChange whenever onChange fires on the input. Rather, only when the Enter key is pressed. */
     const [internalCurrentPage, setInternalCurrentPage] = useState(currentPage?.toString() || '1');
-    const calculateAmountOfPages = () => (totalElements ? Math.ceil(totalElements / pageSize) : 0);
+    const calculateAmountOfPages = () => {
+      if (!totalElements) return 1;
+
+      if (Math.ceil(totalElements / pageSize) < 1) {
+        return 1;
+      }
+
+      return Math.ceil(totalElements / pageSize);
+    };
 
     const onEnterListener = (event: React.KeyboardEvent<HTMLInputElement>) => {
       if (event.code === 'Enter') {
@@ -102,7 +110,11 @@ export const Pagination = React.forwardRef<HTMLDivElement, Props>(
           }
 
           if (string.includes('%2')) {
-            return <div key={string}>{string.replace('%2', amountOfPages.toString())}&nbsp;</div>;
+            return (
+              <div key={string}>
+                <strong>{string.replace('%2', amountOfPages.toString())}</strong>&nbsp;
+              </div>
+            );
           }
 
           return <div key={string}>{string}&nbsp;</div>;
@@ -135,7 +147,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, Props>(
           </div>
         )}
         <div className={classes['pagination']}>
-          {totalElements && pageSize && (
+          {pageSize && (
             <div className={classes['per-page']}>
               <Label id="page-size-select-label">{translate.itemsPerPage}</Label>
               <Select
@@ -151,7 +163,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, Props>(
             </div>
           )}
           <Fragment>
-            {((currentPage && currentPage > 2) || (currentPage && currentPage > 1)) && (
+            {!!((currentPage && currentPage > 2) || (currentPage && currentPage > 1)) && (
               <div className={classes['previous']}>
                 {currentPage > 2 && (
                   <IconButton
@@ -173,12 +185,14 @@ export const Pagination = React.forwardRef<HTMLDivElement, Props>(
                 )}
               </div>
             )}
-            {totalElements && (
+            {totalElements && calculateAmountOfPages() && (
               <div className={classes['page']}>{renderCurrentPageTranslation()}</div>
             )}
             <div className={classes['next']}>
-              {((currentPage && currentPage < calculateAmountOfPages()) ||
-                (currentPage && !totalElements)) && (
+              {!!(
+                (currentPage !== undefined && currentPage < calculateAmountOfPages()!) ||
+                (currentPage !== undefined && !totalElements)
+              ) && (
                 <IconButton
                   title="next"
                   onClick={() => onPageChangeHandler(currentPage + 1)}
@@ -187,7 +201,7 @@ export const Pagination = React.forwardRef<HTMLDivElement, Props>(
                   <Icon icon={Icons.ChevronRight} />
                 </IconButton>
               )}
-              {currentPage && totalElements && currentPage < calculateAmountOfPages()! - 1 && (
+              {!!(currentPage && totalElements && currentPage < calculateAmountOfPages()! - 1) && (
                 <IconButton
                   title="last"
                   onClick={() => onPageChangeHandler(totalElements / pageSize)}

package/src/Skeleton/Skeleton.module.scss

@@ -0,0 +1,20 @@
+@import '../mixins.module.scss';
+
+.skeleton {
+  display: block;
+  height: auto;
+  @include skeletonLoading();
+}
+
+.no-height::before {
+  content: ' ';
+  white-space: pre-wrap;
+}
+
+.text {
+  border-radius: 0.5rem;
+}
+
+.circular {
+  border-radius: 50%;
+}

package/src/Skeleton/Skeleton.test.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useRef } from 'react';
+import { Skeleton, Props } from './Skeleton';
+import { render } from '@testing-library/react';
+
+const defaultParams: Props = {};
+
+const createSkeleton = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<Skeleton {...parameters} data-testid="skeleton" />);
+  const skeleton = queries.getByTestId('skeleton');
+
+  return {
+    ...queries,
+    skeleton,
+  };
+};
+
+describe('Skeleton should render', () => {
+  it('renders without crashing', () => {
+    const { skeleton } = createSkeleton();
+
+    expect(skeleton).toHaveClass('skeleton text no-height', { exact: true });
+
+    expect(skeleton).toBeDefined();
+  });
+
+  it('renders with properties passed', () => {
+    const testClass = 'testclass';
+    const { skeleton } = createSkeleton((defaultParams) => ({
+      ...defaultParams,
+      className: testClass,
+    }));
+
+    expect(skeleton).toHaveClass(`skeleton text no-height ${testClass}`, { exact: true });
+  });
+
+  it('renders text variant with width and height', () => {
+    const width = '10rem';
+    const height = 10;
+    const { skeleton } = createSkeleton((defaultParams) => ({
+      ...defaultParams,
+      variant: 'text',
+      width,
+      height,
+    }));
+
+    expect(skeleton).toHaveClass(`skeleton text`, { exact: true });
+    expect(skeleton).toHaveStyle({ width, height: '10px' });
+  });
+
+  it('renders rectangle variant', () => {
+    const { skeleton } = createSkeleton((defaultParams) => ({
+      ...defaultParams,
+      variant: 'rectangle',
+    }));
+
+    expect(skeleton).toHaveClass(`skeleton no-height`, { exact: true });
+  });
+
+  it('renders circular variant', () => {
+    const { skeleton } = createSkeleton((defaultParams) => ({
+      ...defaultParams,
+      variant: 'circular',
+    }));
+
+    expect(skeleton).toHaveClass(`skeleton no-height circular`, { exact: true });
+  });
+});
+
+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: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        propagateRef(ref);
+      }, [ref]);
+
+      return <Skeleton {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    const container = document.createElement('tbody');
+    render(<ExampleComponent propagateRef={refCheck} />, { container });
+  });
+});

package/src/Skeleton/Skeleton.tsx

@@ -0,0 +1,29 @@
+import React, { ComponentPropsWithRef } from 'react';
+import classes from './Skeleton.module.scss';
+
+export interface Props extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+  variant?: 'circular' | 'rectangle' | 'text';
+  height?: number | string;
+  width?: number | string;
+}
+
+export const Skeleton = React.forwardRef<HTMLDivElement, Props>(
+  ({ variant = 'text', height, width, className, style, ...rest }: Props, ref) => {
+    const classNames = [classes['skeleton']];
+    !height && classNames.push(classes['no-height']);
+    variant === 'text' && classNames.push(classes['text']);
+    variant === 'circular' && classNames.push(classes['circular']);
+    className && classNames.push(className);
+
+    return (
+      <span
+        {...rest}
+        aria-busy="true"
+        aria-hidden="true"
+        ref={ref}
+        style={{ ...style, width, height }}
+        className={classNames.join(' ')}
+      ></span>
+    );
+  }
+);

package/src/_BaseStyling_/BaseStyling.tsx

@@ -26,6 +26,8 @@ interface CSSProperties {
   snackbarSuccessBackgroundColor?: string;
   snackbarErrorBackgroundColor?: string;
   snackbarBorderRadius?: string;
+  dataGridRowBackgroundColor?: string;
+  dataGridRowHoverBackgroundColor?: string;
   tabsBackgroundColor?: string;
   tabBorderWidth?: string;
   tabBorderStyle?: string;
@@ -66,22 +68,24 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     buttonBorderWidth: '2px',
     buttonFontSize: '1rem',
     buttonBorderStyle: 'solid',
-    buttonFillTextColor: '#FFF',
-    buttonFillBackgroundColor: '#FFF',
-    buttonOutlineHoverTextColor: '#FFF',
+    buttonFillTextColor: '#fff',
+    buttonFillBackgroundColor: '#fff',
+    buttonOutlineHoverTextColor: '#fff',
     inputBorderColor: '#e9e9eb',
     inputBorderRadius: '8px',
     inputBorderWidth: '1px',
     inputBorderStyle: 'solid',
-    inputBackgroundColor: '#FFF',
+    inputBackgroundColor: '#fff',
     modalShadowColor: 'rgba(0, 0, 0, 0.16)',
-    modalBackgroundColor: '#F5F8F8',
-    modalHeaderBackgroundColor: '#FFF',
+    modalBackgroundColor: '#f5f8f8',
+    modalHeaderBackgroundColor: '#fff',
     snackbarTextColor: '#fff',
     snackbarInfoBackgroundColor: '#003b5e',
     snackbarSuccessBackgroundColor: '#008a28',
     snackbarErrorBackgroundColor: '#e22a1d',
     snackbarBorderRadius: '8px',
+    dataGridRowBackgroundColor: 'transparent',
+    dataGridRowHoverBackgroundColor: '#f5e6f0',
     tabsBackgroundColor: '#FFF',
     tabBorderWidth: '2px',
     tabBorderStyle: 'solid',

package/src/index.ts

@@ -14,6 +14,7 @@ export { Tile, Props as TileProps } from './Tiles/Tile';
 export { Tiles, Props as TilesProps } from './Tiles/Tiles';
 export { Tooltip, Props as TooltipProps } from './Tooltip/Tooltip';
 export { Typography, Variant, Props as TypographyProps } from './Typography/Typography';
+export { Skeleton, Props as SkeletonProps } from './Skeleton/Skeleton';
 export {
   Pagination,
   Props as PaginationProps,
@@ -97,3 +98,9 @@ export {
   Props as BaseWizardStepsProps,
   Step as WizardStep,
 } from './Wizard/BaseWizardSteps/BaseWizardSteps';
+
+/** DataGrid */
+export { HeaderCell } from './DataGrid/datagrid.interfaces';
+export { DataGrid, Props as DataGridProps } from './DataGrid/DataGrid';
+export { DataGridRow, Props as DataGridRowProps } from './DataGrid/DataGridBody/DataGridRow';
+export { DataGridCell, Props as DataGridCellProps } from './DataGrid/DataGridBody/DataGridCell';