v19.2.0

Features

• component: Add Firefox Klar wordmark for the Wordmark component (#932)
• js: Migrate ESLint to use flat config file (#906)

v19.1.0

Features

• component: Remove the format option from Newsletter component (#926)
• component: Allow an optional icon in buttons (#893)

v19.0.0

Features

• component: Remove deprecated Picto Card component.
• component: Remove deprecated Hero component. (#912)
• component: Refactor and rename the Callout component (previously Call-out) (#787)
• component: Remove Compact Call-out as a separate component. It's now just a variant of the updated Callout.
• js: Update newsletter component to include JS to post directly to Basket (#839).
• css: Add CSS utility class for centered text and document existing title utility classes (#897).

Bug Fixes

• css: Fix incorrect value for text-body-lg in Firefox theme.
• js: Fix typo at lang-switcher.js comment
• css: Center-align button text (#826)

Migration Tips

• Rename instances of mzp-c-call-out to mzp-c-callout (note the removed dash).
• Replace instances of Compact Call-out with the compact variant of Callout (class="mzp-c-callout mzp-l-compact").
• Update references to the call-out SCSS file to callout in any @import or @use rules.
  ** e.g. @use 'components/call-out'; should change to @use 'components/callout';
• The rebuilt Callout doesn't feature integrated brand logos. Use Logo and Wordmark components instead.
• The rebuilt Compact Callout lacks an integrated logo, so it no longer positions the logo at one end of the component. A Logo or Wordmark component should appear in the body instead.
• Convert any instances of the Hero component to either Split or Callout.
• Convert any instances of the Picto Card component to Picto.

18.0.0

What's Changed

• css: Replace get-theme, type-scale functions and theme and type-scale maps with CSS Custom Properties. Sass variables added for legacy support
• css: Migrates the sass @import with @use and @forward (#755).

Migration Tips

• This version updates how we internally import SCSS files, from the @import syntax to @use and @forward
• When importing lib at the head of your project you will use the with keyword instead of
  stating variables explicitly, like this:

@use '/assets/sass/protocol/includes/lib' with ($font-path: '/protocol/fonts');

• To use the global namespace for protocol variables you will need to use the as keyword and assign to *:

@use '../includes/lib' as *;

• if you don't use as you would access variables and mixins from the file using the filename as a namespace:

@use '../includes/lib';

.mzp-c-item {
    @include lib.text-title-md;
    color: lib.$color-ink-80;
    margin: lib.$spacing-lg 0;
}

• For more information on the @use and @forward you can visit the offical SCSS documentation or the usage page on the Protocol documentation website

• This version also moves from using the get-theme function to using css custom properties. A future version of protocol will depreciate both the get-theme and type-scale functions.

• To migrate from get-theme or type-scale to CSS custom properties, follow this pattern:

• From this:

.mzp-t-dark {
  background-color: get-theme('background-color-inverse');
  color: get-theme('body-text-color-inverse');
  line-height: type-scale('body-line-height');
}

• to this:
• (Note: if you need to support legacy browsers, place the CSS custom properties in a @supports flag and use sass variables as a fall back. Legacy browsers will always be served the default theme.)

.mzp-t-dark {
  background-color: $background-color-inverse;
  color: $body-text-color-inverse;
  line-height: $body-line-height;

  @supports (--css: variables) {
    background-color: var(--background-color-inverse);
    color: var(--body-text-color-inverse);
    line-height: var(--body-line-height);
  }
}

• For more information on CSS custom properties you can visit MDN's documentation or the framework page Protocol's documentation website.

v17.0.1

Bug Fixes

• js: MzpDetails component should be explicitly initialized (Fixes #879)

v17.0.0

Breaking changes ⚠️

• Protocol JS components are now published in UMD format for easier consumption. They can now be imported directly using common build tools such as Webpack (see the docs), but are still available as a global variable for sites that need it. There's no longer a global window.Mzp.* name space however, so in your code window.Mzp.Notification should now become window.MzpNotification (as an example).
• We no longer publish pre-minified CSS and JS files in the NPM package. If you want minified assets, then it is now your responsibility to take care of that in your site's build process.

Bug Fixes

• js: Moves the aria-expanded attribute to the mzp-c-navigation-menu-button (#860).
• css: Remove default mobile padding on nospace split component (#875).
• css: Removed min-width on the .mzp-c-split-container class on the split component (#843).

Features

• js: Protocol JS components are now written using modern JS and published as ES5/UMD format (#255).
• js: Removed pre-minified JS files from the published package (#255).
• css: Removed pre-minified CSS files from the published package (#255).

v16.1.0

Features

• component: Add centering classes for Logo and Wordmark. (#718)
• docs: Migrate Protocol documentation site to Fractal.
• node: Create a Webpack config for compiling docs using Fractal.
• css: Updated stylelint ruleset to match Bedrock's linting pattern. (#814)

Bug Fixes

• js: Ensure focus is moved to modal after animation completes (#829)
• node: Make sure to build NPM package using production mode.
• html: Added accessible attributes to menu bar (#815).
• css: Add style rule for the hidden attribute in global reset (#783).
• html: Use unambiguous date format in sidebar.
• docs: Remove aria-disabled from disabled form inputs.

v16.0.1

Features

• node: Create a standalone Webpack config for compiling the Protocol NPM package (#746).
• js: Update protocol to extend standard ESLint configs (#753).
• js: Move Karma test command to NPM script (#748).

Bug Fixes

• css: Fix repeating background on disabled search field (#767)
• js: Fix keyboard focus capture on modal open animation (#749).
• js: use more robust polyfill for e.matches (#736)

v16.0.0

Features

• css: Add tertiary theme colors.
• css: (breaking) Rename "alt" theme colors to "secondary."
• component: New breadcrumb component.

Bug Fixes

• css: Fix image overlapping content in a reversed Split with media overflow.

Migration Tips

• Update any uses of the theme variable background-color-alt (in the get-theme() function) to background-color-secondary.
• Update any uses of the theme variable background-color-alt-inverse (in the get-theme() function) to background-color-secondary-inverse.
• Update any uses of the theme variable body-text-color-alt (in the get-theme() function) to body-text-color-secondary.
• Update any uses of the theme variable body-text-color-alt-inverse (in the get-theme() function) to body-text-color-secondary-inverse.
• Update any uses of the mzp-t-background-alt class to mzp-t-background-secondary.

v15.1.0

Features

• component: Add Firefox Relay logos and wordmarks
• assets: Update @mozilla-protocol/assets to 5.1.0