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

package/patternfly-docs/generated/patterns/password-generator/react-demos.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useEffect, useRef, useState } from 'react';
+import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
+import RhUiViewFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-view-fill-icon';
+import RhUiViewOffFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-view-off-fill-icon';
+const pageData = {
+  "id": "Password generator",
+  "section": "patterns",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/patterns/password-generator/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/PasswordGenerator/PasswordGenerator.md",
+  "relPath": "packages/react-core/src/demos/PasswordGenerator/PasswordGenerator.md",
+  "examples": [
+    "Provide a generated password"
+  ]
+};
+pageData.liveContext = {
+  useEffect,
+  useRef,
+  useState,
+  RedoIcon,
+  RhUiViewFillIcon,
+  RhUiViewOffFillIcon
+};
+pageData.examples = {
+  'Provide a generated password': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useRef, useState } from 'react';\nimport {\n  InputGroup,\n  InputGroupItem,\n  TextInput,\n  Button,\n  Popper,\n  Menu,\n  MenuContent,\n  MenuList,\n  MenuItem,\n  MenuItemAction\n} from '@patternfly/react-core';\nimport RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';\nimport RhUiViewFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-view-fill-icon';\nimport RhUiViewOffFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-view-off-fill-icon';\n\nexport const PasswordGenerator: React.FunctionComponent = () => {\n  const generatePassword = () => {\n    const length = 12;\n    const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@%()_-=+';\n    let retVal = '';\n    for (let i = 0, n = charset.length; i < length; ++i) {\n      retVal += charset.charAt(Math.floor(Math.random() * n));\n    }\n    return retVal;\n  };\n  const [password, setPassword] = useState<string>('');\n  const [generatedPassword, setGeneratedPassword] = useState<string>(generatePassword());\n  const [isAutocompleteOpen, setIsAutocompleteOpen] = useState<boolean>(false);\n  const [passwordHidden, setPasswordHidden] = useState<boolean>(true);\n  const searchInputRef = useRef(null);\n  const autocompleteRef = useRef(null);\n\n  useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isAutocompleteOpen, searchInputRef.current]);\n\n  const onChange = (_event: React.FormEvent<HTMLInputElement>, newValue: string) => {\n    if (searchInputRef && searchInputRef.current && searchInputRef.current.contains(document.activeElement)) {\n      setIsAutocompleteOpen(true);\n    } else {\n      setIsAutocompleteOpen(false);\n    }\n    setPassword(newValue);\n  };\n\n  // Whenever an autocomplete option is selected, set the search input value, close the menu, and put the browser\n  // focus back on the search input\n  const onSelect = (event: React.MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n    setPassword(generatedPassword);\n    setIsAutocompleteOpen(false);\n    searchInputRef.current.focus();\n  };\n\n  const handleMenuKeys = (event: KeyboardEvent | React.KeyboardEvent<any>) => {\n    if (!(isAutocompleteOpen && searchInputRef.current && searchInputRef.current.contains(event.target))) {\n      return;\n    }\n    // the escape key closes the autocomplete menu and keeps the focus on the search input.\n    if (event.key === 'Escape') {\n      setIsAutocompleteOpen(false);\n      searchInputRef.current.focus();\n      // the up and down arrow keys move browser focus into the autocomplete menu\n    } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      const firstElement = autocompleteRef.current.querySelector('li > button:not(:disabled)');\n      firstElement && firstElement.focus();\n      event.preventDefault(); // by default, the up and down arrow keys scroll the window\n    }\n    // If the autocomplete is open and the browser focus is in the autocomplete menu\n    // hitting tab will close the autocomplete and put browser focus back on the search input.\n    else if (autocompleteRef.current.contains(event.target) && event.key === 'Tab') {\n      event.preventDefault();\n      setIsAutocompleteOpen(false);\n      searchInputRef.current.focus();\n    }\n  };\n\n  // The autocomplete menu should close if the user clicks outside the menu.\n  const handleClickOutside = (\n    event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>\n  ) => {\n    if (\n      isAutocompleteOpen &&\n      autocompleteRef &&\n      autocompleteRef.current &&\n      !searchInputRef.current.contains(event.target)\n    ) {\n      setIsAutocompleteOpen(false);\n    }\n    if (\n      !isAutocompleteOpen &&\n      searchInputRef &&\n      searchInputRef.current &&\n      searchInputRef.current.contains(event.target)\n    ) {\n      setIsAutocompleteOpen(true);\n    }\n  };\n  const textInput = (\n    <div ref={searchInputRef} id=\"password-input\">\n      <InputGroup>\n        <InputGroupItem isFill>\n          <TextInput\n            onFocus={() => {\n              setIsAutocompleteOpen(true);\n            }}\n            isRequired\n            type={passwordHidden ? 'password' : 'text'}\n            aria-label=\"Password input\"\n            value={password}\n            onChange={onChange}\n          />\n        </InputGroupItem>\n        <InputGroupItem>\n          <Button\n            variant=\"control\"\n            onClick={() => setPasswordHidden(!passwordHidden)}\n            aria-label={passwordHidden ? 'Show password' : 'Hide password'}\n            icon={passwordHidden ? <RhUiViewFillIcon /> : <RhUiViewOffFillIcon />}\n          />\n        </InputGroupItem>\n      </InputGroup>\n    </div>\n  );\n  const autocomplete = (\n    <Menu ref={autocompleteRef} onSelect={onSelect}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem\n            itemId={0}\n            actions={\n              <MenuItemAction\n                icon={<RedoIcon />}\n                onClick={(_e) => {\n                  setGeneratedPassword(generatePassword());\n                }}\n                actionId=\"redo\"\n                aria-label=\"Generate a new suggested password\"\n              />\n            }\n          >\n            Use suggested password: <b>{`${generatedPassword}`}</b>\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n\n  return (\n    <Popper\n      trigger={textInput}\n      triggerRef={searchInputRef}\n      popper={autocomplete}\n      popperRef={autocompleteRef}\n      isVisible={isAutocompleteOpen}\n      enableFlip={false}\n      // append the autocomplete menu to the search input in the DOM for the sake of the keyboard navigation experience\n      appendTo={() => document.querySelector('#password-input')}\n    />\n  );\n};\n","title":"Provide a generated password","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Provide a generated password"])}
+  </React.Fragment>
+);
+Component.displayName = 'PatternsPasswordGeneratorReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/patterns/password-strength/react-demos.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState } from 'react';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import formStyles from '@patternfly/react-styles/css/components/Form/form';
+const pageData = {
+  "id": "Password strength",
+  "section": "patterns",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/patterns/password-strength/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/PasswordStrength.md",
+  "relPath": "packages/react-core/src/demos/PasswordStrength.md",
+  "examples": [
+    "Basic validation"
+  ]
+};
+pageData.liveContext = {
+  useState,
+  HelpIcon,
+  RhUiErrorFillIcon,
+  RhUiWarningFillIcon,
+  RhUiCheckCircleFillIcon,
+  formStyles
+};
+pageData.examples = {
+  'Basic validation': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';\nimport RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';\nimport RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';\n\nexport const PasswordStrengthDemo: React.FunctionComponent = () => {\n  type HelperTextItemVariant = 'default' | 'indeterminate' | 'warning' | 'success' | 'error';\n  interface PassStrength {\n    variant: HelperTextItemVariant;\n    icon: React.JSX.Element;\n    text: string;\n  }\n\n  const [password, setPassword] = useState('');\n  const [ruleLength, setRuleLength] = useState<HelperTextItemVariant>('indeterminate');\n  const [ruleContent, setRuleContent] = useState<HelperTextItemVariant>('indeterminate');\n  const [ruleCharacters, setRuleCharacters] = useState<HelperTextItemVariant>('indeterminate');\n  const [passStrength, setPassStrength] = useState<PassStrength>({\n    variant: 'error',\n    icon: <RhUiErrorFillIcon />,\n    text: 'Weak'\n  });\n\n  const handlePasswordInput = (_event: any, password: string) => {\n    setPassword(password);\n    validate(password);\n  };\n\n  const validate = (password: string) => {\n    if (password === '') {\n      setRuleLength('indeterminate');\n      setRuleContent('indeterminate');\n      setRuleCharacters('indeterminate');\n      return;\n    }\n\n    if (password.length < 14) {\n      setRuleLength('error');\n    } else {\n      setRuleLength('success');\n    }\n\n    if (/redhat/gi.test(password)) {\n      setRuleContent('error');\n    } else {\n      setRuleContent('success');\n    }\n\n    let rulesCount = 0;\n    let strCount = 0;\n    if (/[a-z]/g.test(password)) {\n      rulesCount++;\n    }\n    if (/[A-Z]/g.test(password)) {\n      strCount += password.match(/[A-Z]/g).length;\n      rulesCount++;\n    }\n    if (/\\d/g.test(password)) {\n      strCount += password.match(/\\d/g).length;\n      rulesCount++;\n    }\n    if (/\\W/g.test(password)) {\n      strCount += password.match(/\\W/g).length;\n      rulesCount++;\n    }\n\n    if (rulesCount < 3) {\n      setRuleCharacters('error');\n    } else {\n      setRuleCharacters('success');\n    }\n\n    if (strCount < 3) {\n      setPassStrength({ variant: 'error', icon: <RhUiErrorFillIcon />, text: 'Weak' });\n    } else if (strCount < 5) {\n      setPassStrength({ variant: 'warning', icon: <RhUiWarningFillIcon />, text: 'Medium' });\n    } else {\n      setPassStrength({ variant: 'success', icon: <RhUiCheckCircleFillIcon />, text: 'Strong' });\n    }\n  };\n\n  const passStrLabel = (\n    <HelperText>\n      <HelperTextItem variant={passStrength.variant} icon={passStrength.icon}>\n        {passStrength.text}\n      </HelperTextItem>\n    </HelperText>\n  );\n\n  return (\n    <Form>\n      <FormGroup\n        label=\"Password\"\n        isRequired\n        fieldId=\"password-field\"\n        {...(ruleLength === 'success' &&\n          ruleContent === 'success' &&\n          ruleCharacters === 'success' && {\n            labelInfo: passStrLabel\n          })}\n      >\n        <TextInput\n          isRequired\n          type=\"password\"\n          id=\"password-field\"\n          name=\"password-field\"\n          aria-describedby=\"password-field-helper\"\n          aria-invalid={ruleLength === 'error' || ruleContent === 'error' || ruleCharacters === 'error'}\n          value={password}\n          onChange={handlePasswordInput}\n        />\n        <FormHelperText>\n          <HelperText component=\"ul\" aria-live=\"polite\" id=\"password-field-helper\">\n            <HelperTextItem variant={ruleLength} component=\"li\">\n              Must be at least 14 characters\n            </HelperTextItem>\n            <HelperTextItem variant={ruleContent} component=\"li\">\n              Cannot contain the word \"redhat\"\n            </HelperTextItem>\n            <HelperTextItem variant={ruleCharacters} component=\"li\">\n              Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols\n            </HelperTextItem>\n          </HelperText>\n        </FormHelperText>\n      </FormGroup>\n    </Form>\n  );\n};\n","title":"Basic validation","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Note, the validation and password strength rules are only examples, demonstrating the changes in the UI when certain conditions are met. We expect consumers will substitute their own, more robust, validation algorithm. In this demo the password strength is determined by how often validation rules are met. A good open-source password strength estimator, recommended by InfoSec, is `}
+        
+        <PatternflyThemeLink {...{"to":"https://github.com/dropbox/zxcvbn","className":""}}>
+          {`zxcvbn`}
+        </PatternflyThemeLink>
+        {`.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic validation"])}
+  </React.Fragment>
+);
+Component.displayName = 'PatternsPasswordStrengthReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/patterns/primary-detail/react-demos.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useState } from 'react';
+import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
+import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import pfIcon from '../../../../../react-core/src/demos/./assets/pf-logo-small.svg';
+import activeMQIcon from '../../../../../react-core/src/demos/./assets/activemq-core_200x150.png';
+import avroIcon from '../../../../../react-core/src/demos/./assets/camel-avro_200x150.png';
+import dropBoxIcon from '../../../../../react-core/src/demos/./assets/camel-dropbox_200x150.png';
+import infinispanIcon from '../../../../../react-core/src/demos/./assets/camel-infinispan_200x150.png';
+import saxonIcon from '../../../../../react-core/src/demos/./assets/camel-saxon_200x150.png';
+import sparkIcon from '../../../../../react-core/src/demos/./assets/camel-spark_200x150.png';
+import swaggerIcon from '../../../../../react-core/src/demos/./assets/camel-swagger-java_200x150.png';
+import azureIcon from '../../../../../react-core/src/demos/./assets/FuseConnector_Icons_AzureServices.png';
+import restIcon from '../../../../../react-core/src/demos/./assets/FuseConnector_Icons_REST.png';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import srcImportprimarydetailcardview from './react-demos/primary-detail-card-view.png';
+import srcImportprimarydetailcontentpadding from './react-demos/primary-detail-content-padding.png';
+import srcImportprimarydetaildatalistincard from './react-demos/primary-detail-data-list-in-card.png';
+import srcImportprimarydetailfullpage from './react-demos/primary-detail-full-page.png';
+import srcImportprimarydetailinlinemodifier from './react-demos/primary-detail-inline-modifier.png';
+import srcImportprimarydetailsimplelistincard from './react-demos/primary-detail-simple-list-in-card.png';
+const pageData = {
+  "id": "Primary-detail",
+  "section": "patterns",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/patterns/primary-detail/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/PrimaryDetail.md",
+  "relPath": "packages/react-core/src/demos/PrimaryDetail.md",
+  "fullscreenExamples": [
+    "Primary-detail full page",
+    "Primary-detail content padding",
+    "Primary-detail card view",
+    "Primary-detail simple list in card",
+    "Primary-detail data list in card",
+    "Primary-detail inline modifier"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useState,
+  RhUiBranchFillIcon,
+  TrashIcon,
+  RhUiCodeIcon,
+  CubeIcon,
+  RhUiCheckCircleFillIcon,
+  RhUiWarningFillIcon,
+  FilterIcon,
+  SearchIcon,
+  TimesCircleIcon,
+  pfIcon,
+  activeMQIcon,
+  avroIcon,
+  dropBoxIcon,
+  infinispanIcon,
+  saxonIcon,
+  sparkIcon,
+  swaggerIcon,
+  azureIcon,
+  restIcon,
+  RhUiEllipsisVerticalFillIcon,
+  data,
+  DashboardWrapper
+};
+pageData.examples = {
+  'Primary-detail full page': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportprimarydetailfullpage} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Button,\n  ButtonVariant,\n  Content,\n  DataList,\n  DataListAction,\n  DataListCell,\n  DataListItem,\n  DataListItemCells,\n  DataListItemRow,\n  Toolbar,\n  ToolbarItem,\n  ToolbarContent,\n  ToolbarToggleGroup,\n  ToolbarGroup,\n  Divider,\n  Drawer,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerPanelBody,\n  DrawerPanelContent,\n  Flex,\n  FlexItem,\n  InputGroup,\n  InputGroupItem,\n  PageSection,\n  Progress,\n  Stack,\n  StackItem,\n  TextInput,\n  Title,\n  Select,\n  SelectOption,\n  SelectOptionProps,\n  MenuToggle\n} from '@patternfly/react-core';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\nimport RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';\nimport RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';\nimport RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';\n\ninterface SelectOptionType extends Omit<SelectOptionProps, 'children'> {\n  label: string;\n}\n\nconst statusOptions: SelectOptionType[] = [\n  { value: 'New', label: 'New' },\n  { value: 'Pending', label: 'Pending' },\n  { value: 'Running', label: 'Running' },\n  { value: 'Cancelled', label: 'Cancelled' }\n];\n\nconst riskOptions: SelectOptionType[] = [\n  { value: 'Low', label: 'Low' },\n  { value: 'Medium', label: 'Medium' },\n  { value: 'High', label: 'High' }\n];\n\nexport const PrimaryDetailFullPage: React.FunctionComponent = () => {\n  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);\n  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState('');\n  const [inputValue, setInputValue] = useState('');\n  const [statusIsOpen, setStatusIsOpen] = useState(false);\n  const [statusSelected, setStatusSelected] = useState<string | number | undefined>('Status');\n  const [riskIsOpen, setRiskIsOpen] = useState(false);\n  const [riskSelected, setRiskSelected] = useState<string | number | undefined>('Risk');\n  const [selectedDataListItemId, setSelectedDataListItemId] = useState('');\n\n  const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {\n    setStatusSelected(value);\n    setStatusIsOpen(false);\n  };\n\n  const onRiskSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {\n    setRiskSelected(value);\n    setRiskIsOpen(false);\n  };\n\n  const onSelectDataListItem = (\n    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,\n    id: string\n  ) => {\n    setSelectedDataListItemId(id);\n    setIsDrawerExpanded(true);\n    setDrawerPanelBodyContent(id.charAt(id.length - 1));\n  };\n\n  const onCloseDrawerClick = (_event: React.MouseEvent<HTMLDivElement>) => {\n    setIsDrawerExpanded(false);\n    setSelectedDataListItemId('');\n  };\n\n  const toggleGroupItems = (\n    <Flex alignItems={{ default: 'alignItemsCenter' }}>\n      <ToolbarItem>\n        <InputGroup>\n          <InputGroupItem isFill>\n            <TextInput\n              name=\"full-page-data-toolbar-input1\"\n              id=\"full-page-data-toolbar-input1\"\n              type=\"search\"\n              aria-label=\"search input example\"\n              onChange={(_event: React.FormEvent<HTMLInputElement>, value: string) => setInputValue(value)}\n              value={inputValue}\n            />\n          </InputGroupItem>\n          <InputGroupItem>\n            <Button variant={ButtonVariant.control} aria-label=\"search button for search input\" icon={<SearchIcon />} />\n          </InputGroupItem>\n        </InputGroup>\n      </ToolbarItem>\n      <ToolbarGroup variant=\"filter-group\">\n        <ToolbarItem>\n          <Select\n            aria-label=\"Status select\"\n            selected={statusSelected}\n            isOpen={statusIsOpen}\n            toggle={(toggleRef) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={() => setStatusIsOpen((prevIsOpen) => !prevIsOpen)}\n                isExpanded={statusIsOpen}\n              >\n                {statusSelected}\n              </MenuToggle>\n            )}\n            onOpenChange={(isOpen: boolean) => setStatusIsOpen(isOpen)}\n            onSelect={onStatusSelect}\n          >\n            {statusOptions.map(({ label, value }) => (\n              <SelectOption key={label} value={value}>\n                {label}\n              </SelectOption>\n            ))}\n          </Select>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Select\n            aria-label=\"Risk select\"\n            selected={riskSelected}\n            isOpen={riskIsOpen}\n            toggle={(toggleRef) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={() => setRiskIsOpen((prevIsOpen) => !prevIsOpen)}\n                isExpanded={riskIsOpen}\n              >\n                {riskSelected}\n              </MenuToggle>\n            )}\n            onOpenChange={(isOpen: boolean) => setRiskIsOpen(isOpen)}\n            onSelect={onRiskSelect}\n          >\n            {riskOptions.map(({ label, value }) => (\n              <SelectOption key={label} value={value}>\n                {label}\n              </SelectOption>\n            ))}\n          </Select>\n        </ToolbarItem>\n      </ToolbarGroup>\n    </Flex>\n  );\n\n  const ToolbarItems = (\n    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint=\"xl\">\n      {toggleGroupItems}\n    </ToolbarToggleGroup>\n  );\n\n  const panelContent = (\n    <DrawerPanelContent>\n      <DrawerHead>\n        <Title headingLevel=\"h2\" size=\"xl\">\n          node-{drawerPanelBodyContent}\n        </Title>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseDrawerClick} />\n        </DrawerActions>\n      </DrawerHead>\n      <DrawerPanelBody>\n        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>\n          <FlexItem>\n            <p>\n              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,\n              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and\n              can also make the drawer scrollable.\n            </p>\n          </FlexItem>\n          <FlexItem>\n            <Progress value={parseInt(drawerPanelBodyContent) * 10} title=\"Title\" />\n          </FlexItem>\n          <FlexItem>\n            <Progress value={parseInt(drawerPanelBodyContent) * 5} title=\"Title\" />\n          </FlexItem>\n        </Flex>\n      </DrawerPanelBody>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent = (\n    <Fragment>\n      <Toolbar id=\"full-page-data-toolbar\">\n        <ToolbarContent>{ToolbarItems}</ToolbarContent>\n      </Toolbar>\n      <DataList\n        aria-label=\"data list\"\n        selectedDataListItemId={selectedDataListItemId}\n        onSelectDataListItem={onSelectDataListItem}\n      >\n        <DataListItem id=\"full-page-item1\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"primary-content\">\n                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>\n                    <FlexItem>\n                      <p>patternfly</p>\n                      <small>\n                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>\n                      </small>\n                    </FlexItem>\n                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>\n                      <FlexItem>\n                        <RhUiBranchFillIcon /> 10\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCodeIcon /> 4\n                      </FlexItem>\n                      <FlexItem>\n                        <CubeIcon /> 5\n                      </FlexItem>\n                      <FlexItem>Updated 2 days ago</FlexItem>\n                    </Flex>\n                  </Flex>\n                </DataListCell>,\n                <DataListAction\n                  key=\"actions\"\n                  aria-labelledby=\"full-page-item1 full-page-action1\"\n                  id=\"full-page-action1\"\n                  aria-label=\"Actions\"\n                >\n                  <Stack>\n                    <StackItem>\n                      <Button variant={ButtonVariant.secondary}>Secondary</Button>\n                    </StackItem>\n                    <StackItem>\n                      <Button variant={ButtonVariant.link}>Link Button</Button>\n                    </StackItem>\n                  </Stack>\n                </DataListAction>\n              ]}\n            />\n          </DataListItemRow>\n        </DataListItem>\n        <DataListItem id=\"full-page-item2\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"primary-content\">\n                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>\n                    <FlexItem>\n                      <p>patternfly-elements</p>\n                      <small>PatternFly elements</small>\n                    </FlexItem>\n                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>\n                      <FlexItem>\n                        <RhUiBranchFillIcon /> 10\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCodeIcon /> 4\n                      </FlexItem>\n                      <FlexItem>\n                        <CubeIcon /> 5\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCheckCircleFillIcon /> 7\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiWarningFillIcon /> 5\n                      </FlexItem>\n                      <FlexItem>\n                        <TimesCircleIcon /> 5\n                      </FlexItem>\n                      <FlexItem>Updated 2 days ago</FlexItem>\n                    </Flex>\n                  </Flex>\n                </DataListCell>,\n                <DataListAction\n                  key=\"actions\"\n                  aria-labelledby=\"full-page-item2 full-page-action2\"\n                  id=\"full-page-action2\"\n                  aria-label=\"Actions\"\n                >\n                  <Stack>\n                    <StackItem>\n                      <Button variant={ButtonVariant.secondary}>Secondary</Button>\n                    </StackItem>\n                    <StackItem>\n                      <Button variant={ButtonVariant.link}>Link Button</Button>\n                    </StackItem>\n                  </Stack>\n                </DataListAction>\n              ]}\n            />\n          </DataListItemRow>\n        </DataListItem>\n        <DataListItem id=\"full-page-item3\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"primary-content\">\n                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>\n                    <FlexItem>\n                      <p>patternfly</p>\n                      <small>\n                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>\n                      </small>\n                    </FlexItem>\n                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>\n                      <FlexItem>\n                        <RhUiBranchFillIcon /> 10\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCodeIcon /> 4\n                      </FlexItem>\n                      <FlexItem>\n                        <CubeIcon /> 5\n                      </FlexItem>\n                      <FlexItem>Updated 2 days ago</FlexItem>\n                    </Flex>\n                  </Flex>\n                </DataListCell>,\n                <DataListAction\n                  key=\"actions\"\n                  aria-labelledby=\"full-page-item3 full-page-action3\"\n                  id=\"full-page-action3\"\n                  aria-label=\"Actions\"\n                >\n                  <Stack>\n                    <StackItem>\n                      <Button variant={ButtonVariant.secondary}>Secondary</Button>\n                    </StackItem>\n                    <StackItem>\n                      <Button variant={ButtonVariant.link}>Link Button</Button>\n                    </StackItem>\n                  </Stack>\n                </DataListAction>\n              ]}\n            />\n          </DataListItemRow>\n        </DataListItem>\n        <DataListItem id=\"full-page-item4\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"primary-content\">\n                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>\n                    <FlexItem>\n                      <p>patternfly-elements</p>\n                      <small>PatternFly elements</small>\n                    </FlexItem>\n                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>\n                      <FlexItem>\n                        <RhUiBranchFillIcon /> 10\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCodeIcon /> 4\n                      </FlexItem>\n                      <FlexItem>\n                        <CubeIcon /> 5\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCheckCircleFillIcon /> 7\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiWarningFillIcon /> 5\n                      </FlexItem>\n                      <FlexItem>\n                        <TimesCircleIcon /> 5\n                      </FlexItem>\n                      <FlexItem>Updated 2 days ago</FlexItem>\n                    </Flex>\n                  </Flex>\n                </DataListCell>,\n                <DataListAction\n                  key=\"actions\"\n                  aria-labelledby=\"full-page-item4 full-page-action4\"\n                  id=\"full-page-action4\"\n                  aria-label=\"Actions\"\n                >\n                  <Stack>\n                    <StackItem>\n                      <Button variant={ButtonVariant.secondary}>Secondary</Button>\n                    </StackItem>\n                    <StackItem>\n                      <Button variant={ButtonVariant.link}>Link Button</Button>\n                    </StackItem>\n                  </Stack>\n                </DataListAction>\n              ]}\n            />\n          </DataListItemRow>\n        </DataListItem>\n      </DataList>\n    </Fragment>\n  );\n\n  return (\n    <DashboardWrapper mainContainerId=\"main-content-page-layout-default-nav\">\n      <PageSection aria-labelledby=\"main-title\">\n        <Content>\n          <h1 id=\"main-title\">Main title</h1>\n          <p>\n            Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />\n            of it's relative line height of 1.5.\n          </p>\n        </Content>\n      </PageSection>\n      <Divider component=\"div\" />\n      <PageSection padding={{ default: 'noPadding' }} aria-label=\"Card with drawer content\">\n        <Drawer isExpanded={isDrawerExpanded}>\n          <DrawerContent panelContent={panelContent}>\n            <DrawerContentBody>{drawerContent}</DrawerContentBody>\n          </DrawerContent>\n        </Drawer>\n      </PageSection>\n    </DashboardWrapper>\n  );\n};\n","title":"Primary-detail full page","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Primary-detail content padding': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportprimarydetailcontentpadding} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Button,\n  ButtonVariant,\n  Content,\n  DataList,\n  DataListAction,\n  DataListCell,\n  DataListItem,\n  DataListItemCells,\n  DataListItemRow,\n  Toolbar,\n  ToolbarItem,\n  ToolbarContent,\n  ToolbarToggleGroup,\n  ToolbarGroup,\n  Divider,\n  Drawer,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerPanelBody,\n  DrawerPanelContent,\n  Flex,\n  FlexItem,\n  InputGroup,\n  InputGroupItem,\n  PageSection,\n  Progress,\n  Stack,\n  StackItem,\n  TextInput,\n  Title,\n  Select,\n  SelectOption,\n  SelectOptionProps,\n  MenuToggle\n} from '@patternfly/react-core';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\nimport RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';\nimport RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';\nimport RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';\n\ninterface SelectOptionType extends Omit<SelectOptionProps, 'children'> {\n  label: string;\n}\n\nconst statusOptions: SelectOptionType[] = [\n  { value: 'New', label: 'New' },\n  { value: 'Pending', label: 'Pending' },\n  { value: 'Running', label: 'Running' },\n  { value: 'Cancelled', label: 'Cancelled' }\n];\n\nconst riskOptions: SelectOptionType[] = [\n  { value: 'Low', label: 'Low' },\n  { value: 'Medium', label: 'Medium' },\n  { value: 'High', label: 'High' }\n];\n\nexport const PrimaryDetailContentPadding: React.FunctionComponent = () => {\n  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);\n  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState('');\n  const [inputValue, setInputValue] = useState('');\n  const [statusIsOpen, setStatusIsOpen] = useState(false);\n  const [statusSelected, setStatusSelected] = useState<string | number | undefined>('Status');\n  const [riskIsOpen, setRiskIsOpen] = useState(false);\n  const [riskSelected, setRiskSelected] = useState<string | number | undefined>('Risk');\n  const [selectedDataListItemId, setSelectedDataListItemId] = useState('');\n\n  const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {\n    setStatusSelected(value);\n    setStatusIsOpen(false);\n  };\n\n  const onRiskSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {\n    setRiskSelected(value);\n    setRiskIsOpen(false);\n  };\n\n  const onSelectDataListItem = (\n    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,\n    id: string\n  ) => {\n    setSelectedDataListItemId(id);\n    setIsDrawerExpanded(true);\n    setDrawerPanelBodyContent(id.charAt(id.length - 1));\n  };\n\n  const onCloseDrawerClick = (_event: React.MouseEvent<HTMLDivElement>) => {\n    setIsDrawerExpanded(false);\n    setSelectedDataListItemId('');\n  };\n\n  const toggleGroupItems = (\n    <Flex alignItems={{ default: 'alignItemsCenter' }}>\n      <ToolbarItem>\n        <InputGroup>\n          <InputGroupItem isFill>\n            <TextInput\n              name=\"content-padding-data-toolbar-input1\"\n              id=\"content-padding-data-toolbar-input1\"\n              type=\"search\"\n              aria-label=\"search input example\"\n              onChange={(_event: React.FormEvent<HTMLInputElement>, value: string) => setInputValue(value)}\n              value={inputValue}\n            />\n          </InputGroupItem>\n          <InputGroupItem>\n            <Button variant={ButtonVariant.control} aria-label=\"search button for search input\" icon={<SearchIcon />} />\n          </InputGroupItem>\n        </InputGroup>\n      </ToolbarItem>\n      <ToolbarGroup variant=\"filter-group\">\n        <ToolbarItem>\n          <Select\n            aria-label=\"Status select\"\n            selected={statusSelected}\n            isOpen={statusIsOpen}\n            toggle={(toggleRef) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={() => setStatusIsOpen((prevIsOpen) => !prevIsOpen)}\n                isExpanded={statusIsOpen}\n              >\n                {statusSelected}\n              </MenuToggle>\n            )}\n            onOpenChange={(isOpen: boolean) => setStatusIsOpen(isOpen)}\n            onSelect={onStatusSelect}\n          >\n            {statusOptions.map(({ label, value }) => (\n              <SelectOption key={label} value={value}>\n                {label}\n              </SelectOption>\n            ))}\n          </Select>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Select\n            aria-label=\"Risk select\"\n            selected={riskSelected}\n            isOpen={riskIsOpen}\n            toggle={(toggleRef) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={() => setRiskIsOpen((prevIsOpen) => !prevIsOpen)}\n                isExpanded={riskIsOpen}\n              >\n                {riskSelected}\n              </MenuToggle>\n            )}\n            onOpenChange={(isOpen: boolean) => setRiskIsOpen(isOpen)}\n            onSelect={onRiskSelect}\n          >\n            {riskOptions.map(({ label, value }) => (\n              <SelectOption key={label} value={value}>\n                {label}\n              </SelectOption>\n            ))}\n          </Select>\n        </ToolbarItem>\n      </ToolbarGroup>\n    </Flex>\n  );\n\n  const ToolbarItems = (\n    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint=\"xl\">\n      {toggleGroupItems}\n    </ToolbarToggleGroup>\n  );\n\n  const panelContent = (\n    <DrawerPanelContent isPlain>\n      <DrawerHead>\n        <Title headingLevel=\"h2\" size=\"xl\">\n          node-{drawerPanelBodyContent}\n        </Title>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseDrawerClick} />\n        </DrawerActions>\n      </DrawerHead>\n      <DrawerPanelBody>\n        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>\n          <FlexItem>\n            <p>\n              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,\n              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and\n              can also make the drawer scrollable.\n            </p>\n          </FlexItem>\n          <FlexItem>\n            <Progress value={parseInt(drawerPanelBodyContent) * 10} title=\"Title\" />\n          </FlexItem>\n          <FlexItem>\n            <Progress value={parseInt(drawerPanelBodyContent) * 5} title=\"Title\" />\n          </FlexItem>\n        </Flex>\n      </DrawerPanelBody>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent = (\n    <Fragment>\n      <Toolbar id=\"content-padding-data-toolbar\">\n        <ToolbarContent>{ToolbarItems}</ToolbarContent>\n      </Toolbar>\n      <DataList\n        aria-label=\"data list\"\n        selectedDataListItemId={selectedDataListItemId}\n        onSelectDataListItem={onSelectDataListItem}\n      >\n        <DataListItem id=\"content-padding-item1\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"primary-content\">\n                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>\n                    <FlexItem>\n                      <p>patternfly</p>\n                      <small>\n                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>\n                      </small>\n                    </FlexItem>\n                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>\n                      <FlexItem>\n                        <RhUiBranchFillIcon /> 10\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCodeIcon /> 4\n                      </FlexItem>\n                      <FlexItem>\n                        <CubeIcon /> 5\n                      </FlexItem>\n                      <FlexItem>Updated 2 days ago</FlexItem>\n                    </Flex>\n                  </Flex>\n                </DataListCell>,\n                <DataListAction\n                  key=\"actions\"\n                  aria-labelledby=\"content-padding-item1 content-padding-action1\"\n                  id=\"content-padding-action1\"\n                  aria-label=\"Actions\"\n                >\n                  <Stack>\n                    <StackItem>\n                      <Button variant={ButtonVariant.secondary}>Secondary</Button>\n                    </StackItem>\n                    <StackItem>\n                      <Button variant={ButtonVariant.link}>Link Button</Button>\n                    </StackItem>\n                  </Stack>\n                </DataListAction>\n              ]}\n            />\n          </DataListItemRow>\n        </DataListItem>\n        <DataListItem id=\"content-padding-item2\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"primary-content\">\n                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>\n                    <FlexItem>\n                      <p>patternfly-elements</p>\n                      <small>PatternFly elements</small>\n                    </FlexItem>\n                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>\n                      <FlexItem>\n                        <RhUiBranchFillIcon /> 10\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCodeIcon /> 4\n                      </FlexItem>\n                      <FlexItem>\n                        <CubeIcon /> 5\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCheckCircleFillIcon /> 7\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiWarningFillIcon /> 5\n                      </FlexItem>\n                      <FlexItem>\n                        <TimesCircleIcon /> 5\n                      </FlexItem>\n                      <FlexItem>Updated 2 days ago</FlexItem>\n                    </Flex>\n                  </Flex>\n                </DataListCell>,\n                <DataListAction\n                  key=\"actions\"\n                  aria-labelledby=\"content-padding-item2 content-padding-action2\"\n                  id=\"content-padding-action2\"\n                  aria-label=\"Actions\"\n                >\n                  <Stack>\n                    <StackItem>\n                      <Button variant={ButtonVariant.secondary}>Secondary</Button>\n                    </StackItem>\n                    <StackItem>\n                      <Button variant={ButtonVariant.link}>Link Button</Button>\n                    </StackItem>\n                  </Stack>\n                </DataListAction>\n              ]}\n            />\n          </DataListItemRow>\n        </DataListItem>\n        <DataListItem id=\"content-padding-item3\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"primary-content\">\n                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>\n                    <FlexItem>\n                      <p>patternfly</p>\n                      <small>\n                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>\n                      </small>\n                    </FlexItem>\n                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>\n                      <FlexItem>\n                        <RhUiBranchFillIcon /> 10\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCodeIcon /> 4\n                      </FlexItem>\n                      <FlexItem>\n                        <CubeIcon /> 5\n                      </FlexItem>\n                      <FlexItem>Updated 2 days ago</FlexItem>\n                    </Flex>\n                  </Flex>\n                </DataListCell>,\n                <DataListAction\n                  key=\"actions\"\n                  aria-labelledby=\"content-padding-item3 content-padding-action3\"\n                  id=\"content-padding-action3\"\n                  aria-label=\"Actions\"\n                >\n                  <Stack>\n                    <StackItem>\n                      <Button variant={ButtonVariant.secondary}>Secondary</Button>\n                    </StackItem>\n                    <StackItem>\n                      <Button variant={ButtonVariant.link}>Link Button</Button>\n                    </StackItem>\n                  </Stack>\n                </DataListAction>\n              ]}\n            />\n          </DataListItemRow>\n        </DataListItem>\n        <DataListItem id=\"content-padding-item4\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"primary-content\">\n                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>\n                    <FlexItem>\n                      <p>patternfly-elements</p>\n                      <small>PatternFly elements</small>\n                    </FlexItem>\n                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>\n                      <FlexItem>\n                        <RhUiBranchFillIcon /> 10\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCodeIcon /> 4\n                      </FlexItem>\n                      <FlexItem>\n                        <CubeIcon /> 5\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCheckCircleFillIcon /> 7\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiWarningFillIcon /> 5\n                      </FlexItem>\n                      <FlexItem>\n                        <TimesCircleIcon /> 5\n                      </FlexItem>\n                      <FlexItem>Updated 2 days ago</FlexItem>\n                    </Flex>\n                  </Flex>\n                </DataListCell>,\n                <DataListAction\n                  key=\"actions\"\n                  aria-labelledby=\"content-padding-item4 content-padding-action4\"\n                  id=\"content-padding-action4\"\n                  aria-label=\"Actions\"\n                >\n                  <Stack>\n                    <StackItem>\n                      <Button variant={ButtonVariant.secondary}>Secondary</Button>\n                    </StackItem>\n                    <StackItem>\n                      <Button variant={ButtonVariant.link}>Link Button</Button>\n                    </StackItem>\n                  </Stack>\n                </DataListAction>\n              ]}\n            />\n          </DataListItemRow>\n        </DataListItem>\n      </DataList>\n    </Fragment>\n  );\n\n  return (\n    <DashboardWrapper>\n      <PageSection aria-labelledby=\"main-title\">\n        <Content>\n          <h1 id=\"main-title\">Main title</h1>\n          <p>\n            Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />\n            of it's relative line height of 1.5.\n          </p>\n        </Content>\n      </PageSection>\n      <Divider component=\"div\" />\n      <PageSection padding={{ default: 'noPadding' }} aria-label=\"Drawer content section\">\n        <Drawer isExpanded={isDrawerExpanded}>\n          <DrawerContent panelContent={panelContent}>\n            <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>\n          </DrawerContent>\n        </Drawer>\n      </PageSection>\n    </DashboardWrapper>\n  );\n};\n","title":"Primary-detail content padding","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Primary-detail card view': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportprimarydetailcardview} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Badge,\n  Button,\n  Card,\n  CardHeader,\n  CardBody,\n  CardTitle,\n  Content,\n  Divider,\n  Drawer,\n  DrawerActions,\n  DrawerPanelBody,\n  DrawerCloseButton,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerPanelContent,\n  Dropdown,\n  DropdownItem,\n  DropdownList,\n  Flex,\n  FlexItem,\n  Gallery,\n  MenuToggle,\n  MenuToggleCheckbox,\n  PageSection,\n  Pagination,\n  Progress,\n  Select,\n  SelectList,\n  SelectOption,\n  Title,\n  Toolbar,\n  ToolbarFilter,\n  ToolbarItem,\n  ToolbarContent,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';\nimport pfIcon from './assets/pf-logo-small.svg';\nimport activeMQIcon from './assets/activemq-core_200x150.png';\nimport avroIcon from './assets/camel-avro_200x150.png';\nimport dropBoxIcon from './assets/camel-dropbox_200x150.png';\nimport infinispanIcon from './assets/camel-infinispan_200x150.png';\nimport saxonIcon from './assets/camel-saxon_200x150.png';\nimport sparkIcon from './assets/camel-spark_200x150.png';\nimport swaggerIcon from './assets/camel-swagger-java_200x150.png';\nimport azureIcon from './assets/FuseConnector_Icons_AzureServices.png';\nimport restIcon from './assets/FuseConnector_Icons_REST.png';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';\nimport { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';\n\nexport const PrimaryDetailCardView: React.FunctionComponent = () => {\n  const [totalItemCount, setTotalItemCount] = useState(10);\n  const [cardData, setCardData] = useState(data);\n  const [isChecked, setIsChecked] = useState(false);\n  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);\n  const [selectedItems, setSelectedItems] = useState<number[]>([]);\n  const [areAllSelected, setAreAllSelected] = useState<boolean>(false);\n  const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = useState(false);\n  const [isLowerToolbarDropdownOpen, setIsLowerToolbarDropdownOpen] = useState(false);\n  const [isLowerToolbarKebabDropdownOpen, setIsLowerToolbarKebabDropdownOpen] = useState(false);\n  const [page, setPage] = useState(1);\n  const [perPage, setPerPage] = useState(10);\n  const [filters, setFilters] = useState<Record<string, string[]>>({ products: [] });\n  const [state, setState] = useState({});\n  const [activeCard, setActiveCard] = useState(-1);\n\n  interface ProductType {\n    id: number;\n    name: string;\n    icon: string;\n    description: string;\n  }\n\n  const onToolbarDropdownToggle = () => {\n    setIsLowerToolbarDropdownOpen(!isLowerToolbarDropdownOpen);\n  };\n\n  const onToolbarKebabDropdownToggle = () => {\n    setIsLowerToolbarKebabDropdownOpen(!isLowerToolbarKebabDropdownOpen);\n  };\n\n  const onToolbarKebabDropdownSelect = () => {\n    setIsLowerToolbarKebabDropdownOpen(!isLowerToolbarKebabDropdownOpen);\n  };\n\n  const onCardKebabDropdownToggle = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.MouseEvent<HTMLDivElement, MouseEvent>,\n    key: string\n  ) => {\n    setState({\n      [key]: !state[key as keyof Object]\n    });\n  };\n\n  const checkAllSelected = (selected: number, total: number) => {\n    if (selected && selected < total) {\n      return null;\n    }\n    return selected === total;\n  };\n\n  const onNameSelect = (event: any, selection = '') => {\n    const checked = event.target.checked;\n    const prevSelections = filters.products;\n\n    setFilters({\n      ...filters,\n      products: checked ? [...prevSelections, selection] : prevSelections.filter((value) => value !== selection)\n    });\n  };\n\n  const onDelete = (type = '', _id = '') => {\n    if (type) {\n      setFilters(filters);\n    } else {\n      setFilters({ products: [] });\n    }\n  };\n\n  const deleteItem = (item: ProductType) => {\n    const filter = (getter) => (val) => getter(val) !== item.id;\n\n    setCardData(cardData.filter(filter(({ id }) => id)));\n\n    setSelectedItems(selectedItems.filter(filter((id) => id)));\n\n    setTotalItemCount(totalItemCount - 1);\n    setIsDrawerExpanded(false);\n    setActiveCard(-1);\n  };\n\n  const onSetPage = (_event: any, pageNumber: number) => {\n    setPage(pageNumber);\n  };\n\n  const onPerPageSelect = (_event: any, perPage: number) => {\n    setPerPage(perPage);\n    setPage(1);\n  };\n\n  const onSplitButtonToggle = () => {\n    setSplitButtonDropdownIsOpen(!splitButtonDropdownIsOpen);\n  };\n\n  const onSplitButtonSelect = () => {\n    setSplitButtonDropdownIsOpen(false);\n    setIsDrawerExpanded(false);\n    setActiveCard(-1);\n  };\n\n  const onCloseDrawerClick = () => {\n    setActiveCard(-1);\n    setIsDrawerExpanded(false);\n  };\n\n  const onChange = (event: React.FormEvent<HTMLInputElement>) => {\n    const name = event.currentTarget.name;\n    const productId = Number(name.charAt(name.length - 1));\n\n    if (selectedItems.includes(productId * 1)) {\n      setSelectedItems(selectedItems.filter((id) => productId * 1 !== id));\n\n      const checkAll = checkAllSelected(selectedItems.length - 1, totalItemCount);\n      setAreAllSelected(!!checkAll);\n    } else {\n      setSelectedItems([...selectedItems, productId * 1]);\n      const checkAll = checkAllSelected(selectedItems.length + 1, totalItemCount);\n      setAreAllSelected(!!checkAll);\n    }\n  };\n\n  const onCardClick = (productId) => {\n    if (productId === activeCard) {\n      setIsDrawerExpanded(!isDrawerExpanded);\n      setActiveCard(-1);\n    } else {\n      setActiveCard(productId);\n      setIsDrawerExpanded(true);\n    }\n  };\n\n  const selectPage = (e: { target: { checked: any } }) => {\n    const { checked } = e.target;\n    let collection: number[] = [];\n\n    collection = getAllItems();\n\n    setSelectedItems(collection);\n    setIsChecked(checked);\n    setAreAllSelected(totalItemCount === perPage ? true : false);\n\n    updateSelected();\n  };\n\n  const selectAll = () => {\n    let collection: number[] = [];\n    for (let i = 0; i <= 9; i++) {\n      collection = [...collection, i];\n    }\n\n    setSelectedItems(collection);\n    setIsChecked(true);\n    setAreAllSelected(true);\n\n    updateSelected();\n  };\n\n  const selectNone = () => {\n    setSelectedItems([]);\n    setIsChecked(false);\n    setAreAllSelected(false);\n    setIsDrawerExpanded(false);\n    setActiveCard(-1);\n\n    updateSelected();\n  };\n\n  const updateSelected = () => {\n    const rows = cardData.map((post) => {\n      post.selected = selectedItems.includes(post.id);\n      return post;\n    });\n\n    setCardData(rows);\n  };\n\n  const getAllItems = () => {\n    const collection: number[] = [];\n    for (const items of cardData) {\n      collection.push(items.id);\n    }\n\n    return collection;\n  };\n\n  const splitCheckboxSelectAll = (e: any) => {\n    let collection: number[] = [];\n\n    if (e.target.checked) {\n      for (let i = 0; i <= 9; i++) {\n        collection = [...collection, i];\n      }\n    }\n\n    setSelectedItems(collection);\n    setIsChecked(isChecked);\n    setAreAllSelected(e.target.checked);\n    setIsDrawerExpanded(false);\n    setActiveCard(-1);\n\n    updateSelected();\n  };\n\n  const renderPagination = () => {\n    const defaultPerPageOptions = [\n      {\n        title: '1',\n        value: 1\n      },\n      {\n        title: '5',\n        value: 5\n      },\n      {\n        title: '10',\n        value: 10\n      }\n    ];\n\n    return (\n      <Pagination\n        itemCount={totalItemCount}\n        page={page}\n        perPage={perPage}\n        perPageOptions={defaultPerPageOptions}\n        onSetPage={onSetPage}\n        onPerPageSelect={onPerPageSelect}\n        variant=\"top\"\n        isCompact\n      />\n    );\n  };\n\n  const buildSelectDropdown = () => {\n    const numSelected = selectedItems.length;\n    const anySelected = numSelected > 0;\n    const splitButtonDropdownItems = (\n      <>\n        <DropdownItem key=\"item-1\" onClick={selectNone}>\n          Select none (0 items)\n        </DropdownItem>\n        <DropdownItem key=\"item-2\" onClick={selectPage}>\n          Select page ({perPage} items)\n        </DropdownItem>\n        <DropdownItem key=\"item-3\" onClick={selectAll}>\n          Select all ({totalItemCount} items)\n        </DropdownItem>\n      </>\n    );\n\n    return (\n      <Dropdown\n        onSelect={onSplitButtonSelect}\n        isOpen={splitButtonDropdownIsOpen}\n        onOpenChange={(isOpen) => setSplitButtonDropdownIsOpen(isOpen)}\n        toggle={(toggleRef) => (\n          <MenuToggle\n            ref={toggleRef}\n            isExpanded={splitButtonDropdownIsOpen}\n            onClick={onSplitButtonToggle}\n            aria-label=\"Select cards\"\n            splitButtonItems={[\n              <MenuToggleCheckbox\n                id=\"split-dropdown-checkbox\"\n                key=\"split-dropdown-checkbox\"\n                aria-label={anySelected ? 'Deselect all cards' : 'Select all cards'}\n                isChecked={areAllSelected}\n                onClick={splitCheckboxSelectAll.bind(this)}\n              >\n                {numSelected !== 0 && `${numSelected} selected`}\n              </MenuToggleCheckbox>\n            ]}\n          ></MenuToggle>\n        )}\n      >\n        <DropdownList>{splitButtonDropdownItems}</DropdownList>\n      </Dropdown>\n    );\n  };\n\n  const buildFilterDropdown = () => {\n    const filterDropdownItems = (\n      <SelectList>\n        <SelectOption\n          hasCheckbox\n          key=\"patternfly\"\n          value=\"PatternFly\"\n          isSelected={filters.products.includes('PatternFly')}\n        >\n          PatternFly\n        </SelectOption>\n        <SelectOption hasCheckbox key=\"activemq\" value=\"ActiveMQ\" isSelected={filters.products.includes('ActiveMQ')}>\n          ActiveMQ\n        </SelectOption>\n        <SelectOption\n          hasCheckbox\n          key=\"apachespark\"\n          value=\"Apache Spark\"\n          isSelected={filters.products.includes('Apache Spark')}\n        >\n          Apache Spark\n        </SelectOption>\n        <SelectOption hasCheckbox key=\"avro\" value=\"Avro\" isSelected={filters.products.includes('Avro')}>\n          Avro\n        </SelectOption>\n        <SelectOption\n          hasCheckbox\n          key=\"azureservices\"\n          value=\"Azure Services\"\n          isSelected={filters.products.includes('Azure Services')}\n        >\n          Azure Services\n        </SelectOption>\n        <SelectOption hasCheckbox key=\"crypto\" value=\"Crypto\" isSelected={filters.products.includes('Crypto')}>\n          Crypto\n        </SelectOption>\n        <SelectOption hasCheckbox key=\"dropbox\" value=\"DropBox\" isSelected={filters.products.includes('DropBox')}>\n          DropBox\n        </SelectOption>\n        <SelectOption\n          hasCheckbox\n          key=\"jbossdatagrid\"\n          value=\"JBoss Data Grid\"\n          isSelected={filters.products.includes('JBoss Data Grid')}\n        >\n          JBoss Data Grid\n        </SelectOption>\n        <SelectOption hasCheckbox key=\"rest\" value=\"REST\" isSelected={filters.products.includes('REST')}>\n          REST\n        </SelectOption>\n        <SelectOption hasCheckbox key=\"swagger\" value=\"SWAGGER\" isSelected={filters.products.includes('SWAGGER')}>\n          SWAGGER\n        </SelectOption>\n      </SelectList>\n    );\n\n    return (\n      <ToolbarFilter\n        categoryName=\"Products\"\n        labels={filters.products}\n        deleteLabel={(type, id) => onDelete(type as string, id as string)}\n      >\n        <Select\n          aria-label=\"Products\"\n          role=\"menu\"\n          toggle={(toggleRef) => (\n            <MenuToggle ref={toggleRef} onClick={onToolbarDropdownToggle} isExpanded={isLowerToolbarDropdownOpen}>\n              Filter by creator name\n              {filters.products.length > 0 && <Badge isRead>{filters.products.length}</Badge>}\n            </MenuToggle>\n          )}\n          onSelect={(event, selection) => onNameSelect(event, selection?.toString())}\n          onOpenChange={(isOpen) => {\n            setIsLowerToolbarDropdownOpen(isOpen);\n          }}\n          selected={filters.products}\n          isOpen={isLowerToolbarDropdownOpen}\n        >\n          {filterDropdownItems}\n        </Select>\n      </ToolbarFilter>\n    );\n  };\n\n  const toolbarKebabDropdownItems = (\n    <>\n      <DropdownItem value={0} key=\"action\">\n        Action\n      </DropdownItem>\n      <DropdownItem\n        value={1}\n        key=\"link\"\n        to=\"#default-link2\"\n        // Prevent the default onClick functionality for example purposes\n        onClick={(ev) => ev.preventDefault()}\n      >\n        Link\n      </DropdownItem>\n      <DropdownItem value={2} isDisabled key=\"disabled action\">\n        Disabled Action\n      </DropdownItem>\n      <DropdownItem value={3} isDisabled key=\"disabled link\" to=\"#default-link4\">\n        Disabled Link\n      </DropdownItem>\n      <Divider component=\"li\" key=\"separator\" />\n      <DropdownItem value={4} key=\"separated action\">\n        Separated Action\n      </DropdownItem>\n      <DropdownItem value={5} key=\"separated link\" to=\"#default-link6\" onClick={(ev) => ev.preventDefault()}>\n        Separated Link\n      </DropdownItem>\n    </>\n  );\n  const toolbarItems = (\n    <Fragment>\n      <ToolbarItem>{buildSelectDropdown()}</ToolbarItem>\n      <ToolbarItem>{buildFilterDropdown()}</ToolbarItem>\n      <ToolbarItem>\n        <Button variant=\"primary\">Create instance</Button>\n      </ToolbarItem>\n      <ToolbarItem>\n        <Button variant=\"secondary\">Action</Button>\n      </ToolbarItem>\n      <ToolbarItem>\n        <Dropdown\n          onSelect={onToolbarKebabDropdownSelect}\n          isOpen={isLowerToolbarKebabDropdownOpen}\n          onOpenChange={(isOpen) => setIsLowerToolbarKebabDropdownOpen(isOpen)}\n          toggle={(toggleRef) => (\n            <MenuToggle\n              ref={toggleRef}\n              isExpanded={isLowerToolbarKebabDropdownOpen}\n              variant=\"plain\"\n              onClick={onToolbarKebabDropdownToggle}\n              aria-label=\"Toolbar actions\"\n              icon={<RhUiEllipsisVerticalFillIcon />}\n            />\n          )}\n        >\n          <DropdownList>{toolbarKebabDropdownItems}</DropdownList>\n        </Dropdown>\n      </ToolbarItem>\n      <ToolbarItem variant=\"pagination\" align={{ default: 'alignEnd' }}>\n        {renderPagination()}\n      </ToolbarItem>\n    </Fragment>\n  );\n\n  const filtered =\n    filters.products.length > 0\n      ? data.filter((card: { name: string }) => filters.products.length === 0 || filters.products.includes(card.name))\n      : cardData.slice((page - 1) * perPage, perPage === 1 ? page * perPage : page * perPage - 1);\n\n  const icons = {\n    pfIcon,\n    activeMQIcon,\n    sparkIcon,\n    avroIcon,\n    azureIcon,\n    saxonIcon,\n    dropBoxIcon,\n    infinispanIcon,\n    restIcon,\n    swaggerIcon\n  };\n\n  const drawerContent = (\n    <Gallery hasGutter role=\"region\" aria-label=\"Selectable card container\">\n      {filtered.map((product, key) => (\n        <Card\n          key={product.name}\n          id={'card-view-' + key}\n          isClickable\n          isSelectable\n          isSelected={activeCard === product.id}\n        >\n          <CardHeader\n            actions={{\n              actions: (\n                <>\n                  <Dropdown\n                    isOpen={!!state[key] ?? false}\n                    onOpenChange={(isOpen) => setState({ [key]: isOpen })}\n                    popperProps={{ position: 'right' }}\n                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                      <MenuToggle\n                        ref={toggleRef}\n                        aria-label={`${product.name} actions`}\n                        variant=\"plain\"\n                        onClick={(e) => {\n                          onCardKebabDropdownToggle(e, key.toString());\n                        }}\n                        isExpanded={!!state[key]}\n                        icon={<RhUiEllipsisVerticalFillIcon />}\n                      />\n                    )}\n                  >\n                    <DropdownList>\n                      <DropdownItem\n                        key=\"trash\"\n                        onClick={() => {\n                          deleteItem(product);\n                        }}\n                      >\n                        <TrashIcon />\n                        Delete\n                      </DropdownItem>\n                    </DropdownList>\n                  </Dropdown>\n                </>\n              )\n            }}\n            selectableActions={{\n              isChecked: selectedItems.includes(product.id),\n              selectableActionId: `selectable-actions-item-${product.id}`,\n              selectableActionAriaLabelledby: `${'card-view-' + key}`,\n              name: `check-${product.id}`,\n              onChange\n            }}\n          >\n            <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />\n          </CardHeader>\n          <CardTitle>\n            <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>\n              <FlexItem>\n                <Button\n                  variant=\"link\"\n                  isInline\n                  onClick={() => onCardClick(product.id)}\n                  aria-expanded={activeCard === product.id}\n                >\n                  {product.name}\n                </Button>\n              </FlexItem>\n              <FlexItem>\n                <Content>\n                  <small className=\"pf-v6-u-color-200 pf-v6-u-font-family-text\">Provided by Red Hat</small>\n                </Content>\n              </FlexItem>\n            </Flex>\n          </CardTitle>\n\n          <CardBody>{product.description}</CardBody>\n        </Card>\n      ))}\n    </Gallery>\n  );\n\n  const panelContent = (\n    <DrawerPanelContent>\n      <DrawerHead>\n        <Title headingLevel=\"h2\" size=\"xl\">\n          node-{activeCard}\n        </Title>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseDrawerClick} />\n        </DrawerActions>\n      </DrawerHead>\n      <DrawerPanelBody>\n        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>\n          <FlexItem>\n            <p>\n              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,\n              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and\n              can also make the drawer scrollable.\n            </p>\n          </FlexItem>\n          <FlexItem>\n            <Progress value={activeCard * 10} title=\"Title\" />\n          </FlexItem>\n          <FlexItem>\n            <Progress value={activeCard * 5} title=\"Title\" />\n          </FlexItem>\n        </Flex>\n      </DrawerPanelBody>\n    </DrawerPanelContent>\n  );\n\n  return (\n    <DashboardWrapper mainContainerId=\"main-content-card-view-default-nav\" breadcrumb={null}>\n      <PageSection aria-labelledby=\"projects\">\n        <Content>\n          <h1 id=\"projects\">Projects</h1>\n          <p>This is a demo that showcases Patternfly cards.</p>\n        </Content>\n      </PageSection>\n      <PageSection isFilled padding={{ md: 'padding' }} aria-label=\"Card filtering toolbar\">\n        <Toolbar id=\"card-view-data-toolbar-group-types\" clearAllFilters={onDelete}>\n          <ToolbarContent>{toolbarItems}</ToolbarContent>\n        </Toolbar>\n        <Divider component=\"div\" />\n      </PageSection>\n      <PageSection isFilled padding={{ default: 'noPadding' }} aria-label=\"Card content area\">\n        <Drawer isExpanded={isDrawerExpanded} className={'pf-m-inline-on-2xl'}>\n          <DrawerContent panelContent={panelContent}>\n            <DrawerContentBody hasPadding>{drawerContent}</DrawerContentBody>\n          </DrawerContent>\n        </Drawer>\n      </PageSection>\n      <PageSection\n        isFilled={false}\n        stickyOnBreakpoint={{ default: 'bottom' }}\n        padding={{ default: 'noPadding' }}\n        variant=\"light\"\n        aria-label=\"Pagination controls\"\n      >\n        <Pagination\n          itemCount={filtered.length}\n          page={page}\n          perPage={perPage}\n          onPerPageSelect={onPerPageSelect}\n          onSetPage={onSetPage}\n          variant=\"bottom\"\n        />\n      </PageSection>\n    </DashboardWrapper>\n  );\n};\n","title":"Primary-detail card view","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Primary-detail simple list in card': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportprimarydetailsimplelistincard} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Card,\n  Content,\n  Divider,\n  Drawer,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerPanelBody,\n  DrawerPanelContent,\n  Flex,\n  FlexItem,\n  PageSection,\n  Progress,\n  SimpleList,\n  SimpleListGroup,\n  SimpleListItem,\n  Title\n} from '@patternfly/react-core';\nimport { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';\n\nexport const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => {\n  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(1);\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const onSelectListItem = (_listItem, listItemProps) => {\n    const id = listItemProps.children;\n    setDrawerPanelBodyContent(id.charAt(id.length - 1));\n    setIsExpanded(true);\n  };\n\n  const onClose = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent widths={{ xl: 'width_75' }}>\n      <DrawerHead>\n        <Title headingLevel=\"h2\" size=\"xl\">\n          {`List item ${drawerPanelBodyContent} details`}\n        </Title>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onClose} />\n        </DrawerActions>\n      </DrawerHead>\n      <DrawerPanelBody>\n        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>\n          <FlexItem>\n            <p>\n              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,\n              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and\n              can also make the drawer scrollable.\n            </p>\n          </FlexItem>\n          <FlexItem>\n            <Progress value={drawerPanelBodyContent * 10} title=\"Title\" />\n          </FlexItem>\n          <FlexItem>\n            <Progress value={drawerPanelBodyContent * 5} title=\"Title\" />\n          </FlexItem>\n        </Flex>\n      </DrawerPanelBody>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent = (\n    <Fragment>\n      <SimpleList onSelect={onSelectListItem}>\n        <SimpleListGroup title=\"Section 1\" id=\"simple-list-section-1\">\n          <SimpleListItem key=\"item1\" isActive>\n            List item 1\n          </SimpleListItem>\n          <SimpleListItem key=\"item2\">List item 2</SimpleListItem>\n          <SimpleListItem key=\"item3\">List item 3</SimpleListItem>\n          <SimpleListItem key=\"item4\">List item 4</SimpleListItem>\n        </SimpleListGroup>\n        <SimpleListGroup title=\"Section 2\" id=\"section-2\">\n          <SimpleListItem key=\"item5\">List item 5</SimpleListItem>\n          <SimpleListItem key=\"item6\">List item 6</SimpleListItem>\n          <SimpleListItem key=\"item7\">List item 7</SimpleListItem>\n          <SimpleListItem key=\"item8\">List item 8</SimpleListItem>\n          <SimpleListItem key=\"item9\">List item 9</SimpleListItem>\n        </SimpleListGroup>\n      </SimpleList>\n    </Fragment>\n  );\n\n  return (\n    <DashboardWrapper>\n      <PageSection aria-labelledby=\"main-title\">\n        <Content>\n          <h1 id=\"main-title\">Main title</h1>\n          <p>\n            Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />\n            of it’s relative line height of 1.5.\n          </p>\n        </Content>\n      </PageSection>\n      <Divider component=\"div\" />\n      <PageSection aria-label=\"Card with drawer content\">\n        <Card>\n          <Drawer isStatic isExpanded={isExpanded}>\n            <DrawerContent panelContent={panelContent}>\n              <DrawerContentBody>{drawerContent}</DrawerContentBody>\n            </DrawerContent>\n          </Drawer>\n        </Card>\n      </PageSection>\n    </DashboardWrapper>\n  );\n};\n","title":"Primary-detail simple list in card","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Primary-detail data list in card': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportprimarydetaildatalistincard} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Card,\n  Content,\n  DataList,\n  DataListCell,\n  DataListItem,\n  DataListItemCells,\n  DataListItemRow,\n  Toolbar,\n  ToolbarContent,\n  ToolbarItem,\n  Divider,\n  Drawer,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerPanelBody,\n  DrawerPanelContent,\n  Dropdown,\n  DropdownItem,\n  DropdownList,\n  Flex,\n  FlexItem,\n  MenuToggle,\n  PageSection,\n  Progress,\n  Title\n} from '@patternfly/react-core';\nimport { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';\n\nexport const PrimaryDetailDataListInCard: React.FunctionComponent = () => {\n  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(1);\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n  const [selectedDataListItemId, setSelectedDataListItemId] = useState('dataListItem1');\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const onDropdownToggle = () => {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n  const onDropdownSelect = () => {\n    setIsDropdownOpen(false);\n    onDropdownFocus();\n  };\n  const onDropdownFocus = () => {\n    const element = document.getElementById('toggle-id');\n    element?.focus();\n  };\n  const onSelectDataListItem = (_event, id) => {\n    setSelectedDataListItemId(id);\n    setDrawerPanelBodyContent(id.charAt(id.length - 1));\n    setIsExpanded(true);\n  };\n  const onClose = () => {\n    setIsExpanded(false);\n  };\n\n  const panelContent = (\n    <DrawerPanelContent widths={{ '2xl': 'width_75' }}>\n      <DrawerHead>\n        <Title size=\"lg\" headingLevel=\"h2\">\n          Patternfly-elements\n        </Title>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onClose} />\n        </DrawerActions>\n      </DrawerHead>\n      <DrawerPanelBody>\n        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>\n          <FlexItem>\n            <p>\n              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,\n              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and\n              can also make the drawer scrollable.\n            </p>\n          </FlexItem>\n          <FlexItem>\n            <Progress value={drawerPanelBodyContent * 10} title=\"Title\" />\n          </FlexItem>\n          <FlexItem>\n            <Progress value={drawerPanelBodyContent * 5} title=\"Title\" />\n          </FlexItem>\n        </Flex>\n      </DrawerPanelBody>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent = (\n    <Fragment>\n      <Toolbar id=\"data-list-data-toolbar\">\n        <ToolbarContent>\n          <ToolbarItem>\n            <Dropdown\n              onSelect={onDropdownSelect}\n              isOpen={isDropdownOpen}\n              onOpenChange={(isOpen) => setIsDropdownOpen(isOpen)}\n              toggle={(toggleRef) => (\n                <MenuToggle ref={toggleRef} isExpanded={isDropdownOpen} onClick={onDropdownToggle}>\n                  Dropdown\n                </MenuToggle>\n              )}\n            >\n              <DropdownList>\n                <DropdownItem key=\"option1\">Option 1</DropdownItem>\n                <DropdownItem key=\"option2\">Option 2</DropdownItem>\n              </DropdownList>\n            </Dropdown>\n          </ToolbarItem>\n        </ToolbarContent>\n      </Toolbar>\n      <DataList\n        aria-label=\"selectable data list example\"\n        selectedDataListItemId={selectedDataListItemId}\n        onSelectDataListItem={onSelectDataListItem}\n      >\n        <DataListItem aria-label=\"data-list-item1-in-card\" id=\"data-list-item1\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"node 1\">\n                  <div>Node 1</div>\n                  <a href=\"#\">siemur/test-space</a>\n                </DataListCell>\n              ]}\n            />\n          </DataListItemRow>\n        </DataListItem>\n        <DataListItem aria-label=\"data-list-item2-in-card\" id=\"data-list-item2\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"node 2\">\n                  <div>Node 2</div>\n                  <a href=\"#\">siemur/test-space</a>\n                </DataListCell>\n              ]}\n            />\n          </DataListItemRow>\n        </DataListItem>\n        <DataListItem aria-label=\"data-list-item3-in-card\" id=\"data-list-item3\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"node 3\">\n                  <div>Node 3</div>\n                  <a href=\"#\">siemur/test-space</a>\n                </DataListCell>\n              ]}\n            />\n          </DataListItemRow>\n        </DataListItem>\n        <DataListItem aria-label=\"data-list-item4-in-card\" id=\"data-list-item4\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"node 4\">\n                  <div>Node 4</div>\n                  <a href=\"#\">siemur/test-space</a>\n                </DataListCell>\n              ]}\n            />\n          </DataListItemRow>\n        </DataListItem>\n        <DataListItem aria-label=\"data-list-item5-in-card\" id=\"data-list-item5\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"node 5\">\n                  <div>Node 5</div>\n                  <a href=\"#\">siemur/test-space</a>\n                </DataListCell>\n              ]}\n            />\n          </DataListItemRow>\n        </DataListItem>\n      </DataList>\n    </Fragment>\n  );\n\n  return (\n    <DashboardWrapper>\n      <PageSection aria-labelledby=\"main-title\">\n        <Content>\n          <h1 id=\"main-title\">Main title</h1>\n          <p>\n            Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />\n            of it’s relative line height of 1.5.\n          </p>\n        </Content>\n      </PageSection>\n      <Divider component=\"div\" />\n      <PageSection aria-label=\"Card with drawer content\">\n        <Card>\n          <Drawer isStatic isExpanded={isExpanded}>\n            <DrawerContent panelContent={panelContent}>\n              <DrawerContentBody>{drawerContent}</DrawerContentBody>\n            </DrawerContent>\n          </Drawer>\n        </Card>\n      </PageSection>\n    </DashboardWrapper>\n  );\n};\n","title":"Primary-detail data list in card","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Primary-detail inline modifier': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportprimarydetailinlinemodifier} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Button,\n  ButtonVariant,\n  Content,\n  DataList,\n  DataListAction,\n  DataListCell,\n  DataListItem,\n  DataListItemCells,\n  DataListItemRow,\n  Toolbar,\n  ToolbarItem,\n  ToolbarContent,\n  ToolbarToggleGroup,\n  ToolbarGroup,\n  Divider,\n  Drawer,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerContent,\n  DrawerContentBody,\n  DrawerHead,\n  DrawerPanelBody,\n  DrawerPanelContent,\n  Flex,\n  FlexItem,\n  InputGroup,\n  InputGroupItem,\n  PageSection,\n  Progress,\n  Stack,\n  StackItem,\n  TextInput,\n  Title,\n  Select,\n  SelectOption,\n  SelectOptionProps,\n  MenuToggle\n} from '@patternfly/react-core';\nimport { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';\nimport RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';\nimport RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';\nimport RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\nimport TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';\n\ninterface SelectOptionType extends Omit<SelectOptionProps, 'children'> {\n  label: string;\n}\n\nconst statusOptions: SelectOptionType[] = [\n  { value: 'New', label: 'New' },\n  { value: 'Pending', label: 'Pending' },\n  { value: 'Running', label: 'Running' },\n  { value: 'Cancelled', label: 'Cancelled' }\n];\n\nconst riskOptions: SelectOptionType[] = [\n  { value: 'Low', label: 'Low' },\n  { value: 'Medium', label: 'Medium' },\n  { value: 'High', label: 'High' }\n];\n\nexport const PrimaryDetailInlineModifier: React.FunctionComponent = () => {\n  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);\n  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState('');\n  const [inputValue, setInputValue] = useState('');\n  const [statusIsOpen, setStatusIsOpen] = useState(false);\n  const [statusSelected, setStatusSelected] = useState<string | number | undefined>('Status');\n  const [riskIsOpen, setRiskIsOpen] = useState(false);\n  const [riskSelected, setRiskSelected] = useState<string | number | undefined>('Risk');\n  const [selectedDataListItemId, setSelectedDataListItemId] = useState('');\n\n  const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {\n    setStatusSelected(value);\n    setStatusIsOpen(false);\n  };\n\n  const onRiskSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {\n    setRiskSelected(value);\n    setRiskIsOpen(false);\n  };\n\n  const onSelectDataListItem = (\n    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,\n    id: string\n  ) => {\n    setSelectedDataListItemId(id);\n    setIsDrawerExpanded(true);\n    setDrawerPanelBodyContent(id.charAt(id.length - 1));\n  };\n\n  const onCloseDrawerClick = (_event: React.MouseEvent<HTMLDivElement>) => {\n    setIsDrawerExpanded(false);\n    setSelectedDataListItemId('');\n  };\n\n  const toggleGroupItems = (\n    <Flex alignItems={{ default: 'alignItemsCenter' }}>\n      <ToolbarItem>\n        <InputGroup>\n          <InputGroupItem isFill>\n            <TextInput\n              name=\"inline-modifier-data-toolbar-input1\"\n              id=\"inline-modifier-data-toolbar-input1\"\n              type=\"search\"\n              aria-label=\"search input example\"\n              onChange={(_event: React.FormEvent<HTMLInputElement>, value: string) => setInputValue(value)}\n              value={inputValue}\n            />\n          </InputGroupItem>\n          <InputGroupItem>\n            <Button variant={ButtonVariant.control} aria-label=\"search button for search input\" icon={<SearchIcon />} />\n          </InputGroupItem>\n        </InputGroup>\n      </ToolbarItem>\n      <ToolbarGroup variant=\"filter-group\">\n        <ToolbarItem>\n          <Select\n            aria-label=\"Status select\"\n            selected={statusSelected}\n            isOpen={statusIsOpen}\n            toggle={(toggleRef) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={() => setStatusIsOpen((prevIsOpen) => !prevIsOpen)}\n                isExpanded={statusIsOpen}\n              >\n                {statusSelected}\n              </MenuToggle>\n            )}\n            onOpenChange={(isOpen: boolean) => setStatusIsOpen(isOpen)}\n            onSelect={onStatusSelect}\n          >\n            {statusOptions.map(({ label, value }) => (\n              <SelectOption key={label} value={value}>\n                {label}\n              </SelectOption>\n            ))}\n          </Select>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Select\n            aria-label=\"Risk select\"\n            selected={riskSelected}\n            isOpen={riskIsOpen}\n            toggle={(toggleRef) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={() => setRiskIsOpen((prevIsOpen) => !prevIsOpen)}\n                isExpanded={riskIsOpen}\n              >\n                {riskSelected}\n              </MenuToggle>\n            )}\n            onOpenChange={(isOpen: boolean) => setRiskIsOpen(isOpen)}\n            onSelect={onRiskSelect}\n          >\n            {riskOptions.map(({ label, value }) => (\n              <SelectOption key={label} value={value}>\n                {label}\n              </SelectOption>\n            ))}\n          </Select>\n        </ToolbarItem>\n      </ToolbarGroup>\n    </Flex>\n  );\n\n  const ToolbarItems = (\n    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint=\"xl\">\n      {toggleGroupItems}\n    </ToolbarToggleGroup>\n  );\n\n  const panelContent = (\n    <DrawerPanelContent>\n      <DrawerHead>\n        <Title headingLevel=\"h2\" size=\"xl\">\n          node-{drawerPanelBodyContent}\n        </Title>\n        <DrawerActions>\n          <DrawerCloseButton onClick={onCloseDrawerClick} />\n        </DrawerActions>\n      </DrawerHead>\n      <DrawerPanelBody>\n        <Flex spaceItems={{ default: 'spaceItemsLg' }} direction={{ default: 'column' }}>\n          <FlexItem>\n            <p>\n              The content of the drawer really is up to you. It could have form fields, definition lists, text lists,\n              labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and\n              can also make the drawer scrollable.\n            </p>\n          </FlexItem>\n          <FlexItem>\n            <Progress value={parseInt(drawerPanelBodyContent) * 10} title=\"Title\" />\n          </FlexItem>\n          <FlexItem>\n            <Progress value={parseInt(drawerPanelBodyContent) * 5} title=\"Title\" />\n          </FlexItem>\n        </Flex>\n      </DrawerPanelBody>\n    </DrawerPanelContent>\n  );\n\n  const drawerContent = (\n    <Fragment>\n      <Toolbar id=\"inline-modifier-data-toolbar\">\n        <ToolbarContent>{ToolbarItems}</ToolbarContent>\n      </Toolbar>\n      <DataList\n        aria-label=\"data list\"\n        selectedDataListItemId={selectedDataListItemId}\n        onSelectDataListItem={onSelectDataListItem}\n      >\n        <DataListItem id=\"inline-modifier-item1\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"primary-content\">\n                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>\n                    <FlexItem>\n                      <p>patternfly</p>\n                      <small>\n                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>\n                      </small>\n                    </FlexItem>\n                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>\n                      <FlexItem>\n                        <RhUiBranchFillIcon /> 10\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCodeIcon /> 4\n                      </FlexItem>\n                      <FlexItem>\n                        <CubeIcon /> 5\n                      </FlexItem>\n                      <FlexItem>Updated 2 days ago</FlexItem>\n                    </Flex>\n                  </Flex>\n                </DataListCell>,\n                <DataListAction\n                  key=\"actions\"\n                  aria-labelledby=\"inline-modifier-item1 inline-modifier-action1\"\n                  id=\"inline-modifier-action1\"\n                  aria-label=\"Actions\"\n                >\n                  <Stack>\n                    <StackItem>\n                      <Button variant={ButtonVariant.secondary}>Secondary</Button>\n                    </StackItem>\n                    <StackItem>\n                      <Button variant={ButtonVariant.link}>Link Button</Button>\n                    </StackItem>\n                  </Stack>\n                </DataListAction>\n              ]}\n            />\n          </DataListItemRow>\n        </DataListItem>\n        <DataListItem id=\"inline-modifier-item2\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"primary-content\">\n                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>\n                    <FlexItem>\n                      <p>patternfly-elements</p>\n                      <small>PatternFly elements</small>\n                    </FlexItem>\n                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>\n                      <FlexItem>\n                        <RhUiBranchFillIcon /> 10\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCodeIcon /> 4\n                      </FlexItem>\n                      <FlexItem>\n                        <CubeIcon /> 5\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCheckCircleFillIcon /> 7\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiWarningFillIcon /> 5\n                      </FlexItem>\n                      <FlexItem>\n                        <TimesCircleIcon /> 5\n                      </FlexItem>\n                      <FlexItem>Updated 2 days ago</FlexItem>\n                    </Flex>\n                  </Flex>\n                </DataListCell>,\n                <DataListAction\n                  key=\"actions\"\n                  aria-labelledby=\"inline-modifier-item2 inline-modifier-action2\"\n                  id=\"inline-modifier-action2\"\n                  aria-label=\"Actions\"\n                >\n                  <Stack>\n                    <StackItem>\n                      <Button variant={ButtonVariant.secondary}>Secondary</Button>\n                    </StackItem>\n                    <StackItem>\n                      <Button variant={ButtonVariant.link}>Link Button</Button>\n                    </StackItem>\n                  </Stack>\n                </DataListAction>\n              ]}\n            />\n          </DataListItemRow>\n        </DataListItem>\n        <DataListItem id=\"inline-modifier-item3\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"primary-content\">\n                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>\n                    <FlexItem>\n                      <p>patternfly</p>\n                      <small>\n                        Working repo for PatternFly 5 <a>https://pf5.patternfly.org/</a>\n                      </small>\n                    </FlexItem>\n                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>\n                      <FlexItem>\n                        <RhUiBranchFillIcon /> 10\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCodeIcon /> 4\n                      </FlexItem>\n                      <FlexItem>\n                        <CubeIcon /> 5\n                      </FlexItem>\n                      <FlexItem>Updated 2 days ago</FlexItem>\n                    </Flex>\n                  </Flex>\n                </DataListCell>,\n                <DataListAction\n                  key=\"actions\"\n                  aria-labelledby=\"inline-modifier-item3 inline-modifier-action3\"\n                  id=\"inline-modifier-action3\"\n                  aria-label=\"Actions\"\n                >\n                  <Stack>\n                    <StackItem>\n                      <Button variant={ButtonVariant.secondary}>Secondary</Button>\n                    </StackItem>\n                    <StackItem>\n                      <Button variant={ButtonVariant.link}>Link Button</Button>\n                    </StackItem>\n                  </Stack>\n                </DataListAction>\n              ]}\n            />\n          </DataListItemRow>\n        </DataListItem>\n        <DataListItem id=\"inline-modifier-item4\">\n          <DataListItemRow>\n            <DataListItemCells\n              dataListCells={[\n                <DataListCell key=\"primary-content\">\n                  <Flex spaceItems={{ default: 'spaceItemsMd' }} direction={{ default: 'column' }}>\n                    <FlexItem>\n                      <p>patternfly-elements</p>\n                      <small>PatternFly elements</small>\n                    </FlexItem>\n                    <Flex spaceItems={{ default: 'spaceItemsMd' }}>\n                      <FlexItem>\n                        <RhUiBranchFillIcon /> 10\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCodeIcon /> 4\n                      </FlexItem>\n                      <FlexItem>\n                        <CubeIcon /> 5\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiCheckCircleFillIcon /> 7\n                      </FlexItem>\n                      <FlexItem>\n                        <RhUiWarningFillIcon /> 5\n                      </FlexItem>\n                      <FlexItem>\n                        <TimesCircleIcon /> 5\n                      </FlexItem>\n                      <FlexItem>Updated 2 days ago</FlexItem>\n                    </Flex>\n                  </Flex>\n                </DataListCell>,\n                <DataListAction\n                  key=\"actions\"\n                  aria-labelledby=\"inline-modifier-item4 inline-modifier-action4\"\n                  id=\"inline-modifier-action4\"\n                  aria-label=\"Actions\"\n                >\n                  <Stack>\n                    <StackItem>\n                      <Button variant={ButtonVariant.secondary}>Secondary</Button>\n                    </StackItem>\n                    <StackItem>\n                      <Button variant={ButtonVariant.link}>Link Button</Button>\n                    </StackItem>\n                  </Stack>\n                </DataListAction>\n              ]}\n            />\n          </DataListItemRow>\n        </DataListItem>\n      </DataList>\n    </Fragment>\n  );\n\n  return (\n    <DashboardWrapper>\n      <PageSection aria-labelledby=\"main-title\">\n        <Content>\n          <h1 id=\"main-title\">Main title</h1>\n          <p>\n            Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />\n            of it's relative line height of 1.5.\n          </p>\n        </Content>\n      </PageSection>\n      <Divider component=\"div\" />\n      <PageSection padding={{ default: 'noPadding' }} aria-label=\"Card with drawer content\">\n        <Drawer isExpanded={isDrawerExpanded} isInline>\n          <DrawerContent panelContent={panelContent}>\n            <DrawerContentBody>{drawerContent}</DrawerContentBody>\n          </DrawerContent>\n        </Drawer>\n      </PageSection>\n    </DashboardWrapper>\n  );\n};\n","title":"Primary-detail inline modifier","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Primary-detail full page"])}
+    {React.createElement(pageData.examples["Primary-detail content padding"])}
+    {React.createElement(pageData.examples["Primary-detail card view"])}
+    {React.createElement(pageData.examples["Primary-detail simple list in card"])}
+    {React.createElement(pageData.examples["Primary-detail data list in card"])}
+    {React.createElement(pageData.examples["Primary-detail inline modifier"])}
+  </React.Fragment>
+);
+Component.displayName = 'PatternsPrimaryDetailReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/patterns/right-to-left/react-demos.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useEffect, useState } from 'react';
+import translationsEn from "../../../../../react-core/src/demos/RTL/./examples/translations.en.json";
+import translationsHe from "../../../../../react-core/src/demos/RTL/./examples/translations.he.json";
+import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
+import ToolsIcon from '@patternfly/react-icons/dist/esm/icons/tools-icon';
+import RhUiRunningIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-running-icon';
+import RhUiClockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clock-fill-icon';
+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
+import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';
+import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiStopCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-stop-circle-fill-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import { rows } from '@patternfly/react-core/dist/esm/demos/sampleDataRTL';
+import '../../../../../react-core/src/demos/RTL/./examples/PaginatedTable.css';
+import srcImportpaginatedtable from './react-demos/paginated-table.png';
+const pageData = {
+  "id": "Right-to-left",
+  "section": "patterns",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/patterns/right-to-left/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/RTL/RTL.md",
+  "relPath": "packages/react-core/src/demos/RTL/RTL.md",
+  "fullscreenExamples": [
+    "Paginated table"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useEffect,
+  useState,
+  translationsEn,
+  translationsHe,
+  AlignRightIcon,
+  ToolsIcon,
+  RhUiRunningIcon,
+  RhUiClockFillIcon,
+  pfLogo,
+  RhUiMenuBarsIcon,
+  RhUiSettingsFillIcon,
+  RhUiQuestionMarkCircleFillIcon,
+  HelpIcon,
+  RhUiStopCircleFillIcon,
+  RhUiEllipsisVerticalFillIcon,
+  imgAvatar,
+  rows
+};
+pageData.relativeImports = "import translationsEn from 'react-core/src/demos/RTL/./examples/translations.en.json';,import translationsHe from 'react-core/src/demos/RTL/./examples/translations.he.json';,import 'react-core/src/demos/RTL/./examples/PaginatedTable.css';"
+pageData.examples = {
+  'Paginated table': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportpaginatedtable} {...{"code":"import { Fragment, useEffect, useState } from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Content,\n  Divider,\n  Dropdown,\n  DropdownGroup,\n  DropdownItem,\n  DropdownList,\n  Label,\n  LabelStatus,\n  Masthead,\n  MastheadMain,\n  MastheadLogo,\n  MastheadContent,\n  MastheadBrand,\n  MastheadToggle,\n  MenuToggle,\n  Nav,\n  NavItem,\n  NavList,\n  Page,\n  PageBreadcrumb,\n  PageSection,\n  PageSidebar,\n  PageSidebarBody,\n  PageToggleButton,\n  Pagination,\n  PaginationVariant,\n  Toolbar,\n  ToolbarContent,\n  ToolbarGroup,\n  ToolbarItem,\n  Truncate\n} from '@patternfly/react-core';\n\nimport { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';\nimport translationsEn from './examples/translations.en.json';\nimport translationsHe from './examples/translations.he.json';\nimport AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';\nimport ToolsIcon from '@patternfly/react-icons/dist/esm/icons/tools-icon';\nimport RhUiRunningIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-running-icon';\nimport RhUiClockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clock-fill-icon';\nimport RhUiStopCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-stop-circle-fill-icon';\nimport pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';\nimport RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';\nimport RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';\nimport { rows } from '@patternfly/react-core/dist/esm/demos/sampleDataRTL';\n\ninterface Row {\n  name: string;\n  status: string;\n  location: string;\n  lastModified: string;\n  url: string;\n}\n\ninterface Translation {\n  [key: string]: any;\n}\n\nexport const PaginatedTableAction: React.FunctionComponent = () => {\n  const [translation, setTranslation] = useState<Translation>(translationsEn);\n  const [page, setPage] = useState<number>(1);\n  const [perPage, setPerPage] = useState<number>(10);\n\n  const columns = [\n    translation.table.columns.servers,\n    translation.table.columns.status,\n    translation.table.columns.location,\n    translation.table.columns.modified,\n    translation.table.columns.url\n  ];\n\n  const generateRowsFromTranslation = (translation: Translation): Row[] =>\n    rows.map((row, index) => ({\n      name: `${translation.table.rows.node}${index + 1}`,\n      status: translation.table.rows.status[row.status],\n      location: translation.table.rows.locations[row.location],\n      lastModified: translation.table.rows.lastModified[row.lastModified],\n      url: `http://www.redhat.com/en/office-locations/node${index + 1}`\n    }));\n\n  const [paginatedRows, setPaginatedRows] = useState<Row[]>(rows.slice(0, 10));\n  const [isDirRTL, setIsDirRTL] = useState<boolean>(false);\n\n  const capitalize = (input: string) => input[0].toUpperCase() + input.substring(1);\n\n  const switchTranslation = () => {\n    setIsDirRTL((prevIsDirRTL) => !prevIsDirRTL);\n    setTranslation((prevTranslation: string) => (prevTranslation === translationsEn ? translationsHe : translationsEn));\n  };\n\n  useEffect(() => {\n    const fullRows = generateRowsFromTranslation(translation);\n    setPaginatedRows(fullRows.slice((page - 1) * perPage, page * perPage));\n  }, [translation]);\n\n  useEffect(() => {\n    const html = document.querySelector('html');\n    html.dir = isDirRTL ? 'rtl' : 'ltr';\n  }, [isDirRTL]);\n\n  // Pagination logic\n\n  const handleSetPage = (\n    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    newPage: number,\n    _perPage: number | undefined,\n    startIdx: number | undefined,\n    endIdx: number | undefined\n  ) => {\n    const fullRows = generateRowsFromTranslation(translation);\n    setPaginatedRows(fullRows.slice(startIdx, endIdx));\n    setPage(newPage);\n  };\n\n  const handlePerPageSelect = (\n    _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    newPerPage: number,\n    _newPage: number,\n    startIdx: number | undefined,\n    endIdx: number | undefined\n  ) => {\n    const fullRows = generateRowsFromTranslation(translation);\n    setPaginatedRows(fullRows.slice(startIdx, endIdx));\n    setPerPage(newPerPage);\n  };\n\n  const renderPagination = (variant: PaginationVariant) => {\n    const { pagination } = translation;\n\n    return (\n      <Pagination\n        itemCount={rows.length}\n        page={page}\n        perPage={perPage}\n        onSetPage={handleSetPage}\n        onPerPageSelect={handlePerPageSelect}\n        variant={variant}\n        titles={{\n          paginationAriaLabel: pagination?.[`${variant}VariantAriaLabel`] || `${variant} pagination`,\n          ofWord: pagination?.ofWord,\n          items: pagination?.items,\n          perPageSuffix: pagination?.perPageSuffix,\n          toNextPageAriaLabel: pagination?.toNextPageAriaLabel,\n          toPreviousPageAriaLabel: pagination?.toPreviousPageAriaLabel,\n          toFirstPageAriaLabel: pagination?.toFirstPageAriaLabel,\n          toLastPageAriaLabel: pagination?.perPageSuffix,\n          currPageAriaLabel: pagination?.currPageAriaLabel\n        }}\n      />\n    );\n  };\n\n  const breadcrumbItems = {\n    home: {\n      url: '#home'\n    },\n    category: {\n      url: '#category'\n    },\n    subCategory: {\n      url: 'sub-category'\n    }\n  };\n\n  const renderLabel = (labelText: string) => {\n    switch (labelText) {\n      case 'Running':\n      case 'רץ':\n        return (\n          <Label status={LabelStatus.success} icon={<RhUiRunningIcon className=\"pf-v6-m-mirror-inline-rtl\" />}>\n            {translation.table.rows.status.running}\n          </Label>\n        );\n      case 'Stopped':\n      case 'עצר':\n        return (\n          <Label status={LabelStatus.danger} icon={<RhUiStopCircleFillIcon className=\"pf-v6-m-mirror-inline-rtl\" />}>\n            {translation.table.rows.status.stopped}\n          </Label>\n        );\n      case 'Needs maintenance':\n      case 'זקוק לתחזוקה':\n        return (\n          <Label status={LabelStatus.info} icon={<ToolsIcon />}>\n            {translation.table.rows.status.needsMaintenance}\n          </Label>\n        );\n      case 'Down':\n      case 'מטה':\n        return (\n          <Label status={LabelStatus.warning} icon={<RhUiClockFillIcon />}>\n            {translation.table.rows.status.down}\n          </Label>\n        );\n    }\n  };\n\n  const toolbarItems = (\n    <Fragment>\n      <Toolbar id=\"rtl-paginated-table\">\n        <ToolbarContent>\n          <ToolbarItem>\n            <Button\n              variant=\"primary\"\n              icon={<AlignRightIcon className=\"pf-v6-m-mirror-inline-rtl\" />}\n              iconPosition=\"end\"\n              onClick={switchTranslation}\n            >\n              {translation.switchBtn}\n            </Button>\n          </ToolbarItem>\n          <ToolbarItem variant=\"pagination\">{renderPagination(PaginationVariant.top)}</ToolbarItem>\n        </ToolbarContent>\n      </Toolbar>\n    </Fragment>\n  );\n\n  const pageNav = (\n    <Nav aria-label={translation.nav.ariaLabel || undefined}>\n      <NavList>\n        <NavItem itemId={0} isActive to=\"#system-panel\">\n          {translation.nav.systemPanel}\n        </NavItem>\n        <NavItem itemId={1} to=\"#policy\">\n          {translation.nav.policy}\n        </NavItem>\n        <NavItem itemId={2} to=\"#auth\">\n          {translation.nav.authentication}\n        </NavItem>\n        <NavItem itemId={3} to=\"#network\">\n          {translation.nav.networkServices}\n        </NavItem>\n        <NavItem itemId={4} to=\"#server\">\n          {translation.nav.server}\n        </NavItem>\n      </NavList>\n    </Nav>\n  );\n\n  const sidebar = (\n    <PageSidebar>\n      <PageSidebarBody>{pageNav}</PageSidebarBody>\n    </PageSidebar>\n  );\n\n  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);\n  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState<boolean>(false);\n  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState<boolean>(false);\n\n  const kebabDropdownItems = (\n    <>\n      <DropdownItem icon={<RhUiSettingsFillIcon />}>{translation.kebabDropdown.settings}</DropdownItem>\n      <DropdownItem icon={<HelpIcon />}>{translation.kebabDropdown.help}</DropdownItem>\n    </>\n  );\n\n  const userDropdownItems = (\n    <>\n      <DropdownItem key=\"group 2 profile\">{translation.userDropdown.myProfile}</DropdownItem>\n      <DropdownItem key=\"group 2 user\">{translation.userDropdown.userManagement}</DropdownItem>\n      <DropdownItem key=\"group 2 logout\">{translation.userDropdown.logout}</DropdownItem>\n    </>\n  );\n\n  const onDropdownToggle = () => {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n\n  const onDropdownSelect = () => {\n    setIsDropdownOpen(false);\n  };\n\n  const onKebabDropdownToggle = () => {\n    setIsKebabDropdownOpen(!isKebabDropdownOpen);\n  };\n\n  const onKebabDropdownSelect = () => {\n    setIsKebabDropdownOpen(false);\n  };\n\n  const onFullKebabToggle = () => {\n    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);\n  };\n\n  const onFullKebabSelect = () => {\n    setIsFullKebabDropdownOpen(false);\n  };\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton isHamburgerButton aria-label={translation.mastheadToggleAriaLabel} />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo dir=\"ltr\">\n            <Brand src={pfLogo} alt=\"PatternFly\" heights={{ default: '36px' }} />\n            {translation.brandLanguage && <span className=\"brand-language\">{translation.brandLanguage}</span>}\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>\n        <Toolbar id=\"toolbar\" isStatic>\n          <ToolbarContent>\n            <ToolbarGroup\n              variant=\"action-group-plain\"\n              align={{ default: 'alignEnd' }}\n              gap={{ default: 'gapNone', md: 'gapMd' }}\n            >\n              <ToolbarGroup variant=\"action-group-plain\" visibility={{ default: 'hidden', lg: 'visible' }}>\n                <ToolbarItem>\n                  <Button aria-label={translation.kebabDropdown.settings} isSettings variant=\"plain\" />\n                </ToolbarItem>\n                <ToolbarItem>\n                  <Button\n                    aria-label={translation.kebabDropdown.help}\n                    variant={ButtonVariant.plain}\n                    icon={<RhUiQuestionMarkCircleFillIcon />}\n                  />\n                </ToolbarItem>\n              </ToolbarGroup>\n              <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>\n                <Dropdown\n                  isOpen={isKebabDropdownOpen}\n                  onSelect={onKebabDropdownSelect}\n                  onOpenChange={setIsKebabDropdownOpen}\n                  popperProps={{ position: 'right' }}\n                  toggle={(toggleRef) => (\n                    <MenuToggle\n                      ref={toggleRef}\n                      isExpanded={isKebabDropdownOpen}\n                      onClick={onKebabDropdownToggle}\n                      variant=\"plain\"\n                      aria-label={translation.kebabDropdown.settingsAndHelp}\n                      icon={<RhUiEllipsisVerticalFillIcon />}\n                    />\n                  )}\n                >\n                  <DropdownList>{kebabDropdownItems}</DropdownList>\n                </Dropdown>\n              </ToolbarItem>\n              <ToolbarItem visibility={{ md: 'hidden' }}>\n                <Dropdown\n                  isOpen={isFullKebabDropdownOpen}\n                  onSelect={onFullKebabSelect}\n                  onOpenChange={setIsFullKebabDropdownOpen}\n                  popperProps={{ position: 'right' }}\n                  toggle={(toggleRef) => (\n                    <MenuToggle\n                      ref={toggleRef}\n                      isExpanded={isFullKebabDropdownOpen}\n                      onClick={onFullKebabToggle}\n                      variant=\"plain\"\n                      aria-label={translation.kebabAndUserDropdown.toolbarMenuAriaLabel}\n                      icon={<RhUiEllipsisVerticalFillIcon />}\n                    />\n                  )}\n                >\n                  <DropdownGroup key=\"group 2\" aria-label={translation.kebabAndUserDropdown.groupAriaLabel}>\n                    <DropdownList>{userDropdownItems}</DropdownList>\n                  </DropdownGroup>\n                  <Divider />\n                  <DropdownList>{kebabDropdownItems}</DropdownList>\n                </Dropdown>\n              </ToolbarItem>\n            </ToolbarGroup>\n            <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>\n              <Dropdown\n                isOpen={isDropdownOpen}\n                onSelect={onDropdownSelect}\n                onOpenChange={setIsDropdownOpen}\n                popperProps={{ position: 'right' }}\n                toggle={(toggleRef) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isDropdownOpen}\n                    onClick={onDropdownToggle}\n                    icon={<Avatar src={imgAvatar} alt=\"\" size=\"sm\" />}\n                  >\n                    {translation.username}\n                  </MenuToggle>\n                )}\n              >\n                <DropdownList>{userDropdownItems}</DropdownList>\n              </Dropdown>\n            </ToolbarItem>\n          </ToolbarContent>\n        </Toolbar>\n      </MastheadContent>\n    </Masthead>\n  );\n\n  const breadcrumbItemsLength = Object.keys(breadcrumbItems).length;\n\n  return (\n    <Fragment>\n      <Page sidebar={sidebar} masthead={masthead} isManagedSidebar>\n        <PageBreadcrumb>\n          <Breadcrumb aria-label={translation.breadcrumbs.ariaLabel || undefined}>\n            {Object.keys(breadcrumbItems).map((key: string, idx: number, arr: string[]) => (\n              <BreadcrumbItem key={idx} isActive={arr.length - 1 === idx} to={`${breadcrumbItems[key].url}`}>\n                {translation.breadcrumbs[key]}\n                {breadcrumbItemsLength}\n              </BreadcrumbItem>\n            ))}\n          </Breadcrumb>\n        </PageBreadcrumb>\n        <PageSection variant=\"light\" aria-labelledby=\"main-title\">\n          <Content>\n            <h1 id=\"main-title\">{translation.title}</h1>\n            <p>{translation.body}</p>\n          </Content>\n        </PageSection>\n        <PageSection>\n          {toolbarItems}\n          <Table variant=\"compact\" aria-label={translation.table.ariaLabel}>\n            <Thead>\n              <Tr>\n                {columns.map((column, columnIndex) => (\n                  <Th key={columnIndex}>{column}</Th>\n                ))}\n              </Tr>\n            </Thead>\n            <Tbody>\n              {paginatedRows.map((row: Row, rowIndex: number) => (\n                <Tr key={rowIndex}>\n                  <>\n                    {Object.entries(row).map(([key, value]) => {\n                      if (key === 'status') {\n                        return (\n                          <Td key={key} width={15} dataLabel=\"Status\">\n                            {renderLabel(value)}\n                          </Td>\n                        );\n                      } else if (key === 'url') {\n                        return (\n                          // Passing dir=\"rtl\" forces truncation at the start of the URL,\n                          // resulting in the unique portion being visible regardless of language\n                          <Td key={key} dataLabel=\"URL\" width={15}>\n                            <a href=\"#\">\n                              <Truncate content={row.url} position={isDirRTL ? 'end' : 'start'} />\n                            </a>\n                          </Td>\n                        );\n                      } else {\n                        return (\n                          <Td key={key} dataLabel={key === 'lastModified' ? 'Last modified' : capitalize(key)}>\n                            {value}\n                          </Td>\n                        );\n                      }\n                    })}\n                  </>\n                </Tr>\n              ))}\n            </Tbody>\n          </Table>\n          {renderPagination(PaginationVariant.bottom)}\n        </PageSection>\n      </Page>\n    </Fragment>\n  );\n};\n","title":"Paginated table","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`This demonstrates how the UI adapts to the writing mode of the page.`}
+    </p>
+    {React.createElement(pageData.examples["Paginated table"])}
+  </React.Fragment>
+);
+Component.displayName = 'PatternsRightToLeftReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;