@stackshift-ui/footer 6.0.13 → 6.1.0

package/dist/types.d.ts

@@ -1,9 +1,71 @@
+import { PortableTextComponents } from "@portabletext/react";
 export type StyleVariants<T extends string> = Record<T, string>;
 export type Socials = "facebook" | "instagram" | "youtube" | "linkedin" | "twitter";
 export interface MainImage {
     image: string;
     alt?: string;
 }
+export interface MegaMenu {
+    _type: string;
+    showcaseLink?: ShowcaseLink[];
+    links?: MegaMenuLink[];
+    _key: string;
+    title?: string;
+    groupOfLinks?: GroupOfLink[];
+    label?: string;
+    linkTarget?: string;
+    linkType?: string;
+    url?: string;
+    linkExternal?: string;
+}
+export interface Logo extends ConditionalLink {
+    alt?: string;
+    linkTarget?: string;
+    image?: string;
+}
+export interface Logos {
+    logo: Logo[];
+}
+export interface GroupOfLink {
+    _type: string;
+    links: GroupOfLinkRoot[];
+    _key: string;
+    title: string;
+    primaryButton: LabeledRouteWithKey;
+}
+export interface GroupOfLinkRoot {
+    title: string;
+    _type: string;
+    label?: string;
+    links: LabeledRouteWithKey[];
+    _key: string;
+}
+export interface MegaMenu {
+    _type: string;
+    showcaseLink?: ShowcaseLink[];
+    links?: MegaMenuLink[];
+    _key: string;
+    title?: string;
+    groupOfLinks?: GroupOfLink[];
+    label?: string;
+    linkTarget?: string;
+    linkType?: string;
+    url?: string;
+}
+export interface ShowcaseLink {
+    mainImage: MainImage;
+    _type: string;
+    primaryButton: LabeledRouteWithKey;
+    _key: string;
+}
+export interface MegaMenuLink {
+    _key: string;
+    title: string;
+    _type: string;
+    links: LabeledRouteWithKey[];
+    primaryButton: LabeledRouteWithKey;
+    label: string;
+}
 export interface LabeledRoute extends ConditionalLink {
     ariaLabel?: string;
     label?: string;
@@ -11,6 +73,10 @@ export interface LabeledRoute extends ConditionalLink {
     linkType?: string;
     _type?: string;
     linkInternal?: any;
+    linkExternal?: any;
+    referenceType?: string;
+    multipleRoutes?: LabeledRouteWithKey[];
+    multipleInnerRoutes?: LabeledRouteWithKey[];
 }
 export interface ConditionalLink {
     type?: string;
@@ -24,10 +90,15 @@ export interface StatItems {
     _key?: string;
     _type?: string;
 }
-export interface Logo extends ConditionalLink {
+export interface Logo {
     alt?: string;
     linkTarget?: string;
     image?: string;
+    type?: string;
+    internalLink?: string;
+    externalLink?: string;
+    linkExternal?: string;
+    linkInternal?: string;
 }
 export interface Images {
     image?: string;
@@ -54,6 +125,17 @@ export interface SocialLink {
 }
 export interface LabeledRouteWithKey extends LabeledRoute {
     _key?: string;
+    image?: string;
+    alt?: string;
+    multipleRoutes?: LabeledRouteWithKey[];
+    featuredRoute?: {
+        featuredLink: LabeledRoute;
+        mainImage: {
+            image: string;
+            alt: string;
+        };
+    };
+    routeType?: string;
 }
 export interface ArrayOfImageTitleAndText {
     mainImage?: {
@@ -166,12 +248,17 @@ export interface Sections extends SanityBody {
 export interface Variants {
     template?: Template;
     multipleMenus?: any;
+    multipleLinks?: any;
+    megaMenu?: MegaMenu[];
     arrayOfTitleAndText?: ArrayOfTitleAndText[] | null;
     logo?: Logo | null;
+    logos?: Logos[] | null;
     primaryButton?: LabeledRoute | null;
     secondaryButton?: LabeledRoute | null;
     routes?: LabeledRouteWithKey[] | null;
     menu?: LabeledRouteWithKey[] | null;
+    dropdownMenu?: LabeledRouteWithKey[] | null;
+    iconLinks?: LabeledRouteWithKey[] | null;
     plans?: Plans[] | null;
     formLinks?: LabeledRouteWithKey[] | null;
     portfolios?: Portfolios[] | null;
@@ -195,6 +282,7 @@ export interface Variants {
     contactEmail?: string | null;
     contactNumber?: string | null;
     socialLinks?: SocialLink[] | null;
+    socialMedia?: SocialLink[] | null;
     block?: any;
     heading?: string | null;
     acceptButtonLabel?: string | null;
@@ -359,4 +447,27 @@ export declare interface Reference {
         };
     };
 }
+export type MyPortableTextComponents = PortableTextComponents & {
+    code?: ({ value }: {
+        value: {
+            language?: string;
+            code?: string;
+        };
+    }) => JSX.Element;
+};
+export interface ConditionalLinkTypes {
+    className?: string;
+    ariaLabel: string;
+    style?: any;
+    children: string | React.ReactNode;
+    link: LabeledRoute | LabeledRouteWithKey | undefined;
+    target?: string;
+}
+export interface IconLink {
+    _key: string;
+    image: string;
+    alt?: string;
+    linkExternal: string;
+    linkTarget?: "_blank" | "_self";
+}
 export {};

package/dist/types.js

@@ -1 +1 @@
-"use strict";var l=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var o=Object.prototype.hasOwnProperty;var g=(n,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of a(t))!o.call(n,e)&&e!==r&&l(n,e,{get:()=>t[e],enumerable:!(i=s(t,e))||i.enumerable});return n};var u=n=>g(l({},"__esModule",{value:!0}),n);var c={};module.exports=u(c);
+"use strict";var l=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var o=Object.prototype.hasOwnProperty;var g=(n,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of s(t))!o.call(n,e)&&e!==r&&l(n,e,{get:()=>t[e],enumerable:!(i=a(t,e))||i.enumerable});return n};var u=n=>g(l({},"__esModule",{value:!0}),n);var c={};module.exports=u(c);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/footer",
   "description": "",
-  "version": "6.0.13",
+  "version": "6.1.0",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -33,26 +33,27 @@
     "@stackshift-ui/typescript-config": "6.0.10"
   },
   "dependencies": {
+    "@portabletext/react": "^3.1.0",
     "classnames": "^2.5.1",
-    "@stackshift-ui/scripts": "6.0.10",
-    "@stackshift-ui/text": "6.0.11",
-    "@stackshift-ui/button": "6.0.11",
-    "@stackshift-ui/system": "6.0.11",
-    "@stackshift-ui/image": "6.0.11",
-    "@stackshift-ui/link": "6.0.11",
-    "@stackshift-ui/flex": "6.0.11",
-    "@stackshift-ui/section": "6.0.11",
-    "@stackshift-ui/grid": "6.0.11",
-    "@stackshift-ui/social-icons": "6.0.11",
-    "@stackshift-ui/grid-item": "6.0.11",
-    "@stackshift-ui/container": "6.0.11"
+    "@stackshift-ui/scripts": "6.1.0",
+    "@stackshift-ui/text": "6.1.0",
+    "@stackshift-ui/image": "6.1.0",
+    "@stackshift-ui/flex": "6.1.0",
+    "@stackshift-ui/system": "6.1.0",
+    "@stackshift-ui/grid-item": "6.1.0",
+    "@stackshift-ui/grid": "6.1.0",
+    "@stackshift-ui/link": "6.1.0",
+    "@stackshift-ui/container": "6.1.0",
+    "@stackshift-ui/social-icons": "6.1.0",
+    "@stackshift-ui/section": "6.1.0",
+    "@stackshift-ui/button": "6.1.0"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",
     "react-dom": "16.8 - 19",
-    "@stackshift-ui/system": ">=6.0.11"
+    "@stackshift-ui/system": ">=7.0.0"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/footer.test.tsx

@@ -7,7 +7,7 @@ describe.concurrent("footer", () => {
 
   test.skip("Dummy test - test if renders without errors", ({ expect }) => {
     const clx = "my-class";
-    render(<Footer />);
-    expect(screen.getByTestId("{ kebabCase name }}").classList).toContain(clx);
+    render(<Footer data-testid="footer" />);
+    expect(screen.getByTestId("footer").classList).toContain(clx);
   });
 });

package/src/footer.tsx

@@ -1,11 +1,15 @@
-import React, { lazy } from "react";
-import { SectionsProps, Logo, ContactDetails, SocialLink, LabeledRouteWithKey } from "./types";
+import React from "react";
+import FooterA from "./footer_a";
+import FooterB from "./footer_b";
+import FooterC from "./footer_c";
+import FooterD from "./footer_d";
+import { ContactDetails, LabeledRouteWithKey, Logo, SectionsProps, SocialLink } from "./types";
 
 const Variants = {
-  variant_a: lazy(() => import("./footer_a")),
-  variant_b: lazy(() => import("./footer_b")),
-  variant_c: lazy(() => import("./footer_c")),
-  variant_d: lazy(() => import("./footer_d")),
+  variant_a: FooterA,
+  variant_b: FooterB,
+  variant_c: FooterC,
+  variant_d: FooterD,
 };
 
 export interface FooterProps {

package/src/footer_a.tsx

@@ -7,7 +7,6 @@ import { Link } from "@stackshift-ui/link";
 import { Section } from "@stackshift-ui/section";
 import { SocialIcons } from "@stackshift-ui/social-icons";
 import { Text } from "@stackshift-ui/text";
-
 import { FooterProps } from ".";
 import { logoLink } from "./helper";
 import { ContactDetails, Logo, SocialLink, Socials } from "./types";
@@ -124,7 +123,9 @@ function SocialMediaContainer({ socialMedia }: { socialMedia?: SocialLink[] }) {
 
   return (
     <Flex wrap className="gap-5">
-      {socialMedia?.map((social, index) => <SocialMediaLink social={social} key={index} />)}
+      {socialMedia?.map((social, index) => (
+        <SocialMediaLink social={social} key={index} />
+      ))}
     </Flex>
   );
 }

package/src/footer_b.tsx

@@ -7,7 +7,6 @@ import { Section } from "@stackshift-ui/section";
 import { SocialIcons } from "@stackshift-ui/social-icons";
 import { Text } from "@stackshift-ui/text";
 import React from "react";
-
 import { FooterProps } from ".";
 import { logoLink } from "./helper";
 import { LabeledRoute, LabeledRouteWithKey, Logo, SocialLink, Socials } from "./types";
@@ -33,7 +32,7 @@ function LogoSection({ logo }: { logo?: Logo }) {
   if (!logo?.image) return null;
 
   return (
-    <div className="mb-8 xl:mb-0 w-full lg:w-1/5">
+    <div className="w-full lg:w-1/5">
       <Link
         aria-label={logoLink(logo) === "/" ? "Go to home page" : `Go to ${logoLink(logo)}`}
         className="w-40 h-14 flex items-center"
@@ -51,7 +50,7 @@ function MenuLists({ menu }: { menu?: LabeledRouteWithKey[] }) {
 
   return (
     <div className="w-full lg:w-auto">
-      <Flex wrap align="center" justify="between" as="ul" gap={5} className="mt-8">
+      <Flex wrap align="center" justify="between" as="ul" gap={5}>
         {menu?.map((links, index, { length }) => (
           <React.Fragment key={links?._key || index}>
             <MenuList links={links} />
@@ -71,8 +70,10 @@ function MenuList({ links, index }: { links?: LabeledRoute; index?: number }) {
       <Button
         as="link"
         link={links}
+        variant="unstyled"
         className="text-gray-500 no-underline lg:text-sm hover:text-gray-700"
-        ariaLabel={links?.label}>
+        aria-label={links?.label}
+        asChild>
         {links?.label}
       </Button>
     </li>
@@ -114,7 +115,9 @@ function SocialMediaContainer({ socialMedia }: { socialMedia?: SocialLink[] }) {
 
   return (
     <div className="order-first mb-4 lg:order-last lg:mb-0">
-      {socialMedia?.map(social => <SocialMediaLink social={social} />)}
+      {socialMedia?.map(social => (
+        <SocialMediaLink social={social} />
+      ))}
     </div>
   );
 }

package/src/footer_c.tsx

@@ -6,7 +6,6 @@ import { Link } from "@stackshift-ui/link";
 import { Section } from "@stackshift-ui/section";
 import { SocialIcons } from "@stackshift-ui/social-icons";
 import { Text } from "@stackshift-ui/text";
-
 import { FooterProps } from ".";
 import { logoLink } from "./helper";
 import { LabeledRoute, LabeledRouteWithKey, Logo, SocialLink, Socials } from "./types";
@@ -71,7 +70,9 @@ function MenuLists({ menu }: { menu?: LabeledRouteWithKey[] }) {
         as="ul"
         align="center"
         justify="center">
-        {menu?.map((links, index) => <MenuList links={links} index={index} />)}
+        {menu?.map((links, index) => (
+          <MenuList links={links} index={index} />
+        ))}
       </Flex>
     </div>
   );
@@ -85,8 +86,10 @@ function MenuList({ links, index }: { links?: LabeledRoute; index?: number }) {
       <Button
         as="link"
         link={links}
+        variant="unstyled"
+        asChild
         className="text-sm text-center text-black no-underline hover:text-gray-500 whitespace-nowrap"
-        ariaLabel={links?.label}>
+        aria-label={links?.label}>
         {links?.label}
       </Button>
     </li>
@@ -98,7 +101,9 @@ function SocialMediaContainer({ socialMedia }: { socialMedia?: SocialLink[] }) {
 
   return (
     <Flex wrap justify="center" align="center" className="gap-5">
-      {socialMedia?.map((social, index) => <SocialMediaLink social={social} key={index} />)}
+      {socialMedia?.map((social, index) => (
+        <SocialMediaLink social={social} key={index} />
+      ))}
     </Flex>
   );
 }
@@ -130,23 +135,23 @@ function SocialMediaLink({ social }: { social?: SocialLink }) {
 
 function BorderStyle() {
   return (
-    <div className="flex w-full">
-      <div className="flex w-1/3">
+    <Flex className="w-full">
+      <Flex className="w-1/3">
         <div className="w-1/3 py-1 bg-secondary" />
         <div className="w-1/3 py-1 bg-primary" />
         <div className="w-1/3 py-1 bg-primary" />
-      </div>
-      <div className="flex w-1/3">
+      </Flex>
+      <Flex className="w-1/3">
         <div className="w-1/3 py-1 bg-secondary" />
         <div className="w-1/3 py-1 bg-primary" />
         <div className="w-1/3 py-1 bg-primary" />
-      </div>
-      <div className="flex w-1/3">
+      </Flex>
+      <Flex className="w-1/3">
         <div className="w-1/3 py-1 bg-secondary" />
         <div className="w-1/3 py-1 bg-primary" />
         <div className="w-1/3 py-1 bg-primary" />
-      </div>
-    </div>
+      </Flex>
+    </Flex>
   );
 }
 

package/src/footer_d.tsx

@@ -6,7 +6,6 @@ import { Link } from "@stackshift-ui/link";
 import { Section } from "@stackshift-ui/section";
 import { SocialIcons } from "@stackshift-ui/social-icons";
 import { Text } from "@stackshift-ui/text";
-
 import { FooterProps } from ".";
 import { logoLink } from "./helper";
 import { Logo, SocialLink, Socials } from "./types";
@@ -21,29 +20,29 @@ export default function Footer_D({
   return (
     <Section className="py-20 overflow-hidden bg-background">
       <Container maxWidth={1280}>
-        <div className="flex flex-col lg:flex-row w-full gap-5 lg:items-center lg:justify-between xl:items-start">
+        <Flex className="flex-col lg:flex-row w-full gap-5 lg:items-center lg:justify-between xl:items-start">
           <div className="w-full lg:max-w-sm xl:max-w-xs space-y-4">
             <LogoSection logo={logo} />
             <TextSection text={text} />
           </div>
 
-          <div className="flex flex-col space-y-8 lg:space-y-0">
-            <div className="flex flex-col lg:flex-row w-full justify-between items-start lg:items-center">
+          <Flex className="flex-col space-y-8 lg:space-y-0">
+            <Flex className=" flex-col lg:flex-row w-full justify-between items-start lg:items-center">
               <MenuSection multipleMenus={multipleMenus} />
-            </div>
-          </div>
+            </Flex>
+          </Flex>
 
           <div className="hidden [@media(min-width:1444px)]:block">
             <SocialMediaContainer socialMedia={socialMedia} />
           </div>
-        </div>
+        </Flex>
         <div className="hidden [@media(min-width:1444px)]:block items-center">
           <CopyrightSection copyright={copyright} />
         </div>
-        <div className="flex flex-col sm:flex-row w-full sm:items-center sm:justify-between pt-10 gap-5 [@media(min-width:1444px)]:hidden">
+        <Flex className="flex-col sm:flex-row w-full sm:items-center sm:justify-between pt-10 gap-5 [@media(min-width:1444px)]:hidden">
           <CopyrightSection copyright={copyright} />
           <SocialMediaContainer socialMedia={socialMedia} />
-        </div>
+        </Flex>
       </Container>
     </Section>
   );
@@ -90,7 +89,9 @@ function MenuSection({ multipleMenus }: { multipleMenus?: any[] }) {
 
   return (
     <div className="flex flex-col sm:flex-row flex-wrap gap-5">
-      {multipleMenus?.map(menu => <MenuLinks key={menu?._key} menu={menu} />)}
+      {multipleMenus?.map(menu => (
+        <MenuLinks key={menu?._key} menu={menu} />
+      ))}
     </div>
   );
 }
@@ -112,8 +113,10 @@ function MenuLinks({ menu }: { menu?: any }) {
               <Button
                 as="link"
                 link={link}
-                className="text-gray-500 no-underline hover:text-gray-700"
-                ariaLabel={link?.label}>
+                variant="unstyled"
+                className="text-gray-500 no-underline hover:text-gray-700 px-0 py-0"
+                aria-label={link?.label}
+                asChild>
                 {link?.label}
               </Button>
             </li>

package/src/helper/index.tsx

@@ -1,4 +1,5 @@
-import { Logo } from "../types";
+import { Link } from "@stackshift-ui/link";
+import { ConditionalLinkTypes, Logo } from "../types";
 
 // Logo link
 export const logoLink = (logo: Logo) => {
@@ -13,3 +14,118 @@ export const logoLink = (logo: Logo) => {
     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>
+    );
+  }
+};