[UI Framework] Add KuiInfoButton component (#11811)

* add help_icon component

* rename to info_button

* build

* info button example

* info button test

* fix example

* change bg color and add padding:0

* make component include all props

* set color with a variable

* use bgcolor transparent

* example guide text fix

* update markup to allow component class to set font-size

* use globalLinkColor instead of new color value

ui_framework/components/index.js

@@ -6,6 +6,8 @@ export {
   KuiSubmitButton,
 } from './button';
 
+export { KuiInfoButton } from './info_button';
+
 export {
   KuiLocalNav,
   KuiLocalNavRow,

ui_framework/components/index.scss

@@ -31,6 +31,7 @@
 @import "form_layout/index";
 @import "gallery/index";
 @import "header_bar/index";
+@import "info_button/index";
 @import "icon/index";
 @import "info_panel/index";
 @import "link/index";

ui_framework/components/info_button/__snapshots__/info_button.test.js.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KuiInfoButton Baseline HTML attributes are rendered 1`] = `
+<button
+  aria-label="aria label"
+  class="testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <span
+    class="kuiIcon fa-info-circle"
+  />
+</button>
+`;
+
+exports[`KuiInfoButton Baseline is rendered 1`] = `
+<button
+  class="kuiInfoButton"
+>
+  <span
+    class="kuiIcon fa-info-circle"
+  />
+</button>
+`;

ui_framework/components/info_button/_index.scss

@@ -0,0 +1 @@
+@import "info_button";

ui_framework/components/info_button/_info_button.scss

@@ -0,0 +1,13 @@
+.kuiInfoButton {
+  font-size: 16px;
+  background-color: transparent;
+  color: $globalLinkColor;
+  cursor: pointer;
+  border: none;
+  padding: 0;
+
+  &:hover,
+  &:active {
+    color: $globalLinkColor-isHover;
+  }
+}

ui_framework/components/info_button/index.js

@@ -0,0 +1 @@
+export { KuiInfoButton } from './info_button';

ui_framework/components/info_button/info_button.js

@@ -0,0 +1,23 @@
+import React, {
+  PropTypes,
+} from 'react';
+
+import classNames from 'classnames';
+
+const KuiInfoButton = props => {
+  const iconClasses = classNames('kuiInfoButton', props.className);
+
+  return (
+    <button className={iconClasses} {...props}>
+      <span className='kuiIcon fa-info-circle'></span>
+    </button>
+  );
+};
+
+KuiInfoButton.propTypes = {
+  className: PropTypes.string,
+};
+
+export {
+  KuiInfoButton,
+};

ui_framework/components/info_button/info_button.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from 'enzyme';
+
+import {
+  KuiInfoButton,
+} from './info_button';
+
+describe('KuiInfoButton', () => {
+  describe('Baseline', () => {
+    test('is rendered', () => {
+      const $button = render(
+        <KuiInfoButton />
+      );
+
+      expect($button)
+        .toMatchSnapshot();
+    });
+
+    test('HTML attributes are rendered', () => {
+      const $button = render(
+        <KuiInfoButton
+          aria-label="aria label"
+          className="testClass1 testClass2"
+          data-test-subj="test subject string"
+        />
+      );
+
+      expect($button)
+        .toMatchSnapshot();
+    });
+  });
+});

ui_framework/dist/ui_framework.css

@@ -1190,6 +1190,16 @@ body {
     margin-left: 0;
     /* 1 */ }
 
+.kuiInfoButton {
+  font-size: 16px;
+  background-color: transparent;
+  color: #3CAED2;
+  cursor: pointer;
+  border: none;
+  padding: 0; }
+  .kuiInfoButton:hover, .kuiInfoButton:active {
+    color: #105A73; }
+
 /**
  * 1. Copied from FontAwesome's .fa class. We use a custom class to make it easier to migrate away
  *    from FontAwesome someday. When we do migrate away, we can just update this definition.

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

@@ -45,6 +45,9 @@ import HeaderBarSandbox
 import IconExample
   from '../../views/icon/icon_example';
 
+import InfoButtonExample
+  from '../../views/info_button/info_button_example';
+
 import InfoPanelExample
   from '../../views/info_panel/info_panel_example';
 
@@ -137,6 +140,10 @@ const components = [{
 }, {
   name: 'Icon',
   component: IconExample,
+}, {
+  name: 'InfoButton',
+  component: InfoButtonExample,
+  hasReact: true,
 }, {
   name: 'InfoPanel',
   component: InfoPanelExample,

ui_framework/doc_site/src/views/info_button/info_button.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import {
+  KuiInfoButton,
+} from '../../../../components';
+
+export default () => (
+  <div>
+    <KuiInfoButton></KuiInfoButton>
+  </div>
+);
+

ui_framework/doc_site/src/views/info_button/info_button_example.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideDemo,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+import Example from './info_button';
+
+const basicSource = require('!!raw!./info_button');
+const basicHtml = renderToHtml(Example);
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Info Button"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: basicSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: basicHtml,
+      }]}
+    >
+      <GuideText>
+        This is just button with an info icon, used for a keyboard-accessible
+        trigger for helpful inline content. For example, use it as a tooltip
+        trigger.
+      </GuideText>
+
+      <GuideDemo>
+        <Example />
+      </GuideDemo>
+    </GuideSection>
+
+  </GuidePage>
+);