@patternfly/react-core 6.0.0-alpha.8 → 6.0.0-alpha.9

package/src/components/Accordion/examples/AccordionDefinitionList.tsx

@@ -14,17 +14,16 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
 
   return (
     <Accordion asDefinitionList>
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle1'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle1');
           }}
-          isExpanded={expanded === 'def-list-toggle1'}
           id="def-list-toggle1"
         >
           Item one
         </AccordionToggle>
-        <AccordionContent id="def-list-expand1" isHidden={expanded !== 'def-list-toggle1'}>
+        <AccordionContent id="def-list-expand1">
           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
@@ -32,17 +31,16 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle2'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle2');
           }}
-          isExpanded={expanded === 'def-list-toggle2'}
           id="def-list-toggle2"
         >
           Item two
         </AccordionToggle>
-        <AccordionContent id="def-list-expand2" isHidden={expanded !== 'def-list-toggle2'}>
+        <AccordionContent id="def-list-expand2">
           <p>
             Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
             ultrices, faucibus erat id, maximus nunc.
@@ -50,32 +48,30 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle3'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle3');
           }}
-          isExpanded={expanded === 'def-list-toggle3'}
           id="def-list-toggle3"
         >
           Item three
         </AccordionToggle>
-        <AccordionContent id="def-list-expand3" isHidden={expanded !== 'def-list-toggle3'}>
+        <AccordionContent id="def-list-expand3">
           <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle4'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle4');
           }}
-          isExpanded={expanded === 'def-list-toggle4'}
           id="def-list-toggle4"
         >
           Item four
         </AccordionToggle>
-        <AccordionContent id="def-list-expand4" isHidden={expanded !== 'def-list-toggle4'}>
+        <AccordionContent id="def-list-expand4">
           <p>
             Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
             sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
@@ -88,17 +84,16 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle5'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle5');
           }}
-          isExpanded={expanded === 'def-list-toggle5'}
           id="def-list-toggle5"
         >
           Item five
         </AccordionToggle>
-        <AccordionContent id="def-list-expand5" isHidden={expanded !== 'def-list-toggle5'}>
+        <AccordionContent id="def-list-expand5">
           <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
         </AccordionContent>
       </AccordionItem>

package/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx

@@ -13,62 +13,41 @@ export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent =
 
   return (
     <Accordion asDefinitionList={false}>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle1')}
-          isExpanded={expanded.includes('ex2-toggle1')}
-          id="ex2-toggle1"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle1')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle1')} id="ex2-toggle1">
           Item one
         </AccordionToggle>
-        <AccordionContent id="ex2-expand1" isHidden={!expanded.includes('ex2-toggle1')} isFixed>
+        <AccordionContent id="ex2-expand1" isFixed>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
           </p>
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle2')}
-          isExpanded={expanded.includes('ex2-toggle2')}
-          id="ex2-toggle2"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle2')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle2')} id="ex2-toggle2">
           Item two
         </AccordionToggle>
-        <AccordionContent id="ex2-expand2" isHidden={!expanded.includes('ex2-toggle2')} isFixed>
+        <AccordionContent id="ex2-expand2" isFixed>
           <p>
             Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
             ultrices, faucibus erat id, maximus nunc.
           </p>
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle3')}
-          isExpanded={expanded.includes('ex2-toggle3')}
-          id="ex2-toggle3"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle3')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle3')} id="ex2-toggle3">
           Item three
         </AccordionToggle>
-        <AccordionContent id="ex2-expand3" isHidden={!expanded.includes('ex2-toggle3')} isFixed>
+        <AccordionContent id="ex2-expand3" isFixed>
           <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle4')}
-          isExpanded={expanded.includes('ex2-toggle4')}
-          id="ex2-toggle4"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle4')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle4')} id="ex2-toggle4">
           Item four
         </AccordionToggle>
-        <AccordionContent
-          aria-labelledby="ex2-toggle4"
-          id="ex2-expand4"
-          isHidden={!expanded.includes('ex2-toggle4')}
-          isFixed
-        >
+        <AccordionContent aria-labelledby="ex2-toggle4" id="ex2-expand4" isFixed>
           <p>
             Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
             sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
@@ -89,15 +68,11 @@ export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent =
           </p>
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle5')}
-          isExpanded={expanded.includes('ex2-toggle5')}
-          id="ex2-toggle5"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle5')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle5')} id="ex2-toggle5">
           Item five
         </AccordionToggle>
-        <AccordionContent id="ex2-expand5" isHidden={!expanded.includes('ex2-toggle5')} isFixed>
+        <AccordionContent id="ex2-expand5" isFixed>
           <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
         </AccordionContent>
       </AccordionItem>

package/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx

@@ -14,17 +14,16 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
 
   return (
     <Accordion asDefinitionList={false}>
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle1'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle1');
           }}
-          isExpanded={expanded === 'ex-toggle1'}
           id="ex-toggle1"
         >
           Item one
         </AccordionToggle>
-        <AccordionContent id="ex-expand1" isHidden={expanded !== 'ex-toggle1'}>
+        <AccordionContent id="ex-expand1">
           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
@@ -32,17 +31,16 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle2'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle2');
           }}
-          isExpanded={expanded === 'ex-toggle2'}
           id="ex-toggle2"
         >
           Item two
         </AccordionToggle>
