Merge pull request #50 from tim-s-ccs/release-0.6.0

Release v0.6.0

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 0.6.0 (Pre Release)
+  - [Update the header banner to match the design from the TDDA](https://github.com/tim-s-ccs/ts-ccs-frontend/pull/49)
+
 ## 0.5.1 (Pre Release)
   - [Do a clean up of files](https://github.com/tim-s-ccs/ts-ccs-frontend/pull/44)
 

dist/VERSION.txt

@@ -1 +1 @@
-0.5.1
+0.6.0

package/ccs/components/footer/_index.scss

@@ -51,23 +51,16 @@
   }
 
   .ccs-footer__meta {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: -ms-flexbox;
     display: flex; // Support: Flexbox
     margin-right: -$govuk-gutter-half;
     margin-left: -$govuk-gutter-half;
-    -webkit-flex-wrap: wrap;
-        -ms-flex-wrap: wrap;
-            flex-wrap: wrap; // Support: Flexbox
-    -webkit-box-align: end;
-    -webkit-align-items: flex-end;
-        -ms-flex-align: end;
-            align-items: flex-end; // Support: Flexbox
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-        -ms-flex-pack: center;
-            justify-content: center; // Support: Flexbox
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap; // Support: Flexbox
+    -ms-flex-align: end;
+        align-items: flex-end; // Support: Flexbox
+    -ms-flex-pack: center;
+        justify-content: center; // Support: Flexbox
     text-align: right;
   }
 
@@ -78,24 +71,19 @@
 
     @include govuk-media-query ($until: $ccs-footer-columns-to-rows-point) {
       &:first-child {
-        -webkit-box-ordinal-group: 3;
-        -webkit-order: 2;
-            -ms-flex-order: 2;
-                order: 2;
+        -ms-flex-order: 2;
+            order: 2;
       }
     }
   }
 
   .ccs-footer__meta-item--grow {
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-        -ms-flex: 1;
-            flex: 1; // Support: Flexbox
+    -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
+      -ms-flex-preferred-size: 320px;
+          flex-basis: 320px; // Support: Flexbox
     }
 
     @include govuk-media-query ($until: $ccs-footer-columns-to-rows-point) {

package/ccs/components/header/_index.scss

@@ -1,7 +1,6 @@
 @include ccs-exports("ccs/component/ccs-header") {
   $ccs-header-background: $ccs-brand-colour;
-  $ccs-header-border-color: ccs-colour("blue");
-  $ccs-header-border-width: govuk-spacing(2);
+  $ccs-header-service-authentication-background: ccs-colour("black");
   $ccs-header-text: ccs-colour("white");
   $ccs-header-link-active-border-color: ccs-colour("white");
   $ccs-header-nav-item-border-color: ccs-colour("dark-red");
@@ -17,19 +16,50 @@
 
   .ccs-header__container--full-width {
     padding: 0 govuk-spacing(3);
-    border-color: $ccs-header-border-color;
 
     .ccs-header__menu-button {
       right: govuk-spacing(3);
     }
   }
 
-  .ccs-header__container {
+  .ccs-header__container,
+  .ccs-header__service-authentication-container {
     @include govuk-clearfix;
     position: relative;
-    margin-bottom: -$ccs-header-border-width;
+  }
+
+  .ccs-header__container {
     padding-top: govuk-spacing(2);
-    border-bottom: $ccs-header-border-width solid $ccs-header-border-color;
+  }
+
+  .ccs-header__service-authentication-container {
+    padding-top: govuk-spacing(1);
+    padding-bottom: govuk-spacing(1);
+  }
+
+  .ccs-header__service-authentication {
+    background: $ccs-header-service-authentication-background;
+    text-align: right;
+  }
+
+  .ccs-header__service-authentication-item {
+    display: inline-block;
+    margin-right: govuk-spacing(3);
+    padding: govuk-spacing(2) 0;
+    border: 0;
+
+    @include govuk-media-query ($from: desktop) {
+      padding: govuk-spacing(1) 0;
+    }
+
+    a {
+      @include govuk-font($size: 16, $weight: regular);
+    }
+  }
+
+  .ccs-header__service-authentication-list .ccs-header__service-authentication-item:last-child {
+    margin-right: 0;
+    border-bottom: 0;
   }
 
   .ccs-header__link {
@@ -50,7 +80,7 @@
       text-decoration: underline;
       text-decoration-thickness: $ccs-header-link-underline-thickness;
 
-      @if ($govuk-link-underline-offset) {
+      @if $govuk-link-underline-offset {
         text-underline-offset: $govuk-link-underline-offset;
       }
     }
@@ -120,10 +150,9 @@
       width: 75%;
       padding-left: $govuk-gutter-half;
       float: left;
-      text-align: right;
     }
   }
-  // text-align: right;
+
   .ccs-header__menu-button {
     @include govuk-font($size: 16);
     display: none;
@@ -141,7 +170,7 @@
       -webkit-text-decoration: solid underline $ccs-header-link-underline-thickness;
               text-decoration: solid underline $ccs-header-link-underline-thickness;
 
-      @if ($govuk-link-underline-offset) {
+      @if $govuk-link-underline-offset {
         text-underline-offset: $govuk-link-underline-offset;
       }
     }
@@ -173,6 +202,7 @@
     }
   }
 
+  .ccs-header__service-authentication-list,
   .ccs-header__navigation-primary-list,
   .ccs-header__navigation-secondary-list {
     // Reset user-agent default list styles

package/ccs/components/header/macro-options.json

@@ -23,6 +23,38 @@
         "required": false,
         "description": "URL for the service name anchor."
     },
+    {
+        "name": "serviceAuthentication",
+        "type": "array",
+        "required": false,
+        "description": "An array of authentication item objects (for example sign-in or register). Is placed at the top of the header.",
+        "params": [
+            {
+                "name": "text",
+                "type": "string",
+                "required": true,
+                "description": "Text for the authentication item. If `html` is provided, the `text` argument will be ignored."
+            },
+            {
+                "name": "html",
+                "type": "string",
+                "required": true,
+                "description": "HTML for the authentication item. If `html` is provided, the `text` argument will be ignored."
+            },
+            {
+                "name": "href",
+                "type": "string",
+                "required": false,
+                "description": "URL of the authentication item anchor."
+            },
+            {
+                "name": "attributes",
+                "type": "object",
+                "required": false,
+                "description": "HTML attributes (for example data attributes) to add to the navigation item anchor."
+            }
+        ]
+    },
     {
         "name": "navigationPrimary",
         "type": "array",

package/ccs/components/header/template.njk

@@ -2,6 +2,27 @@
 
 <header class="ccs-header {{ params.classes if params.classes }}" role="banner" data-module="ccs-header"
         {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {% if params.serviceAuthentication %}
+    <div class="ccs-header__service-authentication">
+      <div class="ccs-header__service-authentication-container {{ params.containerClasses | default('govuk-width-container') }}">
+        <ul class="ccs-header__service-authentication-list">
+          {% for item in params.serviceAuthentication %}
+            {% if item.text or item.html %}
+              <li class="ccs-header__service-authentication-item">
+                {% if item.href %}
+                  <a class="ccs-header__link" href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+                {% endif %}
+                  {{ item.html | safe if item.html else item.text }}
+                {% if item.href %}
+                  </a>
+                {% endif %}
+              </li>
+            {% endif %}
+          {% endfor %}
+        </ul>
+      </div>
+    </div>
+  {% endif %}
   <div class="ccs-header__container {{ params.containerClasses | default('govuk-width-container') }}">
     <div class="ccs-header__logo">
       <a href="{{ params.homepageUrl | default('https://www.crowncommercial.gov.uk') }}" class="ccs-header__link ccs-header__link--homepage" aria-label="Crown Commercial Service">

package/ccs/components/logo/_index.scss

@@ -14,7 +14,7 @@
     position: relative;
     top: -1px;
     margin-right: 1px;
-    fill: currentColor;
+    fill: currentcolor;
     vertical-align: top;
   }
 

package/ccs/settings/_colours-palette.scss

@@ -17,7 +17,6 @@
 $ccs-colours: (
   "red": #9b1a47,
   "dark-red": #85163d,
-  "blue": #1d70b8,
   "white": #ffffff,
 
   "mid-grey": #b1b4b6,

package/ccs/tools/_exports.scss

@@ -22,7 +22,7 @@ $_ccs-imported-modules: () !default;
 
 @mixin ccs-exports($name) {
   // If the mixin is not in the list of modules already exported...
-  @if (index($_ccs-imported-modules, $name) == null) {
+  @if not index($_ccs-imported-modules, $name) {
     // ... then add it to the list
     $_ccs-imported-modules: append($_ccs-imported-modules, $name) !global;
     // ... and output the CSS for that module

package/ccs/tools/_image-url.scss

@@ -17,7 +17,7 @@
     and $ccs-image-url-function
     and function-exists($ccs-image-url-function);
 
-  @if ($use-custom-function) {
+  @if $use-custom-function {
     @return call(get-function($ccs-image-url-function), $filename);
   } @else {
     @return url($ccs-images-path + $filename);

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.5.1",
+  "version": "0.6.0",
   "main": "ccs/all.js",
   "sass": "ccs/all.scss",
   "engines": {