update messages stories

src/components/messages/MessageManager.tsx

@@ -19,7 +19,7 @@ export const MessageManager: React.FC<IMessageManagerProps> = props => {
   const {
     close,
     options: { timeout },
-    message: { actionBtn, expandText, status, title, text, onUndo }
+    message: { actionBtn, expandText, status = "info", title, text, onUndo }
   } = props;
 
   const [expand, setExpand] = useState(false);
@@ -33,6 +33,7 @@ export const MessageManager: React.FC<IMessageManagerProps> = props => {
         key={props.id}
         aria-describedby="message-id"
         className={classNames(classes.snackbar, {
+          [classes.info]: status === "info",
           [classes.error]: status === "error",
           [classes.success]: status === "success",
           [classes.warning]: status === "warning"

src/components/messages/index.ts

@@ -1,5 +1,4 @@
-import { createContext } from "react";
+import { positions } from "react-alert";
-
 export interface IMessage {
   actionBtn?: {
     label: string;
@@ -12,8 +11,14 @@ export interface IMessage {
   onUndo?: () => void;
   status?: "success" | "error" | "info" | "warning";
 }
-export type IMessageContext = (message: IMessage) => void;
+
-export const MessageContext = createContext<IMessageContext>(undefined);
+export const notificationOptions = {
+  containerStyle: {
+    zIndex: 1000
+  },
+  offset: "20px",
+  position: positions.TOP_RIGHT,
+  timeout: 3000
+};
 
 export * from "./MessageManager";
-export default MessageContext.Consumer;

src/components/messages/styles.ts

@@ -26,7 +26,7 @@ export const useStyles = makeStyles(
       color: "#fff",
       padding: 10,
       position: "absolute",
-      right: 0,
+      right: 5,
       top: 7
     },
     closeBtnInfo: {
@@ -96,6 +96,13 @@ export const useStyles = makeStyles(
     hiddenText: {
       maxHeight: 0
     },
+    info: {
+      "& > div:first-child": {
+        "&:before": {
+          backgroundImage: `url(${infoIcon})`
+        }
+      }
+    },
     progressBar: {
       backgroundColor: infoColor,
       height: 8,
@@ -128,7 +135,6 @@ export const useStyles = makeStyles(
       },
       "& > div:first-child": {
         "&:before": {
-          backgroundImage: `url(${infoIcon})`,
           backgroundRepeat: "no-repeat",
           backgroundSize: "contain",
           content: "''",
@@ -139,10 +145,11 @@ export const useStyles = makeStyles(
           top: 13,
           width: 32
         },
-        paddingTop: 10,
+        paddingTop: 16,
         position: "relative"
       },
-      borderRadius: 4
+      borderRadius: 4,
+      paddingBottom: 15
     },
     snackbarContainer: {
       borderRadius: 4,

src/index.tsx

@@ -1,11 +1,12 @@
 import { API_URI, APP_MOUNT_URI, GTM_ID } from "./config";
-import { Provider as AlertProvider, positions } from "react-alert";
 import Auth, { getAuthToken, removeAuthToken } from "./auth";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 import ConfigurationSection, { createConfigurationMenu } from "./configuration";
 import { ErrorResponse, onError } from "apollo-link-error";
 import { InMemoryCache, defaultDataIdFromObject } from "apollo-cache-inmemory";
+import { MessageManager, notificationOptions } from "./components/messages";
 
+import { Provider as AlertProvider } from "react-alert";
 import { ApolloClient } from "apollo-client";
 import { ApolloLink } from "apollo-link";
 import { ApolloProvider } from "react-apollo";
@@ -24,7 +25,6 @@ import ErrorBoundary from "react-error-boundary";
 import HomePage from "./home";
 import { LocaleProvider } from "./components/Locale";
 import LoginLoading from "./auth/components/LoginLoading/LoginLoading";
-import { MessageManager } from "./components/messages";
 import NavigationSection from "./navigation";
 import Navigator from "@saleor/components/Navigator";
 import { NotFound } from "./NotFound";
@@ -127,15 +127,6 @@ const apolloClient = new ApolloClient({
   link: invalidTokenLink.concat(authLink.concat(link))
 });
 
-const notificationOptions = {
-  containerStyle: {
-    zIndex: 1000
-  },
-  offset: "20px",
-  position: positions.TOP_RIGHT,
-  timeout: 3000
-};
-
 const App: React.FC = () => {
   const isDark = localStorage.getItem("theme") === "true";
 

src/storybook/Decorator.tsx

@@ -1,22 +1,13 @@
 import { Locale, RawLocaleProvider } from "@saleor/components/Locale";
 import React from "react";
+import { Provider as AlertProvider } from "react-alert";
 import { IntlProvider } from "react-intl";
 
 import { Provider as DateProvider } from "../components/Date/DateContext";
-import { MessageManager } from "../components/messages";
+import { MessageManager, notificationOptions } from "../components/messages";
 import ThemeProvider from "../components/Theme";
 import { TimezoneProvider } from "../components/Timezone";
 
-const messageProps = {
-  close: () => undefined,
-  id: "id",
-  message: {
-    text: "Test"
-  },
-  options: {},
-  style: {}
-};
-
 export const Decorator = storyFn => (
   <IntlProvider defaultLocale={Locale.EN} locale={Locale.EN}>
     <RawLocaleProvider
@@ -28,7 +19,7 @@ export const Decorator = storyFn => (
       <DateProvider value={+new Date("2018-08-07T14:30:44+00:00")}>
         <TimezoneProvider value="America/New_York">
           <ThemeProvider isDefaultDark={false}>
-            <MessageManager {...messageProps}>
+            <AlertProvider {...notificationOptions} template={MessageManager}>
               <div
                 style={{
                   padding: 24
@@ -36,7 +27,7 @@ export const Decorator = storyFn => (
               >
                 {storyFn()}
               </div>
-            </MessageManager>
+            </AlertProvider>
           </ThemeProvider>
         </TimezoneProvider>
       </DateProvider>

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -2612,6 +2612,118 @@ exports[`Storyshots Generics / Global messages default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Generics / Global messages with action 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+    style="margin:auto;overflow:visible;position:relative;width:400px"
+  >
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <button
+        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+        style="display:block;margin:auto"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label-id"
+        >
+          Push message
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Generics / Global messages with error status 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+    style="margin:auto;overflow:visible;position:relative;width:400px"
+  >
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <button
+        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+        style="display:block;margin:auto"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label-id"
+        >
+          Push message
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Generics / Global messages with expandText 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+    style="margin:auto;overflow:visible;position:relative;width:400px"
+  >
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <button
+        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+        style="display:block;margin:auto"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label-id"
+        >
+          Push message
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Generics / Global messages with success status 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+    style="margin:auto;overflow:visible;position:relative;width:400px"
+  >
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <button
+        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+        style="display:block;margin:auto"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label-id"
+        >
+          Push message
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Generics / Global messages with undo action 1`] = `
 <div
   style="padding:24px"
@@ -2640,6 +2752,34 @@ exports[`Storyshots Generics / Global messages with undo action 1`] = `
 </div>
 `;
 
+exports[`Storyshots Generics / Global messages with warning status 1`] = `
+<div
+  style="padding:24px"
+>
+  <div
+    class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+    style="margin:auto;overflow:visible;position:relative;width:400px"
+  >
+    <div
+      class="MuiCardContent-root-id"
+    >
+      <button
+        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
+        style="display:block;margin:auto"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiButton-label-id"
+        >
+          Push message
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Generics / Link with choices default 1`] = `
 <div
   style="padding:24px"

src/storybook/stories/components/messages.tsx

@@ -1,4 +1,5 @@
 import Button from "@material-ui/core/Button";
+import { IMessage } from "@saleor/components/messages";
 import useNotifier from "@saleor/hooks/useNotifier";
 import { storiesOf } from "@storybook/react";
 import React from "react";
@@ -6,10 +7,18 @@ import React from "react";
 import CardDecorator from "../../CardDecorator";
 import Decorator from "../../Decorator";
 
-interface StoryProps {
+const props = {
-  undo: boolean;
+  text: "This is message",
-}
+  title: "Title"
-const Story: React.FC<StoryProps> = ({ undo }) => {
+};
+const Story: React.FC<IMessage> = ({
+  actionBtn,
+  expandText,
+  onUndo,
+  status,
+  title,
+  text
+}) => {
   const pushMessage = useNotifier();
 
   return (
@@ -18,8 +27,12 @@ const Story: React.FC<StoryProps> = ({ undo }) => {
       variant="contained"
       onClick={() =>
         pushMessage({
-          onUndo: undo ? () => undefined : undefined,
+          actionBtn,
-          text: "This is message"
+          expandText,
+          onUndo: onUndo ? () => undefined : undefined,
+          status,
+          text,
+          title
         })
       }
       style={{ display: "block", margin: "auto" }}
@@ -32,5 +45,39 @@ const Story: React.FC<StoryProps> = ({ undo }) => {
 storiesOf("Generics / Global messages", module)
   .addDecorator(CardDecorator)
   .addDecorator(Decorator)
-  .add("default", () => <Story undo={false} />)
+  .add("default", () => <Story {...props} />)
-  .add("with undo action", () => <Story undo={true} />);
+  .add("with undo action", () => <Story onUndo={() => undefined} {...props} />)
+  .add("with expandText", () => (
+    <Story expandText={"Some expanded text"} {...props} />
+  ))
+  .add("with action", () => (
+    <Story
+      actionBtn={{ action: () => undefined, label: "Action" }}
+      {...props}
+    />
+  ))
+  .add("with success status", () => (
+    <Story
+      {...props}
+      actionBtn={{ action: () => undefined, label: "Action" }}
+      status="success"
+      title="Success!"
+    />
+  ))
+  .add("with error status", () => (
+    <Story
+      {...props}
+      actionBtn={{ action: () => undefined, label: "Action" }}
+      expandText={"Some expanded text"}
+      status="error"
+      title="Error"
+    />
+  ))
+  .add("with warning status", () => (
+    <Story
+      {...props}
+      expandText={"Some expanded text"}
+      status="warning"
+      title="Warning"
+    />
+  ));

src/theme.ts

@@ -357,8 +357,7 @@ export default (colors: IThemeColors): Theme =>
             "0 6px 10px 0px rgba(0, 0, 0, 0.15), 0 1px 18px 0px rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.10)",
           color: colors.font.default,
           display: "block",
-          maxWidth: 480,
+          maxWidth: 480
-          padding: 0
         }
       },
       MuiSwitch: {