From 7ef0890db4bd81d989dcf43bbee1b9b2d2ce88d1 Mon Sep 17 00:00:00 2001 From: Houston Blyden Date: Wed, 19 May 2021 11:42:31 +0100 Subject: [PATCH] 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/assets/icon/general/user.svg | 3 ++ src/wmnds/components/_components.scss | 1 + src/wmnds/components/sign-in/_example.njk | 5 ++ src/wmnds/components/sign-in/_sign-in.njk | 29 +++++++++++ src/wmnds/components/sign-in/_sign-in.scss | 16 +++++++ src/www/data.njk.json | 3 ++ src/www/pages/components/sign-in/index.njk.md | 48 +++++++++++++++++++ src/www/pages/styles/icons/index.njk.md | 1 + 8 files changed, 106 insertions(+) create mode 100644 src/wmnds/assets/icon/general/user.svg create mode 100644 src/wmnds/components/sign-in/_example.njk create mode 100644 src/wmnds/components/sign-in/_sign-in.njk create mode 100644 src/wmnds/components/sign-in/_sign-in.scss create mode 100644 src/www/pages/components/sign-in/index.njk.md diff --git a/src/wmnds/assets/icon/general/user.svg b/src/wmnds/assets/icon/general/user.svg new file mode 100644 index 000000000..f9093d954 --- /dev/null +++ b/src/wmnds/assets/icon/general/user.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/wmnds/components/_components.scss b/src/wmnds/components/_components.scss index 17751cd69..eb2cb9e6d 100644 --- a/src/wmnds/components/_components.scss +++ b/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 diff --git a/src/wmnds/components/sign-in/_example.njk b/src/wmnds/components/sign-in/_example.njk new file mode 100644 index 000000000..a1adb36f7 --- /dev/null +++ b/src/wmnds/components/sign-in/_example.njk @@ -0,0 +1,5 @@ +{% raw %} +{% from "wmnds/components/sign-in/_sign-in.njk" import wmndsSignIn %} + +{{ wmndsSignIn() }} +{% endraw %} diff --git a/src/wmnds/components/sign-in/_sign-in.njk b/src/wmnds/components/sign-in/_sign-in.njk new file mode 100644 index 000000000..438b2719d --- /dev/null +++ b/src/wmnds/components/sign-in/_sign-in.njk @@ -0,0 +1,29 @@ +{% macro wmndsSignIn(params) %} + +{% from "wmnds/components/icon/_icon.njk" import wmndsIcon %} + + + +{% endmacro %} diff --git a/src/wmnds/components/sign-in/_sign-in.scss b/src/wmnds/components/sign-in/_sign-in.scss new file mode 100644 index 000000000..a268454a5 --- /dev/null +++ b/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; + } + } +} diff --git a/src/www/data.njk.json b/src/www/data.njk.json index 9d628e85a..9f2f3a600 100644 --- a/src/www/data.njk.json +++ b/src/www/data.njk.json @@ -153,6 +153,9 @@ { "name": "Phase indicator" }, + { + "name": "Sign in" + }, { "name": "Table" }, diff --git a/src/www/pages/components/sign-in/index.njk.md b/src/www/pages/components/sign-in/index.njk.md new file mode 100644 index 000000000..cf9c80f25 --- /dev/null +++ b/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 %} diff --git a/src/www/pages/styles/icons/index.njk.md b/src/www/pages/styles/icons/index.njk.md index 72e129640..691b4dbed 100644 --- a/src/www/pages/styles/icons/index.njk.md +++ b/src/www/pages/styles/icons/index.njk.md @@ -43,6 +43,7 @@ "sync", "ticket", "trash", + "user", "wallet", "warning-circle", "warning-triangle"