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

package/patternfly-docs/generated/components/clipboard-copy/react.js

@@ -0,0 +1,373 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useEffect, useState } from 'react';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+const pageData = {
+  "id": "Clipboard copy",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/clipboard-copy/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md",
+  "relPath": "packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md",
+  "propComponents": [
+    {
+      "name": "ClipboardCopy",
+      "description": "",
+      "props": [
+        {
+          "name": "additionalActions",
+          "type": "React.ReactNode",
+          "description": "Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "children",
+          "type": "string | string[]",
+          "description": "The text which is copied.",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the clipboard copy container."
+        },
+        {
+          "name": "clickTip",
+          "type": "string",
+          "description": "Tooltip message to display when clicking the copy button",
+          "defaultValue": "'Successfully copied to clipboard!'"
+        },
+        {
+          "name": "copyAriaLabel",
+          "type": "string",
+          "description": "Aria-label to use on the copy button"
+        },
+        {
+          "name": "entryDelay",
+          "type": "number",
+          "description": "Delay in ms before the tooltip appears.",
+          "defaultValue": "300"
+        },
+        {
+          "name": "exitDelay",
+          "type": "number",
+          "description": "Delay in ms before the tooltip disappears.",
+          "defaultValue": "1500"
+        },
+        {
+          "name": "hoverTip",
+          "type": "string",
+          "description": "Tooltip message to display when hover the copy button",
+          "defaultValue": "'Copy to clipboard'"
+        },
+        {
+          "name": "inputId",
+          "type": "string",
+          "description": "ID to use on the TextInput."
+        },
+        {
+          "name": "inputName",
+          "type": "string",
+          "description": "Name attribute to use on the TextInput."
+        },
+        {
+          "name": "isBlock",
+          "type": "boolean",
+          "description": "Flag to determine if inline clipboard copy should be block styling"
+        },
+        {
+          "name": "isCode",
+          "type": "boolean",
+          "description": "Flag to determine if clipboard copy content includes code",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag to determine if clipboard copy is in the expanded state initially",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isReadOnly",
+          "type": "boolean",
+          "description": "Flag to show if the input is read only.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "maxWidth",
+          "type": "string",
+          "description": "Maximum width of the tooltip (default 150px).",
+          "defaultValue": "'150px'"
+        },
+        {
+          "name": "onChange",
+          "type": "(event: React.FormEvent, text?: string) => void",
+          "description": "A function that is triggered on changing the text.",
+          "defaultValue": "(): any => undefined"
+        },
+        {
+          "name": "onCopy",
+          "type": "(event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void",
+          "description": "A function that is triggered on clicking the copy button. This will replace the existing clipboard copy functionality entirely.",
+          "defaultValue": "(_event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => {\n  try {\n    navigator.clipboard.writeText(text.toString());\n  } catch (error) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      \"Clipboard API not found, this copy function will not work. This is likely because you're using an\",\n      \"unsupported browser or you're not using HTTPS. \\n\\nIf you're a developer building an application which needs\",\n      \"to support copying to the clipboard without the clipboard API, you'll have to create your own copy\",\n      'function and pass it to the ClipboardCopy component as the onCopy prop. For more information see',\n      'https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard'\n    );\n\n    // eslint-disable-next-line no-console\n    console.error(error);\n  }\n}"
+        },
+        {
+          "name": "onInputBlur",
+          "type": "(event?: any) => void",
+          "description": "Callback function when text input is blurred (focus leaves)"
+        },
+        {
+          "name": "onInputFocus",
+          "type": "(event?: any) => void",
+          "description": "Callback function when text input is focused"
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "position",
+          "type": "| TooltipPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'",
+          "description": "Copy button tooltip position.",
+          "defaultValue": "TooltipPosition.top"
+        },
+        {
+          "name": "textAriaLabel",
+          "type": "string",
+          "description": "Aria-label to use on the TextInput.",
+          "defaultValue": "'Copyable input'"
+        },
+        {
+          "name": "toggleAriaLabel",
+          "type": "string",
+          "description": "Aria-label to use on the ClipboardCopyToggle.",
+          "defaultValue": "'Show content'"
+        },
+        {
+          "name": "truncation",
+          "type": "boolean | Omit<TruncateProps, 'content'>",
+          "description": "Enables and customizes truncation for an inline-compact ClipboardCopy.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "variant",
+          "type": "typeof ClipboardCopyVariant | 'inline' | 'expansion' | 'inline-compact'",
+          "description": "Adds Clipboard Copy variant styles.",
+          "defaultValue": "'inline'"
+        }
+      ]
+    },
+    {
+      "name": "ClipboardCopyButton",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Aria-label for the copy button",
+          "defaultValue": "'Copyable input'"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content of the copy button",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the copy button"
+        },
+        {
+          "name": "entryDelay",
+          "type": "number",
+          "description": "Entry delay on the copy button tooltip",
+          "defaultValue": "300"
+        },
+        {
+          "name": "exitDelay",
+          "type": "number",
+          "description": "Exit delay on the copy button tooltip",
+          "defaultValue": "0"
+        },
+        {
+          "name": "hasNoPadding",
+          "type": "boolean",
+          "description": "Removes padding from clipboard copy button. This is used for inline-compact variant",
+          "defaultValue": "false"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "ID of the copy button",
+          "required": true
+        },
+        {
+          "name": "maxWidth",
+          "type": "string",
+          "description": "Max width of the copy button tooltip",
+          "defaultValue": "'100px'"
+        },
+        {
+          "name": "onClick",
+          "type": "(event: React.MouseEvent) => void",
+          "description": "Callback for the copy when the button is clicked",
+          "required": true
+        },
+        {
+          "name": "onTooltipHidden",
+          "type": "() => void",
+          "description": "Callback when tooltip's hide transition has finished executing",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "position",
+          "type": "| TooltipPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'",
+          "description": "Position of the copy button tooltip",
+          "defaultValue": "'top'"
+        },
+        {
+          "name": "textId",
+          "type": "string",
+          "description": "ID of the content that is being copied",
+          "deprecated": true
+        },
+        {
+          "name": "variant",
+          "type": "'control' | 'plain'",
+          "description": "Variant of the copy button",
+          "defaultValue": "'control'"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-clipboard-copy"
+  ],
+  "examples": [
+    "Basic",
+    "Read Only",
+    "Expanded",
+    "Read only expanded",
+    "Read only expanded by default",
+    "Expanded with array",
+    "JSON object (wrap code with pre)",
+    "Inline compact",
+    "Inline compact code",
+    "Inline compact with additional action",
+    "Inline compact in sentence",
+    "Inline compact with truncation"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useEffect,
+  useState,
+  PlayIcon
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy } from '@patternfly/react-core';\n\nexport const ClipboardCopyBasic: React.FunctionComponent = () => (\n  <ClipboardCopy copyAriaLabel=\"Copy basic example\" hoverTip=\"Copy\" clickTip=\"Copied\">\n    This is editable\n  </ClipboardCopy>\n);\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Read Only': props => 
+    <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy } from '@patternfly/react-core';\n\nexport const ClipboardCopyReadOnly: React.FunctionComponent = () => (\n  <ClipboardCopy copyAriaLabel=\"Copy read-only example\" isReadOnly hoverTip=\"Copy\" clickTip=\"Copied\">\n    This is read-only\n  </ClipboardCopy>\n);\n","title":"Read Only","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Expanded': props => 
+    <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';\n\nexport const ClipboardCopyExpanded: React.FunctionComponent = () => (\n  <ClipboardCopy\n    toggleAriaLabel=\"Show content for expanded example\"\n    copyAriaLabel=\"Copy expanded example\"\n    hoverTip=\"Copy\"\n    clickTip=\"Copied\"\n    variant={ClipboardCopyVariant.expansion}\n  >\n    Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting\n    expansion.\n  </ClipboardCopy>\n);\n","title":"Expanded","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Read only expanded': props => 
+    <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';\n\nexport const ClipboardCopyReadOnlyExpanded: React.FunctionComponent = () => (\n  <ClipboardCopy\n    toggleAriaLabel=\"Show content for read-only expanded example\"\n    copyAriaLabel=\"Copy read-only expanded example\"\n    isReadOnly\n    hoverTip=\"Copy\"\n    clickTip=\"Copied\"\n    variant={ClipboardCopyVariant.expansion}\n  >\n    Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting\n    expansion.\n  </ClipboardCopy>\n);\n","title":"Read only expanded","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Read only expanded by default': props => 
+    <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';\n\nexport const ClipboardCopyReadOnlyExpandedByDefault: React.FunctionComponent = () => (\n  <ClipboardCopy\n    copyAriaLabel=\"Copy read-only expanded by default example\"\n    toggleAriaLabel=\"Show content for read-only expanded by default example\"\n    isReadOnly\n    isExpanded\n    hoverTip=\"Copy\"\n    clickTip=\"Copied\"\n    variant={ClipboardCopyVariant.expansion}\n  >\n    Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting\n    expansion.\n  </ClipboardCopy>\n);\n","title":"Read only expanded by default","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Expanded with array': props => 
+    <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';\n\nconst text = [\n  'Got a lot of text here,',\n  'need to see all of it?',\n  'Click that arrow on the left side and check out the resulting expansion.'\n];\n\nexport const ClipboardCopyExpandedWithArray: React.FunctionComponent = () => (\n  <ClipboardCopy\n    copyAriaLabel=\"Copy expanded example with array\"\n    toggleAriaLabel=\"Show content for expanded example with array\"\n    hoverTip=\"Copy\"\n    clickTip=\"Copied\"\n    variant={ClipboardCopyVariant.expansion}\n  >\n    {text.join(' ')}\n  </ClipboardCopy>\n);\n","title":"Expanded with array","lang":"ts","className":""}}>
+      
+    </Example>,
+  'JSON object (wrap code with pre)': props => 
+    <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';\n\nexport const ClipboardCopyJSONObject: React.FunctionComponent = () => (\n  <ClipboardCopy\n    copyAriaLabel=\"Copy JSON object example\"\n    toggleAriaLabel=\"Show content for JSON object example\"\n    isCode\n    hoverTip=\"Copy\"\n    clickTip=\"Copied\"\n    variant={ClipboardCopyVariant.expansion}\n  >\n    {`{ \"menu\": {\n    \"id\": \"file\",\n    \"value\": \"File\",\n    \"popup\": {\n      \"menuitem\": [\n        {\"value\": \"New\", \"onclick\": \"CreateNewDoc()\"},\n        {\"value\": \"Open\", \"onclick\": \"OpenDoc()\"},\n        {\"value\": \"Close\", \"onclick\": \"CloseDoc()\"}\n      ]\n    }\n  }} `}\n  </ClipboardCopy>\n);\n","title":"JSON object (wrap code with pre)","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Inline compact': props => 
+    <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy } from '@patternfly/react-core';\nexport const ClipboardCopyInlineCompact: React.FunctionComponent = () => (\n  <ClipboardCopy copyAriaLabel=\"Copy inline compact example\" hoverTip=\"Copy\" clickTip=\"Copied\" variant=\"inline-compact\">\n    2.3.4-2-redhat\n  </ClipboardCopy>\n);\n","title":"Inline compact","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Inline compact code': props => 
+    <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy } from '@patternfly/react-core';\n\nexport const ClipboardCopyInlineCompactCode: React.FunctionComponent = () => (\n  <ClipboardCopy\n    copyAriaLabel=\"Copy inline compact code example\"\n    hoverTip=\"Copy\"\n    clickTip=\"Copied\"\n    variant=\"inline-compact\"\n    isCode\n  >\n    2.3.4-2-redhat\n  </ClipboardCopy>\n);\n","title":"Inline compact code","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Inline compact with additional action': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { ClipboardCopy, ClipboardCopyAction, Button, Tooltip } from '@patternfly/react-core';\nimport PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';\n\nexport const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionComponent = () => {\n  const [isRunning, setisRunning] = useState(false);\n  const runText: string = 'Run in web terminal';\n  const doneRunText: string = 'Running in web terminal';\n  return (\n    <ClipboardCopy\n      copyAriaLabel=\"Copy inline compact with additional action example\"\n      hoverTip=\"Copy\"\n      clickTip=\"Copied\"\n      variant=\"inline-compact\"\n      additionalActions={\n        <ClipboardCopyAction>\n          <Tooltip\n            aria=\"none\"\n            aria-live=\"polite\"\n            content={isRunning ? doneRunText : runText}\n            onTooltipHidden={() => setisRunning(false)}\n          >\n            <Button\n              variant=\"plain\"\n              hasNoPadding\n              aria-label=\"Run in web terminal\"\n              icon={<PlayIcon />}\n              onClick={() => setisRunning(!isRunning)}\n            />\n          </Tooltip>\n        </ClipboardCopyAction>\n      }\n    >\n      2.3.4-2-redhat\n    </ClipboardCopy>\n  );\n};\n","title":"Inline compact with additional action","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Inline compact in sentence': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { ClipboardCopy } from '@patternfly/react-core';\n\nexport const ClipboardCopyInlineCompactInSentence: React.FunctionComponent = () => (\n  <Fragment>\n    <b>Basic</b>\n    <br />\n    Lorem ipsum{' '}\n    {\n      <ClipboardCopy\n        copyAriaLabel=\"Copy inline compact basic example\"\n        hoverTip=\"Copy\"\n        clickTip=\"Copied\"\n        variant=\"inline-compact\"\n      >\n        2.3.4-2-redhat\n      </ClipboardCopy>\n    }\n    dolor sit amet.\n    <br /> <br />\n    <b>Long copy string</b>\n    <br />\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}\n    {\n      <ClipboardCopy\n        copyAriaLabel=\"Copy inline compact long copy string example\"\n        hoverTip=\"Copy\"\n        clickTip=\"Copied\"\n        variant=\"inline-compact\"\n      >\n        https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890\n      </ClipboardCopy>\n    }{' '}\n    Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.\n    <br /> <br />\n    <b>Long copy string in block</b>\n    <br />\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}\n    {\n      <ClipboardCopy\n        copyAriaLabel=\"Copy inline compact long copy string in block example\"\n        hoverTip=\"Copy\"\n        clickTip=\"Copied\"\n        variant=\"inline-compact\"\n        isBlock\n      >\n        https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890\n      </ClipboardCopy>\n    }{' '}\n    Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.\n  </Fragment>\n);\n","title":"Inline compact in sentence","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Inline compact with truncation': props => 
+    <Example {...pageData} {...props} {...{"code":"import { ClipboardCopy } from '@patternfly/react-core';\nexport const ClipboardCopyInlineCompactTruncation: React.FunctionComponent = () => (\n  <>\n    <ClipboardCopy\n      copyAriaLabel=\"Copy inline compact with truncation at end example\"\n      truncation\n      hoverTip=\"Copy\"\n      clickTip=\"Copied\"\n      variant=\"inline-compact\"\n    >\n      This lengthy, copyable content will be truncated with default settings when the truncation prop is simply set to\n      true. This is useful for quickly applying truncation without needing to worry about any other properties to set.\n    </ClipboardCopy>\n    <br />\n    <br />\n    <ClipboardCopy\n      copyAriaLabel=\"Copy inline compact with truncation at start example\"\n      truncation={{ position: 'start' }}\n      hoverTip=\"Copy\"\n      clickTip=\"Copied\"\n      variant=\"inline-compact\"\n    >\n      This lengthy, copyable content will be truncated with customized settings when the truncation prop is passed an\n      object containing Truncate props. This is useful for finetuning truncation for your particular use-case.\n    </ClipboardCopy>\n  </>\n);\n","title":"Inline compact with truncation","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can control the truncation for an `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`inline-compact`}
+        </code>
+        {` variant by passing the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`truncation`}
+        </code>
+        {` property. The following example shows the different ways to use the property: passing a boolean will apply default truncation, while passing an object of `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`TruncateProps`}
+        </code>
+        {` offers more fine-tuned control over the truncation behavior.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Read Only"])}
+    {React.createElement(pageData.examples["Expanded"])}
+    {React.createElement(pageData.examples["Read only expanded"])}
+    {React.createElement(pageData.examples["Read only expanded by default"])}
+    {React.createElement(pageData.examples["Expanded with array"])}
+    {React.createElement(pageData.examples["JSON object (wrap code with pre)"])}
+    {React.createElement(pageData.examples["Inline compact"])}
+    {React.createElement(pageData.examples["Inline compact code"])}
+    {React.createElement(pageData.examples["Inline compact with additional action"])}
+    {React.createElement(pageData.examples["Inline compact in sentence"])}
+    {React.createElement(pageData.examples["Inline compact with truncation"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsClipboardCopyReactDocs';
+Component.pageData = pageData;
+
+export default Component;

package/patternfly-docs/generated/components/code-block/react.js

@@ -0,0 +1,148 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useState } from 'react';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+const pageData = {
+  "id": "Code block",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/code-block/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md",
+  "relPath": "packages/react-core/src/components/CodeBlock/examples/CodeBlock.md",
+  "propComponents": [
+    {
+      "name": "CodeBlock",
+      "description": "",
+      "props": [
+        {
+          "name": "actions",
+          "type": "React.ReactNode",
+          "description": "Actions in the code block header. Should be wrapped with CodeBlockAction.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the code block",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes passed to the code block wrapper"
+        }
+      ]
+    },
+    {
+      "name": "CodeBlockAction",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the code block action",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes passed to the code block action"
+        }
+      ]
+    },
+    {
+      "name": "CodeBlockCode",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Code rendered inside the code block",
+          "defaultValue": "null"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes passed to the code block pre wrapper"
+        },
+        {
+          "name": "codeClassName",
+          "type": "string",
+          "description": "Additional classes passed to the code block code"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-code-block"
+  ],
+  "examples": [
+    "Basic",
+    "Expandable"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useState,
+  RhUiCopyFillIcon,
+  PlayIcon
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  CodeBlock,\n  CodeBlockAction,\n  CodeBlockCode,\n  ClipboardCopyButton,\n  Button,\n  Tooltip\n} from '@patternfly/react-core';\nimport PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';\n\nexport const BasicCodeBlock: React.FunctionComponent = () => {\n  const [copied, setCopied] = useState(false);\n  const [isRunning, setisRunning] = useState(false);\n  const runText: string = 'Run in web terminal';\n  const doneRunText: string = 'Running in web terminal';\n\n  const clipboardCopyFunc = (event, text) => {\n    navigator.clipboard.writeText(text.toString());\n  };\n\n  const onClick = (event, text) => {\n    clipboardCopyFunc(event, text);\n    setCopied(true);\n  };\n\n  const code = String.raw`apiVersion: helm.openshift.io/v1beta1/\nkind: HelmChartRepository\nmetadata:\nname: azure-sample-repo0oooo00ooo\nspec:\nconnectionConfig:\nurl: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;\n\n  const actions = (\n    <Fragment>\n      <CodeBlockAction>\n        <ClipboardCopyButton\n          id=\"basic-copy-button\"\n          aria-label=\"Copy to clipboard basic example code block\"\n          onClick={(e) => onClick(e, code)}\n          exitDelay={copied ? 1500 : 600}\n          maxWidth=\"110px\"\n          variant=\"plain\"\n          onTooltipHidden={() => setCopied(false)}\n        >\n          {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}\n        </ClipboardCopyButton>\n      </CodeBlockAction>\n      <CodeBlockAction>\n        <Tooltip\n          aria=\"none\"\n          aria-live=\"polite\"\n          content={isRunning ? doneRunText : runText}\n          onTooltipHidden={() => setisRunning(false)}\n        >\n          <Button\n            variant=\"plain\"\n            aria-label=\"Run in web terminal\"\n            icon={<PlayIcon />}\n            onClick={() => setisRunning(!isRunning)}\n          />\n        </Tooltip>\n      </CodeBlockAction>\n    </Fragment>\n  );\n\n  return (\n    <CodeBlock actions={actions}>\n      <CodeBlockCode id=\"code-content\">{code}</CodeBlockCode>\n    </CodeBlock>\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Expandable': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  CodeBlock,\n  CodeBlockAction,\n  CodeBlockCode,\n  ClipboardCopyButton,\n  ExpandableSection,\n  ExpandableSectionToggle,\n  Button,\n  Tooltip\n} from '@patternfly/react-core';\nimport PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';\n\nexport const ExpandableCodeBlock: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [copied, setCopied] = useState(false);\n  const [isRunning, setisRunning] = useState(false);\n  const runText: string = 'Run in web terminal';\n  const doneRunText: string = 'Running in web terminal';\n  const toggleId: string = 'expandable-code-toggle';\n\n  const onToggle = (isExpanded) => {\n    setIsExpanded(isExpanded);\n  };\n\n  const clipboardCopyFunc = (event, text) => {\n    navigator.clipboard.writeText(text.toString());\n  };\n\n  const onClick = (event, text) => {\n    clipboardCopyFunc(event, text);\n    setCopied(true);\n  };\n\n  const copyBlock = String.raw`apiVersion: helm.openshift.io/v1beta1/\nkind: HelmChartRepository\nmetadata:\nname: azure-sample-repo\nspec:\nconnectionConfig:\nurl: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;\n\n  const code = String.raw`apiVersion: helm.openshift.io/v1beta1/\nkind: HelmChartRepository\nmetadata:\nname: azure-sample-repo`;\n  const expandedCode = String.raw`spec:\nconnectionConfig:\nurl: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;\n\n  const actions = (\n    <Fragment>\n      <CodeBlockAction>\n        <ClipboardCopyButton\n          id=\"expandable-copy-button\"\n          aria-label=\"Copy to clipboard\"\n          onClick={(e) => onClick(e, copyBlock)}\n          exitDelay={copied ? 1500 : 600}\n          maxWidth=\"110px\"\n          variant=\"plain\"\n          onTooltipHidden={() => setCopied(false)}\n        >\n          {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'}\n        </ClipboardCopyButton>\n      </CodeBlockAction>\n      <CodeBlockAction>\n        <Tooltip\n          aria=\"none\"\n          aria-live=\"polite\"\n          content={isRunning ? doneRunText : runText}\n          onTooltipHidden={() => setisRunning(false)}\n        >\n          <Button\n            variant=\"plain\"\n            aria-label=\"Run in web terminal\"\n            icon={<PlayIcon />}\n            onClick={() => setisRunning(!isRunning)}\n          />\n        </Tooltip>\n      </CodeBlockAction>\n    </Fragment>\n  );\n\n  return (\n    <CodeBlock actions={actions}>\n      <CodeBlockCode>\n        {code}\n        <ExpandableSection isExpanded={isExpanded} isDetached contentId=\"code-block-expand\" toggleId={toggleId}>\n          {expandedCode}\n        </ExpandableSection>\n      </CodeBlockCode>\n      <ExpandableSectionToggle\n        isExpanded={isExpanded}\n        onToggle={onToggle}\n        contentId=\"code-block-expand\"\n        direction=\"up\"\n        toggleId={toggleId}\n      >\n        {isExpanded ? 'Show less expandable example content' : 'Show more expandable example content'}\n      </ExpandableSectionToggle>\n    </CodeBlock>\n  );\n};\n","title":"Expandable","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      <strong {...{"className":""}}>
+        {`Important note:`}
+      </strong>
+      {` to format code exactly as it is, you should use String.raw`}
+      {`\``}
+      {`your code here`}
+      {`\``}
+      {`.`}
+    </p>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Using `}
+      <strong {...{"className":""}}>
+        {`String.raw`}
+        {`\``}
+        {`\``}
+      </strong>
+      {` will keep all the special characters like `}
+      <code {...{"className":"ws-code "}}>
+        {`\\n`}
+      </code>
+      {` or `}
+      <code {...{"className":"ws-code "}}>
+        {`\\t`}
+      </code>
+      {`.`}
+    </p>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["Expandable"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsCodeBlockReactDocs';
+Component.pageData = pageData;
+
+export default Component;