From 4dd09f321837b2cd4999ea12180c1bdcd2d264d1 Mon Sep 17 00:00:00 2001 From: Ed Horsford Date: Fri, 2 Aug 2024 09:53:30 +0100 Subject: [PATCH 1/2] Add NHS login buttons --- app/components/button/login-reverse.njk | 24 +++++++++ app/components/button/login.njk | 22 ++++++++ app/pages/examples.njk | 2 + packages/components/button/_button.scss | 69 +++++++++++++++++++++++++ packages/core/settings/_colours.scss | 11 ++++ 5 files changed, 128 insertions(+) create mode 100644 app/components/button/login-reverse.njk create mode 100644 app/components/button/login.njk diff --git a/app/components/button/login-reverse.njk b/app/components/button/login-reverse.njk new file mode 100644 index 000000000..40914dada --- /dev/null +++ b/app/components/button/login-reverse.njk @@ -0,0 +1,24 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'NHS login button' %} +{% from 'components/button/macro.njk' import button %} +{% extends 'layout.njk' %} + +{% block body %} + +
+
+
+ +
+
+ {{ button({ + "text": "Continue", + "classes": "nhsuk-button--login-reverse" + }) }} +
+
+
+
+
+ +{% endblock %} diff --git a/app/components/button/login.njk b/app/components/button/login.njk new file mode 100644 index 000000000..64674cc55 --- /dev/null +++ b/app/components/button/login.njk @@ -0,0 +1,22 @@ +{% set html_style = 'background-color: #f0f4f5;' %} +{% set title = 'NHS login button' %} +{% from 'components/button/macro.njk' import button %} +{% extends 'layout.njk' %} + +{% block body %} + +
+
+ +
+
+ {{ button({ + "text": "Continue", + "classes": "nhsuk-button--login" + }) }} +
+
+
+
+ +{% endblock %} diff --git a/app/pages/examples.njk b/app/pages/examples.njk index d384727bd..48fdc8d9e 100644 --- a/app/pages/examples.njk +++ b/app/pages/examples.njk @@ -35,6 +35,8 @@
  • Button secondary
  • Button reverse
  • Button warning
    • +
  • Button - NHS login
    • +
  • Button - NHS login reverse
  • Card - Basic card
  • Card - Card with an image
  • Card - Card group
    • diff --git a/packages/components/button/_button.scss b/packages/components/button/_button.scss index 9d74c55f1..2cfde4276 100644 --- a/packages/components/button/_button.scss +++ b/packages/components/button/_button.scss @@ -207,6 +207,75 @@ $button-shadow-size: 4px; } } +.nhsuk-button--login { + background-color: $nhsuk-login-button-color; + box-shadow: 0 $button-shadow-size 0 $nhsuk-login-button-shadow-color; + + &:hover { + background-color: darken($nhsuk-login-button-color, 10%); + } + + &:focus { + background: $nhsuk-focus-color; + box-shadow: 0 $button-shadow-size 0 $nhsuk-focus-text-color; + color: $nhsuk-focus-text-color; + outline: $nhsuk-focus-width solid transparent; + } + + &:active { + background: $nhsuk-login-button-active-color; + box-shadow: none; + color: $nhsuk-button-text-color; + top: $button-shadow-size; + } + + &.nhsuk-button--disabled { + background-color: $nhsuk-login-button-color; + } +} + +.nhsuk-button--login-reverse { + background-color: $nhsuk-login-reverse-button-color; + box-shadow: 0 $button-shadow-size 0 $nhsuk-login-reverse-button-shadow-color; + color: $nhsuk-login-reverse-button-text-color; + + &:hover { + background-color: darken($nhsuk-login-reverse-button-color, 5%); + color: $nhsuk-login-reverse-button-text-color; + } + + &:focus { + background: $nhsuk-focus-color; + box-shadow: 0 $button-shadow-size 0 $nhsuk-focus-text-color; + color: $nhsuk-focus-text-color; + outline: $nhsuk-focus-width solid transparent; + } + + &:active { + background: $nhsuk-login-reverse-button-active-color; + box-shadow: none; + color: $color_nhsuk-white; + top: $button-shadow-size; + } + + &:link { + color: $nhsuk-login-reverse-button-text-color; + + &:active { + color: $nhsuk-login-reverse-button-color; + } + } + + &.nhsuk-button--disabled { + background-color: $nhsuk-login-reverse-button-color; + + &:focus { + background-color: $nhsuk-login-reverse-button-color; + } + } +} + + /** * Button disabled states */ diff --git a/packages/core/settings/_colours.scss b/packages/core/settings/_colours.scss index ab7a70892..f6d5b45d7 100644 --- a/packages/core/settings/_colours.scss +++ b/packages/core/settings/_colours.scss @@ -156,5 +156,16 @@ $nhsuk-warning-button-hover-color: shade($nhsuk-warning-button-color, 20%); $nhsuk-warning-button-active-color: shade($nhsuk-warning-button-color, 50%); $nhsuk-warning-button-shadow-color: shade($nhsuk-warning-button-color, 50%); +$nhsuk-login-button-color: $color_nhsuk-blue; +$nhsuk-login-button-hover-color: shade($nhsuk-login-button-color, 20%); +$nhsuk-login-button-active-color: shade($nhsuk-login-button-color, 50%); +$nhsuk-login-button-shadow-color: shade($nhsuk-login-button-color, 50%); + +$nhsuk-login-reverse-button-color: $color_nhsuk-white; +$nhsuk-login-reverse-button-hover-color: shade($nhsuk-login-reverse-button-color, 20%); +$nhsuk-login-reverse-button-active-color: $color-nhsuk-black; +$nhsuk-login-reverse-button-shadow-color: shade($color_nhsuk-blue, 50%); +$nhsuk-login-reverse-button-text-color: $color_nhsuk-blue; + $nhsuk-button-text-color: $color_nhsuk-white; $nhsuk-reverse-button-text-color: $color_nhsuk-black; From 26cbf79f966c86b472b843a105ca6c4949a700cc Mon Sep 17 00:00:00 2001 From: Ed Horsford Date: Fri, 2 Aug 2024 10:43:43 +0100 Subject: [PATCH 2/2] Update changelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index bfc7b11eb..3595fa37a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # NHS.UK frontend Changelog +## Unreleased + +:new: **New features** + +- Add styles for NHS login buttons ([PR 992](https://github.com/nhsuk/nhsuk-frontend/pull/992)) + ## 8.3.0 - 24 July 2024 :new: **New features**