feat: [DS-259-update_footer_logos] Enable prop to add extra logos in the footer

src/components/Navigation/Footer/Footer.stories.tsx

@@ -118,3 +118,41 @@ export const MaxWidth: Story = {
     ),
   },
 }
+
+export const WithAdditionalLogos: Story = {
+  args: {
+    maxWidth: 1440,
+    filled: true,
+    fixed: true,
+    additionalLogos: [
+      <img
+        src='https://placehold.co/91x32/0066CC/FFFFFF?text=Partner+1'
+        alt='Partner Logo 1'
+        height='32px'
+      />,
+      <img
+        src='https://placehold.co/91x32/00A86B/FFFFFF?text=Partner+2'
+        alt='Partner Logo 2'
+        height='32px'
+      />,
+    ],
+    children: (
+      <>
+        <a
+          href='https://www.wri.org/about/privacy-policy'
+          target='_blank'
+          rel='noreferrer'
+        >
+          Privacy policy
+        </a>
+        <a
+          href='https://www.wri.org/about/wri-data-platforms-tos'
+          target='_blank'
+          rel='noreferrer'
+        >
+          Terms of service
+        </a>
+      </>
+    ),
+  },
+}

src/components/Navigation/Footer/FooterDemo.tsx

@@ -1,7 +1,18 @@
 import { Footer } from '../..'
 
 const FooterDemo = () => (
-  <Footer maxWidth={1440} filled fixed>
+  <Footer
+    maxWidth={1440}
+    filled
+    fixed
+    additionalLogos={[
+      <img
+        src='https://placehold.co/91x32/b0b0b0/31343C?font=playfair-display&text=Partner+Logo'
+        alt='Partner Logo'
+        height='32px'
+      />
+    ]}
+  >
     <a
       href='https://www.wri.org/about/privacy-policy'
       target='_blank'

src/components/Navigation/Footer/README.md

@@ -40,6 +40,7 @@ type FooterProps = {
   fixed?: boolean
   filled?: boolean
   maxWidth?: number
+  additionalLogos?: React.ReactNode[]
 }
 ```
 
@@ -126,3 +127,32 @@ type FooterProps = {
   </a>
 </Footer>
 ```
+
+## With Additional Logos
+
+```tsx
+<Footer
+  maxWidth={1440}
+  filled
+  fixed
+  additionalLogos={[
+    <img src='/partner-logo-1.svg' alt='Partner Logo 1' height='32px' />,
+    <img src='/partner-logo-2.svg' alt='Partner Logo 2' height='32px' />,
+  ]}
+>
+  <a
+    href='https://www.wri.org/about/privacy-policy'
+    target='_blank'
+    rel='noreferrer'
+  >
+    Privacy policy
+  </a>
+  <a
+    href='https://www.wri.org/about/wri-data-platforms-tos'
+    target='_blank'
+    rel='noreferrer'
+  >
+    Terms of service
+  </a>
+</Footer>
+```

src/components/Navigation/Footer/index.tsx

@@ -7,6 +7,7 @@ import {
   footerContentStyles,
   footerLabelStyles,
   footerStyles,
+  footerLogosContainerStyles,
 } from './styled'
 import { WriLogoBlackAndWhiteIcon } from '../../icons'
 
@@ -16,14 +17,17 @@ const Footer = ({
   fixed,
   filled,
   maxWidth,
+  additionalLogos,
 }: FooterProps) => {
   const actualYear = new Date().getFullYear()
 
   return (
     <footer css={footerStyles(fixed, filled)}>
       <div css={footerContainerStyles(maxWidth)}>
-        <div>
+        <div css={footerLogosContainerStyles}>
           <WriLogoBlackAndWhiteIcon height='32px' width='91px' />
+          {/* eslint-disable-next-line react/no-array-index-key */}
+          {additionalLogos && additionalLogos.map((logo, index) => <div key={index}>{logo}</div>)}
         </div>
         <div css={footerContentStyles}>{children}</div>
         <div>

src/components/Navigation/Footer/styled.ts

@@ -62,3 +62,9 @@ export const footerLabelStyles = css`
     text-align: left;
   }
 `
+
+export const footerLogosContainerStyles = css`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`

src/components/Navigation/Footer/types.ts

@@ -4,4 +4,5 @@ export type FooterProps = {
   fixed?: boolean
   filled?: boolean
   maxWidth?: number
+  additionalLogos?: React.ReactNode[]
 }