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
patternfly · Feb 13, 2024 · 783e3e3 · 783e3e3
1 parent 7205b29
commit 783e3e3
Show file tree

Hide file tree

Showing 10 changed files with 363 additions and 165 deletions.
diff --git a/packages/react-core/src/components/JumpLinks/JumpLinks.tsx b/packages/react-core/src/components/JumpLinks/JumpLinks.tsx
@@ -162,7 +162,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
             const itemIndex = jumpLinkIndex++;
             const scrollItem = scrollItems[itemIndex];
             return React.cloneElement(child as React.ReactElement<JumpLinksItemProps>, {
-              onClick(ev: React.MouseEvent<HTMLAnchorElement>) {
+              onClick(ev: React.MouseEvent) {
                 isLinkClicked.current = true;
                 // Items might have rendered after this component. Do a quick refresh.
                 let newScrollItems;
@@ -193,7 +193,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
                     scrollableElement.scrollTo(0, newScrollItem.offsetTop - offset);
                   }
                   newScrollItem.focus();
-                  window.history.pushState('', '', ev.currentTarget.href);
+                  window.history.pushState('', '', (ev.currentTarget as HTMLAnchorElement).href);
                   ev.preventDefault();
                   setActiveIndex(itemIndex);
                 }

diff --git a/packages/react-core/src/components/JumpLinks/JumpLinksItem.tsx b/packages/react-core/src/components/JumpLinks/JumpLinksItem.tsx
@@ -2,18 +2,19 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/JumpLinks/jump-links';
 import { JumpLinksList } from './JumpLinksList';
+import { Button, ButtonVariant } from '../Button';
 
 export interface JumpLinksItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick'> {
   /** Whether this item is active. Parent JumpLinks component sets this when passed a `scrollableSelector`. */
   isActive?: boolean;
   /** Href for this link */
-  href?: string;
+  href: string;
   /** Selector or HTMLElement to spy on */
   node?: string | HTMLElement;
   /** Text to be rendered inside span */
   children?: React.ReactNode;
   /** Click handler for anchor tag. Parent JumpLinks components tap into this. */
-  onClick?: (ev: React.MouseEvent<HTMLAnchorElement>) => void;
+  onClick?: (ev: React.MouseEvent) => void;
   /** Class to add to li */
   className?: string;
 }
@@ -38,9 +39,11 @@ export const JumpLinksItem: React.FunctionComponent<JumpLinksItemProps> = ({
       {...(isActive && { 'aria-current': 'location' })}
       {...props}
     >
-      <a className={styles.jumpLinksLink} href={href} onClick={onClick}>
-        <span className={styles.jumpLinksLinkText}>{children}</span>
-      </a>
+      <span className={styles.jumpLinksLink}>
+        <Button variant={ButtonVariant.link} component="a" href={href} onClick={onClick}>
+          <span className={styles.jumpLinksLinkText}>{children}</span>
+        </Button>
+      </span>
       {sublists}
     </li>
   );

diff --git a/packages/react-core/src/components/JumpLinks/__tests__/JumpLinks.test.tsx b/packages/react-core/src/components/JumpLinks/__tests__/JumpLinks.test.tsx
@@ -7,9 +7,11 @@ import { JumpLinksList } from '../JumpLinksList';
 test('simple jumplinks', () => {
   const { asFragment } = render(
     <JumpLinks>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem isActive>Active section</JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#" isActive>
+        Active section
+      </JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     </JumpLinks>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -18,9 +20,11 @@ test('simple jumplinks', () => {
 test('jumplinks centered', () => {
   const { asFragment } = render(
     <JumpLinks isCentered>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem isActive>Active section</JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#" isActive>
+        Active section
+      </JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     </JumpLinks>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -29,9 +33,11 @@ test('jumplinks centered', () => {
 test('jumplinks with label', () => {
   const { asFragment } = render(
     <JumpLinks isCentered label="Jump to section">
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem isActive>Active section</JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#" isActive>
+        Active section
+      </JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     </JumpLinks>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -40,9 +46,11 @@ test('jumplinks with label', () => {
 test('vertical with label', () => {
   const { asFragment } = render(
     <JumpLinks isVertical alwaysShowLabel label="Jump to section">
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem isActive>Active section</JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#" isActive>
+        Active section
+      </JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     </JumpLinks>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -51,17 +59,19 @@ test('vertical with label', () => {
 test('expandable vertical with subsection', () => {
   const { asFragment } = render(
     <JumpLinks isVertical label="Jump to section" expandable={{ default: 'expandable' }}>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">
         Section with active subsection
         <JumpLinksList>
-          <JumpLinksItem isActive>Active subsection</JumpLinksItem>
-          <JumpLinksItem>Inactive subsection</JumpLinksItem>
-          <JumpLinksItem>Inactive subsection</JumpLinksItem>
+          <JumpLinksItem href="#" isActive>
+            Active subsection
+          </JumpLinksItem>
+          <JumpLinksItem href="#">Inactive subsection</JumpLinksItem>
+          <JumpLinksItem href="#">Inactive subsection</JumpLinksItem>
         </JumpLinksList>
       </JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
-      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+      <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     </JumpLinks>
   );
   expect(asFragment()).toMatchSnapshot();