fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! Feat(web-reac…

…t): Introduce Footer component #DS-1368

packages/web-react/src/components/Footer/Footer.tsx

@@ -1,15 +1,17 @@
 'use client';
 
+import classNames from 'classnames';
 import React from 'react';
 import { useStyleProps } from '../../hooks';
 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>
   );

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>
 ```
 

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">