Add footer variants

src/components/Footer/back-to-top.tsx

@@ -1,15 +1,13 @@
 import { JSX } from 'react';
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { Icon } from '../Icon/icon';
-
+import Link from '~/src/components/Link/link';
 export const BackToTop = (): JSX.Element => (
-  <a
-    className='a-btn a-btn--secondary o-footer__top-button'
-    data-gtm_ignore='true'
-    data-js-hook='behavior_return-to-top'
-    href='#'
-  >
-    Back to top
-    <Icon name='arrow-up' isPresentational />
-  </a>
+  <Link label="Back to top" 
+        isButton
+        className='a-btn--secondary a-btn--full-on-xs o-footer__top-button u-show-on-mobile u-mb30'
+        data-gtm_ignore='true'
+        data-js-hook='behavior_return-to-top'
+        data-testid='back-to-top'
+        href='#'
+        iconRight='arrow-up'/>
 );

src/components/Footer/footer-cf-gov.tsx

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import { Icon } from '../Icon/icon';
-import Footer from './footer';
+import {WebsiteFooter} from './footer';
 
 interface FootCfGovProperties {
   cfLink?: string;
@@ -163,7 +163,7 @@ export const FooterCfGov = ({
   ];
 
   return (
-    <Footer
+    <WebsiteFooter
       {...properties}
       className={className}
       navLinks={navLinks}

src/components/Footer/footer-links.tsx

@@ -16,8 +16,8 @@ export const NavLinks = ({ children }: WrapperProperties): JSXElement => {
   if (isEmptyArray(children)) return null;
 
   return (
-    <List className='o-footer__nav-list m-list--links m-list--horizontal'>
-      <ListItemBuilder itemClassname='m-list__link'>{children}</ListItemBuilder>
+    <List className='o-footer__nav-list m-list'>
+      <ListItemBuilder itemClassname='m-list__link a-link--jump'>{children}</ListItemBuilder>
     </List>
   );
 };
@@ -51,11 +51,12 @@ export const FooterLinksColumn = ({
 
   return (
     <div className='o-footer__col'>
-      <List className='o-footer__list'>
-        <ListItemBuilder itemClassname='m-list__link'>
+      <List className='o-footer__list m-list'>
+        <ListItemBuilder itemClassname='m-list__link a-link--jump'>
           {children}
         </ListItemBuilder>
       </List>
     </div>
   );
 };
+

src/components/Footer/footer.scss

@@ -1,8 +1,8 @@
+@use 'sass:math';
 @use '/src/assets/styles/variables.scss' as *;
 @use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
 @use '@cfpb/cfpb-design-system/src/components/cfpb-typography/mixins' as *;
-@use 'sass:math';
 
 // https://github.com/cfpb/consumerfinance.gov/blob/main/cfgov/unprocessed/css/organisms/footer.scss
 
@@ -21,29 +21,80 @@
     - cfgov-organisms
 */
 
+@mixin u-upper-hover-line() {
+  position: absolute;
+  top: -1px;
+  content: '';
+  display: block;
+  height: 1px;
+  width: 100%;
+  border-top: 1px solid currentcolor;
+}
+
 .o-footer {
   // Adding an extra 5px to the top to account for the absolute positioned
   // social media icons.
-  padding-top: math.div(50px, $base-font-size-px) + em;
+  padding-top: math.div($grid-gutter-width * 1.5, $base-font-size-px) + rem;
 
   // There is a 10px margin-bottom on the  last .o-footer__list li's, plus the
   // 50px bottom padding = 60px of total padding at the bottom of the footer.
-  padding-bottom: math.div(50px, $base-font-size-px) + em;
+  padding-bottom: math.div($grid-gutter-width * 2, $base-font-size-px) + rem;
   border-top: 5px solid var(--green);
   background: var(--gray-5);
 
+  // Mobile only.
+  @include respond-to-max($bp-xs-max) {
+    // Tighten top spacing on mobile.
+    padding-top: math.div($grid-gutter-width, $base-font-size-px) + rem;
+
+    .m-list__link {
+      display: block;
+      box-sizing: border-box;
+      padding-top: math.div(10px, $base-font-size-px) + rem;
+      padding-bottom: math.div(10px, $base-font-size-px) + rem;
+      border-top-width: 1px;
+      border-bottom-width: 1px;
+
+      .a-link__text {
+        border-bottom: none;
+      }
+    }
+
+    // Handle the borders of jump links that are adjacent in a list.
+    .o-footer-middle-right .m-list__link:hover::before {
+      @include u-upper-hover-line;
+    }
+
+    li:has(.m-list__link) + li:has(.m-list__link) {
+      .m-list__link {
+        position: relative;
+        border-top: none;
+      }
+
+      .m-list__link:hover::before {
+        @include u-upper-hover-line;
+      }
+    }
+  }
+
   &__nav-list {
+    padding-left: 0;
+    list-style-type: none;
+
     .m-list__link {
+      margin-left: 0;
       font-size: math.div(18px, $base-font-size-px) + em;
 
       @include u-link-colors(var(--black));
 
+      // Tablet and above.
       @include respond-to-min($bp-sm-min) {
         margin-right: 1em;
 
         @include u-link-hover-border;
       }
 
+      // Desktop and above.
       @include respond-to-min($bp-med-min) {
         margin-right: math.div($grid-gutter-width, 22px) + em;
         font-size: math.div(20px, $base-font-size-px) + em;
@@ -53,49 +104,58 @@
     .m-list__link.m-list__link--disabled {
       border-bottom: 1px dotted;
 
+      // Desktop and above.
       @include respond-to-min($bp-med-min) {
         @include u-link-no-border;
       }
     }
   }
 
   &__list {
+    padding-left: 0;
+    list-style-type: none;
+
     .m-list__link {
+      margin-left: 0;
+
       @include u-link-colors(var(--gray-dark));
     }
   }
 
+  // Mobile only.
+  @include respond-to-max($bp-xs-max) {
+    // This is essentially .m-list--links.
+    &__nav-list .m-list__item,
+    &__list .m-list__item {
+      margin-bottom: 0;
+    }
+  }
+
   &__pre {
     position: relative;
     margin-bottom: math.div(45px, $base-font-size-px) + em;
 
-    .o-footer__top-button {
-      display: block;
-      width: 100%;
-      text-align: center;
-
-      // There's a standard margin between the top
-      // of the footer and the links. The button comes between
-      // that margin in the wireframes.
-      margin: -2em auto 2em;
-    }
-
     .o-footer__nav-list {
       margin-bottom: 0;
     }
 
+    // Tablet and above.
     @include respond-to-min($bp-sm-min) {
       padding-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
       margin-bottom: math.div($grid-gutter-width, $base-font-size-px) + em;
-
       border-bottom: 1px solid var(--gray-40);
 
-      .o-footer__top-button {
-        display: none;
-      }
-
       .o-footer__nav-list {
+        padding-left: 0;
+        list-style-type: none;
+
         .m-list__item {
+          margin-left: 0;
+          display: inline-block;
+
+          // Assuming a natural space of 4px between inline block items
+          // then the space between would be 8px (4px natural + 4px added).
+          margin-right: math.div(4px, $base-font-size-px) + em;
           margin-bottom: 0;
         }
       }
@@ -115,8 +175,9 @@
       margin: 0;
     }
 
-    /* Fix doubled border in mobile view */
+    // Mobile only.
     @include respond-to-max($bp-xs-max) {
+      // Fix doubled border in mobile view.
       .o-footer__col:nth-child(n + 2) {
         .o-footer__list {
           .m-list__item .m-list__link {
@@ -126,7 +187,9 @@
       }
     }
 
+    // Tablet and above.
     @include respond-to-min($bp-sm-min) {
+
       @include u-grid-column(8);
       border-right: 1px solid var(--gray-40);
       border-left: 0;
@@ -138,7 +201,8 @@
         padding-right: math.div(
             math.div($grid-gutter-width, 2),
             $base-font-size-px
-          ) + em;
+          ) +
+          em;
       }
     }
 
@@ -151,15 +215,20 @@
   }
 
   &__middle-right {
-    /* Fix doubled border in mobile view */
+    // Mobile only.
     @include respond-to-max($bp-xs-max) {
+      // Fix missing top line hover.
+      position: relative;
+
+      // Fix doubled border in mobile view.
       .o-footer__list {
         .m-list__item .m-list__link {
           border-top-width: 0;
         }
       }
     }
 
+    // Tablet and above.
     @include respond-to-min($bp-sm-min) {
       @include u-grid-column(4);
 
@@ -178,8 +247,10 @@
   }
 
   &__post {
+    font-weight: 400;
     margin-top: math.div($grid-gutter-width, $base-font-size-px) + em;
 
+    // Tablet and above.
     @include respond-to-min($bp-sm-min) {
       padding-top: math.div($grid-gutter-width, $base-font-size-px) + em;
       border-top: 1px solid var(--gray-40);
@@ -191,27 +262,19 @@
       margin: 0;
     }
   }
-}
-
-/* topdoc
-    name: EOF
-    eof: true
-*/
 
-.o-footer .cf-icon-svg--external-link {
-  margin-left: 3px;
-}
+  // Layout classes for the ApplicationFooter
+  &__content {
+    display: grid;
+    gap: math.div($grid-gutter-width, $base-font-size-px) + em;
 
-@media (max-width: $bp-sm-min - 1) {
-  .o-footer {
-    .m-list__link,
-    .o-footer-post,
-    .m-social-media {
-      padding-left: $space-sm;
-    }
+    @include respond-to-min($bp-sm-min) {
+      gap: math.div($grid-gutter-width * 2, $base-font-size-px) + em;;
+      grid-template-columns: 2fr 1fr;
 
-    .o-footer__top-button {
-      width: 95%;
+      .o-footer__right-column {
+        text-align: right;
+      }
     }
   }
 }

src/components/Footer/footer.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { JSX } from 'react';
-import { Footer, FooterCfGov, Icon } from '~/src/index';
+import { Footer, ApplicationFooter, WebsiteFooter, FooterCfGov, Icon, Link } from '~/src/index';
 
 const meta: Meta<typeof Footer> = {
   title: 'Components (Draft)/Footers',
@@ -30,7 +30,10 @@ const makeSocialLink = (label: string): JSX.Element => (
   </a>
 );
 
-export const Example: Story = {
+
+export const Website: Story = {
+  name: 'Website footer',
+  render: (properties) => <WebsiteFooter {...properties} />,
   args: {
     navLinks: [makeLink('Nav 1'), makeLink('Nav 2'), makeLink('Nav 3')],
     socialLinks: [makeSocialLink('facebook'), makeSocialLink('youtube')],
@@ -52,6 +55,24 @@ export const Example: Story = {
   },
 };
 
-export const CFGov: Story = {
-  render: () => <FooterCfGov />,
+
+export const App: Story = {
+  name: 'Application footer',
+  render: (properties) => <ApplicationFooter {...properties} />,
+  args: {
+    navLinks: [makeLink('relevant link one'), makeLink('link two')],
+    footerContent: 
+      <>
+        <h3>Heading</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        <Link href='#'>Link</Link>
+      </>
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'A minimal two-column footer for use in applications. The left column can contain information about the app, and the right column is for relevant links.',
+      },
+    },
+  }
 };