Extract "Header" core organism height shrink style value

This improves the configuratibility and simplifies the testing.

GH-76

src/components/organisms/core/Header/index.js

@@ -7,8 +7,8 @@
  * License:    MIT
  */
 
-import { HEADER_HEIGHT, HEADER_HEIGHT_PINNED } from "./shared/styles";
+import { HEADER_BRAND_LOGO_SHRINK_FACTOR, HEADER_HEIGHT, HEADER_HEIGHT_PINNED } from "./shared/styles";
 import Header from "./Header";
 
-export { HEADER_HEIGHT, HEADER_HEIGHT_PINNED };
+export { HEADER_BRAND_LOGO_SHRINK_FACTOR, HEADER_HEIGHT, HEADER_HEIGHT_PINNED };
 export default Header;

src/components/organisms/core/Header/shared/styles.js

@@ -18,6 +18,13 @@ import { rgba } from "polished";
 
 import { colors, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
 
+/**
+ * The factor with which the branding logo is multiplied by the height of the header based on the pin mode.
+ *
+ * @type {number}
+ */
+const HEADER_BRAND_LOGO_SHRINK_FACTOR = 0.45;
+
 /**
  * The default height (in `px`) of the header when in unpinned mode.
  *
@@ -42,4 +49,10 @@ const linkBackgroundColorHover = themedMode({
   [MODE_DARK_NIGHT_FROST]: rgba(colors.nord3, 0.8)
 });
 
-export { backgroundColor, linkBackgroundColorHover, HEADER_HEIGHT, HEADER_HEIGHT_PINNED };
+export {
+  backgroundColor,
+  linkBackgroundColorHover,
+  HEADER_BRAND_LOGO_SHRINK_FACTOR,
+  HEADER_HEIGHT,
+  HEADER_HEIGHT_PINNED
+};

src/components/organisms/core/Header/styled/Logo.jsx

@@ -12,6 +12,8 @@ import { em } from "polished";
 
 import { Nord } from "atoms/core/vectors/logos";
 
+import { HEADER_BRAND_LOGO_SHRINK_FACTOR } from "../shared/styles";
+
 /**
  * Nord's logo as SVG vector graphic component with a dynamic size based on the given `size` prop.
  *
@@ -21,8 +23,8 @@ import { Nord } from "atoms/core/vectors/logos";
  */
 const Logo = styled(Nord)`
   display: block;
-  width: ${({ size }) => em(size * 0.45)};
-  height: ${({ size }) => em(size * 0.45)};
+  width: ${({ size }) => em(size * HEADER_BRAND_LOGO_SHRINK_FACTOR)};
+  height: ${({ size }) => em(size * HEADER_BRAND_LOGO_SHRINK_FACTOR)};
 `;
 
 export default Logo;