feat: change link types

Orfium · Oct 31, 2023 · 69ca75a · 69ca75a
1 parent 5623c42
commit 69ca75a
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 3 deletions.
diff --git a/src/components/Link/Link.stories.mdx b/src/components/Link/Link.stories.mdx
@@ -144,7 +144,7 @@ You can achieve the integration with third-party routing libraries with the `com
         {() => {
           return (
             <Router>
-              <Link component={ReactRouterLink} to="/">
+              <Link component={ReactRouterLink} href="/">
                 Link
               </Link>
             </Router>

diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
@@ -25,11 +25,14 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
 
   const Component = component ?? 'a';
 
+  const componentProps = component ? { to: props.href } : {};
+
   return (
     <Component
       css={linkContainer({ placement, type, size, isDisabled })}
       ref={ref}
       data-testid={`${dataTestPrefixId}_link`}
+      {...componentProps}
       {...rest}
     >
       <span>{children}</span>

diff --git a/src/components/Link/Link.types.ts b/src/components/Link/Link.types.ts
@@ -6,8 +6,6 @@ import { AcceptedIconNames } from 'components/Icon';
 type LinkSizes = 1 | 2 | 3;
 
 export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
-  /** This prop might be needed in case of props forwarding using third-party libraries */
-  to?: any;
   /** The type of the Link in terms of style */
   type?: 'primary' | 'inverted';
   /** The placement of the link */

diff --git a/src/components/Link/__snapshots__/Link.stories.storyshot b/src/components/Link/__snapshots__/Link.stories.storyshot
@@ -1006,3 +1006,112 @@ exports[`Storyshots Design System/Link Style 1`] = `
   </div>
 </div>
 `;
+
+exports[`Storyshots Design System/Link Third-party Routing Library 1`] = `
+.emotion-0 {
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  position: relative;
+  padding: 0.25rem;
+}
+
+.emotion-1 {
+  margin: 1rem;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.emotion-3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 0.25rem;
+  color: #1552DD;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  border: 0.25rem solid rgba(84,94,255,0);
+  opacity: 1;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  pointer-events: default;
+  font-family: Roboto;
+  font-weight: 500;
+  line-height: 1.375rem;
+  font-size: 1rem;
+  letter-spacing: 0.00625rem;
+}
+
+.emotion-3:hover {
+  color: #1B214F;
+}
+
+.emotion-3:hover path {
+  fill: #1B214F;
+}
+
+.emotion-3:visited {
+  color: #6c28cc;
+}
+
+.emotion-3:visited path {
+  fill: #6c28cc;
+}
+
+.emotion-3:focus-visible {
+  border: 0.25rem solid #9347ff;
+}
+
+<div
+  className="emotion-0"
+>
+  <div
+    className="emotion-1"
+  >
+    <div
+      className="emotion-2"
+    >
+      <div
+        style={
+          Object {
+            "margin": 5,
+          }
+        }
+      >
+        <a
+          className="emotion-3"
+          data-testid="_link"
+          href="/"
+          onClick={[Function]}
+        >
+          <span>
+            Link
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;