@stackshift-ui/footer 6.0.10 → 6.0.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/footer",
   "description": "",
-  "version": "6.0.10",
+  "version": "6.0.11",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -29,30 +29,30 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "6.0.7",
-    "@stackshift-ui/typescript-config": "6.0.7"
+    "@stackshift-ui/eslint-config": "6.0.8",
+    "@stackshift-ui/typescript-config": "6.0.8"
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "@stackshift-ui/system": "6.0.8",
-    "@stackshift-ui/button": "6.0.8",
-    "@stackshift-ui/text": "6.0.8",
-    "@stackshift-ui/link": "6.0.8",
-    "@stackshift-ui/image": "6.0.8",
-    "@stackshift-ui/social-icons": "6.0.8",
-    "@stackshift-ui/grid": "6.0.8",
-    "@stackshift-ui/flex": "6.0.8",
-    "@stackshift-ui/grid-item": "6.0.8",
-    "@stackshift-ui/section": "6.0.8",
-    "@stackshift-ui/container": "6.0.8",
-    "@stackshift-ui/scripts": "6.0.7"
+    "@stackshift-ui/link": "6.0.9",
+    "@stackshift-ui/system": "6.0.9",
+    "@stackshift-ui/section": "6.0.9",
+    "@stackshift-ui/text": "6.0.9",
+    "@stackshift-ui/container": "6.0.9",
+    "@stackshift-ui/grid": "6.0.9",
+    "@stackshift-ui/flex": "6.0.9",
+    "@stackshift-ui/button": "6.0.9",
+    "@stackshift-ui/grid-item": "6.0.9",
+    "@stackshift-ui/scripts": "6.0.8",
+    "@stackshift-ui/image": "6.0.9",
+    "@stackshift-ui/social-icons": "6.0.9"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",
     "react-dom": "16.8 - 19",
-    "@stackshift-ui/system": ">=6.0.8"
+    "@stackshift-ui/system": ">=6.0.9"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/footer_a.tsx

