feat(molecules): btn-link puede ser un elemento a (#614)

Author: Jonathangarrido

src/documentation/pages/Molecules/Buttons.tsx

@@ -112,6 +112,25 @@ export const Buttons = (): JSX.Element => {
         </BtnTertiary>
       </ListComponent>
       <Code text="<BtnTertiary activeWhenPress iconCustom={<GoAhead />} >custom</BtnTertiary>" />
+
+      <MyTittle>BtnLink</MyTittle>
+      <MyText>
+        El <code>BtnLink</code> tiene la opción de ser un elemento (<code>button</code>) o un
+        elemento (<code>a</code>), si la elección es esto último es necesario pasarle la url que
+        desea abrir con (<code>href</code>), por defecto en una pestaña nueva.
+      </MyText>
+      <ListComponent>
+        <BtnLink>Button</BtnLink>
+        <BtnLink as="a" href="https://ui-kit.eclass.com/">
+          Enlace ui-kit
+        </BtnLink>
+      </ListComponent>
+      <Code text="<BtnLink>Button</BtnLink>" />
+      <Code
+        text={`<BtnLink as="a" href="https://ui-kit.eclass.com/">
+  Enlace ui-kit
+</BtnLink>`}
+      />
     </>
   )
 }

src/molecules/Buttons/BtnLink.tsx

@@ -4,14 +4,33 @@ import { Box } from '@chakra-ui/react'
 export interface props {
   children?: React.ReactNode
   m?: string
+  as?: 'button' | 'a'
   onClick?: (e: React.MouseEvent<HTMLElement>) => void
   id?: string
+  href?: string
 }
 
-export function BtnLink({ children, m = '0', onClick, id }: props): JSX.Element {
+export function BtnLink({
+  children,
+  m = '0',
+  onClick,
+  id,
+  as = 'button',
+  href = '',
+}: props): JSX.Element {
+  const typeButton = {
+    button: {
+      onClick,
+    },
+    a: {
+      href,
+      target: '_blank',
+    },
+  }
+
   return (
     <Box
-      as="button"
+      as={as}
       id={id}
       backgroundColor="transparent"
       borderStyle="none"
@@ -26,11 +45,11 @@ export function BtnLink({ children, m = '0', onClick, id }: props): JSX.Element
       textDecorationLine="underline"
       color={vars('colors-main-deepSkyBlue')}
       m={m}
-      onClick={onClick}
       _hover={{
         color: vars('colors-neutral-darkCharcoal'),
         cursor: 'pointer',
       }}
+      {...typeButton[as]}
     >
       {children}
     </Box>