fixup! fixup! Feat(web-react): Introduce Footer component #DS-1368

lmc-eu · Sep 25, 2024 · 8e24688 · 8e24688
1 parent 2fbdf94
commit 8e24688
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 37 deletions.
diff --git a/packages/web-react/docs/stories/examples/FooterContent.stories.tsx b/packages/web-react/docs/stories/examples/FooterContent.stories.tsx
@@ -5,11 +5,11 @@ import { Divider } from '../../../src/components/Divider';
 import { Flex } from '../../../src/components/Flex';
 import { Footer } from '../../../src/components/Footer';
 import { Grid } from '../../../src/components/Grid';
-import { Heading } from '../../../src/components/Heading';
 import { Icon } from '../../../src/components/Icon';
 import { Link } from '../../../src/components/Link';
 import { Select } from '../../../src/components/Select';
 import { Stack } from '../../../src/components/Stack';
+import { Text } from '../../../src/components/Text';
 import { UNSTABLE_ProductLogo } from '../../../src/components/UNSTABLE_ProductLogo';
 import { defaultSvgLogo } from '../../../src/components/UNSTABLE_ProductLogo/demo/ProductLogoDefault';
 import { GridColumns } from '../../../src/types';
@@ -130,9 +130,15 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
             {numberOfLinkColumns >= 1 && (
               <div>
                 <nav aria-labelledby="footer-navigation-section-1" className={nestedLinkBlocks ? 'mb-800' : ''}>
-                  <Heading id="footer-navigation-section-1" elementType="h3" size="xsmall" marginBottom="space-600">
+                  <Text
+                    id="footer-navigation-section-1"
+                    elementType="h3"
+                    size="large"
+                    emphasis="bold"
+                    marginBottom="space-600"
+                  >
                     {columnHeading('Section headline')}
-                  </Heading>
+                  </Text>
                   <Stack elementType="ul" spacing="space-500" hasSpacing>
                     <li>
                       <Link href="https://www.example.com">Link</Link>
@@ -147,14 +153,15 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
                 </nav>
                 {nestedLinkBlocks && (
                   <nav aria-labelledby="footer-nested-links-navigation-section-5">
-                    <Heading
+                    <Text
                       id="footer-nested-links-navigation-section-5"
                       elementType="h3"
-                      size="xsmall"
+                      size="large"
+                      emphasis="bold"
                       marginBottom="space-600"
                     >
                       {columnHeading('Section headline')}
-                    </Heading>
+                    </Text>
                     <Stack elementType="ul" spacing="space-500" hasSpacing>
                       <Link href="https://www.example.com">Link</Link>
                       <Link href="https://www.example.com">Link</Link>
@@ -167,9 +174,15 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
             {/* Navigation links 2 */}
             {numberOfLinkColumns >= 2 && (
               <nav aria-labelledby="footer-navigation-section-2">
-                <Heading id="footer-navigation-section-2" elementType="h3" size="xsmall" marginBottom="space-600">
+                <Text
+                  id="footer-navigation-section-2"
+                  elementType="h3"
+                  size="large"
+                  emphasis="bold"
+                  marginBottom="space-600"
+                >
                   {columnHeading('Section headline')}
-                </Heading>
+                </Text>
                 <Stack elementType="ul" spacing="space-500" hasSpacing>
                   <li>
                     <Link href="https://www.example.com">Link</Link>
@@ -190,9 +203,15 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
             {/* Navigation links 3 */}
             {numberOfLinkColumns >= 3 && (
               <nav aria-labelledby="footer-navigation-section-3">
-                <Heading id="footer-navigation-section-3" elementType="h3" size="xsmall" marginBottom="space-600">
+                <Text
+                  id="footer-navigation-section-3"
+                  elementType="h3"
+                  size="large"
+                  emphasis="bold"
+                  marginBottom="space-600"
+                >
                   {columnHeading('Section headline')}
-                </Heading>
+                </Text>
                 <Stack elementType="ul" spacing="space-500" hasSpacing>
                   <li>
                     <Link href="https://www.example.com">Link</Link>
@@ -219,9 +238,15 @@ export const FooterCompositions = (args: FooterCompositionsProps) => {
             {/* Navigation links 4 */}
             {numberOfLinkColumns === 4 && (
               <nav aria-labelledby="footer-navigation-section-4">
-                <Heading id="footer-navigation-section-4" elementType="h3" size="xsmall" marginBottom="space-600">
+                <Text
+                  id="footer-navigation-section-4"
+                  elementType="h3"
+                  size="large"
+                  emphasis="bold"
+                  marginBottom="space-600"
+                >
                   {columnHeading('Section headline')}
-                </Heading>
+                </Text>
                 <Stack elementType="ul" spacing="space-500" hasSpacing>
                   <li>
                     <Link href="https://www.example.com">Link</Link>

diff --git a/packages/web-react/src/components/Footer/README.md b/packages/web-react/src/components/Footer/README.md
@@ -45,9 +45,9 @@ the `<h3>` element matches the value of the `aria-labelledby` attribute of the `
 
 ```jsx
 <nav aria-labelledby="footer-navigation-section">
-  <Heading id="footer-navigation-section" elementType="h3" size="xsmall" marginBottom="space-600">
+  <Text id="footer-navigation-section" elementType="h3" size="large" emphasis="bold" marginBottom="space-600">
     Section headline
-  </Heading>
+  </Text>
   <Stack elementType="ul" spacing="space-500" hasSpacing>
     <li>
       <Link href="https://www.example.com">Link</Link>
@@ -143,9 +143,9 @@ This section is optional and consists of a [Flex][flex] layout with secondary li
     <Grid cols={{ mobile: 1, tablet: 2, desktop: 4 }} spacing="space-800">
       {/* Repeat the `<nav>` block as many times as needed. */}
       <nav aria-labelledby="footer-navigation-section-1">
-        <Heading id="footer-navigation-section-1" elementType="h3" size="xsmall" marginBottom="space-600">
+        <Text id="footer-navigation-section-1" elementType="h3" size="large" emphasis="bold" marginBottom="space-600">
           Section headline
-        </Heading>
+        </Text>
         <Stack elementType="ul" spacing="space-500" hasSpacing>
           <li>
             <Link href="https://www.example.com">Link</Link>

diff --git a/packages/web-react/src/components/Footer/demo/FooterDefault.tsx b/packages/web-react/src/components/Footer/demo/FooterDefault.tsx
@@ -4,7 +4,7 @@ import { Container } from '../../Container';
 import { Divider } from '../../Divider';
 import { Flex } from '../../Flex';
 import { Grid } from '../../Grid';
-import { Heading } from '../../Heading';
+import { Text } from '../../Text';
 import { Icon } from '../../Icon';
 import { Link } from '../../Link';
 import { Select } from '../../Select';
@@ -22,39 +22,63 @@ const FooterDefault = () => {
         <Grid cols={{ mobile: 1, tablet: 2, desktop: 4 }} spacing="space-800">
           {/* Navigation links 1 */}
           <nav aria-labelledby="footer-navigation-section-1">
-            <Heading id="footer-navigation-section-1" elementType="h3" size="xsmall" marginBottom="space-600">
+            <Text
+              id="footer-navigation-section-1"
+              elementType="h3"
+              size="large"
+              emphasis="bold"
+              marginBottom="space-600"
+            >
               Section headline
-            </Heading>
+            </Text>
             <Stack elementType="ul" spacing="space-500" hasSpacing>
               <FooterLinkFactory items={3} label="Link" />
             </Stack>
           </nav>
 
           {/* Navigation links 2 */}
           <nav aria-labelledby="footer-navigation-section-2">
-            <Heading id="footer-navigation-section-2" elementType="h3" size="xsmall" marginBottom="space-600">
+            <Text
+              id="footer-navigation-section-2"
+              elementType="h3"
+              size="large"
+              emphasis="bold"
+              marginBottom="space-600"
+            >
               Section headline
-            </Heading>
+            </Text>
             <Stack elementType="ul" spacing="space-500" hasSpacing>
               <FooterLinkFactory items={4} label="Link" />
             </Stack>
           </nav>
 
           {/* Navigation links 3 */}
           <nav aria-labelledby="footer-navigation-section-3">
-            <Heading id="footer-navigation-section-3" elementType="h3" size="xsmall" marginBottom="space-600">
+            <Text
+              id="footer-navigation-section-3"
+              elementType="h3"
+              size="large"
+              emphasis="bold"
+              marginBottom="space-600"
+            >
               Section headline
-            </Heading>
+            </Text>
             <Stack elementType="ul" spacing="space-500" hasSpacing>
               <FooterLinkFactory items={6} label="Link" />
             </Stack>
           </nav>
 
           {/* Navigation links 4 */}
           <nav aria-labelledby="footer-navigation-section-4">
-            <Heading id="footer-navigation-section-4" elementType="h3" size="xsmall" marginBottom="space-600">
+            <Text
+              id="footer-navigation-section-4"
+              elementType="h3"
+              size="large"
+              emphasis="bold"
+              marginBottom="space-600"
+            >
               Section headline
-            </Heading>
+            </Text>
             <Stack elementType="ul" spacing="space-500" hasSpacing>
               <FooterLinkFactory items={3} label="Link" />
             </Stack>

diff --git a/packages/web-react/src/components/Footer/demo/FooterNested.tsx b/packages/web-react/src/components/Footer/demo/FooterNested.tsx
@@ -3,9 +3,9 @@ import { Container } from '../../Container';
 import { Divider } from '../../Divider';
 import { Flex } from '../../Flex';
 import { Grid } from '../../Grid';
-import { Heading } from '../../Heading';
 import { Link } from '../../Link';
 import { Stack } from '../../Stack';
+import { Text } from '../../Text';
 import { UNSTABLE_ProductLogo } from '../../UNSTABLE_ProductLogo';
 import { defaultSvgLogo } from '../../UNSTABLE_ProductLogo/demo/ProductLogoDefault';
 import Footer from '../Footer';
@@ -19,35 +19,35 @@ const FooterNested = () => {
         <Grid cols={{ mobile: 1, tablet: 2, desktop: 4 }} spacing="space-800">
           {/* Navigation links 1 */}
           <nav aria-labelledby="footer-nested-links-navigation-section-1">
-            <Heading elementType="h3" size="xsmall" marginBottom="space-600">
+            <Text elementType="h3" size="large" emphasis="bold" marginBottom="space-600">
               <Link href="https://www.example.com" id="footer-nested-links-navigation-section-1">
                 Section headline
               </Link>
-            </Heading>
+            </Text>
             <Stack elementType="ul" spacing="space-500" hasSpacing>
               <FooterLinkFactory items={3} label="Link" />
             </Stack>
           </nav>
 
           {/* Navigation links 2 */}
           <nav aria-labelledby="footer-nested-links-navigation-section-2">
-            <Heading elementType="h3" size="xsmall" marginBottom="space-600">
+            <Text elementType="h3" size="large" emphasis="bold" marginBottom="space-600">
               <Link href="https://www.example.com" id="footer-nested-links-navigation-section-2">
                 Section headline
               </Link>
-            </Heading>
+            </Text>
             <Stack elementType="ul" spacing="space-500" hasSpacing>
               <FooterLinkFactory items={4} label="Link" />
             </Stack>
           </nav>
 
           {/* Navigation links 3 */}
           <nav aria-labelledby="footer-nested-links-navigation-section-3">
-            <Heading elementType="h3" size="xsmall" marginBottom="space-600">
+            <Text elementType="h3" size="large" emphasis="bold" marginBottom="space-600">
               <Link href="https://www.example.com" id="footer-nested-links-navigation-section-3">
                 Section headline
               </Link>
-            </Heading>
+            </Text>
             <Stack elementType="ul" spacing="space-500" hasSpacing>
               <FooterLinkFactory items={6} label="Link" />
             </Stack>
@@ -56,21 +56,21 @@ const FooterNested = () => {
           {/* Navigation links 4 and 5 */}
           <div>
             <nav aria-labelledby="footer-nested-links-navigation-section-4" className="mb-800">
-              <Heading elementType="h3" size="xsmall" marginBottom="space-600">
+              <Text elementType="h3" size="large" emphasis="bold" marginBottom="space-600">
                 <Link href="https://www.example.com" id="footer-nested-links-navigation-section-4">
                   Section headline
                 </Link>
-              </Heading>
+              </Text>
               <Stack elementType="ul" spacing="space-500" hasSpacing>
                 <FooterLinkFactory items={3} label="Link" />
               </Stack>
             </nav>
             <nav aria-labelledby="footer-nested-links-navigation-section-5">
-              <Heading elementType="h3" size="xsmall" marginBottom="space-600">
+              <Text elementType="h3" size="large" emphasis="bold" marginBottom="space-600">
                 <Link href="https://www.example.com" id="footer-nested-links-navigation-section-5">
                   Section headline
                 </Link>
-              </Heading>
+              </Text>
               <Stack elementType="ul" spacing="space-500" hasSpacing>
                 <FooterLinkFactory items={2} label="Link" />
               </Stack>
@@ -82,7 +82,7 @@ const FooterNested = () => {
         <Divider UNSAFE_className="my-900" />
 
         {/* Product logo */}
-        <div className="heading-center">
+        <div className="text-center">
           <Link href="https://www.example.com">
             <UNSTABLE_ProductLogo>{defaultSvgLogo}</UNSTABLE_ProductLogo>
           </Link>