Giter Club home page Giter Club logo

nisp-frontend's Introduction

Check your State Pension Frontend

This service provides the frontend endpoint for the Check your State Pension project, formally known as the National Insurance and State Pension project.

Other components:

Service Manager profile

sm2 --start NISP_ALL --clean --workers 5

Summary

This service provides the following useful information to the customer:

  • When they will reach State Pension age
  • How much their State Pension is currently worth
  • A forecast of what their State Pension will be when they reach State Pension age
  • A view of their National Insurance record, including any gaps

Requirements

This service is written in Scala and Play, and needs at least a JRE version 8 to run.

Authentication

This customer logs into this service using the Government Gateway

Testing

Rather than using IDs or classes, which can change when frameworks are invariably updated, we have switched to using data attributes. Here’s an example, using the page heading pattern.

Component

We’ve added data-component hooks to the component’s semantic elements, and then appropriate attributes to identify the status of the non-semantic elements. These are purposefully using snakecase to avoid visual confusion with the class names.

<header class="hmrc-page-heading" data-component="nisp_page_heading"
  @if(specId){ data-spec="@specId"}>
  <h1 class="@classes.getOrElse("govuk-heading-xl")""
    data-component="nisp_page_heading__h1" @elmId.map { i => id="@{i}"}>
    @messages(text)
  </h1>
  <p class="govuk-caption-xl hmrc-caption-xl" data-component="nisp_page_heading__p">
    <span data-aria-hidden aria-hidden="true">
      @messages(section)
    </span>
    <span data-visually-hidden class="govuk-visually-hidden">
      @messages(context)
    </span>
  </p>
</header>

View file

Call the component in the view file and add the new specId parameter:

  @nispPageHeading(
    text = messages("nisp.main.h1.title"),
    section = messages(user.name.getOrElse("")),
    context = messages("nisp.nirecord.context"),
    specId = Some("state_pension__pageheading")
  )

Spec file

Use the component’s specId attribute as scope to target the inner elements.

"render page with heading 'Your State Pension' and context " in {
  mockSetup
  assertEqualsMessage(
    doc,
    "[data-spec='state_pension__pageheading'] [data-visually-hidden]",
    "nisp.nirecord.context"
  )
}

Acronyms

In the context of this application we use the following acronyms and define their meanings. Provided you will also find a web link to discover more about the systems and technology.

  • API: Application Programming Interface
  • HoD: Head of Duty
  • JRE: Java Runtime Environment
  • JSON: JavaScript Object Notation
  • NI: National Insurance
  • SP: State Pension
  • NINO: National Insurance Number
  • URL: Uniform Resource Locator

License

This code is open source software licensed under the Apache 2.0 License.

nisp-frontend's People

Contributors

amyhart6 avatar anand462 avatar andrewbrown22 avatar andrewgee avatar callumcodes avatar cameronstalker1 avatar dandyboyo2 avatar dependabot[bot] avatar derek-gray avatar fred-jackson avatar ianpgodman avatar jaynabonne avatar john-best1 avatar lewey avatar matthew-mcnally avatar mbrookesy avatar muhammad-ali-ahmad avatar nehadotkannaujia avatar nehakannaujia avatar ookami-001 avatar prashantchoudhari avatar rambabu-posa avatar roundrobin99 avatar sarahnorthshields avatar swatcats143 avatar tateni93 avatar thedeadlypianist avatar thirlz95 avatar vinnicombe avatar warrd avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

nisp-frontend's Issues

Test

@sam.waistle
@callum.turnbull

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.