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

package/patternfly-docs/generated/components/tile/react-deprecated.js

@@ -0,0 +1,242 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState } from 'react';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
+import '../../../../../react-core/src/deprecated/components/Tile/examples/./Tile.css';
+const pageData = {
+  "id": "Tile",
+  "section": "components",
+  "subsection": "",
+  "deprecated": true,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-deprecated",
+  "tabName": null,
+  "slug": "/components/tile/react-deprecated",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/deprecated/components/Tile/examples/Tile.md",
+  "relPath": "packages/react-core/src/deprecated/components/Tile/examples/Tile.md",
+  "propComponents": [
+    {
+      "name": "Tile",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the banner"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the banner"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Icon in the tile title"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating if the tile is disabled"
+        },
+        {
+          "name": "isDisplayLarge",
+          "type": "boolean",
+          "description": "Flag indicating if the stacked tile icon is large"
+        },
+        {
+          "name": "isSelected",
+          "type": "boolean",
+          "description": "Flag indicating if the tile is selected"
+        },
+        {
+          "name": "isStacked",
+          "type": "boolean",
+          "description": "Flag indicating if the tile header is stacked"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "description": "Title of the tile",
+          "required": true
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-tile"
+  ],
+  "examples": [
+    "Basic tile",
+    "With subtext",
+    "With icon",
+    "With stacked icon",
+    "With large icons",
+    "With long subtext",
+    "Tiles with single selection",
+    "Tiles with multiple selection"
+  ]
+};
+pageData.liveContext = {
+  useState,
+  PlusIcon,
+  RhUiNotificationFillIcon
+};
+pageData.relativeImports = "import 'react-core/src/deprecated/components/Tile/examples/./Tile.css';"
+pageData.examples = {
+  'Basic tile': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Tile } from '@patternfly/react-core/deprecated';\n\nexport const TileBasic: React.FunctionComponent = () => (\n  <div role=\"listbox\" aria-label=\"Basic tiles\">\n    <Tile title=\"Default\" isSelected={false} />\n    <Tile title=\"Selected\" isSelected />\n    <Tile title=\"Disabled\" isDisabled isSelected={false} />\n  </div>\n);\n","title":"Basic tile","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Basic tiles can appear in one of three states: a default state, selected state, and a disabled state. To change the state of a tile, use the properties `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isSelected`}
+        </code>
+        {` and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isDisabled`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'With subtext': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Tile } from '@patternfly/react-core/deprecated';\n\nexport const TileWithSubtext: React.FunctionComponent = () => (\n  <div role=\"listbox\" aria-label=\"Tiles with subtext\">\n    <Tile title=\"Default\" isSelected={false}>\n      Subtext goes here\n    </Tile>{' '}\n    <Tile title=\"Selected\" isSelected>\n      Subtext goes here\n    </Tile>{' '}\n    <Tile title=\"Disabled\" isDisabled isSelected={false}>\n      Subtext goes here\n    </Tile>\n  </div>\n);\n","title":"With subtext","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Tile subtext can provide users with additional context. To add subtext, pass a short description to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Tile>`}
+        </code>
+        {` component.`}
+      </p>
+    </Example>,
+  'With icon': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Tile } from '@patternfly/react-core/deprecated';\nimport PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';\n\nexport const TileWithIcon: React.FunctionComponent = () => (\n  <div role=\"listbox\" aria-label=\"Tiles with icon\">\n    <Tile title=\"Default\" icon={<PlusIcon />} isSelected={false}>\n      Subtext goes here\n    </Tile>{' '}\n    <Tile title=\"Selected\" icon={<PlusIcon />} isSelected>\n      Subtext goes here\n    </Tile>{' '}\n    <Tile title=\"Disabled\" icon={<PlusIcon />} isDisabled isSelected={false}>\n      Subtext goes here\n    </Tile>\n  </div>\n);\n","title":"With icon","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Icons can provide a visual cue that helps users understand what the tile is being used for. To add an icon, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`icon`}
+        </code>
+        {` property.`}
+      </p>
+    </Example>,
+  'With stacked icon': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Tile } from '@patternfly/react-core/deprecated';\nimport RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';\n\nexport const TileStacked: React.FunctionComponent = () => (\n  <div role=\"listbox\" aria-label=\"Stacked tiles\">\n    <Tile title=\"Default\" icon={<RhUiNotificationFillIcon />} isStacked isSelected={false}>\n      Subtext goes here\n    </Tile>{' '}\n    <Tile title=\"Selected\" icon={<RhUiNotificationFillIcon />} isStacked isSelected>\n      Subtext goes here\n    </Tile>{' '}\n    <Tile title=\"Disabled\" icon={<RhUiNotificationFillIcon />} isStacked isDisabled isSelected={false}>\n      Subtext goes here\n    </Tile>\n  </div>\n);\n","title":"With stacked icon","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can further customize a tile’s appearance by placing an icon above the title. To stack your icon on top of a tile’s title, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isStacked`}
+        </code>
+        {` property.`}
+      </p>
+    </Example>,
+  'With large icons': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Tile } from '@patternfly/react-core/deprecated';\nimport RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';\n\nexport const TileStackedWithLargeIcons: React.FunctionComponent = () => (\n  <div role=\"listbox\" aria-label=\"Stacked tiles with large icons\">\n    <Tile title=\"Default\" icon={<RhUiNotificationFillIcon />} isStacked isDisplayLarge isSelected={false}>\n      Subtext goes here\n    </Tile>{' '}\n    <Tile title=\"Selected\" icon={<RhUiNotificationFillIcon />} isStacked isDisplayLarge isSelected>\n      Subtext goes here\n    </Tile>{' '}\n    <Tile title=\"Disabled\" icon={<RhUiNotificationFillIcon />} isStacked isDisplayLarge isDisabled isSelected={false}>\n      Subtext goes here\n    </Tile>\n  </div>\n);\n","title":"With large icons","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can make your icons larger to help catch a user’s attention. To increase the size of an icon, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isDisplayLarge`}
+        </code>
+        {` property.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Be aware that `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isDisplayLarge`}
+        </code>
+        {` can only be used when `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isStacked`}
+        </code>
+        {` is also applied.`}
+      </p>
+    </Example>,
+  'With long subtext': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Flex } from '@patternfly/react-core';\nimport { Tile } from '@patternfly/react-core/deprecated';\nimport RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';\n\nexport const TileWithExtraContent: React.FunctionComponent = () => (\n  <div role=\"listbox\" aria-label=\"Tiles with extra content\">\n    <Flex>\n      <Flex flex={{ default: 'flex_1' }}>\n        <Tile title=\"Default\" icon={<RhUiNotificationFillIcon />} isStacked isSelected={false}>\n          This is really really long subtext that goes on for so long that it has to wrap to the next line. This is\n          really really long subtext that goes on for so long that it has to wrap to the next line.\n        </Tile>\n      </Flex>\n      <Flex flex={{ default: 'flex_1' }}>\n        <Tile title=\"Selected\" icon={<RhUiNotificationFillIcon />} isStacked isSelected>\n          This is really really long subtext that goes on for so long that it has to wrap to the next line.\n        </Tile>\n      </Flex>\n      <Flex flex={{ default: 'flex_1' }}>\n        <Tile title=\"Disabled\" icon={<RhUiNotificationFillIcon />} isStacked isDisabled isSelected={false}>\n          Subtext goes here\n        </Tile>\n      </Flex>\n    </Flex>\n  </div>\n);\n","title":"With long subtext","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To provide users with a large amount of context, subtext can be elongated to wrap around to the next line. To format a long subtext, you can pass the component `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`Flex`}
+        </code>
+        {` into `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Tile>`}
+        </code>
+        {`.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can also change the type of `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`Flex`}
+        </code>
+        {` you can use so that the line breaks in the subtext fits your needs. You can do this by changing the default flex. The standard is `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`default: “flex_1”`}
+        </code>
+        {`, and changing the number in the default will also change where the sentence breaks.`}
+      </p>
+    </Example>,
+  'Tiles with single selection': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tile } from '@patternfly/react-core/deprecated';\n\nconst TileSingleSelect: React.FunctionComponent = () => {\n  const [selectedId, setSelectedId] = useState<string>('');\n\n  const onSelect = (event: React.MouseEvent) => {\n    setSelectedId(event.currentTarget.id);\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      setSelectedId(event.currentTarget.id);\n    }\n  };\n\n  return (\n    <div role=\"listbox\" aria-label=\"Single selection tiles\">\n      <Tile title=\"Tile 1\" id=\"single-select-tile-1\" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'single-select-tile-1'} />\n      <Tile title=\"Tile 2\" id=\"single-select-tile-2\" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'single-select-tile-2'} />\n      <Tile title=\"Tile 3\" id=\"single-select-tile-3\" isDisabled isSelected={selectedId === 'single-select-tile-3'} />\n      <Tile title=\"Tile 4\" id=\"single-select-tile-4\" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'single-select-tile-4'} />\n    </div>\n  );\n};","title":"Tiles with single selection","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Tiles with multiple selection': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tile } from '@patternfly/react-core/deprecated';\n\nconst TileMultiSelect: React.FunctionComponent = () => {\n  const [selectedIds, setSelectedIds] = useState<string[]>([]);\n\n  const onSelect = (event: React.MouseEvent | React.KeyboardEvent) => {\n    const targetId = event.currentTarget.id;\n    setSelectedIds(prevSelectedIds => {\n      const newSelectedIds = prevSelectedIds.includes(targetId)\n        ? prevSelectedIds.filter(id => id !== targetId)\n        : [...prevSelectedIds, targetId];\n      console.log('tile selections: ', newSelectedIds);\n      return newSelectedIds;\n    });\n  };\n\n  const onKeyDown = (event: React.KeyboardEvent) => {\n    console.log(event.key);\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      onSelect(event);\n    }\n  };\n\n  return (\n    <div role=\"listbox\" aria-multiselectable={true} aria-label=\"Multiselectable tiles\">\n      <Tile\n        title=\"Tile 1\"\n        id=\"multiselect-tile-1\"\n        onClick={onSelect}\n        onKeyDown={onKeyDown}\n        isSelected={selectedIds.includes('multiselect-tile-1')}\n      />\n      <Tile\n        title=\"Tile 2\"\n        id=\"multiselect-tile-2\"\n        onClick={onSelect}\n        onKeyDown={onKeyDown}\n        isSelected={selectedIds.includes('multiselect-tile-2')}\n      />\n      <Tile title=\"Tile 3\" id=\"multiselect-tile-3\" isDisabled />\n      <Tile\n        title=\"Tile 4\"\n        id=\"multiselect-tile-4\"\n        onClick={onSelect}\n        onKeyDown={onKeyDown}\n        isSelected={selectedIds.includes('multiselect-tile-4')}\n      />\n    </div>\n  );\n};","title":"Tiles with multiple selection","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      <strong {...{"className":""}}>
+        {`Note:`}
+      </strong>
+      {` Tile has been deprecated. Use the `}
+      <PatternflyThemeLink {...{"to":"/components/card#cards-as-tiles","className":""}}>
+        {`card`}
+      </PatternflyThemeLink>
+      {` component instead.`}
+    </p>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic tile"])}
+    {React.createElement(pageData.examples["With subtext"])}
+    {React.createElement(pageData.examples["With icon"])}
+    {React.createElement(pageData.examples["With stacked icon"])}
+    {React.createElement(pageData.examples["With large icons"])}
+    {React.createElement(pageData.examples["With long subtext"])}
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Tiles with single selection"])}
+    {React.createElement(pageData.examples["Tiles with multiple selection"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsTileReactDeprecatedDocs';
+Component.pageData = pageData;
+
+export default Component;

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

@@ -0,0 +1,283 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+
+const pageData = {
+  "id": "Timestamp",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/timestamp/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Timestamp/examples/Timestamp.md",
+  "relPath": "packages/react-core/src/components/Timestamp/examples/Timestamp.md",
+  "propComponents": [
+    {
+      "name": "Timestamp",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Displays custom content inside the timestamp, such as a relative time. This prop will\noverride the default content that is displayed. Custom content will not be affected by\nany props that format or add to displayed content."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Class to add to the outer span."
+        },
+        {
+          "name": "customFormat",
+          "type": "{ [key: string]: string }",
+          "description": "Applies custom formatting to the displayed date and/or time. Passing this prop in will\noverride the dateFormat and timeFormat props."
+        },
+        {
+          "name": "date",
+          "type": "Date",
+          "description": "Determines the default content that is displayed inside the timestamp and the value of\nthe inner time element's datetime attribute."
+        },
+        {
+          "name": "dateFormat",
+          "type": "'full' | 'long' | 'medium' | 'short'",
+          "description": "Determines the format of the displayed date in the timestamp and UTC tooltip. Examples:\n\"Full\" => Tuesday, August 9, 2022;\n\"Long\" => August 9, 2022;\n\"Medium\" => Aug 9, 2022;\n\"Short\" => 8/9/22"
+        },
+        {
+          "name": "displaySuffix",
+          "type": "string",
+          "description": "Applies a custom suffix to the displayed content, usually after the time, such as a\ncustom time zone.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "is12Hour",
+          "type": "boolean",
+          "description": "Flag for displaying the time in a 12 hour format. If this prop is not passed in,\nthe hour format will be based on the locale prop's value."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "description": "Determines which locale to use in the displayed content. Defaults to the current locale\nwhen this prop is not passed in. For more information about locale's:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation"
+        },
+        {
+          "name": "shouldDisplayUTC",
+          "type": "boolean",
+          "description": "Flag indicating whether the default content should be displayed as a UTC string\ninstead of a local string."
+        },
+        {
+          "name": "timeFormat",
+          "type": "'full' | 'long' | 'medium' | 'short'",
+          "description": "Determines the format of the displayed time in the timestamp and UTC tooltip. Examples:\n\"Full\" => 11:25:00 AM Eastern Daylight Time\n\"Long\" => 11:25:00 AM EDT\n\"Medium\" => 11:25:00 AM\n\"Short\" => 11:25 AM"
+        },
+        {
+          "name": "tooltip",
+          "type": "TimestampTooltip",
+          "description": "Adds a tooltip to the timestamp."
+        }
+      ]
+    },
+    {
+      "name": "TimestampTooltip",
+      "description": "",
+      "props": [
+        {
+          "name": "content",
+          "type": "React.ReactNode",
+          "description": "Content displayed in the tooltip when using the \"custom\" variant."
+        },
+        {
+          "name": "suffix",
+          "type": "string",
+          "description": "A custom suffix to apply to a \"default\" variant tooltip."
+        },
+        {
+          "name": "tooltipProps",
+          "type": "any",
+          "description": "Additional props passed to the tooltip."
+        },
+        {
+          "name": "variant",
+          "type": "'default' | 'custom'",
+          "description": "The variant of the tooltip. The \"default\" variant displays the date passed into\nthe timestamp's date prop as a UTC string.",
+          "required": true
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-timestamp"
+  ],
+  "examples": [
+    "Default",
+    "Basic formats",
+    "Custom format",
+    "Default tooltip",
+    "Custom content",
+    "Custom tooltip"
+  ]
+};
+pageData.examples = {
+  'Default': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Timestamp } from '@patternfly/react-core';\n\nexport const TimestampDefault: React.FunctionComponent = () => (\n  <>\n    <Timestamp />\n    <br />\n    <Timestamp shouldDisplayUTC />\n  </>\n);\n","title":"Default","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`By default, a timestamp will display the current date and time based on the current locale if the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`date`}
+        </code>
+        {` prop is not passed in.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Passing the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`shouldDisplayUTC`}
+        </code>
+        {` property will display the UTC date and time instead of the current or passed in locale.`}
+      </p>
+    </Example>,
+  'Basic formats': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Timestamp, TimestampFormat } from '@patternfly/react-core';\n\nexport const TimestampBasicFormats: React.FunctionComponent = () => {\n  const currentDate = new Date('2025-04-21T23:35:25');\n\n  return (\n    <>\n      <Timestamp date={currentDate} dateFormat={TimestampFormat.full} timeFormat={TimestampFormat.full} />\n      <br />\n      <br />\n      <Timestamp date={currentDate} dateFormat={TimestampFormat.full} />\n      <br />\n      <br />\n      <Timestamp date={currentDate} timeFormat={TimestampFormat.full} />\n      <br />\n      <br />\n      <Timestamp\n        date={currentDate}\n        dateFormat={TimestampFormat.medium}\n        timeFormat={TimestampFormat.short}\n        displaySuffix=\"US Eastern\"\n      />\n    </>\n  );\n};\n","title":"Basic formats","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The format of the displayed content can be customized by passing in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`dateFormat`}
+        </code>
+        {` and/or `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`timeFormat`}
+        </code>
+        {` props. Passing in only one of the props will display only the date or time, depending on which prop is passed in. The possible options are "full", "long", "medium", and "short".`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can also pass in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`displaySuffix`}
+        </code>
+        {` prop to display a custom suffix at the end of the displayed content. This will not override a timezone that is already displayed from the applied time format.`}
+      </p>
+    </Example>,
+  'Custom format': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Timestamp } from '@patternfly/react-core';\n\nexport const TimestampCustomFormat: React.FunctionComponent = () => (\n  <Timestamp customFormat={{ year: '2-digit', month: 'short', weekday: 'short', day: 'numeric', hour: 'numeric' }} />\n);\n","title":"Custom format","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The format of the displayed content can be further customized by passing in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`customFormat`}
+        </code>
+        {` prop. Read `}
+        
+        <PatternflyThemeLink {...{"to":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options","className":""}}>
+          {`datetime format options`}
+        </PatternflyThemeLink>
+        {` for a list of options that can be passed in.`}
+      </p>
+    </Example>,
+  'Default tooltip': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';\n\nexport const TimestampDefaultTooltip: React.FunctionComponent = () => {\n  const currentDate = new Date('2025-04-21T14:30:00');\n\n  return (\n    <>\n      <Timestamp date={currentDate} tooltip={{ variant: TimestampTooltipVariant.default }} />\n      <br />\n      <br />\n      <Timestamp\n        date={currentDate}\n        tooltip={{ variant: TimestampTooltipVariant.default, suffix: 'Coordinated Universal Time (UTC)' }}\n      />\n    </>\n  );\n};\n","title":"Default tooltip","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To render a tooltip that displays the timestamp content as a UTC time, you can pass in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`tooltip`}
+        </code>
+        {` prop with a variant of "default". The format of the default tooltip content will match the format of the timestamp content.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can customize the suffix of this default tooltip variant by passing in `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`suffix`}
+        </code>
+        {` to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`tooltip`}
+        </code>
+        {` prop.`}
+      </p>
+    </Example>,
+  'Custom content': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Timestamp, TimestampFormat, TimestampTooltipVariant } from '@patternfly/react-core';\n\nexport const TimestampCustomContent: React.FunctionComponent = () => (\n  <>\n    <Timestamp date={new Date(2022, 7, 9, 14, 57, 0)} tooltip={{ variant: TimestampTooltipVariant.default }}>\n      1 hour ago\n    </Timestamp>\n    <br />\n    <br />\n    <Timestamp\n      date={new Date(2022, 7, 9, 14, 57, 0)}\n      dateFormat={TimestampFormat.medium}\n      timeFormat={TimestampFormat.short}\n      tooltip={{ variant: TimestampTooltipVariant.default }}\n    >\n      Last updated August 9th, 2022 at 2:57 PM EDT\n    </Timestamp>\n  </>\n);\n","title":"Custom content","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To display custom content, such as a relative time or prefacing text, you can pass in content to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`children`}
+        </code>
+        {` prop.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When also rendering a default tooltip with the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`tooltip`}
+        </code>
+        {` prop, you can pass in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`dateFormat`}
+        </code>
+        {` and/or `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`timeFormat`}
+        </code>
+        {` props to customize the tooltip content without affecting the custom timestamp content.`}
+      </p>
+    </Example>,
+  'Custom tooltip': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';\n\nexport const TimestampCustomTooltip: React.FunctionComponent = () => (\n  <>\n    <Timestamp\n      date={new Date(2022, 7, 9, 14, 57, 0)}\n      tooltip={{ variant: TimestampTooltipVariant.custom, content: 'Last updated on August 9th, 2022 - 2:57 PM UTC' }}\n    />\n    <br />\n    <br />\n    <Timestamp\n      date={new Date(2022, 9, 31)}\n      tooltip={{ variant: TimestampTooltipVariant.custom, content: '31st of October, 2022' }}\n    >\n      Halloween\n    </Timestamp>\n  </>\n);\n","title":"Custom tooltip","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`By passing in `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`variant="custom"`}
+        </code>
+        {` and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`content`}
+        </code>
+        {` to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`tooltip`}
+        </code>
+        {` prop, you can display custom content within the timestamp's tooltip.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Default"])}
+    {React.createElement(pageData.examples["Basic formats"])}
+    {React.createElement(pageData.examples["Custom format"])}
+    {React.createElement(pageData.examples["Default tooltip"])}
+    {React.createElement(pageData.examples["Custom content"])}
+    {React.createElement(pageData.examples["Custom tooltip"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsTimestampReactDocs';
+Component.pageData = pageData;
+
+export default Component;

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment } from 'react';
+const pageData = {
+  "id": "Title",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/title/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Title/examples/Title.md",
+  "relPath": "packages/react-core/src/components/Title/examples/Title.md",
+  "propComponents": [
+    {
+      "name": "Title",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the Title",
+          "defaultValue": "''"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the Title",
+          "defaultValue": "''"
+        },
+        {
+          "name": "headingLevel",
+          "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+          "description": "The heading level to use",
+          "required": true
+        },
+        {
+          "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": "size",
+          "type": "'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'",
+          "description": "The size of the Title"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-title"
+  ],
+  "examples": [
+    "Default Sizes",
+    "Custom Sizes"
+  ]
+};
+pageData.liveContext = {
+  Fragment
+};
+pageData.examples = {
+  'Default Sizes': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Title } from '@patternfly/react-core';\n\nexport const TitleDefaultSizes: React.FunctionComponent = () => (\n  <Fragment>\n    <Title headingLevel=\"h1\">H1-styled title</Title>\n    <Title headingLevel=\"h2\">H2-styled title</Title>\n    <Title headingLevel=\"h3\">H3-styled title</Title>\n    <Title headingLevel=\"h4\">H4-styled title</Title>\n    <Title headingLevel=\"h5\">H5-styled title</Title>\n    <Title headingLevel=\"h6\">H6-styled title</Title>\n  </Fragment>\n);\n","title":"Default Sizes","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Custom Sizes': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Title, TitleSizes } from '@patternfly/react-core';\n\nexport const TitleCustomSizes: React.FunctionComponent = () => (\n  <Fragment>\n    <Title headingLevel=\"h1\" size={TitleSizes['4xl']}>\n      4xl title\n    </Title>\n    <Title headingLevel=\"h2\" size=\"3xl\">\n      3xl title\n    </Title>\n    <Title headingLevel=\"h3\" size={TitleSizes['2xl']}>\n      2xl title\n    </Title>\n    <Title headingLevel=\"h4\" size=\"xl\">\n      xl title\n    </Title>\n    <Title headingLevel=\"h5\" size={TitleSizes.lg}>\n      lg title\n    </Title>\n    <Title headingLevel=\"h6\" size=\"md\">\n      md title\n    </Title>\n  </Fragment>\n);\n","title":"Custom Sizes","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Default Sizes"])}
+    {React.createElement(pageData.examples["Custom Sizes"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsTitleReactDocs';
+Component.pageData = pageData;
+
+export default Component;