import React from "react" ; import type { Story } from "@storybook/react" ; import { Link , LinkProps , Icon , GetInfoIcon } from "@okta/odyssey-react" ; import { Link as Source } from "../../../../odyssey-react/src" ; import LinkMdx from "./Link.mdx" ; export default { title : `Components/Link` , component : Source , parameters : { docs : { page : LinkMdx } } } ; const Template = ( { children , variant , href , target , rel , icon , } ) => { if ( typeof icon === "string" ) { icon = < Icon name = { icon } />; } return ( < Link href = { href } target = { target } rel = { rel } variant = { variant } icon = { icon } > { children } < /Link>); } ; export const Default = Template . bind ( { } ) ; Default . args = { href : "#anchor" , children : "Anchor link" } ; export const Secondary = Template . bind ( { } ) ; Secondary . args = { href : "#anchor" , variant : "secondary" , children : "Secondary link" } ; export const WithIcon = Template . bind ( { } ) ; WithIcon . args = { href : "#anchor" , children : "Secondary link" , icon : < GetInfoIcon /> } ; export const External = Template . bind ( { } ) ; External . args = { href : "https://www.okta.com" , children : "Visit okta.com" , rel : "noopener" , target : "_blank" } ;