From 7028a8098e827a5bace4409f4ce33a98283e22de Mon Sep 17 00:00:00 2001
From: Shobhit Gupta <sguptamds94@gmail.com>
Date: Sun, 6 Aug 2023 00:20:59 +0530
Subject: [PATCH] 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 | 16 ++++++-
 .../components/FieldDisplayURL.tsx            |  4 +-
 .../url/components/URLTextInputDisplay.tsx    |  4 +-
 .../modules/ui/link/components/RawLink.tsx    | 14 ++++---
 .../ui/link/components/RoundedLink.tsx        | 42 +++++++++++++++++++
 .../__stories__/RoundedLink.stories.tsx       | 20 +++++++++
 6 files changed, 89 insertions(+), 11 deletions(-)
 create mode 100644 front/src/modules/ui/link/components/RoundedLink.tsx
 create mode 100644 front/src/modules/ui/link/components/__stories__/RoundedLink.stories.tsx

diff --git a/front/src/modules/ui/chip/components/Chip.tsx b/front/src/modules/ui/chip/components/Chip.tsx
index fca2c3144e..d98a72d432 100644
--- a/front/src/modules/ui/chip/components/Chip.tsx
+++ b/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 {
diff --git a/front/src/modules/ui/editable-field/components/FieldDisplayURL.tsx b/front/src/modules/ui/editable-field/components/FieldDisplayURL.tsx
index 333625d607..c2b9e7f022 100644
--- a/front/src/modules/ui/editable-field/components/FieldDisplayURL.tsx
+++ b/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>;
 }
diff --git a/front/src/modules/ui/input/url/components/URLTextInputDisplay.tsx b/front/src/modules/ui/input/url/components/URLTextInputDisplay.tsx
index 4511e43bc5..a5b9050659 100644
--- a/front/src/modules/ui/input/url/components/URLTextInputDisplay.tsx
+++ b/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 {
diff --git a/front/src/modules/ui/link/components/RawLink.tsx b/front/src/modules/ui/link/components/RawLink.tsx
index 6d0d7024e4..3e550b4656 100644
--- a/front/src/modules/ui/link/components/RawLink.tsx
+++ b/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>
   );
 }
diff --git a/front/src/modules/ui/link/components/RoundedLink.tsx b/front/src/modules/ui/link/components/RoundedLink.tsx
new file mode 100644
index 0000000000..9e5a251c73
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/front/src/modules/ui/link/components/__stories__/RoundedLink.stories.tsx b/front/src/modules/ui/link/components/__stories__/RoundedLink.stories.tsx
new file mode 100644
index 0000000000..516c674a2b
--- /dev/null
+++ b/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 = {};