qpp-style 9.43.3 → 9.44.0

package/components/Header/HeaderUI.jsx

@@ -6,6 +6,7 @@ import HeaderContainer from "./HeaderContainer";
 import HeaderMenuItem from "./HeaderMenuItem";
 import HeaderMobileButton from "./HeaderMobileButton";
 import ImpersonatorBanner from "./ImpersonatorBanner";
+import PreviewBanner from "./PreviewBanner.jsx";
 import HeaderSearchBar from "../HeaderSearchBar";
 import HelpIcon from "./HelpIcon";
 import { HeaderStateProvider, useWindowWidth } from "./hooks";
@@ -130,6 +131,7 @@ const HeaderUI = ({
         </nav>
       </HeaderContainer>
       <ImpersonatorBanner />
+      <PreviewBanner />
     </>
   );
 

package/components/Header/PreviewBanner.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import cookie from "cookie";
+import { TextButton } from "../Button";
+import { CloseIcon } from "../../lib/SvgComponents";
+
+function PreviewBanner() {
+  const { qpp_is_preview_mode: isPreviewMode = null } = cookie.parse(
+    document.cookie,
+  );
+  if (isPreviewMode === "true") {
+    return (
+      <div className="qpp-u-display--flex qpp-u-justify-content--between qpp-u-fill--gold-20 qpp-u-padding-x--40 qpp-u-padding-y--24 qpp-u-font-size--14 qpp-u-color--gray-80">
+        <div>YOU ARE IN PREVIEW MODE</div>
+        <TextButton href="/preview-mode" className="qpp-u-color--gray-80">
+          Exit Preview Mode
+          <CloseIcon />
+        </TextButton>
+      </div>
+    );
+  }
+  return null;
+}
+
+export default PreviewBanner;