diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap index fdd2a8a5373..c3370001029 100644 --- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap +++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap @@ -1225,12 +1225,20 @@ exports[`Page Check page to verify skip to content points to main content region data-testid="page-test-id" id="PageId" > - - Skip to Content - + + Skip to Content + +
diff --git a/packages/react-core/src/components/SkipToContent/SkipToContent.tsx b/packages/react-core/src/components/SkipToContent/SkipToContent.tsx index fc65503ad54..5f1ccea1669 100644 --- a/packages/react-core/src/components/SkipToContent/SkipToContent.tsx +++ b/packages/react-core/src/components/SkipToContent/SkipToContent.tsx @@ -1,45 +1,28 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/SkipToContent/skip-to-content'; -import buttonStyles from '@patternfly/react-styles/css/components/Button/button'; import { css } from '@patternfly/react-styles'; -import { PickOptional } from '../../helpers/typeUtils'; +import { Button, ButtonVariant } from '../Button'; -export interface SkipToContentProps extends React.HTMLProps { +export interface SkipToContentProps extends React.HTMLProps { /** The skip to content link. */ href: string; /** Content to display within the skip to content component, typically a string. */ children?: React.ReactNode; /** Additional styles to apply to the skip to content component. */ className?: string; - /** Forces the skip to content to display. This is primarily for demonstration purposes and would not normally be used. */ - show?: boolean; } -export class SkipToContent extends React.Component { - static displayName = 'SkipToContent'; - static defaultProps: PickOptional = { - show: false - }; - componentRef = React.createRef(); +export const SkipToContent: React.FunctionComponent = ({ + children = null, + className = '', + href, + ...props +}: SkipToContentProps) => ( +
+ +
+); - componentDidMount() { - if (this.props.show && this.componentRef.current) { - this.componentRef.current.focus(); - } - } - - render() { - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { children, className, href, show, type, ...rest } = this.props; - return ( - - {children} - - ); - } -} +SkipToContent.displayName = 'SkipToContent'; diff --git a/packages/react-core/src/components/SkipToContent/__tests__/SkipToContent.test.tsx b/packages/react-core/src/components/SkipToContent/__tests__/SkipToContent.test.tsx index 0f4553df0c8..9299f5d1c9b 100644 --- a/packages/react-core/src/components/SkipToContent/__tests__/SkipToContent.test.tsx +++ b/packages/react-core/src/components/SkipToContent/__tests__/SkipToContent.test.tsx @@ -10,8 +10,3 @@ test('Verify Skip To Content', () => { expect(asFragment()).toMatchSnapshot(); }); -test('Verify Skip To Content if forced to display', () => { - const { asFragment } = render(); - // Add a useful assertion here. - expect(asFragment()).toMatchSnapshot(); -}); diff --git a/packages/react-core/src/components/SkipToContent/__tests__/__snapshots__/SkipToContent.test.tsx.snap b/packages/react-core/src/components/SkipToContent/__tests__/__snapshots__/SkipToContent.test.tsx.snap index dddf3039b73..7035200c87c 100644 --- a/packages/react-core/src/components/SkipToContent/__tests__/__snapshots__/SkipToContent.test.tsx.snap +++ b/packages/react-core/src/components/SkipToContent/__tests__/__snapshots__/SkipToContent.test.tsx.snap @@ -2,18 +2,17 @@ exports[`Verify Skip To Content 1`] = ` - - -`; - -exports[`Verify Skip To Content if forced to display 1`] = ` - - + `; diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json index fc1544a0bf8..4d69ce5475a 100644 --- a/packages/react-integration/demo-app-ts/package.json +++ b/packages/react-integration/demo-app-ts/package.json @@ -9,7 +9,7 @@ "serve:demo-app": "node scripts/serve" }, "dependencies": { - "@patternfly/react-core": "^5.0.0-alpha.15", + "@patternfly/react-core": "^5.0.0-alpha.16", "react": "^18", "react-dom": "^18", "react-router": "^5.3.3",