diff --git a/src/components/messages/MessageManager.tsx b/src/components/messages/MessageManager.tsx index cfe811814..309d2e10d 100644 --- a/src/components/messages/MessageManager.tsx +++ b/src/components/messages/MessageManager.tsx @@ -19,7 +19,7 @@ export const MessageManager: React.FC = 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 = 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" diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts index ebb434f6d..c86fde986 100644 --- a/src/components/messages/index.ts +++ b/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(undefined); + +export const notificationOptions = { + containerStyle: { + zIndex: 1000 + }, + offset: "20px", + position: positions.TOP_RIGHT, + timeout: 3000 +}; export * from "./MessageManager"; -export default MessageContext.Consumer; diff --git a/src/components/messages/styles.ts b/src/components/messages/styles.ts index 04301a84f..934309e85 100644 --- a/src/components/messages/styles.ts +++ b/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, diff --git a/src/index.tsx b/src/index.tsx index 3ca1ada8a..211cfa7b7 100644 --- a/src/index.tsx +++ b/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"; diff --git a/src/storybook/Decorator.tsx b/src/storybook/Decorator.tsx index fb3f019c2..9f8426de2 100644 --- a/src/storybook/Decorator.tsx +++ b/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 => ( ( - +
( > {storyFn()}
- + diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 3e65e29ed..3a3bb39b8 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -2612,6 +2612,118 @@ exports[`Storyshots Generics / Global messages default 1`] = ` `; +exports[`Storyshots Generics / Global messages with action 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`Storyshots Generics / Global messages with error status 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`Storyshots Generics / Global messages with expandText 1`] = ` +
+
+
+ +
+
+
+`; + +exports[`Storyshots Generics / Global messages with success status 1`] = ` +
+
+
+ +
+
+
+`; + exports[`Storyshots Generics / Global messages with undo action 1`] = `
`; +exports[`Storyshots Generics / Global messages with warning status 1`] = ` +
+
+
+ +
+
+
+`; + exports[`Storyshots Generics / Link with choices default 1`] = `
= ({ undo }) => { +const props = { + text: "This is message", + title: "Title" +}; +const Story: React.FC = ({ + actionBtn, + expandText, + onUndo, + status, + title, + text +}) => { const pushMessage = useNotifier(); return ( @@ -18,8 +27,12 @@ const Story: React.FC = ({ undo }) => { variant="contained" onClick={() => pushMessage({ - onUndo: undo ? () => undefined : undefined, - text: "This is message" + actionBtn, + expandText, + onUndo: onUndo ? () => undefined : undefined, + status, + text, + title }) } style={{ display: "block", margin: "auto" }} @@ -32,5 +45,39 @@ const Story: React.FC = ({ undo }) => { storiesOf("Generics / Global messages", module) .addDecorator(CardDecorator) .addDecorator(Decorator) - .add("default", () => ) - .add("with undo action", () => ); + .add("default", () => ) + .add("with undo action", () => undefined} {...props} />) + .add("with expandText", () => ( + + )) + .add("with action", () => ( + undefined, label: "Action" }} + {...props} + /> + )) + .add("with success status", () => ( + undefined, label: "Action" }} + status="success" + title="Success!" + /> + )) + .add("with error status", () => ( + undefined, label: "Action" }} + expandText={"Some expanded text"} + status="error" + title="Error" + /> + )) + .add("with warning status", () => ( + + )); diff --git a/src/theme.ts b/src/theme.ts index 610cdcd77..bddcd3d94 100644 --- a/src/theme.ts +++ b/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, - padding: 0 + maxWidth: 480 } }, MuiSwitch: {