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

[richardblondet]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Make sure you are requesting to pull a topic/feature/bugfix branch (right side). Don't request your master!
• Make sure you are making a pull request against the develop branch (left side). Also you should start your branch off our develop.
• Check the commit's or even all commits' message styles matches our requested structure.
• Check your code additions will fail neither code linting checks nor unit test.

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Issue Number: #259

The Footer component currently renders only the WRI logo. This limits usage for collaborative projects, partnerships, and internal initiatives that need to display multiple organizational logos together for co-branding purposes.

What is the new behavior?

• Added additionalLogos prop to Footer component accepting an array of React nodes
• WRI logo remains the default and primary logo, always rendered first on the left
• Additional logos render horizontally to the right of the WRI logo with consistent 16px spacing
• All logos maintain left-side alignment within the footer layout using the existing space-between logic
• Created new footerLogosContainerStyles providing flex layout with proper alignment and gap
• Updated FooterDemo.tsx to showcase the feature with sample partner logo placeholders
• Added WithAdditionalLogos story to Footer.stories.tsx demonstrating the new prop
• Updated Footer README.md with prop definition and usage example
• Added eslint-disable comment for array index key usage (acceptable for static logo arrays)

This enhancement enables co-branding capabilities for internal projects and partnerships while preserving all existing footer functionality and responsive behavior.

Does this introduce a breaking change?

• Yes
• No

The additionalLogos prop is optional and fully backward compatible. Existing implementations will continue working without any modifications.

Other information

Files Modified:

• src/components/Navigation/Footer/types.ts - Added additionalLogos?: React.ReactNode[] to FooterProps interface
• src/components/Navigation/Footer/index.tsx - Implemented logo rendering logic
• src/components/Navigation/Footer/styled.ts - Added footerLogosContainerStyles for layout
• src/components/Navigation/Footer/FooterDemo.tsx - Added demo with sample partner logos
• src/components/Navigation/Footer/Footer.stories.tsx - Added WithAdditionalLogos story
• src/components/Navigation/Footer/README.md - Updated documentation with new prop and example

Visual Testing:

• Run npm start to see the Footer with additional logos in the development environment
• View Storybook story: Navigation/Footer/WithAdditionalLogos

Usage Example:

<Footer
  additionalLogos={[
    <img src='/partner-logo-1.svg' alt='Partner 1' height='32px' />,
    <img src='/partner-logo-2.svg' alt='Partner 2' height='32px' />,
  ]}
>
  {/* footer content */}
</Footer>

Notes:

• Closes DS-259

[github-actions]

❌ Versioning label check failed.

Please apply exactly one of: major, minor, patch, no-bump.

Reason: missing
Current count (of allowed labels): 0

[github-actions]

❌ Versioning label check failed.

Please apply exactly one of: major, minor, patch, no-bump.

Reason: missing
Current count (of allowed labels): 0