Merge pull request #19 from hmcts/release-0.0.6-alpha

Release v0.0.6-alpha

CHANGELOG.md

@@ -33,6 +33,12 @@
 - Intenral change description x
   ([PR #123456](https://github.com/hmcts/hmcts-frontend/pull/123456))
 
+## 0.0.6-alpha
+
+🆕 New features:
+
+- Sub navigation component
+
 ## 0.0.5-alpha
 
 🆕 New features:

package/components/_all.scss

@@ -1,3 +1,4 @@
 @import "secondary-button/secondary-button";
 @import "timeline/timeline";
-@import "add-another/add-another";
+@import "add-another/add-another";
+@import "sub-navigation/sub-navigation";

package/components/sub-navigation/macro.njk

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

package/components/sub-navigation/sub-navigation.scss

@@ -0,0 +1,76 @@
+/* ==========================================================================
+   #SECONDARY NAV
+   ========================================================================== */
+
+   .hmcts-sub-navigation {
+    margin-bottom: govuk-spacing(7);
+
+    @include mq($from: tablet) {
+      box-shadow: inset 0 -1px 0 $govuk-border-colour;
+      width: 100%;
+    }
+
+  }
+
+
+  .hmcts-sub-navigation__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+
+  .hmcts-sub-navigation__item {
+    @include govuk-font(16);
+    box-shadow: inset 0 -1px 0 $govuk-border-colour;
+    display: block;
+    margin-top: -1px;
+
+    &:last-child {
+      box-shadow: none;
+    }
+
+    @include mq($from: tablet) {
+      display: inline-block;
+      margin-right: govuk-spacing(4);
+      margin-top: 0;
+      box-shadow: none;
+    }
+
+  }
+
+
+  .hmcts-sub-navigation__link {
+    display: block;
+    padding-top: 12px;
+    padding-bottom: 12px;
+    padding-left: govuk-spacing(3);
+    text-decoration: none;
+
+    @include mq($from: tablet) {
+      padding-left: 0;
+    }
+
+  }
+
+
+  .hmcts-sub-navigation__link[aria-current=page] {
+    color: govuk-colour(black);
+    position: relative;
+
+    &::before {
+      background-color: govuk-colour("blue");
+      content: "";
+      display: block;
+      height: 100%;
+      position: absolute; bottom: 0; left: 0;
+      width: 5px;
+
+      @include mq($from: tablet) {
+        height: 5px;
+        width: 100%;
+      }
+
+    }
+
+  }

package/components/sub-navigation/template.njk

@@ -0,0 +1,9 @@
+<nav class="hmcts-sub-navigation" aria-label="{{params.label}}">
+  <ul class="hmcts-sub-navigation__list">
+    {% for item in params.items %}
+      <li class="hmcts-sub-navigation__item">
+        <a class="hmcts-sub-navigation__link" {{ 'aria-current=page' if item.selected }} href="{{item.href}}">{{item.text}}</a>
+      </li>
+    {% endfor %}
+  </ul>
+</nav>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hmcts/frontend",
   "description": "HMCTS Frontend contains the code you need to start building a user interface for HMCTS.",
-  "version": "0.0.5-alpha",
+  "version": "0.0.6-alpha",
   "main": "all.js",
   "sass": "all.scss",
   "engines": {