Add IconButton

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -282,6 +282,26 @@ exports[`Storyshots Buttons|EditButton Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Buttons|IconButton Default 1`] = `
+<div
+  className="sc-htoDjs bIDNS"
+>
+  <button
+    className="button is-default"
+    onClick={[Function]}
+    type="button"
+  >
+    <span
+      className="icon is-medium"
+    >
+      <i
+        className="fas fa-icons has-text-inherit"
+      />
+    </span>
+  </button>
+</div>
+`;
+
 exports[`Storyshots Buttons|SubmitButton Default 1`] = `
 <div
   className="sc-htoDjs bIDNS"

scm-ui/ui-components/src/buttons/IconButton.tsx

@@ -0,0 +1,56 @@
+import React, { MouseEvent } from "react";
+import { withRouter, RouteComponentProps } from "react-router-dom";
+import classNames from "classnames";
+import Icon from "../Icon";
+
+export type ButtonProps = {
+  icon: string;
+  title?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  action?: (event: MouseEvent) => void;
+  link?: string;
+  className?: string;
+};
+
+type Props = ButtonProps &
+  RouteComponentProps & {
+    type?: "button" | "submit" | "reset";
+    color?: string;
+  };
+
+class IconButton extends React.Component<Props> {
+  static defaultProps: Partial<Props> = {
+    type: "button",
+    color: "default"
+  };
+
+  onClick = (event: React.MouseEvent) => {
+    const { action, link, history } = this.props;
+    if (action) {
+      action(event);
+    } else if (link) {
+      history.push(link);
+    }
+  };
+
+  render() {
+    const { icon, title, loading, disabled, type, color, className } = this.props;
+    const loadingClass = loading ? "is-loading" : "";
+    return (
+      <button
+        className={classNames("button", "is-" + color, loadingClass, className)}
+        title={title}
+        type={type}
+        disabled={disabled}
+        onClick={this.onClick}
+      >
+        <span className="icon is-medium">
+          <Icon name={icon} color="inherit" />
+        </span>
+      </button>
+    );
+  }
+}
+
+export default withRouter(IconButton);

scm-ui/ui-components/src/buttons/index.stories.tsx

@@ -3,6 +3,7 @@ import Button from "./Button";
 import { storiesOf } from "@storybook/react";
 import styled from "styled-components";
 import { MemoryRouter } from "react-router-dom";
+import IconButton from "./IconButton";
 import AddButton from "./AddButton";
 import CreateButton from "./CreateButton";
 import DeleteButton from "./DeleteButton";
@@ -48,7 +49,7 @@ const buttonStory = (name: string, storyFn: () => ReactElement) => {
     .addDecorator(SpacingDecorator)
     .add("Default", storyFn);
 };
-
+buttonStory("IconButton", () => <IconButton icon="icons" />);
 buttonStory("AddButton", () => <AddButton>Add</AddButton>);
 buttonStory("CreateButton", () => <CreateButton>Create</CreateButton>);
 buttonStory("DeleteButton", () => <DeleteButton>Delete</DeleteButton>);

scm-ui/ui-components/src/buttons/index.ts

@@ -2,6 +2,7 @@
 
 export { default as AddButton } from "./AddButton";
 export { default as Button } from "./Button";
+export { default as IconButton } from "./IconButton";
 export { default as CreateButton } from "./CreateButton";
 export { default as DeleteButton } from "./DeleteButton";
 export { default as EditButton } from "./EditButton";