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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "0.1.9-alpha",
+  "version": "0.1.10-alpha",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",

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

@@ -28,8 +28,6 @@ interface CSSProperties {
   snackbarBorderRadius?: string;
   dataGridRowBackgroundColor?: string;
   dataGridRowHoverBackgroundColor?: string;
-  cardBackgroundColor?: string;
-  cardBorderRadius?: string;
   tabsBackgroundColor?: string;
   tabBorderWidth?: string;
   tabBorderStyle?: string;
@@ -88,8 +86,6 @@ export const BaseStyling = ({ children, properties = {} }: Props) => {
     snackbarBorderRadius: '8px',
     dataGridRowBackgroundColor: 'transparent',
     dataGridRowHoverBackgroundColor: '#f5e6f0',
-    cardBackgroundColor: '#fff',
-    cardBorderRadius: '8px',
     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,