From 3908bcd400f0eac5ee288cf43568bb9d7354917f Mon Sep 17 00:00:00 2001
From: "tom.davies" <thomas.davies@sage.com>
Date: Thu, 12 Oct 2023 09:14:42 +0100
Subject: [PATCH] chore: address comments - add test story and enable chromatic
 snapshot to catch visual regressions

---
 src/components/link/link-test.stories.tsx | 33 +++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/components/link/link-test.stories.tsx b/src/components/link/link-test.stories.tsx
index 92568ddb1d..7b23aeb619 100644
--- a/src/components/link/link-test.stories.tsx
+++ b/src/components/link/link-test.stories.tsx
@@ -3,14 +3,15 @@ import { action } from "@storybook/addon-actions";
 import { ICONS } from "../icon/icon-config";
 import { LINK_ALIGNMENTS, LINK_POSITIONS, LINK_VARIANTS } from "./link.config";
 import Link, { LinkProps } from "./link.component";
+import Box from "../box";
 
 export default {
   title: "Link/Test",
-  includeStories: ["DefaultStory"],
+  includeStories: ["DefaultStory", "FlexContainer"],
   parameters: {
     info: { disable: true },
     chromatic: {
-      disableSnapshot: true,
+      disableSnapshot: false,
     },
   },
   argTypes: {
@@ -94,6 +95,34 @@ DefaultStory.args = {
   isDarkBackground: false,
 };
 
+export const FlexContainer = () => {
+  const link = (
+    <Box
+      display="flex"
+      flexDirection="row"
+      justifyContent="flex-end"
+      alignItems="center"
+      width="60px"
+      height="40px"
+      bg="red"
+      mx={5}
+    >
+      <Link icon="close" variant="neutral" />
+    </Box>
+  );
+  return (
+    <div
+      style={{
+        margin: "64px",
+        width: "fit-content",
+        padding: "8px",
+      }}
+    >
+      {link}
+    </div>
+  );
+};
+
 export const LinkComponent = (props: LinkProps) => {
   return (
     <div