fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup!…

… Feat(web-react): Introduce Footer component #DS-1368
lmc-eu · Sep 24, 2024 · 5904899 · 5904899
1 parent 12e3a64
commit 5904899
Showing 1 changed file with 28 additions and 10 deletions.
diff --git a/packages/web-react/docs/stories/examples/FooterContent.stories.tsx b/packages/web-react/docs/stories/examples/FooterContent.stories.tsx
@@ -17,13 +17,19 @@ import { GridColumns } from '../../../src/types';
 export default {
   title: 'Examples/Compositions',
   argTypes: {
-    headingWithLink: {
+    headingsWithLink: {
       control: 'boolean',
       description: 'Headings displayed as links',
+      table: {
+        defaultValue: { summary: false },
+      },
     },
     nestedLinkBlocks: {
       control: 'boolean',
       description: 'Nested menu in **1st column**',
+      table: {
+        defaultValue: { summary: true },
+      },
     },
     numberOfLinkColumns: {
       control: 'select',
@@ -36,52 +42,64 @@ export default {
     showDividers: {
       control: 'boolean',
       description: 'Show dividers between sections',
+      table: {
+        defaultValue: { summary: true },
+      },
     },
     showLanguageSwitch: {
       control: 'boolean',
       description: 'Show language switch',
+      table: {
+        defaultValue: { summary: true },
+      },
     },
     showSecondaryLinks: {
       control: 'boolean',
       description: 'Show secondary links',
+      table: {
+        defaultValue: { summary: true },
+      },
     },
-    showSocialMediaLinks: {
+    showSocialMediaButtons: {
       control: 'boolean',
       description: 'Show social media buttons',
+      table: {
+        defaultValue: { summary: true },
+      },
     },
   },
   args: {
-    headingWithLink: false,
+    headingsWithLink: false,
     nestedLinkBlocks: true,
     numberOfLinkColumns: 4,
     showDividers: true,
     showLanguageSwitch: true,
     showSecondaryLinks: true,
-    showSocialMediaLinks: true,
+    showSocialMediaButtons: true,
   },
 };
 
 export const FooterCompositions = (args) => {
   const {
-    headingWithLink,
+    headingsWithLink,
     nestedLinkBlocks,
     numberOfLinkColumns,
     showDividers,
     showLanguageSwitch,
     showSecondaryLinks,
-    showSocialMediaLinks,
+    showSocialMediaButtons,
   } = args;
 
   const logoRowColumns = (): GridColumns => {
     let count = 1;
-    if (showSocialMediaLinks) count += 1;
+    if (showSocialMediaButtons) count += 1;
     if (showLanguageSwitch) count += 1;
 
     return count as GridColumns;
   };
 
   const columnHeading = (text: string) => {
-    return headingWithLink ? (
+    return headingsWithLink ? (
       <Link href="#" className="link-secondary">
         {text}
       </Link>
@@ -289,14 +307,14 @@ export const FooterCompositions = (args) => {
           marginBottom={showDividers || (!showDividers && !showSecondaryLinks) ? undefined : 'space-900'}
         >
           {/* Product logo */}
-          <div className={showSocialMediaLinks || showLanguageSwitch ? 'text-desktop-left' : 'text-center'}>
+          <div className={showSocialMediaButtons || showLanguageSwitch ? 'text-desktop-left' : 'text-center'}>
             <Link href="https://www.example.com">
               <UNSTABLE_ProductLogo>{defaultSvgLogo}</UNSTABLE_ProductLogo>
             </Link>
           </div>
 
           {/* Flex with social media links */}
-          {showSocialMediaLinks && (
+          {showSocialMediaButtons && (
             <Flex elementType="ul" alignmentX={showLanguageSwitch ? 'center' : 'right'} alignmentY="center">
               <li>
                 <Button elementType="a" size="medium" color="secondary" isSquare>