@stackshift-ui/header 7.0.0-beta.0 → 7.0.0-beta.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/header",
   "description": "",
-  "version": "7.0.0-beta.0",
+  "version": "7.0.0-beta.10",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -33,21 +33,21 @@
   "dependencies": {
     "@portabletext/react": "^3.1.0",
     "react-icons": "^5.3.0",
-    "@stackshift-ui/heading": "7.0.0-beta.0",
-    "@stackshift-ui/button": "6.1.0-beta.0",
-    "@stackshift-ui/container": "7.0.0-beta.0",
-    "@stackshift-ui/section": "7.0.0-beta.0",
-    "@stackshift-ui/flex": "7.0.0-beta.0",
-    "@stackshift-ui/image": "6.1.0-beta.0",
-    "@stackshift-ui/scripts": "6.1.0-beta.0",
-    "@stackshift-ui/system": "6.1.0-beta.0",
-    "@stackshift-ui/text": "7.0.0-beta.0",
-    "@stackshift-ui/signin-signup": "7.0.0-beta.0",
-    "@stackshift-ui/swiper-pagination": "7.0.0-beta.0",
-    "@stackshift-ui/link": "6.0.12-beta.0"
+    "@stackshift-ui/flex": "7.0.0-beta.5",
+    "@stackshift-ui/heading": "7.0.0-beta.5",
+    "@stackshift-ui/button": "7.0.0-beta.7",
+    "@stackshift-ui/image": "7.0.0-beta.6",
+    "@stackshift-ui/container": "7.0.0-beta.5",
+    "@stackshift-ui/scripts": "7.0.0-beta.4",
+    "@stackshift-ui/section": "7.0.0-beta.5",
+    "@stackshift-ui/link": "7.0.0-beta.5",
+    "@stackshift-ui/system": "7.0.0-beta.5",
+    "@stackshift-ui/text": "7.0.0-beta.5",
+    "@stackshift-ui/signin-signup": "7.0.0-beta.10",
+    "@stackshift-ui/swiper-pagination": "7.0.0-beta.5"
   },
   "peerDependencies": {
-    "@stackshift-ui/system": ">=6.1.0-beta.0",
+    "@stackshift-ui/system": ">=7.0.0-beta.5",
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",

package/src/header.tsx

@@ -1,22 +1,29 @@
-import React, { lazy } from "react";
+import React from "react";
+import HeaderA from "./header_a";
+import HeaderB from "./header_b";
+import HeaderC from "./header_c";
+import HeaderD from "./header_d";
+import HeaderE from "./header_e";
+import HeaderF from "./header_f";
+import HeaderG from "./header_g";
 import {
-  Form,
-  HeaderSections,
-  Images,
-  LabeledRouteWithKey,
-  MainImage,
-  SectionsProps,
-  Template,
+    Form,
+    HeaderSections,
+    Images,
+    LabeledRouteWithKey,
+    MainImage,
+    SectionsProps,
+    Template,
 } from "./types";
 
 const Variants = {
-  variant_a: lazy(() => import("./header_a")),
-  variant_b: lazy(() => import("./header_b")),
-  variant_c: lazy(() => import("./header_c")),
-  variant_d: lazy(() => import("./header_d")),
-  variant_e: lazy(() => import("./header_e")),
-  variant_f: lazy(() => import("./header_f")),
-  variant_g: lazy(() => import("./header_g")),
+  variant_a: HeaderA,
+  variant_b: HeaderB,
+  variant_c: HeaderC,
+  variant_d: HeaderD,
+  variant_e: HeaderE,
+  variant_f: HeaderF,
+  variant_g: HeaderG,
 };
 
 export interface ButtonProps {

package/src/header_a.tsx

@@ -3,9 +3,7 @@ import { Container } from "@stackshift-ui/container";
 import { Flex } from "@stackshift-ui/flex";
 import { Heading } from "@stackshift-ui/heading";
 import { Image } from "@stackshift-ui/image";
-import { Link } from "@stackshift-ui/link";
 import { Section } from "@stackshift-ui/section";
-import { buildSanityLink } from "@stackshift-ui/system";
 import { Text } from "@stackshift-ui/text";
 import React from "react";
 import { ButtonProps, HeaderProps } from ".";
@@ -58,18 +56,6 @@ function Buttons({
   primaryButton?: ButtonProps;
   secondaryButton?: ButtonProps;
 }) {
-  const primaryButtonLink = buildSanityLink({
-    type: "linkInternal",
-    internalLink: primaryButton?.link?.target === "_self" ? primaryButton?.link?.route : "",
-    externalLink: primaryButton?.link?.target != "_self" ? primaryButton?.link?.route : "",
-  });
-
-  const secondaryButtonLink = buildSanityLink({
-    type: "linkInternal",
-    internalLink: secondaryButton?.link?.target === "_self" ? secondaryButton?.link?.route : "",
-    externalLink: secondaryButton?.link?.target != "_self" ? secondaryButton?.link?.route : "",
-  });
-
   return (
     <Flex
       align="center"
@@ -78,27 +64,17 @@ function Buttons({
       direction="col"
       className="lg:justify-start md:flex-row">
       {primaryButton?.label && (
-        <Button variant="default" aria-label={primaryButton?.label} asChild>
-          <Link
-            href={primaryButtonLink.href}
-            target={primaryButtonLink.target}
-            rel={primaryButtonLink.rel}>
-            {primaryButton?.label}
-          </Link>
+        <Button as="link" link={primaryButton}>
+          {primaryButton?.label}
         </Button>
       )}
       {secondaryButton?.label && (
         <Button
+          as="link"
+          link={secondaryButton}
           variant="secondary"
-          className="bg-transparent border hover:bg-gray-300 inline-block font-default text-default transition duration-200 rounded-global"
-          aria-label={secondaryButton?.label}
-          asChild>
-          <Link
-            href={secondaryButtonLink.href}
-            target={secondaryButtonLink.target}
-            rel={secondaryButtonLink.rel}>
-            {secondaryButton?.label}
-          </Link>
+          className="bg-transparent border hover:bg-gray-300 inline-block font-default text-default transition duration-200 rounded-global">
+          {secondaryButton?.label}
         </Button>
       )}
     </Flex>

package/src/header_b.tsx

@@ -3,9 +3,7 @@ import { Container } from "@stackshift-ui/container";
 import { Flex } from "@stackshift-ui/flex";
 import { Heading } from "@stackshift-ui/heading";
 import { Image } from "@stackshift-ui/image";
-import { Link } from "@stackshift-ui/link";
 import { Section } from "@stackshift-ui/section";
-import { buildSanityLink } from "@stackshift-ui/system";
 import { Text } from "@stackshift-ui/text";
 import React from "react";
 import { ButtonProps, HeaderProps } from ".";
@@ -59,18 +57,6 @@ function Buttons({
   primaryButton?: ButtonProps;
   secondaryButton?: ButtonProps;
 }) {
-  const primaryButtonLink = buildSanityLink({
-    type: "linkInternal",
-    internalLink: primaryButton?.link?.target === "_self" ? primaryButton?.link?.route : "",
-    externalLink: primaryButton?.link?.target != "_self" ? primaryButton?.link?.route : "",
-  });
-
-  const secondaryButtonLink = buildSanityLink({
-    type: "linkInternal",
-    internalLink: secondaryButton?.link?.target === "_self" ? secondaryButton?.link?.route : "",
-    externalLink: secondaryButton?.link?.target != "_self" ? secondaryButton?.link?.route : "",
-  });
-
   return (
     <Flex
       align="center"
@@ -79,27 +65,16 @@ function Buttons({
       direction="col"
       className="lg:justify-start md:flex-row">
       {primaryButton?.label && (
-        <Button variant="default" aria-label={primaryButton?.label} asChild>
-          <Link
-            href={primaryButtonLink.href}
-            target={primaryButtonLink.target}
-            rel={primaryButtonLink.rel}>
-            {primaryButton?.label}
-          </Link>
+        <Button as="link" link={primaryButton}>
+          {primaryButton?.label}
         </Button>
       )}
       {secondaryButton?.label && (
         <Button
-          variant="secondary"
-          className="bg-transparent border hover:bg-gray-300 inline-block font-default text-default transition duration-200 rounded-global"
-          aria-label={secondaryButton?.label}
-          asChild>
-          <Link
-            href={secondaryButtonLink.href}
-            target={secondaryButtonLink.target}
-            rel={secondaryButtonLink.rel}>
-            {secondaryButton?.label}
-          </Link>
+          as="link"
+          link={secondaryButton}
+          className="bg-transparent border hover:bg-gray-300 inline-block font-default text-default transition duration-200 rounded-global">
+          {secondaryButton?.label}
         </Button>
       )}
     </Flex>

package/src/header_c.tsx

@@ -2,9 +2,7 @@ import { Button } from "@stackshift-ui/button";
 import { Container } from "@stackshift-ui/container";
 import { Flex } from "@stackshift-ui/flex";
 import { Heading } from "@stackshift-ui/heading";
-import { Link } from "@stackshift-ui/link";
 import { Section } from "@stackshift-ui/section";
-import { buildSanityLink } from "@stackshift-ui/system";
 import { ButtonProps, HeaderProps } from ".";
 
 export default function Header_C({
@@ -66,47 +64,20 @@ function Buttons({
   primaryButton?: ButtonProps;
   secondaryButton?: ButtonProps;
 }) {
-  const primaryButtonLink = buildSanityLink({
-    type: "linkInternal",
-    internalLink: primaryButton?.link?.target === "_self" ? primaryButton?.link?.route : "",
-    externalLink: primaryButton?.link?.target != "_self" ? primaryButton?.link?.route : "",
-  });
-
-  const secondaryButtonLink = buildSanityLink({
-    type: "linkInternal",
-    internalLink: secondaryButton?.link?.target === "_self" ? secondaryButton?.link?.route : "",
-    externalLink: secondaryButton?.link?.target != "_self" ? secondaryButton?.link?.route : "",
-  });
-
   return (
-    <Flex
-      align="center"
-      justify="center"
-      gap={2}
-      direction="col"
-      className="lg:justify-start md:flex-row">
+    <Flex align="center" justify="center" gap={2} direction="col" className="md:flex-row">
       {primaryButton?.label && (
-        <Button variant="default" aria-label={primaryButton?.label} asChild>
-          <Link
-            href={primaryButtonLink.href}
-            target={primaryButtonLink.target}
-            rel={primaryButtonLink.rel}>
-            {primaryButton?.label}
-          </Link>
+        <Button as="link" link={primaryButton}>
+          {primaryButton?.label}
         </Button>
       )}
       {secondaryButton?.label && (
         <Button
+          as="link"
+          link={secondaryButton}
           variant="secondary"
-          className="bg-transparent border hover:bg-gray-300 inline-block font-default text-default transition duration-200 rounded-global"
-          aria-label={secondaryButton?.label}
-          asChild>
-          <Link
-            href={secondaryButtonLink.href}
-            target={secondaryButtonLink.target}
-            rel={secondaryButtonLink.rel}>
-            {secondaryButton?.label}
-          </Link>
+          className="bg-transparent border hover:bg-gray-300 inline-block font-default text-default transition duration-200 rounded-global">
+          {secondaryButton?.label}
         </Button>
       )}
     </Flex>

package/src/header_d.tsx

@@ -3,9 +3,7 @@ import { Container } from "@stackshift-ui/container";
 import { Flex } from "@stackshift-ui/flex";
 import { Heading } from "@stackshift-ui/heading";
 import { Image } from "@stackshift-ui/image";
-import { Link } from "@stackshift-ui/link";
 import { Section } from "@stackshift-ui/section";
-import { buildSanityLink } from "@stackshift-ui/system";
 import { Text } from "@stackshift-ui/text";
 import React from "react";
 import { ButtonProps, HeaderProps } from ".";
@@ -58,18 +56,6 @@ function Buttons({
   primaryButton?: ButtonProps;
   secondaryButton?: ButtonProps;
 }) {
-  const primaryButtonLink = buildSanityLink({
-    type: "linkInternal",
-    internalLink: primaryButton?.link?.target === "_self" ? primaryButton?.link?.route : "",
-    externalLink: primaryButton?.link?.target != "_self" ? primaryButton?.link?.route : "",
-  });
-
-  const secondaryButtonLink = buildSanityLink({
-    type: "linkInternal",
-    internalLink: secondaryButton?.link?.target === "_self" ? secondaryButton?.link?.route : "",
-    externalLink: secondaryButton?.link?.target != "_self" ? secondaryButton?.link?.route : "",
-  });
-
   return (
     <Flex
       align="center"
@@ -78,27 +64,17 @@ function Buttons({
       direction="col"
       className="lg:justify-start md:flex-row">
       {primaryButton?.label && (
-        <Button variant="default" aria-label={primaryButton?.label} asChild>
-          <Link
-            href={primaryButtonLink.href}
-            target={primaryButtonLink.target}
-            rel={primaryButtonLink.rel}>
-            {primaryButton?.label}
-          </Link>
+        <Button as="link" link={primaryButton}>
+          {primaryButton?.label}
         </Button>
       )}
       {secondaryButton?.label && (
         <Button
+          as="link"
+          link={secondaryButton}
           variant="secondary"
-          className="bg-transparent border hover:bg-gray-300 inline-block font-default text-default transition duration-200 rounded-global"
-          aria-label={secondaryButton?.label}
-          asChild>
-          <Link
-            href={secondaryButtonLink.href}
-            target={secondaryButtonLink.target}
-            rel={secondaryButtonLink.rel}>
-            {secondaryButton?.label}
-          </Link>
+          className="bg-transparent border hover:bg-gray-300 inline-block font-default text-default transition duration-200 rounded-global">
+          {secondaryButton?.label}
         </Button>
       )}
     </Flex>

package/src/header_e.tsx

@@ -2,10 +2,8 @@ import { Button } from "@stackshift-ui/button";
 import { Container } from "@stackshift-ui/container";
 import { Flex } from "@stackshift-ui/flex";
 import { Heading } from "@stackshift-ui/heading";
-import { Link } from "@stackshift-ui/link";
 import { Section } from "@stackshift-ui/section";
 import { SigninSignup_A } from "@stackshift-ui/signin-signup";
-import { buildSanityLink } from "@stackshift-ui/system";
 import { Text } from "@stackshift-ui/text";
 import React from "react";
 import { ButtonProps, HeaderProps } from ".";
@@ -63,18 +61,6 @@ function Buttons({
   primaryButton?: ButtonProps;
   secondaryButton?: ButtonProps;
 }) {
-  const primaryButtonLink = buildSanityLink({
-    type: "linkInternal",
-    internalLink: primaryButton?.link?.target === "_self" ? primaryButton?.link?.route : "",
-    externalLink: primaryButton?.link?.target != "_self" ? primaryButton?.link?.route : "",
-  });
-
-  const secondaryButtonLink = buildSanityLink({
-    type: "linkInternal",
-    internalLink: secondaryButton?.link?.target === "_self" ? secondaryButton?.link?.route : "",
-    externalLink: secondaryButton?.link?.target != "_self" ? secondaryButton?.link?.route : "",
-  });
-
   return (
     <Flex
       align="center"
@@ -83,27 +69,17 @@ function Buttons({
       direction="col"
       className="lg:justify-start md:flex-row">
       {primaryButton?.label && (
-        <Button variant="default" aria-label={primaryButton?.label} asChild>
-          <Link
-            href={primaryButtonLink.href}
-            target={primaryButtonLink.target}
-            rel={primaryButtonLink.rel}>
-            {primaryButton?.label}
-          </Link>
+        <Button variant="default" as="link" link={primaryButton}>
+          {primaryButton?.label}
         </Button>
       )}
       {secondaryButton?.label && (
         <Button
+          as="link"
+          link={secondaryButton}
           variant="secondary"
-          className="bg-transparent border hover:bg-gray-300 inline-block font-default text-default transition duration-200 rounded-global"
-          aria-label={secondaryButton?.label}
-          asChild>
-          <Link
-            href={secondaryButtonLink.href}
-            target={secondaryButtonLink.target}
-            rel={secondaryButtonLink.rel}>
-            {secondaryButton?.label}
-          </Link>
+          className="bg-transparent border hover:bg-gray-300 inline-block font-default text-default transition duration-200 rounded-global">
+          {secondaryButton?.label}
         </Button>
       )}
     </Flex>

package/src/header_f.tsx

@@ -11,7 +11,7 @@ import { customBlockStyle } from "./utils/portableText/customBlockStyle";
 import { Link } from "@stackshift-ui/link";
 import { buildSanityLink } from "@stackshift-ui/system";
 import { HeaderProps } from ".";
-import { HeaderBox, HeaderSections } from "./types";
+import { HeaderBox, HeaderSections, LabeledRoute } from "./types";
 
 const IMAGE_HEIGHT_CLASSES = {
   lg: "min-h-[200px] sm:min-h-[400px] md:min-h-[600px] lg:min-h-[800px] xl:min-h-[1150px]",
@@ -162,13 +162,7 @@ const HeaderTitleSection = ({ header }: { header: HeaderBox }) => (
 );
 
 const HeaderButton = ({ header }: { header: HeaderSections }) => {
-  const primaryButtonLink = buildSanityLink({
-    type: "linkInternal",
-    internalLink:
-      header?.primaryButton?.link?.target === "_self" ? header?.primaryButton?.link?.route : "",
-    externalLink:
-      header?.primaryButton?.link?.target != "_self" ? header?.primaryButton?.link?.route : "",
-  });
+  const primaryButtonLink = buildSanityLink(header.primaryButton as LabeledRoute);
 
   return (
     <div className={`flex justify-${header?.alignment} gap-4`}>

package/src/header_g.tsx

@@ -8,6 +8,7 @@ import { buildSanityLink } from "@stackshift-ui/system";
 import { Text } from "@stackshift-ui/text";
 import { useEffect, useState } from "react";
 import { HeaderProps } from ".";
+import { LabeledRoute } from "./types";
 
 export default function Header_G({
   mediaItems,
@@ -45,17 +46,8 @@ export default function Header_G({
     }
   };
 
-  const primaryButtonLink = buildSanityLink({
-    type: "linkInternal",
-    internalLink: primaryButton?.link?.target === "_self" ? primaryButton?.link?.route : "",
-    externalLink: primaryButton?.link?.target != "_self" ? primaryButton?.link?.route : "",
-  });
-
-  const secondaryButtonLink = buildSanityLink({
-    type: "linkInternal",
-    internalLink: secondaryButton?.link?.target === "_self" ? secondaryButton?.link?.route : "",
-    externalLink: secondaryButton?.link?.target != "_self" ? secondaryButton?.link?.route : "",
-  });
+  const primaryButtonLink = buildSanityLink(primaryButton as LabeledRoute);
+  const secondaryButtonLink = buildSanityLink(secondaryButton as LabeledRoute);
 
   return (
     <Section>

package/src/helpers/index.tsx

@@ -0,0 +1,130 @@
+import { Link } from "@stackshift-ui/link";
+import { ConditionalLinkTypes, Logo } from "../types";
+
+export const logoLink = (logo: Logo) => {
+  if (logo?.internalLink && logo?.type === "linkInternal") {
+    if (logo?.internalLink?.toLowerCase()?.includes("home")) {
+      return "/";
+    }
+    return `/${logo.internalLink}`;
+  } else if (logo?.externalLink && logo?.type === "linkExternal") {
+    return logo?.externalLink ?? "/";
+  } else {
+    return "/";
+  }
+};
+
+export const ConditionalLink = ({
+  className,
+  ariaLabel,
+  style = {},
+  children,
+  link,
+  target,
+}: ConditionalLinkTypes) => {
+  const defaultStyle =
+    "inline-block py-2 px-6 rounded-l-xl rounded-t-xl bg-primary hover:bg-primary-foreground text-gray-50 font-bold leading-loose outline-none transition duration-200";
+
+  if (!link?.internalLink && !link?.externalLink) {
+    return (
+      <a
+        className={className ?? defaultStyle}
+        aria-label={ariaLabel}
+        //style={style}
+        target={target}
+        href="/page-not-found">
+        {children}
+      </a>
+    );
+  } else if (
+    (link?.type === "linkInternal" || link.linkType === "linkInternal") &&
+    // link?.internalLink?.toLowerCase()?.includes("home")
+    link?.internalLink?.toLowerCase() === "home"
+  ) {
+    return (
+      <Link
+        href={link?.referenceType === "projects" ? "/projects" : "/"}
+        aria-label={ariaLabel}
+        className={className ?? defaultStyle}
+        //style={style}
+        target={target}>
+        {children}
+      </Link>
+    );
+  } else if (link?.type === "linkInternal" || link?.linkType === "linkInternal") {
+    let hrefPath = "";
+
+    switch (link?.referenceType) {
+      case "projects":
+        hrefPath = `/projects/${link?.internalLink}`;
+        break;
+      case "commercial":
+        hrefPath = `/projects/commercial/${link?.internalLink}`;
+        break;
+      case "residential":
+        hrefPath = `/projects/residential/${link?.internalLink}`;
+        break;
+      case "landscape":
+        hrefPath = `/projects/landscape/${link?.internalLink}`;
+        break;
+      case "public":
+        hrefPath = `/projects/public/${link?.internalLink}`;
+        break;
+      case "teaching":
+        hrefPath = `/projects/teaching/${link?.internalLink}`;
+        break;
+      case "designInMotion":
+        hrefPath = `/projects/future-projects/${link?.internalLink}`;
+        break;
+      case "renovation":
+        hrefPath = `/projects/residential/renovation/${link?.internalLink}`;
+        break;
+      case "newConstruction":
+        hrefPath = `/projects/residential/new-construction/${link?.internalLink}`;
+        break;
+      case "ourTeam":
+        hrefPath = `/our-team/${link?.internalLink}`;
+        break;
+      case "recognition":
+        hrefPath = `/recognition/${link?.internalLink}`;
+        break;
+
+      default:
+        hrefPath = `/${link?.internalLink}`;
+    }
+
+    return (
+      <Link
+        href={hrefPath}
+        aria-label={ariaLabel}
+        className={className ?? defaultStyle}
+        //style={style}
+        target={target}>
+        {children}
+      </Link>
+    );
+  } else if (link?.type === "linkExternal" || link?.linkType === "linkExternal") {
+    return (
+      <a
+        aria-label={ariaLabel}
+        className={className ?? defaultStyle}
+        //style={style}
+        href={link?.externalLink ?? ""}
+        target={target}
+        rel={link?.linkTarget === "_blank" ? "noopener noreferrer" : undefined}>
+        {children}
+      </a>
+    );
+  } else {
+    return (
+      <Link
+        href="/"
+        aria-label={ariaLabel}
+        className={className ?? defaultStyle}
+        //style={style}
+        target={target}>
+        {children}
+      </Link>
+    );
+  }
+};