Pre fall updates

package.json

@@ -24,7 +24,8 @@
     "@headlessui/react": "^1.7.15",
     "@heroicons/react": "^2.0.18",
     "@vitejs/plugin-react": "^4.0.2",
-    "@yext/studio": "^0.25.0",
+    "@yext/sites-components": "1.0.0-rc.4",
+    "@yext/studio": "^0.27.0",
     "clsx": "^1.2.1",
     "cva": "npm:class-variance-authority@^0.7.0",
     "react": "^18.0.2",

sites-config/ci.json

@@ -4,6 +4,10 @@
       {
         "root": "dist",
         "pattern": "assets/**/*"
+      },
+      {
+        "root": "dist",
+        "pattern": "*"
       }
     ],
     "features": "sites-config/features.json",

src/components/blog/ArrowIcon.tsx

@@ -0,0 +1,22 @@
+import { ArrowLeftIcon } from "@heroicons/react/24/outline";
+import { Colors, Sizes, color, height } from "../../sharedVariants";
+import { cn } from "../../utils";
+import { cva } from "cva";
+
+const arrowVariants = cva("", {
+  variants: {
+    height,
+    color,
+  },
+});
+
+export interface ArrowIconProps {
+  color?: Colors;
+  height: Sizes;
+}
+
+const ArrowIcon = ({ height, color }: ArrowIconProps) => {
+  return <ArrowLeftIcon className={cn(arrowVariants({ height, color }))} />;
+};
+
+export default ArrowIcon;

src/components/atoms/Container.tsx → src/components/common/Container.tsx

