Convert EuiStat to TSX, add isLoading prop, add tests (#1848)

Adds an `isLoading` prop to `EuiStat`. Changes it to TS and adds a bunch of tests. Also fixes several accessibility issues.

CHANGELOG.md

@@ -1,5 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `EuiStat` to TS ([#1848](https://github.com/elastic/eui/pull/1848))
+- Added `isLoading` prop to `EuiStat` ([#1848](https://github.com/elastic/eui/pull/1848))
+
 **Bug fixes**
 
 - Fixed `EuiComboBox` to not pass its `inputRef` prop down to the DOM ([#1867](https://github.com/elastic/eui/pull/1867))

src-docs/src/views/stat/stat.js

@@ -12,7 +12,7 @@ export default () => (
       <EuiFlexItem>
         <EuiStat
           title="7,600 mm"
-          description="Total People"
+          description="Total people"
         />
       </EuiFlexItem>
     </EuiFlexGroup>

src-docs/src/views/stat/stat_combos.js

@@ -1,63 +1,93 @@
-import React from 'react';
+import React, {
+  Component,
+} from 'react';
 
 import {
   EuiStat,
   EuiFlexItem,
   EuiFlexGroup,
   EuiPanel,
   EuiIcon,
+  EuiSwitch,
+  EuiSpacer,
 } from '../../../../src/components';
 
-export default () => (
-  <div>
-    <EuiFlexGroup>
-      <EuiFlexItem>
-        <EuiPanel>
-          <EuiStat
-            title="8,888"
-            description="Total widgets"
-            textAlign="right"
-          >
-            <EuiIcon type="empty" />
-          </EuiStat>
-        </EuiPanel>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiPanel>
-          <EuiStat
-            title="2,000"
-            description="Pending widgets"
-            titleColor="accent"
-            textAlign="right"
-          >
-            <EuiIcon type="clock" color="accent" />
-          </EuiStat>
-        </EuiPanel>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiPanel>
-          <EuiStat
-            title="6,800"
-            description="Success widgets"
-            titleColor="secondary"
-            textAlign="right"
-          >
-            <EuiIcon type="check" color="secondary" />
-          </EuiStat>
-        </EuiPanel>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiPanel>
-          <EuiStat
-            title="88"
-            description="Error widgets"
-            titleColor="danger"
-            textAlign="right"
-          >
-            <EuiIcon type="alert" color="danger" />
-          </EuiStat>
-        </EuiPanel>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </div>
-);
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isLoading: false,
+    };
+  }
+
+  onToggleChange = (e) => {
+    this.setState({ isLoading: e.target.checked });
+  }
+
+  render() {
+    return (
+      <div>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiPanel>
+              <EuiStat
+                title="8,888"
+                description="Total widgets"
+                textAlign="right"
+                isLoading={this.state.isLoading}
+              >
+                <EuiIcon type="empty" />
+              </EuiStat>
+            </EuiPanel>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiPanel>
+              <EuiStat
+                title="2,000"
+                description="Pending widgets"
+                titleColor="accent"
+                textAlign="right"
+                isLoading={this.state.isLoading}
+              >
+                <EuiIcon type="clock" color="accent" />
+              </EuiStat>
+            </EuiPanel>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiPanel>
+              <EuiStat
+                title="6,800"
+                description="Success widgets"
+                titleColor="secondary"
+                textAlign="right"
+                isLoading={this.state.isLoading}
+              >
+                <EuiIcon type="check" color="secondary" />
+              </EuiStat>
+            </EuiPanel>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiPanel>
+              <EuiStat
+                title="88"
+                description="Error widgets"
+                titleColor="danger"
+                textAlign="right"
+                isLoading={this.state.isLoading}
+              >
+                <EuiIcon type="alert" color="danger" />
+              </EuiStat>
+            </EuiPanel>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer />
+        <EuiSwitch
+          label="Show as loading"
+          checked={this.state.isLoading}
+          onChange={this.onToggleChange}
+        />
+      </div>
+    );
+  }
+}

src-docs/src/views/stat/stat_example.js

@@ -14,27 +14,66 @@ import {
 import Stat from './stat';
 const statSource = require('!!raw-loader!./stat');
 const statHtml = renderToHtml(Stat);
+const statSnippet = `<EuiStat
+  title="22,123"
+  description="Total people"
+/>
+`;
 
 import StatColors from './stat_colors';
 const statColorsSource = require('!!raw-loader!./stat_colors');
 const statColorsHtml = renderToHtml(StatColors);
+const statColorSnippet = `<EuiStat
+  title="22,123"
+  description="Total people"
+  color="primary"
+/>
+`;
 
 import StatAlign from './stat_align';
 const statAlignSource = require('!!raw-loader!./stat_align');
 const statAlignHtml = renderToHtml(StatAlign);
+const statAlignSnippet = `<EuiStat
+  title="22,123"
+  description="Total people"
+  textAlign="right"
+/>
+`;
 
 import StatSize from './stat_size';
 const statSizeSource = require('!!raw-loader!./stat_size');
 const statSizeHtml = renderToHtml(StatSize);
+const statSizeSnippet = `<EuiStat
+  title="22,123"
+  description="Total people"
+  size="xxl"
+/>
+`;
 
 import StatOrder from './stat_order';
 const statOrderSource = require('!!raw-loader!./stat_order');
 const statOrderHtml = renderToHtml(StatOrder);
+const statOrderSnippet = `<EuiStat
+  title="22,123"
+  description="Total people"
+  reverse
+/>
+`;
 
 import StatCombos from './stat_combos';
 const statCombosSource = require('!!raw-loader!./stat_combos');
 const statCombosHtml = renderToHtml(StatCombos);
 
+import StatLoading from './stat_loading';
+const statLoadingSource = require('!!raw-loader!./stat_loading');
+const statLoadingHtml = renderToHtml(StatLoading);
+const statLoadingSnippet = `<EuiStat
+  title={someNumber}
+  description="Total people"
+  isLoading={someNumber == undefined}
+/>
+`;
+
 export const StatExample = {
   title: 'Stat',
   sections: [{
@@ -53,6 +92,7 @@ export const StatExample = {
     ),
     props: { EuiStat },
     demo: <Stat />,
+    snippet: statSnippet,
   }, {
     title: 'Applying color',
     source: [{
@@ -68,6 +108,7 @@ export const StatExample = {
         For proper color contrast, only a limited set of EUI colors are offered. See the Props tab above for a list of available colors.
       </p>
     ),
+    snippet: statColorSnippet,
     demo: <StatColors />,
   }, {
     title: 'Text alignment',
@@ -83,6 +124,7 @@ export const StatExample = {
         <EuiCode>EuiStat</EuiCode> also offers alignment options. By default, text will be left aligned.
       </p>
     ),
+    snippet: statAlignSnippet,
     demo: <StatAlign />,
   }, {
     title: 'Title size',
@@ -101,6 +143,7 @@ export const StatExample = {
         component properties.
       </p>
     ),
+    snippet: statSizeSnippet,
     demo: <StatSize />,
   }, {
     title: 'Reverse the order',
@@ -117,7 +160,25 @@ export const StatExample = {
         the <EuiCode>reverse</EuiCode> property to true. By default, the description (label) is displayed above the title (value).
       </p>
     ),
+    snippet: statOrderSnippet,
     demo: <StatOrder />,
+  }, {
+    title: 'Stat loading',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: statLoadingSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: statLoadingHtml,
+    }],
+    text: (
+      <p>
+        If you apply the <EuiCode>isLoading</EuiCode> prop, the title will indicate the loading status by
+        swapping the provided title with two flashing dashes.
+      </p>
+    ),
+    snippet: statLoadingSnippet,
+    demo: <StatLoading />,
   }, {
     title: 'Putting it all together',
     source: [{

src-docs/src/views/stat/stat_loading.js

@@ -0,0 +1,41 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiSwitch,
+  EuiStat,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isLoading: true,
+    };
+  }
+
+  onToggleChange = (e) => {
+    this.setState({ isLoading: e.target.checked });
+  }
+
+  render() {
+    return (
+      <div>
+        <EuiStat
+          title="7,600 mm"
+          description="Total People"
+          isLoading={this.state.isLoading}
+        />
+        <EuiSpacer />
+        <EuiSwitch
+          label="Show as loading"
+          checked={this.state.isLoading}
+          onChange={this.onToggleChange}
+        />
+      </div>
+    );
+  }
+}