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

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

@@ -1,283 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import { useState } from 'react';
-const pageData = {
-  "id": "Progress",
-  "section": "components",
-  "subsection": "",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react",
-  "tabName": null,
-  "slug": "/components/progress/react",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Progress/examples/Progress.md",
-  "relPath": "packages/react-core/src/components/Progress/examples/Progress.md",
-  "propComponents": [
-    {
-      "name": "Progress",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-describedby",
-          "type": "string",
-          "description": "Adds an accessible description to the ProgressBar via space separated list of ids. Required when helperText is passed in.",
-          "defaultValue": "null"
-        },
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Adds accessible text to the ProgressBar. Required when title not used and there is not any label associated with the progress bar",
-          "defaultValue": "null"
-        },
-        {
-          "name": "aria-labelledby",
-          "type": "string",
-          "description": "Associates the ProgressBar with it's label for accessibility purposes. Required when title not used",
-          "defaultValue": "null"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Classname for progress component.",
-          "defaultValue": "''"
-        },
-        {
-          "name": "helperText",
-          "type": "React.ReactNode",
-          "description": "Content which can be used to convey additional information about the progress component.\nWe recommend the helper text component as it was designed for this purpose."
-        },
-        {
-          "name": "hideStatusIcon",
-          "type": "boolean",
-          "description": "Flag indicating whether the status icon should be hidden, helpful when space is limited (such as within table cells). When set to true, you must ensure the context of the status is provided in another way, such as via the progress measure."
-        },
-        {
-          "name": "id",
-          "type": "string",
-          "description": "DOM id for progress component.",
-          "defaultValue": "''"
-        },
-        {
-          "name": "isTitleTruncated",
-          "type": "boolean",
-          "description": "Indicate whether to truncate the string title",
-          "defaultValue": "false"
-        },
-        {
-          "name": "label",
-          "type": "React.ReactNode",
-          "description": "Text description of current progress value to display instead of percentage.",
-          "defaultValue": "null"
-        },
-        {
-          "name": "max",
-          "type": "number",
-          "description": "Maximum value of progress.",
-          "defaultValue": "100"
-        },
-        {
-          "name": "measureLocation",
-          "type": "'outside' | 'inside' | 'top' | 'none'",
-          "description": "Where the measure percent will be located.",
-          "defaultValue": "ProgressMeasureLocation.top"
-        },
-        {
-          "name": "min",
-          "type": "number",
-          "description": "Minimal value of progress.",
-          "defaultValue": "0"
-        },
-        {
-          "name": "size",
-          "type": "'sm' | 'md' | 'lg'",
-          "description": "Size variant of progress.",
-          "defaultValue": "null"
-        },
-        {
-          "name": "title",
-          "type": "React.ReactNode",
-          "description": "Title above progress. The isTitleTruncated property will only affect string titles. Node title truncation must be handled manually.",
-          "defaultValue": "''"
-        },
-        {
-          "name": "tooltipPosition",
-          "type": "'auto' | 'top' | 'bottom' | 'left' | 'right'",
-          "description": "Position of the tooltip which is displayed if title is truncated",
-          "defaultValue": "'top'"
-        },
-        {
-          "name": "value",
-          "type": "number",
-          "description": "Actual value of progress.",
-          "defaultValue": "0"
-        },
-        {
-          "name": "valueText",
-          "type": "string",
-          "description": "Accessible text description of current progress value, for when value is not a percentage. Use with label.",
-          "defaultValue": "null"
-        },
-        {
-          "name": "variant",
-          "type": "'danger' | 'success' | 'warning'",
-          "description": "Status variant of progress.",
-          "defaultValue": "null"
-        }
-      ]
-    }
-  ],
-  "cssPrefix": [
-    "pf-v6-c-progress"
-  ],
-  "examples": [
-    "Basic",
-    "Small",
-    "Large",
-    "Outside",
-    "Inside",
-    "Single line",
-    "Without measure",
-    "Finite step",
-    "Progress with step instructions",
-    "Truncate title",
-    "Title outside of progress bar",
-    "Helper text",
-    "Success",
-    "Failure",
-    "Warning",
-    "Interactive status icon and measure location"
-  ]
-};
-pageData.liveContext = {
-  useState
-};
-pageData.examples = {
-  'Basic': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Progress } from '@patternfly/react-core';\n\nexport const ProgressBasic: React.FunctionComponent = () => <Progress value={33} title=\"Title\" />;\n","title":"Basic","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Small': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Progress, ProgressSize } from '@patternfly/react-core';\n\nexport const ProgressSmall: React.FunctionComponent = () => (\n  <Progress value={33} title=\"Title\" size={ProgressSize.sm} />\n);\n","title":"Small","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Large': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Progress, ProgressSize } from '@patternfly/react-core';\n\nexport const ProgressLarge: React.FunctionComponent = () => (\n  <Progress value={33} title=\"Title\" size={ProgressSize.lg} />\n);\n","title":"Large","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Outside': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';\n\nexport const ProgressOutside: React.FunctionComponent = () => (\n  <Progress value={33} title=\"Title\" measureLocation={ProgressMeasureLocation.outside} />\n);\n","title":"Outside","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Inside': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';\n\nexport const ProgressInside: React.FunctionComponent = () => (\n  <Progress value={33} title=\"Title\" measureLocation={ProgressMeasureLocation.inside} />\n);\n","title":"Inside","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Single line': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';\n\nexport const ProgressSingleLine: React.FunctionComponent = () => (\n  <Progress value={33} measureLocation={ProgressMeasureLocation.outside} aria-label=\"Title\" />\n);\n","title":"Single line","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Without measure': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';\n\nexport const ProgressWithoutMeasure: React.FunctionComponent = () => (\n  <Progress value={33} title=\"Title\" measureLocation={ProgressMeasureLocation.none} />\n);\n","title":"Without measure","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Finite step': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';\n\nexport const ProgressFiniteStep: React.FunctionComponent = () => (\n  <Progress\n    value={2}\n    min={0}\n    max={5}\n    title=\"Title\"\n    measureLocation={ProgressMeasureLocation.top}\n    label=\"2 of 5\"\n    valueText=\"2 of 5\"\n  />\n);\n","title":"Finite step","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Progress with step instructions': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Progress } from '@patternfly/react-core';\n\nexport const ProgressStepInstruction: React.FunctionComponent = () => (\n  <Progress value={2} title=\"Title\" min={0} max={5} label=\"Step 2: Copying files\" valueText=\"Step 2: Copying files\" />\n);\n","title":"Progress with step instructions","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Truncate title': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Progress } from '@patternfly/react-core';\n\nexport const ProgressTruncateTitle: React.FunctionComponent = () => (\n  <Progress\n    value={33}\n    title=\"Very very very very very very very very very very very long title which should be truncated if it does not fit onto one line above the progress bar\"\n    isTitleTruncated\n  />\n);\n","title":"Truncate title","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Title outside of progress bar': props => 
-    <Example {...pageData} {...props} {...{"code":"import {\n  DescriptionList,\n  DescriptionListGroup,\n  DescriptionListTerm,\n  DescriptionListDescription,\n  Progress,\n  ProgressMeasureLocation\n} from '@patternfly/react-core';\n\nexport const ProgressTitleOutsideOfProgressBar: React.FunctionComponent = () => (\n  <DescriptionList aria-label=\"Progress Title outside of progress bar\">\n    <DescriptionListGroup>\n      <DescriptionListTerm id=\"title-outside-progress-example-label\">Title outside of progress bar</DescriptionListTerm>\n      <DescriptionListDescription>\n        <Progress\n          value={33}\n          measureLocation={ProgressMeasureLocation.outside}\n          aria-labelledby=\"title-outside-progress-example-label\"\n        />\n      </DescriptionListDescription>\n    </DescriptionListGroup>\n  </DescriptionList>\n);\n","title":"Title outside of progress bar","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Helper text': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Progress, ProgressProps, HelperText, HelperTextItem, Radio } from '@patternfly/react-core';\n\nexport const ProgressHelperText: React.FunctionComponent = () => {\n  type ProgressVariant = ProgressProps['variant'];\n\n  const [selectedVariant, setSelectedVariant] = useState<ProgressVariant>(undefined);\n\n  const progressVariants: ProgressVariant[] = [undefined, 'success', 'warning', 'danger'];\n\n  const capitalize = (input: string) => input[0].toUpperCase() + input.substring(1);\n  const formatVariantName = (variant: ProgressVariant) => (variant ? capitalize(variant) : 'Default');\n\n  const variantOptions = progressVariants.map((variant) => (\n    <Radio\n      id={`progress-helper-text-${variant}-selector`}\n      label={`${formatVariantName(variant)} variant`}\n      isChecked={variant === selectedVariant}\n      onChange={() => setSelectedVariant(variant)}\n      key={formatVariantName(variant)}\n      name=\"Progress variant options\"\n    />\n  ));\n\n  const helperTextVariant = selectedVariant === 'danger' ? 'error' : selectedVariant;\n\n  const helperText = (\n    <HelperText id=\"progress-helper-text-example-help-text\">\n      <HelperTextItem variant={helperTextVariant}>\n        {`${formatVariantName(selectedVariant)} variant is being displayed`}\n      </HelperTextItem>\n    </HelperText>\n  );\n\n  return (\n    <>\n      {variantOptions}\n      <br />\n      <Progress\n        aria-describedby=\"progress-helper-text-example-help-text\"\n        value={33}\n        title=\"Title\"\n        helperText={helperText}\n        variant={selectedVariant}\n      />\n    </>\n  );\n};\n","title":"Helper text","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Success': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Progress, ProgressVariant } from '@patternfly/react-core';\n\nexport const ProgressSuccess: React.FunctionComponent = () => (\n  <Progress value={100} title=\"Title\" variant={ProgressVariant.success} />\n);\n","title":"Success","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Failure': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Progress, ProgressVariant } from '@patternfly/react-core';\n\nexport const ProgressFailure: React.FunctionComponent = () => (\n  <Progress value={33} title=\"Title\" variant={ProgressVariant.danger} />\n);\n","title":"Failure","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Warning': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Progress, ProgressVariant } from '@patternfly/react-core';\n\nexport const ProgressWarning: React.FunctionComponent = () => (\n  <Progress value={90} title=\"Title\" variant={ProgressVariant.warning} />\n);\n","title":"Warning","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Interactive status icon and measure location': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Progress,\n  ProgressMeasureLocation,\n  ProgressVariant,\n  Radio,\n  Checkbox,\n  Form,\n  FormGroup\n} from '@patternfly/react-core';\n\nexport const ProgressInteractiveFailure: React.FunctionComponent = () => {\n  const [measureLocation, setMeasureLocation] = useState<ProgressMeasureLocation>(ProgressMeasureLocation.inside);\n  const [hideStatusIcon, setHideStatusIcon] = useState<boolean>(false);\n\n  const measureLocationOptions = [\n    { value: ProgressMeasureLocation.inside, label: 'Inside' },\n    { value: ProgressMeasureLocation.outside, label: 'Outside' },\n    { value: ProgressMeasureLocation.top, label: 'Top' },\n    { value: ProgressMeasureLocation.none, label: 'None' }\n  ];\n\n  return (\n    <Form>\n      <FormGroup fieldId=\"measure-location\" label=\"Measure location\">\n        {measureLocationOptions.map((option) => (\n          <Radio\n            key={option.value}\n            id={`measure-location-${option.value}`}\n            name=\"measure-location\"\n            label={option.label}\n            value={option.value}\n            isChecked={measureLocation === option.value}\n            onChange={() => setMeasureLocation(option.value)}\n          />\n        ))}\n      </FormGroup>\n      <FormGroup fieldId=\"hide-status-icon\">\n        <Checkbox\n          id=\"hide-status-icon\"\n          label=\"Hide status icon\"\n          isChecked={hideStatusIcon}\n          onChange={(_, checked) => setHideStatusIcon(checked)}\n        />\n      </FormGroup>\n      <Progress\n        value={33}\n        title=\"Title\"\n        measureLocation={measureLocation}\n        variant={ProgressVariant.danger}\n        hideStatusIcon={hideStatusIcon}\n      />\n    </Form>\n  );\n};\n","title":"Interactive status icon and measure location","lang":"ts","className":""}}>
-      
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Examples`}
-    </AutoLinkHeader>
-    {React.createElement(pageData.examples["Basic"])}
-    {React.createElement(pageData.examples["Small"])}
-    {React.createElement(pageData.examples["Large"])}
-    {React.createElement(pageData.examples["Outside"])}
-    {React.createElement(pageData.examples["Inside"])}
-    {React.createElement(pageData.examples["Single line"])}
-    {React.createElement(pageData.examples["Without measure"])}
-    {React.createElement(pageData.examples["Finite step"])}
-    {React.createElement(pageData.examples["Progress with step instructions"])}
-    {React.createElement(pageData.examples["Truncate title"])}
-    {React.createElement(pageData.examples["Title outside of progress bar"])}
-    {React.createElement(pageData.examples["Helper text"])}
-    <AutoLinkHeader {...{"id":"status-examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Status examples`}
-    </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`When conveying status, you should ensure:`}
-    </p>
-    <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
-      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-        {`There is visible helper text that explains the status.`}
-      </li>
-      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-        {`The helper text includes the status icon, as seen in our `}
-        <PatternflyThemeLink {...{"to":"/components/helper-text#basic","className":""}}>
-          {`basic helper text example`}
-        </PatternflyThemeLink>
-        {`.`}
-      </li>
-      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
-        {`The helper text is linked to the `}
-        <code {...{"className":"ws-code "}}>
-          {`<Progress>`}
-        </code>
-        {` component via the `}
-        <code {...{"className":"ws-code "}}>
-          {`aria-describedby`}
-        </code>
-        {` property, as seen in the `}
-        <PatternflyThemeLink {...{"to":"#helper-text","className":""}}>
-          {`progress helper text example`}
-        </PatternflyThemeLink>
-        {`.`}
-      </li>
-    </ul>
-    {React.createElement(pageData.examples["Success"])}
-    {React.createElement(pageData.examples["Failure"])}
-    {React.createElement(pageData.examples["Warning"])}
-    {React.createElement(pageData.examples["Interactive status icon and measure location"])}
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsProgressReactDocs';
-Component.pageData = pageData;
-
-export default Component;

