[K7] BEM mixin

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,10 @@ 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 the [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('is-happening')`).
+
 ## 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';