From 9132167a6cd9a18a325bc4fec2b7021a46f5ba9b Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Tue, 12 Nov 2019 17:30:37 +0100
Subject: [PATCH] Add title option to Button and remove IconButton

---
 .../src/__snapshots__/storyshots.test.ts.snap | 20 -------
 scm-ui/ui-components/src/buttons/Button.tsx   | 17 +++++-
 .../ui-components/src/buttons/IconButton.tsx  | 56 -------------------
 .../src/buttons/index.stories.tsx             |  2 -
 scm-ui/ui-components/src/buttons/index.ts     |  1 -
 5 files changed, 16 insertions(+), 80 deletions(-)
 delete mode 100644 scm-ui/ui-components/src/buttons/IconButton.tsx

diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index b7852bd927..0350b44219 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -282,26 +282,6 @@ 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"
diff --git a/scm-ui/ui-components/src/buttons/Button.tsx b/scm-ui/ui-components/src/buttons/Button.tsx
index 8c1004ac52..3507ba7a06 100644
--- a/scm-ui/ui-components/src/buttons/Button.tsx
+++ b/scm-ui/ui-components/src/buttons/Button.tsx
@@ -18,6 +18,7 @@ export type ButtonProps = {
 
 type Props = ButtonProps &
   RouteComponentProps & {
+    title?: string;
     type?: "button" | "submit" | "reset";
     color?: string;
   };
@@ -38,7 +39,19 @@ class Button extends React.Component<Props> {
   };
 
   render() {
-    const { label, loading, disabled, type, color, className, icon, fullWidth, reducedMobile, children } = this.props;
+    const {
+      label,
+      title,
+      loading,
+      disabled,
+      type,
+      color,
+      className,
+      icon,
+      fullWidth,
+      reducedMobile,
+      children
+    } = this.props;
     const loadingClass = loading ? "is-loading" : "";
     const fullWidthClass = fullWidth ? "is-fullwidth" : "";
     const reducedMobileClass = reducedMobile ? "is-reduced-mobile" : "";
@@ -46,6 +59,7 @@ class Button extends React.Component<Props> {
       return (
         <button
           type={type}
+          title={title}
           disabled={disabled}
           onClick={this.onClick}
           className={classNames("button", "is-" + color, loadingClass, fullWidthClass, reducedMobileClass, className)}
@@ -63,6 +77,7 @@ class Button extends React.Component<Props> {
     return (
       <button
         type={type}
+        title={title}
         disabled={disabled}
         onClick={this.onClick}
         className={classNames("button", "is-" + color, loadingClass, fullWidthClass, className)}
diff --git a/scm-ui/ui-components/src/buttons/IconButton.tsx b/scm-ui/ui-components/src/buttons/IconButton.tsx
deleted file mode 100644
index 89ae286919..0000000000
--- a/scm-ui/ui-components/src/buttons/IconButton.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-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);
diff --git a/scm-ui/ui-components/src/buttons/index.stories.tsx b/scm-ui/ui-components/src/buttons/index.stories.tsx
index 4da801f8a1..79d5be448c 100644
--- a/scm-ui/ui-components/src/buttons/index.stories.tsx
+++ b/scm-ui/ui-components/src/buttons/index.stories.tsx
@@ -3,7 +3,6 @@ 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";
@@ -49,7 +48,6 @@ 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>);
diff --git a/scm-ui/ui-components/src/buttons/index.ts b/scm-ui/ui-components/src/buttons/index.ts
index 3bbfd05c4b..c5d536133f 100644
--- a/scm-ui/ui-components/src/buttons/index.ts
+++ b/scm-ui/ui-components/src/buttons/index.ts
@@ -2,7 +2,6 @@
 
 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";