@bbc/psammead-assets - npm Package Compare versions

Comparing version 2.10.0 to 2.10.1

CHANGELOG.md

@@ -6,2 +6,3 @@ # Psammead Assets Changelog
 |---------|-------------|
+| 2.10.1 | [PR#2655](https://github.com/bbc/psammead/pull/2655) Update Navigation Icons to scale with browser font size |
 | 2.10.0 | [PR#2631](https://github.com/bbc/psammead/pull/2631) Add AMP_BIND, AMP_LIST, AMP_MUSTACHE scripts to amp-boilerplate exports |
@@ -8,0 +9,0 @@ | 2.9.0 | [PR#2641](https://github.com/bbc/psammead/pull/2641) Add Core icons group with Alert and Info icons |

dist/svgs/navigationIcons.js

@@ -14,2 +14,4 @@ "use strict";
 
+var svgSize = '2.75rem'; // 44px
+
 var MenuIcon =
@@ -22,13 +24,12 @@ /*#__PURE__*/
 
+var defaultAttrs = {
+  width: svgSize,
+  height: svgSize,
+  viewBox: '0 0 44 44'
+};
 var navigationIcons = {
-  hamburger: _react.default.createElement(MenuIcon, {
-    width: "44px",
-    height: "44px"
-  }, _react.default.createElement("path", {
+  hamburger: _react.default.createElement(MenuIcon, defaultAttrs, _react.default.createElement("path", {
     d: "M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
   })),
-  cross: _react.default.createElement(MenuIcon, {
-    width: "44px",
-    height: "44px"
-  }, _react.default.createElement("path", {
+  cross: _react.default.createElement(MenuIcon, defaultAttrs, _react.default.createElement("path", {
     d: "M26.741 15L21.6 20.142 16.458 15 15 16.458l5.142 5.142L15 26.742l1.458 1.458 5.142-5.141 5.141 5.141 1.459-1.458-5.142-5.142 5.142-5.142z",
@@ -35,0 +36,0 @@ fillRule: "evenodd"

esm/svgs/navigationIcons.js

 import React from 'react';
 import styled from 'styled-components';
+var svgSize = '2.75rem'; // 44px
+
 var MenuIcon =
@@ -9,13 +11,12 @@ /*#__PURE__*/
 })(["color:#fff;fill:currentColor;"]);
+var defaultAttrs = {
+  width: svgSize,
+  height: svgSize,
+  viewBox: '0 0 44 44'
+};
 var navigationIcons = {
-  hamburger: React.createElement(MenuIcon, {
-    width: "44px",
-    height: "44px"
-  }, React.createElement("path", {
+  hamburger: React.createElement(MenuIcon, defaultAttrs, React.createElement("path", {
     d: "M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z"
   })),
-  cross: React.createElement(MenuIcon, {
-    width: "44px",
-    height: "44px"
-  }, React.createElement("path", {
+  cross: React.createElement(MenuIcon, defaultAttrs, React.createElement("path", {
     d: "M26.741 15L21.6 20.142 16.458 15 15 16.458l5.142 5.142L15 26.742l1.458 1.458 5.142-5.141 5.141 5.141 1.459-1.458-5.142-5.142 5.142-5.142z",
@@ -22,0 +23,0 @@ fillRule: "evenodd"

package.json

 {
   "name": "@bbc/psammead-assets",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "sideEffects": false,
@@ -5,0 +5,0 @@ "description": "A collection of common assets that are likely to be required by many Psammead components or users, such as SVGs or small scripts.",

src/svgs/navigationIcons.jsx

 import React from 'react';
 import styled from 'styled-components';
 
+const svgSize = '2.75rem'; // 44px
+
 const MenuIcon = styled.svg`
@@ -9,5 +11,11 @@ color: #fff;
 
+const defaultAttrs = {
+  width: svgSize,
+  height: svgSize,
+  viewBox: '0 0 44 44',
+};
+
 const navigationIcons = {
   hamburger: (
-    <MenuIcon width="44px" height="44px">
+    <MenuIcon {...defaultAttrs}>
       <path d="M12 29h21v-2.333H12V29zm0-5.833h21v-2.334H12v2.334zM12 15v2.333h21V15H12z" />
@@ -17,3 +25,3 @@ </MenuIcon>
   cross: (
-    <MenuIcon width="44px" height="44px">
+    <MenuIcon {...defaultAttrs}>
       <path
@@ -20,0 +28,0 @@ d="M26.741 15L21.6 20.142 16.458 15 15 16.458l5.142 5.142L15 26.742l1.458 1.458 5.142-5.141 5.141 5.141 1.459-1.458-5.142-5.142 5.142-5.142z"

No alert changes

Improved metrics

Total package byte prevSize

885154

increased by0.04%

Lines of code

6699

increased by0.09%

No dependency changes