Add BIC (#31)

* Change LCD Carousel CTA Order * Add BIC Button in Header * Update Button Icon * Update Note Styling * Add MDX Button * Add BIC Section * Fix Link * Add BIC PDF * Update BIC Image * Add ButtonGroup Component * Add MDX Button Icon * Remove - from Notes Component * Update BIC PDF * Update Link * Add BIC Example * Add tracking to ProjectFilter, Accordion, and Carousel components
timoclsn · Nov 1, 2023 · 0dfcca1 · 0dfcca1 · vercel · Nov 1, 2023
1 parent 33cac86
commit 0dfcca1
Show file tree

Hide file tree

Showing 18 changed files with 196 additions and 26 deletions.
diff --git a/apps/website/public/downloads/behavioral-impact-canvas-example.pdf b/apps/website/public/downloads/behavioral-impact-canvas-example.pdf
diff --git a/apps/website/public/downloads/behavioral-impact-canvas.pdf b/apps/website/public/downloads/behavioral-impact-canvas.pdf
diff --git a/apps/website/src/app/lifecentereddesign/Bic/Bic.tsx b/apps/website/src/app/lifecentereddesign/Bic/Bic.tsx
@@ -0,0 +1,42 @@
+import { ClipboardList, Files } from "lucide-react";
+import Image from "next/image";
+import { ButtonGroup } from "../../../components/ButtonGroup/ButtonGroup";
+import { MDXContent } from "../../../components/MDXContent/MDXContent";
+import { Section } from "../../../components/Section/Section";
+import { Button } from "../../../design-system/Button/Button";
+import { getTextSnippet } from "../../../lib/queries";
+import bicImg from "./bic.png";
+
+export const Bic = async () => {
+  const { content } = await getTextSnippet(
+    "87b890c6-253f-4b07-9325-39a0ecbdaa4c",
+  );
+  return (
+    <Section id="bic" color="primary">
+      <div className="flex flex-col gap-8 lg:flex-row">
+        <Image
+          src={bicImg}
+          alt="Title page of the Behavioral Impact Canvas"
+          className="max-h-[500px] w-full object-contain lg:w-1/2"
+        />
+        <div className="flex flex-col items-start justify-center gap-8 lg:w-1/2">
+          <MDXContent source={content} color="dark" family="serif" />
+          <ButtonGroup>
+            <Button href="/projects/behavioral-impact-canvas">
+              <Files />
+              About the canvas
+            </Button>
+            <Button
+              style="outline"
+              href="/downloads/behavioral-impact-canvas.pdf"
+              external
+            >
+              <ClipboardList />
+              View the Canvas
+            </Button>
+          </ButtonGroup>
+        </div>
+      </div>
+    </Section>
+  );
+};
diff --git a/apps/website/src/app/lifecentereddesign/Bic/bic.png b/apps/website/src/app/lifecentereddesign/Bic/bic.png
diff --git a/apps/website/src/app/lifecentereddesign/Header/Header.tsx b/apps/website/src/app/lifecentereddesign/Header/Header.tsx
@@ -1,5 +1,6 @@
 import { ArrowRight } from "lucide-react";
 import Image from "next/image";
+import { ButtonGroup } from "../../../components/ButtonGroup/ButtonGroup";
 import { Body } from "../../../design-system/Body/Body";
 import { Button } from "../../../design-system/Button/Button";
 import { Container } from "../../../design-system/Container/Container";
@@ -24,10 +25,16 @@ export const Header = async () => {
             <Body as="p" priority="secondary" className="mb-8 max-w-md">
               {content}
             </Body>
-            <Button href="/lifecentereddesign#my-lcd-projects">
-              <ArrowRight />
-              My Life-centered Design projects
-            </Button>
+            <ButtonGroup>
+              <Button href="/lifecentereddesign#my-lcd-projects">
+                <ArrowRight />
+                My Life-centered Design projects
+              </Button>
+              <Button href="/projects/behavioral-impact-canvas" style="outline">
+                <ArrowRight />
+                Behavioral Impact Canvas
+              </Button>
+            </ButtonGroup>
           </div>
         </div>
         <Image

diff --git a/apps/website/src/app/lifecentereddesign/MyLCDProjects/MyLCDProjectsCarousel.tsx b/apps/website/src/app/lifecentereddesign/MyLCDProjects/MyLCDProjectsCarousel.tsx
@@ -2,6 +2,7 @@
 
 import { Files, Link2 } from "lucide-react";
 import Image from "next/image";
+import { ButtonGroup } from "../../../components/ButtonGroup/ButtonGroup";
 import { Carousel } from "../../../components/Carousel/Carousel";
 import { Markdown } from "../../../components/Markdown/Markdown";
 import { Button } from "../../../design-system/Button/Button";
@@ -37,24 +38,20 @@ export const MyLCDProjectsCarousel = ({ projects }: Props) => {
             {project.summary && (
               <Markdown size="normal">{project.summary}</Markdown>
             )}
-            <div className="mt-16 flex flex-col gap-6 sm:flex-row">
-              {project.slug && (
-                <Button href={`/projects/${project.slug}`}>
-                  <Files />
-                  Case study
-                </Button>
-              )}
+            <ButtonGroup className="mt-16">
               {project.externalLink && (
-                <Button
-                  style="outline"
-                  href={project.externalLink.href}
-                  external
-                >
+                <Button href={project.externalLink.href} external>
                   <Link2 />
                   {project.externalLink.label}
                 </Button>
               )}
-            </div>
+              {project.slug && (
+                <Button href={`/projects/${project.slug}`} style="outline">
+                  <Files />
+                  Case study
+                </Button>
+              )}
+            </ButtonGroup>
           </div>
           <div className="hidden flex-1 flex-col items-start justify-center lg:flex">
             <Image

diff --git a/apps/website/src/app/lifecentereddesign/page.tsx b/apps/website/src/app/lifecentereddesign/page.tsx
@@ -1,5 +1,6 @@
 import { createGenerateMetadata, ogImage } from "../../lib/metadata";
 import { getMetadata } from "../../lib/queries";
+import { Bic } from "./Bic/Bic";
 import { Header } from "./Header/Header";
 import { LcdAccordion } from "./LcdAccordion/LcdAccordion";
 import { LcdBlogPosts } from "./LcdBlogPosts/LcdBlogPosts";
@@ -49,6 +50,7 @@ const LcdPage = () => {
     <div className="lcd-page">
       <Header />
       <WhatIsLcd />
+      <Bic />
       <MyLCDProjects />
       <LcdPrinciples />
       <LcdBlogPosts />

diff --git a/apps/website/src/app/projects/ProjectFilter/ProjectFilter.tsx b/apps/website/src/app/projects/ProjectFilter/ProjectFilter.tsx
@@ -5,6 +5,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { Body } from "../../../design-system/Body/Body";
 import { Select } from "../../../design-system/Select/Select";
 import { Tag } from "../../../design-system/Tag/Tag";
+import { track } from "../../../lib/tracking";
 
 interface Props {
   services: Array<string>;
@@ -23,9 +24,31 @@ export const ProjectFilter = ({ services, topics }: Props) => {
     replace(`${pathname}${searchParamsString ? "?" : ""}${searchParamsString}`);
   };
 
-  const handleValueChange = (param: string, value: string) => {
+  const handleValueChange = (
+    param: "service" | "topic" | "sort",
+    value: string,
+  ) => {
     searchParams.set(param, value);
     filter();
+
+    // Tracking
+    if (param === "service") {
+      track("Filter projects by service", {
+        service: value,
+      });
+    }
+
+    if (param === "topic") {
+      track("Filter projects by topic", {
+        topic: value,
+      });
+    }
+
+    if (param === "sort") {
+      track("Sort projects by", {
+        sort: value,
+      });
+    }
   };
 
   return (

diff --git a/apps/website/src/components/Accordion/Accordion.tsx b/apps/website/src/components/Accordion/Accordion.tsx
@@ -6,8 +6,9 @@ import { ArrowRight } from "lucide-react";
 import { Button } from "../../design-system/Button/Button";
 import { Heading } from "../../design-system/Heading/Heading";
 import { backgroundColorsMap } from "../../lib/colors";
-import { illustrationsMap } from "../illustrations/illustrations";
 import { AccordeonItems } from "../../lib/queries";
+import { track } from "../../lib/tracking";
+import { illustrationsMap } from "../illustrations/illustrations";
 import { Markdown } from "../Markdown/Markdown";
 import styles from "./Accordion.module.css";
 
@@ -84,7 +85,14 @@ export const Accordion = ({
             value={(idx + 1).toString()}
             className={itemVariants({ backgroundColor })}
           >
-            <AccordionPrimitive.Trigger className={triggerVariants({ size })}>
+            <AccordionPrimitive.Trigger
+              className={triggerVariants({ size })}
+              onClick={() => {
+                track("Accordion item selected", {
+                  title: item.title,
+                });
+              }}
+            >
               <Illustration
                 className={colorVariants({
                   dark: color === "dark",

diff --git a/apps/website/src/components/ButtonGroup/ButtonGroup.tsx b/apps/website/src/components/ButtonGroup/ButtonGroup.tsx
@@ -0,0 +1,20 @@
+import { cx } from "class-variance-authority";
+import { ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+
+export const ButtonGroup = ({ children, className }: Props) => {
+  return (
+    <div
+      className={cx(
+        "flex w-full flex-col flex-wrap gap-4 sm:flex-row",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/apps/website/src/components/Carousel/Carousel.tsx b/apps/website/src/components/Carousel/Carousel.tsx
@@ -5,6 +5,7 @@ import { ArrowLeft, ArrowRight } from "lucide-react";
 import { ReactNode, useRef, useState } from "react";
 import { Card } from "../../design-system/Card/Card";
 import { usePrevious } from "../../hooks/usePrevious";
+import { track } from "../../lib/tracking";
 import { MotionProvider } from "../MotionProvider/MotionProvider";
 
 const variants: Variants = {
@@ -60,6 +61,9 @@ export const Carousel = <Item extends {}>({
     } else {
       selectItem(selectedItemIndex + 1);
     }
+    track("Carousel navigation", {
+      direction: "next",
+    });
   };
 
   const prevItem = () => {
@@ -68,6 +72,9 @@ export const Carousel = <Item extends {}>({
     } else {
       selectItem(selectedItemIndex - 1);
     }
+    track("Carousel navigation", {
+      direction: "prev",
+    });
   };
 
   const selectItem = (index: number) => {
@@ -76,6 +83,9 @@ export const Carousel = <Item extends {}>({
       behavior: "smooth",
       block: "nearest",
     });
+    track("Carousel item selected", {
+      item: items[index],
+    });
   };
 
   return (

diff --git a/apps/website/src/components/MDXContent/MDXContent.tsx b/apps/website/src/components/MDXContent/MDXContent.tsx
@@ -8,6 +8,8 @@ import { Markdown, MarkdownProps } from "../Markdown/Markdown";
 import { Note } from "../Note/Note";
 import { NumberHeading } from "../NumberHeading/NumberHeading";
 import { Quote } from "../Quote/Quote";
+import { MdxButton } from "../MdxButton/MdxButton";
+import { ButtonGroup } from "../ButtonGroup/ButtonGroup";
 
 interface Props extends Omit<MarkdownProps, "children"> {
   source: MDXRemoteProps["source"];
@@ -89,6 +91,8 @@ export const MDXContent = ({
     ContentBox,
     Quote,
     Note,
+    Button: MdxButton,
+    ButtonGroup,
   };
 
   return (

diff --git a/apps/website/src/components/MdxButton/MdxButton.tsx b/apps/website/src/components/MdxButton/MdxButton.tsx
@@ -0,0 +1,23 @@
+import { ClipboardList, ClipboardSignature } from "lucide-react";
+import { Button, ButtonProps } from "../../design-system/Button/Button";
+
+const iconMap = {
+  clipboard: ClipboardList,
+  clipboardSignature: ClipboardSignature,
+} as const;
+
+interface MdxButtonProps {
+  icon?: keyof typeof iconMap;
+}
+
+type Props = MdxButtonProps & ButtonProps;
+
+export const MdxButton = ({ children, icon, ...rest }: Props) => {
+  const Icon = icon && iconMap[icon];
+  return (
+    <Button className="not-prose" {...rest}>
+      {Icon && <Icon />}
+      {children}
+    </Button>
+  );
+};
diff --git a/apps/website/src/components/MyClients/MyClientsCarousel.tsx b/apps/website/src/components/MyClients/MyClientsCarousel.tsx
@@ -5,9 +5,10 @@ import Image from "next/image";
 import { Button } from "../../design-system/Button/Button";
 import { Heading } from "../../design-system/Heading/Heading";
 import { Tag } from "../../design-system/Tag/Tag";
+import { ButtonGroup } from "../ButtonGroup/ButtonGroup";
 import { Carousel } from "../Carousel/Carousel";
-import { Markdown } from "../Markdown/Markdown";
 import { ClientQuote } from "../ClientQuote/ClientQuote";
+import { Markdown } from "../Markdown/Markdown";
 import { Clients } from "./MyClients";
 
 interface Props {
@@ -52,7 +53,7 @@ export const MyClientsCarousel = ({ clients }: Props) => {
             </Heading>
             <Markdown size="normal">{client.description}</Markdown>
             {(client.caseStudy || client.website) && (
-              <div className="mt-16 flex flex-col gap-6 sm:flex-row">
+              <ButtonGroup className="mt-16">
                 {client.caseStudy && (
                   <Button href={client.caseStudy}>
                     <Files />
@@ -65,7 +66,7 @@ export const MyClientsCarousel = ({ clients }: Props) => {
                     {`${client.shortName} website`}
                   </Button>
                 )}
-              </div>
+              </ButtonGroup>
             )}
           </div>
           <div className="flex flex-1 flex-col items-start justify-center">

diff --git a/apps/website/src/components/Note/Note.tsx b/apps/website/src/components/Note/Note.tsx
@@ -26,7 +26,7 @@ export const Note = ({ children, source, pull }: Props) => {
       </p>
       {source && (
         <div className="flex justify-end text-lg font-[375] leading-8 text-contrast-secondary-dark sm:text-xl sm:leading-10">
-          <p>{`- ${source}`}</p>
+          <p className="max-w-[50%]">{source}</p>
         </div>
       )}
     </div>

diff --git a/apps/website/src/design-system/Button/Button.tsx b/apps/website/src/design-system/Button/Button.tsx
@@ -80,9 +80,12 @@ type ConditionalProps =
       disabled?: never;
     };
 
-type Props = ComponentProps & ConditionalProps & Styles;
+export type ButtonProps = ComponentProps & ConditionalProps & Styles;
 
-export const Button = forwardRef<HTMLAnchorElement & HTMLButtonElement, Props>(
+export const Button = forwardRef<
+  HTMLAnchorElement & HTMLButtonElement,
+  ButtonProps
+>(
   (
     {
       children,

diff --git a/apps/website/src/lib/tracking.ts b/apps/website/src/lib/tracking.ts
@@ -0,0 +1,29 @@
+interface TrackingEvents {
+  "Carousel item selected": {
+    item: any;
+  };
+  "Carousel navigation": {
+    direction: "next" | "prev";
+  };
+  "Accordion item selected": {
+    title: string;
+  };
+  "Filter projects by service": {
+    service: string;
+  };
+  "Filter projects by topic": {
+    topic: string;
+  };
+  "Sort projects by": {
+    sort: string;
+  };
+}
+
+export const track = <TEventKey extends keyof TrackingEvents>(
+  ...args: TrackingEvents[TEventKey] extends null
+    ? [event: TEventKey]
+    : [event: TEventKey, data: TrackingEvents[TEventKey]]
+) => {
+  const [event, data] = args;
+  splitbee.track(event, data);
+};
diff --git a/apps/website/types.d.ts b/apps/website/types.d.ts
@@ -0,0 +1 @@
+declare const splitbee: any;