feat(Accordion): pulled in Penta updates (#9876)

* feat(Accordion): pulled in Penta updates * Updated unit tests * Updated demo app * Updated card with accordion demo
patternfly · Jan 4, 2024 · e7ebfc0 · e7ebfc0
1 parent 5aae45c
commit e7ebfc0
Show file tree

Hide file tree

Showing 21 changed files with 220 additions and 294 deletions.
diff --git a/packages/react-core/src/components/Accordion/AccordionContent.tsx b/packages/react-core/src/components/Accordion/AccordionContent.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
-import { AccordionContext } from './AccordionContext';
+import { AccordionContext, AccordionItemContext } from './AccordionContext';
 import { AccordionExpandableContentBody } from './AccordionExpandableContentBody';
 
 export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
@@ -11,8 +11,6 @@ export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Identify the AccordionContent item  */
   id?: string;
-  /** Flag to show if the expanded content of the Accordion item is visible  */
-  isHidden?: boolean;
   /** Flag to indicate Accordion content is fixed  */
   isFixed?: boolean;
   /** Adds accessible text to the Accordion content */
@@ -29,7 +27,6 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
   className = '',
   children = null,
   id = '',
-  isHidden = false,
   isFixed = false,
   isCustomContent = false,
   'aria-label': ariaLabel = '',
@@ -39,16 +36,17 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
 }: AccordionContentProps) => {
   const [hasScrollbar, setHasScrollbar] = React.useState(false);
   const containerRef = React.useRef(null);
+  const { isExpanded } = React.useContext(AccordionItemContext);
 
   React.useEffect(() => {
-    if (containerRef?.current && isFixed && !isHidden) {
+    if (containerRef?.current && isFixed && isExpanded) {
       const { offsetHeight, scrollHeight } = containerRef.current;
 
       setHasScrollbar(offsetHeight < scrollHeight);
     } else if (!isFixed) {
       setHasScrollbar(false);
     }
-  }, [containerRef, isFixed, isHidden]);
+  }, [containerRef, isFixed, isExpanded]);
 
   return (
     <AccordionContext.Consumer>
@@ -58,13 +56,8 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
           <Container
             ref={containerRef}
             id={id}
-            className={css(
-              styles.accordionExpandableContent,
-              isFixed && styles.modifiers.fixed,
-              !isHidden && styles.modifiers.expanded,
-              className
-            )}
-            hidden={isHidden}
+            className={css(styles.accordionExpandableContent, isFixed && styles.modifiers.fixed, className)}
+            hidden={!isExpanded}
             {...(ariaLabel && { 'aria-label': ariaLabel })}
             {...(ariaLabelledby && { 'aria-labelledby': ariaLabelledby })}
             {...(hasScrollbar && { tabIndex: 0 })}

diff --git a/packages/react-core/src/components/Accordion/AccordionContext.ts b/packages/react-core/src/components/Accordion/AccordionContext.ts
@@ -5,4 +5,9 @@ interface AccordionContextProps {
   ToggleContainer: React.ElementType;
 }
 
+interface AccordionItemContextProps {
+  isExpanded?: boolean;
+}
+
 export const AccordionContext = React.createContext<Partial<AccordionContextProps>>({});
+export const AccordionItemContext = React.createContext({} as AccordionItemContextProps);
diff --git a/packages/react-core/src/components/Accordion/AccordionItem.tsx b/packages/react-core/src/components/Accordion/AccordionItem.tsx
@@ -1,11 +1,28 @@
 import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
+import { AccordionItemContext } from './AccordionContext';
 
 export interface AccordionItemProps {
-  /** Content rendered inside the Accordion item  */
+  /** Content rendered inside the accordion item. */
   children?: React.ReactNode;
+  /** Additional classes added to the accordion item. */
+  className?: string;
+  /** Flag to indicate whether the accordion item is expanded. */
+  isExpanded?: boolean;
 }
 
-export const AccordionItem: React.FunctionComponent<AccordionItemProps> = ({ children = null }: AccordionItemProps) => (
-  <React.Fragment>{children}</React.Fragment>
+export const AccordionItem: React.FunctionComponent<AccordionItemProps> = ({
+  children = null,
+  className,
+  isExpanded: isExpandedProp = false
+}: AccordionItemProps) => (
+  <AccordionItemContext.Provider
+    value={{
+      isExpanded: isExpandedProp
+    }}
+  >
+    <div className={css(styles.accordionItem, isExpandedProp && styles.modifiers.expanded, className)}>{children}</div>
+  </AccordionItemContext.Provider>
 );
 AccordionItem.displayName = 'AccordionItem';
diff --git a/packages/react-core/src/components/Accordion/AccordionToggle.tsx b/packages/react-core/src/components/Accordion/AccordionToggle.tsx
@@ -2,16 +2,14 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import { AccordionContext } from './AccordionContext';
+import { AccordionContext, AccordionItemContext } from './AccordionContext';
 
 export interface AccordionToggleProps
   extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
   /** Content rendered inside the Accordion toggle  */
   children?: React.ReactNode;
   /** Additional classes added to the Accordion Toggle  */
   className?: string;
-  /** Flag to show if the expanded content of the Accordion item is visible  */
-  isExpanded?: boolean;
   /** Identify the Accordion toggle number  */
   id: string;
   /** Container to override the default for toggle */
@@ -21,31 +19,35 @@ export interface AccordionToggleProps
 export const AccordionToggle: React.FunctionComponent<AccordionToggleProps> = ({
   className = '',
   id,
-  isExpanded = false,
   children = null,
   component,
   ...props
-}: AccordionToggleProps) => (
-  <AccordionContext.Consumer>
-    {({ ToggleContainer }) => {
-      const Container = component || ToggleContainer;
-      return (
-        <Container>
-          <button
-            id={id}
-            className={css(styles.accordionToggle, isExpanded && styles.modifiers.expanded, className)}
-            aria-expanded={isExpanded}
-            type="button"
-            {...props}
-          >
-            <span className={css(styles.accordionToggleText)}>{children}</span>
-            <span className={css(styles.accordionToggleIcon)}>
-              <AngleRightIcon />
-            </span>
-          </button>
-        </Container>
-      );
-    }}
-  </AccordionContext.Consumer>
-);
+}: AccordionToggleProps) => {
+  const { isExpanded } = React.useContext(AccordionItemContext);
+
+  return (
+    <AccordionContext.Consumer>
+      {({ ToggleContainer }) => {
+        const Container = component || ToggleContainer;
+
+        return (
+          <Container>
+            <button
+              id={id}
+              className={css(styles.accordionToggle, className)}
+              aria-expanded={isExpanded}
+              type="button"
+              {...props}
+            >
+              <span className={css(styles.accordionToggleText)}>{children}</span>
+              <span className={css(styles.accordionToggleIcon)}>
+                <AngleRightIcon />
+              </span>
+            </button>
+          </Container>
+        );
+      }}
+    </AccordionContext.Consumer>
+  );
+};
 AccordionToggle.displayName = 'AccordionToggle';