feat(skeletonTable): Added skeleton table component.

Updated with the latest table code.

updated with composible table.

Updated to remove scss file.

Author: dlabaj

packages/module/src/Skeleton/Skeleton.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Skeleton, { SkeletonSize } from './Skeleton';
+import { render } from '@testing-library/react';
+
+describe('Skeleton component', () => {
+  Object.values(SkeletonSize).forEach((size) => {
+    it(`should render correctly - ${size}`, () => {
+      expect(render(<Skeleton size={size} />)).toMatchSnapshot();
+    });
+  });
+
+  it('should render correctly without size', () => {
+    expect(render(<Skeleton />)).toMatchSnapshot();
+  });
+
+  it('should render correctly as dark', () => {
+    expect(render(<Skeleton isDark />)).toMatchSnapshot();
+  });
+});

packages/module/src/Skeleton/Skeleton.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Skeleton as PFSkeleton, SkeletonProps as PFSkeletonProps } from '@patternfly/react-core';
+import clsx from 'clsx';
+import { createUseStyles } from 'react-jss';
+
+interface SkeletonSizeInterface {
+  xs: 'xs';
+  sm: 'sm';
+  md: 'md';
+  lg: 'lg';
+}
+
+const skeletonSizeXS = { width: '16% !important' };
+
+const skeletonSizeSM = { width: '33% !important' };
+
+const skeletonSizeMD = { width: '66% !important' };
+
+const skeletonSizeLG = { width: '100% !important' };
+
+const useStyles = createUseStyles({
+  skeleton: {
+    '&__xs': skeletonSizeXS,
+    '&__sm': skeletonSizeSM,
+    '&__md': skeletonSizeMD,
+    '&__lg': skeletonSizeLG,
+    '&.ins-m-dark': {
+      '--pf-c-skeleton--BackgroundColor': 'var(--pf-global--palette--black-600)',
+      '--pf-c-skeleton--after--LinearGradientColorStop1': 'var(--pf-global--palette--black-600)',
+      '--pf-c-skeleton--after--LinearGradientColorStop2': 'var(--pf-global--palette--black-500)',
+      '--pf-c-skeleton--after--LinearGradientColorStop3': 'var(--pf-global--palette--black-600)',
+    },
+  },
+});
+      
+export const SkeletonSize: SkeletonSizeInterface = { xs: 'xs', sm: 'sm', md: 'md', lg: 'lg' };
+
+export interface SkeletonProps extends Omit<PFSkeletonProps, 'size'> {
+  size?: keyof SkeletonSizeInterface;
+  isDark?: boolean;
+}
+
+const Skeleton: React.FunctionComponent<SkeletonProps> = ({ size = SkeletonSize.md, isDark = false, className, ...props }) => {
+  const classes = useStyles();
+  const skeletonClasses = clsx(classes.skeleton, `skeleton__${size}`, { [`ins-m-dark`]: isDark }, className)
+  return <PFSkeleton className={skeletonClasses} {...props} />;
+}
+
+export default Skeleton;