Redesign KuiButton and KuiButtonIcon to accept a type prop.

ui_framework/README.md

@@ -16,18 +16,9 @@ Here are the components you can import from the Framnework:
 
 ```javascript
 import {
-  KuiBasicButton,
   KuiButton,
   KuiButtonGroup,
   KuiButtonIcon,
-  KuiCreateButtonIcon,
-  KuiDangerButton,
-  KuiDeleteButtonIcon,
-  KuiHollowButton,
-  KuiLoadingButtonIcon,
-  KuiNextButtonIcon,
-  KuiPreviousButtonIcon,
-  KuiPrimaryButton,
 } from '../path/to/ui_framework/components';
 ```
 

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

@@ -1,13 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`KuiBasicButton is rendered with basic class 1`] = `
-<button
-  class="kuiButton kuiButton--basic"
->
-  <span />
-</button>
-`;
-
 exports[`KuiButton Baseline is rendered 1`] = `
 <button
   className="kuiButton"
@@ -104,7 +96,9 @@ exports[`KuiButton Props isLoading doesn't render the icon prop 1`] = `
   onClick={[Function]}
 >
   <span>
-    <KuiLoadingButtonIcon />
+    <KuiButtonIcon
+      type="LOADING"
+    />
   </span>
 </button>
 `;
@@ -115,7 +109,9 @@ exports[`KuiButton Props isLoading renders a spinner 1`] = `
   onClick={[Function]}
 >
   <span>
-    <KuiLoadingButtonIcon />
+    <KuiButtonIcon
+      type="LOADING"
+    />
   </span>
 </button>
 `;
@@ -166,23 +162,31 @@ exports[`KuiButton Props testSubject is rendered 1`] = `
 </button>
 `;
 
-exports[`KuiDangerButton is rendered with danger class 1`] = `
+exports[`KuiButton Props type basic renders the basic class 1`] = `
+<button
+  class="kuiButton kuiButton--basic"
+>
+  <span />
+</button>
+`;
+
+exports[`KuiButton Props type danger renders the danger class 1`] = `
 <button
   class="kuiButton kuiButton--danger"
 >
   <span />
 </button>
 `;
 
-exports[`KuiHollowButton is rendered with hollow class 1`] = `
+exports[`KuiButton Props type hollow renders the hollow class 1`] = `
 <button
   class="kuiButton kuiButton--hollow"
 >
   <span />
 </button>
 `;
 
-exports[`KuiPrimaryButton is rendered with primary class 1`] = `
+exports[`KuiButton Props type primary renders the primary class 1`] = `
 <button
   class="kuiButton kuiButton--primary"
 >

ui_framework/components/button/__snapshots__/button_icon.test.js.snap

@@ -12,31 +12,31 @@ exports[`KuiButtonIcon Props className renders the classes 1`] = `
 />
 `;
 
-exports[`KuiCreateButtonIcon is rendered with create class 1`] = `
+exports[`KuiButtonIcon Props type create renders the create class 1`] = `
 <span
   class="kuiButton__icon kuiIcon fa-plus"
 />
 `;
 
-exports[`KuiDeleteButtonIcon is rendered with delete class 1`] = `
+exports[`KuiButtonIcon Props type delete renders the delete class 1`] = `
 <span
   class="kuiButton__icon kuiIcon fa-trash"
 />
 `;
 
-exports[`KuiLoadingButtonIcon is rendered with loading class 1`] = `
+exports[`KuiButtonIcon Props type loading renders the loading class 1`] = `
 <span
   class="kuiButton__icon kuiIcon fa-spinner fa-spin"
 />
 `;
 
