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

---
 .../examples/FooterContent.stories.tsx        | 261 +++++++++---------
 1 file changed, 135 insertions(+), 126 deletions(-)

diff --git a/packages/web-react/docs/stories/examples/FooterContent.stories.tsx b/packages/web-react/docs/stories/examples/FooterContent.stories.tsx
index f601187f3f..e43e0f0284 100644
--- a/packages/web-react/docs/stories/examples/FooterContent.stories.tsx
+++ b/packages/web-react/docs/stories/examples/FooterContent.stories.tsx
@@ -4,6 +4,7 @@ import { Container } from '../../../src/components/Container';
 import { Divider } from '../../../src/components/Divider';
 import { Flex } from '../../../src/components/Flex';
 import { Footer } from '../../../src/components/Footer';
+import FooterLinkFactory from '../../../src/components/Footer/demo/FooterLinkFactory';
 import { Grid } from '../../../src/components/Grid';
 import { Icon } from '../../../src/components/Icon';
 import { Link } from '../../../src/components/Link';
@@ -21,6 +22,7 @@ type FooterCompositionsProps = {
   numberOfLinkColumns: GridColumns;
   showDividers: boolean;
   showLanguageSwitch: boolean;
+  showProductLogo: boolean;
   showSecondaryLinks: boolean;
   showSocialMediaButtons: boolean;
 };
@@ -44,7 +46,7 @@ export default {
     },
     numberOfLinkColumns: {
       control: 'select',
-      options: [0, 1, 2, 3, 4],
+      options: [0, 1, 2, 3, 4, 5, 6, 7, 8],
       table: {
         defaultValue: { summary: 4 },
       },
@@ -64,6 +66,13 @@ export default {
         defaultValue: { summary: true },
       },
     },
+    showProductLogo: {
+      control: 'boolean',
+      description: 'Show product logo',
+      table: {
+        defaultValue: { summary: true },
+      },
+    },
     showSecondaryLinks: {
       control: 'boolean',
       description: 'Show secondary links',
@@ -85,11 +94,32 @@ export default {
     numberOfLinkColumns: 4,
     showDividers: true,
     showLanguageSwitch: true,
+    showProductLogo: true,
     showSecondaryLinks: true,
     showSocialMediaButtons: true,
   },
 };
 
