@patternfly/react-core 4.242.0 → 4.242.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.242.1 (2022-09-21)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 # [4.242.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.241.4...@patternfly/react-core@4.242.0) (2022-09-21)
 
 

package/dist/umd/react-core.min.css

@@ -26189,6 +26189,75 @@ label.pf-c-tree-view__node-text {
     --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
   }
 }
+.pf-l-gallery {
+  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
+  --pf-l-gallery--GridTemplateColumns--min: 250px;
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--max: 1fr;
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
+  --pf-l-gallery--GridTemplateRows: auto;
+  display: grid;
+  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
+  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+}
+
+.pf-l-gallery.pf-m-gutter {
+  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
+}
+
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
+  }
+}
 .pf-l-grid {
   --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
   --pf-l-grid__item--GridColumnStart: auto;
@@ -27449,75 +27518,6 @@ label.pf-c-tree-view__node-text {
   margin-bottom: var(--pf-l-stack--m-gutter--MarginBottom);
 }
 
-.pf-l-gallery {
-  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
-  --pf-l-gallery--GridTemplateColumns--min: 250px;
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--max: 1fr;
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
-  --pf-l-gallery--GridTemplateRows: auto;
-  display: grid;
-  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
-  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-}
-
-.pf-l-gallery.pf-m-gutter {
-  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
-}
-
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
-  }
-}
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
-  }
-}
 .pf-c-alert-group {
   --pf-c-alert-group__item--MarginTop: var(--pf-global--spacer--sm);
   --pf-c-alert-group--m-toast--Top: var(--pf-global--spacer--2xl);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.242.0",
+  "version": "4.242.1",
   "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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "aacd4fd4e0c5b623fe98ddb5962efbb98c348465"
+  "gitHead": "348ba42ca2bc97042feb569b1427f38e5b4afbb1"
 }

package/src/components/Text/examples/Text.md

@@ -9,201 +9,32 @@ propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem']
 
 ### Headings
 
