npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

home-office-kit

v1.2.0

Published

Home Office plugin for GOV.UK prototype kit

Downloads

1,890

Readme

Home Office design system plugin for GOV.UK prototype kit

Use

Used with the GOV.UK prototype kit version 13 and above.

To use:

  1. Run npm install home-office-kit.
  2. In your prototype go to /manage-prototype/templates.

You should see the Home Office design system templates.

Components

You can use the HTML for these Home Office design system components:

Templates

Home Office blank

This is a blank page in Home Office styling. It extends the Home Office layout within the kit, so is independent of any other layouts you may have in your prototype.

Question page

This is a template for a form question page. Can be used with any styling.

It includes, the back link, buttons, the <form> tags, setting the page heading and so on.

To add a question to the page, add it to the homeOfficeKit_pageContent block.

To customise the page, you can set:

  • homeOfficeKit_formLayout - for the styling of the page
  • homeOfficeKit_pageHeading - for the heading level 1 and page title
  • homeOfficeKit_pageTitle - only if you need a different page title to the heading level 1
  • homeOfficeKit_nextPage - for the next page of the form
  • homeOfficeKit_useSubmitButton - set to true for 'Submit' rather than 'Save and continue'
  • homeOfficeKit_primaryButtonText - by default is 'Save and continue'
  • homeOfficeKit_secondaryButtonText - to create a secondary button with this text
  • homeOfficeKit_secondaryButtonFormAction - the page where the secondary button should go

You can also:

  • customise styling (in css) to the homeOfficeKit_style block
  • customise the back link by overriding the default in the homeOfficeKit_backLinkURL block
  • customise or remove the buttons by overriding the default in the homeOfficeKit_buttons block
  • add javascript to pageScripts block

Pagination

An example to copy of how to use pagination in your prototype.

This prevents the need for multiple pages in your prototype for the pagination. Uses the homeOfficeKitPagination macro.

Add another

An example to copy of the javascript for adding another field, one at a time.

Accordion (previous style)

There are some services using the older less accessible version of the GOV.UK accordion component (from v3.14).

In order to test these services with users, use this example of the homeOfficeKitLegacyAccordion macro.

Show password

Small example of show password.

Styling

You can use this kit with any styling, you do not need to use the Home Office header, footer and page background.

Header, footer and page background

To change your prototype to by default use the Home Office styling:

  1. In app/views/layouts/main.html change {% extends "..." %} to {% extends "home-office-kit-layout.html" %}

Font

In app/assets/sass create settings.scss and add @import "node_modules/home-office-kit/sass/settings"

This changes your font from GDS Transport to Roboto, the font used in the Home Office design system.

Routes

There are some useful routes in the prototype:

Log prototype data

To log prototype data add to config.json:

  "pluginConfig": {
    "home-office-kit": {
      "logData": true
    }
  }

This should be inside the most outer { }. If there's a line before this one (say serviceName), you'll need to add a comma to the end.

If you need to ignore certain URLs then change this to:

  "pluginConfig": {
    "home-office-kit": {
      "logData": {
        "ignoreUrlsStartingWith": ["/plugin-assets/", "/public/", "/manage-prototype/", "/plugin-routes/", "/other-url-to-ignore"]
      }
    }
  }

Redirect with radio buttons

In the value part of the radio button add ~home-office-kit-redirect-to~ followed by the URL to redirect to.

For example:

  <div class="govuk-radios__item">
    <input class="govuk-radios__input" id="where-do-you-live" name="where-do-you-live" type="radio" value="england~home-office-kit-redirect-to~/new-page">
    <label class="govuk-label govuk-radios__label" for="where-do-you-live">
      England
    </label>
  </div>

or

  {
    value: "england~home-office-kit-redirect-to~/new-page",
    text: "England"
  }

Get the current date

Sometimes you want to show a date to a user, and for usability testing keeping the dates relevant can be difficult. This lets you show dates relative to today:

  • {{ homeOfficeKit.today.day }} shows the day part of today

  • {{ homeOfficeKit.today.month }} shows the month part of today

  • {{ homeOfficeKit.today.year }} show the year part of today

  • {{ homeOfficeKit.date() }} shows todays date in the format 5 May 2022

  • {{ homeOfficeKit.date({day: 'numeric', month: 'numeric', year: 'numeric'}) }} is todays date in the format 05/05/2022

  • {{ homeOfficeKit.date({day: 'numeric'}) }} shows the just the day of date 5

  • {{ homeOfficeKit.date({day: 'numeric'}, {'day': -1}) }} shows just the date of yesterday

  • {{ homeOfficeKit.date({weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'}) }} shows todays date in the format Tuesday, 5 July 2022.

Filters

There are some useful filters that are included automatically when you install the plugin. These include:

Possessive

homeOfficeKit.possessive adds 's or '

For example, for an input with the name attribute full-name:

{{ data['full-name'] | homeOfficeKit.possessive }}

Display month name

homeOfficeKit.toMonth - changes 1 to Jan and so on

For example, to replay a date input with namePrefix date:

{{ data['date-day'] + " " + data['date-month'] | homeOfficeKit.toMonth + " " + data['date-year'] }}

Add zero to start of times

homeOfficeKit.padZero - adds a zero to single digits, change 1 to 01

For example, to replay a times, with a separate hour and minute input:

{{ data['time-hour'] | homeOfficeKit.padZero + ":" + data['time-minute'] | homeOfficeKit.padZero }}

Pluralise nouns

`homeOfficeKit.pluralise' - allows dynamic text for plural

For example:

"passenger" + data['numberPassengers'] | pluralise('','s')
data['numberRooves'] | pluralise('roof', 'rooves')

Contributing

Read the GOV.UK prototype kit plugin guidance.

Raise issues and pull requests to:

  • add new filters, layouts and macros
  • update the scss to match the Home Office design system

Publishing

Before merging the pull request:

  1. Update the version in package.json.
  2. Update CHANGELOG.md with what has changed in this version.
  3. Merge the pull request on GitHub.
  4. Update your local version to the updated version of main.
  5. Run npm publish. This updates the code on npm.
  6. On GitHub, create a new release.