Feat/botones barra navegacion (#726)

* fix(PDYE-1284): componente para botones barra de navegacion

---------

Co-authored-by: Javiera Munita <javiera.munita@eclass.cl>

Author: JaviMunita

src/index.ts

@@ -11,6 +11,7 @@ export { BtnPrimary } from './molecules/Buttons/BtnPrimary'
 export { BtnSecondary } from './molecules/Buttons/BtnSecondary'
 export { BtnTertiary } from './molecules/Buttons/BtnTertiary'
 export { BtnLink } from './molecules/Buttons/BtnLink'
+export { NavBarButton } from './molecules/NavBarButtons/NavBarButton'
 export { NewTooltip } from './molecules/Tooltip/NewTooltip'
 export { UserWay } from './molecules/UserWay/UserWay'
 export { UserWayCookie } from './molecules/UserWay/UserWayCookie'

src/organisms/Calendar/Dropdown/CalendarDropdown/Icons/CalendarButtonIcon.tsx renamed to src/molecules/NavBarButtons/Icons/CalendarButtonIcon.tsx

@@ -0,0 +1,10 @@
+export const HelpIcon = (): JSX.Element => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM8 13C7.448 13 7 12.552 7 12C7 11.448 7.448 11 8 11C8.552 11 9 11.448 9 12C9 12.552 8.552 13 8 13ZM9.623 8.092C9.126 8.519 9 8.663 9 9C9 9.553 8.552 10 8 10C7.448 10 7 9.553 7 9C7 7.706 7.795 7.024 8.322 6.573C8.819 6.148 8.945 6.003 8.945 5.667C8.945 5.484 8.945 5 8.001 5C7.565 5.024 7.1 5.224 6.743 5.561C6.342 5.939 5.708 5.92 5.329 5.52C4.95 5.118 4.968 4.485 5.37 4.106C6.072 3.445 6.987 3.052 7.949 3.002H7.952C9.764 3.002 10.945 4.073 10.945 5.668C10.945 6.961 10.15 7.643 9.624 8.093L9.623 8.092Z"
+        fill="white"
+      />
+    </svg>
+  )
+}

src/molecules/NavBarButtons/Icons/HelpIcon.tsx

@@ -0,0 +1,100 @@
+import { Box } from '@chakra-ui/react'
+
+import { vars } from '@theme'
+import { HelpIcon } from '@/molecules/NavBarButtons/Icons/HelpIcon'
+import { CalendarButtonIcon } from './Icons/CalendarButtonIcon'
+import { Accessibility } from '@/atoms/Icons/Accessibility'
+
+export interface ButtonProps {
+  buttonName?: string
+  onlyLink?: boolean
+  onClick: () => void
+  type: 'calendar' | 'help' | 'accessibility'
+}
+
+export const NavBarButton = ({ buttonName, onlyLink, onClick, type }: ButtonProps): JSX.Element => {
+  const buttonType = {
+    accessibility: {
+      icon: <Accessibility />,
+      text: buttonName ?? 'ACCESIBILIDAD',
+    },
+    calendar: {
+      icon: <CalendarButtonIcon />,
+      text: buttonName ?? 'CALENDARIO',
+    },
+    help: {
+      icon: <HelpIcon />,
+      text: buttonName ?? 'AYUDA',
+    },
+  }
+
+  const triggerWidget = (): void => {
+    const buttonB = document.getElementById('userWayTrigger')
+    if (buttonB?.click) {
+      buttonB.click() // Hace clic en el botón del archivo index.html
+    }
+  }
+
+  const activeBg = vars('colors-main-deepSkyBlue') ?? '#0189FF'
+  const hoverBg = 'rgba(96, 121, 142, 0.8)'
+  const isAccessibility = type === 'accessibility'
+
+  return (
+    <Box
+      as="button"
+      id={isAccessibility ? 'UserWayButton' : ''}
+      onClick={isAccessibility ? triggerWidget : onClick}
+      sx={{
+        display: 'flex',
+        gap: '8px',
+        h: '30px',
+        maxH: '30px',
+
+        _hover: {
+          '.icon': {
+            bg: hoverBg,
+          },
+          '.text': {
+            color: vars('colors-neutral-white'),
+          },
+        },
+
+        _active: {
+          '.icon': {
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+            bg: onlyLink || isAccessibility ? hoverBg : activeBg,
+          },
+          '.text': {
+            color: vars('colors-neutral-white'),
+          },
+        },
+
+        '.icon': {
+          alignItems: 'center',
+          bg: vars('colors-main-blueGrey'),
+          borderRadius: '100%',
+          border: '1px solid transparent',
+          display: 'flex',
+          height: '30px',
+          justifyContent: 'center',
+          type: 'button',
+          role: 'button',
+          width: '30px',
+        },
+
+        '.text': {
+          alignContent: 'center',
+          fontSize: '12px',
+          fontWeight: '500',
+          forntFamily: 'Roboto',
+          color: vars('colors-neutral-silverSand'),
+        },
+      }}
+    >
+      <Box className="icon">{buttonType[type].icon}</Box>
+      <Box as="span" className="text">
+        {buttonType[type].text}
+      </Box>
+    </Box>
+  )
+}

src/molecules/NavBarButtons/NavBarButton.tsx

@@ -3,6 +3,7 @@ export { BtnPrimary } from './Buttons/BtnPrimary'
 export { BtnSecondary } from './Buttons/BtnSecondary'
 export { BtnTertiary } from './Buttons/BtnTertiary'
 export { BtnLink } from './Buttons/BtnLink'
+export { NavBarButton } from './NavBarButtons/NavBarButton'
 export { NewTooltip } from './Tooltip/NewTooltip'
 export { UserWay } from './UserWay/UserWay'
 export { UserWayCookie } from './UserWay/UserWayCookie'

src/molecules/index.ts

@@ -1,7 +1,7 @@
 import { MenuButton } from '@chakra-ui/react'
 import { vars } from '@theme'
 
-import { CalendarButtonIcon } from '../Icons/CalendarButtonIcon'
+import { CalendarButtonIcon } from '../../../../../molecules/NavBarButtons/Icons/CalendarButtonIcon'
 import { NewTooltip } from '@/molecules'
 
 interface IGoToCalendar {