feat(Text): Convert Text to TypeScript

packages/patternfly-4/react-core/src/components/Text/Text.md

@@ -1,6 +1,7 @@
 ---
 title: 'Text'
 cssPrefix: 'pf-c-content'
+typescript: true
 ---
 
 import {

packages/patternfly-4/react-core/src/components/Text/Text.test.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import TextContent from './TextContent';
-import Text, { TextVariants } from './Text';
-import TextList, { TextListVariants } from './TextList';
-import TextListItem, { TextListItemVariants } from './TextListItem';
+import { TextContent } from './TextContent';
+import { Text, TextVariants } from './Text';
+import { TextList, TextListVariants } from './TextList';
+import { TextListItem, TextListItemVariants } from './TextListItem';
 
 test('Text example should match snapshot', () => {
   const view = mount(

packages/patternfly-4/react-core/src/components/Text/Text.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+
+export enum TextVariants {
+  h1 = 'h1',
+  h2 = 'h2',
+  h3 = 'h3',
+  h4 = 'h4',
+  h5 = 'h5',
+  h6 = 'h6',
+  p = 'p',
+  a = 'a',
+  small = 'small',
+  blockquote = 'blockquote',
+  pre = 'pre'
+}
+
+export interface TextProps extends React.HTMLProps<HTMLElement> {
+  /** The text component */
+  component?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'a' | 'small' | 'blockquote' | 'pre';
+  /** Content rendered within the Text */
+  children?: React.ReactNode;
+  /** Additional classes added to the Text */
+  className?: string;
+}
+
+export const Text: React.FunctionComponent<TextProps> = ({
+  children = null,
+  className = '',
+  component = TextVariants.p,
+  ...props
+}: TextProps) => {
+  const Component: any = component;
+
+  return (
+    <Component {...props} data-pf-content className={css(className)}>
+      {children}
+    </Component>
+  );
+}

packages/patternfly-4/react-core/src/components/Text/TextContent.js → packages/patternfly-4/react-core/src/components/Text/TextContent.tsx

@@ -1,34 +1,25 @@
-import React from 'react';
+import * as React from 'react';
 import styles from '@patternfly/patternfly/components/Content/content.css';
 import { StyleSheet, css } from '@patternfly/react-styles';
-import PropTypes from 'prop-types';
 
-const propTypes = {
+export interface TextContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered within the TextContent */
-  children: PropTypes.node,
+  children?: React.ReactNode;
   /** Additional classes added to the TextContent */
-  className: PropTypes.string,
-  /** Additional props are spread to the container <div> */
-  '': PropTypes.any
-};
-
-const defaultProps = {
-  children: null,
-  className: ''
-};
+  className?: string;
+}
 
 // Get the stylesheet and make it more specific by appending [data-pf-content] attribute to selectors
 // This way even if other components are nested within the TextContent, their text styling will not be affected
 const moreSpecificStyles = styles.raw.replace(/(.pf-c-content\s[a-zA-Z0-9]+)/g, '$1[data-pf-content]');
 const updatedStyles = StyleSheet.parse(moreSpecificStyles);
 
-const TextContent = ({ children, className, ...props }) => (
+export const TextContent: React.FunctionComponent<TextContentProps> = ({
+  children = null,
+  className = '',
+  ...props
+}: TextContentProps) => (
   <div {...props} className={css(updatedStyles.content, className)}>
     {children}
   </div>
 );
-
-TextContent.propTypes = propTypes;
-TextContent.defaultProps = defaultProps;
-
-export default TextContent;

packages/patternfly-4/react-core/src/components/Text/TextList.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+
+export enum TextListVariants {
+  ul = 'ul',
+  ol = 'ol',
+  dl = 'dl'
+}
+
+export interface TextListProps extends React.HTMLProps<HTMLElement> {
+  /** Content rendered within the TextList */
+  children?: React.ReactNode;
+  /** Additional classes added to the TextList */
+  className?: string;
+  /** The text list component */
+  component?: 'ul' | 'ol' | 'dl';
+}
+
+export const TextList: React.FunctionComponent<TextListProps> = ({
+  children = null,
+  className = '',
+  component = TextListVariants.ul,
+  ...props
+}: TextListProps) => {
+  const Component: any = component;
+
+  return (
+    <Component {...props} data-pf-content className={css(className)}>
+      {children}
+    </Component>
+  );
+}

packages/patternfly-4/react-core/src/components/Text/TextListItem.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import { OneOf } from '../../helpers/typeUtils';
+
+export enum TextListItemVariants {
+  li = 'li',
+  dt = 'dt',
+  dd = 'dd'
+}
+
+export interface TextListItemProps extends React.HTMLProps<HTMLElement> {
+  /** Content rendered within the TextListItem */
+  children?: React.ReactNode;
+  /** Additional classes added to the TextListItem */
+  className?: string;
+  /** The text list item component */
+  component?: 'li' | 'dt' | 'dd';
+}
+
+export const TextListItem: React.FunctionComponent<TextListItemProps> = ({
+  children = null,
+  className = '',
+  component = TextListItemVariants.li,
+  ...props
+}: TextListItemProps) => {
+  const Component: any = component;
+
+  return (
+    <Component {...props} data-pf-content className={css(className)}>
+      {children}
+    </Component>
+  );
+}