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/chip/components/Chip.tsx

@@ -17,6 +17,7 @@ export enum ChipVariant {
   Highlighted = 'highlighted',
   Regular = 'regular',
   Transparent = 'transparent',
+  Rounded = 'rounded',
 }
 
 type OwnProps = {
@@ -38,8 +39,18 @@ const StyledContainer = styled.div<Partial<OwnProps>>`
   background-color: ${({ theme, variant }) =>
     variant === ChipVariant.Highlighted
       ? theme.background.transparent.light
+      : variant === ChipVariant.Rounded
+      ? theme.background.transparent.lighter
       : 'transparent'};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
+  border-color: ${({ theme, variant }) =>
+    variant === ChipVariant.Rounded ? theme.border.color.medium : 'none'};
+  border-radius: ${({ theme, variant }) =>
+    variant === ChipVariant.Rounded ? '50px' : theme.border.radius.sm};
+  border-style: ${({ variant }) =>
+    variant === ChipVariant.Rounded ? 'solid' : 'none'};
+  border-width: ${({ variant }) =>
+    variant === ChipVariant.Rounded ? '1px' : '0px'};
+
   color: ${({ theme, disabled, accent }) =>
     disabled
       ? theme.font.color.light
@@ -59,7 +70,8 @@ const StyledContainer = styled.div<Partial<OwnProps>>`
   max-width: ${({ maxWidth }) => (maxWidth ? maxWidth : '200px')};
 
   overflow: hidden;
-  padding: ${({ theme }) => theme.spacing(1)};
+  padding: ${({ theme, variant }) =>
+    variant === ChipVariant.Rounded ? '3px 8px' : theme.spacing(1)};
   user-select: none;
 
   :hover {

front/src/modules/ui/editable-field/components/FieldDisplayURL.tsx

@@ -1,5 +1,5 @@
-import { RawLink } from '@/ui/link/components/RawLink';
+import { RoundedLink } from '@/ui/link/components/RoundedLink';
 
 export function FieldDisplayURL({ URL }: { URL: string | undefined }) {
-  return <RawLink href={URL ? 'https://' + URL : ''}>{URL}</RawLink>;
+  return <RoundedLink href={URL ? 'https://' + URL : ''}>{URL}</RoundedLink>;
 }

front/src/modules/ui/input/url/components/URLTextInputDisplay.tsx

@@ -1,9 +1,9 @@
 import { MouseEvent } from 'react';
 import styled from '@emotion/styled';
 
-import { RawLink } from '@/ui/link/components/RawLink';
+import { RoundedLink } from '@/ui/link/components/RoundedLink';
 
-const StyledRawLink = styled(RawLink)`
+const StyledRawLink = styled(RoundedLink)`
   overflow: hidden;
 
   a {

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 (
+    <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 = {};