feat(Accordion): Added support for bordered, display large … (#6085)

* feat(Accordion): Added support for bordered modifiers, display large and mutilple body content * update prop name to be flexible Co-authored-by: Titani <tlabaj@redaht.com>
patternfly · Jul 30, 2021 · da59273 · da59273
1 parent 3e9aa7e
commit da59273
Show file tree

Hide file tree

Showing 9 changed files with 630 additions and 167 deletions.
diff --git a/packages/react-core/src/components/Accordion/Accordion.tsx b/packages/react-core/src/components/Accordion/Accordion.tsx
@@ -14,6 +14,10 @@ export interface AccordionProps extends React.HTMLProps<HTMLDListElement> {
   headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   /** Flag to indicate whether use definition list or div */
   asDefinitionList?: boolean;
+  /** Flag to indicate the accordion had a border */
+  isBordered?: boolean;
+  /** Display size variant. */
+  displaySize?: 'default' | 'large';
 }
 
 export const Accordion: React.FunctionComponent<AccordionProps> = ({
@@ -22,11 +26,22 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
   'aria-label': ariaLabel = '',
   headingLevel = 'h3',
   asDefinitionList = true,
+  isBordered = false,
+  displaySize = 'default',
   ...props
 }: AccordionProps) => {
   const AccordionList: any = asDefinitionList ? 'dl' : 'div';
   return (
-    <AccordionList className={css(styles.accordion, className)} aria-label={ariaLabel} {...props}>
+    <AccordionList
+      className={css(
+        styles.accordion,
+        isBordered && styles.modifiers.bordered,
+        displaySize === 'large' && styles.modifiers.displayLg,
+        className
+      )}
+      aria-label={ariaLabel}
+      {...props}
+    >
       <AccordionContext.Provider
         value={{
           ContentContainer: asDefinitionList ? 'dd' : 'div',

diff --git a/packages/react-core/src/components/Accordion/AccordionContent.tsx b/packages/react-core/src/components/Accordion/AccordionContent.tsx
@@ -2,6 +2,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 { AccordionExpandedContentBody } from './AccordionExpandedContentBody';
 
 export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the Accordion  */
@@ -18,6 +19,8 @@ export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
   'aria-label'?: string;
   /** Component to use as content container */
   component?: React.ElementType;
+  /** Flag indicating content is custom. Expanded content Body wrapper will be removed from children.  This allows multiple bodies to be rendered as content. */
+  isCustomContent?: React.ReactNode;
 }
 
 export const AccordionContent: React.FunctionComponent<AccordionContentProps> = ({
@@ -26,6 +29,7 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
   id = '',
   isHidden = false,
   isFixed = false,
+  isCustomContent = false,
   'aria-label': ariaLabel = '',
   component,
   ...props
@@ -46,7 +50,7 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
           aria-label={ariaLabel}
           {...props}
         >
-          <div className={css(styles.accordionExpandedContentBody)}>{children}</div>
+          {isCustomContent ? children : <AccordionExpandedContentBody>{children}</AccordionExpandedContentBody>}
         </Container>
       );
     }}

diff --git a/packages/react-core/src/components/Accordion/AccordionExpandedContentBody.tsx b/packages/react-core/src/components/Accordion/AccordionExpandedContentBody.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
+
+export interface AccordionExpandedContentBodyProps {
+  /** Content rendered inside the accordion content body  */
+  children?: React.ReactNode;
+}
+
+export const AccordionExpandedContentBody: React.FunctionComponent<AccordionExpandedContentBodyProps> = ({
+  children = null
+}: AccordionExpandedContentBodyProps) => <div className={css(styles.accordionExpandedContentBody)}>{children}</div>;
+AccordionExpandedContentBody.displayName = 'AccordionExpandedContentBody';
diff --git a/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx b/packages/react-core/src/components/Accordion/__tests__/Accordion.test.tsx
@@ -4,6 +4,7 @@ import { Accordion } from '../Accordion';
 import { AccordionToggle } from '../AccordionToggle';
 import { AccordionContent } from '../AccordionContent';
 import { AccordionItem } from '../AccordionItem';
+import { AccordionExpandedContentBody } from '../AccordionExpandedContentBody';
 
 describe('Accordion', () => {
   test('Accordion default', () => {
@@ -61,4 +62,43 @@ describe('Accordion', () => {
     expect(view.find(AccordionToggle).getDOMNode().tagName).toBe(container.toLocaleUpperCase());
     expect(view.find(AccordionContent).getDOMNode().tagName).toBe(container.toLocaleUpperCase());
   });
+
+  test('Accordion bordered', () => {
+    const view = shallow(
+      <Accordion isBordered>
+        <AccordionItem>
+          <AccordionToggle id="item-1">Item One</AccordionToggle>
+          <AccordionContent>Item One Content</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+    expect(view.render()).toMatchSnapshot();
+  });
+
+  test('Accordion display large', () => {
+    const view = shallow(
+      <Accordion displaySize='large'>
+        <AccordionItem>
+          <AccordionToggle id="item-1">Item One</AccordionToggle>
+          <AccordionContent>Item One Content</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+    expect(view.render()).toMatchSnapshot();
+  });
+
+  test('Accordion custom content', () => {
+    const view = shallow(
+      <Accordion>
+        <AccordionItem>
+          <AccordionToggle id="item-1">Item One</AccordionToggle>
+          <AccordionContent isCustomContent>
+            <AccordionExpandedContentBody>Item one content body 1</AccordionExpandedContentBody>
+            <AccordionExpandedContentBody>Item one Content body 2</AccordionExpandedContentBody>
+            </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+    expect(view.render()).toMatchSnapshot();
+  });
 });
diff --git a/packages/react-core/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap b/packages/react-core/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap
@@ -1,12 +1,167 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Accordion Accordion bordered 1`] = `
+<dl
+  aria-label=""
+  class="pf-c-accordion pf-m-bordered"
+>
+  <dt>
+    <button
+      aria-expanded="false"
+      class="pf-c-accordion__toggle"
+      id="item-1"
+      type="button"
+    >
+      <span
+        class="pf-c-accordion__toggle-text"
+      >
+        Item One
+      </span>
+      <span
+        class="pf-c-accordion__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align:-0.125em"
+          viewBox="0 0 256 512"
+          width="1em"
+        >
+          <path
+            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+          />
+        </svg>
+      </span>
+    </button>
+  </dt>
+  <dd
+    aria-label=""
+    class="pf-c-accordion__expanded-content pf-m-expanded"
+    id=""
+  >
+    <div
+      class="pf-c-accordion__expanded-content-body"
+    >
+      Item One Content
+    </div>
+  </dd>
+</dl>
+`;
+
+exports[`Accordion Accordion custom content 1`] = `
+<dl
+  aria-label=""
+  class="pf-c-accordion"
+>
+  <dt>
+    <button
+      aria-expanded="false"
+      class="pf-c-accordion__toggle"
+      id="item-1"
+      type="button"
+    >
+      <span
+        class="pf-c-accordion__toggle-text"
+      >
+        Item One
+      </span>
+      <span
+        class="pf-c-accordion__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align:-0.125em"
+          viewBox="0 0 256 512"
+          width="1em"
+        >
+          <path
+            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+          />
+        </svg>
+      </span>
+    </button>
+  </dt>
+  <dd
+    aria-label=""
+    class="pf-c-accordion__expanded-content pf-m-expanded"
+    id=""
+  >
+    <div
+      class="pf-c-accordion__expanded-content-body"
+    >
+      Item one content body 1
+    </div>
+    <div
+      class="pf-c-accordion__expanded-content-body"
+    >
+      Item one Content body 2
+    </div>
+  </dd>
+</dl>
+`;
+
 exports[`Accordion Accordion default 1`] = `
 <dl
   aria-label="this is a simple accordion"
   class="pf-c-accordion"
 />
 `;
 
+exports[`Accordion Accordion display large 1`] = `
+<dl
+  aria-label=""
+  class="pf-c-accordion pf-m-display-lg"
+>
+  <dt>
+    <button
+      aria-expanded="false"
+      class="pf-c-accordion__toggle"
+      id="item-1"
+      type="button"
+    >
+      <span
+        class="pf-c-accordion__toggle-text"
+      >
+        Item One
+      </span>
+      <span
+        class="pf-c-accordion__toggle-icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align:-0.125em"
+          viewBox="0 0 256 512"
+          width="1em"
+        >
+          <path
+            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+          />
+        </svg>
+      </span>
+    </button>
+  </dt>
+  <dd
+    aria-label=""
+    class="pf-c-accordion__expanded-content pf-m-expanded"
+    id=""
+  >
+    <div
+      class="pf-c-accordion__expanded-content-body"
+    >
+      Item One Content
+    </div>
+  </dd>
+</dl>
+`;
+
 exports[`Accordion Accordion with non-default headingLevel 1`] = `
 <div
   aria-label=""