chore: make chromatic less sensitive

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)] },
 };

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 {

src/Button/IconicButton.story.tsx

@@ -7,6 +7,12 @@ import dashed from "../utils/dashed";
 
 export default {
   title: "Components/IconicButton",
+   parameters: {
+    // Sets the diffThreshold for 0.2 for a specific story.
+    chromatic: {
+      diffThreshold: 0.4,
+    },
+  },
 };
 
 export const WithoutALabel = () => <IconicButton icon="delete" />;

src/DropdownMenu/DropdownMenu.story.tsx

@@ -20,8 +20,8 @@ const customColors = {
 
 export default {
   title: "Components/DropdownMenu",
-  chromatic: {
-    diffThreshold: 0.4,
+  parameters: {
+    chromatic: { diffThreshold: 0.4 },
   },
 };
 

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);
 }