Add euiStat

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added a new `EuiStat` component for displaying prominent stats ([#1146](https://github.com/elastic/eui/pull/1146))
 - Added color and monotone icons for AWS and GCP. ([#1135](https://github.com/elastic/eui/pull/1135))
 - Added TypeScript definition for `EuiComboBox` ([#1115](https://github.com/elastic/eui/pull/1115))
 

src-docs/src/routes.js

@@ -192,6 +192,9 @@ import { SideNavExample }
 import { SpacerExample }
   from './views/spacer/spacer_example';
 
+import { StatExample }
+  from './views/stat/stat_example';
+
 import { StepsExample }
   from './views/steps/steps_example';
 
@@ -350,6 +353,7 @@ const navigation = [{
     ImageExample,
     LoadingExample,
     ProgressExample,
+    StatExample,
     TableExample,
     TextExample,
     TitleExample,

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

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import {
+  EuiStat,
+  EuiFlexItem,
+  EuiFlexGroup,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiStat
+          title="7,600 mm"
+          description="Total People"
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </div>
+);

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

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {
+  EuiStat,
+  EuiFlexItem,
+  EuiFlexGroup,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiStat
+          title="$ 1,000.00"
+          description="Left align"
+          textAlign="left"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiStat
+          title="99.9999"
+          description="Center align"
+          textAlign="center"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiStat
+          title="1,000.00 €"
+          description="Right align"
+          textAlign="right"
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </div>
+);

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

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import {
+  EuiStat,
+  EuiFlexItem,
+  EuiFlexGroup,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiStat
+          title="1"
+          description="Default color"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiStat
+          title="10"
+          description="Subdued color"
+          titleColor="subdued"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiStat
+          title="100"
+          description="Primary color"
+          titleColor="primary"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiStat
+          title="1,000"
+          description="Secondary color"
+          titleColor="secondary"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiStat
+          title="10,000"
+          description="Danger color"
+          titleColor="danger"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiStat
+          title="100,000"
+          description="Accent color"
+          titleColor="accent"
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </div>
+);

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

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import {
+  EuiStat,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiPanel,
+  EuiIcon,
+} 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>
+);

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

@@ -0,0 +1,137 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import {
+  EuiCode,
+  EuiStat,
+} from '../../../../src/components';
+
+import Stat from './stat';
+const statSource = require('!!raw-loader!./stat');
+const statHtml = renderToHtml(Stat);
+
+import StatColors from './stat_colors';
+const statColorsSource = require('!!raw-loader!./stat_colors');
+const statColorsHtml = renderToHtml(StatColors);
+
+import StatAlign from './stat_align';
+const statAlignSource = require('!!raw-loader!./stat_align');
+const statAlignHtml = renderToHtml(StatAlign);
+
+import StatSize from './stat_size';
+const statSizeSource = require('!!raw-loader!./stat_size');
+const statSizeHtml = renderToHtml(StatSize);
+
+import StatOrder from './stat_order';
+const statOrderSource = require('!!raw-loader!./stat_order');
+const statOrderHtml = renderToHtml(StatOrder);
+
+import StatCombos from './stat_combos';
+const statCombosSource = require('!!raw-loader!./stat_combos');
+const statCombosHtml = renderToHtml(StatCombos);
+
+export const StatExample = {
+  title: 'Stat',
+  sections: [{
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: statSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: statHtml,
+    }],
+    text: (
+      <p>
+        <EuiCode>EuiStat</EuiCode> can be used to display prominent text or number values. It consists of <EuiCode>title</EuiCode>
+        and <EuiCode>description</EuiCode> elements with several visual styling properties (examples below).
+      </p>
+    ),
+    props: { EuiStat },
+    demo: <Stat />,
+  }, {
+    title: 'Applying color',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: statColorsSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: statColorsHtml,
+    }],
+    text: (
+      <p>
+        <EuiCode>title</EuiCode> can be altered using the color property. By default, it will appear in <EuiCode>full</EuiCode> color.
+        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>
+    ),
+    demo: <StatColors />,
+  }, {
+    title: 'Text alignment',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: statAlignSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: statAlignHtml,
+    }],
+    text: (
+      <p>
+        <EuiCode>EuiStat</EuiCode> also offers alignment options. By default, text will be left aligned.
+      </p>
+    ),
+    demo: <StatAlign />,
+  }, {
+    title: 'Title size',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: statSizeSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: statSizeHtml,
+    }],
+    text: (
+      <p>
+        <EuiCode>title</EuiCode> uses the <EuiCode>EuiTitle</EuiCode> component and thus its sizing properites.
+        Although all <EuiCode>EuiTitle</EuiCode> sizes are available, suggested sizes include <EuiCode>`l`, `m`, and `s`</EuiCode>.
+        By default, the size is set to Large (<EuiCode>`l`</EuiCode>). The <EuiCode>description</EuiCode> label cannot be re-sized via
+        component properties.
+      </p>
+    ),
+    demo: <StatSize />,
+  }, {
+    title: 'Reverse the order',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: statOrderSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: statOrderHtml,
+    }],
+    text: (
+      <p>
+        You can reverse the order of the <EuiCode>description</EuiCode> and <EuiCode>title</EuiCode> text by setting
+        the <EuiCode>reverse</EuiCode> property to true. By default, the description (label) is displayed above the title (value).
+      </p>
+    ),
+    demo: <StatOrder />,
+  }, {
+    title: 'Putting it all together',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: statCombosSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: statCombosHtml,
+    }],
+    text: (
+      <p>
+        Following are samples demonstrating how you might assemble and display <EuiCode>EuiStat</EuiCode> components.
+      </p>
+    ),
+    demo: <StatCombos />,
+  }],
+};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {
+  EuiStat,
+  EuiFlexItem,
+  EuiFlexGroup,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiStat
+          title="10,000"
+          description="Description underneath"
+          reverse
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </div>
+);

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

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {
+  EuiStat,
+  EuiFlexItem,
+  EuiFlexGroup,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiStat
+          title="1,000,000"
+          description="Large size"
+          titleSize="l"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiStat
+          title="1,000,000"
+          description="Medium size"
+          titleSize="m"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiStat
+          title="1,000,000"
+          description="Small size"
+          titleSize="s"
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </div>
+);