feat(tooltip): agregamos booleano de open a tooltip y pressed a btntertiary (#612)

Author: josefin-ferrada

src/documentation/pages/Molecules/Buttons.tsx

@@ -101,6 +101,17 @@ export const Buttons = (): JSX.Element => {
         <BtnTertiary iconCustom={<GoAhead />}>custom</BtnTertiary>
       </ListComponent>
       <Code text="<BtnTertiary iconCustom={<GoAhead />} >custom</BtnTertiary>" />
+      <MyTittle>Activo al presionar</MyTittle>
+      <MyText>
+        El <code>BtnTertiary</code> puede tener una propiedad <code>activeWhenPress</code> booleano
+        el cual indica que al presionar o mantener focus queda azul brillante o activo:
+      </MyText>
+      <ListComponent>
+        <BtnTertiary activeWhenPress iconCustom={<GoAhead />}>
+          custom
+        </BtnTertiary>
+      </ListComponent>
+      <Code text="<BtnTertiary activeWhenPress iconCustom={<GoAhead />} >custom</BtnTertiary>" />
     </>
   )
 }

src/documentation/pages/Molecules/Tooltip.tsx

@@ -1,8 +1,11 @@
 import { ListComponent, MyHeading, MyText, MyTittle, Code } from '@/documentation/components'
 import { NewTooltip } from '../../../molecules/Tooltip/NewTooltip'
 import { BtnPrimary } from '@/molecules'
+import { useDisclosure } from '@chakra-ui/react'
 
 export const ViewTooltip = (): JSX.Element => {
+  const { isOpen, onToggle } = useDisclosure()
+
   return (
     <>
       <MyHeading>Tooltip</MyHeading>
@@ -60,6 +63,24 @@ export const ViewTooltip = (): JSX.Element => {
   <BtnPrimary>Left</BtnPrimary>
 </NewTooltip>`}
       />
+      <MyTittle>Activar al Click</MyTittle>
+      <MyText>
+        El componente tiene un prop booleano <code>isOpen</code> que se utiliza para mantener
+        abierto o cerrado el tooltip en caso de utilizar <code>onClick</code>, usando el hook{' '}
+        <code>useDisclosure()</code>
+      </MyText>
+      <ListComponent>
+        <NewTooltip label="Default" isOpen={isOpen}>
+          <BtnPrimary onClick={onToggle}>Presionar para mostrar</BtnPrimary>
+        </NewTooltip>
+      </ListComponent>
+      <Code
+        text={`
+        const { isOpen, onToggle } = useDisclosure()
+        <NewTooltip label="Default" isOpen={isOpen}>
+          <BtnPrimary onClick={onToggle}>Presionar para mostrar</BtnPrimary>
+        </NewTooltip>`}
+      />
     </>
   )
 }

src/molecules/Buttons/BtnTertiary.tsx

@@ -34,7 +34,7 @@ export interface propsTertiaryBtn {
   type?: 'button' | 'submit' | 'reset'
   tabIndex?: number
   id?: string
-
+  activeWhenPress?: boolean
   onClick?: (e: React.MouseEvent<HTMLElement>) => void
 }
 
@@ -48,7 +48,7 @@ export function BtnTertiary({
   type = 'button',
   tabIndex,
   id,
-
+  activeWhenPress = false,
   onClick,
 }: propsTertiaryBtn): JSX.Element {
   const gray = vars('colors-neutral-gray')
@@ -107,6 +107,7 @@ export function BtnTertiary({
         boxShadow: `inset 0 0 0 2px ${blue}, inset 0 0 0 4px ${white}`,
       }}
       _focus={{
+        color: activeWhenPress ? `${blue}` : 'inherit',
         boxShadow: 'none',
       }}
       _active={{
@@ -124,6 +125,11 @@ export function BtnTertiary({
             },
           },
         },
+        '&:focus': {
+          'svg path': {
+            fill: activeWhenPress ? `${blue}` : '',
+          },
+        },
       }}
     >
       {children}

src/molecules/Tooltip/NewTooltip.tsx

@@ -9,6 +9,7 @@ interface TooltipProps {
   m?: string
   maxWidth?: string
   placement?: PlacementWithLogical
+  isOpen?: boolean | undefined
 }
 
 export const NewTooltip: FC<TooltipProps> = ({
@@ -19,9 +20,11 @@ export const NewTooltip: FC<TooltipProps> = ({
   m,
   maxWidth = '200px',
   placement = 'bottom',
+  isOpen,
 }) => {
   return (
     <Tooltip
+      isOpen={isOpen}
       sx={{
         bg: vars('colors-neutral-darkCharcoal'),
         borderRadius: '10px',