Release v0.0.32

[hannalaakso]

0.0.32-alpha (Breaking release)

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

[kr8n3r]

this change will require all npm install instructions to be updated

[NickColley]

Just gonna block on the GOV.UK Design System updates that are in progress.

stale

[kr8n3r]

are we leaving -alpha ?

and i guess package name change is a breaking change?

what we said in 29 release
The new project structure matches our ITCSS inspired layers and is published as a single package as @govuk-frontend/frontend.

[hannalaakso]

Thanks @igloosi I've amended the version number used. I did see that CHANGELOG entry but it felt weird to be amending past ones. However I've now added a note to the original entry to flag up the new package name to clear any confusion.

[kr8n3r]

i would keep old changelog as it is and at the top of the 32 release add

• We have changed the name of package. It's now published as govuk-frontend on npm (or something similar)

[hannalaakso]

Gotcha. Have a look now, I've amended it.

Design System is ready

[kr8n3r]

did you try to make this bold?

[hannalaakso]

I did! Markdown preview for Atom is more lenient than Github 😶

[kr8n3r]

looks good now