[K7] BEM mixin (#12884)

Bemify mixin for handling namespacing in our sass.

package.json

@@ -206,6 +206,7 @@
     "@elastic/eslint-plugin-kibana-custom": "1.0.3",
     "angular-mocks": "1.4.7",
     "babel-eslint": "7.2.3",
+    "bemify": "0.1.4",
     "chai": "3.5.0",
     "chance": "1.0.6",
     "cheerio": "0.22.0",

style_guides/scss_style_guide.md

@@ -15,6 +15,44 @@ Our style guide is an extension of [Sass Guidelines by Hugo Giraudel](https://sa
 The Sass Guidelines site recommends using RBG and HSL values to format colors, but we're using
 hex values.
 
+### Bemify for namespacing
+
+We use [bemify](https://github.com/franzheidl/bemify) for namespacing the sass into a BEM format. We use `component`, `child`, `modifier` and `state` as our mixin names. We've adjusted the plugin's state mixin so that you need to write out the full selector (`@include state('isHappening')`).
+
+#### Example
+
+```
+// Generates .kuiButton
+@include component('kuiButton') {
+  color: white;
+  background: gray;
+  padding: 20px;
+
+  // Generates .kuiButton__icon
+  @include child('icon') {
+    display: inline-block;
+    margin-right: 4px;
+    color: white;
+
+    // Generates .kuiButton__icon--danger
+    @include modifier('danger') {
+      color: red;
+    }
+  }
+
+  // Generates .kuiButton--primary
+  @include modifier('primary') {
+    background: blue;
+  }
+
+  // Generates .kuiButton.isLoading
+  @include state('isLoading') {
+    opacity: .5;
+    cursor: not-allowed;
+  }
+}
+```
+
 ## Dealing with extends
 
 Don't extend classes. The only time use should use an extend is when you are extending a placeholder. Even then, do it rarely and only for code maintainability.

ui_framework/src/global_styling/mixins/_bemify.scss

@@ -0,0 +1,15 @@
+// Bemify lets us use mixins to define namespacing
+// https://github.com/franzheidl/bemify
+
+$state-prefix: null;
+
+@import '../../../../node_modules/bemify/sass/_bemify';
+
+@mixin state($state) {
+  @at-root {
+    &.#{$state} {
+      @content;
+    }
+  }
+}
+

ui_framework/src/global_styling/mixins/_index.scss

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