-exports[`KuiNextButtonIcon is rendered with next class 1`] = `
+exports[`KuiButtonIcon Props type next renders the next class 1`] = `
 <span
   class="kuiButton__icon kuiIcon fa-chevron-right"
 />
 `;
 
-exports[`KuiPreviousButtonIcon is rendered with previous class 1`] = `
+exports[`KuiButtonIcon Props type previous renders the previous class 1`] = `
 <span
   class="kuiButton__icon kuiIcon fa-chevron-left"
 />

ui_framework/components/button/button.js

@@ -5,15 +5,23 @@ import React, {
 import classNames from 'classnames';
 import keyMirror from 'keymirror';
 
-import { KuiLoadingButtonIcon } from './button_icon';
+import { KuiButtonIcon } from './button_icon';
 
 const KuiButton = props => {
   const icon =
     props.isLoading
-    ? <KuiLoadingButtonIcon />
+    ? <KuiButtonIcon type={KuiButtonIcon.TYPE.LOADING} />
     : props.icon;
 
+  const typeToClassNameMap = {
+    [KuiButton.TYPE.BASIC]: 'kuiButton--basic',
+    [KuiButton.TYPE.HOLLOW]: 'kuiButton--hollow',
+    [KuiButton.TYPE.DANGER]: 'kuiButton--danger',
+    [KuiButton.TYPE.PRIMARY]: 'kuiButton--primary',
+  };
+
   const className = classNames('kuiButton', props.className, {
+    [typeToClassNameMap[KuiButton.TYPE[props.type]]]: props.type,
     'kuiButton--iconText': icon,
   });
 
@@ -91,7 +99,15 @@ const KuiButton = props => {
   );
 };
 
+KuiButton.TYPE = keyMirror({
+  BASIC: null,
+  HOLLOW: null,
+  DANGER: null,
+  PRIMARY: null,
+});
+
 KuiButton.propTypes = {
+  type: PropTypes.string,
   testSubject: PropTypes.string,
   icon: PropTypes.node,
   isIconOnRight: PropTypes.bool,
@@ -110,36 +126,36 @@ KuiButton.propTypes = {
   ]),
 };
 
-function createButtonVariation(hardCodedProps) {
-  const ButtonVariation = props => {
-    return React.createElement(KuiButton, Object.assign({}, props, hardCodedProps));
-  };
+// function createButtonVariation(hardCodedProps) {
+//   const ButtonVariation = props => {
+//     return React.createElement(KuiButton, Object.assign({}, props, hardCodedProps));
+//   };
 
-  ButtonVariation.propTypes = Object.assign({}, KuiButton.propTypes);
+//   ButtonVariation.propTypes = Object.assign({}, KuiButton.propTypes);
 
-  return ButtonVariation;
-}
+//   return ButtonVariation;
+// }
 
-const KuiBasicButton = createButtonVariation({
-  className: 'kuiButton--basic',
-});
+// const KuiBasicButton = createButtonVariation({
+//   className: 'kuiButton--basic',
+// });
 
-const KuiHollowButton = createButtonVariation({
-  className: 'kuiButton--hollow',
-});
+// const KuiHollowButton = createButtonVariation({
+//   className: 'kuiButton--hollow',
+// });
 
-const KuiDangerButton = createButtonVariation({
-  className: 'kuiButton--danger',
-});
+// const KuiDangerButton = createButtonVariation({
+//   className: 'kuiButton--danger',
+// });
 
-const KuiPrimaryButton = createButtonVariation({
-  className: 'kuiButton--primary',
-});
+// const KuiPrimaryButton = createButtonVariation({
+//   className: 'kuiButton--primary',
+// });
 
 export {
   KuiButton,
-  KuiBasicButton,
-  KuiHollowButton,
-  KuiDangerButton,
-  KuiPrimaryButton,
+  // KuiBasicButton,
+  // KuiHollowButton,
+  // KuiDangerButton,
+  // KuiPrimaryButton,
 };

ui_framework/components/button/button.test.js

@@ -7,10 +7,6 @@ import sinon from 'sinon';
 
 import {
   KuiButton,
-  KuiBasicButton,
-  KuiHollowButton,
-  KuiDangerButton,
-  KuiPrimaryButton,
 } from './button';
 
 describe('KuiButton', () => {
@@ -26,6 +22,52 @@ describe('KuiButton', () => {
   });
 
   describe('Props', () => {
+    describe('type', () => {
+      describe('basic', () => {
+        test('renders the basic class', () => {
+          const $button = render(
+            <KuiButton type={KuiButton.TYPE.BASIC} />
+          );
+
+          expect($button)
+            .toMatchSnapshot();
+        });
+      });
+
+      describe('hollow', () => {
+        test('renders the hollow class', () => {
+          const $button = render(
+            <KuiButton type={KuiButton.TYPE.HOLLOW} />
+          );
+
+          expect($button)
+            .toMatchSnapshot();
+        });
+      });
+
+      describe('danger', () => {
+        test('renders the danger class', () => {
+          const $button = render(
+            <KuiButton type={KuiButton.TYPE.DANGER} />
+          );
+
+          expect($button)
+            .toMatchSnapshot();
+        });
+      });
+
+      describe('primary', () => {
+        test('renders the primary class', () => {
+          const $button = render(
+            <KuiButton type={KuiButton.TYPE.PRIMARY} />
+          );
+
+          expect($button)
+            .toMatchSnapshot();
+        });
+      });
+    });
+
     describe('testSubject', () => {
       test('is rendered', () => {
         const $button = shallow(
@@ -252,47 +294,3 @@ describe('KuiButton', () => {
     });
   });
 });
-
-describe('KuiBasicButton', () => {
-  test('is rendered with basic class', () => {
-    const $button = render(
-      <KuiBasicButton />
-    );
-
-    expect($button)
-      .toMatchSnapshot();
-  });
-});
-
-describe('KuiHollowButton', () => {
-  test('is rendered with hollow class', () => {
-    const $button = render(
-      <KuiHollowButton />
-    );
-
-    expect($button)
-      .toMatchSnapshot();
-  });
-});
-
-describe('KuiDangerButton', () => {
-  test('is rendered with danger class', () => {
-    const $button = render(
-      <KuiDangerButton />
-    );
-
-    expect($button)
-      .toMatchSnapshot();
-  });
-});
-
-describe('KuiPrimaryButton', () => {
-  test('is rendered with primary class', () => {
-    const $button = render(
-      <KuiPrimaryButton />
-    );
-
-    expect($button)
-      .toMatchSnapshot();
-  });
-});

ui_framework/components/button/button_icon.js

@@ -6,31 +6,36 @@ import classNames from 'classnames';
 import keyMirror from 'keymirror';
 
 const KuiButtonIcon = props => {
-  const iconClasses = classNames(
-    'kuiButton__icon kuiIcon',
-    props.className,
-  );
+  const typeToClassNameMap = {
+    [KuiButtonIcon.TYPE.CREATE]: 'fa-plus',
+    [KuiButtonIcon.TYPE.DELETE]: 'fa-trash',
+    [KuiButtonIcon.TYPE.PREVIOUS]: 'fa-chevron-left',
+    [KuiButtonIcon.TYPE.NEXT]: 'fa-chevron-right',
+    [KuiButtonIcon.TYPE.LOADING]: 'fa-spinner fa-spin',
+  };
+
+  const iconClasses = classNames('kuiButton__icon kuiIcon', props.className, {
+    [typeToClassNameMap[KuiButtonIcon.TYPE[props.type]]]: props.type,
+  });
 
   return (
     <span className={iconClasses} />
   );
 };
 
+KuiButtonIcon.TYPE = keyMirror({
+  CREATE: null,
+  DELETE: null,
+  PREVIOUS: null,
+  NEXT: null,
+  LOADING: null,
+});
+
 KuiButtonIcon.propTypes = {
+  type: PropTypes.string,
   className: PropTypes.string,
 };
 
-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" />;
-const KuiLoadingButtonIcon = () => <KuiButtonIcon className="fa-spinner fa-spin" />;
-
 export {
   KuiButtonIcon,
-  KuiCreateButtonIcon,
-  KuiDeleteButtonIcon,
-  KuiPreviousButtonIcon,
-  KuiNextButtonIcon,
-  KuiLoadingButtonIcon,
 };