@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.31

package/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();

package/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap

@@ -62,28 +62,46 @@ exports[`expandable vertical with subsection 1`] = `
         <li
           class="pf-v5-c-jump-links__item"
         >
-          <a
+          <span
             class="pf-v5-c-jump-links__link"
           >
-            <span
-              class="pf-v5-c-jump-links__link-text"
+            <a
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-link"
+              data-ouia-component-id="OUIA-Generated-Button-link-13"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              href="#"
             >
-              Inactive section
-            </span>
-          </a>
+              <span
+                class="pf-v5-c-jump-links__link-text"
+              >
+                Inactive section
+              </span>
+            </a>
+          </span>
         </li>
         <li
           class="pf-v5-c-jump-links__item"
         >
-          <a
+          <span
             class="pf-v5-c-jump-links__link"
           >
-            <span
-              class="pf-v5-c-jump-links__link-text"
+            <a
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-link"
+              data-ouia-component-id="OUIA-Generated-Button-link-14"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              href="#"
             >
-              Section with active subsection
-            </span>
-          </a>
+              <span
+                class="pf-v5-c-jump-links__link-text"
+              >
+                Section with active subsection
+              </span>
+            </a>
+          </span>
           <ul
             class="pf-v5-c-jump-links__list"
             role="list"
@@ -92,69 +110,114 @@ exports[`expandable vertical with subsection 1`] = `
               aria-current="location"
               class="pf-v5-c-jump-links__item pf-m-current"
             >
-              <a
+              <span
                 class="pf-v5-c-jump-links__link"
               >
-                <span
-                  class="pf-v5-c-jump-links__link-text"
+                <a
+                  aria-disabled="false"
+                  class="pf-v5-c-button pf-m-link"
+                  data-ouia-component-id="OUIA-Generated-Button-link-15"
+                  data-ouia-component-type="PF5/Button"
+                  data-ouia-safe="true"
+                  href="#"
                 >
-                  Active subsection
-                </span>
-              </a>
+                  <span
+                    class="pf-v5-c-jump-links__link-text"
+                  >
+                    Active subsection
+                  </span>
+                </a>
+              </span>
             </li>
             <li
               class="pf-v5-c-jump-links__item"
             >
-              <a
+              <span
                 class="pf-v5-c-jump-links__link"
               >
-                <span
-                  class="pf-v5-c-jump-links__link-text"
+                <a
+                  aria-disabled="false"
+                  class="pf-v5-c-button pf-m-link"
+                  data-ouia-component-id="OUIA-Generated-Button-link-16"
+                  data-ouia-component-type="PF5/Button"
+                  data-ouia-safe="true"
+                  href="#"
                 >
-                  Inactive subsection
-                </span>
-              </a>
+                  <span
+                    class="pf-v5-c-jump-links__link-text"
+                  >
+                    Inactive subsection
+                  </span>
+                </a>
+              </span>
             </li>
             <li
               class="pf-v5-c-jump-links__item"
             >
-              <a
+              <span
                 class="pf-v5-c-jump-links__link"
               >
-                <span
-                  class="pf-v5-c-jump-links__link-text"
+                <a
+                  aria-disabled="false"
+                  class="pf-v5-c-button pf-m-link"
+                  data-ouia-component-id="OUIA-Generated-Button-link-17"
+                  data-ouia-component-type="PF5/Button"
+                  data-ouia-safe="true"
+                  href="#"
                 >
-                  Inactive subsection
-                </span>
-              </a>
+                  <span
+                    class="pf-v5-c-jump-links__link-text"
+                  >
+                    Inactive subsection
+                  </span>
+                </a>
+              </span>
             </li>
           </ul>
         </li>
         <li
           class="pf-v5-c-jump-links__item"
         >
-          <a
+          <span
             class="pf-v5-c-jump-links__link"
           >
-            <span
-              class="pf-v5-c-jump-links__link-text"
+            <a
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-link"
+              data-ouia-component-id="OUIA-Generated-Button-link-18"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              href="#"
             >
