@patternfly/react-docs 7.6.0-prerelease.7 → 7.6.0-prerelease.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/react-docs",
   "description": "PatternFly React Docs",
-  "version": "7.6.0-prerelease.7",
+  "version": "7.6.0-prerelease.8",
   "publishConfig": {
     "access": "public",
     "tag": "prerelease"
@@ -23,16 +23,16 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.5.2",
-    "@patternfly/react-charts": "^8.6.0-prerelease.1",
-    "@patternfly/react-code-editor": "^6.6.0-prerelease.7",
-    "@patternfly/react-core": "^6.6.0-prerelease.6",
-    "@patternfly/react-drag-drop": "^6.6.0-prerelease.6",
-    "@patternfly/react-icons": "^6.6.0-prerelease.1",
-    "@patternfly/react-styles": "^6.6.0-prerelease.1",
-    "@patternfly/react-table": "^6.6.0-prerelease.6",
-    "@patternfly/react-templates": "^6.6.0-prerelease.6",
-    "@patternfly/react-tokens": "^6.6.0-prerelease.1",
+    "@patternfly/patternfly": "6.6.0-prerelease.9",
+    "@patternfly/react-charts": "workspace:^",
+    "@patternfly/react-code-editor": "workspace:^",
+    "@patternfly/react-core": "workspace:^",
+    "@patternfly/react-drag-drop": "workspace:^",
+    "@patternfly/react-icons": "workspace:^",
+    "@patternfly/react-styles": "workspace:^",
+    "@patternfly/react-table": "workspace:^",
+    "@patternfly/react-templates": "workspace:^",
+    "@patternfly/react-tokens": "workspace:^",
     "echarts": "^5.6.0 || ^6.0.0",
     "victory": "^37.3.6"
   },
@@ -46,6 +46,5 @@
   "browserslist": [
     "last 2 versions",
     "not ie <= 11"
-  ],
-  "gitHead": "04d4b22048d55a10d2b87bb3fabad41da6887d9e"
+  ]
 }

package/patternfly-docs/generated/components/about-modal/react.js

