@patternfly/react-core 6.0.0-alpha.87 → 6.0.0-alpha.88

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.86","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.87","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.86","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.87","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.86","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.87","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.87",
+  "version": "6.0.0-alpha.88",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "8e897861592c3ee8b186f6aef3958741073312e7"
+  "gitHead": "18e869e654d317afd33701db8252d408690fbd62"
 }

package/src/components/AboutModal/examples/AboutModalBasic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import { AboutModal, Button, Content } from '@patternfly/react-core';
 import brandImg from '../../assets/PF-IconLogo.svg';
 
 export const AboutModalBasic: React.FunctionComponent = () => {
@@ -23,24 +23,24 @@ export const AboutModalBasic: React.FunctionComponent = () => {
         backgroundImageSrc="/assets/images/pf-background.svg"
         productName="name"
       >
-        <TextContent>
-          <TextList component="dl">
-            <TextListItem component="dt">CFME version</TextListItem>
-            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-            <TextListItem component="dt">Cloudforms Version</TextListItem>
-            <TextListItem component="dd">4.1</TextListItem>
-            <TextListItem component="dt">Server name</TextListItem>
-            <TextListItem component="dd">40DemoMaster</TextListItem>
-            <TextListItem component="dt">User name</TextListItem>
-            <TextListItem component="dd">Administrator</TextListItem>
-            <TextListItem component="dt">User role</TextListItem>
-            <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-            <TextListItem component="dt">Browser version</TextListItem>
-            <TextListItem component="dd">601.2</TextListItem>
-            <TextListItem component="dt">Browser OS</TextListItem>
-            <TextListItem component="dd">Mac</TextListItem>
-          </TextList>
-        </TextContent>
+        <Content>
+          <dl>
+            <dt>CFME version</dt>
+            <dd>5.5.3.4.20102789036450</dd>
+            <dt>Cloudforms Version</dt>
+            <dd>4.1</dd>
+            <dt>Server name</dt>
+            <dd>40DemoMaster</dd>
+            <dt>User name</dt>
+            <dd>Administrator</dd>
+            <dt>User role</dt>
+            <dd>EvmRole-super_administrator</dd>
+            <dt>Browser version</dt>
+            <dd>601.2</dd>
+            <dt>Browser OS</dt>
+            <dd>Mac</dd>
+          </dl>
+        </Content>
       </AboutModal>
     </React.Fragment>
   );

package/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AboutModal, Alert, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import { AboutModal, Alert, Button, Content } from '@patternfly/react-core';
 import brandImg from '../../assets/PF-IconLogo.svg';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
@@ -25,29 +25,29 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
         hasNoContentContainer={true}
         productName="Product name"
       >
-        <TextContent id="test1" className={spacing.pyXl}>
+        <Content id="test1" className={spacing.pyXl}>
           <h4>About</h4>
           <p>Content here</p>
-        </TextContent>
+        </Content>
         <Alert variant="info" title="Updates available" />
-        <TextContent id="test2" className={spacing.pyXl}>
-          <TextList component="dl">
-            <TextListItem component="dt">CFME version</TextListItem>
-            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-            <TextListItem component="dt">Cloudforms version</TextListItem>
-            <TextListItem component="dd">4.1</TextListItem>
-            <TextListItem component="dt">Server name</TextListItem>
-            <TextListItem component="dd">40DemoMaster</TextListItem>
-            <TextListItem component="dt">User name</TextListItem>
-            <TextListItem component="dd">Administrator</TextListItem>
-            <TextListItem component="dt">User role</TextListItem>
-            <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-            <TextListItem component="dt">Browser version</TextListItem>
-            <TextListItem component="dd">601.2</TextListItem>
-            <TextListItem component="dt">Browser OS</TextListItem>
-            <TextListItem component="dd">Mac</TextListItem>
-          </TextList>
-        </TextContent>
+        <Content id="test2" className={spacing.pyXl}>
+          <dl>
+            <dt>CFME version</dt>
+            <dd>5.5.3.4.20102789036450</dd>
+            <dt>Cloudforms version</dt>
+            <dd>4.1</dd>
+            <dt>Server name</dt>
+            <dd>40DemoMaster</dd>
+            <dt>User name</dt>
+            <dd>Administrator</dd>
+            <dt>User role</dt>
+            <dd>EvmRole-super_administrator</dd>
+            <dt>Browser version</dt>
+            <dd>601.2</dd>
+            <dt>Browser OS</dt>
+            <dd>Mac</dd>
+          </dl>
+        </Content>
       </AboutModal>
     </React.Fragment>
   );