@@ -1,5 +1,5 @@
 import { cva } from "cva";
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils";
 import {
   paddingLeft,
   paddingBottom,

src/components/atoms/Date.tsx → src/components/common/Date.tsx

@@ -1,6 +1,5 @@
-import { formatDate } from "../../utils/formatDate";
 import { cva } from "cva";
-import { cn } from "../../utils/cn";
+import { cn, formatDate } from "../../utils";
 import {
   Colors,
   TextSizes,

src/components/molecules/Footer.tsx → src/components/common/Footer.tsx

@@ -1,3 +1,5 @@
+import { Link } from "@yext/sites-components";
+
 export default function Footer() {
   const navigation = {
     main: [
@@ -82,28 +84,30 @@ export default function Footer() {
         >
           {navigation.main.map((item: { label: string; uRL: string }) => (
             <div key={item.label} className="pb-6">
-              <a
+              <Link
                 href={item.uRL}
-                className="text-sm leading-6 text-gray-600 hover:text-gray-400"
+                className="text-sm leading-6 text-gray-600 hover:text-gray-900"
+                eventName={`footer${item.label}`}
               >
                 {item.label}
-              </a>
+              </Link>
             </div>
           ))}
         </nav>
         <div className="mt-10 flex justify-center space-x-10">
           {navigation.social.map((item) => (
-            <a
+            <Link
               key={item.name}
               href={item.href}
-              className="text-gray-600 hover:text-gray-400"
+              className="text-gray-400 hover:text-gray-900"
+              eventName={`footer${item.name}`}
             >
               <span className="sr-only">{item.name}</span>
               <item.icon className="h-6 w-6" aria-hidden="true" />
-            </a>
+            </Link>
           ))}
         </div>
-        <p className="mt-10 text-center text-xs leading-5 text-gray-400">
+        <p className="mt-10 text-center text-xs leading-5 text-gray-500">
           &copy; 2020 Your Company, Inc. All rights reserved.
         </p>
       </div>

src/components/molecules/Header.tsx → src/components/common/Header.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Dialog } from "@headlessui/react";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Link } from "@yext/sites-components";
 
 export interface HeaderProps {
   /**
@@ -14,7 +15,7 @@ const navigation = [
   { label: "About", uRL: "#" },
   { label: "Membership", uRL: "#" },
   { label: "Contribute", uRL: "#" },
-  { label: "Login", uRL: "#" },
+  { label: "Contact", uRL: "#" },
 ];
 
 export default function Header({ logo }: HeaderProps) {
@@ -31,33 +32,39 @@ export default function Header({ logo }: HeaderProps) {
         aria-label="Global"
       >
         <div className="flex lg:flex-1">
-          <a href="./index.html">
+          <Link href="./index.html" eventName="headerhome">
             <span className="sr-only">Company logo</span>
             <img className="h-8 w-auto" src={logo} alt="Company logo" />
-          </a>
+          </Link>
         </div>
         <div className="hidden lg:flex lg:gap-x-12">
           {navigation.map((item) => (
-            <a key={item.label} href={item.uRL}>
+            <Link
+              key={item.label}
+              href={item.uRL}
+              eventName={`header${item.label}`}
+            >
               <span className="text-sm font-semibold text-gray-900 hover:text-gray-600">
                 {item.label}
               </span>
-            </a>
+            </Link>
           ))}
         </div>
         <div className="flex flex-1 items-center justify-end gap-x-6">
-          <a
+          <Link
             href="#"
             className="hidden text-gray-900 hover:text-gray-600 lg:block lg:text-sm lg:font-semibold lg:leading-6"
+            eventName="headerlogin"
           >
             Log in
-          </a>
-          <a
+          </Link>
+          <Link
             href="#"
             className="mr-2 rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-zinc-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600 lg:mr-0"
+            eventName="headersignup"
           >
             Sign up
-          </a>
+          </Link>
         </div>
         <div className="flex lg:hidden">
           <button
@@ -79,16 +86,17 @@ export default function Header({ logo }: HeaderProps) {
         <div className="fixed inset-0 z-10" />
         <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 lg:px-6">
           <div className="flex items-center justify-between">
-            <a href="#">
+            <Link href="#" eventName="headerhome">
               <span className="sr-only">Company logo</span>
               <img className="h-8 w-auto" src={logo} alt="Company logo" />
-            </a>
-            <a
+            </Link>
+            <Link
               href="#"
               className="ml-auto mr-2 rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-zinc-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
+              eventName="headersignup"
             >
               Sign up
-            </a>
+            </Link>
             <button
               type="button"
               className="rounded-md p-2.5"
@@ -102,20 +110,25 @@ export default function Header({ logo }: HeaderProps) {
             <div className="-my-6 divide-y divide-gray-500/10">
               <div className="flex flex-col space-y-2 py-6">
                 {navigation.map((item) => (
-                  <a key={item.label} href={item.uRL}>
+                  <Link
+                    key={item.label}
+                    href={item.uRL}
+                    eventName={`header${item.label}`}
+                  >
                     <span className="text-sm font-semibold text-gray-900 hover:text-gray-600">
                       {item.label}
                     </span>
-                  </a>
+                  </Link>
                 ))}
               </div>
               <div className="py-6">
-                <a
+                <Link
                   href="#"
                   className="-mx-3 block rounded-lg px-3 py-2.5 text-sm font-semibold leading-7 text-gray-900 hover:bg-zinc-50"
+                  eventName="headerlogin"
                 >
                   Log in
-                </a>
+                </Link>
               </div>
             </div>
           </div>

src/components/atoms/Heading.tsx → src/components/common/Heading.tsx

@@ -1,5 +1,5 @@
 import { cva } from "cva";
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils";
 import { Colors, Weights, color, weight } from "../../sharedVariants";
 
 const headingVariants = cva("tracking-tight", {

src/components/atoms/HorizontalDivider.tsx → src/components/common/HorizontalDivider.tsx

@@ -1,5 +1,5 @@
 import { cva } from "cva";
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils";
 import { Colors, Sizes, backgroundColor, height } from "../../sharedVariants";
 
 const horizontalDividerVariants = cva("w-0.5 rounded-full", {

src/components/atoms/Image.tsx → src/components/common/Image.tsx

@@ -1,5 +1,5 @@
 import { cva } from "cva";
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils";
 
 const imageVariants = cva(
   "h-full w-full rounded-md object-cover object-center",

src/components/common/Link.tsx

@@ -0,0 +1,61 @@
+import { Link as SitesLink } from "@yext/sites-components";
+import { cn } from "../../utils";
+import { cva } from "cva";
+
+const linkVariants = cva("", {
+  variants: {
+    variant: {
+      default: "",
+      "button-dark":
+        "w-fit rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-zinc-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600",
+      "button-light":
+        "rounded-md w-fit bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 transition px-3 py-2 hover:ring-zinc-400 text-gray-600",
+    },
+    shape: {
+      default: "",
+      round: "rounded-full p-3",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    shape: "default",
+  },
+});
+
+export interface LinkProps {
+  children: React.ReactNode;
+  /**
+   * @displayName URL
+   * @tooltip Controls the URL the link should redirect to
+   */
+  url: string;
+  /**
+   * @displayName Analytics Label
+   * @tooltip Controls the label the click is tagged with in analytics
+   */
+  analyticsLabel?: string;
+  /**
+   * @displayName Variant
+   * @tooltip Controls the style of the link
+   */
+  variant?: "default" | "button-dark" | "button-light";
+  /**
+   * @displayName Shape
+   * @tooltip Controls the border radius of the link
+   */
+  shape?: "default" | "round";
+}
+
+const Link = ({ children, url, analyticsLabel, variant, shape }: LinkProps) => {
+  return (
+    <SitesLink
+      href={url}
+      className={cn(linkVariants({ variant, shape }))}
+      eventName={analyticsLabel ?? "blog-click"}
+    >
+      {children}
+    </SitesLink>
+  );
+};
+
+export default Link;

src/components/atoms/PageWrapper.tsx → src/components/common/PageWrapper.tsx

@@ -1,5 +1,5 @@
 import { cva } from "cva";
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils";
 import { Colors, backgroundColor } from "../../sharedVariants";
 
 const pageWrapperVariants = cva("relative min-h-screen", {

src/components/atoms/Text.tsx → src/components/common/Text.tsx

@@ -1,5 +1,5 @@
 import { cva } from "cva";
-import { cn } from "../../utils/cn";
+import { cn } from "../../utils";
 import {
   Colors,
   TextSizes,

src/components/molecules/FeaturedBlog.tsx → src/components/home/FeaturedBlog.tsx

@@ -1,9 +1,9 @@
-import Link from "../atoms/Link";
-import Date from "../atoms/Date";
-import Container from "../atoms/Container";
-import Text from "../atoms/Text";
-import Heading from "../atoms/Heading";
-import Image from "../atoms/Image";
+import Link from "../common/Link";
+import Date from "../common/Date";
+import Container from "../common/Container";
+import Text from "../common/Text";
+import Heading from "../common/Heading";
+import Image from "../common/Image";
 import { TextSizes } from "../../sharedVariants";
 
 interface FeaturedBlogProps {
@@ -96,7 +96,7 @@ const FeaturedBlog = ({
           weight="Light"
         />
         <Container layout="Column" flexGap="2">
-          <Link url={`./${slug}`}>
+          <Link url={`/${slug}`} analyticsLabel={`featuredblogclick`}>
             <Heading rank={titleRank} weight="Semi Bold" text={name || ""} />
           </Link>
           <Text

src/components/molecules/FeaturedBlogsSection.tsx → src/components/home/FeaturedBlogsSection.tsx

@@ -1,4 +1,4 @@
-import Container from "../atoms/Container";
+import Container from "../common/Container";
 import FeaturedBlog from "./FeaturedBlog";
 
 export interface FeaturedBlogsSectionProps {

src/index.css

@@ -4,5 +4,5 @@
 
 @font-face {
   font-family: "Inter var";
-  src: url(./assets/fonts/Inter-VariableFont_slnt\wght.ttf);
+  src: url("./assets/fonts/inter.ttf");
 }

src/layouts/BasicLayout.tsx

@@ -1,11 +1,11 @@
-import Container from "../components/atoms/Container";
-import Heading from "../components/atoms/Heading";
-import Image from "../components/atoms/Image";
-import MainContentWrapper from "../components/atoms/MainContentWrapper";
-import PageWrapper from "../components/atoms/PageWrapper";
-import Text from "../components/atoms/Text";
-import Footer from "../components/molecules/Footer";
-import Header from "../components/molecules/Header";
+import Container from "../components/common/Container";
+import Heading from "../components/common/Heading";
+import Image from "../components/common/Image";
+import MainContentWrapper from "../components/common/MainContentWrapper";
+import PageWrapper from "../components/common/PageWrapper";
+import Text from "../components/common/Text";
+import Footer from "../components/common/Footer";
+import Header from "../components/common/Header";
 
 const BasicLayout = () => {
   return (