feat: add swift sign in/register component (#780)

* Add sign in md + component files

* add user icon

* style sign in component

* add sign in link

Co-authored-by: Catia Costa <34938764+catiarodriguescosta@users.noreply.github.com>

* update sign in link

* amend variable color

Co-authored-by: Catia Costa <34938764+catiarodriguescosta@users.noreply.github.com>

src/wmnds/components/_components.scss

@@ -16,6 +16,7 @@
 @import "icon/n-icon/n-icon"; // Styles for n-icon text replacement
 @import "message/message"; // Messages
 @import "phase-indicator/phase-indicator"; // Phase indicator
+@import "sign-in/sign-in"; // Phase indicator
 @import "table/table"; // Table
 @import "ticket-summary-message/ticket-summary-message"; // Ticket summary message
 @import "warning-text/warning-text"; // Warning Text

src/wmnds/components/sign-in/_example.njk

@@ -0,0 +1,5 @@
+{% raw %}
+{% from "wmnds/components/sign-in/_sign-in.njk" import wmndsSignIn %}
+
+{{ wmndsSignIn() }}
+{% endraw %}

src/wmnds/components/sign-in/_sign-in.njk

@@ -0,0 +1,29 @@
+{% macro wmndsSignIn(params) %}
+
+{% from "wmnds/components/icon/_icon.njk" import wmndsIcon %}
+
+<nav class="wmnds-sign-in">
+  <div class="wmnds-container">
+    <div class="wmnds-grid wmnds-grid--justify-end">
+      <div class="wmnds-col-auto">
+        <a href="https://my.swiftcard.org.uk" class="wmnds-sign-in__link">
+          {{
+            wmndsIcon({
+                icon: 'swift-bird-icon',
+                class: 'wmnds-btn__icon'
+            })
+          }}
+          Sign in or register
+          {{
+            wmndsIcon({
+                icon: 'general-user',
+                class: 'wmnds-btn__icon wmnds-m-l-sm'
+            })
+          }}
+        </a>
+      </div>
+    </div>
+  </div>
+</nav>
+
+{% endmacro %}

src/wmnds/components/sign-in/_sign-in.scss

@@ -0,0 +1,16 @@
+.wmnds-sign-in {
+  padding: $size-sm 0;
+  color: $white;
+  background-color: get-color(primary, 50, dark);
+
+  &__link {
+    color: $white;
+    font-family: $x-heading-font-family;
+    font-weight: 700;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

src/www/data.njk.json

@@ -153,6 +153,9 @@
             {
               "name": "Phase indicator"
             },
+            {
+              "name": "Sign in"
+            },
             {
               "name": "Table"
             },

src/www/pages/components/sign-in/index.njk.md

@@ -0,0 +1,48 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle="Sign in or register" %}
+
+{% block content %}
+
+{% markdown %}
+
+{# About #}
+
+## About
+
+{# What #}
+
+### What does it do?
+
+- Links to Unicard registration and account log in page
+
+{# When #}
+
+### When to use it?
+
+- On Swift content pages only.
+
+### When not to use it?
+
+- On other Transport for West Midlands content pages
+
+### How it works
+
+- Banner appears at the top of the page, above global navigation banner and links to Unicard registration and account log in page
+
+{% endmarkdown %}
+
+{% from "wmnds/components/sign-in/_sign-in.njk" import wmndsSignIn %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+
+{{
+  compExample([
+    wmndsSignIn()
+  ], {
+    componentPath: "wmnds/components/sign-in/",
+    njk: true,
+    js: false,
+    iframe: false
+  })
+}}
+
+{% endblock %}

src/www/pages/styles/icons/index.njk.md

@@ -43,6 +43,7 @@
   "sync",
   "ticket",
   "trash",
+  "user",
   "wallet",
   "warning-circle",
   "warning-triangle"