Merge pull request #29 from tim-s-ccs/release-0.5.0

Release 0.5.0

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.5.0 (Pre Release)
+  - [Update footer to match CCS stylings](https://github.com/tim-s-ccs/ts-ccs-frontend/pull/27)
+  - [Move the logo to a separate component so we comply with the "Don't Repeat Yourself" mantra](https://github.com/tim-s-ccs/ts-ccs-frontend/pull/28)
+
 ## 0.4.1 (Pre Release)
   - Update documentation and get an [example app running on Heroku](https://ts-ccs-frontend.herokuapp.com/):
     - [Fix small issue with npm install](https://github.com/tim-s-ccs/ts-ccs-frontend/pull/22)

dist/VERSION.txt

@@ -1 +1 @@
-0.4.1
+0.5.0

package/ccs/components/_all.scss

@@ -2,3 +2,4 @@
 
 @import "header/index";
 @import "footer/index";
+@import "logo/index";

package/ccs/components/footer/_index.scss

@@ -14,6 +14,9 @@
   $ccs-footer-crest-image-width: ($ccs-footer-crest-image-width-2x / 2);
   $ccs-footer-crest-image-height: ($ccs-footer-crest-image-height-2x / 2);
 
+  $footer-columns-to-rows-point: 501px;
+  $footer-logo-exists: '.ccs-footer__meta-item > .ccs-footer__logo';
+
   .ccs-footer {
     @include govuk-font($size: 16);
     @include govuk-responsive-padding(7, "top");
@@ -73,6 +76,7 @@
     -webkit-justify-content: center;
         -ms-flex-pack: center;
             justify-content: center; // Support: Flexbox
+    text-align: right;
   }
 
   .ccs-footer__meta-item {
@@ -86,62 +90,67 @@
     -webkit-flex: 1;
         -ms-flex: 1;
             flex: 1; // Support: Flexbox
+
     @include govuk-media-query ($until: tablet) {
       -webkit-flex-basis: 320px;
           -ms-flex-preferred-size: 320px;
               flex-basis: 320px; // Support: Flexbox
     }
-  }
 
-  .ccs-footer__licence-logo {
-    display: inline-block;
-    margin-right: govuk-spacing(2);
-    @include govuk-media-query ($until: desktop) {
-      margin-bottom: govuk-spacing(3);
+    @include govuk-media-query ($until: $footer-columns-to-rows-point) {
+      text-align: left;
     }
-    vertical-align: top;
-    // Work around SVGs not inheriting color from parent in forced color mode
-    // (https://github.com/w3c/csswg-drafts/issues/6310)
-    forced-color-adjust: auto;
-  }
-
-  .ccs-footer__licence-description {
-    display: inline-block;
   }
 
-  .ccs-footer__copyright-logo {
-    display: inline-block;
-    min-width: $ccs-footer-crest-image-width;
-    padding-top: ($ccs-footer-crest-image-height + govuk-spacing(2));
-    background-image: ccs-image-url("govuk-crest.png");
-    @include govuk-device-pixel-ratio {
-      background-image: ccs-image-url("govuk-crest-2x.png");
+  @if $footer_logo_exists {
+    @include govuk-media-query ($until: $footer-columns-to-rows-point) {
+      .ccs-footer__meta-item {
+        &:first-child {
+          -webkit-box-ordinal-group: 3;
+          -webkit-order: 2;
+              -ms-flex-order: 2;
+                  order: 2;
+        }
+
+        &:last-child {
+          -webkit-box-ordinal-group: 2;
+          -webkit-order: 1;
+              -ms-flex-order: 1;
+                  order: 1;
+        }
+      }
     }
-    background-repeat: no-repeat;
-    background-position: 50% 0%;
-    background-size: $ccs-footer-crest-image-width $ccs-footer-crest-image-height;
-    text-align: center;
-    white-space: nowrap;
   }
 
   .ccs-footer__inline-list {
     margin-top: 0;
     margin-bottom: govuk-spacing(3);
     padding: 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   .ccs-footer__meta-custom {
-    margin-bottom: govuk-spacing(4);
-
     a {
       color: $ccs-footer-text;
     }
   }
 
   .ccs-footer__inline-list-item {
     display: inline-block;
-    margin-right: govuk-spacing(3);
     margin-bottom: govuk-spacing(1);
+    margin-left: govuk-spacing(3);
+
+    @include govuk-media-query ($until: tablet) {
+      margin-right: govuk-spacing(3);
+      margin-left: 0;
+    }
+  }
+
+  .ccs-footer__inline-list--bottom > .ccs-footer__inline-list-item {
+    margin-bottom: 0;
   }
 
   .ccs-footer__heading {
@@ -201,4 +210,21 @@
   .ccs-footer__list-item:last-child {
     margin-bottom: 0;
   }
+
+  .ccs-footer__logo {
+    @include govuk-responsive-margin(5, "bottom");
+    box-sizing: border-box;
+
+    @include govuk-media-query ($from: tablet) {
+      width: 100%;
+      padding-right: $govuk-gutter-half;
+      float: left;
+      vertical-align: top;
+    }
+  }
+
+  .ccs-footer__copyright {
+    margin-left: 0;
+    text-align: center;
+  }
 }

package/ccs/components/footer/template.njk

@@ -1,3 +1,5 @@
+{% from "../logo/macro.njk" import ccsLogo -%}
+
 <footer class="ccs-footer {{ params.classes if params.classes }}" role="contentinfo"
         {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="govuk-width-container {{ params.containerClasses if params.containerClasses }}">
@@ -30,11 +32,22 @@
       <hr class="ccs-footer__section-break">
     {% endif %}
     <div class="ccs-footer__meta">
+      <div class="ccs-footer__meta-item">
+        <div class="ccs-footer__logo">
+          {{ ccsLogo() }}
+        </div>
+        <div class="ccs-footer__copyright">
+          <a
+            class="ccs-footer__link"
+            href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
+          >© Crown copyright</a>
+        </div>
+      </div>
       <div class="ccs-footer__meta-item ccs-footer__meta-item--grow">
         {% if params.meta %}
           <h2 class="govuk-visually-hidden">{{ params.meta.visuallyHiddenTitle | default("Support links") }}</h2>
           {% if params.meta.items | length %}
-            <ul class="ccs-footer__inline-list">
+            <ul class="ccs-footer__inline-list {{ 'ccs-footer__inline-list--bottom' if not params.meta.text and not params.meta.html}}">
               {% for item in params.meta.items %}
                 <li class="ccs-footer__inline-list-item">
                   <a class="ccs-footer__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
@@ -50,37 +63,6 @@
             </div>
           {% endif %}
         {% endif %}
-        {#- The SVG needs `focusable="false"` so that Internet Explorer does not
-        treat it as an interactive element - without this it will be
-        'focusable' when using the keyboard to navigate. #}
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          class="ccs-footer__licence-logo"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 483.2 195.7"
-          height="17"
-          width="41"
-        >
-          <path
-            fill="currentColor"
-            d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"
-          />
-        </svg>
-        <span class="ccs-footer__licence-description">
-          All content is available under the
-          <a
-            class="ccs-footer__link"
-            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
-            rel="license"
-          >Open Government Licence v3.0</a>, except where otherwise stated
-        </span>
-      </div>
-      <div class="ccs-footer__meta-item">
-        <a
-          class="ccs-footer__link ccs-footer__copyright-logo"
-          href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"
-        >© Crown copyright</a>
       </div>
     </div>
   </div>

package/ccs/components/header/_index.scss

@@ -32,42 +32,6 @@
     border-bottom: $ccs-header-border-width solid $ccs-header-border-color;
   }
 
-  .ccs-header__logotype {
-    display: inline-block;
-
-    // Add a gap after the logo in case it's followed by a product name. This
-    // gets removed later if the logotype is a :last-child.
-    margin-right: govuk-spacing(1);
-
-    // Prevent readability backplate from obscuring underline in Windows High
-    // Contrast Mode
-    @media (forced-colors: active) {
-      forced-color-adjust: none;
-      color: linktext;
-    }
-
-    // Remove the gap after the logo if there's no product name to keep hover
-    // and focus states neat
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-
-  .ccs-header__logotype-crown {
-    position: relative;
-    top: -1px;
-    margin-right: 1px;
-    fill: currentColor;
-    vertical-align: top;
-  }
-
-  .ccs-header__logotype-crown-fallback-image {
-    width: 36px;
-    height: 32px;
-    border: 0;
-    vertical-align: bottom;
-  }
-
   .ccs-header__link {
     // Avoid using the `govuk-link-common` mixin because the links in the header
     // get a special treatment, because:
@@ -321,11 +285,6 @@
       background: transparent;
     }
 
-    // Hide the inverted crown when printing in browsers that don't support SVG.
-    .ccs-header__logotype-crown-fallback-image {
-      display: none;
-    }
-
     .ccs-header__link {
       &:link,
       &:visited {
@@ -338,25 +297,4 @@
       }
     }
   }
-
-  @if $govuk-use-legacy-font {
-    // Begin adjustments for font baseline offset
-    // These should be removed when the font is updated with the correct baseline
-    .ccs-header__logotype-crown,
-    .ccs-header__logotype-crown-fallback-image {
-      position: relative;
-      top: -4px;
-      vertical-align: middle;
-    }
-
-    .ccs-header {
-      $offset: 3px;
-      padding-top: $offset;
-    }
-
-    .ccs-header__link--homepage {
-      line-height: 30px;
-    }
-    // End adjustments
-  }
 }

package/ccs/components/logo/README.md

@@ -0,0 +1,8 @@
+# Logo
+
+This specific component is designed to be used within the header and footer components.
+You can use it outside of these areas but it might not work as expected.
+
+## Installation
+
+See the [main README quick start guide](https://github.com/tim-s-ccs/ts-ccs-frontend#quick-start) for how to install this component.

package/ccs/components/logo/_index.scss

@@ -0,0 +1,34 @@
+@include ccs-exports("ccs/component/logo") {
+  .ccs-logo {
+    display: inline-block;
+
+    // Prevent readability backplate from obscuring underline in Windows High
+    // Contrast Mode
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      color: linktext;
+    }
+  }
+
+  .ccs-logo__svg {
+    position: relative;
+    top: -1px;
+    margin-right: 1px;
+    fill: currentColor;
+    vertical-align: top;
+  }
+
+  .ccs-logo__fallback-image {
+    width: 36px;
+    height: 32px;
+    border: 0;
+    vertical-align: bottom;
+  }
+
+  @include govuk-media-query($media-type: print) {
+    // Hide the inverted crown when printing in browsers that don't support SVG.
+    .ccs-logo__fallback-image {
+      display: none;
+    }
+  }
+}

package/ccs/components/logo/_logo.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

package/ccs/components/logo/macro.njk

@@ -0,0 +1,3 @@
+{% macro ccsLogo(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ts-ccs-frontend",
   "description": "CCS Frontend contains the code you need to start building a user interface for CCS platforms and services.",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "main": "ccs/all.js",
   "sass": "ccs/all.scss",
   "engines": {

tasks/gulp/__tests__/after-build-package.test.js

@@ -117,7 +117,13 @@ describe('package/', () => {
   })
 
   describe('component', () => {
-    it.each(componentNames)('\'%s\' should have macro-options.json that contains JSON', (name) => {
+    const exemptComponents = [
+      'logo'
+    ]
+
+    const includedComponents = componentNames.filter(element => !exemptComponents.includes(element))
+
+    it.each(includedComponents)('\'%s\' should have macro-options.json that contains JSON', (name) => {
       const filePath = path.join(configPaths.package, 'ccs', 'components', name, 'macro-options.json')
       return readFile(filePath, 'utf8')
         .then((data) => {