CAR-4260 extract header

assets/header.css

@@ -0,0 +1,11 @@
+.bg-header--transparent {
+  background: linear-gradient(
+    -180deg,
+    rgba(0, 0, 0, 0.5) 0%,
+    rgba(0, 0, 0, 0.5) 22%,
+    rgba(0, 0, 0, 0.3) 38%,
+    rgba(0, 0, 0, 0.2) 53%,
+    rgba(0, 0, 0, 0.1) 79%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}

assets/index.css

@@ -4,3 +4,4 @@
 @import "./input/index.css";
 @import "./spinner.css";
 @import "./intercom.css";
+@import "./header.css";

src/__tests__/__snapshots__/node.test.ts.snap

@@ -179,6 +179,9 @@ Object {
       "checkbox": "24px",
       "clearButton": "32px",
       "full": "100%",
+      "header": "85px",
+      "headerSmall": "60px",
+      "headerTransparent": "166px",
       "input": "52px",
       "radioIndicator": "12px",
       "screen": "100vh",
@@ -231,17 +234,20 @@ Object {
       },
     },
     "margin": Object {
+      "-headerMenu": "-15px",
       "-selectMenu": "-21px",
       "-selectWithHintMenu": "-43px",
       "0": "0",
       "10": "10px",
       "15": "15px",
       "20": "20px",
+      "22": "22px",
       "25": "25px",
       "30": "30px",
       "40": "40px",
       "5": "5px",
       "auto": "auto",
+      "headerMenu": "15px",
       "labelPopupIcon": "3px",
       "px": "1px",
     },
@@ -353,9 +359,13 @@ Object {
       "auto": "auto",
       "checkbox": "24px",
       "clearButton": "32px",
+      "logoDefault": "170px",
+      "logoSmall": "140px",
+      "menuDropdown": "220px",
       "modal": "570px",
       "modalLarge": "770px",
       "modalSmall": "370px",
+      "profileDropdown": "320px",
       "radioIndicator": "12px",
       "screen": "100vw",
       "scrollbar": "14px",

src/components/header/dropdown.tsx

@@ -0,0 +1,103 @@
+import React, { FC, useState, useEffect, useContext } from "react"
+import classNames from "classnames"
+
+import ArrowDownM from "../icons/arrowDownMCrop"
+import HeaderThemeContext, { HeaderTheme } from "./themeContext"
+
+interface Props {
+  renderParent: () => JSX.Element
+  children: JSX.Element
+  theme?: HeaderTheme
+  stickOut?: "left" | "right"
+}
+
+const HeaderDropdown: FC<Props> = ({
+  renderParent,
+  stickOut = "right",
+  children,
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const theme = useContext(HeaderThemeContext)
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener("click", toggle)
+      document.addEventListener("keydown", toggle)
+    }
+
+    return () => {
+      document.removeEventListener("click", toggle)
+      document.removeEventListener("keydown", toggle)
+    }
+  }, [isOpen])
+
+  const toggle = () => setIsOpen(!isOpen)
+
+  const renderClosedState = () => {
+    return (
+      <div
+        className={classNames(
+          "flex items-center cursor-pointer text-black py-10 lg:py-0",
+          {
+            "lg:text-black": theme === HeaderTheme.LIGHT,
+            "lg:text-white":
+              theme === HeaderTheme.DARK || theme === HeaderTheme.TRANSPARENT,
+          }
+        )}
+        onClick={toggle}
+      >
+        {renderParent()}
+        <ArrowDownM
+          height="28"
+          width="28"
+          color="#000"
+          className={classNames("inline-block", {
+            "lg:text-white":
+              theme === HeaderTheme.DARK || theme === HeaderTheme.TRANSPARENT,
+          })}
+        />
+      </div>
+    )
+  }
+
+  const renderOpenState = () => {
+    return (
+      <div className="text-black bg-grey-1 lg:bg-transparent relative z-dropdownMenu cursor-pointer -mx-headerMenu lg:mx-0 px-15 lg:px-0 py-10 lg:py-0">
+        <div
+          className={classNames("flex items-center font-bold", {
+            "lg:text-white":
+              theme === HeaderTheme.DARK || theme === HeaderTheme.TRANSPARENT,
+          })}
+          onClick={toggle}
+        >
+          {renderParent()}
+          <ArrowDownM
+            height="28"
+            width="28"
+            className={classNames("inline-block, customRotate-180", {
+              "lg:text-white":
+                theme === HeaderTheme.DARK || theme === HeaderTheme.TRANSPARENT,
+            })}
+          />
+        </div>
+        <div
+          className={classNames(
+            "bg-grey-1 lg:bg-white relative lg:absolute lg:border lg:border-grey-2 lg:rounded-4",
+            {
+              "right-0": stickOut === "left",
+              "bg-white":
+                theme === HeaderTheme.LIGHT || theme === HeaderTheme.DARK,
+              "text-black": theme === HeaderTheme.DARK,
+            }
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    )
+  }
+
+  return <>{isOpen ? renderOpenState() : renderClosedState()}</>
+}
+
+export default HeaderDropdown

src/components/header/index.tsx

@@ -0,0 +1,170 @@
+import React, { FC } from "react"
+import classNames from "classnames"
+
+import Logo from "../icons/logo"
+import Profile from "../icons/profile"
+
+import HeaderDropdown from "./dropdown"
+import { HeaderTheme, HeaderThemeProvider } from "./themeContext"
+import useModal from "../../hooks/useModal"
+
+interface Props {
+  renderLogo?: () => JSX.Element
+  links?: Array<() => JSX.Element>
+  renderCTAButton?: () => JSX.Element
+  iconButtons?: Array<() => JSX.Element>
+  profile?: {
+    renderWelcomeMessage: () => JSX.Element
+    renderContent: () => JSX.Element
+  }
+  renderLanguageNavigation?: () => JSX.Element
+  theme?: HeaderTheme
+  mobileMenuText?: string
+}
+
+const Header: FC<Props> = ({
+  theme = HeaderTheme.LIGHT,
+  renderLogo = () => <Logo />,
+  links = [],
+  renderCTAButton = () => null,
+  iconButtons = [],
+  profile = {
+    renderWelcomeMessage: () => null,
+    renderContent: () => null,
+  },
+  renderLanguageNavigation = () => null,
+  mobileMenuText = "MENU",
+}) => {
+  let iconColor = "#A0A7AB"
+  if (theme === HeaderTheme.DARK || theme === HeaderTheme.TRANSPARENT) {
+    iconColor = "#FFF"
+  }
+
+  const languageNavigation = renderLanguageNavigation()
+
+  const renderMobileNavigation = () => {
+    return (
+      <div className="min-w-screen text-black">
+        <div className="min-w-100 w-logoDefault mx-headerMenu my-22">
+          <Logo />
+        </div>
+        <div className="px-15">
+          {profile.renderWelcomeMessage()}
+          <hr className="-mx-headerMenu text-grey-1" />
+          {links.map((renderLink, index) => {
+            return <div key={`navigationLink-${index}`}>{renderLink()}</div>
+          })}
+          <hr className="-mx-headerMenu text-grey-1" />
+          {profile.renderContent()}
+          <hr className="-mx-headerMenu text-grey-1" />
+          {languageNavigation}
+        </div>
+      </div>
+    )
+  }
+
+  const { openModal, renderModal } = useModal(renderMobileNavigation, {
+    size: "fullscreen",
+    style: "white",
+  })
+
+  return (
+    <HeaderThemeProvider value={theme}>
+      <div
+        className={classNames({
+          "h-headerTransparent": theme === HeaderTheme.TRANSPARENT,
+          "bg-header--transparent": theme === HeaderTheme.TRANSPARENT,
+        })}
+      >
+        <header
+          className={classNames(
+            "h-headerSmall lg:h-header px-15 md:px-20 py-15 flex items-center",
+            {
+              "bg-white": theme === HeaderTheme.LIGHT,
+              "bg-grey-dark": theme === HeaderTheme.DARK,
+              "text-white": theme === HeaderTheme.DARK,
+            }
+          )}
+        >
+          <nav className="w-12/12 flex items-center">
+            {/* Logo Section */}
+            <div className="min-w-100 w-logoSmall lg:w-logoDefault mr-20 lg:mr-40">
+              {renderLogo()}
+            </div>
+            {/* Links - LG / Desktop  */}
+            <div className="flex flex-grow">
+              <div className="hidden lg:flex items-center">
+                {links.map((renderLink, index) => {
+                  return (
+                    <div
+                      className="mr-headerMenu"
+                      key={`navigationLink-${index}`}
+                    >
+                      {renderLink()}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+            {/* Right Section */}
+            <div className="flex items-center">
+              {/* CTA Button */}
+              <div className="mr-headerMenu cursor-pointer">
+                {renderCTAButton()}
+              </div>
+              {/* Icons Button */}
+              <div className="cursor-pointer">
+                {iconButtons.map((renderIconButton, index) => {
+                  return (
+                    <div
+                      className="mr-headerMenu"
+                      key={`navigationLink-${index}`}
+                    >
+                      {renderIconButton()}
+                    </div>
+                  )
+                })}
+              </div>
+              {/* Profile - LG / Desktop  */}
+              <div
+                className={classNames("hidden lg:block cursor-pointer", {
+                  "mr-headerMenu": languageNavigation,
+                })}
+              >
+                <HeaderDropdown
+                  renderParent={() => <Profile color={iconColor} />}
+                  theme={theme}
+                  stickOut="left"
+                >
+                  <div className="m-headerMenu w-profileDropdown">
+                    {profile.renderWelcomeMessage()}
+                    <hr className="-mx-headerMenu text-grey-1 mb-20" />
+                    {profile.renderContent()}
+                  </div>
+                </HeaderDropdown>
+              </div>
+              {/* Language Navigation - LG / Desktop */}
+              <div className="hidden lg:block">{languageNavigation}</div>
+              {/* Menu Block Groups for mobile */}
+              <div className="block lg:hidden">
+                <a
+                  onClick={openModal}
+                  className={classNames("cursor-pointer", {
+                    "text-grey-3": theme === HeaderTheme.LIGHT,
+                    "text-white":
+                      theme === HeaderTheme.DARK || HeaderTheme.TRANSPARENT,
+                  })}
+                >
+                  {mobileMenuText}
+                </a>
+                {renderModal()}
+              </div>
+            </div>
+          </nav>
+        </header>
+      </div>
+    </HeaderThemeProvider>
+  )
+}
+
+export default Header

src/components/header/themeContext.ts

@@ -0,0 +1,12 @@
+import { createContext } from "react"
+
+export enum HeaderTheme {
+  LIGHT = "light",
+  DARK = "dark",
+  TRANSPARENT = "transparent",
+}
+
+const HeaderThemeContext = createContext(HeaderTheme.LIGHT)
+
+export const HeaderThemeProvider = HeaderThemeContext.Provider
+export default HeaderThemeContext

src/components/icons/heart.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from "react"
+
+interface Props {
+  color?: string
+  width?: number
+  height?: number
+}
+
+const Heart: FC<Props> = ({ color = "#A0A7AB", width = 32, height = 32 }) => (
+  <svg width={width} height={height} xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M20.417 7C23.495 7 26 9.513 26 12.603c0 1.45-.544 2.806-1.52 3.841L16 25l-8.443-8.516A5.59 5.59 0 016 12.603C6 9.513 8.505 7 11.583 7c1.76 0 3.375.822 4.417 2.175A5.564 5.564 0 0120.417 7zm0 1.6a3.962 3.962 0 00-3.004 1.372l-.145.179L16 11.797l-1.268-1.646A3.963 3.963 0 0011.583 8.6C9.39 8.6 7.6 10.396 7.6 12.603c0 .96.336 1.871.938 2.581l.156.173L16 22.727l7.18-7.243a3.963 3.963 0 001.213-2.647l.007-.234c0-2.207-1.79-4.003-3.983-4.003z"
+      fill={color}
+      fill-rule="evenodd"
+    />
+  </svg>
+)
+
+export default Heart