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

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,