From 04737c176f2da7033a5de5918d1cb30900c6041c Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Thu, 26 Sep 2024 14:39:48 +0200
Subject: [PATCH] fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup!
 Feat(web-react): Introduce Footer component #DS-1368

---
 packages/web-react/src/components/Footer/Footer.tsx       | 4 +++-
 packages/web-react/src/components/Footer/README.md        | 8 ++++----
 .../src/components/Footer/demo/FooterDefault.tsx          | 2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/web-react/src/components/Footer/Footer.tsx b/packages/web-react/src/components/Footer/Footer.tsx
index 7fd83286ba..ca91f204b1 100644
--- a/packages/web-react/src/components/Footer/Footer.tsx
+++ b/packages/web-react/src/components/Footer/Footer.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
 import { SpiritFooterProps } from '../../types';
@@ -7,9 +8,10 @@ import { SpiritFooterProps } from '../../types';
 export const Footer = (props: SpiritFooterProps): JSX.Element => {
   const { children, ...restProps } = props;
   const { styleProps, props: otherProps } = useStyleProps(restProps);
+  const footerClasses = 'bg-cover pt-1100 pb-1000';
 
   return (
-    <footer {...styleProps} {...otherProps}>
+    <footer {...styleProps} {...otherProps} className={classNames(footerClasses, styleProps.className)}>
       {children}
     </footer>
   );
diff --git a/packages/web-react/src/components/Footer/README.md b/packages/web-react/src/components/Footer/README.md
index f851fbdd35..43c4126f89 100644
--- a/packages/web-react/src/components/Footer/README.md
+++ b/packages/web-react/src/components/Footer/README.md
@@ -33,13 +33,13 @@ This is how all supported building blocks of the Footer build up the complete co
   newsletter subscription form) as needed.
 - Use [Grid][grid] and [Flex][flex] components to create the desired layout.
 - Use [Stack][stack] or [Divider][divider] components to organize individual sections.
-- Use [style props][readme-style-props] and utility classes like `mb-*` or `pt-*` to achieve desired spacings between components.
+- Use [style props][readme-style-props] to achieve desired spacings between components.
 
 ## Navigation Links
 
 Navigation links are structured in sections with a headline and a [Stack][stack] of links.
 
-👉 Please note how the `<nav>` element is paired with an `<Text>` component (using the `aria-labelledby` attribute) to
+👉 Please note how the `<nav>` element is paired with the `<Text>` component (using the `aria-labelledby` attribute) to
 provide a semantic connection between the headline and the navigation component. Just make sure the `id` attribute of
 the `<Text>` component matches the value of the `aria-labelledby` attribute of the `<nav>` element and all `id`s are unique.
 
@@ -75,9 +75,9 @@ This section is optional and consists of a [Grid][grid] layout with up to three
   alignmentY="center"
   spacing="space-900"
 >
-  <div class="text-desktop-left">{/* Product logo */}</div>
+  <div className="text-desktop-left">{/* Product logo */}</div>
   {/* Flex with social media links */}
-  <div class="text-desktop-right">{/* Language switch */}</div>
+  <div className="text-desktop-right">{/* Language switch */}</div>
 </Grid>
 ```
 
diff --git a/packages/web-react/src/components/Footer/demo/FooterDefault.tsx b/packages/web-react/src/components/Footer/demo/FooterDefault.tsx
index 054694c687..e25e2352ab 100644
--- a/packages/web-react/src/components/Footer/demo/FooterDefault.tsx
+++ b/packages/web-react/src/components/Footer/demo/FooterDefault.tsx
@@ -17,7 +17,7 @@ import FooterLinkFactory from './FooterLinkFactory';
 
 const FooterDefault = () => {
   return (
-    <Footer UNSAFE_className="bg-cover pt-1100 pb-1000">
+    <Footer>
       <Container>
         {/* Grid with navigation links */}
         <Grid cols={{ mobile: 1, tablet: 2, desktop: 4 }} spacing="space-800">