nhsuk-frontend - npm Package Versions

2.1.0 - 8 April 2019

:new: New features

• Hero component - removed background image and arrow and tidied up area around the hero with image and content when in Windows high contrast mode. (PR 435)

• Add transparent 1px border around promos which appears as a solid border when in Windows high contrast mode. (PR 433)

• Fluid width container - Extend the page layout to include a fluid-width container, which spans the entire width of the viewport. Use .nhsuk-width-container-fluid for a full width container. Documentation and an example of the fluid-width container can be found on the Layout page in the NHS digital service manual. (Issue 416)

• Prefix error messages with a visually hidden "Error:", to make it clearer to users of assistive technologies.

• Add example and code snippets for a Button as a link and remove the multiple examples for the disabled Button. The Button as a link includes the attribute draggable="false" to stop links that are styled as button from being dragged.

• Enable autocomplete attributes for input components. The autocomplete attribute can now be enabled on input, date input and textarea components using the component macros parameters.

  This was already possible to do with the attributes option but this change highlights the new WCAG 2.1 success criteria Identify Input Purpose which "is to ensure that the purpose of a form input collecting information about the user can be programmatically determined, so that user agents can extract and present this purpose to users using different modalities".

  See Autofilling form controls: the autocomplete attribute for the full list of attributes that can be used.

• Enable pattern attribute for input component.

  You can now set the pattern attribute on input fields using the component macros:

  {{ input({
    "label": {
      "text": "Pattern example"
    },
    "id": "input-with-pattern",
    "name": "pattern-example",
    "pattern": "[0-9]*"
  }) }}
  

• Example of social media open graph cards for Twitter and Facebook

  Examples for Twitter and Facebook have been added to the GitHub pages layout file and also to the HTML page template.

  The open graph default image has also been added to the assets/logos folder of the package.

:wrench: Fixes

• Reorder the asset preconnect and remove unneeded dns-prefetch (Issue 434)

• Header search icon padding has been altered due to the icon not being central for the desktop breakpoint.

2.0.0 - 11 March 2019

:boom: Breaking changes

• Hero component - Refactored hero component to not overlap with the header when zooming in / increasing the font size massively. There have been minor HTML changes so please update your code if you are using this component.(PR 411), (Issue 400)

:new: New features

• Summary list component - Use the summary list to summarise information, for example, a user’s responses at the end of a form.

  If you are importing all styles with @import 'node_modules/nhsuk-frontend/packages/nhsuk'; you will automatically have access to the new component when you update. Alternatively if you are importing each of the individual components separately you will need to import the component with @import 'node_modules/nhsuk-frontend/packages/components/summary-list/summary-list';

  (Issue 384)

:wrench: Fixes

• Button component - A fix for the :focus state to display a 4px yellow border. (Issue 406)

• JavaScript variable scope - Globally scoped variables were causing issues with JavaScript frameworks such as Angular, so they have been moved to be locally scoped within functions. However, this could be improved as we have to duplicate variables between the multiple functions, so its likely this is a temporary fix before refactoring our JavaScript to be class based. (PR 402), (Issue 398).

  The JavaScript files will update automatically, when you update the nhsuk-frontend version and your application will work as normal.

1.0.1 - 20 February 2019

:wrench: Fixes

• Panel component - A fix for the panel to go full width of the grid item, rather than just the width of the content. (Issue 395)

:new: New features

• Promo component - Updated the Nunjucks macro and css to allow any level of heading for the promo heading rather than being hardcoded to a <h3> (PR 392)

1.0.0 - 5 February 2019

:tada: Official release of the NHS.UK frontend

• v1.0.0 of the NHS.UK frontend library!

:wrench: Fixes

• Review date component - Removed the <time> markup around the date because it doesn't have a datetime attribute (which can't be automatically generated) and also we can't guarantee that the content will be a valid date/time string (PR 381)

• Header component - Update of the Nunjucks template and documentation (PR 380)

0.9.1 (Prerelease) - 4 February 2019

:wrench: Fixes

• Header, hero and breadcrumbs - IE8 fixes to make the header and hero components display better, and hidden a back link (used in mobile view) in the breadcrumbs component (PR 376)

0.9.0 (Prerelease) - 31 January 2019

:new: New features

• Emergency alert, feedback banner, footer, header, hero component - Add options for extra classes and attributes in the Nunjucks macro. (PR 361)

:wrench: Fixes

• Footer text amend - Uncapitalised copyright message in footer - 'copyright' rather than 'Copyright' (PR 360)

0.8.0 (Prerelease) - 17 January 2019

:boom: Breaking changes

• Header - The autocomplete has been rewritten to remove the dependency on jQuery and now uses GOV.UK's accessible autocomplete component. You will need to do an npm install to update your packages and update the header HTML accordingly. (PR 342)

0.7.0 (Prerelease) - Jan 2, 2019

:new: New features

• Button component - Add option for button to be also an <a> or <input> element. (PR 324)

:wrench: Fixes

• Project structure - move website pages out of the /docs folder and into /app along with other general project clean up (PR 324)

0.6.0 (Prerelease) - 18 December 2018

:boom: Breaking changes

• npm JavaScript file path - The nhsuk.min.js file has been moved from packages/ into dist/ if you are referencing the compiled JavaScript file from the packages/ folder please update your projects.

• Footer no longer includes a logo and the nunjucks macro arguments have been updated - if you are using the footer nunjucks macro then you need to update it. (PR 300)

:new: New features

• ES6 JavaScript modules - NHS.UK frontend JavaScript is now written in ES6 format, meaning you can import individual components that you require (if you are using a transpiler such as Babel). (PR 258)

See more about using ES6 modules in your project in the installing with npm - importing Javascript documentation.

0.5.3 (Prerelease) - 13 December 2018

:new: New features

• Header - Add 'aria-label' Nunjucks argument so it can be overridden (PR 297)