style(urls): Updated link style to round chips (#1010)

* style(urls): Updated link style to round chips

* restored RawLink changes

* feat:(rounded): introduced newchip varient rounded

* feat(rounded-link): added rounded link component

front/src/modules/ui/link/components/RawLink.tsx

@@ -20,11 +20,15 @@ const StyledClickable = styled.div`
 `;
 
 export function RawLink({ className, href, children, onClick }: OwnProps) {
+  console.log(children);
+
   return (
-    <StyledClickable className={className}>
-      <ReactLink target="_blank" onClick={onClick} to={href}>
-        {children}
-      </ReactLink>
-    </StyledClickable>
+    <div>
+      <StyledClickable className={className}>
+        <ReactLink target="_blank" onClick={onClick} to={href}>
+          {children}
+        </ReactLink>
+      </StyledClickable>
+    </div>
   );
 }

front/src/modules/ui/link/components/RoundedLink.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Link as ReactLink } from 'react-router-dom';
+import styled from '@emotion/styled';
+
+import { Chip } from '@/ui/chip/components/Chip';
+import { ChipSize, ChipVariant } from '@/ui/chip/components/Chip';
+
+type OwnProps = {
+  href: string;
+  children?: React.ReactNode;
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+};
+
+const StyledClickable = styled.div`
+  overflow: hidden;
+  white-space: nowrap;
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+`;
+
+export function RoundedLink({ children, href, onClick }: OwnProps) {
+  return (
+    <div>
+      {children !== '' ? (
+        <StyledClickable>
+          <ReactLink target="_blank" to={href} onClick={onClick}>
+            <Chip
+              label={`${children}`}
+              variant={ChipVariant.Rounded}
+              size={ChipSize.Large}
+            />
+          </ReactLink>
+        </StyledClickable>
+      ) : (
+        <></>
+      )}
+    </div>
+  );
+}

front/src/modules/ui/link/components/__stories__/RoundedLink.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+import { RoundedLink } from '../RoundedLink';
+
+const meta: Meta<typeof RoundedLink> = {
+  title: 'UI/Links/RoundedLink',
+  component: RoundedLink,
+  decorators: [ComponentWithRouterDecorator],
+  args: {
+    href: '/test',
+    children: 'Rounded chip',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RoundedLink>;
+
+export const Default: Story = {};