feat(misc): rename Text to Content

packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Flex, FlexItem, Text } from '@patternfly/react-core';
+import { Flex, FlexItem, Content } from '@patternfly/react-core';
 import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
 import { Link } from '../link/link';
 import { slugger } from '../../helpers/slugger';
@@ -17,7 +17,7 @@ export const AutoLinkHeader = ({
   return (
     <Flex alignItems={{ default: 'alignItemsCenter'}} spaceItems={{ default: "spaceItemsSm" }}>
       <FlexItem>
-        <Text
+        <Content
           id={slug}
           component={headingLevel}
           className={css('ws-heading', className)}
@@ -27,7 +27,7 @@ export const AutoLinkHeader = ({
             <LinkIcon className="ws-heading-anchor-icon" style={{ verticalAlign: 'middle' }} />
           </Link>
           {children}
-        </Text>
+        </Content>
       </FlexItem>
       {metaText && <FlexItem>{metaText}</FlexItem>}
     </Flex>

packages/documentation-framework/components/footer/footer.js

@@ -1,5 +1,5 @@
 import React from "react";
-import {Brand, Grid, GridItem, List, PageSection, Text} from "@patternfly/react-core";
+import {Brand, Grid, GridItem, List, PageSection, Content} from "@patternfly/react-core";
 import {Link} from "@patternfly/documentation-framework/components";
 import {GithubIcon, TwitterIcon} from "@patternfly/react-icons";
 import redhatLogo from "./RHLogo.png";
@@ -176,14 +176,14 @@ export const Footer = () => (
                   <source srcSet={logo} />
                 </Brand>
               </Link>
-              <Text className="ws-org-pfsite-footer-menu-about-description">
+              <Content component="p" className="ws-org-pfsite-footer-menu-about-description">
                 PatternFly is an open source design system built to drive
                 consistency and unify teams. From documentation and components
                 to code examples and tutorials, PatternFly is a place where
                 design and development can thrive. We’re on a mission to help
                 teams build consistent, accessible, and scalable enterprise
                 product experiences—the open source way.
-              </Text>
+              </Content>
             </GridItem>
             <GridItem className="ws-org-pfsite-footer-menu-social-links pf-v6-u-px-xl">
               <Link

packages/documentation-framework/components/sectionGallery/TextSummary.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { convertToReactComponent } from "@patternfly/ast-helpers";
-import { TextContent, Text } from "@patternfly/react-core";
+import { Content } from "@patternfly/react-core";
 
 // convert summary text from string to jsx, remove links
 export const SummaryComponent = ({ id, itemsData }) => {
@@ -22,10 +22,10 @@ export const TextSummary = ({ id, itemsData }) => {
   }
 
   return (
-    <TextContent>
-      <Text>
+    <Content>
+      <Content component="p">
         <SummaryComponent id={id} itemsData={itemsData} />
-      </Text>
-    </TextContent>
+      </Content>
+    </Content>
   )
 };

packages/documentation-framework/components/sectionGallery/sectionDataListLayout.js

@@ -7,9 +7,8 @@ import {
   DataListCell,
   Split,
   SplitItem,
-  TextContent,
-  Text,
-  TextVariants,
+  Content,
+  ContentVariants,
   Label,
 } from '@patternfly/react-core';
 import { Link } from '../link/link';
@@ -58,11 +57,11 @@ export const SectionDataListLayout = ({
                     <DataListCell width={5} key="text-description">
                       <Split className={hasListText ? 'pf-v6-u-mb-md' : null}>
                         <SplitItem isFilled>
-                          <TextContent>
-                            <Text component={TextVariants.h2}>
+                          <Content>
+                            <Content component={ContentVariants.h2}>
                               <span>{title}</span>
-                            </Text>
-                          </TextContent>
+                            </Content>
+                          </Content>
                         </SplitItem>
                         <SplitItem>
                           {isBeta && (

packages/documentation-framework/components/sectionGallery/sectionGalleryToolbar.js

@@ -6,8 +6,8 @@ import {
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
-  Text,
-  TextVariants,
+  Content,
+  ContentVariants,
   ToggleGroup,
   ToggleGroupItem,
 } from '@patternfly/react-core';
@@ -63,10 +63,10 @@ export const SectionGalleryToolbar = ({
         spacer={{ default: 'spacerMd', md: 'spacerNone' }}
         style={{ '--pf-v6-c-toolbar__item--MinWidth': 'max-content' }}
       >
-        <Text component={TextVariants.small}>
+        <Content component={ContentVariants.small}>
           {galleryItems.length}
           {countText}
-        </Text>
+        </Content>
       </ToolbarItem>
     </ToolbarContent>
   </Toolbar>

packages/documentation-framework/templates/mdx.js

@@ -1,7 +1,6 @@
 import React from 'react';
-import { PageSection, Title, Tooltip, PageSectionVariants, Button, BackToTop, Flex, FlexItem, PageGroup, Page, Text, TextContent, Label, Stack, StackItem } from '@patternfly/react-core';
+import { PageSection, Title, Tooltip, PageSectionVariants, Button, BackToTop, Flex, FlexItem, PageGroup, Content, Label, Stack, StackItem } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import { Router, useLocation } from '@reach/router';
 import { CSSVariables, PropsTable, TableOfContents, Link, AutoLinkHeader, InlineAlert } from '../components';
 import { capitalize, getTitle, slugger, trackEvent } from '../helpers';
@@ -249,7 +248,7 @@ export const MDXTemplate = ({
           variant={!isSinglePage ? PageSectionVariants.light : ""}
           isWidthLimited
         >
-          <TextContent>
+          <Content>
             <Flex alignItems={{ default: 'alignItemsCenter'}}>
               <FlexItem>
                 <Title headingLevel='h1' size='4xl' id="ws-page-title">
@@ -289,7 +288,7 @@ export const MDXTemplate = ({
               </FlexItem>
             </Flex>
             {isComponent && summary && (<SummaryComponent />)}
-          </TextContent>
+          </Content>
         </PageSection>
         { showTabs && (
           <PageSection id="ws-sticky-nav-tabs" stickyOnBreakpoint={{'default':'top'}} type="tabs">

packages/documentation-site/patternfly-docs/content/design-guidelines/components/content/content.md

@@ -0,0 +1,8 @@
+---
+id: Content
+section: components
+---
+
+## Usage
+
+Content can be used anywhere in your designs and can take on different formats. Read [PatternFly’s typography page](/design-foundations/typography) for more guidelines on how to use content in your UIs, and the different styles available.

packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/colors-grid.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, GridItem, Flex, FlexItem, Text } from '@patternfly/react-core';
+import { Grid, GridItem, Flex, FlexItem, Content } from '@patternfly/react-core';
 import '@patternfly/patternfly/patternfly-charts.css';
 
 const colorFamilies = [
@@ -41,7 +41,7 @@ const ColorFamily = ({color, computedStyles}) => {
 
   return (
     <GridItem>
-      <Text className="ws-heading ws-title" component="h3">{color} family</Text>
+      <Content className="ws-heading ws-title" component="h3">{color} family</Content>
       <Flex direction={{ default: 'column' }}  gap={{ default: 'gapMd' }}>
         {entries}
       </Flex>