GOV.UK Frontend release v1.2.0

This is a feature release, where we've added some new functionality and there are no breaking changes.

In both radios and checkboxes macros you can now provide specify optional hints and optional label classes to each item. Additionally, you can provide a text divider between radio items.

OpenGraph image meta tag path is now independently customisable if needed and we've added stylistic tweaks to the logo when users have overridden colours in their browser.

There have also been some fixes to the conditional revealing content to address fix flash of unstyled content as well as replacing 'js-hidden' class with a new modifier class in tabs component's javascript file.

For more details see the changelog below.

Changelog

🆕 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 independently
  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)

GOV.UK Frontend release v1.1.1

This release contains bug fixes to the details, tabs and date-input components.

In particular there is a bug fix for the details component that could cause accessibility issues.

Changelog

🔧 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)

GOV.UK Frontend release v1.1.0

This release is a feature release, which means that it introduces new features, but there are no breaking changes.

Things to be aware of

This release includes support for defining font sizes with 'rem', which is disabled by default. This will allow the text in your services to scale appropriately when end-users change the font size in their browser. We intend to enable this by default in a future breaking release.

We have updated the panel component so that the heading level can be customised. The default remains an h2, but we will change the default to h1 in a future breaking release. If the panel title is also the title of the page, you should update your use of this component now to use an h1 – if you're using the macro, you can do this by passing headingLevel: 1.

We have fixed a typo in the govuk-visually-hidden-focussable class name. The misspelt classname is still available, but we will remove it in a future breaking release. You may want to replace any instances of govuk-visually-hidden-focussable in your code with govuk-visually-hidden-focusable now to make it easier to upgrade in the future.

We have also removed component examples (for example button.njk) that were used internally and published to npm, please use the 'yaml' component files instead.

Finally thanks to @bevanloon for fixing an issue in the footer component!

Change log

🆕 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:
  #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)

GOV.UK Frontend release v1.0.0

This is our first stable release. 🙌 🎉

The v1.0.0 release includes a new tabs component, contributed by @adamsilver and @trevorsaint. And some improvements to defaults in the back link and header components (thanks @web-bert).

Our releases up until now have contained mostly breaking changes, with v1.0.0 we intend to only make breaking changes where absolutely necessary to make it easier to upgrade.

We'll be announcing the GOV.UK Design System tomorrow, so if you want to start sharing GOV.UK Frontend and the Design System, please wait until then! 😄

1.0.0

🆕 New features:

