Integrate button icon variations into button_icon.js. Integrate butto…

…n variations inbot button.js.

- Rename classes prop to className.

ui_framework/components/button/button.js

@@ -1,4 +1,5 @@
 import React, {
+  Component,
   PropTypes,
 } from 'react';
 
@@ -28,7 +29,7 @@ const KuiButton = props => {
     props.onClick(props.data);
   }
 
-  const classes = classNames('kuiButton', props.classes, {
+  const className = classNames('kuiButton', props.className, {
     'kuiButton--iconText': props.icon || props.iconRight,
   });
 
@@ -42,19 +43,34 @@ const KuiButton = props => {
     );
   }
 
-  const elementType = props.isSubmit ? 'input' : props.href ? 'a' : 'button';
+  const elementType =
+    props.isSubmit
+    ? 'input'
+    : props.href
+    ? 'a'
+    : 'button';
+
+  const children =
+    props.isSubmit
+    ? null
+    : (
+      <span>
+        {props.icon}
+        {wrappedChildren}
+        {props.iconRight}
+      </span>
+    );
 
   return React.createElement(elementType, {
     'data-test-subj': props.testSubject,
-    className: classes,
+    className,
     href: props.href,
     target: props.target,
     type: props.isSubmit ? 'submit' : null,
     disabled: props.isDisabled,
     onClick,
     value: props.isSubmit ? props.children : null,
-    children: props.isSubmit ? null : [props.icon, wrappedChildren, props.iconRight],
-  });
+  }, children);
 };
 
 KuiButton.propTypes = {
@@ -63,18 +79,49 @@ KuiButton.propTypes = {
   icon: PropTypes.node,
   iconRight: PropTypes.node,
   children: PropTypes.node,
-  type: PropTypes.string,
   isSubmit: PropTypes.bool,
   href: PropTypes.string,
   target: PropTypes.string,
   onClick: PropTypes.func,
   isDisabled: PropTypes.bool,
   hasIcon: PropTypes.bool,
-  classes: PropTypes.oneOfType([
+  className: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.array,
     PropTypes.object,
   ]),
 };
 
-export { KuiButton };
+function createButtonVariation(hardCodedProps) {
+  const ButtonVariation = props => {
+    return React.createElement(KuiButton, Object.assign({}, props, hardCodedProps));
+  };
+
+  ButtonVariation.propTypes = Object.assign({}, KuiButton.propTypes);
+
+  return ButtonVariation;
+}
+
+const KuiBasicButton = createButtonVariation({
+  className: 'kuiButton--basic',
+});
+
+const KuiHollowButton = createButtonVariation({
+  className: 'kuiButton--hollow',
+});
+
+const KuiDangerButton = createButtonVariation({
+  className: 'kuiButton--danger',
+});
+
+const KuiPrimaryButton = createButtonVariation({
+  className: 'kuiButton--primary',
+});
+
+export {
+  KuiButton,
+  KuiBasicButton,
+  KuiHollowButton,
+  KuiDangerButton,
+  KuiPrimaryButton,
+};

ui_framework/components/button/button_icon.js

@@ -6,44 +6,29 @@ import classNames from 'classnames';
 import keyMirror from 'keymirror';
 
 const KuiButtonIcon = props => {
-  const typeToIconClassMap = {
-    [KuiButtonIcon.TYPE.CREATE]: 'fa-plus',
-    [KuiButtonIcon.TYPE.DELETE]: 'fa-trash',
-    [KuiButtonIcon.TYPE.PREVIOUS]: 'fa-chevron-left',
-    [KuiButtonIcon.TYPE.NEXT]: 'fa-chevron-right',
-  };
-
-  let iconType;
-
-  if (props.type) {
-    iconType = typeToIconClassMap[props.type];
-
-    if (iconType === undefined) {
-      throw new Error(`KuiButtonIcon type not defined: ${props.type}`);
-    }
-  }
-
   const iconClasses = classNames(
     'kuiButton__icon kuiIcon',
-    iconType,
-    props.classes,
+    props.className,
   );
 
   return (
     <span className={iconClasses} />
   );
 };
 
-KuiButtonIcon.TYPE = keyMirror({
-  CREATE: null,
-  DELETE: null,
-  PREVIOUS: null,
-  NEXT: null,
-});
-
 KuiButtonIcon.propTypes = {
-  type: PropTypes.string,
-  classes: PropTypes.string,
+  className: PropTypes.string,
 };
 
-export { KuiButtonIcon };
+const KuiCreateButtonIcon = () => <KuiButtonIcon className="fa-plus" />;
+const KuiDeleteButtonIcon = () => <KuiButtonIcon className="fa-trash" />;
+const KuiPreviousButtonIcon = () => <KuiButtonIcon className="fa-chevron-left" />;
+const KuiNextButtonIcon = () => <KuiButtonIcon className="fa-chevron-right" />;
+
+export {
+  KuiButtonIcon,
+  KuiCreateButtonIcon,
+  KuiDeleteButtonIcon,
+  KuiPreviousButtonIcon,
+  KuiNextButtonIcon,
+};

ui_framework/components/button/index.js

@@ -1,6 +1,3 @@
-export { KuiBasicButton } from './basic_button';
+export * from './button';
+export * from './button_icon';
 export { KuiButtonGroup } from './button_group';
-export { KuiButtonIcon } from './button_icon';
-export { KuiDangerButton } from './danger_button';
-export { KuiHollowButton } from './hollow_button';
-export { KuiPrimaryButton } from './primary_button';

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

@@ -3,7 +3,8 @@ import React from 'react';
 import {
   KuiBasicButton,
   KuiButtonGroup,
-  KuiButtonIcon,
+  KuiNextButtonIcon,
+  KuiPreviousButtonIcon,
 } from '../../../../components';
 
 export default () => (
@@ -23,8 +24,8 @@ export default () => (
     <br />
 
     <KuiButtonGroup isUnited>
-      <KuiBasicButton icon={<KuiButtonIcon type={KuiButtonIcon.TYPE.PREVIOUS} />}/>
-      <KuiBasicButton iconRight={<KuiButtonIcon type={KuiButtonIcon.TYPE.NEXT} />}/>
+      <KuiBasicButton icon={<KuiPreviousButtonIcon />}/>
+      <KuiBasicButton iconRight={<KuiNextButtonIcon />}/>
     </KuiButtonGroup>
   </div>
 );

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

@@ -3,36 +3,40 @@ import React from 'react';
 import {
   KuiBasicButton,
   KuiButtonIcon,
+  KuiCreateButtonIcon,
   KuiDangerButton,
+  KuiDeleteButtonIcon,
+  KuiNextButtonIcon,
+  KuiPreviousButtonIcon,
   KuiPrimaryButton,
 } from '../../../../components';
 
 export default () => (
   <div>
-    <KuiPrimaryButton icon={<KuiButtonIcon type={KuiButtonIcon.TYPE.CREATE} />}>
+    <KuiPrimaryButton icon={<KuiCreateButtonIcon />}>
       Create
     </KuiPrimaryButton>
 
     <br />
 
-    <KuiDangerButton icon={<KuiButtonIcon type={KuiButtonIcon.TYPE.DELETE} />}>
+    <KuiDangerButton icon={<KuiDeleteButtonIcon />}>
       Delete
     </KuiDangerButton>
 
     <br />
 
-    <KuiBasicButton icon={<KuiButtonIcon type={KuiButtonIcon.TYPE.PREVIOUS} />}>
+    <KuiBasicButton icon={<KuiPreviousButtonIcon />}>
       Previous
     </KuiBasicButton>
 
     <br />
 
-    <KuiBasicButton iconRight={<KuiButtonIcon type={KuiButtonIcon.TYPE.NEXT} />}>
+    <KuiBasicButton iconRight={<KuiNextButtonIcon />}>
       Next
     </KuiBasicButton>
 
     <br />
 
-    <KuiBasicButton icon={<KuiButtonIcon classes="fa-plane" />}/>
+    <KuiBasicButton icon={<KuiButtonIcon className="fa-plane" />}/>
   </div>
 );