From 4fcc3eec5e4fece00f987777788617150217fe2f Mon Sep 17 00:00:00 2001 From: Kamil Pastuszka <33246308+kamilpastuszka@users.noreply.github.com> Date: Fri, 17 Sep 2021 08:09:45 +0000 Subject: [PATCH] Add Demo Banner (#1416) --- CHANGELOG.md | 1 + locale/defaultMessages.json | 12 +++ package-lock.json | 102 ++++++++++++++++------- package.json | 1 + src/components/DemoBanner/DemoBanner.tsx | 60 +++++++++++++ src/components/DemoBanner/constants.ts | 6 ++ src/components/DemoBanner/index.ts | 2 + src/components/DemoBanner/styles.ts | 55 ++++++++++++ src/index.tsx | 4 +- 9 files changed, 213 insertions(+), 30 deletions(-) create mode 100644 src/components/DemoBanner/DemoBanner.tsx create mode 100644 src/components/DemoBanner/constants.ts create mode 100644 src/components/DemoBanner/index.ts create mode 100644 src/components/DemoBanner/styles.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index f670d7db0..d103b89d5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -81,6 +81,7 @@ All notable, unreleased changes to this project will be documented in this file. - Add app dashboard extensions - #1292 by @jwm0 - Introduce fulfillment creation - #1241 by @orzechdev - Introduce Click&Collect feature - #1268 by @kuchichan +- Add Demo Banner - #1331 by @kamilpastuszka # 2.11.1 diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index a34688e8e..bdef4229a 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -2079,6 +2079,18 @@ "src_dot_components_dot_DeleteFilterTabDialog_dot_71479100": { "string": "Are you sure you want to delete {name} search tab?" }, + "src_dot_components_dot_DemoBanner_dot_1647850230": { + "string": "Storefront" + }, + "src_dot_components_dot_DemoBanner_dot_214739616": { + "string": "Play with GraphQL API" + }, + "src_dot_components_dot_DemoBanner_dot_2367386033": { + "string": "API" + }, + "src_dot_components_dot_DemoBanner_dot_4093572282": { + "string": "See DEMO STOREFRONT" + }, "src_dot_components_dot_ErrorMessageCard_dot_2845142593": { "context": "header", "string": "Error" diff --git a/package-lock.json b/package-lock.json index c0591adf5..4de0a3360 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5607,6 +5607,30 @@ "supports-color": "^7.1.0" } }, + "dotenv": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.2.0.tgz", + "integrity": "sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==", + "dev": true + }, + "dotenv-defaults": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-1.1.1.tgz", + "integrity": "sha512-6fPRo9o/3MxKvmRZBD3oNFdxODdhJtIy1zcJeUSCs6HCy4tarUpd+G67UTU9tF6OWXeSPqsm4fPAB+2eY9Rt9Q==", + "dev": true, + "requires": { + "dotenv": "^6.2.0" + } + }, + "dotenv-webpack": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-1.8.0.tgz", + "integrity": "sha512-o8pq6NLBehtrqA8Jv8jFQNtG9nhRtVqmoD4yWbgUyoU3+9WBlPe+c2EAiaJok9RB28QvrWvdWLZGeTT5aATDMg==", + "dev": true, + "requires": { + "dotenv-defaults": "^1.0.2" + } + }, "file-loader": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-4.3.0.tgz", @@ -6558,6 +6582,15 @@ "@types/react": "*" } }, + "@types/react-responsive": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/react-responsive/-/react-responsive-3.0.3.tgz", + "integrity": "sha512-paTAvXIFgv/jG60d7WSV0+yWCjqJ05cG+KOV48SiqYGjGi9kFdss9QnVTTLnFJmbUwWnoM+VD1Iyay1JBy/HPQ==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/react-router": { "version": "5.1.13", "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.13.tgz", @@ -7896,6 +7929,11 @@ "vscode-uri": "1.0.6" }, "dependencies": { + "dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==" + }, "moment": { "version": "2.29.1", "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", @@ -11891,6 +11929,11 @@ } } }, + "css-mediaquery": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz", + "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=" + }, "css-select": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz", @@ -13026,26 +13069,10 @@ } }, "dotenv": { - "version": "8.2.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz", - "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==" - }, - "dotenv-defaults": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-1.1.1.tgz", - "integrity": "sha512-6fPRo9o/3MxKvmRZBD3oNFdxODdhJtIy1zcJeUSCs6HCy4tarUpd+G67UTU9tF6OWXeSPqsm4fPAB+2eY9Rt9Q==", - "dev": true, - "requires": { - "dotenv": "^6.2.0" - }, - "dependencies": { - "dotenv": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.2.0.tgz", - "integrity": "sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==", - "dev": true - } - } + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", + "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==", + "dev": true }, "dotenv-expand": { "version": "5.1.0", @@ -13053,15 +13080,6 @@ "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==", "dev": true }, - "dotenv-webpack": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-1.8.0.tgz", - "integrity": "sha512-o8pq6NLBehtrqA8Jv8jFQNtG9nhRtVqmoD4yWbgUyoU3+9WBlPe+c2EAiaJok9RB28QvrWvdWLZGeTT5aATDMg==", - "dev": true, - "requires": { - "dotenv-defaults": "^1.0.2" - } - }, "downshift": { "version": "1.31.16", "resolved": "https://registry.npmjs.org/downshift/-/downshift-1.31.16.tgz", @@ -19930,6 +19948,14 @@ "core-js": "^3.0.4", "dotenv": "^8.0.0", "dotenv-expand": "^5.1.0" + }, + "dependencies": { + "dotenv": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz", + "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==", + "dev": true + } } }, "left-pad": { @@ -20978,6 +21004,14 @@ } } }, + "matchmediaquery": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz", + "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==", + "requires": { + "css-mediaquery": "^0.1.2" + } + }, "math-random": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz", @@ -24488,6 +24522,16 @@ "react-popper": "^1.3.7" } }, + "react-responsive": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-7.0.0.tgz", + "integrity": "sha512-RukaKD+UI/MIR+P8eUgVGURfiCafRvvcVnq41scT0eEQWHwDGliH/OAlrwIr1oyz8aKLGroZa+U8mTZV5ihPfA==", + "requires": { + "hyphenate-style-name": "^1.0.0", + "matchmediaquery": "^0.3.0", + "prop-types": "^15.6.1" + } + }, "react-router": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", diff --git a/package.json b/package.json index 9d8e53a59..476fc39a1 100644 --- a/package.json +++ b/package.json @@ -143,6 +143,7 @@ "cross-env": "^6.0.3", "cypress": "^8.3.0", "cypress-file-upload": "^5.0.8", + "dotenv": "^10.0.0", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", "enzyme-to-json": "^3.6.1", diff --git a/src/components/DemoBanner/DemoBanner.tsx b/src/components/DemoBanner/DemoBanner.tsx new file mode 100644 index 000000000..69ffd6a2f --- /dev/null +++ b/src/components/DemoBanner/DemoBanner.tsx @@ -0,0 +1,60 @@ +import { useTheme } from "@material-ui/core/styles"; +import useMediaQuery from "@material-ui/core/useMediaQuery"; +import ExternalLink from "@saleor/components/ExternalLink"; +import React from "react"; +import { FormattedMessage } from "react-intl"; + +import { SALEOR_GRAPHQL_URL, SALEOR_STOREFRONT_URL } from "./constants"; +import styles from "./styles"; + +export const DemoBanner: React.FC = () => { + const theme = useTheme(); + const isMdUp = useMediaQuery(theme.breakpoints.up("md")); + const classes = styles(); + + return ( +
+
+
+
+ + {isMdUp ? ( + ( + {children} + ) + }} + /> + ) : ( +
+ +
+ )} + + {isMdUp &&
} + + {isMdUp ? ( + ( + {children} + ) + }} + /> + ) : ( +
+ +
+ )} + +
+
+
+ ); +}; + +DemoBanner.displayName = "DemoBanner"; +export default DemoBanner; diff --git a/src/components/DemoBanner/constants.ts b/src/components/DemoBanner/constants.ts new file mode 100644 index 000000000..2129e3f40 --- /dev/null +++ b/src/components/DemoBanner/constants.ts @@ -0,0 +1,6 @@ +export const greyDark = "#9D9FB1"; +export const textColor = "#3D3D3D"; +export const emphasisedTextBlue = "#036DFF"; + +export const SALEOR_GRAPHQL_URL = "https://demo.saleor.io/graphql/"; +export const SALEOR_STOREFRONT_URL = "https://demo.saleor.io/"; diff --git a/src/components/DemoBanner/index.ts b/src/components/DemoBanner/index.ts new file mode 100644 index 000000000..8550c2d8d --- /dev/null +++ b/src/components/DemoBanner/index.ts @@ -0,0 +1,2 @@ +export { default } from "./DemoBanner"; +export * from "./DemoBanner"; diff --git a/src/components/DemoBanner/styles.ts b/src/components/DemoBanner/styles.ts new file mode 100644 index 000000000..725e1b657 --- /dev/null +++ b/src/components/DemoBanner/styles.ts @@ -0,0 +1,55 @@ +import { makeStyles } from "@saleor/macaw-ui"; + +import { emphasisedTextBlue, greyDark, textColor } from "./constants"; + +const useStyles = makeStyles( + theme => ({ + wrapper: { + width: "100%", + backgroundColor: "inherit", + padding: `0 13px`, + fontSize: theme.spacing(1.5) + }, + borderedWrapper: { + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + maxHeight: theme.spacing(7.5), + flex: "0 0 auto", + padding: theme.spacing(3, 0), + backgroundImage: `linear-gradient(to right, ${greyDark} 13%, rgba(255, 255, 255, 0) 0%)`, + backgroundPosition: "bottom", + backgroundSize: theme.spacing(1.5, 0.125), + backgroundRepeat: "repeat-x" + }, + logoWrapper: { + lineHeight: 0 + }, + linkList: { + display: "flex", + alignItems: "center" + }, + link: { + display: "flex", + padding: theme.spacing(2), + color: textColor + }, + textEmphasis: { + color: emphasisedTextBlue, + textTransform: "uppercase", + fontWeight: 600, + fontStyle: "normal", + paddingLeft: "5px" + }, + divider: { + borderRight: `1px solid ${greyDark}`, + height: theme.spacing(2) + } + }), + { + name: "DemoBanner" + } +); + +export default useStyles; diff --git a/src/index.tsx b/src/index.tsx index c0affbaab..f304c7be4 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,3 +1,4 @@ +import DemoBanner from "@saleor/components/DemoBanner"; import useAppState from "@saleor/hooks/useAppState"; import { ThemeProvider } from "@saleor/macaw-ui"; import { defaultDataIdFromObject, InMemoryCache } from "apollo-cache-inmemory"; @@ -39,7 +40,7 @@ import { LocaleProvider } from "./components/Locale"; import MessageManagerProvider from "./components/messages"; import { ShopProvider } from "./components/Shop"; import { WindowTitle } from "./components/WindowTitle"; -import { API_URI, APP_MOUNT_URI, GTM_ID } from "./config"; +import { API_URI, APP_MOUNT_URI, DEMO_MODE, GTM_ID } from "./config"; import ConfigurationSection, { createConfigurationMenu } from "./configuration"; import AppStateProvider from "./containers/AppState"; import BackgroundTasksProvider from "./containers/BackgroundTasks"; @@ -170,6 +171,7 @@ const Routes: React.FC = () => { return ( <> + {DEMO_MODE && } {homePageLoaded ? (