+type NavLinkColumnFactoryType = {
+  id: string;
+  headline: JSX.Element | string;
+  numOfLinks: number;
+  withNestedLinks?: boolean;
+};
+
+const NavLinkColumnFactory = ({ id, headline, numOfLinks, withNestedLinks = false }: NavLinkColumnFactoryType) => {
+  return (
+    <nav aria-labelledby={id} className={withNestedLinks ? 'mb-800' : undefined}>
+      <Text id={id} elementType="h3" size="large" emphasis="bold" marginBottom="space-600">
+        {headline}
+      </Text>
+      <Stack elementType="ul" spacing="space-500" hasSpacing>
+        <FooterLinkFactory items={numOfLinks} label="Link" />
+      </Stack>
+    </nav>
+  );
+};
+
 export const FooterCompositions = (args: FooterCompositionsProps) => {
   const {
     headingsWithLink,
@@ -97,18 +127,48 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
     numberOfLinkColumns,
     showDividers,
     showLanguageSwitch,
+    showProductLogo,
     showSecondaryLinks,
     showSocialMediaButtons,
   } = args;
 
   const logoRowColumns = () => {
-    let count = 1;
+    let count = 0;
+    if (showProductLogo) count += 1;
     if (showSocialMediaButtons) count += 1;
     if (showLanguageSwitch) count += 1;
 
     return count as GridColumns;
   };
 
+  const getElementPosition = (element) => {
+    switch (element) {
+      case 'socialMediaButtons':
+        if (!showProductLogo && showLanguageSwitch) {
+          return 'left';
+        }
+
+        if (showProductLogo && !showLanguageSwitch) {
+          return 'right';
+        }
+
+        return 'center';
+
+      case 'languageSwitch':
+        if (!showProductLogo && !showSocialMediaButtons) {
+          return 'center';
+        }
+
+        return 'right';
+
+      case 'productLogo':
+        return showSocialMediaButtons || showLanguageSwitch ? 'left' : 'center';
+
+      default:
+        return 'center';
+    }
+  };
+
   const columnHeading = (text: string) => {
     return headingsWithLink ? <Link href="#">{text}</Link> : text;
   };
@@ -122,7 +182,7 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
             cols={{
               mobile: 1,
               tablet: numberOfLinkColumns > 2 ? 2 : numberOfLinkColumns,
-              desktop: numberOfLinkColumns,
+              desktop: numberOfLinkColumns <= 5 ? numberOfLinkColumns : 4,
             }}
             spacing="space-800"
             marginBottom={showDividers ? undefined : 'space-900'}
@@ -130,136 +190,83 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
             {/* Navigation links 1 */}
             {numberOfLinkColumns >= 1 && (
               <div>
-                <nav aria-labelledby="footer-navigation-section-1" className={nestedLinkBlocks ? 'mb-800' : ''}>
-                  <Text
-                    id="footer-navigation-section-1"
-                    elementType="h3"
-                    size="large"
-                    emphasis="bold"
-                    marginBottom="space-600"
-                  >
-                    {columnHeading('Section headline')}
-                  </Text>
-                  <Stack elementType="ul" spacing="space-500" hasSpacing>
-                    <li>
-                      <Link href="https://www.example.com">Link</Link>
-                    </li>
-                    <li>
-                      <Link href="https://www.example.com">Link</Link>
-                    </li>
-                    <li>
-                      <Link href="https://www.example.com">Link</Link>
-                    </li>
-                  </Stack>
-                </nav>
+                <NavLinkColumnFactory
+                  id="footer-navigation-section-1"
+                  headline={columnHeading('Section headline')}
+                  numOfLinks={3}
+                  withNestedLinks
+                />
                 {nestedLinkBlocks && (
-                  <nav aria-labelledby="footer-nested-links-navigation-section-5">
-                    <Text
-                      id="footer-nested-links-navigation-section-5"
-                      elementType="h3"
-                      size="large"
-                      emphasis="bold"
-                      marginBottom="space-600"
-                    >
-                      {columnHeading('Section headline')}
-                    </Text>
-                    <Stack elementType="ul" spacing="space-500" hasSpacing>
-                      <Link href="https://www.example.com">Link</Link>
-                      <Link href="https://www.example.com">Link</Link>
-                    </Stack>
-                  </nav>
+                  <NavLinkColumnFactory
+                    id="footer-nested-links-navigation-section-1"
+                    headline={columnHeading('Section headline')}
+                    numOfLinks={2}
+                  />
                 )}
               </div>
             )}
 
             {/* Navigation links 2 */}
             {numberOfLinkColumns >= 2 && (
-              <nav aria-labelledby="footer-navigation-section-2">
-                <Text
-                  id="footer-navigation-section-2"
-                  elementType="h3"
-                  size="large"
-                  emphasis="bold"
-                  marginBottom="space-600"
-                >
-                  {columnHeading('Section headline')}
-                </Text>
-                <Stack elementType="ul" spacing="space-500" hasSpacing>
-                  <li>
-                    <Link href="https://www.example.com">Link</Link>
-                  </li>
-                  <li>
-                    <Link href="https://www.example.com">Link</Link>
-                  </li>
-                  <li>
-                    <Link href="https://www.example.com">Link</Link>
-                  </li>
-                  <li>
-                    <Link href="https://www.example.com">Link</Link>
-                  </li>
-                </Stack>
-              </nav>
+              <NavLinkColumnFactory
+                id="footer-navigation-section-2"
+                headline={columnHeading('Section headline')}
+                numOfLinks={4}
+              />
             )}
 
             {/* Navigation links 3 */}
             {numberOfLinkColumns >= 3 && (
-              <nav aria-labelledby="footer-navigation-section-3">
-                <Text
-                  id="footer-navigation-section-3"
-                  elementType="h3"
-                  size="large"
-                  emphasis="bold"
-                  marginBottom="space-600"
-                >
-                  {columnHeading('Section headline')}
-                </Text>
-                <Stack elementType="ul" spacing="space-500" hasSpacing>
-                  <li>
-                    <Link href="https://www.example.com">Link</Link>
-                  </li>
-                  <li>
-                    <Link href="https://www.example.com">Link</Link>
-                  </li>
-                  <li>
-                    <Link href="https://www.example.com">Link</Link>
-                  </li>
-                  <li>
-                    <Link href="https://www.example.com">Link</Link>
-                  </li>
-                  <li>
-                    <Link href="https://www.example.com">Link</Link>
-                  </li>
-                  <li>
-                    <Link href="https://www.example.com">Link</Link>
-                  </li>
-                </Stack>
-              </nav>
+              <NavLinkColumnFactory
+                id="footer-navigation-section-3"
+                headline={columnHeading('Section headline')}
+                numOfLinks={6}
+              />
             )}
 
             {/* Navigation links 4 */}
-            {numberOfLinkColumns === 4 && (
-              <nav aria-labelledby="footer-navigation-section-4">
-                <Text
-                  id="footer-navigation-section-4"
-                  elementType="h3"
-                  size="large"
-                  emphasis="bold"
-                  marginBottom="space-600"
-                >
-                  {columnHeading('Section headline')}
-                </Text>
-                <Stack elementType="ul" spacing="space-500" hasSpacing>
-                  <li>
-                    <Link href="https://www.example.com">Link</Link>
-                  </li>
-                  <li>
-                    <Link href="https://www.example.com">Link</Link>
-                  </li>
-                  <li>
-                    <Link href="https://www.example.com">Link</Link>
-                  </li>
-                </Stack>
-              </nav>
+            {numberOfLinkColumns >= 4 && (
+              <NavLinkColumnFactory
+                id="footer-navigation-section-4"
+                headline={columnHeading('Section headline')}
+                numOfLinks={3}
+              />
+            )}
+
+            {/* Navigation links 5 */}
+            {numberOfLinkColumns >= 5 && (
+              <NavLinkColumnFactory
+                id="footer-navigation-section-5"
+                headline={columnHeading('Section headline')}
+                numOfLinks={3}
+              />
+            )}
+
+            {/* Navigation links 6 */}
+            {numberOfLinkColumns >= 6 && (
+              <NavLinkColumnFactory
+                id="footer-navigation-section-6"
+                headline={columnHeading('Section headline')}
+                numOfLinks={4}
+              />
+            )}
+
+            {/* Navigation links 7 */}
+            {numberOfLinkColumns >= 7 && (
+              <NavLinkColumnFactory
+                id="footer-navigation-section-7"
+                headline={columnHeading('Section headline')}
+                numOfLinks={3}
+              />
+            )}
+
+            {/* Navigation links 8 */}
+            {numberOfLinkColumns >= 8 && (
+              <NavLinkColumnFactory
+                id="footer-navigation-section-8"
+                headline={columnHeading('Section headline')}
+                numOfLinks={2}
+              />
             )}
           </Grid>
         )}
@@ -276,15 +283,17 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
           marginBottom={showDividers || (!showDividers && !showSecondaryLinks) ? undefined : 'space-900'}
         >
           {/* Product logo */}
-          <div className={showSocialMediaButtons || showLanguageSwitch ? 'text-desktop-left' : 'text-center'}>
-            <Link href="https://www.example.com">
-              <UNSTABLE_ProductLogo>{defaultSvgLogo}</UNSTABLE_ProductLogo>
-            </Link>
-          </div>
+          {showProductLogo && (
+            <div className={`text-desktop-${getElementPosition('productLogo')}`}>
+              <Link href="https://www.example.com">
+                <UNSTABLE_ProductLogo>{defaultSvgLogo}</UNSTABLE_ProductLogo>
+              </Link>
+            </div>
+          )}
 
           {/* Flex with social media links */}
           {showSocialMediaButtons && (
-            <Flex elementType="ul" alignmentX={showLanguageSwitch ? 'center' : 'right'} alignmentY="center">
+            <Flex elementType="ul" alignmentX={getElementPosition('socialMediaButtons')} alignmentY="center">
               <li>
                 <ButtonLink size="medium" color="secondary" isSquare>
                   <VisuallyHidden>Facebook</VisuallyHidden>
@@ -320,7 +329,7 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
 
           {/* Language switch */}
           {showLanguageSwitch && (
-            <div className="text-desktop-right">
+            <div className={`text-desktop-${getElementPosition('languageSwitch')}`}>
               <Select id="select-language" name="selectLanguage" label="Language" isLabelHidden>
                 <option value="en">English</option>
                 <option value="cs">Čeština</option>