Skip to content

Commit 0e5b35b

Browse files
author
Eric Olkowski
committed
feat(JumpLinks): consumed Penta updates
1 parent 33b82ec commit 0e5b35b

File tree

9 files changed

+284
-162
lines changed

9 files changed

+284
-162
lines changed

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import * as React from 'react';
22
import { css } from '@patternfly/react-styles';
33
import styles from '@patternfly/react-styles/css/components/JumpLinks/jump-links';
4+
import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
45
import { JumpLinksList } from './JumpLinksList';
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 */
@@ -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+
<a className={css(buttonStyles.button, buttonStyles.modifiers.link)} href={href} onClick={onClick}>
44+
<span className={styles.jumpLinksLinkText}>{children}</span>
45+
</a>
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)