-```js
-import React from 'react';
-import {
-  TextContent,
-  Text,
-  TextVariants,
-  TextList,
-  TextListVariants,
-  TextListItem,
-  TextListItemVariants
-} from '@patternfly/react-core';
-
-<TextContent>
-  <Text component={TextVariants.h1}>Hello World</Text>
-  <Text component={TextVariants.h2}>Second level</Text>
-  <Text component={TextVariants.h3}>Third level</Text>
-  <Text component={TextVariants.h4}>Fourth level</Text>
-  <Text component={TextVariants.h5}>Fifth level</Text>
-  <Text component={TextVariants.h6}>Sixth level</Text>
-</TextContent>;
+```ts file="./TextHeadings.tsx"
 ```
 
 ### Body
 
-```js
-import React from 'react';
-import {
-  TextContent,
-  Text,
-  TextVariants,
-  TextList,
-  TextListVariants,
-  TextListItem,
-  TextListItemVariants
-} from '@patternfly/react-core';
-
-<TextContent>
-  <Text component={TextVariants.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}>
-    Quisque ante lacus, malesuada ac auctor vitae, congue{' '}
-    <Text component={TextVariants.a} href="#">
-      non ante
-    </Text>
-    . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
-  </Text>
-  <Text component={TextVariants.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>
-</TextContent>;
+```ts file="./TextBody.tsx"
 ```
 
 Text components such as Text, TextList, TextListItem need to be placed within a TextContent
 
 ### Unordered list
 
-```js
-import React from 'react';
-import {
-  TextContent,
-  Text,
-  TextVariants,
-  TextList,
-  TextListVariants,
-  TextListItem,
-  TextListItemVariants
-} from '@patternfly/react-core';
-
-<TextContent>
-  <TextList>
-    <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
-    <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
-    <TextListItem>
-      Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
-      <TextList>
-        <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
-        <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
-      </TextList>
-    </TextListItem>
-    <TextListItem>Ut non enim metus.</TextListItem>
-  </TextList>
-</TextContent>;
+```ts file="./TextUnorderedList.tsx"
 ```
 
 ### Ordered list
 
-```js
-import React from 'react';
-import {
-  TextContent,
-  Text,
-  TextVariants,
-  TextList,
-  TextListVariants,
-  TextListItem,
-  TextListItemVariants
-} from '@patternfly/react-core';
-
-<TextContent>
-  <TextList component={TextListVariants.ol}>
-    <TextListItem>Donec blandit a lorem id convallis.</TextListItem>
-    <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>
-    <TextListItem>Integer in volutpat libero.</TextListItem>
-    <TextListItem>Donec a diam tellus.</TextListItem>
-    <TextListItem>Aenean nec tortor orci.</TextListItem>
-    <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
-    <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
-  </TextList>
-</TextContent>;
+```ts file="./TextOrderedList.tsx"
 ```
 
 ### Description list
 
-```js
-import React from 'react';
-import {
-  TextContent,
-  Text,
-  TextVariants,
-  TextList,
-  TextListVariants,
-  TextListItem,
-  TextListItemVariants
-} from '@patternfly/react-core';
-
-<TextContent>
-  <TextList component={TextListVariants.dl}>
-    <TextListItem component={TextListItemVariants.dt}>Web</TextListItem>
-    <TextListItem component={TextListItemVariants.dd}>
-      The part of the Internet that contains websites and web pages
-    </TextListItem>
-    <TextListItem component={TextListItemVariants.dt}>HTML</TextListItem>
-    <TextListItem component={TextListItemVariants.dd}>A markup language for creating web pages</TextListItem>
-    <TextListItem component={TextListItemVariants.dt}>CSS</TextListItem>
-    <TextListItem component={TextListItemVariants.dd}>A technology to make HTML look better</TextListItem>
-  </TextList>
-</TextContent>;
+```ts file="./TextDescriptionList.tsx"
 ```
 
 ### Visited
 
-```js
-import React from 'react';
-import {
-  TextContent,
-  Text,
-  TextVariants
-} from '@patternfly/react-core';
-
-TextVisited = () => {
-  return (
-    <>
-      <TextContent>
-        <Text component={TextVariants.h3}>Visited link example</Text>
-        <Text component={TextVariants.p}>
-          <Text 
-            component={TextVariants.a} 
-            isVisitedLink
-            href="#">
-            Visited link
-          </Text>
-        </Text>
-      </TextContent>
-      <br />
-      <TextContent isVisited>
-        <Text component={TextVariants.h3}>Visited content example</Text>
-        <Text component={TextVariants.p}>
-          <Text 
-            component={TextVariants.a} 
-            href="#">
-            content link 1
-          </Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          <Text 
-            component={TextVariants.a} 
-            href="#">
-            content link 2
-          </Text>
-        </Text>
-        <Text component={TextVariants.p}>
-          <Text 
-            component={TextVariants.a} 
-            href="#">
-            content link 3
-          </Text>
-        </Text>
-      </TextContent>
-    </>
-  );
-
-};
+```ts file="./TextVisited.tsx"
 ```

package/src/components/Text/examples/TextBody.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { TextContent, Text, TextVariants } from '@patternfly/react-core';
+
+export const TextBody: React.FunctionComponent = () => (
+  <TextContent>
+    <Text component={TextVariants.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}>
+      Quisque ante lacus, malesuada ac auctor vitae, congue{' '}
+      <Text component={TextVariants.a} href="#">
+        non ante
+      </Text>
+      . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
+    </Text>
+    <Text component={TextVariants.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>
+  </TextContent>
+);

package/src/components/Text/examples/TextDescriptionList.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TextContent, TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core';
+
+export const TextDescriptionList: React.FunctionComponent = () => (
+  <TextContent>
+    <TextList component={TextListVariants.dl}>
+      <TextListItem component={TextListItemVariants.dt}>Web</TextListItem>
+      <TextListItem component={TextListItemVariants.dd}>
+        The part of the Internet that contains websites and web pages
+      </TextListItem>
+      <TextListItem component={TextListItemVariants.dt}>HTML</TextListItem>
+      <TextListItem component={TextListItemVariants.dd}>A markup language for creating web pages</TextListItem>
+      <TextListItem component={TextListItemVariants.dt}>CSS</TextListItem>
+      <TextListItem component={TextListItemVariants.dd}>A technology to make HTML look better</TextListItem>
+    </TextList>
+  </TextContent>
+);

package/src/components/Text/examples/TextHeadings.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TextContent, Text, TextVariants } from '@patternfly/react-core';
+
+export const TextHeadings: React.FunctionComponent = () => (
+  <TextContent>
+    <Text component={TextVariants.h1}>Hello World</Text>
+    <Text component={TextVariants.h2}>Second level</Text>
+    <Text component={TextVariants.h3}>Third level</Text>
+    <Text component={TextVariants.h4}>Fourth level</Text>
+    <Text component={TextVariants.h5}>Fifth level</Text>
+    <Text component={TextVariants.h6}>Sixth level</Text>
+  </TextContent>
+);

package/src/components/Text/examples/TextOrderedList.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
+
+export const TextOrderedList: React.FunctionComponent = () => (
+  <TextContent>
+    <TextList component={TextListVariants.ol}>
+      <TextListItem>Donec blandit a lorem id convallis.</TextListItem>
+      <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>
+      <TextListItem>Integer in volutpat libero.</TextListItem>
+      <TextListItem>Donec a diam tellus.</TextListItem>
+      <TextListItem>Aenean nec tortor orci.</TextListItem>
+      <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
+      <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
+    </TextList>
+  </TextContent>
+);

package/src/components/Text/examples/TextUnorderedList.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TextContent, TextList, TextListItem } from '@patternfly/react-core';
+
+export const TextUnorderedList: React.FunctionComponent = () => (
+  <TextContent>
+    <TextList>
+      <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
+      <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
+      <TextListItem>
+        Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
+        <TextList>
+          <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
+          <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
+        </TextList>
+      </TextListItem>
+      <TextListItem>Ut non enim metus.</TextListItem>
+    </TextList>
+  </TextContent>
+);

package/src/components/Text/examples/TextVisited.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { TextContent, Text, TextVariants } from '@patternfly/react-core';
+
+export const TextVisited: React.FunctionComponent = () => (
+  <>
+    <TextContent>
+      <Text component={TextVariants.h3}>Visited link example</Text>
+      <Text component={TextVariants.p}>
+        <Text component={TextVariants.a} isVisitedLink href="#">
+          Visited link
+        </Text>
+      </Text>
+    </TextContent>
+    <br />
+    <TextContent isVisited>
+      <Text component={TextVariants.h3}>Visited content example</Text>
+      <Text component={TextVariants.p}>
+        <Text component={TextVariants.a} href="#">
+          content link 1
+        </Text>
+      </Text>
+      <Text component={TextVariants.p}>
+        <Text component={TextVariants.a} href="#">
+          content link 2
+        </Text>
+      </Text>
+      <Text component={TextVariants.p}>
+        <Text component={TextVariants.a} href="#">
+          content link 3
+        </Text>
+      </Text>
+    </TextContent>
+  </>
+);