diff --git a/src/BrandedNavBar/NavBar.story.tsx b/src/BrandedNavBar/NavBar.story.tsx
index 4cbac4760..9f6cc6d0d 100644
--- a/src/BrandedNavBar/NavBar.story.tsx
+++ b/src/BrandedNavBar/NavBar.story.tsx
@@ -9,6 +9,7 @@ import theme from "../theme";
 import { Button } from "../Button";
 import { Text } from "../Type";
 import { BrandedNavBar as NDSBrandedNavBar } from "./index";
+import numberFromDimension from "../utils/numberFromDimension";
 
 const sampleLogo = "http://pigment.github.io/fake-logos/logos/vector/color/auto-speed.svg";
 
@@ -389,9 +390,9 @@ export const WithHamburgerMenu = () => {
 };
 WithHamburgerMenu.parameters = {
   viewport: {
-    defaultViewport: "small", // for some reason this has to match the viewport key, NOT the name!
+    defaultViewport: "small", // for some reason, this has to match the viewport key, NOT the name!
   },
-  chromatic: { viewports: [parseInt(theme.breakpoints.small)] },
+  chromatic: { viewports: [numberFromDimension(theme.breakpoints.small)] },
 };
 
 const customPrimaryMenu = [
@@ -428,7 +429,7 @@ CustomRenderingInHamburger.parameters = {
   viewport: {
     defaultViewport: "small", // for some reason this has to match the viewport key, NOT the name!
   },
-  chromatic: { viewports: [parseInt(theme.breakpoints.small)] },
+  chromatic: { viewports: [numberFromDimension(theme.breakpoints.small)] },
 };
 
 const primaryMenuWithCustomTriggers = [
@@ -487,5 +488,5 @@ CustomMenuTriggersInHamburger.parameters = {
   viewport: {
     defaultViewport: "small", // for some reason this has to match the viewport key, NOT the name!
   },
-  chromatic: { viewports: [parseInt(theme.breakpoints.small)] },
+  chromatic: { viewports: [numberFromDimension(theme.breakpoints.small)] },
 };
diff --git a/src/BrandedNavBar/SmallNavBar.story.tsx b/src/BrandedNavBar/SmallNavBar.story.tsx
index bb16f0398..974156c57 100644
--- a/src/BrandedNavBar/SmallNavBar.story.tsx
+++ b/src/BrandedNavBar/SmallNavBar.story.tsx
@@ -7,6 +7,7 @@ import { Link } from "../Link";
 import { Button, SmallNavBarProps, theme } from "../index";
 import BrandLogoContainer from "./BrandLogoContainer";
 import { SmallNavBar } from "./index";
+import numberFromDimension from "../utils/numberFromDimension";
 
 const ResetStorybookView = styled.div({
   position: "absolute",
@@ -78,7 +79,7 @@ const smallViewport = {
   viewport: {
     defaultViewport: "small", // for some reason this has to match the viewport key, NOT the name!
   },
-  chromatic: { viewports: [parseInt(theme.breakpoints.small)] },
+  chromatic: { viewports: [numberFromDimension(theme.breakpoints.small)] },
 };
 
 export default {
diff --git a/src/utils/numberFromDimension/index.ts b/src/utils/numberFromDimension/index.ts
index 16f3096e0..1758b6abb 100644
--- a/src/utils/numberFromDimension/index.ts
+++ b/src/utils/numberFromDimension/index.ts
@@ -2,6 +2,6 @@
  * Returns the number from a [CSS dimension]{@link https://developer.mozilla.org/en-US/docs/Web/CSS/dimension}.
  * @param {string} dimension - A css dimension
  */
-export default function (dimension: string | number): number {
+export default function numberFromDimension(dimension: string | number): number {
   return parseInt(String(dimension), 10);
 }