[UI Framework] add KuiExpressionItem and related components.

ui_framework/dist/ui_framework.css

@@ -903,7 +903,7 @@ main {
   transition: opacity 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
   transition: transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), opacity 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
   transition: transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1), opacity 250ms cubic-bezier(0.34, 1.61, 0.7, 1), -webkit-transform 250ms cubic-bezier(0.34, 1.61, 0.7, 1); }
-  .kuiExpressionItem__popover.ng-hide, .kuiExpressionItem__popover.kuiExpressionItem__popover--isHidden {
+  .kuiExpressionItem__popover.ng-hide {
     display: block !important;
     visibility: hidden;
     opacity: 0;

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

@@ -163,6 +163,7 @@ const components = [{
 }, {
   name: 'Expression',
   component: ExpressionExample,
+  hasReact: true,
 }, {
   name: 'Form',
   component: FormExample,

ui_framework/doc_site/src/views/expression/expression.js

@@ -1,26 +1,145 @@
-/* eslint-disable */
+import React, { PropTypes } from 'react';
+import {
+  KuiExpressionItem,
+  KuiExpressionItemButton,
+  KuiExpressionItemPopover,
+} from '../../../../components';
 
-let isPopoverCollapsed = true;
-const $toggleExpressionButton = $('[data-id="toggleExpressionButton"]');
-const $toggleExpressionPopover = $('[data-id="toggleExpressionPopover"]');
 
-$('[data-id="toggleExpressionButton"]').click(function() {
+class KuiExpressionItemExample extends React.Component {
+  constructor(props) {
+    super(props);
 
-  if (isPopoverCollapsed) {
-    $(this).addClass('kuiExpressionItem__button--isActive')
-    $(this).parent( "div" ).find('[data-id="toggleExpressionPopover"]').removeClass('kuiExpressionItem__popover--isHidden');
-  } else {
-    $(this).removeClass('kuiExpressionItem__button--isActive')
-    $(this).parent( "div" ).find('[data-id="toggleExpressionPopover"]').addClass('kuiExpression__popover--isHidden');
+    this.state = {
+      example1: {
+        value: 'count()'
+      },
+      example2: {
+        object: 'A',
+        value: '100',
+        description: 'Is above'
+      },
+      activeButton: props.defaultActiveButton
+    };
   }
 
-  isPopoverCollapsed = !isPopoverCollapsed;
-});
+  changeExample1 = (event) => {
+    this.setState({ example1: { ...this.state.example1, value: event.target.value } });
+  }
+
+  changeExample2Object = (event) => {
+    this.setState({ example2: { ...this.state.example2, object: event.target.value } });
+  }
+
+  changeExample2Value = (event) => {
+    this.setState({ example2: { ...this.state.example2, value: event.target.value } });
+  }
 
-$(document).mouseup(function(e) {
-  if (!isPopoverCollapsed && !$toggleExpressionPopover.is(e.target) && $toggleExpressionPopover.has(e.target).length === 0) {
-    $toggleExpressionPopover.addClass('kuiExpressionItem__popover--isHidden');
-    $toggleExpressionButton.removeClass('kuiExpressionItem__button--isActive');
-    isPopoverCollapsed = !isPopoverCollapsed;
+  changeExample2Description = (event) => {
+    this.setState({ example2: { ...this.state.example2, description: event.target.value } });
   }
-});
+
+  onOutsideClick = () => {
+    this.setState({ activeButton:null });
+  }
+
+  render() {
+    //Rise the popovers above GuidePageSideNav
+    const popoverStyle = { zIndex:'200' };
+
+    const popover1 = (this.state.activeButton === 'example1') ? this.getPopover1(popoverStyle) : null;
+    const popover2 = (this.state.activeButton === 'example2') ? this.getPopover2(popoverStyle) : null;
+
+    return (
+      <div>
+        <KuiExpressionItem key="example1">
+          <KuiExpressionItemButton
+            description="when"
+            buttonValue={this.state.example1.value}
+            isActive={this.state.activeButton === 'example1'}
+            onClick={()=>this.setState({ activeButton:'example1' })}
+          />
+          {popover1}
+        </KuiExpressionItem>
+        <KuiExpressionItem key="example2">
+          <KuiExpressionItemButton
+            description={this.state.example2.description}
+            buttonValue={this.state.example2.value}
+            isActive={this.state.activeButton === 'example2'}
+            onClick={()=>this.setState({ activeButton:'example2' })}
+          />
+          {popover2}
+        </KuiExpressionItem>
+      </div>
+    );
+  }
+
+  getPopover1(popoverStyle) {
+    return (
+      <KuiExpressionItemPopover
+        title="When"
+        onOutsideClick={this.onOutsideClick}
+        style={popoverStyle}
+      >
+        <select
+          className="kuiSelect"
+          value={this.state.example1.value}
+          onChange={this.changeExample1}
+        >
+          <option label="count()">count()</option>
+          <option label="average()">average()</option>
+          <option label="sum()">sum()</option>
+          <option label="median()">median()</option>
+          <option label="min()">min()</option>
+          <option label="max()">max()</option>
+        </select>
+      </KuiExpressionItemPopover>
+    );
+  }
+
+  getPopover2(popoverStyle) {
+    return (
+      <KuiExpressionItemPopover
+        title={this.state.example2.description}
+        onOutsideClick={this.onOutsideClick}
+        align="right"
+        style={popoverStyle}
+      >
+        <div>
+          <select
+            className="kuiSelect"
+            value={this.state.example2.object}
+            onChange={this.changeExample2Object}
+          >
+            <option label="A">A</option>
+            <option label="B">B</option>
+            <option label="C">C</option>
+          </select>
+
+          <input
+            type="text"
+            className="kuiTextInput kuiTextInput--small"
+            value={this.state.example2.value}
+            onChange={this.changeExample2Value}
+          />
+
+          <select
+            className="kuiSelect kuiSelect--large"
+            value={this.state.example2.description}
+            onChange={this.changeExample2Description}
+          >
+            <option label="Is above">Is above</option>
+            <option label="Is below">Is below</option>
+            <option label="Is exactly">Is exactly</option>
+          </select>
+        </div>
+      </KuiExpressionItemPopover>
+    );
+  }
+}
+
+KuiExpressionItemExample.propTypes = {
+  defaultActiveButton: PropTypes.string.isRequired
+};
+
+export default KuiExpressionItemExample;

ui_framework/doc_site/src/views/expression/expression_example.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { renderToHtml } from '../../services';
 
 import {
   GuideDemo,
@@ -8,30 +9,30 @@ import {
   GuideText,
 } from '../../components';
 
-const expressionHtml = require('./expression.html');
-const expressionJs = require('raw!./expression.js');
+const Expression = require('./expression');
+const expressionSource = require('!!raw!./expression');
+const expressionHtml = renderToHtml(Expression, { defaultActiveButton: 'example2' });
 
 export default props => (
   <GuidePage title={props.route.name}>
     <GuideSection
       title="ExpressionItem"
       source={[{
+        type: GuideSectionTypes.JS,
+        code: expressionSource,
+      }, {
         type: GuideSectionTypes.HTML,
         code: expressionHtml,
-      }, {
-        type: GuideSectionTypes.JS,
-        code: expressionJs,
       }]}
     >
       <GuideText>
         ExpressionItems allow you to compress a complicated form into a small space.
         Left aligned to the button by default. Can be optionally right aligned (as in the last example).
       </GuideText>
 
-      <GuideDemo
-        html={expressionHtml}
-        js={expressionJs}
-      />
+      <GuideDemo>
+        <Expression defaultActiveButton="example2"/>
+      </GuideDemo>
     </GuideSection>
 
   </GuidePage>

ui_framework/src/components/expression/__snapshots__/expression_item.test.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KuiExpressionItem Props children is rendered 1`] = `
+<div
+  class="kuiExpressionItem"
+>
+  some expression
+</div>
+`;
+
+exports[`KuiExpressionItem renders 1`] = `
+<div
+  aria-label="aria-label"
+  class="kuiExpressionItem testClass1 testClass2"
+  data-test-subj="test subject string"
+/>
+`;

ui_framework/src/components/expression/__snapshots__/expression_item_button.test.js.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KuiExpressionItemButton Props isActive false renders inactive 1`] = `
+<button
+  class="kuiExpressionItem__button"
+>
+  <span
+    class="kuiExpressionItem__buttonDescription"
+  >
+    the answer is
+  </span>
+
+  <span
+    class="kuiExpressionItem__buttonValue"
+  >
+    42
+  </span>
+</button>
+`;
+
+exports[`KuiExpressionItemButton Props isActive true renders active 1`] = `
+<button
+  class="kuiExpressionItem__button kuiExpressionItem__button--isActive"
+>
+  <span
+    class="kuiExpressionItem__buttonDescription"
+  >
+    the answer is
+  </span>
+
+  <span
+    class="kuiExpressionItem__buttonValue"
+  >
+    42
+  </span>
+</button>
+`;
+
+exports[`KuiExpressionItemButton renders 1`] = `
+<button
+  aria-label="aria-label"
+  class="kuiExpressionItem__button testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <span
+    class="kuiExpressionItem__buttonDescription"
+  >
+    the answer is
+  </span>
+
+  <span
+    class="kuiExpressionItem__buttonValue"
+  >
+    42
+  </span>
+</button>
+`;