Merge pull request #12 from selsa-inube/cmarin/ids1822/add-props-hand…

…le-target-and-rel

Add `target` and `rel` Attributes to `<Link />` Component

src/Link/Link.stories.tsx

@@ -1,19 +1,19 @@
-import { Link, ILink } from ".";
 import { BrowserRouter } from "react-router-dom";
-import { props, parameters } from "./props";
+import { Link, ILink } from ".";
+import { parameters, props } from "./props";
 
 const story = {
-  title: "navigation/Link",
-  component: Link,
-  parameters,
   argTypes: props,
+  component: Link,
   decorators: [
     (Story: React.ElementType) => (
       <BrowserRouter>
         <Story />
       </BrowserRouter>
     ),
   ],
+  parameters,
+  title: "navigation/Link",
 };
 
 const Default = (args: ILink) => {
@@ -22,9 +22,11 @@ const Default = (args: ILink) => {
 
 Default.args = {
   children: "Link",
+  path: "/",
+  rel: "noopener noreferrer",
   size: "large",
+  target: "_self",
   type: "body",
-  path: "/",
 };
 
 export { Default };

src/Link/index.tsx

@@ -1,16 +1,19 @@
+import { ILinkSize, ILinkType } from "./props";
 import { StyledLink } from "./styles";
-import { ILinkType, ILinkSize } from "./props";
+
 interface ILink {
   children: React.ReactNode;
+  path: string;
+  rel?: string;
   size?: ILinkSize;
+  target?: string;
   type?: ILinkType;
-  path: string;
 }
 
 const Link = (props: ILink) => {
-  const { children, size = "large", type = "body", path } = props;
+  const { children, path, rel, size = "large", target, type = "body" } = props;
   return (
-    <StyledLink to={path} $size={size} $type={type}>
+    <StyledLink to={path} $size={size} $type={type} target={target} rel={rel}>
       {children}
     </StyledLink>
   );

src/Link/props.ts

@@ -1,7 +1,7 @@
-const types = ["body", "display", "label", "title", "headline"] as const;
-
 const sizes = ["large", "medium", "small"] as const;
 
+const types = ["body", "display", "headline", "label", "title"] as const;
+
 type ILinkSize = (typeof sizes)[number];
 
 type ILinkType = (typeof types)[number];
@@ -16,32 +16,40 @@ const parameters = {
 };
 
 const props = {
-  type: {
-    options: types,
-    control: { type: "select" },
+  children: {
+    control: { type: "text" },
+    description: "The text to be displayed",
+  },
+  hover: {
+    description: "Indicates when the mouse passes over the text",
+  },
+  path: {
     description:
-      "This prop is used to select one of the typography roles defined in the Foundations.",
-    table: {
-      defaultValue: { summary: "bodyLarge" },
-    },
+      "is the path where the MenuLink is going to navigate and is required.",
+  },
+  rel: {
+    description:
+      "Specifies the relationship between the current and linked documents.",
   },
   size: {
     options: sizes,
     control: { type: "select" },
     description:
       "This prop is used to select one of the typography roles defined in the Foundations.",
   },
-  children: {
-    control: { type: "text" },
-    description: "The text to be displayed",
+  target: {
+    description: "Specifies where to open the linked document.",
   },
-  path: {
+  type: {
+    options: types,
+    control: { type: "select" },
     description:
-      "is the path where the MenuLink is going to navigate and is required.",
-  },
-  hover: {
-    description: "Indicates when the mouse passes over the text",
+      "This prop is used to select one of the typography roles defined in the Foundations.",
+    table: {
+      defaultValue: { summary: "bodyLarge" },
+    },
   },
 };
-export { props, parameters };
+
+export { parameters, props };
 export type { ILinkSize, ILinkType };