From 79bf7a033684671e617afcae78f653353a91499f Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Wed, 18 Oct 2023 15:42:38 -0400 Subject: [PATCH 01/13] feat(skeletonTable): Added skeleton table component. Updated with the latest table code. updated with composible table. Updated to remove scss file. --- .../module/src/Skeleton/Skeleton.test.tsx | 19 + packages/module/src/Skeleton/Skeleton.tsx | 49 + .../__snapshots__/Skeleton.test.tsx.snap | 463 +++++++++ packages/module/src/Skeleton/index.ts | 2 + .../src/SkeletonTable/SkeletonTable.test.tsx | 13 + .../src/SkeletonTable/SkeletonTable.tsx | 57 ++ .../__snapshots__/SkeletonTable.test.tsx.snap | 903 ++++++++++++++++++ packages/module/src/SkeletonTable/index.ts | 2 + 8 files changed, 1508 insertions(+) create mode 100644 packages/module/src/Skeleton/Skeleton.test.tsx create mode 100644 packages/module/src/Skeleton/Skeleton.tsx create mode 100644 packages/module/src/Skeleton/__snapshots__/Skeleton.test.tsx.snap create mode 100644 packages/module/src/Skeleton/index.ts create mode 100644 packages/module/src/SkeletonTable/SkeletonTable.test.tsx create mode 100644 packages/module/src/SkeletonTable/SkeletonTable.tsx create mode 100644 packages/module/src/SkeletonTable/__snapshots__/SkeletonTable.test.tsx.snap create mode 100644 packages/module/src/SkeletonTable/index.ts diff --git a/packages/module/src/Skeleton/Skeleton.test.tsx b/packages/module/src/Skeleton/Skeleton.test.tsx new file mode 100644 index 00000000..dbc12685 --- /dev/null +++ b/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()).toMatchSnapshot(); + }); + }); + + it('should render correctly without size', () => { + expect(render()).toMatchSnapshot(); + }); + + it('should render correctly as dark', () => { + expect(render()).toMatchSnapshot(); + }); +}); diff --git a/packages/module/src/Skeleton/Skeleton.tsx b/packages/module/src/Skeleton/Skeleton.tsx new file mode 100644 index 00000000..9dff646f --- /dev/null +++ b/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 { + size?: keyof SkeletonSizeInterface; + isDark?: boolean; +} + +const Skeleton: React.FunctionComponent = ({ size = SkeletonSize.md, isDark = false, className, ...props }) => { + const classes = useStyles(); + const skeletonClasses = clsx(classes.skeleton, `skeleton__${size}`, { [`ins-m-dark`]: isDark }, className) + return ; +} + +export default Skeleton; diff --git a/packages/module/src/Skeleton/__snapshots__/Skeleton.test.tsx.snap b/packages/module/src/Skeleton/__snapshots__/Skeleton.test.tsx.snap new file mode 100644 index 00000000..ba549250 --- /dev/null +++ b/packages/module/src/Skeleton/__snapshots__/Skeleton.test.tsx.snap @@ -0,0 +1,463 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Skeleton component should render correctly - lg 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+ +
+
+ , + "container":
+
+ +
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`Skeleton component should render correctly - md 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+ +
+
+ , + "container":
+
+ +
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`Skeleton component should render correctly - sm 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+ +
+
+ , + "container":
+
+ +
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`Skeleton component should render correctly - xs 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+ +
+
+ , + "container":
+
+ +
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`Skeleton component should render correctly as dark 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+ +
+
+ , + "container":
+
+ +
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`Skeleton component should render correctly without size 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+
+ +
+
+ , + "container":
+
+ +
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; diff --git a/packages/module/src/Skeleton/index.ts b/packages/module/src/Skeleton/index.ts new file mode 100644 index 00000000..e3734d32 --- /dev/null +++ b/packages/module/src/Skeleton/index.ts @@ -0,0 +1,2 @@ +export { default } from './Skeleton'; +export { default as Skeleton, SkeletonSize } from './Skeleton'; diff --git a/packages/module/src/SkeletonTable/SkeletonTable.test.tsx b/packages/module/src/SkeletonTable/SkeletonTable.test.tsx new file mode 100644 index 00000000..72a426d5 --- /dev/null +++ b/packages/module/src/SkeletonTable/SkeletonTable.test.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import SkeletonTable from './SkeletonTable'; + +describe('SkeletonTable component', () => { + it('should render correctly', () => { + expect(render()).toMatchSnapshot(); + }); + + it('should render correctly with rows', () => { + expect(render()).toMatchSnapshot(); + }); +}); diff --git a/packages/module/src/SkeletonTable/SkeletonTable.tsx b/packages/module/src/SkeletonTable/SkeletonTable.tsx new file mode 100644 index 00000000..3c671d35 --- /dev/null +++ b/packages/module/src/SkeletonTable/SkeletonTable.tsx @@ -0,0 +1,57 @@ +import React, { ReactNode } from 'react'; +import { Caption, Table, TableProps, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'; +import { Skeleton } from '../Skeleton'; + +export type SkeletonTableProps = TableProps & { + variant?: TableVariant; + rows?: number; + caption?: ReactNode; +} & ( + | { + columns: ReactNode[]; + } + | { + numberOfColumns: number; + } + ); + +function hasCustomColumns(props: Record): props is SkeletonTableProps & { + columns: ReactNode[]; +} { + return Array.isArray(props.columns); +} + +const SkeletonTable: React.FunctionComponent = (props) => { + const { variant, rows = 5, caption } = props; + const rowCells = hasCustomColumns(props) ? props.columns.length : props.numberOfColumns; + const rowArray = [ ...new Array(rowCells) ]; + const bodyRows = [ ...new Array(rows) ].map((_, index) => ( + + {rowArray.map((_, index) => ( + + + + ))} + + )); + + return ( + + {caption && } + + + {hasCustomColumns(props) + ? props.columns.map((c, index) => ) + : rowArray.map((_, index) => ( + + ))} + + + {bodyRows} +
{caption}
{c} + +
+ ); +}; + +export default SkeletonTable; diff --git a/packages/module/src/SkeletonTable/__snapshots__/SkeletonTable.test.tsx.snap b/packages/module/src/SkeletonTable/__snapshots__/SkeletonTable.test.tsx.snap new file mode 100644 index 00000000..1c535070 --- /dev/null +++ b/packages/module/src/SkeletonTable/__snapshots__/SkeletonTable.test.tsx.snap @@ -0,0 +1,903 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SkeletonTable component should render correctly 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ first + + second +
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
+ , + "container":
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ first + + second +
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`SkeletonTable component should render correctly with rows 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ first + + second +
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
+ , + "container":
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ first + + second +
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
+ +
+ 		+
+ +
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; diff --git a/packages/module/src/SkeletonTable/index.ts b/packages/module/src/SkeletonTable/index.ts new file mode 100644 index 00000000..7e0a19d0 --- /dev/null +++ b/packages/module/src/SkeletonTable/index.ts @@ -0,0 +1,2 @@ +export { default } from './SkeletonTable'; +export { default as SkeletonTable } from './SkeletonTable'; From 7c908cdf420ab7cb850abd0091f2dd2c90159c28 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Thu, 19 Oct 2023 12:42:28 -0400 Subject: [PATCH 02/13] Added documenation. --- .../examples/Skeleton/Skeleton.md | 37 +++++++ .../Skeleton/SkeletonTableExample.tsx | 6 ++ .../Skeleton/SkeletonTableLoadingExample.tsx | 102 ++++++++++++++++++ .../src/SkeletonTable/SkeletonTable.tsx | 5 +- packages/module/src/index.ts | 6 ++ 5 files changed, 155 insertions(+), 1 deletion(-) create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableExample.tsx create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableLoadingExample.tsx diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md new file mode 100644 index 00000000..4e7ab4b6 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md @@ -0,0 +1,37 @@ +--- +# Sidenav top-level section +# should be the same for all markdown files +section: extensions +subsection: Component groups +# Sidenav secondary level section +# should be the same for all markdown files +id: Skeleton table +# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) +source: react +# If you use typescript, the name of the interface to display props for +# These are found through the sourceProps function provided in patternfly-docs.source.js +propComponents: ['SkeletonTable'] +--- +import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable'; + +The skeleton table is used to handle the loading of a table. It indicates data for each of the rows are loading by +using the [skelton](https://www.patternfly.org/components/skeleton) component in each cell. Once the data is loaded, the +skeleton table should be replaced with the table component containing the real data. + +## Examples + +### Basic skeleton table + +The following is a basic example of a skeleton table. + +```js file="./SkeletonTableExample.tsx" + +``` + +### Skelton Table loading and replaced with table component + +This example shows how to use the skeleton table to indicate the data is loading, and then replace it with the table component once the data is available. + +```js file="./SkeletonTableLoadingExample.tsx" + +``` diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableExample.tsx new file mode 100644 index 00000000..785edc8b --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableExample.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import SkeletonTable from '@patternfly/react-core/dist/js/components/Skeleton/SkeletonTable'; + +export const SkeletonTableExample: React.FC = () => { + return ; +} \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableLoadingExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableLoadingExample.tsx new file mode 100644 index 00000000..d8394580 --- /dev/null +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableLoadingExample.tsx @@ -0,0 +1,102 @@ +import React, { useState } from 'react'; +import SkeletonTable from '@patternfly/react-core/dist/js/components/Skeleton/SkeletonTable'; +import { Table, Tbody, Td, Th, Tr, Thead } from '@patternfly/react-table'; +import { Button, Stack, StackItem } from '@patternfly/react-core'; + +interface Repository { + name: string; + branches: string | null; + prs: string | null; + workspaces: string; + lastCommit: string; +} + +export const SkeletonTableExample: React.FC = () => { + const [ isLoaded, setIsLoaded ] = React.useState(false); + + const simulatedAsyncCall = new Promise((resolve) => { + setTimeout(() => { + console.log('Network call complete successfully so return true'); + resolve(true); + }, 5000); + }); + + const loadData = async () => { + const result = await simulatedAsyncCall; + setIsLoaded(result); + }; + + const repositories: Repository[] = [ + { name: 'one', branches: 'two', prs: 'three', workspaces: 'four', lastCommit: 'five' }, + { name: 'one - 2', branches: null, prs: null, workspaces: 'four - 2', lastCommit: 'five - 2' }, + { name: 'one - 3', branches: 'two - 3', prs: 'three - 3', workspaces: 'four - 3', lastCommit: 'five - 3' } + ]; + + const columnNames = { + name: 'Repositories', + branches: 'Branches', + prs: 'Pull requests', + workspaces: 'Workspaces', + lastCommit: 'Last commit' + }; + + let table: React.ReactNode; + + if (!isLoaded) { + table = ( + + ); + } else { + table = ( + + + + + + + + + + + + {repositories.map((repo) => ( + + + + + + + + ))} + +
{columnNames.name}{columnNames.branches}{columnNames.prs}{columnNames.workspaces}{columnNames.lastCommit}
{repo.name}{repo.branches}{repo.prs}{repo.workspaces}{repo.lastCommit}
+ ); + } + + return ( + <> + + {table} + + + + + + ); +}; diff --git a/packages/module/src/SkeletonTable/SkeletonTable.tsx b/packages/module/src/SkeletonTable/SkeletonTable.tsx index 3c671d35..194e4f12 100644 --- a/packages/module/src/SkeletonTable/SkeletonTable.tsx +++ b/packages/module/src/SkeletonTable/SkeletonTable.tsx @@ -3,8 +3,11 @@ import { Caption, Table, TableProps, TableVariant, Tbody, Td, Th, Thead, Tr } fr import { Skeleton } from '../Skeleton'; export type SkeletonTableProps = TableProps & { + /** Indicates the table variant */ variant?: TableVariant; + /** The number of rows the skeleton table should contain */ rows?: number; + /** Any captions that should be added to the table */ caption?: ReactNode; } & ( | { @@ -21,7 +24,7 @@ function hasCustomColumns(props: Record): props is SkeletonTablePro return Array.isArray(props.columns); } -const SkeletonTable: React.FunctionComponent = (props) => { +const SkeletonTable: React.FunctionComponent = (props: SkeletonTableProps) => { const { variant, rows = 5, caption } = props; const rowCells = hasCustomColumns(props) ? props.columns.length : props.numberOfColumns; const rowArray = [ ...new Array(rowCells) ]; diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index 437bd712..c7c1c3f5 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -27,6 +27,12 @@ export * from './HorizontalNav'; export { default as NotAuthorized } from './NotAuthorized'; export * from './NotAuthorized'; +export { default as Skeleton } from './Skeleton'; +export * from './Skeleton'; + +export { default as SkeletonTable } from './SkeletonTable'; +export * from './SkeletonTable'; + export { default as TagCount } from './TagCount'; export * from './TagCount'; From f8452122140f52c7ef515c8aa77545a36c1b33e8 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Thu, 19 Oct 2023 12:46:47 -0400 Subject: [PATCH 03/13] Fixed lint errors. --- .../examples/Skeleton/SkeletonTableExample.tsx | 4 +--- .../examples/Skeleton/SkeletonTableLoadingExample.tsx | 3 +-- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableExample.tsx index 785edc8b..2da39452 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableExample.tsx @@ -1,6 +1,4 @@ import React from 'react'; import SkeletonTable from '@patternfly/react-core/dist/js/components/Skeleton/SkeletonTable'; -export const SkeletonTableExample: React.FC = () => { - return ; -} \ No newline at end of file +export const SkeletonTableExample: React.FC = () => \ No newline at end of file diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableLoadingExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableLoadingExample.tsx index d8394580..4c0834ab 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableLoadingExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableLoadingExample.tsx @@ -12,11 +12,10 @@ interface Repository { } export const SkeletonTableExample: React.FC = () => { - const [ isLoaded, setIsLoaded ] = React.useState(false); + const [ isLoaded, setIsLoaded ] = useState(false); const simulatedAsyncCall = new Promise((resolve) => { setTimeout(() => { - console.log('Network call complete successfully so return true'); resolve(true); }, 5000); }); From 4a43cc6c11a39d2bf6c35fa90d9a61a34f34abef Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Thu, 19 Oct 2023 13:48:57 -0400 Subject: [PATCH 04/13] Removed the skeleton table in favor of the patternfly one. --- .../examples/Skeleton/Skeleton.md | 1 + .../Skeleton/SkeletonTableLoadingExample.tsx | 4 +- .../module/src/Skeleton/Skeleton.test.tsx | 19 - packages/module/src/Skeleton/Skeleton.tsx | 49 -- .../__snapshots__/Skeleton.test.tsx.snap | 463 ------------------ packages/module/src/Skeleton/index.ts | 2 - .../src/SkeletonTable/SkeletonTable.tsx | 20 +- .../__snapshots__/SkeletonTable.test.tsx.snap | 80 +-- packages/module/src/index.ts | 3 - 9 files changed, 60 insertions(+), 581 deletions(-) delete mode 100644 packages/module/src/Skeleton/Skeleton.test.tsx delete mode 100644 packages/module/src/Skeleton/Skeleton.tsx delete mode 100644 packages/module/src/Skeleton/__snapshots__/Skeleton.test.tsx.snap delete mode 100644 packages/module/src/Skeleton/index.ts diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md index 4e7ab4b6..902eff05 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md @@ -31,6 +31,7 @@ The following is a basic example of a skeleton table. ### Skelton Table loading and replaced with table component This example shows how to use the skeleton table to indicate the data is loading, and then replace it with the table component once the data is available. +To simulate the loading of the table use the `Load Table` button below the table. ```js file="./SkeletonTableLoadingExample.tsx" diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableLoadingExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableLoadingExample.tsx index 4c0834ab..fe4350ae 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableLoadingExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableLoadingExample.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import SkeletonTable from '@patternfly/react-core/dist/js/components/Skeleton/SkeletonTable'; import { Table, Tbody, Td, Th, Tr, Thead } from '@patternfly/react-table'; import { Button, Stack, StackItem } from '@patternfly/react-core'; @@ -12,7 +12,7 @@ interface Repository { } export const SkeletonTableExample: React.FC = () => { - const [ isLoaded, setIsLoaded ] = useState(false); + const [ isLoaded, setIsLoaded ] = React.useState(false); const simulatedAsyncCall = new Promise((resolve) => { setTimeout(() => { diff --git a/packages/module/src/Skeleton/Skeleton.test.tsx b/packages/module/src/Skeleton/Skeleton.test.tsx deleted file mode 100644 index dbc12685..00000000 --- a/packages/module/src/Skeleton/Skeleton.test.tsx +++ /dev/null @@ -1,19 +0,0 @@ -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()).toMatchSnapshot(); - }); - }); - - it('should render correctly without size', () => { - expect(render()).toMatchSnapshot(); - }); - - it('should render correctly as dark', () => { - expect(render()).toMatchSnapshot(); - }); -}); diff --git a/packages/module/src/Skeleton/Skeleton.tsx b/packages/module/src/Skeleton/Skeleton.tsx deleted file mode 100644 index 9dff646f..00000000 --- a/packages/module/src/Skeleton/Skeleton.tsx +++ /dev/null @@ -1,49 +0,0 @@ -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 { - size?: keyof SkeletonSizeInterface; - isDark?: boolean; -} - -const Skeleton: React.FunctionComponent = ({ size = SkeletonSize.md, isDark = false, className, ...props }) => { - const classes = useStyles(); - const skeletonClasses = clsx(classes.skeleton, `skeleton__${size}`, { [`ins-m-dark`]: isDark }, className) - return ; -} - -export default Skeleton; diff --git a/packages/module/src/Skeleton/__snapshots__/Skeleton.test.tsx.snap b/packages/module/src/Skeleton/__snapshots__/Skeleton.test.tsx.snap deleted file mode 100644 index ba549250..00000000 --- a/packages/module/src/Skeleton/__snapshots__/Skeleton.test.tsx.snap +++ /dev/null @@ -1,463 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Skeleton component should render correctly - lg 1`] = ` -{ - "asFragment": [Function], - "baseElement": -
-
- -
-
- , - "container":
-
- -
-
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; - -exports[`Skeleton component should render correctly - md 1`] = ` -{ - "asFragment": [Function], - "baseElement": -
-
- -
-
- , - "container":
-
- -
-
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; - -exports[`Skeleton component should render correctly - sm 1`] = ` -{ - "asFragment": [Function], - "baseElement": -
-
- -
-
- , - "container":
-
- -
-
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; - -exports[`Skeleton component should render correctly - xs 1`] = ` -{ - "asFragment": [Function], - "baseElement": -
-
- -
-
- , - "container":
-
- -
-
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; - -exports[`Skeleton component should render correctly as dark 1`] = ` -{ - "asFragment": [Function], - "baseElement": -
-
- -
-
- , - "container":
-
- -
-
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; - -exports[`Skeleton component should render correctly without size 1`] = ` -{ - "asFragment": [Function], - "baseElement": -
-
- -
-
- , - "container":
-
- -
-
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; diff --git a/packages/module/src/Skeleton/index.ts b/packages/module/src/Skeleton/index.ts deleted file mode 100644 index e3734d32..00000000 --- a/packages/module/src/Skeleton/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './Skeleton'; -export { default as Skeleton, SkeletonSize } from './Skeleton'; diff --git a/packages/module/src/SkeletonTable/SkeletonTable.tsx b/packages/module/src/SkeletonTable/SkeletonTable.tsx index 194e4f12..e241d39b 100644 --- a/packages/module/src/SkeletonTable/SkeletonTable.tsx +++ b/packages/module/src/SkeletonTable/SkeletonTable.tsx @@ -1,6 +1,8 @@ import React, { ReactNode } from 'react'; import { Caption, Table, TableProps, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'; -import { Skeleton } from '../Skeleton'; +import { Skeleton } from '@patternfly/react-core'; +import { createUseStyles } from 'react-jss'; +import { clsx } from 'clsx'; export type SkeletonTableProps = TableProps & { /** Indicates the table variant */ @@ -18,6 +20,17 @@ export type SkeletonTableProps = TableProps & { } ); +const useStyles = createUseStyles({ + skeleton: { + '&.ins-m-dark': { + '--pf-c-skeleton--BackgroundColor': 'var(--pf-v5-global--palette--black-600)', + '--pf-c-skeleton--after--LinearGradientColorStop1': 'var(--pf-v5-global--palette--black-600)', + '--pf-c-skeleton--after--LinearGradientColorStop2': 'var(--pf-v5--global--palette--black-500)', + '--pf-c-skeleton--after--LinearGradientColorStop3': 'var(--pf-v5-global--palette--black-600)', + }, + }, +}); + function hasCustomColumns(props: Record): props is SkeletonTableProps & { columns: ReactNode[]; } { @@ -26,13 +39,14 @@ function hasCustomColumns(props: Record): props is SkeletonTablePro const SkeletonTable: React.FunctionComponent = (props: SkeletonTableProps) => { const { variant, rows = 5, caption } = props; + const classes = useStyles(); const rowCells = hasCustomColumns(props) ? props.columns.length : props.numberOfColumns; const rowArray = [ ...new Array(rowCells) ]; const bodyRows = [ ...new Array(rows) ].map((_, index) => ( {rowArray.map((_, index) => ( - + ))} @@ -47,7 +61,7 @@ const SkeletonTable: React.FunctionComponent = (props: Skele ? props.columns.map((c, index) => {c}) : rowArray.map((_, index) => ( - + ))} diff --git a/packages/module/src/SkeletonTable/__snapshots__/SkeletonTable.test.tsx.snap b/packages/module/src/SkeletonTable/__snapshots__/SkeletonTable.test.tsx.snap index 1c535070..078521c2 100644 --- a/packages/module/src/SkeletonTable/__snapshots__/SkeletonTable.test.tsx.snap +++ b/packages/module/src/SkeletonTable/__snapshots__/SkeletonTable.test.tsx.snap @@ -53,7 +53,7 @@ exports[`SkeletonTable component should render correctly 1`] = ` tabindex="-1" >
Date: Thu, 19 Oct 2023 16:51:14 -0400 Subject: [PATCH 05/13] Update packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../extensions/component-groups/examples/Skeleton/Skeleton.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md index 902eff05..512d5be4 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md @@ -14,9 +14,7 @@ propComponents: ['SkeletonTable'] --- import SkeletonTable from '@patternfly/react-component-groups/dist/dynamic/SkeletonTable'; -The skeleton table is used to handle the loading of a table. It indicates data for each of the rows are loading by -using the [skelton](https://www.patternfly.org/components/skeleton) component in each cell. Once the data is loaded, the -skeleton table should be replaced with the table component containing the real data. +The **skeleton table** component is used to display placeholder "skeletons" within a table as its contents load. ## Examples From f874585591654ffd67060541b7ddd4b95de261c9 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Thu, 19 Oct 2023 16:51:21 -0400 Subject: [PATCH 06/13] Update packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../extensions/component-groups/examples/Skeleton/Skeleton.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md index 512d5be4..7bcb1492 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md @@ -20,7 +20,7 @@ The **skeleton table** component is used to display placeholder "skeletons" with ### Basic skeleton table -The following is a basic example of a skeleton table. +To indicate that a table's cells are still loading, a basic skeleton table uses the [skeleton](https://www.patternfly.org/components/skeleton) component to place a placeholder skeleton in each cell. Once the data is loaded, the skeleton table is replaced with a table containing the real data.``` ```js file="./SkeletonTableExample.tsx" From 4bfe394ddafdb9f3679b20251fbf9df7f36edfdc Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Thu, 19 Oct 2023 16:51:30 -0400 Subject: [PATCH 07/13] Update packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../component-groups/examples/Skeleton/Skeleton.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md index 7bcb1492..a7374528 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md @@ -26,10 +26,12 @@ To indicate that a table's cells are still loading, a basic skeleton table uses ``` -### Skelton Table loading and replaced with table component +### Full loading simulation + +The following example demonstrates the typical behavior of a skeleton table transitioning to a normal table as the data becomes available. + +To simulate this loading process, select the `Load Table` button and wait for the data to populate. -This example shows how to use the skeleton table to indicate the data is loading, and then replace it with the table component once the data is available. -To simulate the loading of the table use the `Load Table` button below the table. ```js file="./SkeletonTableLoadingExample.tsx" From c6c967408fa921853e6f064d96a175f091812084 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Mon, 23 Oct 2023 13:59:17 -0400 Subject: [PATCH 08/13] Update packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md Co-authored-by: Filip Hlavac <50696716+fhlavac@users.noreply.github.com> --- .../extensions/component-groups/examples/Skeleton/Skeleton.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md index a7374528..3fbf26d9 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md @@ -20,7 +20,7 @@ The **skeleton table** component is used to display placeholder "skeletons" with ### Basic skeleton table -To indicate that a table's cells are still loading, a basic skeleton table uses the [skeleton](https://www.patternfly.org/components/skeleton) component to place a placeholder skeleton in each cell. Once the data is loaded, the skeleton table is replaced with a table containing the real data.``` +To indicate that a table's cells are still loading, a basic skeleton table uses the [skeleton](https://www.patternfly.org/components/skeleton) component to place a placeholder skeleton in each cell. Once the data is loaded, the skeleton table is replaced with a table containing the real data. ```js file="./SkeletonTableExample.tsx" From cb6fe29e6c76c4d7f3dbb914c6c6a30e74df500c Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Mon, 23 Oct 2023 16:12:56 -0400 Subject: [PATCH 09/13] Update packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md Co-authored-by: Filip Hlavac <50696716+fhlavac@users.noreply.github.com> --- .../extensions/component-groups/examples/Skeleton/Skeleton.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md index 3fbf26d9..1286c024 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/Skeleton.md @@ -30,7 +30,7 @@ To indicate that a table's cells are still loading, a basic skeleton table uses The following example demonstrates the typical behavior of a skeleton table transitioning to a normal table as the data becomes available. -To simulate this loading process, select the `Load Table` button and wait for the data to populate. +To simulate this loading process, select the `Reload table` button and wait for the data to populate. ```js file="./SkeletonTableLoadingExample.tsx" From a35f0f2e660d4aedfff52e1474bf5327ef75f3a7 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Mon, 23 Oct 2023 16:13:03 -0400 Subject: [PATCH 10/13] Update packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableLoadingExample.tsx Co-authored-by: Filip Hlavac <50696716+fhlavac@users.noreply.github.com> --- .../examples/Skeleton/SkeletonTableLoadingExample.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableLoadingExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableLoadingExample.tsx index fe4350ae..c12d7b83 100644 --- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableLoadingExample.tsx +++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/Skeleton/SkeletonTableLoadingExample.tsx @@ -92,7 +92,7 @@ export const SkeletonTableExample: React.FC = () => { loadData(); }} > - Load Table + Reload table From 28d8d9a83bae958259048c34bfdf45759d582b29 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Tue, 24 Oct 2023 09:09:32 -0400 Subject: [PATCH 11/13] Removed dark mode code. --- .../module/src/SkeletonTable/SkeletonTable.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/packages/module/src/SkeletonTable/SkeletonTable.tsx b/packages/module/src/SkeletonTable/SkeletonTable.tsx index e241d39b..ffe57a5c 100644 --- a/packages/module/src/SkeletonTable/SkeletonTable.tsx +++ b/packages/module/src/SkeletonTable/SkeletonTable.tsx @@ -1,8 +1,6 @@ import React, { ReactNode } from 'react'; import { Caption, Table, TableProps, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table'; import { Skeleton } from '@patternfly/react-core'; -import { createUseStyles } from 'react-jss'; -import { clsx } from 'clsx'; export type SkeletonTableProps = TableProps & { /** Indicates the table variant */ @@ -20,16 +18,6 @@ export type SkeletonTableProps = TableProps & { } ); -const useStyles = createUseStyles({ - skeleton: { - '&.ins-m-dark': { - '--pf-c-skeleton--BackgroundColor': 'var(--pf-v5-global--palette--black-600)', - '--pf-c-skeleton--after--LinearGradientColorStop1': 'var(--pf-v5-global--palette--black-600)', - '--pf-c-skeleton--after--LinearGradientColorStop2': 'var(--pf-v5--global--palette--black-500)', - '--pf-c-skeleton--after--LinearGradientColorStop3': 'var(--pf-v5-global--palette--black-600)', - }, - }, -}); function hasCustomColumns(props: Record): props is SkeletonTableProps & { columns: ReactNode[]; @@ -39,7 +27,6 @@ function hasCustomColumns(props: Record): props is SkeletonTablePro const SkeletonTable: React.FunctionComponent = (props: SkeletonTableProps) => { const { variant, rows = 5, caption } = props; - const classes = useStyles(); const rowCells = hasCustomColumns(props) ? props.columns.length : props.numberOfColumns; const rowArray = [ ...new Array(rowCells) ]; const bodyRows = [ ...new Array(rows) ].map((_, index) => ( @@ -61,7 +48,7 @@ const SkeletonTable: React.FunctionComponent = (props: Skele ? props.columns.map((c, index) => {c}) : rowArray.map((_, index) => ( - + ))} From 39e9ac455c4316eaaa6e31f2eea7ef96e9ef716c Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Tue, 24 Oct 2023 09:10:28 -0400 Subject: [PATCH 12/13] Removed dark mode code. --- packages/module/src/SkeletonTable/SkeletonTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/module/src/SkeletonTable/SkeletonTable.tsx b/packages/module/src/SkeletonTable/SkeletonTable.tsx index ffe57a5c..f45a4971 100644 --- a/packages/module/src/SkeletonTable/SkeletonTable.tsx +++ b/packages/module/src/SkeletonTable/SkeletonTable.tsx @@ -33,7 +33,7 @@ const SkeletonTable: React.FunctionComponent = (props: Skele {rowArray.map((_, index) => ( - + ))} From 831f8e25b6a8af929476afb9e4849e3fbdbcd317 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Tue, 24 Oct 2023 09:41:50 -0400 Subject: [PATCH 13/13] Updated the snap shot. --- .../__snapshots__/SkeletonTable.test.tsx.snap | 80 +++++++++---------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/packages/module/src/SkeletonTable/__snapshots__/SkeletonTable.test.tsx.snap b/packages/module/src/SkeletonTable/__snapshots__/SkeletonTable.test.tsx.snap index 078521c2..dc85e3f0 100644 --- a/packages/module/src/SkeletonTable/__snapshots__/SkeletonTable.test.tsx.snap +++ b/packages/module/src/SkeletonTable/__snapshots__/SkeletonTable.test.tsx.snap @@ -53,7 +53,7 @@ exports[`SkeletonTable component should render correctly 1`] = ` tabindex="-1" >