Update protocol-assets and publish V21 (#1055)

* Update protocol-assets and publish V21

Author: stephaniehobson

CHANGELOG.md

@@ -1,9 +1,20 @@
-# HEAD
+# 21.0.0
+
+## Features
+
+* **assets:** (breaking) Update @mozilla-protocol/assets to 6.0.1
+* **css:** Update navigation and footer with Mozilla logo lockup.
 
 ## Bug Fixes
 
 * **css:** Notification bar padding of links only working for complete sentences (#1000)
 * **css:** Missing explicit `mzp-c-notification-bar-cta` distinction (#1041)
+* **css:** Fix logo size in navigation in Firefox variant on large screen
+
+## Migration Tips
+
+* The new Mozilla wordmark files are the same height but longer. If you are explicitly declaring a width for them, you should update it (Tip: check your CSS background images too.)
+* The flat logo files are no longer square, so check their dimensions too (social files remain square)
 
 # 20.0.0
 

assets/package/README.md

@@ -20,7 +20,7 @@ Install package with NPM and add it to your dependencies:
 </tr>
 <tr>
 <td>Version</td>
-<td><a href="https://github.com/mozilla/protocol/blob/main/CHANGELOG.md">20.0.0</a></td>
+<td><a href="https://github.com/mozilla/protocol/blob/main/CHANGELOG.md">21.0.0</a></td>
 </tr>
 <tr>
 <td>Releases</td>

assets/package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozilla-protocol/core",
-  "version": "20.0.0",
+  "version": "21.0.0",
   "description": "A design system for Mozilla's websites.",
   "repository": {
     "type": "git",

assets/sass/protocol/components/_footer.scss

@@ -52,13 +52,12 @@
     margin-bottom: $spacing-xl;
 
     a {
-        background: url('#{$image-path}/logos/mozilla/logo-word-hor-white.svg') no-repeat;
-
-        @include background-size(100px, 32px);
+        background: url('#{$image-path}/logos/mozilla/logo-lockup-hor-white.svg') no-repeat;
+        @include background-size(134px, 32px);
         @include image-replaced;
         display: inline-block;
         height: 32px;
-        width: 100px;
+        width: 134px;
     }
 }
 

assets/sass/protocol/components/_navigation.scss

@@ -78,14 +78,14 @@
     @include bidi(((float, left, right),));
 
     a {
-        @include background-size(84px, 24px);
+        @include background-size(101px, 24px);
         @include image-replaced;
-        background-image: url('#{$image-path}/logos/mozilla/logo-word-hor.svg');
+        background-image: url('#{$image-path}/logos/mozilla/logo-lockup-hor.svg');
         background-repeat: no-repeat;
         display: block;
         height: 24px;
         margin: 0 auto;
-        width: 84px;
+        width: 101px;
     }
 
     @media #{$mq-md} {
@@ -98,13 +98,6 @@
 
     @media #{$mq-lg} {
         @include bidi(((margin, $spacing-lg ($spacing-md * 2) $spacing-lg 0, $spacing-lg 0 $spacing-lg ($spacing-md * 2)),));
-
-        a {
-            @include background-size(112px, 32px);
-            height: 32px;
-            margin-top: $spacing-xs;
-            width: 112px;
-        }
     }
 
     @media #{$mq-xl} {
@@ -127,6 +120,7 @@
 
         @media #{$mq-lg} {
             a {
+                @include background-size(109px, 36px);
                 background-image: url('#{$image-path}/logos/firefox/logo-word-hor.svg');
                 height: 36px;
                 margin-top: 1px;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "protocol",
-  "version": "20.0.0",
+  "version": "21.0.0",
   "private": true,
   "author": "Mozilla",
   "description": "A design system for Mozilla's websites.",
@@ -32,7 +32,7 @@
     "@frctl/fractal": "^1.5.15",
     "@frctl/mandelbrot": "^1.10.3",
     "@frctl/nunjucks": "^2.0.15",
-    "@mozilla-protocol/assets": "^5.4.0",
+    "@mozilla-protocol/assets": "^6.0.1",
     "@mozilla-protocol/tokens": "^6.0.0",
     "babel-loader": "^10.0.0",
     "clean-webpack-plugin": "^4.0.0",