feat(tertiary): icono custom (#604)

Author: Jonathangarrido

src/documentation/pages/Molecules/Buttons.tsx

@@ -1,6 +1,6 @@
 import { ListComponent, MyHeading, MyText, MyTittle, Code } from '@/documentation/components'
 import { BtnPrimary, BtnSecondary, BtnTertiary, BtnLink } from '@/molecules'
-import { Password } from '@/atoms/Icons'
+import { GoAhead, Password } from '@/atoms/Icons'
 
 export const Buttons = (): JSX.Element => {
   return (
@@ -96,6 +96,11 @@ export const Buttons = (): JSX.Element => {
 <BtnTertiary iconStatus='download'>download</BtnTertiary>
 <BtnTertiary iconStatus='noIcon'>noIcon</BtnTertiary>"
       />
+      <MyTittle>Iconos Custom</MyTittle>
+      <ListComponent>
+        <BtnTertiary iconCustom={<GoAhead />}>custom</BtnTertiary>
+      </ListComponent>
+      <Code text="<BtnTertiary iconCustom={<GoAhead />} >custom</BtnTertiary>" />
     </>
   )
 }

src/molecules/Buttons/BtnTertiary.tsx

@@ -26,6 +26,9 @@ export interface propsTertiaryBtn {
     | 'record'
     | 'download'
     | 'noIcon'
+
+  /** Se permite agregar un nuevo icono, para casos en que no sirvan los de la lista definida */
+  iconCustom?: JSX.Element
   children?: React.ReactNode
   rightIcon?: boolean
   withoutColor?: boolean
@@ -40,6 +43,7 @@ export interface propsTertiaryBtn {
 export function BtnTertiary({
   children,
   iconStatus = 'multimedia',
+  iconCustom,
   rightIcon,
   withoutColor = false,
   m = '0',
@@ -68,7 +72,10 @@ export function BtnTertiary({
     noIcon: <></>,
   }
 
-  const icon = btnIcons[iconStatus] ?? btnIcons.multimedia
+  let icon = btnIcons[iconStatus] ?? btnIcons.multimedia
+  if (iconCustom) {
+    icon = iconCustom
+  }
   const rIcon = rightIcon ? icon : undefined
   const lIcon = !rightIcon ? icon : undefined