@@ -0,0 +1,149 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useState } from 'react';
+import brandImg from '../../../../../react-core/src/components/AboutModal/examples/../../assets/PF-IconLogo.svg';
+import bgImg from '../../../../../react-core/src/components/AboutModal/examples/../../assets/pf-background.svg';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+const pageData = {
+  "id": "About modal",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/about-modal/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/AboutModal/examples/AboutModal.md",
+  "relPath": "packages/react-core/src/components/AboutModal/examples/AboutModal.md",
+  "propComponents": [
+    {
+      "name": "AboutModal",
+      "description": "",
+      "props": [
+        {
+          "name": "appendTo",
+          "type": "HTMLElement | (() => HTMLElement)",
+          "description": "The parent container to append the modal to. Defaults to document.body"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Aria label for the about modal.  This should be used when no productName prop is provided"
+        },
+        {
+          "name": "backgroundImageSrc",
+          "type": "string",
+          "description": "The URL or file path of the image for the background"
+        },
+        {
+          "name": "brandImageAlt",
+          "type": "string",
+          "description": "The alternate text of the brand image",
+          "required": true
+        },
+        {
+          "name": "brandImageSrc",
+          "type": "string",
+          "description": "The URL of the image for the brand",
+          "required": true
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the about modal",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the about modal"
+        },
+        {
+          "name": "closeButtonAriaLabel",
+          "type": "string",
+          "description": "Set aria label to the close button"
+        },
+        {
+          "name": "disableFocusTrap",
+          "type": "boolean",
+          "description": "Flag to disable focus trap"
+        },
+        {
+          "name": "hasNoContentContainer",
+          "type": "boolean",
+          "description": "Prevents the about modal from rendering content inside a container; allows for more flexible layouts",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "description": "Flag to show the about modal",
+          "defaultValue": "false"
+        },
+        {
+          "name": "onClose",
+          "type": "(event: React.MouseEvent | MouseEvent | KeyboardEvent) => void",
+          "description": "A callback for when the close button is clicked",
+          "defaultValue": "(_e): any => undefined"
+        },
+        {
+          "name": "productName",
+          "type": "string",
+          "description": "Product name"
+        },
+        {
+          "name": "trademark",
+          "type": "string",
+          "description": "Trademark information"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-about-modal-box"
+  ],
+  "examples": [
+    "Basic",
+    "Without product name",
+    "Complex user positioned content"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useState,
+  brandImg,
+  bgImg,
+  spacing
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { AboutModal, Button, Content } from '@patternfly/react-core';\nimport brandImg from '../../assets/PF-IconLogo.svg';\n\nexport const AboutModalBasic: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const toggleModal = (_event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={toggleModal}>\n        Show about modal\n      </Button>\n      <AboutModal\n        isOpen={isModalOpen}\n        onClose={(e: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => toggleModal(e)}\n        trademark=\"Trademark and copyright information here\"\n        brandImageSrc={brandImg}\n        brandImageAlt=\"Patternfly Logo\"\n        backgroundImageSrc=\"/assets/images/pf-background.svg\"\n        productName=\"name\"\n      >\n        <Content>\n          <dl>\n            <dt>CFME version</dt>\n            <dd>5.5.3.4.20102789036450</dd>\n            <dt>Cloudforms Version</dt>\n            <dd>4.1</dd>\n            <dt>Server name</dt>\n            <dd>40DemoMaster</dd>\n            <dt>User name</dt>\n            <dd>Administrator</dd>\n            <dt>User role</dt>\n            <dd>EvmRole-super_administrator</dd>\n            <dt>Browser version</dt>\n            <dd>601.2</dd>\n            <dt>Browser OS</dt>\n            <dd>Mac</dd>\n          </dl>\n        </Content>\n      </AboutModal>\n    </Fragment>\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Without product name': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { AboutModal, Button, Content } from '@patternfly/react-core';\nimport brandImg from '../../assets/PF-IconLogo.svg';\n\nexport const AboutModalWithoutProductName: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const toggleModal = (_event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={toggleModal}>\n        Show about modal\n      </Button>\n      <AboutModal\n        isOpen={isModalOpen}\n        onClose={(e: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => toggleModal(e)}\n        trademark=\"Trademark and copyright information here\"\n        brandImageSrc={brandImg}\n        brandImageAlt=\"Patternfly Logo\"\n        backgroundImageSrc=\"/assets/images/pf-background.svg\"\n        aria-label=\"No product name about modal\"\n      >\n        <Content>\n          <dl>\n            <dt>CFME version</dt>\n            <dd>5.5.3.4.20102789036450</dd>\n            <dt>Cloudforms version</dt>\n            <dd>4.1</dd>\n            <dt>Server name</dt>\n            <dd>40DemoMaster</dd>\n            <dt>User name</dt>\n            <dd>Administrator</dd>\n            <dt>User role</dt>\n            <dd>EvmRole-super_administrator</dd>\n            <dt>Browser version</dt>\n            <dd>601.2</dd>\n            <dt>Browser OS</dt>\n            <dd>Mac</dd>\n          </dl>\n        </Content>\n      </AboutModal>\n    </Fragment>\n  );\n};\n","title":"Without product name","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Complex user positioned content': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { AboutModal, Alert, Button, Content } from '@patternfly/react-core';\nimport brandImg from '../../assets/PF-IconLogo.svg';\nimport spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';\n\nexport const AboutModalComplexUserPositionedContent: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const toggleModal = (_event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={toggleModal}>\n        Show about modal\n      </Button>\n      <AboutModal\n        isOpen={isModalOpen}\n        onClose={(e: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => toggleModal(e)}\n        trademark=\"Trademark and copyright information here\"\n        brandImageSrc={brandImg}\n        brandImageAlt=\"Patternfly Logo\"\n        backgroundImageSrc=\"/assets/images/pf-background.svg\"\n        hasNoContentContainer={true}\n        productName=\"Product name\"\n      >\n        <Content id=\"test1\" className={spacing.pyXl}>\n          <h4>About</h4>\n          <p>Content here</p>\n        </Content>\n        <Alert variant=\"info\" title=\"Updates available\" />\n        <Content id=\"test2\" className={spacing.pyXl}>\n          <dl>\n            <dt>CFME version</dt>\n            <dd>5.5.3.4.20102789036450</dd>\n            <dt>Cloudforms version</dt>\n            <dd>4.1</dd>\n            <dt>Server name</dt>\n            <dd>40DemoMaster</dd>\n            <dt>User name</dt>\n            <dd>Administrator</dd>\n            <dt>User role</dt>\n            <dd>EvmRole-super_administrator</dd>\n            <dt>Browser version</dt>\n            <dd>601.2</dd>\n            <dt>Browser OS</dt>\n            <dd>Mac</dd>\n          </dl>\n        </Content>\n      </AboutModal>\n    </Fragment>\n  );\n};\n","title":"Complex user positioned content","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Without product name"])}
+    {React.createElement(pageData.examples["Complex user positioned content"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsAboutModalReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/accordion/react.js

@@ -0,0 +1,262 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState } from 'react';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
+const pageData = {
+  "id": "Accordion",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/accordion/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Accordion/examples/Accordion.md",
+  "relPath": "packages/react-core/src/components/Accordion/examples/Accordion.md",
+  "propComponents": [
+    {
+      "name": "Accordion",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Adds accessible text to the Accordion"
+        },
+        {
+          "name": "asDefinitionList",
+          "type": "boolean",
+          "description": "Flag to indicate whether use definition list or div",
+          "defaultValue": "true"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the Accordion",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the Accordion",
+          "defaultValue": "''"
+        },
+        {
+          "name": "displaySize",
+          "type": "'default' | 'lg'",
+          "description": "Display size variant.",
+          "defaultValue": "'default'"
+        },
+        {
+          "name": "headingLevel",
+          "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+          "description": "Heading level to use",
+          "defaultValue": "'h3'"
+        },
+        {
+          "name": "isBordered",
+          "type": "boolean",
+          "description": "Flag to indicate the accordion had a border",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isNoPlainOnGlass",
+          "type": "boolean",
+          "description": "Flag to prevent the accordion from automatically applying plain styling when glass theme is enabled.",
+          "defaultValue": "false",
+          "beta": true
+        },
+        {
+          "name": "isPlain",
+          "type": "boolean",
+          "description": "Flag to add plain styling to the accordion.",
+          "defaultValue": "false",
+          "beta": true
+        },
+        {
+          "name": "togglePosition",
+          "type": "'start' | 'end'",
+          "description": "Sets the toggle icon position for all accordion toggles.",
+          "defaultValue": "'end'"
+        }
+      ]
+    },
+    {
+      "name": "AccordionItem",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the accordion item.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the accordion item."
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag to indicate whether the accordion item is expanded.",
+          "defaultValue": "false"
+        }
+      ]
+    },
+    {
+      "name": "AccordionContent",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Adds accessible text to the Accordion content",
+          "defaultValue": "''"
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "description": "Id of the controlling accordion toggle to label the content."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the Accordion",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the Accordion content",
+          "defaultValue": "''"
+        },
+        {
+          "name": "component",
+          "type": "React.ElementType",
+          "description": "Component to use as content container"
+        },
+        {
+          "name": "contentBodyProps",
+          "type": "AccordionExpandableContentBodyProps",
+          "description": "Props passed to the AccordionExpandableContentBody *"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Identify the AccordionContent item",
+          "defaultValue": "''"
+        },
+        {
+          "name": "isCustomContent",
+          "type": "React.ReactNode",
+          "description": "Flag indicating content is custom. Expanded content Body wrapper will be removed from children.  This allows multiple bodies to be rendered as content.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isFixed",
+          "type": "boolean",
+          "description": "Flag to indicate Accordion content is fixed",
+          "defaultValue": "false"
+        }
+      ]
+    },
+    {
+      "name": "AccordionToggle",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the Accordion toggle",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the Accordion Toggle",
+          "defaultValue": "''"
+        },
+        {
+          "name": "component",
+          "type": "React.ElementType",
+          "description": "Container to override the default for toggle"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Identify the Accordion toggle number",
+          "required": true
+        }
+      ]
+    },
+    {
+      "name": "AccordionExpandableContentBody",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the accordion content body",
+          "defaultValue": "null"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-accordion"
+  ],
+  "examples": [
+    "Definition list",
+    "Single expand behavior",
+    "Fixed with multiple expand behavior",
+    "Bordered",
+    "Toggle icon at start"
+  ]
+};
+pageData.liveContext = {
+  useState,
+  RhMicronsCaretRightIcon
+};
+pageData.examples = {
+  'Definition list': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';\n\nexport const AccordionDefinitionList: React.FunctionComponent = () => {\n  const [expanded, setExpanded] = useState('def-list-toggle2');\n\n  const onToggle = (id: string) => {\n    if (id === expanded) {\n      setExpanded('');\n    } else {\n      setExpanded(id);\n    }\n  };\n\n  return (\n    <Accordion asDefinitionList>\n      <AccordionItem isExpanded={expanded === 'def-list-toggle1'}>\n        <AccordionToggle\n          onClick={() => {\n            onToggle('def-list-toggle1');\n          }}\n          id=\"def-list-toggle1\"\n        >\n          Item one\n        </AccordionToggle>\n        <AccordionContent id=\"def-list-expand1\">\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n            dolore magna aliqua.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n\n      <AccordionItem isExpanded={expanded === 'def-list-toggle2'}>\n        <AccordionToggle\n          onClick={() => {\n            onToggle('def-list-toggle2');\n          }}\n          id=\"def-list-toggle2\"\n        >\n          Item two\n        </AccordionToggle>\n        <AccordionContent id=\"def-list-expand2\">\n          <p>\n            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam\n            ultrices, faucibus erat id, maximus nunc.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n\n      <AccordionItem isExpanded={expanded === 'def-list-toggle3'}>\n        <AccordionToggle\n          onClick={() => {\n            onToggle('def-list-toggle3');\n          }}\n          id=\"def-list-toggle3\"\n        >\n          Item three\n        </AccordionToggle>\n        <AccordionContent id=\"def-list-expand3\">\n          <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>\n        </AccordionContent>\n      </AccordionItem>\n\n      <AccordionItem isExpanded={expanded === 'def-list-toggle4'}>\n        <AccordionToggle\n          onClick={() => {\n            onToggle('def-list-toggle4');\n          }}\n          id=\"def-list-toggle4\"\n        >\n          Item four\n        </AccordionToggle>\n        <AccordionContent id=\"def-list-expand4\">\n          <p>\n            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,\n            sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n            cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur\n            ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero\n            convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis\n            dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n\n      <AccordionItem isExpanded={expanded === 'def-list-toggle5'}>\n        <AccordionToggle\n          onClick={() => {\n            onToggle('def-list-toggle5');\n          }}\n          id=\"def-list-toggle5\"\n        >\n          Item five\n        </AccordionToggle>\n        <AccordionContent id=\"def-list-expand5\">\n          <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n};\n","title":"Definition list","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Single expand behavior': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';\n\nexport const AccordionSingleExpandBehavior: React.FunctionComponent = () => {\n  const [expanded, setExpanded] = useState('ex-toggle2');\n\n  const onToggle = (id: string) => {\n    if (id === expanded) {\n      setExpanded('');\n    } else {\n      setExpanded(id);\n    }\n  };\n\n  return (\n    <Accordion asDefinitionList={false}>\n      <AccordionItem isExpanded={expanded === 'ex-toggle1'}>\n        <AccordionToggle\n          onClick={() => {\n            onToggle('ex-toggle1');\n          }}\n          id=\"ex-toggle1\"\n        >\n          Item one\n        </AccordionToggle>\n        <AccordionContent id=\"ex-expand1\">\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n            dolore magna aliqua.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n\n      <AccordionItem isExpanded={expanded === 'ex-toggle2'}>\n        <AccordionToggle\n          onClick={() => {\n            onToggle('ex-toggle2');\n          }}\n          id=\"ex-toggle2\"\n        >\n          Item two\n        </AccordionToggle>\n        <AccordionContent id=\"ex-expand2\">\n          <p>\n            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam\n            ultrices, faucibus erat id, maximus nunc.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n\n      <AccordionItem isExpanded={expanded === 'ex-toggle3'}>\n        <AccordionToggle\n          onClick={() => {\n            onToggle('ex-toggle3');\n          }}\n          id=\"ex-toggle3\"\n        >\n          Item three\n        </AccordionToggle>\n        <AccordionContent id=\"ex-expand3\">\n          <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>\n        </AccordionContent>\n      </AccordionItem>\n\n      <AccordionItem isExpanded={expanded === 'ex-toggle4'}>\n        <AccordionToggle\n          onClick={() => {\n            onToggle('ex-toggle4');\n          }}\n          id=\"ex-toggle4\"\n        >\n          Item four\n        </AccordionToggle>\n        <AccordionContent id=\"ex-expand4\">\n          <p>\n            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,\n            sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n            cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur\n            ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero\n            convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis\n            dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n\n      <AccordionItem isExpanded={expanded === 'ex-toggle5'}>\n        <AccordionToggle\n          onClick={() => {\n            onToggle('ex-toggle5');\n          }}\n          id=\"ex-toggle5\"\n        >\n          Item five\n        </AccordionToggle>\n        <AccordionContent id=\"ex-expand5\">\n          <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n};\n","title":"Single expand behavior","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Fixed with multiple expand behavior': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';\n\nexport const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent = () => {\n  const [expanded, setExpanded] = useState(['ex2-toggle4']);\n\n  const toggle = (id) => {\n    const index = expanded.indexOf(id);\n    const newExpanded: string[] =\n      index >= 0 ? [...expanded.slice(0, index), ...expanded.slice(index + 1, expanded.length)] : [...expanded, id];\n    setExpanded(newExpanded);\n  };\n\n  return (\n    <Accordion asDefinitionList={false}>\n      <AccordionItem isExpanded={expanded.includes('ex2-toggle1')}>\n        <AccordionToggle onClick={() => toggle('ex2-toggle1')} id=\"ex2-toggle1\">\n          Item one\n        </AccordionToggle>\n        <AccordionContent id=\"ex2-expand1\" isFixed>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n            dolore magna aliqua.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem isExpanded={expanded.includes('ex2-toggle2')}>\n        <AccordionToggle onClick={() => toggle('ex2-toggle2')} id=\"ex2-toggle2\">\n          Item two\n        </AccordionToggle>\n        <AccordionContent id=\"ex2-expand2\" isFixed>\n          <p>\n            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam\n            ultrices, faucibus erat id, maximus nunc.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem isExpanded={expanded.includes('ex2-toggle3')}>\n        <AccordionToggle onClick={() => toggle('ex2-toggle3')} id=\"ex2-toggle3\">\n          Item three\n        </AccordionToggle>\n        <AccordionContent id=\"ex2-expand3\" isFixed>\n          <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem isExpanded={expanded.includes('ex2-toggle4')}>\n        <AccordionToggle onClick={() => toggle('ex2-toggle4')} id=\"ex2-toggle4\">\n          Item four\n        </AccordionToggle>\n        <AccordionContent aria-labelledby=\"ex2-toggle4\" id=\"ex2-expand4\" isFixed>\n          <p>\n            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,\n            sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n            cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur\n            ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero\n            convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis\n            dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n          </p>\n          <p>\n            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,\n            sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n            cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur\n            ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero\n            convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis\n            dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem isExpanded={expanded.includes('ex2-toggle5')}>\n        <AccordionToggle onClick={() => toggle('ex2-toggle5')} id=\"ex2-toggle5\">\n          Item five\n        </AccordionToggle>\n        <AccordionContent id=\"ex2-expand5\" isFixed>\n          <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n};\n","title":"Fixed with multiple expand behavior","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Bordered': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Accordion,\n  AccordionItem,\n  AccordionContent,\n  AccordionToggle,\n  AccordionExpandableContentBody,\n  Button,\n  Checkbox\n} from '@patternfly/react-core';\nimport RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';\n\nexport const AccordionBordered: React.FunctionComponent = () => {\n  const [expanded, setExpanded] = useState('bordered-toggle4');\n  const [isDisplayLarge, setIsDisplayLarge] = useState(false);\n\n  const displaySize = isDisplayLarge ? 'lg' : 'default';\n  const onToggle = (id: string) => {\n    if (id === expanded) {\n      setExpanded('');\n    } else {\n      setExpanded(id);\n    }\n  };\n\n  return (\n    <>\n      <Accordion isBordered displaySize={displaySize}>\n        <AccordionItem isExpanded={expanded === 'bordered-toggle1'}>\n          <AccordionToggle\n            onClick={() => {\n              onToggle('bordered-toggle1');\n            }}\n            id=\"bordered-toggle1\"\n          >\n            Item one\n          </AccordionToggle>\n          <AccordionContent id=\"bordered-expand1\">\n            <p>\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n              dolore magna aliqua.\n            </p>\n          </AccordionContent>\n        </AccordionItem>\n\n        <AccordionItem isExpanded={expanded === 'bordered-toggle2'}>\n          <AccordionToggle\n            onClick={() => {\n              onToggle('bordered-toggle2');\n            }}\n            id=\"bordered-toggle2\"\n          >\n            Item two\n          </AccordionToggle>\n          <AccordionContent id=\"bordered-expand2\">\n            <p>\n              Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam\n              ultrices, faucibus erat id, maximus nunc.\n            </p>\n          </AccordionContent>\n        </AccordionItem>\n\n        <AccordionItem isExpanded={expanded === 'bordered-toggle3'}>\n          <AccordionToggle\n            onClick={() => {\n              onToggle('bordered-toggle3');\n            }}\n            id=\"bordered-toggle3\"\n          >\n            Item three\n          </AccordionToggle>\n          <AccordionContent id=\"bordered-expand3\">\n            <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>\n          </AccordionContent>\n        </AccordionItem>\n\n        <AccordionItem isExpanded={expanded === 'bordered-toggle4'}>\n          <AccordionToggle\n            onClick={() => {\n              onToggle('bordered-toggle4');\n            }}\n            id=\"bordered-toggle4\"\n          >\n            Item four\n          </AccordionToggle>\n          <AccordionContent id=\"bordered-expand4\" isCustomContent>\n            <AccordionExpandableContentBody>\n              Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,\n              sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices\n              posuere cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper\n              eleifend non quis tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis\n              parturient montes, nascetur ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris,\n              pellentesque imperdiet libero convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus.\n              Proin dictum imperdiet nibh, quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n            </AccordionExpandableContentBody>\n            <AccordionExpandableContentBody>\n              <Button variant=\"link\" size=\"lg\" isInline>\n                Call to action <RhMicronsCaretRightIcon />\n              </Button>\n            </AccordionExpandableContentBody>\n          </AccordionContent>\n        </AccordionItem>\n        <AccordionItem isExpanded={expanded === 'bordered-toggle5'}>\n          <AccordionToggle\n            onClick={() => {\n              onToggle('bordered-toggle5');\n            }}\n            id=\"bordered-toggle5\"\n          >\n            Item five\n          </AccordionToggle>\n          <AccordionContent id=\"bordered-expand5\">\n            <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>\n          </AccordionContent>\n        </AccordionItem>\n      </Accordion>\n      <div style={{ marginTop: '30px' }}>\n        <Checkbox\n          label=\"Display size large\"\n          isChecked={isDisplayLarge}\n          onChange={(_event, checked) => setIsDisplayLarge(checked)}\n          aria-label=\"show display large variation checkbox\"\n          id=\"toggle-display-lg\"\n          name=\"toggle-display-lg\"\n        />\n      </div>\n    </>\n  );\n};\n","title":"Bordered","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Toggle icon at start': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';\n\nexport const AccordionToggleIconAtStart: React.FunctionComponent = () => {\n  const [expanded, setExpanded] = useState('start-toggle-toggle2');\n\n  const onToggle = (id: string) => {\n    if (id === expanded) {\n      setExpanded('');\n    } else {\n      setExpanded(id);\n    }\n  };\n\n  return (\n    <Accordion togglePosition=\"start\">\n      <AccordionItem isExpanded={expanded === 'start-toggle-toggle1'}>\n        <AccordionToggle\n          onClick={() => {\n            onToggle('start-toggle-toggle1');\n          }}\n          id=\"start-toggle-toggle1\"\n        >\n          Item one\n        </AccordionToggle>\n        <AccordionContent id=\"start-toggle-expand1\">\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n            dolore magna aliqua.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n\n      <AccordionItem isExpanded={expanded === 'start-toggle-toggle2'}>\n        <AccordionToggle\n          onClick={() => {\n            onToggle('start-toggle-toggle2');\n          }}\n          id=\"start-toggle-toggle2\"\n        >\n          Item two\n        </AccordionToggle>\n        <AccordionContent id=\"start-toggle-expand2\">\n          <p>\n            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam\n            ultrices, faucibus erat id, maximus nunc.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n\n      <AccordionItem isExpanded={expanded === 'start-toggle-toggle3'}>\n        <AccordionToggle\n          onClick={() => {\n            onToggle('start-toggle-toggle3');\n          }}\n          id=\"start-toggle-toggle3\"\n        >\n          Item three\n        </AccordionToggle>\n        <AccordionContent id=\"start-toggle-expand3\">\n          <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>\n        </AccordionContent>\n      </AccordionItem>\n\n      <AccordionItem isExpanded={expanded === 'start-toggle-toggle4'}>\n        <AccordionToggle\n          onClick={() => {\n            onToggle('start-toggle-toggle4');\n          }}\n          id=\"start-toggle-toggle4\"\n        >\n          Item four\n        </AccordionToggle>\n        <AccordionContent id=\"start-toggle-expand4\">\n          <p>\n            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,\n            sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n            cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur\n            ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero\n            convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis\n            dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n          </p>\n        </AccordionContent>\n      </AccordionItem>\n\n      <AccordionItem isExpanded={expanded === 'start-toggle-toggle5'}>\n        <AccordionToggle\n          onClick={() => {\n            onToggle('start-toggle-toggle5');\n          }}\n          id=\"start-toggle-toggle5\"\n        >\n          Item five\n        </AccordionToggle>\n        <AccordionContent id=\"start-toggle-expand5\">\n          <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n};\n","title":"Toggle icon at start","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Definition list"])}
+    {React.createElement(pageData.examples["Single expand behavior"])}
+    {React.createElement(pageData.examples["Fixed with multiple expand behavior"])}
+    {React.createElement(pageData.examples["Bordered"])}
+    {React.createElement(pageData.examples["Toggle icon at start"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsAccordionReactDocs';
+Component.pageData = pageData;
+
+export default Component;