fix(molecule): btn tertiary icon (#632)

Author: Jonathangarrido

src/Playground.tsx

@@ -1,11 +1,38 @@
 import { Box, Heading } from '@chakra-ui/react'
+import { BtnTertiary } from './molecules'
 
 export function Playground(): JSX.Element {
   return (
     <Box p="5rem 1rem">
       <Heading as="h1" size="sm">
         eClass Design System Playground
       </Heading>
+
+      <BtnTertiary
+        iconCustom={
+          <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none">
+            <path
+              fill="#28A745"
+              fillRule="evenodd"
+              d="M0 8c0-4.4 3.6-8 8-8s8 3.6 8 8-3.6 8-8 8-8-3.6-8-8Zm3.6 0L7 11.4 12.4 6 11 4.6l-4 4-2-2L3.6 8Z"
+              clipRule="evenodd"
+            />
+          </svg>
+        }
+      >
+        ahead
+      </BtnTertiary>
+      <BtnTertiary iconStatus="ahead">ahead</BtnTertiary>
+      <BtnTertiary iconStatus="answer">answer</BtnTertiary>
+      <BtnTertiary iconStatus="back">back</BtnTertiary>
+      <BtnTertiary iconStatus="edit">edit</BtnTertiary>
+      <BtnTertiary iconStatus="delete">delete</BtnTertiary>
+      <BtnTertiary iconStatus="more">more</BtnTertiary>
+      <BtnTertiary iconStatus="password">password</BtnTertiary>
+      <BtnTertiary iconStatus="multimedia">multimedia</BtnTertiary>
+      <BtnTertiary iconStatus="record">record</BtnTertiary>
+      <BtnTertiary iconStatus="download">download</BtnTertiary>
+      <BtnTertiary iconStatus="noIcon">noIcon</BtnTertiary>
     </Box>
   )
 }

src/main.tsx

@@ -2,17 +2,17 @@ import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { ChakraProvider } from '@chakra-ui/react'
 
-import { Documentation } from './documentation'
-// import { Playground } from './Playground'
+// import { Documentation } from './documentation'
+import { Playground } from './Playground'
 
 import { theme } from './theme'
 
 if (import.meta.env.VITE_REACT_DEPLOY_DOCUMENTATION === 'DOCUMENTATION') {
   ReactDOM.render(
     <React.StrictMode>
       <ChakraProvider theme={theme}>
-        {/* <Playground /> */}
-        <Documentation />
+        <Playground />
+        {/* <Documentation /> */}
       </ChakraProvider>
     </React.StrictMode>,
     document.getElementById('root')

src/molecules/Buttons/BtnTertiary.tsx

@@ -74,10 +74,14 @@ export function BtnTertiary({
     noIcon: <></>,
   }
 
-  let icon = btnIcons[iconStatus] ?? btnIcons.multimedia
+  let icon
+  if (btnIcons[iconStatus] && iconStatus !== 'noIcon') {
+    icon = btnIcons[iconStatus]
+  }
   if (iconCustom) {
     icon = iconCustom
   }
+
   const rIcon = rightIcon ? icon : undefined
   const lIcon = !rightIcon ? icon : undefined
 
@@ -95,6 +99,7 @@ export function BtnTertiary({
       lineHeight="16px"
       textDecorationLine="underline"
       borderRadius="12px"
+      gap="0.5rem"
       paddingTop={vars('space-xxs')}
       paddingBottom={vars('space-xxs')}
       paddingLeft={vars('space-xs')}
@@ -120,21 +125,8 @@ export function BtnTertiary({
         bg: 'transparent',
       }}
       sx={{
-        '&:hover': {
-          'svg path': {
-            fill: `${blue}`,
-          },
-          '@media (hover: none)': {
-            color: `${gray}`,
-            'svg path': {
-              fill: colorIcon,
-            },
-          },
-        },
-        '&:focus': {
-          'svg path': {
-            fill: activeWhenPress ? `${blue}` : '',
-          },
+        '>span': {
+          mr: 0,
         },
       }}
     >