Third party icons

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added types for `EuiToast`, `EuiGlobalToastList`, and `EuiGlobalToastListItem` ([#1045](https://github.com/elastic/eui/pull/1045))
+- Added a handful of third-party logos to `EuiIcon` ([#1033](https://github.com/elastic/eui/pull/1033))
 
 **Bug fixes**
 

src-docs/src/views/icon/apps.js

@@ -19,6 +19,7 @@ const iconTypes = [
   'emsApp',
   'graphApp',
   'grokApp',
+  'indexManagementApp',
   'indexPatternApp',
   'loggingApp',
   'machineLearningApp',

src-docs/src/views/icon/icon_example.js

@@ -27,6 +27,10 @@ import Logos from './logos';
 const logosSource = require('!!raw-loader!./logos');
 const logosHtml = renderToHtml(Logos);
 
+import LogosThird from './logos_third';
+const logosThirdSource = require('!!raw-loader!./logos_third');
+const logosThirdHtml = renderToHtml(LogosThird);
+
 import IconSizes from './icon_sizes';
 const iconSizesSource = require('!!raw-loader!./icon_sizes');
 const iconSizesHtml = renderToHtml(IconSizes);
@@ -106,7 +110,7 @@ export const IconExample = {
     ),
     demo: <Ml />,
   }, {
-    title: 'Logos',
+    title: 'Elastic logos',
     source: [{
       type: GuideSectionTypes.JS,
       code: logosSource,
@@ -120,6 +124,21 @@ export const IconExample = {
       </p>
     ),
     demo: <Logos />,
+  }, {
+    title: 'Third party logos',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: logosThirdSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: logosThirdHtml,
+    }],
+    text: (
+      <p>
+        Product logos follow similar rules as app logos.
+      </p>
+    ),
+    demo: <LogosThird />,
   }, {
     title: 'Sizes',
     source: [{

src-docs/src/views/icon/logos.js

@@ -9,25 +9,14 @@ import {
 } from '../../../../src/components';
 
 const iconTypes = [
-  'logoApache',
   'logoBeats',
   'logoCloud',
   'logoCloudEnterprise',
-  'logoDocker',
   'logoElastic',
   'logoElasticsearch',
   'logoElasticStack',
-  'logoGithub',
-  'logoGmail',
   'logoKibana',
-  'logoKubernetes',
   'logoLogstash',
-  'logoMySQL',
-  'logoNginx',
-  'logoRedis',
-  'logoSketch',
-  'logoSlack',
-  'logoWebhook',
   'logoXpack',
 ].sort();
 

src-docs/src/views/icon/logos_third.js

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import {
+  EuiFlexGrid,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPanel,
+  EuiText,
+} from '../../../../src/components';
+
+const iconTypes = [
+  'logoAerospike',
+  'logoApache',
+  'logoCeph',
+  'logoCouchbase',
+  'logoDocker',
+  'logoDropwizard',
+  'logoEtcd',
+  'logoGithub',
+  'logoGmail',
+  'logoGolang',
+  'logoHAproxy',
+  'logoKafka',
+  'logoKubernetes',
+  'logoMemcached',
+  'logoMongodb',
+  'logoMySQL',
+  'logoNginx',
+  'logoOsquery',
+  'logoPhp',
+  'logoPostgres',
+  'logoPrometheus',
+  'logoRabbitmq',
+  'logoRedis',
+  'logoSketch',
+  'logoSlack',
+  'logoWebhook',
+  'logoWindows',
+].sort();
+
+export default () => (
+  <EuiFlexGrid columns={4}>
+    {
+      iconTypes.map(iconType => (
+        <EuiFlexItem
+          className="guideDemo__icon"
+          key={iconType}
+          style={{ width: '200px' }}
+        >
+          <EuiPanel>
+            <EuiIcon
+              type={iconType}
+              size="xl"
+            />
+            <EuiText size="s">
+              <p>{iconType}</p>
+            </EuiText>
+          </EuiPanel>
+        </EuiFlexItem>
+      ))
+    }
+  </EuiFlexGrid>
+);