WIP: Footer

src/components/Footer/Footer.less

@@ -0,0 +1,198 @@
+@import (reference) url('@cfpb/cfpb-design-system/src/cfpb-design-system.less');
+
+// https://github.com/cfpb/consumerfinance.gov/blob/main/cfgov/unprocessed/css/organisms/footer.less
+
+/* ==========================================================================
+   consumerfinance.gov
+   footer
+   ========================================================================== */
+
+/* topdoc
+  name: CF.gov site-wide footer.
+  family: cfgov-organisms
+  patterns:
+    - notes:
+        - "For the markup please see _layouts/organisms/footer.html."
+  tags:
+    - cfgov-organisms
+*/
+
+.o-footer {
+  // Adding an extra 5px to the top to account for the absolute positioned
+  // social media icons.
+  padding-top: unit((50px / @base-font-size-px), em);
+  // 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: unit((50px / @base-font-size-px), em);
+  border-top: 5px solid @green;
+  background: @gray-5;
+
+  &_nav-list {
+    .m-list__links();
+
+    .m-list_link {
+      font-size: unit((18px / @base-font-size-px), em);
+      .u-link__colors( @black );
+
+      .respond-to-min( @bp-sm-min, {
+        margin-right: 1em;
+
+        .u-link__hover-border();
+      } );
+
+      .respond-to-min( @bp-med-min, {
+        margin-right: unit(( @grid_gutter-width / 22px), em );
+        font-size: unit( (20px / @base-font-size-px), em );
+      } );
+    }
+
+    .m-list_link.m-list_link__disabled {
+      border-bottom: 1px dotted;
+
+      .respond-to-min( @bp-med-min, {
+        .u-link__no-border();
+      } );
+    }
+  }
+
+  &_list {
+    .m-list__links();
+
+    .m-list_link {
+      .u-link__colors( @gray-dark );
+    }
+  }
+
+  &_pre {
+    position: relative;
+    margin-bottom: unit((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;
+    }
+
+    .respond-to-min( @bp-sm-min, {
+      padding-bottom: unit( (@grid_gutter-width / @base-font-size-px), em );
+      margin-bottom: unit( (@grid_gutter-width / @base-font-size-px), em );
+      border-bottom: 1px solid @gray-40;
+
+      .o-footer_top-button {
+        display: none;
+      }
+
+      .o-footer_nav-list {
+        .m-list__horizontal();
+
+        .m-list_item {
+          margin-bottom: 0;
+        }
+      }
+    } );
+
+    .respond-to-print( {
+      // !important used here to avoid being overriden by a much more specific
+      // selector that sets the display property for this element
+      // and to avoid using a selector that specific here.
+      display: none !important;
+    } );
+  }
+
+  // TODO: Refactor to use Design System Layout package.
+  &-middle-left {
+    .o-footer_list {
+      margin: 0;
+    }
+
+    /* Fix doubled border in mobile view */
+    .respond-to-max( @bp-xs-max, {
+      .o-footer_col:nth-child( n+2 ) {
+        .o-footer_list {
+          .m-list_item .m-list_link {
+            border-top-width: 0;
+          }
+        }
+      }
+    } );
+
+    .respond-to-min( @bp-sm-min, {
+      .grid_column(8);
+      border-right: 1px solid @gray-40;
+      border-left: 0;
+
+      .o-footer_col {
+        .grid_column(6);
+        border-left: 0;
+        border-right: 0;
+        padding-right: unit( (@grid_gutter-width / 2 / @base-font-size-px), em );
+      }
+    } );
+
+    .respond-to-print( {
+      // !important used here to avoid being overriden by a much more specific
+      // selector that sets the display property for this element
+      // and to avoid using a selector that specific here.
+      display: none !important;
+    } );
+  }
+
+  &-middle-right {
+    /* Fix doubled border in mobile view */
+    .respond-to-max( @bp-xs-max, {
+      .o-footer_list {
+        .m-list_item .m-list_link {
+          border-top-width: 0;
+        }
+      }
+    } );
+
+    .respond-to-min( @bp-sm-min, {
+      .grid_column(4);
+
+      .o-footer_list {
+        padding-left: @grid_gutter-width;
+        padding-right: @grid_gutter-width;
+      }
+    } );
+
+    .respond-to-print( {
+      // !important used here to avoid being overriden by a much more specific
+      // selector that sets the display property for this element
+      // and to avoid using a selector that specific here.
+      display: none !important;
+    } );
+  }
+
+  &-post {
+    margin-top: unit((@grid_gutter-width / @base-font-size-px), em);
+
+    .respond-to-min( @bp-sm-min, {
+      padding-top: unit( (@grid_gutter-width / @base-font-size-px), em );
+      border-top: 1px solid @gray-40;
+    } );
+
+    .respond-to-print( {
+      padding: 0;
+      border: none;
+      margin: 0;
+    } );
+  }
+}
+
+/* topdoc
+    name: EOF
+    eof: true
+*/
+
+.o-footer .cf-icon-svg__external-link {
+  margin-left: 3px;
+}

src/components/Footer/Footer.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Footer from './Footer';
+
+const meta: Meta<typeof Footer> = {
+  component: Footer,
+  argTypes: {}
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CFGov: Story = {
+  args: {}
+};