[UI Framework] [K7]: Buttons and loader components (elastic#13269)

K7 buttons and loaders components.

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

@@ -3,6 +3,9 @@ import Slugify from '../string/slugify';
 import AccessibilityExample
   from '../../views/accessibility/accessibility_example';
 
+import ButtonExample
+  from '../../views/button/button_example';
+
 import IconExample
   from '../../views/icon/icon_example';
 
@@ -24,6 +27,9 @@ import ModalExample
 import PageExample
   from '../../views/page/page_example';
 
+import LoadingExample
+  from '../../views/loading/loading_example';
+
 import PopoverExample
   from '../../views/popover/popover_example';
 
@@ -38,6 +44,10 @@ const components = [{
   name: 'Accessibility',
   component: AccessibilityExample,
   hasReact: true,
+}, {
+  name: 'Button',
+  component: ButtonExample,
+  hasReact: true,
 }, {
   name: 'Icon',
   component: IconExample,
@@ -62,6 +72,10 @@ const components = [{
   name: 'Page',
   component: PageExample,
   hasReact: true,
+}, {
+  name: 'Loading',
+  component: LoadingExample,
+  hasReact: true,
 }, {
   name: 'Popover',
   component: PopoverExample,

ui_framework/doc_site/src/views/button/button.js

@@ -0,0 +1,208 @@
+import React from 'react';
+
+import {
+  KuiButton,
+} from '../../../../components/';
+
+export default () => (
+  <div>
+    <KuiButton
+      onClick={() => window.alert('Button clicked')}
+    >
+      Default
+    </KuiButton>
+
+    &nbsp;&nbsp;
+
+    <KuiButton
+      fill
+      onClick={() => window.alert('Button clicked')}
+    >
+      Filled
+    </KuiButton>
+
+    &nbsp;&nbsp;
+
+    <KuiButton
+      size="small"
+      onClick={() => window.alert('Button clicked')}
+    >
+      small
+    </KuiButton>
+
+    &nbsp;&nbsp;
+
+    <KuiButton
+      size="small"
+      fill
+      onClick={() => window.alert('Button clicked')}
+    >
+      small and filled
+    </KuiButton>
+
+    <br/><br/>
+
+    <KuiButton
+      type="secondary"
+      onClick={() => window.alert('Button clicked')}
+    >
+      Secondary
+    </KuiButton>
+
+    &nbsp;&nbsp;
+
+    <KuiButton
+      type="secondary"
+      fill
+      onClick={() => window.alert('Button clicked')}
+    >
+      Filled
+    </KuiButton>
+
+    &nbsp;&nbsp;
+
+    <KuiButton
+      type="secondary"
+      size="small"
+      onClick={() => window.alert('Button clicked')}
+    >
+      small
+    </KuiButton>
+
+    &nbsp;&nbsp;
+
+    <KuiButton
+      type="secondary"
+      size="small"
+      fill
+      onClick={() => window.alert('Button clicked')}
+    >
+      small and filled
+    </KuiButton>
+
+    <br/><br/>
+
+    <KuiButton
+      type="warning"
+      onClick={() => window.alert('Button clicked')}
+    >
+      Warning
+    </KuiButton>
+
+    &nbsp;&nbsp;
+
+    <KuiButton
+      type="warning"
+      fill
+      onClick={() => window.alert('Button clicked')}
+    >
+      Filled
+    </KuiButton>
+
+    &nbsp;&nbsp;
+
+    <KuiButton
+      type="warning"
+      size="small"
+      onClick={() => window.alert('Button clicked')}
+    >
+      small
+    </KuiButton>
+
+    &nbsp;&nbsp;
+
+    <KuiButton
+      type="warning"
+      size="small"
+      fill
+      onClick={() => window.alert('Button clicked')}
+    >
+      small and filled
+    </KuiButton>
+
+    <br/><br/>
+
+    <KuiButton
+      type="danger"
+      onClick={() => window.alert('Button clicked')}
+    >
+      Danger
+    </KuiButton>
+
+    &nbsp;&nbsp;
+
+    <KuiButton
+      type="danger"
+      fill
+      onClick={() => window.alert('Button clicked')}
+    >
+      Filled
+    </KuiButton>
+
+    &nbsp;&nbsp;
+
+    <KuiButton
+      type="danger"
+      size="small"
+      onClick={() => window.alert('Button clicked')}
+    >
+      small
+    </KuiButton>
+
+    &nbsp;&nbsp;
+
+    <KuiButton
+      type="danger"
+      size="small"
+      fill
+      onClick={() => window.alert('Button clicked')}
+    >
+      small and filled
+    </KuiButton>
+
+    <br/><br/>
+
+    <KuiButton
+      disabled
+      type="disabled"
+      onClick={() => window.alert('Button clicked')}
+    >
+      Disabled
+    </KuiButton>
+
+    &nbsp;&nbsp;
+
+    <KuiButton
+      disabled
+      type="disabled"
+      fill
+      onClick={() => window.alert('Button clicked')}
+    >
+      Filled
+    </KuiButton>
+
+    &nbsp;&nbsp;
+
+    <KuiButton
+      disabled
+      type="disabled"
+      size="small"
+      onClick={() => window.alert('Button clicked')}
+    >
+      small
+    </KuiButton>
+
+    &nbsp;&nbsp;
+
+    <KuiButton
+      disabled
+      type="disabled"
+      size="small"
+      fill
+      onClick={() => window.alert('Button clicked')}
+    >
+      small and filled
+    </KuiButton>
+
+  </div>
+);

ui_framework/doc_site/src/views/button/button_example.js

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideCode,
+  GuideDemo,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+import Button from './button';
+const buttonSource = require('!!raw!./button');
+const buttonHtml = renderToHtml(Button);
+
+import ButtonWithIcon from './button_with_icon';
+const buttonWithIconSource = require('!!raw!./button_with_icon');
+const buttonWithIconHtml = renderToHtml(Button);
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Button"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: buttonSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: buttonHtml,
+      }]}
+    >
+      <GuideText>
+        Button <GuideCode>type</GuideCode> defines the color of the button.
+        <GuideCode>fill</GuideCode> can be optionally added to add more focus to an action.
+      </GuideText>
+
+      <GuideDemo>
+        <Button />
+      </GuideDemo>
+    </GuideSection>
+    <GuideSection
+      title="Button with Icon"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: buttonWithIconSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: buttonWithIconHtml,
+      }]}
+    >
+      <GuideText>
+        The passed icon needs to come from our list of svg icons. Can be flipped
+        to the other side by passing <GuideCode>iconReverse</GuideCode>.
+      </GuideText>
+
+      <GuideDemo>
+        <ButtonWithIcon />
+      </GuideDemo>
+    </GuideSection>
+  </GuidePage>
+);