EuiTitle Converted to TS (#1810)

* `EuiTitle` Converted to TS

* `EuiTitle` exported `EuiTitleTextTransform`

* `EuiTitle` code review fix

* `EuiTitle` code review fix

* `EuiTitle` fixed exported idents and refactored `EuiTitleProps`

* `EuiTitle` fixed exported idents

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `9.9.1`.
+- Converted `EuiTitle` to TS ([#1810](https://github.com/elastic/eui/pull/1810))
 
 ## [`9.9.1`](https://github.com/elastic/eui/tree/v9.9.1)
 

src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.js.snap

@@ -10,7 +10,6 @@ exports[`EuiQuickSelect is rendered 1`] = `
     <EuiFlexItem>
       <EuiTitle
         size="xxxs"
-        textTransform="none"
       >
         <span>
           Quick select
@@ -201,7 +200,6 @@ exports[`EuiQuickSelect prevQuickSelect 1`] = `
     <EuiFlexItem>
       <EuiTitle
         size="xxxs"
-        textTransform="none"
       >
         <span>
           Quick select

src/components/empty_prompt/index.d.ts

@@ -1,6 +1,6 @@
 import { CommonProps, Omit } from '../common';
-import { IconColor, IconType } from '../icon'
-/// <reference path="../title/index.d.ts" />
+import { IconColor, IconType } from '../icon';
+import { EuiTitleSize } from '../title/title';
 
 import { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
 

src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap

@@ -17,7 +17,6 @@ exports[`EuiDescribedFormGroup is rendered 1`] = `
         className="euiDescribedFormGroup__title"
         id="generated-id-title"
         size="xs"
-        textTransform="none"
       >
         <h3>
           Title
@@ -65,7 +64,6 @@ exports[`EuiDescribedFormGroup props description is not rendered when it's not p
         className="euiDescribedFormGroup__title"
         id="generated-id-title"
         size="xs"
-        textTransform="none"
       >
         <h3>
           Title
@@ -105,7 +103,6 @@ exports[`EuiDescribedFormGroup props fullWidth is rendered 1`] = `
         className="euiDescribedFormGroup__title"
         id="generated-id-title"
         size="xs"
-        textTransform="none"
       >
         <h3>
           Title
@@ -154,7 +151,6 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = `
         className="euiDescribedFormGroup__title"
         id="generated-id-title"
         size="xs"
-        textTransform="none"
       >
         <h3>
           Title
@@ -203,7 +199,6 @@ exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = `
         className="euiDescribedFormGroup__title"
         id="generated-id-title"
         size="l"
-        textTransform="none"
       >
         <h3>
           Title
@@ -273,7 +268,6 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
               className="euiDescribedFormGroup__title"
               id="test-id-title"
               size="xs"
-              textTransform="none"
             >
               <h3
                 className="euiTitle euiTitle--xsmall euiDescribedFormGroup__title"

src/components/index.d.ts

@@ -29,7 +29,6 @@
 /// <reference path="./table/index.d.ts" />
 /// <reference path="./tabs/index.d.ts" />
 /// <reference path="./text/index.d.ts" />
-/// <reference path="./title/index.d.ts" />
 /// <reference path="./toast/index.d.ts" />
 /// <reference path="./tool_tip/index.d.ts" />
 

src/components/title/index.ts

@@ -0,0 +1 @@
+export { EuiTitle } from './title';

src/components/title/title.test.js → src/components/title/title.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
+import { requiredProps } from '../../test';
 
 import { EuiTitle } from './title';
 
@@ -12,7 +12,6 @@ describe('EuiTitle', () => {
       </EuiTitle>
     );
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });

src/components/title/title.tsx

@@ -0,0 +1,51 @@
+import React, { FunctionComponent, ReactElement } from 'react';
+import classNames from 'classnames';
+import { CommonProps, keysOf } from '../common';
+
+const titleSizeToClassNameMap = {
+  xxxs: 'euiTitle--xxxsmall',
+  xxs: 'euiTitle--xxsmall',
+  xs: 'euiTitle--xsmall',
+  s: 'euiTitle--small',
+  m: 'euiTitle--medium',
+  l: 'euiTitle--large',
+};
+
+export const TITLE_SIZES = keysOf(titleSizeToClassNameMap);
+export type EuiTitleSize = keyof typeof titleSizeToClassNameMap;
+
+const textTransformToClassNameMap = {
+  uppercase: 'euiTitle--uppercase',
+};
+
+export const TEXT_TRANSFORM = keysOf(textTransformToClassNameMap);
+export type EuiTitleTextTransform = keyof typeof textTransformToClassNameMap;
+
+export type EuiTitleProps = CommonProps & {
+  children: ReactElement<any>;
+  className?: string;
+  size?: EuiTitleSize;
+  textTransform?: EuiTitleTextTransform;
+};
+
+export const EuiTitle: FunctionComponent<EuiTitleProps> = ({
+  size = 'm',
+  children,
+  className,
+  textTransform,
+  ...rest
+}) => {
+  const classes = classNames(
+    'euiTitle',
+    titleSizeToClassNameMap[size],
+    textTransform ? textTransformToClassNameMap[textTransform] : undefined,
+    className
+  );
+
+  const props = {
+    className: classes,
+    ...rest,
+  };
+
+  return React.cloneElement(children, props);
+};