chore(Text): Convert examples to typescript

[XiangyuShen]

What: Closes #8000
Convert Text examples to TypeScript

Additional issues:

[patternfly-build]

Preview: https://patternfly-react-pr-8016.surge.sh

A11y report: https://patternfly-react-pr-8016-a11y.surge.sh

[gefgu]

@XiangyuShen nice job on this! I've did a similar pull request some days ago and the reviewers gave me a lot of tips. To best ensure that your first PR here gets merged, I would suggest these few things:

• You could rename the TypeScript examples to [componentName][exampleTitle] (eg. TextHeading.tsx instead of HeadingsText.tsx for the first example), because it is the format that is typically used. (See #7999 (comment))

• Also, there seems to be an error in the building of the docs: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <Fragment />. Did you accidentally export a JSX literal instead of a component?. (See it here: https://github.com/patternfly/patternfly-react/actions/runs/3091128266/jobs/5000881324#step:10:159). I'm not sure about what caused this error, but maybe exporting the examples as components following the same name convention of above can fix this problem. For this you could try something like this:

export const TextHeading: 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>
);

[XiangyuShen]

@gefgu Thank you very much for the feedback! Have implemented the changes. My first contribution to open source so thanks for helping.

[thatblindgeye]

This is looking good! One thing is that all of the other examples should have an export similar to the TextVisited.tsx file, i.e. export const TextBody: React.FunctionComponent... and so on.

[XiangyuShen]

@thatblindgeye Changes implemented! Thanks.

[thatblindgeye]

🎉 Thanks for making the updates!

[tlabaj]

Since the examples are using TextListVariants, I would add it to the documentation so it shows up in the props table. This can be done by adding it to the propComponents array on line 5 of this md file.

[XiangyuShen]

TextListVariants does not render in the props table when added. This is likely because it is just an enum in TextList.

[tlabaj]

@XiangyuShen you are correct! We do not currently have a way to document enums.

[tlabaj]

LGTM! Thanks

[patternfly-build]

Your changes have been released in:

• @patternfly/react-catalog-view-extension@4.92.6
• @patternfly/react-code-editor@4.82.6
• @patternfly/react-console@4.92.6
• @patternfly/react-core@4.242.1
• @patternfly/react-docs@5.102.7
• @patternfly/react-inline-edit-extension@4.86.6
• demo-app-ts@4.201.6
• @patternfly/react-log-viewer@4.87.1
• @patternfly/react-table@4.110.6
• @patternfly/react-topology@4.88.6
• @patternfly/react-virtualized-extension@4.88.6

Thanks for your contribution! 🎉