package/patternfly-docs/generated/components/progress-stepper/react-demos.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import { useState } from 'react';
-import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
-const pageData = {
-  "id": "Progress stepper",
-  "section": "components",
-  "subsection": "",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react-demos",
-  "tabName": null,
-  "slug": "/components/progress-stepper/react-demos",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/ProgressStepperDemo.md",
-  "relPath": "packages/react-core/src/demos/ProgressStepperDemo.md",
-  "examples": [
-    "Basic"
-  ]
-};
-pageData.liveContext = {
-  useState,
-  accessibilityStyles
-};
-pageData.examples = {
-  'Basic': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { ProgressStepper, ProgressStep, Button, Stack, StackItem } from '@patternfly/react-core';\nimport accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';\n\nexport const ProgressStepperBasic: React.FunctionComponent = () => {\n  const [currentStep, setCurrentStep] = useState(0);\n\n  const steps = [\n    { title: 'First step', id: 'step1' },\n    { title: 'Second step', id: 'step2' },\n    { title: 'Third step', id: 'step3' },\n    { title: 'Fourth step', id: 'step4' },\n    { title: 'Fifth step', id: 'step5' }\n  ];\n\n  const onStepForward = (_event) => {\n    const next = currentStep + 1;\n    setCurrentStep(next <= 5 ? next : 4);\n  };\n\n  const onStepBack = (_event) => {\n    const next = currentStep - 1;\n    setCurrentStep(next > 0 ? next : 0);\n  };\n\n  return (\n    <Stack>\n      <StackItem>\n        <Button onClick={onStepBack} isDisabled={currentStep === 0}>\n          Step back\n        </Button>{' '}\n        <Button onClick={onStepForward} isDisabled={currentStep === 5}>\n          Step forward\n        </Button>\n        <br />\n        <br />\n      </StackItem>\n      <StackItem>\n        <div className={accessibilityStyles.screenReader} aria-live=\"polite\">\n          {steps[currentStep] && `On ${steps[currentStep].title}.`}\n          {steps[currentStep - 1] && `${steps[currentStep - 1].title} was successful.`}\n        </div>\n        <ProgressStepper>\n          {steps.map((step, index) => {\n            let variant = 'pending';\n            let ariaLabel = 'pending step';\n            if (index < currentStep) {\n              variant = 'success';\n              ariaLabel = 'completed step, step with success';\n            } else if (index === currentStep) {\n              variant = 'info';\n              ariaLabel = 'current step';\n            }\n\n            return (\n              <ProgressStep\n                id={index}\n                titleId={step.id}\n                key={index}\n                variant={variant}\n                isCurrent={index === currentStep}\n                aria-label={ariaLabel}\n              >\n                {step.title}\n              </ProgressStep>\n            );\n          })}\n        </ProgressStepper>\n      </StackItem>\n    </Stack>\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
-      
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Demos`}
-    </AutoLinkHeader>
-    {React.createElement(pageData.examples["Basic"])}
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsProgressStepperReactDemosDocs';
-Component.pageData = pageData;
-
-export default Component;

package/patternfly-docs/generated/components/progress-stepper/react.js

@@ -1,219 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import { Fragment, useState } from 'react';
-import RhUiInProgressIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-in-progress-icon';
-import RhUiPendingIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-pending-icon';
-const pageData = {
-  "id": "Progress stepper",
-  "section": "components",
-  "subsection": "",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react",
-  "tabName": null,
-  "slug": "/components/progress-stepper/react",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md",
-  "relPath": "packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md",
-  "propComponents": [
-    {
-      "name": "ProgressStepper",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Adds an accessible label to the progress stepper."
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the progress stepper."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes applied to the progress stepper container."
-        },
-        {
-          "name": "isCenterAligned",
-          "type": "boolean",
-          "description": "Flag indicating the progress stepper should be centered."
-        },
-        {
-          "name": "isCompact",
-          "type": "boolean",
-          "description": "Flag indicating the progress stepper should be rendered compactly."
-        },
-        {
-          "name": "isVertical",
-          "type": "boolean",
-          "description": "Flag indicating the progress stepper has a vertical layout."
-        }
-      ]
-    },
-    {
-      "name": "ProgressStep",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Accessible label for the progress step. Should communicate all information being communicated by the progress\nstep's icon, including the variant and the completed status."
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the progress step."
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes applied to the progress step container."
-        },
-        {
-          "name": "description",
-          "type": "React.ReactNode",
-          "description": "Description text of a progress step."
-        },
-        {
-          "name": "icon",
-          "type": "React.ReactNode",
-          "description": "Custom icon of a progress step. Will override default icons provided by the variant."
-        },
-        {
-          "name": "isCurrent",
-          "type": "boolean",
-          "description": "Flag indicating the progress step is the current step."
-        },
-        {
-          "name": "popoverRender",
-          "type": "(stepRef: React.RefObject<any>) => React.ReactNode",
-          "description": "Forwards the step ref to rendered function.  Use this prop to add a popover to the step."
-        },
-        {
-          "name": "titleId",
-          "type": "string",
-          "description": "ID of the title of the progress step."
-        },
-        {
-          "name": "variant",
-          "type": "'default' | 'success' | 'info' | 'pending' | 'warning' | 'danger'",
-          "description": "Variant of the progress step. Each variant has a default icon."
-        }
-      ]
-    }
-  ],
-  "cssPrefix": [
-    "pf-v6-c-progress-stepper"
-  ],
-  "examples": [
-    "Basic",
-    "With step descriptions",
-    "With alignment",
-    "Compact",
-    "With an issue",
-    "With a failure",
-    "With custom icons",
-    "With help popover"
-  ]
-};
-pageData.liveContext = {
-  Fragment,
-  useState,
-  RhUiInProgressIcon,
-  RhUiPendingIcon
-};
-pageData.examples = {
-  'Basic': props => 
-    <Example {...pageData} {...props} {...{"code":"import { ProgressStepper, ProgressStep } from '@patternfly/react-core';\n\nexport const ProgressStepperBasic: React.FunctionComponent = () => (\n  <ProgressStepper aria-label=\"Basic progress stepper\">\n    <ProgressStep\n      variant=\"success\"\n      id=\"basic-step1\"\n      titleId=\"basic-step1-title\"\n      aria-label=\"completed step, step with success\"\n    >\n      First step\n    </ProgressStep>\n    <ProgressStep variant=\"info\" isCurrent id=\"basic-step2\" titleId=\"basic-step2-title\" aria-label=\"step with info\">\n      Second step\n    </ProgressStep>\n    <ProgressStep variant=\"pending\" id=\"basic-step3\" titleId=\"basic-step3-title\" aria-label=\"pending step\">\n      Third step\n    </ProgressStep>\n  </ProgressStepper>\n);\n","title":"Basic","lang":"ts","className":""}}>
-      
-    </Example>,
-  'With step descriptions': props => 
-    <Example {...pageData} {...props} {...{"code":"import { ProgressStepper, ProgressStep } from '@patternfly/react-core';\n\nexport const ProgressStepperBasicWithDescription: React.FunctionComponent = () => (\n  <ProgressStepper aria-label=\"Basic progress stepper with description\">\n    <ProgressStep\n      variant=\"success\"\n      description=\"This is the first thing to happen\"\n      id=\"basic-desc-step1\"\n      titleId=\"basic-desc-step1-title\"\n      aria-label=\"completed step, step with success\"\n    >\n      First step\n    </ProgressStep>\n    <ProgressStep\n      variant=\"info\"\n      isCurrent\n      description=\"This is the second thing to happen\"\n      id=\"basic-desc-step2\"\n      titleId=\"basic-desc-step2-title\"\n      aria-label=\"step with info\"\n    >\n      Second step\n    </ProgressStep>\n    <ProgressStep\n      variant=\"pending\"\n      description=\"This is the last thing to happen\"\n      id=\"basic-desc-step3\"\n      titleId=\"basic-desc-step3-title\"\n      aria-label=\"pending step\"\n    >\n      Third step\n    </ProgressStep>\n  </ProgressStepper>\n);\n","title":"With step descriptions","lang":"ts","className":""}}>
-      
-    </Example>,
-  'With alignment': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { ProgressStepper, ProgressStep, Checkbox } from '@patternfly/react-core';\n\nexport const ProgressStepperBasicWithAlignment: React.FunctionComponent = () => {\n  const [isVertical, setIsVertical] = useState(false);\n  const [isCenterAligned, setIsCenterAligned] = useState(false);\n\n  return (\n    <Fragment>\n      <Checkbox\n        label=\"Vertical alignment\"\n        isChecked={isVertical}\n        onChange={(_event, checked) => setIsVertical(checked)}\n        aria-label=\"Toggle vertical alignment\"\n        id=\"toggle-vertical\"\n        name=\"toggle-vertical\"\n      />\n      <Checkbox\n        label=\"Center alignment\"\n        isChecked={isCenterAligned}\n        onChange={(_event, checked) => setIsCenterAligned(checked)}\n        aria-label=\"Toggle center alignment\"\n        id=\"toggle-center\"\n        name=\"toggle-center\"\n      />\n      <br />\n      <ProgressStepper\n        isVertical={isVertical}\n        isCenterAligned={isCenterAligned}\n        aria-label=\"Basic progress stepper with alignment\"\n      >\n        <ProgressStep\n          variant=\"success\"\n          description=\"This is the first thing to happen\"\n          id=\"basic-alignment-step1\"\n          titleId=\"basic-alignment-step1-title\"\n          aria-label=\"completed step, step with success\"\n        >\n          First step\n        </ProgressStep>\n        <ProgressStep\n          variant=\"info\"\n          isCurrent\n          description=\"This is the second thing to happen\"\n          id=\"basic-alignment-step2\"\n          titleId=\"basic-alignment-step2-title\"\n          aria-label=\"step with info\"\n        >\n          Second step\n        </ProgressStep>\n        <ProgressStep\n          variant=\"pending\"\n          description=\"This is the last thing to happen\"\n          id=\"basic-alignment-step3\"\n          titleId=\"basic-alignment-step3-title\"\n          aria-label=\"pending step\"\n        >\n          Third step\n        </ProgressStep>\n      </ProgressStepper>\n    </Fragment>\n  );\n};\n","title":"With alignment","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Compact': props => 
-    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { ProgressStepper, ProgressStep, Checkbox } from '@patternfly/react-core';\n\nexport const ProgressStepperCompact: React.FunctionComponent = () => {\n  const [isVertical, setIsVertical] = useState(false);\n  const [isCenterAligned, setIsCenterAligned] = useState(false);\n\n  return (\n    <Fragment>\n      <Checkbox\n        label=\"Vertical alignment\"\n        isChecked={isVertical}\n        onChange={(_event, checked) => setIsVertical(checked)}\n        aria-label=\"Toggle compact vertical alignment\"\n        id=\"toggle-compact-vertical\"\n        name=\"toggle-compact-vertical\"\n      />\n      <Checkbox\n        label=\"Center alignment\"\n        isChecked={isCenterAligned}\n        onChange={(_event, checked) => setIsCenterAligned(checked)}\n        aria-label=\"Toggle compact center alignment\"\n        id=\"toggle-compact-center\"\n        name=\"toggle-compact-center\"\n      />\n      <br />\n      <ProgressStepper isCompact isVertical={isVertical} isCenterAligned={isCenterAligned}>\n        <ProgressStep\n          variant=\"success\"\n          id=\"compact-step1\"\n          titleId=\"compact-step1-title\"\n          aria-label=\"completed step, step with success\"\n        >\n          First step\n        </ProgressStep>\n        <ProgressStep\n          variant=\"info\"\n          isCurrent\n          id=\"compact-step2\"\n          titleId=\"compact-step2-title\"\n          aria-label=\"step with info\"\n        >\n          Second step\n        </ProgressStep>\n        <ProgressStep variant=\"pending\" id=\"compact-step3\" titleId=\"compact-step3-title\" aria-label=\"pending step\">\n          Third step\n        </ProgressStep>\n      </ProgressStepper>\n    </Fragment>\n  );\n};\n","title":"Compact","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`Compact progress steppers will only display the current step's `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`title`}
-        </code>
-        {`, and will not display any steps' `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`description`}
-        </code>
-        {` texts.`}
-      </p>
-    </Example>,
-  'With an issue': props => 
-    <Example {...pageData} {...props} {...{"code":"import { ProgressStepper, ProgressStep } from '@patternfly/react-core';\n\nexport const ProgressStepperBasicIssue: React.FunctionComponent = () => (\n  <ProgressStepper aria-label=\"Basic progress stepper with issue\">\n    <ProgressStep\n      variant=\"success\"\n      id=\"basic-with-issue-step1\"\n      titleId=\"basic-with-issue-step1-title\"\n      aria-label=\"completed step, step with success\"\n    >\n      First step\n    </ProgressStep>\n    <ProgressStep\n      variant=\"success\"\n      id=\"basic-with-issue-step2\"\n      titleId=\"basic-with-issue-step2-title\"\n      aria-label=\"completed step, step with success\"\n    >\n      Second step\n    </ProgressStep>\n    <ProgressStep\n      variant=\"warning\"\n      id=\"basic-with-issue-step3\"\n      titleId=\"basic-with-issue-step3-title\"\n      aria-label=\"completed step, step with warning\"\n    >\n      Third step\n    </ProgressStep>\n    <ProgressStep\n      variant=\"info\"\n      isCurrent\n      id=\"basic-with-issue-step4\"\n      titleId=\"basic-with-issue-step4-title\"\n      aria-label=\"step with info\"\n    >\n      Fourth step\n    </ProgressStep>\n    <ProgressStep\n      variant=\"pending\"\n      id=\"basic-with-issue-step5\"\n      titleId=\"basic-with-issue-step5-title\"\n      aria-label=\"pending step\"\n    >\n      Fifth step\n    </ProgressStep>\n  </ProgressStepper>\n);\n","title":"With an issue","lang":"ts","className":""}}>
-      
-    </Example>,
-  'With a failure': props => 
-    <Example {...pageData} {...props} {...{"code":"import { ProgressStepper, ProgressStep } from '@patternfly/react-core';\n\nexport const ProgressStepperBasicFailure: React.FunctionComponent = () => (\n  <ProgressStepper aria-label=\"Basic progress stepper with failure\">\n    <ProgressStep\n      variant=\"success\"\n      id=\"basic-with-failure-step1\"\n      titleId=\"basic-with-failure-step1-title\"\n      aria-label=\"completed step, step with success\"\n    >\n      First step\n    </ProgressStep>\n    <ProgressStep\n      variant=\"success\"\n      id=\"basic-with-failure-step2\"\n      titleId=\"basic-with-failure-step2-title\"\n      aria-label=\"completed step, step with success\"\n    >\n      Second step\n    </ProgressStep>\n    <ProgressStep\n      variant=\"success\"\n      id=\"basic-with-failure-step3\"\n      titleId=\"basic-with-failure-step3-title\"\n      aria-label=\"completed step, step with success\"\n    >\n      Third step\n    </ProgressStep>\n    <ProgressStep\n      variant=\"danger\"\n      isCurrent\n      id=\"basic-with-failure-step4\"\n      titleId=\"basic-with-failure-step4-title\"\n      aria-label=\"step with danger\"\n    >\n      Fourth step\n    </ProgressStep>\n    <ProgressStep\n      variant=\"pending\"\n      id=\"basic-with-failure-step5\"\n      titleId=\"basic-with-failure-step5-title\"\n      aria-label=\"pending step\"\n    >\n      Fifth step\n    </ProgressStep>\n  </ProgressStepper>\n);\n","title":"With a failure","lang":"ts","className":""}}>
-      
-    </Example>,
-  'With custom icons': props => 
-    <Example {...pageData} {...props} {...{"code":"import { ProgressStepper, ProgressStep } from '@patternfly/react-core';\nimport RhUiInProgressIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-in-progress-icon';\nimport RhUiPendingIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-pending-icon';\n\nexport const ProgressStepperCustomIcons: React.FunctionComponent = () => (\n  <ProgressStepper aria-label=\"Progress stepper with custom icons\">\n    <ProgressStep\n      variant=\"success\"\n      id=\"custom-step1\"\n      titleId=\"custom-step1-title\"\n      aria-label=\"completed step, step with success\"\n    >\n      Successful completion\n    </ProgressStep>\n    <ProgressStep\n      isCurrent\n      icon={<RhUiInProgressIcon />}\n      id=\"custom-step2\"\n      titleId=\"custom-step2-title\"\n      aria-label=\"in progress\"\n    >\n      In process\n    </ProgressStep>\n    <ProgressStep\n      variant=\"pending\"\n      icon={<RhUiPendingIcon />}\n      id=\"custom-step3\"\n      titleId=\"custom-step3-title\"\n      aria-label=\"pending step\"\n    >\n      Pending\n    </ProgressStep>\n  </ProgressStepper>\n);\n","title":"With custom icons","lang":"ts","className":""}}>
-      
-    </Example>,
-  'With help popover': props => 
-    <Example {...pageData} {...props} {...{"code":"import { ProgressStepper, ProgressStep, Popover } from '@patternfly/react-core';\n\nexport const PopoverProgressStep = () => (\n  <ProgressStepper aria-label=\"Progress stepper with help popover\">\n    <ProgressStep\n      variant=\"success\"\n      id=\"popover-step1\"\n      titleId=\"popover-step1-title\"\n      aria-label=\"completed step with popover, step with success\"\n      popoverRender={(stepRef) => (\n        <Popover\n          aria-label=\"First step help\"\n          headerContent={<div>First step popover</div>}\n          bodyContent={<div>Additional info or help text content.</div>}\n          triggerRef={stepRef}\n          position=\"right\"\n        />\n      )}\n    >\n      First step\n    </ProgressStep>\n    <ProgressStep\n      variant=\"danger\"\n      id=\"popover-step2\"\n      titleId=\"popover-step2-title\"\n      aria-label=\"completed step with popover, step with danger\"\n      popoverRender={(stepRef) => (\n        <Popover\n          aria-label=\"Second step help\"\n          headerContent={<div>Second step popover</div>}\n          bodyContent={<div>Additional info or help text content.</div>}\n          triggerRef={stepRef}\n          position=\"right\"\n        />\n      )}\n    >\n      Second step\n    </ProgressStep>\n    <ProgressStep\n      variant=\"info\"\n      id=\"popover-step3\"\n      titleId=\"popover-step3-title\"\n      aria-label=\"step with popover\"\n      popoverRender={(stepRef) => (\n        <Popover\n          aria-label=\"Third step help\"\n          headerContent={<div>Third step popover</div>}\n          bodyContent={<div>Additional info or help text content.</div>}\n          triggerRef={stepRef}\n          position=\"right\"\n        />\n      )}\n      isCurrent\n    >\n      Third step\n    </ProgressStep>\n    <ProgressStep variant=\"pending\" id=\"popover-step4\" titleId=\"popover-step4-title\" aria-label=\"pending step\">\n      Fourth step\n    </ProgressStep>\n  </ProgressStepper>\n);\n","title":"With help popover","lang":"ts","className":""}}>
-      
-      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-        {`To add a popover to a progress step, set the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`popoverRender`}
-        </code>
-        {` properties on the `}
-        
-        <code {...{"className":"ws-code "}}>
-          {`ProgressStep`}
-        </code>
-        {` component.`}
-      </p>
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Examples`}
-    </AutoLinkHeader>
-    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
-      {`Progress steppers have default icons associated with the `}
-      <code {...{"className":"ws-code "}}>
-        {`variant`}
-      </code>
-      {` property, and may be overriden and customized using the `}
-      <code {...{"className":"ws-code "}}>
-        {`icon`}
-      </code>
-      {` property.`}
-    </p>
-    {React.createElement(pageData.examples["Basic"])}
-    {React.createElement(pageData.examples["With step descriptions"])}
-    {React.createElement(pageData.examples["With alignment"])}
-    {React.createElement(pageData.examples["Compact"])}
-    {React.createElement(pageData.examples["With an issue"])}
-    {React.createElement(pageData.examples["With a failure"])}
-    {React.createElement(pageData.examples["With custom icons"])}
-    {React.createElement(pageData.examples["With help popover"])}
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsProgressStepperReactDocs';
-Component.pageData = pageData;
-
-export default Component;