-        <AccordionContent id="ex-expand2" isHidden={expanded !== 'ex-toggle2'}>
+        <AccordionContent id="ex-expand2">
           <p>
             Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
             ultrices, faucibus erat id, maximus nunc.
@@ -50,32 +48,30 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle3'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle3');
           }}
-          isExpanded={expanded === 'ex-toggle3'}
           id="ex-toggle3"
         >
           Item three
         </AccordionToggle>
-        <AccordionContent id="ex-expand3" isHidden={expanded !== 'ex-toggle3'}>
+        <AccordionContent id="ex-expand3">
           <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle4'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle4');
           }}
-          isExpanded={expanded === 'ex-toggle4'}
           id="ex-toggle4"
         >
           Item four
         </AccordionToggle>
-        <AccordionContent id="ex-expand4" isHidden={expanded !== 'ex-toggle4'}>
+        <AccordionContent id="ex-expand4">
           <p>
             Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
             sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
@@ -88,17 +84,16 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle5'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle5');
           }}
-          isExpanded={expanded === 'ex-toggle5'}
           id="ex-toggle5"
         >
           Item five
         </AccordionToggle>
-        <AccordionContent id="ex-expand5" isHidden={expanded !== 'ex-toggle5'}>
+        <AccordionContent id="ex-expand5">
           <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
         </AccordionContent>
       </AccordionItem>

package/src/demos/examples/Card/CardWithAccordion.tsx

@@ -33,7 +33,7 @@ export const CardWithAccordion: React.FunctionComponent = () => {
       </CardHeader>
       <CardBody>
         <Accordion>
-          <AccordionItem>
+          <AccordionItem isExpanded={openCPU === 'cpu1'}>
             <AccordionToggle
               id="cpu1-toggle"
               onClick={() => {
@@ -43,11 +43,10 @@ export const CardWithAccordion: React.FunctionComponent = () => {
                   setOpenCPU('cpu1');
                 }
               }}
-              isExpanded={openCPU === 'cpu1'}
             >
               CPU 1
             </AccordionToggle>
-            <AccordionContent isHidden={openCPU !== 'cpu1'}>
+            <AccordionContent>
               <Grid hasGutter>
                 <Grid hasGutter>
                   <GridItem md={4}>
@@ -191,7 +190,7 @@ export const CardWithAccordion: React.FunctionComponent = () => {
               </Grid>
             </AccordionContent>
           </AccordionItem>
-          <AccordionItem>
+          <AccordionItem isExpanded={openCPU === 'cpu2'}>
             <AccordionToggle
               id="cpu2-toggle"
               onClick={() => {
@@ -201,11 +200,10 @@ export const CardWithAccordion: React.FunctionComponent = () => {
                   setOpenCPU('cpu2');
                 }
               }}
-              isExpanded={openCPU === 'cpu2'}
             >
               CPU 2
             </AccordionToggle>
-            <AccordionContent isHidden={openCPU !== 'cpu2'}>
+            <AccordionContent>
               <Grid hasGutter>
                 <Grid hasGutter>
                   <GridItem md={4}>
@@ -349,7 +347,7 @@ export const CardWithAccordion: React.FunctionComponent = () => {
               </Grid>
             </AccordionContent>
           </AccordionItem>
-          <AccordionItem>
+          <AccordionItem isExpanded={openCPU === 'cpu3'}>
             <AccordionToggle
               id="cpu3-toggle"
               onClick={() => {
@@ -359,11 +357,10 @@ export const CardWithAccordion: React.FunctionComponent = () => {
                   setOpenCPU('cpu3');
                 }
               }}
-              isExpanded={openCPU === 'cpu3'}
             >
               CPU 3
             </AccordionToggle>
-            <AccordionContent isHidden={openCPU !== 'cpu3'}>
+            <AccordionContent>
               <Grid hasGutter>
                 <Grid hasGutter>
                   <GridItem md={4}>

package/src/components/Accordion/__tests__/Generated/AccordionContent.test.tsx

@@ -1,23 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AccordionContent } from '../../AccordionContent';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AccordionContent should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(
-    <AccordionContent
-      children={<>ReactNode</>}
-      className={"''"}
-      id={"''"}
-      isHidden={false}
-      isFixed={false}
-      aria-label={"''"}
-      component={() => <div />}
-    />
-  );
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/components/Accordion/__tests__/Generated/AccordionItem.test.tsx

@@ -1,13 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AccordionItem } from '../../AccordionItem';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AccordionItem should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(<AccordionItem children={<>ReactNode</>} />);
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/components/Accordion/__tests__/Generated/AccordionToggle.test.tsx

@@ -1,21 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AccordionToggle } from '../../AccordionToggle';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AccordionToggle should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(
-    <AccordionToggle
-      children={<>ReactNode</>}
-      className={"''"}
-      isExpanded={false}
-      id={'string'}
-      component={() => <div />}
-    />
-  );
-  expect(asFragment()).toMatchSnapshot();
-});

package/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionContent.test.tsx.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AccordionContent should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  <div />
-</DocumentFragment>
-`;

package/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionItem.test.tsx.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AccordionItem should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  ReactNode
-</DocumentFragment>
-`;

package/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionToggle.test.tsx.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AccordionToggle should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  <div />
-</DocumentFragment>
-`;