• Add tabs component – thanks to @adamsilver and @trevorsaint for contributing
  (PR #776)

• Add default text for back-link component – thanks to @web-bert
  (PR #793)

• Add default container class to the header component
  (PR #807)

🔧 Fixes:

• Reduce margin-bottom on the hint when following a default or small label
  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)

GOV.UK Frontend release v0.0.32

This release doesn't require a password and is published under a new package name govuk-frontend (instead of @govuk-frontend/frontend). This package name will be the one used for the upcoming v1.0.0

The majority of breaking changes in this release are to do with consistency and robustness of the public API in GOV.UK Frontend. Please see Changelog for details.

Changelog

0.0.32 (Breaking release)

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

To migrate to the new page start by doing the following:

npm remove @govuk-frontend/frontend
npm install --save govuk-frontend

Then replace any instances of @govuk-frontend/frontend with govuk-frontend in your codebase.

💥 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>

  to

    <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
  nunj...

GOV.UK Frontend release v0.0.31-alpha

We've changed how fonts are loaded, which will speed up the loading of pages built using GOV.UK Frontend.
We've also made changes to how images are loaded, which will allow Rails users to use GOV.UK Frontend.

Changelog

0.0.31-alpha (Breaking release)

💥 Breaking changes:

• The govuk-file-url helper has been renamed to to govuk-image-url. If you
  are using this function in your own styles you will need to update calls to
  it. (PR #726)

• The $govuk-global-images variable has been renamed to to
  $govuk-images-path. If you are overriding this variable or using it in your
  own styles you will need to update your code to use the new variable name.
  (PR #726)

🔧 Fixes:

• Namespacing SCSS exports with 'govuk' prefix to avoid clashes with
  exports in applications consuming GOV.UK Frontend
  (PR #732)

• Fixes a bug whereby print styles were being 'rasterized' into the screen
  styles when generating the IE8 stylesheet (this is a bug in sass-mq, and has
  also been raised upstream – sass-mq/sass-mq#111).
  (PR #726)

• Removed some duplicated CSS rules from the outputted CSS
  (PR #727)

• Fixes a bug in IE8 where the button component did not have a shadow, by
  rendering the shadow using a border for IE8 specifically – IE8 does not
  support box-shadow
  ([PR #737])(#737)

🆕 New features:

• Change font delivery method from Base64 encoded strings to serving WOFF2, WOFF
  and EOT files as separate HTTP requests. You will need to ensure that you are
  serving the fonts from the assets folder as part of your application.
  (PR #726)

• The font-face is now using font-display: fallback. This means that the
  fallback font (Arial) will be used if NTA doesn't download within 100ms. The
  browser will then swap to NTA as long as it loads within the short swap period.
  (PR #726)

• You can now override the helpers used to generate image and font urls, for
  example if you are using sass-rails' asset-pipeline functionality.
  You can do this by setting $govuk-image-url-function and
  $govuk-font-url-function to the name of the function(s) you wish to use.
  See src/settings/_assets.scss for more information and examples.
  (PR #733)

• Add boilerplate template, which is a Nunjucks replacement for GOV.UK Template.
  (PR #731)

🏠 Internal:

• Improve release steps, based on doing a release
  (PR #725)

• Fix majority of vulnerabilities flagged by npm audit
  (PR #712)

GOV.UK Frontend release v0.0.30-alpha

0.0.30-alpha (Minor release)

With this new release we have added the Inset text and the Header component. These will be documented in the GOV.UK Design System website soon. With the release of the Header component we're closer to replacing govuk_template with the boilerplate left (which we're working on now).

🔧 Fixes:

• Update component readme files content
  (PR #704)

• Fix panel body element rendering with no text
  (PR #707)

🆕 New features:

• Add override classes to set display property to block, inline and inline-block (PR #694)

• Add option to set CSS display property for govuk-shape-arrow mixin
  (PR #701)

• Add header component (PR #695)

• Add inset text component (PR #709)

• Add ability to pass explicit name value to checkbox items (PR #719)

🏠 Internal:

• Run tests in pre-release
  (PR #706)

• Fix CI timeouts: run Jest single thread in TravisCI
  (PR #712)

• Ensure 'after' tests are not ignored
  (PR #720)

GOV.UK Frontend release v0.0.29-alpha

We’ve made changes to simplify things for users creating prototypes in response to user research findings. We’ve added features working towards the GOV.UK Design System replacing GOV.UK Elements, GOV.UK Template and GOV.UK Frontend Toolkit.

0.0.29-alpha (Breaking release)

💥 Breaking changes:

• Restructure project to enable it to be published as a single package

  The new project structure matches our ITCSS inspired layers and is published as a single package as @govuk-frontend/frontend.

  You will need to:

  • Update your npm dependencies to use @govuk-frontend/frontend
  • Update your SCSS import paths to match the new package name and folder structure.

  If you're importing everything at once:

  @import "node_modules/@govuk-frontend/frontend/all";

  If you're importing individual components:

  @import "node_modules/@govuk-frontend/frontend/components/button/button";

  See the main README for up-to-date installation instructions.

  (PR #680)

• Error Messages and Hints have been moved out Label and Fieldset components.

  They are no longer nested within the label or legend.
  They are associated with the input or with the fieldset using aria-describedby.

  Hint has been made into a new component similar to Error Message.

  If you're using markup, you will need to update the old markup:

  <label class="govuk-c-label" for="national-insurance-number">
    National Insurance number
    <span class="govuk-c-label__hint">
      It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
    </span>
    <span class="govuk-c-error-message">
      Error message goes here
    </span>
  </label>
  <input class="govuk-c-input govuk-c-input--error" id="national-insurance-number" name="national-insurance-number" type="text">

  With the new markup:

  <label class="govuk-label" for="national-insurance-number">
    National Insurance number
  </label>
  <span id="national-insurance-number-hint" class="govuk-hint">
    It’s on your <i>National Insurance card</i>, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </span>
  <span id="national-insurance-number-error" class="govuk-error-message">
    Error message goes here
  </span>
  <input class="govuk-input govuk-input--error" id="national-insurance-number" name="test-name-3" type="text" aria-describedby="national-insurance-number-hint national-insurance-number-error">

  If you're using macros:

  The fieldset macro no longer accepts legendHintText or legendHintHtml -
  these parameters are now passed to the hint component which accepts text or
  html. The date-input, checkboxes and radios components have been updated to
  use the new Hint component.

  The label macro no longer accepts hintText or hintHtml - these parameters
  are now passed to the hint component which accepts text or html. The
  file-upload, input, select and textarea components have been updated to use the
  new Hint component.

  For example, this example macro call for a File Upload component:

  {{ govukFileUpload({
    "id": "file-upload",
    "name": "photo",
    "label": {
      "text": "Upload your photo",
      "hintText": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder."
    }
  }) }}

  would now be:

  {{ govukFileUpload({
    "id": "file-upload",
    "name": "photo",
    "label": {
      "text": "Upload your photo"
    },
    "hint": {
      "text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder."
    }
  }) }}

  For more examples of the new markup and Nunjucks macros see the GOV.UK Design System Question Pages pattern

  (PR #681)

• The date-input component now sets an explicit group role on the fieldset
  to force JAWS 18 to announce the error message and hint.
  (PR #681)

• The label component macro now accepts an isPageHeading argument which determines
  whether the label itself should be wrapped in an h1:

  <h1 class="govuk-label-wrapper">
    <label class="govuk-label">What is your National Insurance number?</label>
  </h1>

  The .govuk-label-wrapper removes the margins from the heading so that the
  presence of the h1 has no effect on the styling of the label.

  (PR #684)

• Added new modifier classes for labels to allow you to create a label that
  visually corresponds to the equivalent heading class (for example, a
  .govuk-label--xl will have the same font size and weight as a
  .govuk-heading-xl)

  (PR #684)

• The arguments for a fieldset's legend have been rolled up into an object. For
  example, the following macro call:

  {{ govukFieldset({
    legendText: "What is your date of birth?"
  }) }}
  

  would now be:

  {{ govukFieldset({
    legend: {
      text: "What is your date of birth?"
    }
  }) }}
  

  The legend object can also accept new classes and arguments

  Components that use the fieldset component have been updated to reflect these
  changes.

  (PR #684)

• The fieldset component has a new parameter legend.isPageHeading, which defines
  whether the legend text should be wrapped in an h1:

  <legend class="govuk-fieldset__legend">
    <h1 class="govuk-fieldset__heading">Have you changed your name?</h1>
  </legend>

  The .govuk-fieldset__heading class ensures that the <h1> inherits its
  properties from the legend, so that the presence of the h1 has no effect on
  its styling.

  (PR #684)

• Added new modifier classes for legends to allow you to create a legend that
  visually corresponds to the equivalent heading class (for example, a
  .govuk-fieldset__legend--xl will have the same font size and weight as a
  .govuk-heading-xl)

  (PR #684)

• Remove -c -o -h layer prefixes
  (PR #644)
  In user research and in feedback from Private Beta partners we
  learned that users didn't really understand what -o, -c and -h prefixes
  stand for or why they're useful.

  They also introduced additional cognitive load when composing classes,
  having to remember which suffix the classname contains.

  If you're using markup, you will need to:

  • Remove -o, -c and -h prefixes from class names in your markup

  For example, change:

  <button class="govuk-c-button">Save and continue</button>

  Into:

  <button class="govuk-button">Save and continue</button>

• Simplify grid syntax and introduce grid-row and column mixins.

  Based on user research feedback we have simplified the grid classes
  to a more consise naming structure.

  You will need to:

  • Change grid class names in your markup

  For example, change:

  <div class="govuk-o-grid">
    <div class="govuk-o-grid__item govuk-o-grid__item--two-thirds">
      <!-- content -->
    </div>
    <div class="govuk-o-grid__item govuk-o-grid__item--one-third">
      <!-- content -->
    </div>
  </div>

  Into:

  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      <!-- content -->
    </div>
    <div class="govuk-grid-column-one-third">
      <!-- content -->
    </div>
  </div>

  We have also introduced two mixins to help generate additional or custom grid styles and widths.

  See original pull request for usage.

  (PR #665)

🔧 Fixes:

• Remove redundant font-family declaration from the button component – this will
  also fix an issue where the button uses New Transport when printed instead of
  falling back to the print stack as expected.
  (PR #650)

• Reinstate focus outline for radios and checkboxes on IE8
  (PR #670)

• Fix section break styles when used with GOV.UK Elements
  (PR #682)

• Remove -webkit-tap-highlight-color from links (PR #692)

• Remove normalize from /dist builds
  (PR #699)

🆕 New features:

• We're now using ES6 Modules and rollup to distribute our JavaScript. (PR #652)

• Checkboxes and Radios conditional reveal
  (PR #616)

• Vendor-in SassMQ functionality, write tests and remove external dependency
  (PR #657)

• Focus Error Summary on window load
  (PR #671)

• Opt-in Global <a> and <p> styles
  (PR #658)

  Global styles are not included by default.

  This is to avoid the risk of these globals conflicting with any pre-existing globals, for example in GOV.UK Elements or GOV.UK Template.

  Hovever, we do include them in the [GOV.UK Prototype ...

GOV.UK Frontend release v0.0.28-alpha

Fixes incomplete release from packages/ and dist/ in 0.0.27-alpha release.
Missing files were:

• globals/tools/_compatibility.scss
• globals/tools/_ie8.scss
• globals/settings/_compatibility.scss
• globals/settings/_ie8.scss

GOV.UK Frontend release v0.0.27-alpha

0.0.27-alpha (Breaking release)

Breaking changes:

• Removed an (undocumented) modifier govuk-c-radio__item--inline which made
  radio buttons inline, in favour of a new block-level modifier
  govuk-c-radios--inline which will automatically make all the radio buttons
  within that block inline.
  (PR #607)

• Prefix $global-images variable
  (PR #615)

• Simplified how we build stylesheets that target old versions of IE:

  • Removed styles that target IE6 and IE7
  • Replaced IE mixins with a simpler version for targeting IE8 specifically
    without having to specify versions
  • Add a new tool mixin to easily exclude styles when targeting IE8
  • Automatically set $mq-responsive based on the value of the $govuk-is-ie8
    variable.

  If you are building an IE8 stylesheet for your application you'll need to
  update it to reference the new variable $govuk-is-ie8 – see the README for
  details.
  (PR #631)

• Rename captionSize table argument to captionClasses (PR #643)

Fixes:

• Link styles, as well as links within the back-link, breadcrumbs, button,
  error summary, footer and skip link components defend against the
  a:link:focus selector in GOV.UK Template, which was overriding focussed
  links to always use the dark blue link colour for text.
  (PR #609)
• Fix table captions to allow heading classes
  (PR #633)

New features:

• Add govuk-main-wrapper--l a variant of the main page wrapper to use when a
  design does not include back links, breadcrumbs or phase banners
  (PR #602)
• Added a new .govuk-link--text-colour modifier to make links use the same
  colour as the text.
  (PR #609)
• Introduce new mixins for link styles (muted links, text links) and update
  the existing link classes to use them
  (PR #609)
• Introduce a new 'compatibility' mixin and settings to allow us to selectively
  include styles that 'counter' styles from the existing products
  (e.g. GOV.UK Template)
  (PR #609)
• The back link, breadcrumbs and skip link have been updated to use the
  text style link mixin
  (PR #609)
• Add limited width inputs
  (PR #626)
• Add details polyfill. This is automatically initialised in the main JS. (PR #610)
• Add button polyfill. This is automatically initialised in the main JS. #572)

Note: Our JavaScript work is ongoing. In the next release of GOV.UK Frontend both of our script will be modularised and split into common functions. This will allow you to use the polyfills in your bundler/build pipeline. For this reason, you might want to wait until the next release before adding these polyfill scripts into your project.

Internal:

• Update check script for new components and tweak docs
  (PR #589)

• Listen for development server on different port for tests
  (PR #622)

• Fix date-input default example
  (PR #623)

• Ensure we're testing error-messages in date-input
  (PR #625)

• Explain npm link
  (PR #624)

• Make Sass imports less broad
  (PR #617)

• Update project README with user research findings (PR #617)

• Update component READMEs to use import statement (PR #615)

• Use promisify util instead of manual method (PR #639)