[K7] Add Icon component

package.json

@@ -206,7 +206,7 @@
     "@elastic/eslint-plugin-kibana-custom": "1.0.3",
     "angular-mocks": "1.4.7",
     "babel-eslint": "7.2.3",
-    "bemify": "0.1.4",
+    "bemify": "0.1.2",
     "chai": "3.5.0",
     "chance": "1.0.6",
     "cheerio": "0.22.0",
@@ -275,6 +275,7 @@
     "strip-ansi": "^3.0.1",
     "supertest": "3.0.0",
     "supertest-as-promised": "2.0.2",
+    "svg-sprite-loader": "3.0.6",
     "tree-kill": "1.1.0",
     "webpack-dev-server": "1.14.1"
   },

ui_framework/dist/ui_framework.css

@@ -47,3 +47,24 @@ q:before, q:after {
 table {
   border-collapse: collapse;
   border-spacing: 0; }
+
+.kuiIcon {
+  display: inline-block; }
+  .kuiIcon--xSmall {
+    width: 4px;
+    height: 4px; }
+  .kuiIcon--small {
+    width: 8px;
+    height: 8px; }
+  .kuiIcon--medium {
+    width: 16px;
+    height: 16px; }
+  .kuiIcon--large {
+    width: 24px;
+    height: 24px; }
+  .kuiIcon--xLarge {
+    width: 32px;
+    height: 32px; }
+  .kuiIcon--xxLarge {
+    width: 40px;
+    height: 40px; }

ui_framework/doc_site/src/services/routes/routes.js

@@ -3,12 +3,17 @@ import Slugify from '../string/slugify';
 import AccessibilityExample
   from '../../views/accessibility/accessibility_example';
 
+import IconExample
+  from '../../views/icon/icon_example';
 
 // Component route names should match the component name exactly.
 const components = [{
   name: 'Accessibility',
   component: AccessibilityExample,
   hasReact: true,
+}, {
+  name: 'Icon',
+  component: IconExample,
 }];
 
 const sandboxes = [];

ui_framework/doc_site/src/views/icon/icon_example.js

@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideDemo,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+} from '../../components';
+
+import IconSearch from './icon_search';
+const iconSearchSource = require('!!raw!./icon_search');
+const iconSearchHtml = renderToHtml(IconSearch);
+
+import IconUser from './icon_user';
+const iconUserSource = require('!!raw!./icon_user');
+const iconUserHtml = renderToHtml(IconUser);
+
+import IconSizes from './icon_sizes';
+const iconSizesSource = require('!!raw!./icon_sizes');
+const iconSizesHtml = renderToHtml(IconSizes);
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Search"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: iconSearchSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: iconSearchHtml,
+      }]}
+    >
+      <GuideDemo>
+        <IconSearch />
+      </GuideDemo>
+    </GuideSection>
+
+    <GuideSection
+      title="User"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: iconUserSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: iconUserHtml,
+      }]}
+    >
+      <GuideDemo>
+        <IconUser />
+      </GuideDemo>
+    </GuideSection>
+
+    <GuideSection
+      title="Icon sizes"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: iconSizesSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: iconSizesHtml,
+      }]}
+    >
+      <GuideDemo>
+        <IconSizes />
+      </GuideDemo>
+    </GuideSection>
+  </GuidePage>
+);

ui_framework/doc_site/src/views/icon/icon_search.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default () => (
+  <svg className="kuiIcon kuiIcon--medium">
+    <use href="#search" />
+  </svg>
+);

ui_framework/doc_site/src/views/icon/icon_sizes.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+export default () => (
+  <div>
+    <svg className="kuiIcon kuiIcon--medium">
+      <use href="#search" />
+    </svg>
+
+    &nbsp;
+
+    <svg className="kuiIcon kuiIcon--large">
+      <use href="#search" />
+    </svg>
+
+    &nbsp;
+
+    <svg className="kuiIcon kuiIcon--xLarge">
+      <use href="#search" />
+    </svg>
+
+    &nbsp;
+
+    <svg className="kuiIcon kuiIcon--xxLarge">
+      <use href="#search" />
+    </svg>
+  </div>
+);

ui_framework/doc_site/src/views/icon/icon_user.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default () => (
+  <svg className="kuiIcon kuiIcon--medium">
+    <use href="#user" />
+  </svg>
+);

ui_framework/src/components/icon/_icon.scss

@@ -0,0 +1,19 @@
+@include component('kuiIcon') {
+  display: inline-block;
+
+  @include modifier('medium') {
+    @include size($kuiSizeM);
+  }
+
+  @include modifier('large') {
+    @include size($kuiSizeL);
+  }
+
+  @include modifier('xLarge') {
+    @include size($kuiSizeXL);
+  }
+
+  @include modifier('xxLarge') {
+    @include size($kuiSizeXXL);
+  }
+}

ui_framework/src/components/icon/_index.scss

@@ -0,0 +1 @@
+@import './icon';

ui_framework/src/components/icon/index.js

@@ -0,0 +1,2 @@
+import '!!svg-sprite!./assets/search.svg';
+import '!!svg-sprite!./assets/user.svg';

ui_framework/src/components/index.js

@@ -1,3 +1,5 @@
 export {
   KuiKeyboardAccessible,
 } from './accessibility';
+
+import './icon';

ui_framework/src/components/index.scss

@@ -0,0 +1 @@
+@import './icon/index';

ui_framework/src/global_styling/mixins/_bemify.scss

@@ -12,4 +12,3 @@ $state-prefix: null;
     }
   }
 }
-

ui_framework/src/global_styling/mixins/_index.scss

@@ -1,4 +1,5 @@
 @import 'bemify';
 @import 'naming';
 @import 'responsive';
+@import 'size';
 @import 'typography';

ui_framework/src/global_styling/mixins/_size.scss

@@ -0,0 +1,4 @@
+@mixin size($size) {
+  width: $size;
+  height: $size;
+}

ui_framework/src/global_styling/variables/_size.scss

@@ -1,7 +1,7 @@
 $kuiSize:     16px;
 
-$kuiSizeS:    $kuiSize / 2;
 $kuiSizeXS:   $kuiSize / 4;
+$kuiSizeS:    $kuiSize / 2;
 $kuiSizeM:    $kuiSize;
 $kuiSizeL:    $kuiSize * 1.5;
 $kuiSizeXL:   $kuiSize * 2;