-              Inactive section
-            </span>
-          </a>
+              <span
+                class="pf-v5-c-jump-links__link-text"
+              >
+                Inactive section
+              </span>
+            </a>
+          </span>
         </li>
         <li
           class="pf-v5-c-jump-links__item"
         >
-          <a
+          <span
             class="pf-v5-c-jump-links__link"
           >
-            <span
-              class="pf-v5-c-jump-links__link-text"
+            <a
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-link"
+              data-ouia-component-id="OUIA-Generated-Button-link-19"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              href="#"
             >
-              Inactive section
-            </span>
-          </a>
+              <span
+                class="pf-v5-c-jump-links__link-text"
+              >
+                Inactive section
+              </span>
+            </a>
+          </span>
         </li>
       </ul>
     </div>
@@ -180,42 +243,69 @@ exports[`jumplinks centered 1`] = `
         <li
           class="pf-v5-c-jump-links__item"
         >
-          <a
+          <span
             class="pf-v5-c-jump-links__link"
           >
-            <span
-              class="pf-v5-c-jump-links__link-text"
+            <a
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-link"
+              data-ouia-component-id="OUIA-Generated-Button-link-4"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              href="#"
             >
-              Inactive section
-            </span>
-          </a>
+              <span
+                class="pf-v5-c-jump-links__link-text"
+              >
+                Inactive section
+              </span>
+            </a>
+          </span>
         </li>
         <li
           aria-current="location"
           class="pf-v5-c-jump-links__item pf-m-current"
         >
-          <a
+          <span
             class="pf-v5-c-jump-links__link"
           >
-            <span
-              class="pf-v5-c-jump-links__link-text"
+            <a
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-link"
+              data-ouia-component-id="OUIA-Generated-Button-link-5"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              href="#"
             >
-              Active section
-            </span>
-          </a>
+              <span
+                class="pf-v5-c-jump-links__link-text"
+              >
+                Active section
+              </span>
+            </a>
+          </span>
         </li>
         <li
           class="pf-v5-c-jump-links__item"
         >
-          <a
+          <span
             class="pf-v5-c-jump-links__link"
           >
-            <span
-              class="pf-v5-c-jump-links__link-text"
+            <a
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-link"
+              data-ouia-component-id="OUIA-Generated-Button-link-6"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              href="#"
             >
-              Inactive section
-            </span>
-          </a>
+              <span
+                class="pf-v5-c-jump-links__link-text"
+              >
+                Inactive section
+              </span>
+            </a>
+          </span>
         </li>
       </ul>
     </div>
@@ -248,42 +338,69 @@ exports[`jumplinks with label 1`] = `
         <li
           class="pf-v5-c-jump-links__item"
         >
-          <a
+          <span
             class="pf-v5-c-jump-links__link"
           >
-            <span
-              class="pf-v5-c-jump-links__link-text"
+            <a
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-link"
+              data-ouia-component-id="OUIA-Generated-Button-link-7"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              href="#"
             >
-              Inactive section
-            </span>
-          </a>
+              <span
+                class="pf-v5-c-jump-links__link-text"
+              >
+                Inactive section
+              </span>
+            </a>
+          </span>
         </li>
         <li
           aria-current="location"
           class="pf-v5-c-jump-links__item pf-m-current"
         >
-          <a
+          <span
             class="pf-v5-c-jump-links__link"
           >
-            <span
-              class="pf-v5-c-jump-links__link-text"
+            <a
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-link"
+              data-ouia-component-id="OUIA-Generated-Button-link-8"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              href="#"
             >
-              Active section
-            </span>
-          </a>
+              <span
+                class="pf-v5-c-jump-links__link-text"
+              >
+                Active section
+              </span>
+            </a>
+          </span>
         </li>
         <li
           class="pf-v5-c-jump-links__item"
         >
-          <a
+          <span
             class="pf-v5-c-jump-links__link"
           >
-            <span
-              class="pf-v5-c-jump-links__link-text"
+            <a
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-link"
+              data-ouia-component-id="OUIA-Generated-Button-link-9"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              href="#"
             >
