Add footer component to the Design System

DebsDee · Nov 20, 2017 · 8ca5d3f · 8ca5d3f
1 parent f0f5f2b
commit 8ca5d3f
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 1 deletion.
diff --git a/source/components/_footer.erb b/source/components/_footer.erb
@@ -0,0 +1,19 @@
+<footer class="app-c-footer">
+  <div class="app-c-footer__navigation govuk-o-grid">
+    <div class="govuk-o-grid__item govuk-u-mb-5 govuk-o-grid__item--one-quarter">
+      <h2 class="app-c-footer__heading heading-medium">Other design resources</h2>
+      <ul class="app-c-footer__list govuk-c-list">
+        <li class="app-c-footer__list-item"><a href="https://www.gov.uk/guidance/government-design-principles">Government Design Principles</a></li>
+        <li class="app-c-footer__list-item"><a href="https://www.gov.uk/service-manual">GOV.UK Service Manual</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="app-c-footer__meta">
+    <div class="app-c-footer__licence">
+      <a class="app-c-footer__licence-logo" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence</a>
+      <p class="app-c-footer__licence-description">All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated</p>
+    </div><div class="app-c-footer__copyright">
+      <a class="app-c-footer__copyright-logo" href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">© Crown copyright</a>
+    </div>
+  </div>
+</footer>
diff --git a/source/images/govuk-crest-2x.png b/source/images/govuk-crest-2x.png
diff --git a/source/images/open-government-licence_2x.png b/source/images/open-government-licence_2x.png
diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb
@@ -11,5 +11,6 @@
   <body class="govuk-u-font-smoothing">
     <%= partial 'components/header' %>
     <%= yield %>
+    <%= partial 'components/footer' %>
   </body>
 </html>
diff --git a/source/stylesheets/components/_footer.scss b/source/stylesheets/components/_footer.scss
@@ -0,0 +1,113 @@
+//
+// Footer Component
+//
+// Based on the existing GOV.UK footer in GOV.UK Template
+
+@include exports("footer") {
+
+  .app-c-footer {
+    display: block;
+    margin-top: $govuk-spacing-scale-1;
+    padding: $govuk-gutter $govuk-gutter-half ($govuk-gutter * 2);
+    border-top: 1px solid $govuk-footer-border-top;
+    color: $govuk-footer-text;
+    background: $govuk-footer-background;
+    @include mq($from: desktop) {
+      padding: $govuk-gutter;
+    }
+
+    a:link,
+    a:visited {
+      color: $govuk-footer-link;
+    }
+
+    a:hover,
+    a:active {
+      color: $govuk-footer-link-hover;
+    }
+  }
+
+  .app-c-footer__heading {
+    margin-bottom: 0;
+    color: $govuk-text-colour;
+  }
+
+  .app-c-footer__heading:nth-of-type(1) {
+    margin-top: 0;
+  }
+
+  .app-c-footer__list {
+    margin: 0;
+  }
+
+  .app-c-footer__list-item {
+    margin-bottom: 0;
+
+    a {
+      display: inline-block;
+      margin-top: $govuk-spacing-scale-2;
+      @include govuk-core-16;
+    }
+  }
+
+  .app-c-footer__licence {
+    line-height: 1;
+    @include mq ($from: desktop) {
+      display: inline-block;
+      width: 75%;
+      vertical-align: bottom;
+    }
+  }
+
+  .app-c-footer__licence-logo {
+    display: block;
+    width: 41px; // Based on the open-government-licence_2x.png image width: 81px/2
+    height: 17px; // Based on the open-government-licence_2x.png image height: 33px/2
+    overflow: hidden;
+    background-image: url("/images/open-government-licence_2x.png");
+    background-repeat: no-repeat;
+    background-size: 41px 17px; // Based on the open-government-licence_2x.png image size: 81x17px/2
+    text-indent: -999em;
+    @include mq($until: desktop) {
+      margin-bottom: $govuk-spacing-scale-3;
+    }
+    @include mq($from: desktop) {
+      display: inline-block;
+      margin-right: $govuk-spacing-scale-2;
+      vertical-align: top;
+    }
+  }
+
+  .app-c-footer__licence-description {
+    display: inline-block;
+    @include govuk-core-16;
+    margin: 0;
+  }
+
+  .app-c-footer__copyright {
+    @include govuk-core-16;
+    margin-top: $govuk-spacing-scale-5;
+    @include mq ($from: desktop) {
+      display: inline-block;
+      width: 25%;
+      margin-top: 0;
+    }
+  }
+
+  .app-c-footer__copyright-logo {
+    display: block;
+    min-width: 125px; // Based on the govuk-crest-2x.png image width: 250px/2
+    padding: (102px + $govuk-spacing-scale-2) 0 0 0; // Based on the govuk-crest-2x.png image height + spacing: 204px/2 + $govuk-spacing-scale-2
+    background-image: url("/images/govuk-crest-2x.png");
+    background-repeat: no-repeat;
+    background-position: 50% 0%;
+    background-size: 125px 102px; // Based on the govuk-crest-2x.png image size: 250x204px/2
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+    @include mq ($from: desktop) {
+      background-position: 100% 0%;
+      text-align: right;
+    }
+  }
+}
diff --git a/source/stylesheets/main.css.scss b/source/stylesheets/main.css.scss
@@ -4,6 +4,7 @@
 @import "components/header";
 @import "components/divider";
 @import "components/masthead";
+@import "components/footer";
 
 body {
   margin: 0;
@@ -28,7 +29,8 @@ $mq-breakpoint-widescreen: 1200px;
 
 // This is consistent with Elements - will be changed in FE
 .govuk-o-grid__item--one-third,
-.govuk-o-grid__item--two-thirds {
+.govuk-o-grid__item--two-thirds,
+.govuk-o-grid__item--one-quarter {
   @include mq($until: desktop) {
     width: 100%;
   }