Merge pull request #600 from chromaui/header-footer-updates

update header and footer

package.json

@@ -27,7 +27,7 @@
     "@astrojs/mdx": "^2.3.1",
     "@astrojs/react": "^3.3.0",
     "@astrojs/sitemap": "^3.1.4",
-    "@chromatic-com/tetra": "1.19.2",
+    "@chromatic-com/tetra": "^2.0.4",
     "@docsearch/css": "^3.5.2",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dropdown-menu": "2.0.5",

src/components/Footer/MarketingFooter.tsx

@@ -1,16 +1,9 @@
 import { Footer } from "@chromatic-com/tetra";
 
-import { footerColumns, footerSocialLinks, homeLink } from "./footerData";
-
 interface MarketingFooterProps {
   theme?: "dark" | "light";
 }
 
 export const MarketingFooter = ({ theme = "light" }: MarketingFooterProps) => (
-  <Footer
-    theme={theme}
-    columns={footerColumns}
-    socialLinks={footerSocialLinks}
-    homeLink={homeLink}
-  />
+  <Footer theme={theme} LinkWrapper={undefined as any} />
 );

src/components/Header/MarketingHeader.tsx

@@ -1,80 +1,40 @@
-import {
-  Button,
-  fontWeight,
-  Header,
-  Link,
-  spacing,
-  typography,
-} from "@chromatic-com/tetra";
-import { styled } from "@storybook/theming";
+import { Header } from "@chromatic-com/tetra";
 import type { FC } from "react";
 
-import { desktopData, mobileData } from "./headerData";
+import { links } from "./headerData";
+import { styled } from "@storybook/theming";
 
 interface Props {
   theme?: "dark" | "light";
 }
 
-const MobileButtons = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing[3]};
+const Wrapper = styled.span`
+  display: contents;
 `;
 
-const HeaderCTAButton = styled(Button)`
-  height: ${spacing[8]};
-  ${typography.body14};
-  font-weight: ${fontWeight.bold};
-`;
+// Used for tracking sign up links and log which page the conversion happened
+export const TrackSignUp = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Wrapper
+      onClick={() => {
+        if (window.plausible) {
+          window.plausible("sign_up");
+        }
+      }}
+    >
+      {children}
+    </Wrapper>
+  );
+};
 
 export const MarketingHeader: FC<Props> = ({ theme = "light" }) => {
   return (
     <Header
       fullWidth
       desktopActiveId="docs"
       theme={theme}
-      desktopData={desktopData}
-      mobileData={mobileData}
-      desktopRight={
-        <>
-          <Link
-            size="md"
-            weight="bold"
-            color={theme === "dark" ? "white" : "blue500"}
-            href="https://www.chromatic.com/start"
-          >
-            Sign in
-          </Link>
-          <HeaderCTAButton
-            size="sm"
-            variant="outline"
-            color={theme === "dark" ? "white" : "blue"}
-            href="https://www.chromatic.com/start?startWithSignup=true"
-          >
-            Sign up
-          </HeaderCTAButton>
-        </>
-      }
-      mobileBottom={
-        <MobileButtons>
-          <Button
-            size="sm"
-            variant="outline"
-            color="blue"
-            href="https://www.chromatic.com/start"
-          >
-            Sign in
-          </Button>
-          <Button
-            size="sm"
-            variant="solid"
-            color="blue"
-            href="https://www.chromatic.com/start?startWithSignup=true"
-          >
-            Sign up
-          </Button>
-        </MobileButtons>
-      }
+      links={links}
+      TrackSignUp={TrackSignUp}
     />
   );
 };