Allow additional 'meta' content in the footer

You can now pass additional 'meta' content (as meta.html or meta.text) which will appear below any meta links, above the OGL license. This is ideal for, for example, the 'Built by Department Name' colophon.

(PR #990)
Allow attributes to be added to some child items in header, footer, breadcrumbs, tabs and error-summary components

You can now pass additional attributes to links in header, footer, breadcrumbs, tabs and error-summary components

(PR #993)
Fix issue with conditional form content and inline form controls

When inline variant of form controls is used with conditional content, we force it to display block. This is to avoid breaking and confusing styling as it is a combination we don't recommend.

(PR #970)
Add component options (arguments) as macro-options.json to package

We want to be able to expose these options to GOV.UK Design System. This change includes them as yaml in src/components and adds a build step to transform them to JSON and copy them to package/components. It also adds a test to check if the copied files are valid JSON and contain expected attributes.

(PR #998)

🔧 Fixes:

Fix mobile menu button submitting parent forms

The menu <button> didn’t have an explicit type set, which meant that it defaulted to type=“submit”.

This meant that if the header was inside a form (as it is in the Design System examples, but we can imagine other scenarios where this would be the case) clicking the menu button would submit the form.

In most cases this would also cause the page to reload, which closes the menu.

(PR #994)
Fix flash of unstyled content in tabs component

(PR #1000)
Add 48px favicon

Microsoft recommends including at least a 48x48px favicon.

(PR #986)
Update browsersList in package.json to reflect our supported browsers

browsersList is used by PostCSS in our current build to determine which browser prefixes or rules to generate for the built CSS files. This PR adds rules to specify that the browsers in our browser matrix should always be prefixed for. Additionally, any browser with more than 0.1% of the global market share is prefixed for.

In terms of changes to our built CSS, this means that -webkit-box-sizing and -webkit-box-shadow prefixes will be removed - neither of these prefixes are required by desktop Safari 5.1 or later so this seems a fairly safe change to make.

(PR #1002)

2.0.0

Diff

govuk-patterns-and-tools

published 2.0.0 • 6 years ago

Changelog

Source

2.0.0 (Breaking change)

💥 Breaking changes:

Set panel component's title heading level to 1 as default

We think the panel title should be the h1 in the majority of cases, so we made it the default.

If you have need to change the Panel component heading to something other than h1, you can do so by specifying headingLevel: <number> in the Nunjucks macro.

(PR #967)
Remove deprecated govuk-visually-hidden-focussable class name

In 1.1 release we added a new, correctly spelt govuk-visually-hidden-focusable CSS class and marked the old one as deprecated.

To migrate you need to change govuk-visually-hidden-focussable to govuk-visually-hidden-focusable in your codebase.

(PR #968)
Remove name-based width logic from date-input component

In 1.1 release we removed styling which made the year field 4 characters wide, but was coupled to the field's name.

However, to avoid making this a breaking release, we added logic to automatically add the width classes based on the name.

We are now removing this behaviour. Instead, users need pass explicit classes for each field in the items object for the desired width of the input field.

If you are not passing items at all, you will get the default items which include these classes.

If you are using the Nunjucks macro, you need to provide a width class for each item, for example:
```
{{ govukDateInput({
  "id": "dob",
  "name": "dob",
  "fieldset": {
    "legend": {
      "text": "What is your date of birth?"
    }
  },
  "items": [
    {
      "name": "day",
      "classes": "govuk-input--width-2"
    },
    {
      "name": "month",
      "classes": "govuk-input--width-2"
    },
    {
      "name": "year",
      "classes": "govuk-input--width-4"
    }
  ]
}) }}
```
If you are using plain HTML, you need to manually add a width-based class, such as govuk-input--width-2 or govuk-input--width-4 to the input fields.

(PR #969)
Rename name argument of date-input component to namePrefix.

This is better reflective of the purpose of the argument, which is to prefix the name attribute of items. This is consistent with other components which use the name idPrefix to explain similar functionality.

If your project currently uses this optional argument with the date-input macro, you need to rename all instances of it to namePrefix (NB: this argument shouldn't be confused with the items.{}.name attribute which hasn't changed.)

(PR #984)
Turn off compatibility mode by default for GOV.UK Elements, GOV.UK Template, GOV.UK Frontend Toolkit

You do not need to make any changes if you do not use these projects alongside GOV.UK Frontend.

To migrate include the SCSS variables that correspond with the projects you depend on before importing GOV.UK Frontend styles into your app:
```
// application.scss
$govuk-compatibility-govukfrontendtoolkit: true;
$govuk-compatibility-govuktemplate: true;
$govuk-compatibility-govukelements: true;
@import "govuk-frontend/all";
```
(PR #981)
Turn on relative typography (rem) by default

This allows for end-users to adjust GOV.UK Frontend components by setting their font size in their browser.

If you are using GOV.UK Frontend on with no other frameworks this should not break your project.

If you need to change this setting for compatibility with GOV.UK Elements, GOV.UK Template, GOV.UK Frontend Toolkit consider enabling compatibility mode.

Otherwise, set $govuk-typography-use-rem to false before importing GOV.UK Frontend styles into your app:
```
// application.scss
$govuk-typography-use-rem: false;
@import "govuk-frontend/all";
```
(PR #981)
Remove anchor styling in govuk-lists

This was an undocumented feature of lists.

To migrate we recommend using adding .govuk-link class to any anchors within a govuk-list.

If you would like to replicate this functionality without adding a class you can also enable global styles (Note: global styles are enabled by default in the GOV.UK Prototype Kit)

(PR #985)
Remove the width declaration from the <select> component

The <select> component’s width will now be defined by it’s content. This addresses some accessibility issues with the select being 100% wide by default. If you want to style your select to be 100% wide we have added a new override class .govuk-!-width-full to allow this.

(PR #960)
Use text colour on focus for better contrast

Updates the focus styles of links in GOV.UK Frontend so they pass WCAG contrast requirements.

(PR #982)

🆕 New features:

Add a new width override class .govuk-!-width-full

You can now override elements that have an undefined or smaller percentage width to be 100% width of their container.

(PR #960)
Allow attributes on select items

You can now provide attributes on select items attributes: { 'data-attribute': 'value' }

(PR #977)

🔧 Fixes:

Textareas can now only be resized vertically, to prevent them being resized outside of their container bounds. Additionally, they now have a minimum height to prevent them being resized smaller than a text input.

(PR #976)
Defend tables against GOV.UK Elements code (PR #983)

1.3.0

Diff

govuk-patterns-and-tools

published 1.3.0 • 6 years ago

Changelog

Source

1.3.0 (Feature release)

🆕 New features:

Allow attributes on checkboxes/radios

You can now provide attributes on checkbox and radio items attributes: { 'data-attribute': 'value' }

(PR #942)

🔧 Fixes:

Fix incorrect panel title bottom margin with optional text

Margin is only added when panel text is provided

(PR #936)
Remove template whitespace

Remove leading whitespace before the doctype in the page template. Some older browser will be forced into 'quirks mode' if there is whitespace before the doctype.

(PR #949)
Remove additional dotted outline from focussed buttons in Firefox

This was already the intended behaviour, but a minor typo (: rather than ::) meant that it wasn't being applied.

(PR #951)
Update date input component to use display: inline-block (PR #938)
Change spacing relationship on default and small legends and hints (PR #940)
Adjust tag component padding to compensate for font spacing (PR #955)

1.2.0

Diff

govuk-patterns-and-tools

published 1.2.0 • 6 years ago

Changelog

Source

1.2.0 (Feature release)

🆕 New features:

Allow for optional divider between radio items

You can now provide a divider item (e.g "or") to separate items (PR #849)
Allow og:image meta tag url to be set independantly Image url for the opengraph image needs to be absolute and can now be overwritten by setting the assetUrl variable. (PR #847)
Only underline the logo in the header on underline when users have overridden colours in their browser, rather than it appearing underlined all the time (PR #926)
Allow for optional hint for each radio and checkbox item

You can now pass a hint object (or add in html) to each radio and checkbox item to display the hint (PR #846)
Allow additional classes to be added to the radio and checkbox items

You can now provide label: { classes: 'extra-class' } to each item.

(PR #880)

🔧 Fixes:

Replace conflicting js-hidden class used within the tabs component with a new modifier class. Because this class is defined and used within the JavaScript, no markup changes are required. (PR #916)
Use get-function when calling a Sass function as passing a string to `call()`` is deprecated and will be illegal in Sass 4.0 (PR #919)
Fix flash of unstyled content with conditional reveals (Radios and Checkboxes)

If the conditional reveal JavaScript is slow to execute it can result in showing the user their contents briefly which can be jarring.

(PR #885)

1.1.1

Diff

govuk-patterns-and-tools

published 1.1.1 • 6 years ago

Changelog

Source

1.1.1 (Fix release)

🔧 Fixes:

Update details behaviour to remove margin-bottom for all elements (PR #900)
Update internal padding of tab content in the tabs component (PR #886)
Fixes an issue where clicking the revealed content in browsers that do not support the native details element causes the details element to collapse. (PR #912)
Fixes an issue where clicking the revealed content within a details element toggles the aria-expanded attribute on the summary element and the aria-hidden attribute on the content element, causing them to get out of sync with the visible state of the component. (PR #912)
Fixes an issue where it's not possible to make any field that does not have the name ‘year’ use any other width than 2 characters (PR #908)
Fix undefined class displaying in date input (PR #913)

1.1.0

Diff

govuk-patterns-and-tools

published 1.1.0 • 6 years ago

Changelog

Source

1.1.0 (Feature release)

🆕 New features:

Add govuk-visually-hidden-focusable class

Adds .govuk-visually-hidden-focusable and deprecates .govuk-visually-hidden-focussable in order to fix the typo in the class name. Please consider updating your code as the next major release will remove the deprecated class.

(PR #859)
Allow panel component title heading to be customisable.

You can now specify a heading level by providing headingLevel: <number> parameter. Default is 2. (PR #853)
Update date input component

Allow the name and id attributes to be passed individually for each input item.

Rely on classes instead of item names to set the width of input items.

Add default (day, month, year) date input items if no items are being specified

(PR #857)
The typography scale can now be converted from pixels to rem automatically, with pixels also being provided as a fallback for older browsers.

This feature is disabled by default - in order to use it you will need to set $govuk-typography-use-rem: true and ensure that $govuk-root-font-size is set to the effective size of your root (html) element. For new projects, this should be the default of 16px so you don't have to do anything. For projects that use alphagov/govuk_template this should be 10px.

The intention is to enable this by default in the next major version: https://github.com/alphagov/govuk-frontend/issues/868

(PR #858)

🔧 Fixes:

Remove mistakenly applied 5px bottom margin from radio and checkbox labels. (PR #883)
Apply display:block to .govuk-main-wrapper

In IE11 main element is set to display:inline so padding and margins aren't applied. (PR #863))
Line-heights are now converted from pixels to relative 'unit-less' values in order to prevent issues when resizing text in the browser. (PR #837 and PR #848)
Add bottom margin to Tabs component All components (or outer layer components) have a bottom margin applied to them so spacing feels automatic. (PR #841)
Update Crown copyright link Update the Crown copyright link on the National Archives so we don't send users on an unnecessary redirect. (PR #824)
Fixes radio and checkbox labels extending full width of page (PR #821)
Prevent the exclamation mark in the warning text component from being selectable, which also excludes it when it is copied as part of a wider body of text (PR #856)
Add customised colours handling for warning text

By adding a border to this component, when a user customises their colour settings they will still see a circle even if the background is removed. (PR #852)
Fixes a bug where the phase banner incorrectly uses a font-size of 19px when global styles are enabled (PR #877)
Add outlines to Radios and Checkboxes for customised colour users

Now when a user customises their colours, they should see a focus state on both Radios and Checkboxes. (PR #854)
Add outline to tag for customised colour users

Now when a user customises their colours, the tag component still keeps it's meaning. (PR #855)
Define size of table in px rather than em

This brings the styling of tables inline with rest of GOV.UK Frontend which no longer uses em for measurements.

This change very slightly increases the padding of table cells on mobile viewport as the use of em meant the font size set in the table was used to calculate padding. padding-top and padding-bottom of cells increase by 1.5px respectively which very slightly increases the height of the table on mobile.

In the unlikely case that your UI has a dependency on tables being a certain fixed height of mobile viewport, this change might affect you.

(PR #845)
Fix header component's reliance on markup whitespace

We have had issues where the header component can render incorrectly if the markup contains whitespace, for example if it has been pretty printed.

This changes the header component to use float based columns similar to how the grid system works.

(PR #884)

🏠 Internal:

Fix Design System url in package READMEs and review app (PR #812)
Update back-link example to show default usage doesn't need text parameter (PR #819)
Lowercase component names (PR #822)
Tidy up some package.json fields to help contributors and users (PR #827)
Fix failing Heroku app with Node 10.5.0 Revert to pinning node version in package json (PR #833)
Format YAML and Nunjucks consistently (PR #830)

1.0.0

Diff

govuk-patterns-and-tools

published 1.0.0 • 6 years ago

Changelog

Source

1.0.0 (Major release)

🆕 New features:

Add default text for back-link component (PR #793)
Add default container class to the header component (PR #807)
Add tabs component – thanks to @adamsilver and @trevorsaint for contributing (PR #776)

🔧 Fixes:

Reduce margin-bottom on the hint when following a default or small labe This reduces the margin-bottom of the hint by 5px after a default <label> or <label class="govuk-label--s">. (PR #806)

🏠 Internal:

Remove instructions to login with npm, which is no longer required (PR #795)
Update docs with the assistive technology we support (PR #800)
Update docs about installing fonts (PR #802)
Update browser support matrix Remove Windows Phone Update IE 8-10 to functional and IE 11 to compliant (PR #803
Add notice about the use of html arguments in Nunjucks macros for production (PR #785)
Add CHANGELOG_TEMPLATE to make changelogs easier for new contributors (PR #798)
Update package README (PR #804)
Update JavaScript installation instructions (PR #808)

0.0.32

Diff

govuk-patterns-and-tools

published 0.0.32 • 6 years ago

Changelog

Source

0.0.32 (Breaking release)

This release changes the name of package. It's now published as govuk-frontend on npm.

💥 Breaking changes:

The default build of the GOV.UK Frontend JavaScript now does not initialize all components automatically.

This allows you to initialize only the components you need, and gives you finer control over when the JavaScript for GOV.UK Frontend runs.

To migrate your project you need to change
```
  <script src="{path-to-govuk-frontend}/all.js"></script>
```
to
```
  <script src="{path-to-govuk-frontend}/all.js"></script>
  <script>window.GOVUKFrontend.initAll()</script>
```
Now, if you only want to initialize a specific component you can now do so by:
```
  <script src="{path-to-govuk-frontend}/all.js"></script>
  <script>
    var Button = window.GOVUKFrontend.Button
    new Button(document).init()
  </script>
```
Note: If you are importing JavaScript with a bundler, this is not likely to change anything for you. (PR #759)

Consistently structure the Details and Button component, so that they can be instantiated the same as the other components.

If you're using GOVUKFrontend.initAll() you do not need to make any changes, otherwise you need to change

  <script>
    new Button().init()
    new Details().init()
  </script>

  <script>
    new Button(document).init()

    var $details = document.querySelectorAll('details')
    nodeListForEach($details, function ($detail) {
      new Details($detail).init()
    })
  </script>

(PR #761)

All sass-mq settings have now been made private. We are now exposing new settings to allow you to customise breakpoints and responsive behaviour:
- $govuk-breakpoints - Map of breakpoint definitions
- $govuk-show-breakpoints - Whether to show the current breakpoint in the top right corner
- $govuk-ie8-breakpoint - Breakpoint to rasterize to for IE8
If you are overriding any settings prefixed with $mq- in your application you will need to update to the use the new $govuk- prefixed settings.

(PR #748)
Font settings have been renamed:
- $govuk-font-stack has been renamed to $govuk-font-family
- $govuk-font-stack-tabular has been renamed to $govuk-font-family-tabular
- $govuk-font-stack-print has been renamed to $govuk-font-family-print
(PR #748)
Spacing has been refactored. You will need to update Sass that currently uses GOV.UK Frontend spacing:
- Instead of
```
$govuk-spacing-scale-*
```
use
```
govuk-spacing(*)
```
where * is the number on the spacing scale. The scale itself has remained the same so that $govuk-spacing-scale-3 corresponds to govuk-spacing(3). This change allows us to control the error messaging when incorrect values are used and to deprecate variables. The values of spacing variables can also be overridden by consumers.
- Instead of:
```
@include govuk-responsive-margin($govuk-spacing-responsive-2, "bottom");
@include govuk-responsive-padding($govuk-spacing-responsive-2, "bottom");
```
use
```
@include govuk-responsive-margin(2, "bottom");
@include govuk-responsive-padding(2, "bottom");
```
This change, again, allows us to control the error messaging since spacing variables are not exposed directly. Also, the spacing scale itself has not changed so that $govuk-spacing-responsive-2 corresponds to 2 when passed to the padding and margin mixins.

This PR also updates tests and sass-docs of spacing variables and helpers.

Additionally, this PR hardcodes the value of $govuk-gutter, see PR for more details.

(PR #779)
Remove pageStart block from template, as could result in rendering issues in older IE. (PR #765)
You should no longer call the mq mixin directly - you should replace any calls to it from your own code with govuk-media-query which accepts the same arguments. All mixins and settings that start with mq- should be considered private – they could be removed in the future without notice. (PR #763)
All of the shorthand 'font' mixins (e.g. govuk-font-bold-80, govuk-font-regular-tabular-19), have been removed and replaced with calls to a new mixin govuk-font. If you are using these mixins in your application you will need to update your code to call govuk-font instead.

(PR #772)
The font maps are no longer as individual variables (e.g. $govuk-font-80) - they are all now part of one single $govuk-typography-scale map. Instead of passing font maps to govuk-typography-responsive you should now pass the desktop font size (e.g. govuk-typography-responsive(80) or govuk-typography-responsive($size: 80).

(PR #772)
All organisation variables (e.g. $govuk-cabinet-office) have been moved into a single $govuk-colours-organisations map. If you need to use an organisation colour in your own code, you should use the new govuk-organisation-colour function:
```
.element {
  color: govuk-organisation-colour(cabinet-office);
}
```
Note that this function will return 'web-safe' colours by default. You can pass $websafe: false to get the non-websafe colour.
The colour palette variables (e.g. $govuk-green) have been moved into a new single $govuk-colours map. If you need to reference a colour within your application you should use the new govuk-colour function:
```
.element {
  color: govuk-colour("green");
}
```
Tints ($govuk-green-50, $govuk-green-25) have been removed from the colour palette.
A number of the colours have been renamed to use more neutral names:
- mauve → light-purple
- fuchsia → bright-purple
- baby-pink → light-pink
- mellow-red → bright-red
- grass-green → light-green
The 'circle shape' object (.govuk-circle) which was used by the warning text component's '!' icon has been removed and the govuk-warning-text__icon class has been updated to make it circular without the need for another class.

(PR #782)
Removal of govuk-prose-scope We don't have confidence that the prose scope is well understood – without further research / better documentation it's safer to remove it for now.

If you are currently using prose-scope, you should revert to applying classes to individual headings, lists and hr elements. In version 0.0.29-alpha release we have added the option to enable global link and paragraph styles.

If you're using a recent version of the Private Beta Prototype kit, this is enabled by default.

(PR #778)
Make override classes consistently verbose Based on feedback from the community we have made the override classes consistent where previously some where verbose and some where shorthand.

We've made the decision to remove the 'r' for responsive, this was hard to remember and users found this confusing.

To migrate you will need to replace any instances of:
- .govuk-!-f-{size} with .govuk-!-font-size-{size}
- .govuk-!-w-{weight} with .govuk-!-font-weight-{weight}
- .govuk-!-m{direction}-r{scale} with .govuk-!-margin-{direction}-{scale}
- .govuk-!-p{direction}-r{scale} with .govuk-!-padding-{direction}-{scale}
For example if you were using:
- .govuk-!-mb-r5 you would need to change this to .govuk-!-margin-bottom-5
- .govuk-!-f-24 you would need to change this to .govuk-!-font-size-24
See the original Pull Request for the full list of classes before and after.

(PR #786)

🔧 Fixes:

Fix govuk-equilateral-height function usage in shape-arrow helper (PR ##766)
The <label> element will now be omitted for form controls where no label text or html is provided. If you call the label component directly whilst passing neither text nor html, no HTML will be outputted. (PR #740)
Add govuk-main-wrapper to <main> element by default. (PR #742)
Use relative imports whenever a component imports another component, to allow for cases where users don't want to add the components folder itself to their nunjucks paths. (PR #743)
Update JavaScript global namespace from 'all' to 'GOVUKFrontend', we intend to allow users to initialize components from this namespace. (PR #747)
Tabular numbers will now correctly use the $govuk-font-family-tabular setting rather than being hardcoded to use NTA tabular. (PR #748)
Prevents focus from being lost to the inline SVGs in the header (the crown) and footer (the OGL logo) by marking them as non-focusable elements (PR #774)
Use the correct class name in bold label example (govuk-label--s rather than govuk-label--bold) (PR #784)
Update table of arguments for each component to ensure they're accurate. (PR #769)
Add explicit dependency on colour maps (PR #790)

🆕 New features:

Components are now available to use from the GOVUKFrontend global. You can now initialize individual components like so:

  <script>
    var Radios = window.GOVUKFrontend.Radios
    new Radios(document).init()
  </script>

(PR #759)

Add beforeContent block to the template, for content that does not belong inside <main> element. For example: Back links. (PR #742)
Most of the settings, helpers and tools layers is now documented using Sassdoc, with variables, functions and mixins being marked as private or public. (PR #748) (PR #762)
Most of the settings can now be overridden in your application (they are now marked as !default) (PR #748)

🏠 Internal:

Fix review application templates to give them the correct HTML structure. (PR #742)
Improve release steps (PR #745)
Reintroduce mistakenly deleted HTML5Shiv required for IE8 (PR #749)
Fix issues with canvas colour bleeding into main review page (PR #741)
Add header with service name and navigation variant to header README (PR #781)

…

5 6

govuk-frontend - npm Package Versions

2.1.0

.css-1z04cui{margin-bottom:var(--chakra-space-4);font-size:var(--chakra-fontSizes-md);}2.1.0 (Feature release)

2.0.0

2.0.0 (Breaking change)

1.3.0

1.3.0 (Feature release)

1.2.0

1.2.0 (Feature release)

1.1.1

1.1.1 (Fix release)

1.1.0

1.1.0 (Feature release)

1.0.0

1.0.0 (Major release)

0.0.32

0.0.32 (Breaking release)

2.1.0 (Feature release)