-              Inactive section
-            </span>
-          </a>
+              <span
+                class="pf-v5-c-jump-links__link-text"
+              >
+                Inactive section
+              </span>
+            </a>
+          </span>
         </li>
       </ul>
     </div>
@@ -309,42 +426,69 @@ exports[`simple jumplinks 1`] = `
         <li
           class="pf-v5-c-jump-links__item"
         >
-          <a
+          <span
             class="pf-v5-c-jump-links__link"
           >
-            <span
-              class="pf-v5-c-jump-links__link-text"
+            <a
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-link"
+              data-ouia-component-id="OUIA-Generated-Button-link-1"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              href="#"
             >
-              Inactive section
-            </span>
-          </a>
+              <span
+                class="pf-v5-c-jump-links__link-text"
+              >
+                Inactive section
+              </span>
+            </a>
+          </span>
         </li>
         <li
           aria-current="location"
           class="pf-v5-c-jump-links__item pf-m-current"
         >
-          <a
+          <span
             class="pf-v5-c-jump-links__link"
           >
-            <span
-              class="pf-v5-c-jump-links__link-text"
+            <a
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-link"
+              data-ouia-component-id="OUIA-Generated-Button-link-2"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              href="#"
             >
-              Active section
-            </span>
-          </a>
+              <span
+                class="pf-v5-c-jump-links__link-text"
+              >
+                Active section
+              </span>
+            </a>
+          </span>
         </li>
         <li
           class="pf-v5-c-jump-links__item"
         >
-          <a
+          <span
             class="pf-v5-c-jump-links__link"
           >
-            <span
-              class="pf-v5-c-jump-links__link-text"
+            <a
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-link"
+              data-ouia-component-id="OUIA-Generated-Button-link-3"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              href="#"
             >
-              Inactive section
-            </span>
-          </a>
+              <span
+                class="pf-v5-c-jump-links__link-text"
+              >
+                Inactive section
+              </span>
+            </a>
+          </span>
         </li>
       </ul>
     </div>
@@ -377,42 +521,69 @@ exports[`vertical with label 1`] = `
         <li
           class="pf-v5-c-jump-links__item"
         >
-          <a
+          <span
             class="pf-v5-c-jump-links__link"
           >
-            <span
-              class="pf-v5-c-jump-links__link-text"
+            <a
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-link"
+              data-ouia-component-id="OUIA-Generated-Button-link-10"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              href="#"
             >
-              Inactive section
-            </span>
-          </a>
+              <span
+                class="pf-v5-c-jump-links__link-text"
+              >
+                Inactive section
+              </span>
+            </a>
+          </span>
         </li>
         <li
           aria-current="location"
           class="pf-v5-c-jump-links__item pf-m-current"
         >
-          <a
+          <span
             class="pf-v5-c-jump-links__link"
           >
-            <span
-              class="pf-v5-c-jump-links__link-text"
+            <a
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-link"
+              data-ouia-component-id="OUIA-Generated-Button-link-11"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              href="#"
             >
-              Active section
-            </span>
-          </a>
+              <span
+                class="pf-v5-c-jump-links__link-text"
+              >
+                Active section
+              </span>
+            </a>
+          </span>
         </li>
         <li
           class="pf-v5-c-jump-links__item"
         >
-          <a
+          <span
             class="pf-v5-c-jump-links__link"
           >
-            <span
-              class="pf-v5-c-jump-links__link-text"
+            <a
+              aria-disabled="false"
+              class="pf-v5-c-button pf-m-link"
+              data-ouia-component-id="OUIA-Generated-Button-link-12"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              href="#"
             >
-              Inactive section
-            </span>
-          </a>
+              <span
+                class="pf-v5-c-jump-links__link-text"
+              >
+                Inactive section
+              </span>
+            </a>
+          </span>
         </li>
       </ul>
     </div>

package/src/components/JumpLinks/examples/JumpLinksBasic.tsx

@@ -3,8 +3,10 @@ import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
 
 export const JumpLinksBasic: React.FunctionComponent = () => (
   <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>
 );