package/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
+import { AboutModal, Button, Content } from '@patternfly/react-core';
 import brandImg from '../../assets/PF-IconLogo.svg';
 
 export const AboutModalWithoutProductName: React.FunctionComponent = () => {
@@ -23,24 +23,24 @@ export const AboutModalWithoutProductName: React.FunctionComponent = () => {
         backgroundImageSrc="/assets/images/pf-background.svg"
         aria-label="No product name about modal"
       >
-        <TextContent>
-          <TextList component="dl">
-            <TextListItem component="dt">CFME version</TextListItem>
-            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-            <TextListItem component="dt">Cloudforms version</TextListItem>
-            <TextListItem component="dd">4.1</TextListItem>
-            <TextListItem component="dt">Server name</TextListItem>
-            <TextListItem component="dd">40DemoMaster</TextListItem>
-            <TextListItem component="dt">User name</TextListItem>
-            <TextListItem component="dd">Administrator</TextListItem>
-            <TextListItem component="dt">User role</TextListItem>
-            <TextListItem component="dd">EvmRole-super_administrator</TextListItem>
-            <TextListItem component="dt">Browser version</TextListItem>
-            <TextListItem component="dd">601.2</TextListItem>
-            <TextListItem component="dt">Browser OS</TextListItem>
-            <TextListItem component="dd">Mac</TextListItem>
-          </TextList>
-        </TextContent>
+        <Content>
+          <dl>
+            <dt>CFME version</dt>
+            <dd>5.5.3.4.20102789036450</dd>
+            <dt>Cloudforms version</dt>
+            <dd>4.1</dd>
+            <dt>Server name</dt>
+            <dd>40DemoMaster</dd>
+            <dt>User name</dt>
+            <dd>Administrator</dd>
+            <dt>User role</dt>
+            <dd>EvmRole-super_administrator</dd>
+            <dt>Browser version</dt>
+            <dd>601.2</dd>
+            <dt>Browser OS</dt>
+            <dd>Mac</dd>
+          </dl>
+        </Content>
       </AboutModal>
     </React.Fragment>
   );

package/src/components/Content/Content.tsx

@@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Content/content';
 import { useOUIAProps, OUIAProps } from '../../helpers';
 
-export enum TextVariants {
+export enum ContentVariants {
   h1 = 'h1',
   h2 = 'h2',
   h3 = 'h3',
@@ -24,7 +24,7 @@ export enum TextVariants {
   dd = 'dd'
 }
 
-export interface TextProps extends React.HTMLProps<HTMLElement>, OUIAProps {
+export interface ContentProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   /** The content component. If none provided, it will be a 'div' and styling will be applied to all its child components. */
   component?:
     | 'h1'
@@ -81,7 +81,7 @@ const componentStyles = {
   dd: styles.contentDd
 };
 
-export const Text: React.FunctionComponent<TextProps> = ({
+export const Content: React.FunctionComponent<ContentProps> = ({
   children,
   className = '',
   component,
@@ -90,10 +90,10 @@ export const Text: React.FunctionComponent<TextProps> = ({
   ouiaId,
   ouiaSafe = true,
   ...props
-}: TextProps) => {
+}: ContentProps) => {
   const wrappingComponent = component ?? 'div';
   const Component: any = wrappingComponent;
-  const ouiaProps = useOUIAProps(Text.displayName, ouiaId, ouiaSafe);
+  const ouiaProps = useOUIAProps(Content.displayName, ouiaId, ouiaSafe);
 
   const isList = ['ul', 'ol', 'dl'].includes(wrappingComponent);
 
@@ -113,4 +113,4 @@ export const Text: React.FunctionComponent<TextProps> = ({
     </Component>
   );
 };
-Text.displayName = 'Text';
+Content.displayName = 'Content';

package/src/components/Content/__tests__/Content.test.tsx

@@ -1,96 +1,270 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Text } from '../Content';
+import { Content } from '../Content';
+import styles from '@patternfly/react-styles/css/components/Content/content';
 
 test('Renders without children', () => {
   render(
     <div data-testid="test-content">
-      <Text />
+      <Content />
     </div>
   );
   expect(screen.getByTestId('test-content').firstChild).toBeVisible();
 });
 
 test('Renders children', () => {
-  render(<Text>Test</Text>);
+  render(<Content>Test</Content>);
   expect(screen.getByText('Test')).toBeVisible();
 });
 
 test('Renders with custom class name when className prop is provided', () => {
-  render(<Text className="custom-class">Test</Text>);
+  render(<Content className="custom-class">Test</Content>);
   expect(screen.getByText('Test')).toHaveClass('custom-class');
 });
 
 test('Renders as "div" element by default', () => {
-  render(<Text>Test</Text>);
+  render(<Content>Test</Content>);
   expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DIV');
 });
 
 test('Renders as "h1" element when component="h1"', () => {
-  render(<Text component="h1">Test</Text>);
+  render(<Content component="h1">Test</Content>);
   expect(screen.getByRole('heading', { level: 1 })).toBeVisible();
 });
 
 test('Renders as "h2" element when component="h2"', () => {
-  render(<Text component="h2">Test</Text>);
+  render(<Content component="h2">Test</Content>);
   expect(screen.getByRole('heading', { level: 2 })).toBeVisible();
 });
 
 test('Renders as "h3" element when component="h3"', () => {
-  render(<Text component="h3">Test</Text>);
+  render(<Content component="h3">Test</Content>);
   expect(screen.getByRole('heading', { level: 3 })).toBeVisible();
 });
 
 test('Renders as "h4" element when component="h4"', () => {
-  render(<Text component="h4">Test</Text>);
+  render(<Content component="h4">Test</Content>);
   expect(screen.getByRole('heading', { level: 4 })).toBeVisible();
 });
 
 test('Renders as "h5" element when component="h5"', () => {
-  render(<Text component="h5">Test</Text>);
+  render(<Content component="h5">Test</Content>);
   expect(screen.getByRole('heading', { level: 5 })).toBeVisible();
 });
 
 test('Renders as "h6" element when component="h6"', () => {
-  render(<Text component="h6">Test</Text>);
+  render(<Content component="h6">Test</Content>);
   expect(screen.getByRole('heading', { level: 6 })).toBeVisible();
 });
 
 test('Renders as "a" element when component="a"', () => {
-  render(<Text component="a">Test</Text>);
+  render(<Content component="a">Test</Content>);
   expect(screen.getByText('Test')).toHaveProperty('nodeName', 'A');
 });
 
 test('Renders as "blockquote" element when component="blockquote"', () => {
-  render(<Text component="blockquote">Test</Text>);
+  render(<Content component="blockquote">Test</Content>);
   expect(screen.getByText('Test')).toHaveProperty('nodeName', 'BLOCKQUOTE');
 });
 
 test('Renders as "pre" element when component="pre"', () => {
-  render(<Text component="pre">Test</Text>);
+  render(<Content component="pre">Test</Content>);
   expect(screen.getByText('Test')).toHaveProperty('nodeName', 'PRE');
 });
 
+test('Renders as "hr" element when component="hr"', () => {
+  render(<Content component="hr" />);
+  expect(screen.getByRole('separator')).toHaveProperty('nodeName', 'HR');
+});
+
+test('Renders as "ul" element component="ul"', () => {
+  render(<Content component="ul">Test</Content>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'UL');
+});
+
+test('Renders as "ol" element when component="ol"', () => {
+  render(<Content component="ol">Test</Content>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'OL');
+});
+
+test('Renders as "dl" element when component="dl"', () => {
+  render(<Content component="dl">Test</Content>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DL');
+});
+
+test('Renders as "li" element when component="li"', () => {
+  render(<Content component="li">Test</Content>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'LI');
+});
+
+test('Renders as "dt" element when component="dt"', () => {
+  render(<Content component="dt">Test</Content>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DT');
+});
+
+test('Renders as "dd" element when component="dd"', () => {
+  render(<Content component="dd">Test</Content>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DD');
+});
+
+test(`Renders with class name ${styles.contentH1} when component="h1"`, () => {
+  render(<Content component="h1">Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.contentH1);
+});
+
+test(`Renders with class name ${styles.contentH2} when component="h2"`, () => {
+  render(<Content component="h2">Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.contentH2);
+});
+
+test(`Renders with class name ${styles.contentH3} when component="h3"`, () => {
+  render(<Content component="h3">Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.contentH3);
+});
+
+test(`Renders with class name ${styles.contentH4} when component="h4"`, () => {
+  render(<Content component="h4">Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.contentH4);
+});
+
+test(`Renders with class name ${styles.contentH5} when component="h5"`, () => {
+  render(<Content component="h5">Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.contentH5);
+});
+
+test(`Renders with class name ${styles.contentH6} when component="h6"`, () => {
+  render(<Content component="h6">Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.contentH6);
+});
+
+test(`Renders with class name ${styles.contentP} when component="p"`, () => {
+  render(<Content component="p">Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.contentP);
+});
+
+test(`Renders with class name ${styles.contentA} when component="a"`, () => {
+  render(<Content component="a">Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.contentA);
+});
+
+test(`Renders with class name ${styles.contentSmall} when component="small"`, () => {
+  render(<Content component="small">Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.contentSmall);
+});
+
+test(`Renders with class name ${styles.contentBlockquote} when component="blockquote"`, () => {
+  render(<Content component="blockquote">Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.contentBlockquote);
+});
+
+test(`Renders with class name ${styles.contentPre} when component="pre"`, () => {
+  render(<Content component="pre">Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.contentPre);
+});
+
+test(`Renders with class name ${styles.contentHr} when component="hr"`, () => {
+  render(<Content component="hr" />);
+  expect(screen.getByRole('separator')).toHaveClass(styles.contentHr);
+});
+
+test(`Renders with class name ${styles.contentUl} when component="ul"`, () => {
+  render(<Content component="ul">Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.contentUl);
+});
+
+test(`Renders with class name ${styles.contentOl} when component="ol"`, () => {
+  render(<Content component="ol">Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.contentOl);
+});
+
+test(`Renders with class name ${styles.contentDl} when component="dl"`, () => {
+  render(<Content component="dl">Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.contentDl);
+});
+
+test(`Renders with class name ${styles.contentLi} when component="li"`, () => {
+  render(<Content component="li">Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.contentLi);
+});
+
+test(`Renders with class name ${styles.contentDt} when component="dt"`, () => {
+  render(<Content component="dt">Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.contentDt);
+});
+
+test(`Renders with class name ${styles.contentDd} when component="dd"`, () => {
+  render(<Content component="dd">Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.contentDd);
+});
+
+test(`Renders with class name ${styles.content} when no component prop is provided`, () => {
+  render(<Content>Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass(styles.content);
+});
+
+test(`Renders without class name ${styles.content} when component is provided`, () => {
+  render(<Content component="p">Test</Content>);
+  expect(screen.getByText('Test')).not.toHaveClass(styles.content);
+});
+
+test(`Renders with class name pf-m-plain when isPlainList=true and component is 'ul', 'ol' or 'dl'`, () => {
+  render(
+    <>
+      <Content component="ul" isPlainList>
+        Test1
+      </Content>
+      <Content component="ol" isPlainList>
+        Test2
+      </Content>
+      <Content component="dl" isPlainList>
+        Test3
+      </Content>
+    </>
+  );
+  expect(screen.getByText('Test1')).toHaveClass('pf-m-plain');
+  expect(screen.getByText('Test2')).toHaveClass('pf-m-plain');
+  expect(screen.getByText('Test3')).toHaveClass('pf-m-plain');
+});
+
+test(`Renders without class name pf-m-plain by default`, () => {
+  render(<Content component="ul">Test</Content>);
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-plain');
+});
+
+test(`Renders without class name pf-m-plain when isPlainList=true, but component is not 'ul', 'ol' or 'dl'`, () => {
+  render(
+    <Content component="p" isPlainList>
+      Test
+    </Content>
+  );
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-plain');
+});
+
 test('Renders without class name pf-m-visited by default', () => {
-  render(<Text>Test</Text>);
+  render(<Content>Test</Content>);
   expect(screen.getByText('Test')).not.toHaveClass('pf-m-visited');
 });
 
-test('Renders with class name pf-m-visited when isVisited=true and component="a"', () => {
+test('Renders with class name pf-m-visited when isVisitedLink=true', () => {
+  render(<Content isVisitedLink={true}>Test</Content>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-visited');
+});
+
+test('Renders with class name pf-m-visited when isVisitedLink=true and component="a"', () => {
   render(
-    <Text isVisitedLink={true} component="a">
+    <Content isVisitedLink={true} component="a">
       Test
-    </Text>
+    </Content>
   );
   expect(screen.getByText('Test')).toHaveClass('pf-m-visited');
 });
 
 test('Renders with inherited element props spread to the component', () => {
-  render(<Text aria-label="Test label">Test</Text>);
+  render(<Content aria-label="Test label">Test</Content>);
   expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
 });
 
 test('Matches the snapshot', () => {
-  const { asFragment } = render(<Text ouiaId="ouia-id">Test</Text>);
+  const { asFragment } = render(<Content ouiaId="ouia-id">Test</Content>);
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Content/__tests__/__snapshots__/Content.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Matches the snapshot 1`] = `
   <div
     class="pf-v6-c-content"
     data-ouia-component-id="ouia-id"
-    data-ouia-component-type="PF6/Text"
+    data-ouia-component-type="PF6/Content"
     data-ouia-safe="true"
     data-pf-content="true"
   >

package/src/components/Content/examples/Content.md

@@ -1,18 +1,26 @@
 ---
 id: Content
 section: components
-cssPrefix: pf-v5-c-content
-propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem']
+cssPrefix: pf-v6-c-content
+propComponents: ['Content']
 ---
 
-The `<Text>` component provides simple, built-in styling for putting common blocks of HTML elements together. It establishes the block of content and styling within it for the elements listed in the `component` property(`h1` through `h6`, `p`, `a`, `small`, `blockquote`, and `pre`), as well as the text component suite `<TextList>`, and `<TextListItem>`. `TextContent` may be used as a container for the text components, but nesting them inside `<TextContent>` is not required.
+The `<Content>` component allows you to establish a block of HTML content and apply simple, built-in styling. `<Content>` can be used for any element supported by the `component` property (including `h1` through `h6`, `hr`, `p`, `a`, `small`, `blockquote`, and `pre`).
 
-You cannot nest other components within `<Text>`, and doing so can cause styling overrides or other conflicts. Instead, you can use the `<Text>` component's properties to achieve the same results.
+You cannot nest other components within `<Content>`, and doing so can cause styling overrides or other conflicts. Instead, you can use the `<Content>` component's properties to achieve the same results.
 
-For example, rather than nesting the `<List>` and `<Title>` components within `<Text>`, you should pass `component="h1"` into the `<TextList>` and `<Text>` components. Similarly, when you need to add a divider , rather than passing in a separate `<Divider>` component, you should utilize the `hr` property that `<Text>` supports, which will be styled as a divider.
+For example, to create a level 1 heading, you should pass `component="h1"` to `<Content>`, instead of nesting a `<Title>` component within `<Content>`. Similarly, when you need to add a divider to a page, you should utilize the `hr` property of `<Content>` (which is styled as a divider), rather than using a separate `<Divider>` component.
 
 ## Examples
 
+HTML elements wrapped by `<Content>` are styled by the content component.
+
+### Content as a wrapper
+
+```ts file="./ContentWrapper.tsx"
+
+```
+
 ### Headings
 
 ```ts file="./ContentHeadings.tsx"
@@ -49,14 +57,6 @@ For example, rather than nesting the `<List>` and `<Title>` components within `<
 
 ```
 
-Text components such as Text, TextList, TextListItem can be placed within a TextContent to provide styling for html elements, and additional styling options applied to the children.
-
-### Wrapped in TextContent
-
-```ts file="./ContentWrapper.tsx"
-
-```
-
 ### Link and visited link
 
 ```ts file="./ContentVisited.tsx"

package/src/components/Content/examples/ContentBody.tsx

@@ -1,24 +1,26 @@
 import React from 'react';
-import { Text, TextVariants } from '@patternfly/react-core';
+import { Content, ContentVariants } from '@patternfly/react-core';
 
 export const ContentBody: React.FunctionComponent = () => (
   <>
-    <Text component={TextVariants.p}>
+    <Content component={ContentVariants.p}>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
       nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
       erat vel, interdum mattis neque. Sub works as well!
-    </Text>
-    <Text component={TextVariants.p}>
+    </Content>
+    <Content component={ContentVariants.p}>
       Quisque ante lacus, malesuada ac auctor vitae, congue{' '}
-      <Text component={TextVariants.a} href="#">
+      <Content component={ContentVariants.a} href="#">
         non ante
-      </Text>
+      </Content>
       . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
-    </Text>
-    <Text component={TextVariants.blockquote}>
+    </Content>
+    <Content component={ContentVariants.blockquote}>
       Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet
       turpis.
-    </Text>
-    <Text component={TextVariants.small}>Sometimes you need small text to display things like date created</Text>
+    </Content>
+    <Content component={ContentVariants.small}>
+      Sometimes you need small text to display things like date created
+    </Content>
   </>
 );