diff --git a/packages/react-core/src/components/HelperText/examples/HelperText.md b/packages/react-core/src/components/HelperText/examples/HelperText.md
index 4c4331a2d46..e0b9b165d1c 100644
--- a/packages/react-core/src/components/HelperText/examples/HelperText.md
+++ b/packages/react-core/src/components/HelperText/examples/HelperText.md
@@ -15,177 +15,30 @@ import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-
### Static
-```js
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-
-
-
- This is default helper text
-
-
- This is indeterminate helper text
-
-
- This is warning helper text
-
-
- This is success helper text
-
-
- This is error helper text
-
-;
+```ts file="HelperTextStatic.tsx"
```
### Static with default icons
-```js
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
-import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-
-
-
- This is default helper text
-
-
-
- This is indeterminate helper text
-
-
-
-
- This is warning helper text
-
-
-
-
- This is success helper text
-
-
-
-
- This is error helper text
-
-
-;
+```ts file="HelperTextStaticWithDefaultIcon.tsx"
```
### Static with custom icons
-```js
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
-import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
-import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-
-
-
- }>This is default helper text
-
-
- }>
- This is indeterminate helper text
-
-
-
- }>
- This is warning helper text
-
-
-
- }>
- This is success helper text
-
-
-
- }>
- This is error helper text
-
-
-;
+```ts file="HelperTextStaticWithCustomIcon.tsx"
```
### Multiple static
-```js
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-
-
- This is default helper text
- This is another default helper text in the same block
- And this is more default text in the same block
-;
+```ts file="HelperTextMultipleStatic.tsx"
```
### Dynamic
-```js
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-
-
-
- This is default helper text
-
-
-
- This is indeterminate helper text
-
-
-
-
- This is warning helper text
-
-
-
-
- This is success helper text
-
-
-
-
- This is error helper text
-
-
-
- }>
- This is error helper text with a custom icon
-
-
-
-
- This is error helper text with no icon
-
-
-;
+```ts file="HelperTextDynamic.tsx"
```
### Dynamic list
-```js
-import React from 'react';
-import { HelperText, HelperTextItem } from '@patternfly/react-core';
-
-
-
- Must be at least 14 characters
-
-
- Cannot contain any variation of the word "redhat"
-
-
- Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
-
-;
+```ts file="HelperTextDynamicList.tsx"
```
diff --git a/packages/react-core/src/components/HelperText/examples/HelperTextDynamic.tsx b/packages/react-core/src/components/HelperText/examples/HelperTextDynamic.tsx
new file mode 100644
index 00000000000..23791753dce
--- /dev/null
+++ b/packages/react-core/src/components/HelperText/examples/HelperTextDynamic.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export const HelperTextDynamic: React.FunctionComponent = () => (
+
+
+ This is default helper text
+
+
+
+ This is indeterminate helper text
+
+
+
+
+ This is warning helper text
+
+
+
+
+ This is success helper text
+
+
+
+
+ This is error helper text
+
+
+
+ }>
+ This is error helper text with a custom icon
+
+
+
+
+ This is error helper text with no icon
+
+
+
+);
diff --git a/packages/react-core/src/components/HelperText/examples/HelperTextDynamicList.tsx b/packages/react-core/src/components/HelperText/examples/HelperTextDynamicList.tsx
new file mode 100644
index 00000000000..adf3941c412
--- /dev/null
+++ b/packages/react-core/src/components/HelperText/examples/HelperTextDynamicList.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextDynamicList: React.FunctionComponent = () => (
+
+
+ Must be at least 14 characters
+
+
+ Cannot contain any variation of the word "redhat"
+
+
+ Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols
+
+
+);
diff --git a/packages/react-core/src/components/HelperText/examples/HelperTextMultipleStatic.tsx b/packages/react-core/src/components/HelperText/examples/HelperTextMultipleStatic.tsx
new file mode 100644
index 00000000000..e9f8e07c5c2
--- /dev/null
+++ b/packages/react-core/src/components/HelperText/examples/HelperTextMultipleStatic.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextMultipleStatic: React.FunctionComponent = () => (
+
+ This is default helper text
+ This is another default helper text in the same block
+ And this is more default text in the same block
+
+);
diff --git a/packages/react-core/src/components/HelperText/examples/HelperTextStatic.tsx b/packages/react-core/src/components/HelperText/examples/HelperTextStatic.tsx
new file mode 100644
index 00000000000..f7b68670707
--- /dev/null
+++ b/packages/react-core/src/components/HelperText/examples/HelperTextStatic.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextStatic: React.FunctionComponent = () => (
+
+
+ This is default helper text
+
+
+ This is indeterminate helper text
+
+
+ This is warning helper text
+
+
+ This is success helper text
+
+
+ This is error helper text
+
+
+);
diff --git a/packages/react-core/src/components/HelperText/examples/HelperTextStaticWithCustomIcon.tsx b/packages/react-core/src/components/HelperText/examples/HelperTextStaticWithCustomIcon.tsx
new file mode 100644
index 00000000000..3e93d8646de
--- /dev/null
+++ b/packages/react-core/src/components/HelperText/examples/HelperTextStaticWithCustomIcon.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
+import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
+import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export const HelperTextStaticWithCustomIcon: React.FunctionComponent = () => (
+
+
+ }>This is default helper text
+
+
+ }>
+ This is indeterminate helper text
+
+
+
+ }>
+ This is warning helper text
+
+
+
+ }>
+ This is success helper text
+
+
+
+ }>
+ This is error helper text
+
+
+
+);
diff --git a/packages/react-core/src/components/HelperText/examples/HelperTextStaticWithDefaultIcon.tsx b/packages/react-core/src/components/HelperText/examples/HelperTextStaticWithDefaultIcon.tsx
new file mode 100644
index 00000000000..da1b3a6a731
--- /dev/null
+++ b/packages/react-core/src/components/HelperText/examples/HelperTextStaticWithDefaultIcon.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextStaticWithDefaultIcon: React.FunctionComponent = () => (
+
+
+ This is default helper text
+
+
+
+ This is indeterminate helper text
+
+
+
+
+ This is warning helper text
+
+
+
+
+ This is success helper text
+
+
+
+
+ This is error helper text
+
+
+
+);