Skip to content

Commit 783e3e3

Browse files
thatblindgeyethatblindgeye
authored
feat(JumpLinks): consumed Penta updates (#10027)
* feat(JumpLinks): consumed Penta updates * Added button component instead of button classes * Updated onClick typing in JumpLinks * Add type assertion for currentTarget in JumpLinks
1 parent 7205b29 commit 783e3e3

File tree

10 files changed

+363
-165
lines changed

10 files changed

+363
-165
lines changed

‎packages/react-core/src/components/JumpLinks/JumpLinks.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
162162
const itemIndex = jumpLinkIndex++;
163163
const scrollItem = scrollItems[itemIndex];
164164
return React.cloneElement(child as React.ReactElement<JumpLinksItemProps>, {
165-
onClick(ev: React.MouseEvent<HTMLAnchorElement>) {
165+
onClick(ev: React.MouseEvent) {
166166
isLinkClicked.current = true;
167167
// Items might have rendered after this component. Do a quick refresh.
168168
let newScrollItems;
@@ -193,7 +193,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
193193
scrollableElement.scrollTo(0, newScrollItem.offsetTop - offset);
194194
}
195195
newScrollItem.focus();
196-
window.history.pushState('', '', ev.currentTarget.href);
196+
window.history.pushState('', '', (ev.currentTarget as HTMLAnchorElement).href);
197197
ev.preventDefault();
198198
setActiveIndex(itemIndex);
199199
}

‎packages/react-core/src/components/JumpLinks/JumpLinksItem.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,19 @@ import * as React from 'react';
22
import { css } from '@patternfly/react-styles';
33
import styles from '@patternfly/react-styles/css/components/JumpLinks/jump-links';
44
import { JumpLinksList } from './JumpLinksList';
5+
import { Button, ButtonVariant } from '../Button';
56

67
export interface JumpLinksItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick'> {
78
/** Whether this item is active. Parent JumpLinks component sets this when passed a `scrollableSelector`. */
89
isActive?: boolean;
910
/** Href for this link */
10-
href?: string;
11+
href: string;
1112
/** Selector or HTMLElement to spy on */
1213
node?: string | HTMLElement;
1314
/** Text to be rendered inside span */
1415
children?: React.ReactNode;
1516
/** Click handler for anchor tag. Parent JumpLinks components tap into this. */
16-
onClick?: (ev: React.MouseEvent<HTMLAnchorElement>) => void;
17+
onClick?: (ev: React.MouseEvent) => void;
1718
/** Class to add to li */
1819
className?: string;
1920
}
@@ -38,9 +39,11 @@ export const JumpLinksItem: React.FunctionComponent<JumpLinksItemProps> = ({
3839
{...(isActive && { 'aria-current': 'location' })}
3940
{...props}
4041
>
41-
<a className={styles.jumpLinksLink} href={href} onClick={onClick}>
42-
<span className={styles.jumpLinksLinkText}>{children}</span>
43-
</a>
42+
<span className={styles.jumpLinksLink}>
43+
<Button variant={ButtonVariant.link} component="a" href={href} onClick={onClick}>
44+
<span className={styles.jumpLinksLinkText}>{children}</span>
45+
</Button>
46+
</span>
4447
{sublists}
4548
</li>
4649
);

‎packages/react-core/src/components/JumpLinks/__tests__/JumpLinks.test.tsx‎

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,11 @@ import { JumpLinksList } from '../JumpLinksList';
77
test('simple jumplinks', () => {
88
const { asFragment } = render(
99
<JumpLinks>
10-
<JumpLinksItem>Inactive section</JumpLinksItem>
11-
<JumpLinksItem isActive>Active section</JumpLinksItem>
12-
<JumpLinksItem>Inactive section</JumpLinksItem>
10+
<JumpLinksItem href="#">Inactive section</JumpLinksItem>
11+
<JumpLinksItem href="#" isActive>
12+
Active section
13+
</JumpLinksItem>
14+
<JumpLinksItem href="#">Inactive section</JumpLinksItem>
1315
</JumpLinks>
1416
);
1517
expect(asFragment()).toMatchSnapshot();
@@ -18,9 +20,11 @@ test('simple jumplinks', () => {
1820
test('jumplinks centered', () => {
1921
const { asFragment } = render(
2022
<JumpLinks isCentered>
21-
<JumpLinksItem>Inactive section</JumpLinksItem>
22-
<JumpLinksItem isActive>Active section</JumpLinksItem>
23-
<JumpLinksItem>Inactive section</JumpLinksItem>
23+
<JumpLinksItem href="#">Inactive section</JumpLinksItem>
24+
<JumpLinksItem href="#" isActive>
25+
Active section
26+
</JumpLinksItem>
27+
<JumpLinksItem href="#">Inactive section</JumpLinksItem>
2428
</JumpLinks>
2529
);
2630
expect(asFragment()).toMatchSnapshot();
@@ -29,9 +33,11 @@ test('jumplinks centered', () => {
2933
test('jumplinks with label', () => {
3034
const { asFragment } = render(
3135
<JumpLinks isCentered label="Jump to section">
32-
<JumpLinksItem>Inactive section</JumpLinksItem>
33-
<JumpLinksItem isActive>Active section</JumpLinksItem>
34-
<JumpLinksItem>Inactive section</JumpLinksItem>
36+
<JumpLinksItem href="#">Inactive section</JumpLinksItem>
37+
<JumpLinksItem href="#" isActive>
38+
Active section
39+
</JumpLinksItem>
40+
<JumpLinksItem href="#">Inactive section</JumpLinksItem>
3541
</JumpLinks>
3642
);
3743
expect(asFragment()).toMatchSnapshot();
@@ -40,9 +46,11 @@ test('jumplinks with label', () => {
4046
test('vertical with label', () => {
4147
const { asFragment } = render(
4248
<JumpLinks isVertical alwaysShowLabel label="Jump to section">
43-
<JumpLinksItem>Inactive section</JumpLinksItem>
44-
<JumpLinksItem isActive>Active section</JumpLinksItem>
45-
<JumpLinksItem>Inactive section</JumpLinksItem>
49+
<JumpLinksItem href="#">Inactive section</JumpLinksItem>
50+
<JumpLinksItem href="#" isActive>
51+
Active section
52+
</JumpLinksItem>
53+
<JumpLinksItem href="#">Inactive section</JumpLinksItem>
4654
</JumpLinks>
4755
);
4856
expect(asFragment()).toMatchSnapshot();
@@ -51,17 +59,19 @@ test('vertical with label', () => {
5159
test('expandable vertical with subsection', () => {
5260
const { asFragment } = render(
5361
<JumpLinks isVertical label="Jump to section" expandable={{ default: 'expandable' }}>
54-
<JumpLinksItem>Inactive section</JumpLinksItem>
55-
<JumpLinksItem>
62+
<JumpLinksItem href="#">Inactive section</JumpLinksItem>
63+
<JumpLinksItem href="#">
5664
Section with active subsection
5765
<JumpLinksList>
58-
<JumpLinksItem isActive>Active subsection</JumpLinksItem>
59-
<JumpLinksItem>Inactive subsection</JumpLinksItem>
60-
<JumpLinksItem>Inactive subsection</JumpLinksItem>
66+
<JumpLinksItem href="#" isActive>
67+
Active subsection
68+
</JumpLinksItem>
69+
<JumpLinksItem href="#">Inactive subsection</JumpLinksItem>
70+
<JumpLinksItem href="#">Inactive subsection</JumpLinksItem>
6171
</JumpLinksList>
6272
</JumpLinksItem>
63-
<JumpLinksItem>Inactive section</JumpLinksItem>
64-
<JumpLinksItem>Inactive section</JumpLinksItem>
73+
<JumpLinksItem href="#">Inactive section</JumpLinksItem>
74+
<JumpLinksItem href="#">Inactive section</JumpLinksItem>
6575
</JumpLinks>
6676
);
6777
expect(asFragment()).toMatchSnapshot();

0 commit comments

Comments
 (0)