@@ -15,13 +15,13 @@ import { ContactDetails, Logo, SocialLink, Socials } from "./types";
 export default function Footer_A({ logo, text, contacts, copyright, socialMedia }: FooterProps) {
   return (
     <Section className="py-20 bg-background">
-      <Container maxWidth={1000}>
+      <Container maxWidth={1280} className="lg:px-4">
         <Flex wrap className="mb-5 lg:mb-20">
           <LogoSection logo={logo} />
           <TextContainer text={text} />
           <ContactsContainer contacts={contacts} />
         </Flex>
-        <Flex justify="between" align="center" className="w-full mx-auto lg:flex">
+        <Flex justify="between" align="center" wrap className="w-full mx-auto gap-4">
           <CopyrightContainer copyright={copyright} />
           <SocialMediaContainer socialMedia={socialMedia} />
         </Flex>
@@ -36,16 +36,15 @@ function LogoSection({ logo }: { logo?: Logo }) {
   return (
     <div className="w-full mb-5 lg:w-1/5">
       <Link
+        className="w-40 h-14 flex items-center"
         aria-label={logoLink(logo) === "/" ? "Go to home page" : `Go to ${logoLink(logo)}`}
-        className="text-3xl font-bold leading-none"
         href={logoLink(logo)}
         target={logo?.linkTarget}
         rel={logo?.linkTarget === "_blank" ? "noopener noreferrer" : ""}>
         <Image
+          className="w-fit h-full object-contain"
           src={`${logo?.image}`}
-          //   sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-          width={132}
-          height={56}
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
           alt={logo?.alt ?? "footer-logo"}
         />
       </Link>
@@ -57,7 +56,7 @@ function TextContainer({ text }: { text?: string }) {
   if (!text) return null;
 
   return (
-    <Container className="w-full mb-5 lg:w-1/5" maxWidth={1000}>
+    <Container className="w-full mb-5 lg:w-1/5 !px-0 lg:px-4" maxWidth={1280}>
       <Text muted className="leading-loose">
         {text}
       </Text>
@@ -69,7 +68,7 @@ function ContactsContainer({ contacts }: { contacts?: ContactDetails[] }) {
   if (!contacts) return null;
 
   return (
-    <Container className="w-full mt-1 ml-auto lg:w-1/2" maxWidth={1000}>
+    <Container className="w-full mt-1 lg:w-1/2 !px-0 lg:px-4" maxWidth={1280}>
       {contacts?.map((contact, index) => (
         <Grid columns={1} gap={4} className="lg:gap-10 md:grid-cols-3" key={index}>
           <GridItem span={1}>
@@ -124,33 +123,32 @@ function SocialMediaContainer({ socialMedia }: { socialMedia?: SocialLink[] }) {
   if (!socialMedia) return null;
 
   return (
-    <Flex wrap className="space-x-2 lg:mx-10 lg:space-x-4">
-      {socialMedia?.map((social, index) => <SocialMediaLink social={social} index={index} />)}
+    <Flex wrap className="gap-5">
+      {socialMedia?.map((social, index) => <SocialMediaLink social={social} key={index} />)}
     </Flex>
   );
 }
 
-function SocialMediaLink({ social, index }: { social?: SocialLink; index?: number }) {
+function SocialMediaLink({ social }: { social?: SocialLink }) {
   if (!social?.socialMediaLink) return null;
 
   return (
     <Link
       aria-label={social?.socialMedia || social?.socialMediaPlatform || ""}
-      className="inline-block p-2 mr-2 rounded"
+      className="rounded w-6 h-6 flex items-center"
       target="_blank"
       rel="noopener noreferrer"
-      href={social?.socialMediaLink}
-      key={index}>
+      href={social?.socialMediaLink}>
       {social?.socialMediaIcon?.image ? (
         <Image
-          className="h-6"
+          className="w-full h-full object-contain"
           src={`${social?.socialMediaIcon?.image}`}
-          width={24}
-          height={24}
+          width={56}
+          height={56}
           alt={social?.socialMediaIcon?.alt ?? "contact-socialMedia-icon"}
         />
       ) : (
-        <SocialIcons social={social?.socialMedia as Socials} />
+        <SocialIcons social={social?.socialMedia} />
       )}
     </Link>
   );

package/src/footer_b.tsx

@@ -20,7 +20,7 @@ export default function Footer_B({ logo, copyright, socialMedia, menu }: FooterP
           <LogoSection logo={logo} />
           <MenuLists menu={menu} />
         </Flex>
-        <Flex wrap align="center" justify="between" className="mt-8">
+        <Flex wrap className="mt-8 justify-between items-start">
           <CopyrightContainer copyright={copyright} />
           <SocialMediaContainer socialMedia={socialMedia} />
         </Flex>
@@ -33,20 +33,14 @@ function LogoSection({ logo }: { logo?: Logo }) {
   if (!logo?.image) return null;
 
   return (
-    <div className="w-full mt-8 lg:mb-4 lg:w-1/5">
+    <div className="mb-8 xl:mb-0 w-full lg:w-1/5">
       <Link
         aria-label={logoLink(logo) === "/" ? "Go to home page" : `Go to ${logoLink(logo)}`}
-        className="inline-block text-3xl font-bold leading-none"
+        className="w-40 h-14 flex items-center"
         href={logoLink(logo)}
         target={logo?.linkTarget}
         rel={logo?.linkTarget === "_blank" ? "noopener noreferrer" : ""}>
-        <Image
-          src={logo?.image}
-          alt={logo?.alt ?? "footer-logo"}
-          width={80}
-          height={80}
-          className="inline-block text-3xl font-bold leading-none"
-        />
+        <Image className="w-full h-full " src={logo?.image} alt={logo?.alt ?? "footer-logo"} />
       </Link>
     </div>
   );
@@ -57,7 +51,7 @@ function MenuLists({ menu }: { menu?: LabeledRouteWithKey[] }) {
 
   return (
     <div className="w-full lg:w-auto">
-      <Flex wrap align="center" justify="between" as="ul" className=" mt-8 lg:space-x-5">
+      <Flex wrap align="center" justify="between" as="ul" gap={5} className="mt-8">
         {menu?.map((links, index, { length }) => (
           <React.Fragment key={links?._key || index}>
             <MenuList links={links} />
@@ -109,7 +103,7 @@ function CopyrightContainer({ copyright }: { copyright?: string }) {
   if (!copyright) return null;
 
   return (
-    <Text muted className="order-last text-sm ">
+    <Text muted className="order-last text-sm p-2">
       {copyright}
     </Text>
   );
@@ -131,7 +125,7 @@ function SocialMediaLink({ social }: { social?: SocialLink }) {
   return (
     <Link
       aria-label={social?.socialMedia || social?.socialMediaPlatform || ""}
-      className="inline-block p-2 mr-2 rounded"
+      className="inline-block p-2 rounded"
       target="_blank"
       rel="noopener noreferrer"
       href={social?.socialMediaLink}

package/src/footer_c.tsx

@@ -67,7 +67,7 @@ function MenuLists({ menu }: { menu?: LabeledRouteWithKey[] }) {
   return (
     <div className="mx-auto">
       <Flex
-        className="flex-col gap-0 lg:flex-row lg:gap-10"
+        className="flex-col gap-4 lg:flex-row lg:gap-10"
         as="ul"
         align="center"
         justify="center">
@@ -97,26 +97,25 @@ function SocialMediaContainer({ socialMedia }: { socialMedia?: SocialLink[] }) {
   if (!socialMedia) return null;
 
   return (
-    <Flex wrap justify="center" className="space-y-2 sm:space-y-0">
-      {socialMedia?.map((social, index) => <SocialMediaLink social={social} index={index} />)}
+    <Flex wrap justify="center" align="center" className="gap-5">
+      {socialMedia?.map((social, index) => <SocialMediaLink social={social} key={index} />)}
     </Flex>
   );
 }
 
-function SocialMediaLink({ social, index }: { social?: SocialLink; index?: number }) {
+function SocialMediaLink({ social }: { social?: SocialLink }) {
   if (!social?.socialMediaLink) return null;
 
   return (
     <Link
       aria-label={social?.socialMedia || social?.socialMediaPlatform || ""}
-      className="inline-block p-2 mr-2 rounded"
+      className="rounded w-6 h-6 flex items-center"
       target="_blank"
       rel="noopener noreferrer"
-      href={social?.socialMediaLink}
-      key={index}>
+      href={social?.socialMediaLink}>
       {social?.socialMediaIcon?.image ? (
         <Image
-          className="h-6"
+          className="w-full h-full object-contain"
           src={`${social?.socialMediaIcon?.image}`}
           width={56}
           height={56}

package/src/footer_d.tsx

@@ -54,16 +54,15 @@ function LogoSection({ logo }: { logo?: Logo }) {
 
   return (
     <Link
-      className="inline-block text-xl font-bold leading-none"
+      className="w-40 h-14 flex items-center"
       aria-label={logoLink(logo) === "/" ? "Go to home page" : `Go to ${logoLink(logo)}`}
       href={logoLink(logo)}
       target={logo?.linkTarget}
       rel={logo?.linkTarget === "_blank" ? "noopener noreferrer" : ""}>
       <Image
+        className="w-fit h-full object-contain"
         src={`${logo?.image}`}
         sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-        width={132}
-        height={56}
         alt={logo?.alt ?? "footer-logo"}
       />
     </Link>
@@ -157,17 +156,17 @@ function SocialMediaLink({ social }: { social?: SocialLink }) {
   return (
     <Link
       aria-label={social?.socialMedia || social?.socialMediaPlatform || ""}
-      className="sm:inline-flex items-center justify-center w-10 h-10 rounded-full hover:bg-gray-100"
+      className="rounded w-6 h-6 flex items-center"
       target="_blank"
       rel="noopener noreferrer"
       href={social?.socialMediaLink}>
       {social?.socialMediaIcon?.image ? (
         <Image
-          className="h-6 w-6"
+          className="w-full h-full object-contain"
           src={`${social?.socialMediaIcon?.image}`}
-          width={24}
-          height={24}
-          alt={social?.socialMediaIcon?.alt ?? "socialmedia-icon"}
+          width={56}
+          height={56}
+          alt={social?.socialMediaIcon?.alt ?? "contact-socialMedia-icon"}
         />
       ) : (
         <SocialIcons social={getSocialType(social?.socialMedia)} />