Merge with default

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

@@ -2559,6 +2559,8 @@ exports[`Storyshots Table|Table TextColumn 1`] = `
 </table>
 `;
 
+exports[`Storyshots Toast Click to close 1`] = `null`;
+
 exports[`Storyshots Toast Danger 1`] = `null`;
 
 exports[`Storyshots Toast Info 1`] = `null`;

scm-ui/ui-components/src/apiclient.ts

@@ -241,7 +241,7 @@ class ApiClient {
       es.addEventListener(type, listeners[type]);
     }
 
-    return es.close;
+    return () => es.close();
   }
 }
 

scm-ui/ui-components/src/toast/ToastButton.tsx

@@ -1,12 +1,13 @@
-import React, { FC, useContext } from "react";
+import React, { FC, useContext, MouseEvent } from "react";
 import { ToastThemeContext, Themeable } from "./themes";
 import styled from "styled-components";
 
 type Props = {
   icon?: string;
+  onClick?: () => void;
 };
 
-const ThemedButton = styled.div.attrs(props => ({
+const ThemedButton = styled.button.attrs(props => ({
   className: "button"
 }))<Themeable>`
   color: ${props => props.theme.primary};
@@ -25,10 +26,18 @@ const ToastButtonIcon = styled.i`
   margin-right: 0.25rem;
 `;
 
-const ToastButton: FC<Props> = ({ icon, children }) => {
+const ToastButton: FC<Props> = ({ icon, onClick, children }) => {
   const theme = useContext(ToastThemeContext);
+
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    if (onClick) {
+      e.preventDefault();
+      onClick();
+    }
+  };
+
   return (
-    <ThemedButton theme={theme}>
+    <ThemedButton theme={theme} onClick={handleClick}>
       {icon && <ToastButtonIcon className={`fas fa-fw fa-${icon}`} />} {children}
     </ThemedButton>
   );

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

@@ -26,7 +26,31 @@ const Animator = () => {
   );
 };
 
+const Closeable = () => {
+  const [show, setShow] = useState(true);
+
+  const hide = () => {
+    setShow(false);
+  };
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <Toast type="success" title="Awesome feature">
+      <p>Close the message with a click</p>
+      <ToastButtons>
+        <ToastButton icon="times" onClick={hide}>
+          Click to close
+        </ToastButton>
+      </ToastButtons>
+    </Toast>
+  );
+};
+
 toastStories.add("Open/Close", () => <Animator />);
+toastStories.add("Click to close", () => <Closeable />);
 
 types.forEach(type => {
   toastStories.add(type.charAt(0).toUpperCase() + type.slice(1), () => (