margin between toast button & give access to toast types (#169)

* give access to toast types

* fix: toast button display
feature: support on receive class name prop and give access to toast type constants

* chore: undo story change

* chore: bump version

src/components/Toast/Toast.jsx

@@ -33,9 +33,8 @@ const getIcon = (type, icon) => {
     />
   ) : null;
 };
-
-const Toast = ({ open, autoHideDuration, type, icon, hideIcon, action, children, closeable, onClose }) => {
-  const classNames = useMemo(() => cx("monday-style-toast", `monday-style-toast--type-${type}`), [type]);
+const Toast = ({ open, autoHideDuration, type, icon, hideIcon, action, children, closeable, onClose, className }) => {
+  const classNames = useMemo(() => cx("monday-style-toast", `monday-style-toast--type-${type}`, className), [type]);
   const handleClose = useCallback(() => {
     if (onClose) {
       onClose();
@@ -95,8 +94,11 @@ const Toast = ({ open, autoHideDuration, type, icon, hideIcon, action, children,
   );
 };
 
+Toast.types = TOAST_TYPES;
+
 Toast.propTypes = {
   /** If true, Toast is open (visible) */
+  className: PropTypes.string,
   open: PropTypes.bool,
   type: PropTypes.oneOf([TOAST_TYPES.NORMAL, TOAST_TYPES.POSITIVE, TOAST_TYPES.NEGATIVE]),
   /** Possible to override the dafult icon */
@@ -116,6 +118,7 @@ Toast.propTypes = {
 
 Toast.defaultProps = {
   type: TOAST_TYPES.NORMAL,
+  className: "",
   open: false,
   action: null,
   hideIcon: false,

src/components/Toast/Toast.scss

@@ -35,6 +35,7 @@
 
   &-action {
     padding-right: $spacing-small;
+    margin-left: $spacing-large;
   }
 
   &--type {

src/components/Toast/__stories__/toast.stories.js

@@ -1,21 +1,21 @@
-import { useState } from "react";
+import React, { useMemo, useState } from "react";
 import { number, select, boolean } from "@storybook/addon-knobs";
-import { TOAST_TYPES } from "../ToastConstants";
 import Toast from "../Toast";
 import Button from "../../Button/Button";
 import Icon from "../../Icon/Icon";
 import Send from "../../Icon/Icons/components/Send";
 import { StoryStateColumn, StoryStateRow } from "../../storybook-helpers";
 
-export const Toasts = () => {
+export const Sandbox = () => {
   const sendIconElement = (
     <Icon iconType={Icon.type.SVG} clickable={false} icon={Send} iconSize="20px" ignoreFocusStyle />
   );
+
   const knobs = {
     type: select("type", {
-      Normal: TOAST_TYPES.NORMAL,
-      Positive: TOAST_TYPES.POSITIVE,
-      Negative: TOAST_TYPES.NEGATIVE
+      Normal: Toast.types.NORMAL,
+      Positive: Toast.types.POSITIVE,
+      Negative: Toast.types.NEGATIVE
     }),
     closeable: boolean("closeable", true),
     autoHideDuration: number("autoHideDuration", 0),
@@ -52,14 +52,13 @@ export const Toasts = () => {
             autoHideDuration={knobs.autoHideDuration}
             hideIcon={knobs.hideIcon}
           >
-            Something Happened
+            Something Happened!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
           </Toast>
         </StoryStateColumn>
       </StoryStateRow>
     </section>
   );
 };
-
 export default {
   title: "Components|Toast",
   component: Toast