From c09ece9acfcb616ddebd2b93e7c257bd682df85e Mon Sep 17 00:00:00 2001
From: Ashik Meerankutty <ashik9591@gmail.com>
Date: Tue, 14 Jul 2020 23:51:59 +0530
Subject: [PATCH] [EuiStat] Allow customizing the render of the title and
 description HTML tags (#3693)

* Add titleElement and descriptionElement to EuiStat

* Updated snapshots

* Updated changelog

* Fixed issue with screenreader

* Updated snapshots

* Use screen reader only if title and description is a string

* updated snapshots

* Merge remote-tracking branch 'upstream/master' into fix/stat

* Fixed typo in changelod

* removed titleChildren

* titlechildren as variable

* Update CHANGELOG.md

Remove an extra line left over from a merge resolution

Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
---
 CHANGELOG.md                                  |  1 +
 .../stat/__snapshots__/stat.test.tsx.snap     | 49 +++++++++++++++++++
 src/components/stat/stat.test.tsx             | 25 ++++++++++
 src/components/stat/stat.tsx                  | 36 +++++++++++---
 4 files changed, 105 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4af6dd7741b..8c9be4e6973 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `titleElement` and `descriptionElement` props to `EuiStat` ([#3693](https://github.com/elastic/eui/pull/3693))
 - Updated `securityAnalyticsApp` app icon ([#3720](https://github.com/elastic/eui/pull/3720))
 - Removed `src/test` and `@types/enzyme` references from `eui.d.ts` ([#3715](https://github.com/elastic/eui/pull/3715))
 - Added `index.d.ts` file to `lib/test`  and `es/test` ([#3715](https://github.com/elastic/eui/pull/3715))
diff --git a/src/components/stat/__snapshots__/stat.test.tsx.snap b/src/components/stat/__snapshots__/stat.test.tsx.snap
index f837a4fce00..6f5d462139d 100644
--- a/src/components/stat/__snapshots__/stat.test.tsx.snap
+++ b/src/components/stat/__snapshots__/stat.test.tsx.snap
@@ -302,6 +302,55 @@ exports[`EuiStat props primary is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiStat props render with custom description element 1`] = `
+<div
+  class="euiStat euiStat--leftAligned"
+>
+  <div
+    class="euiText euiText--small euiStat__description"
+  >
+    <div
+      aria-hidden="true"
+    >
+      <div>
+        description
+      </div>
+    </div>
+  </div>
+  <p
+    aria-hidden="true"
+    class="euiTitle euiTitle--large euiStat__title"
+    style="color:#EB1919"
+  >
+    title
+  </p>
+</div>
+`;
+
+exports[`EuiStat props render with custom title element 1`] = `
+<div
+  class="euiStat euiStat--leftAligned"
+>
+  <div
+    class="euiText euiText--small euiStat__description"
+  >
+    <p
+      aria-hidden="true"
+    >
+      description
+    </p>
+  </div>
+  <div
+    aria-hidden="true"
+    class="euiTitle euiTitle--large euiStat__title"
+  >
+    <div>
+      title
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiStat props right is rendered 1`] = `
 <div
   class="euiStat euiStat--rightAligned"
diff --git a/src/components/stat/stat.test.tsx b/src/components/stat/stat.test.tsx
index 9eeb80c4064..1bb755171f9 100644
--- a/src/components/stat/stat.test.tsx
+++ b/src/components/stat/stat.test.tsx
@@ -89,6 +89,31 @@ describe('EuiStat', () => {
       expect(component).toMatchSnapshot();
     });
 
+    test('render with custom description element', () => {
+      const component = render(
+        <EuiStat
+          title="title"
+          description={<div>description</div>}
+          descriptionElement="div"
+          titleColor="#EB1919"
+        />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('render with custom title element', () => {
+      const component = render(
+        <EuiStat
+          title={<div>title</div>}
+          titleElement="div"
+          description="description"
+        />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
     TITLE_SIZES.forEach(size => {
       test(`${size} is rendered`, () => {
         const component = render(
diff --git a/src/components/stat/stat.tsx b/src/components/stat/stat.tsx
index 6bb93e6a322..7052340d490 100644
--- a/src/components/stat/stat.tsx
+++ b/src/components/stat/stat.tsx
@@ -22,6 +22,7 @@ import React, {
   HTMLAttributes,
   FunctionComponent,
   ReactNode,
+  createElement,
 } from 'react';
 import { CommonProps, keysOf } from '../common';
 import classNames from 'classnames';
@@ -82,6 +83,14 @@ export interface EuiStatProps {
    * Size of the title. See EuiTitle for options ('s', 'm', 'l'... etc)
    */
   titleSize?: EuiTitleSize;
+  /**
+   * HTML Element to be used for title
+   */
+  titleElement?: string;
+  /**
+   * HTML Element to be used for description
+   */
+  descriptionElement?: string;
 }
 
 export const EuiStat: FunctionComponent<
@@ -96,6 +105,8 @@ export const EuiStat: FunctionComponent<
   title,
   titleColor = 'default',
   titleSize = 'l',
+  titleElement = 'p',
+  descriptionElement = 'p',
   ...rest
 }) => {
   const classes = classNames(
@@ -112,21 +123,32 @@ export const EuiStat: FunctionComponent<
     }
   );
 
+  const commonProps = {
+    'aria-hidden': true,
+  };
+
   const descriptionDisplay = (
     <EuiText size="s" className="euiStat__description">
-      <p aria-hidden="true">{description}</p>
+      {createElement(descriptionElement, commonProps, description)}
     </EuiText>
   );
 
+  const titlePropsWithColor = {
+    'aria-hidden': true,
+    style: {
+      color: `${titleColor}`,
+    },
+  };
+
+  const titleChildren = isLoading ? '--' : title;
+
   const titleDisplay = isColorClass(titleColor) ? (
     <EuiTitle size={titleSize} className={titleClasses}>
-      <p aria-hidden="true">{isLoading ? '--' : title}</p>
+      {createElement(titleElement, commonProps, titleChildren)}
     </EuiTitle>
   ) : (
     <EuiTitle size={titleSize} className={titleClasses}>
-      <p aria-hidden="true" style={{ color: `${titleColor}` }}>
-        {isLoading ? '--' : title}
-      </p>
+      {createElement(titleElement, titlePropsWithColor, titleChildren)}
     </EuiTitle>
   );
 
@@ -149,7 +171,9 @@ export const EuiStat: FunctionComponent<
       {!reverse && descriptionDisplay}
       {titleDisplay}
       {reverse && descriptionDisplay}
-      {screenReader}
+      {typeof title === 'string' &&
+        typeof description === 'string' &&
+        screenReader}
     </Fragment>
   );