From cdf28ac6df58b427b5d25660d384851d005df6f1 Mon Sep 17 00:00:00 2001
From: Javiera Munita <javiera.munita@eclass.cl>
Date: Thu, 12 Jun 2025 16:41:59 -0400
Subject: [PATCH 1/2] feat(PDYE-1284): botones calendario y ayuda

---
 src/atoms/Icons/HelpIcon.tsx                  | 10 +++++++
 .../NavBarButtons/CalendarButton.tsx          | 26 +++++++++++++++++++
 src/molecules/NavBarButtons/HelpButton.tsx    | 26 +++++++++++++++++++
 3 files changed, 62 insertions(+)
 create mode 100644 src/atoms/Icons/HelpIcon.tsx
 create mode 100644 src/molecules/NavBarButtons/CalendarButton.tsx
 create mode 100644 src/molecules/NavBarButtons/HelpButton.tsx

diff --git a/src/atoms/Icons/HelpIcon.tsx b/src/atoms/Icons/HelpIcon.tsx
new file mode 100644
index 00000000..6ee4f755
--- /dev/null
+++ b/src/atoms/Icons/HelpIcon.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>
+  )
+}
diff --git a/src/molecules/NavBarButtons/CalendarButton.tsx b/src/molecules/NavBarButtons/CalendarButton.tsx
new file mode 100644
index 00000000..4982ce30
--- /dev/null
+++ b/src/molecules/NavBarButtons/CalendarButton.tsx
@@ -0,0 +1,26 @@
+import { Box } from '@chakra-ui/react'
+
+import { CalendarButtonIcon } from '@/organisms/Calendar/Dropdown/CalendarDropdown/Icons/CalendarButtonIcon'
+import { vars } from '@theme'
+
+export const CalendarButton = (onClick: any): JSX.Element => {
+  return (
+    <Box
+      as="button"
+      alignItems="center"
+      bg={vars('colors-main-blueGrey')}
+      borderRadius="100%"
+      border="1px solid transparent"
+      display="flex"
+      height="30px"
+      justifyContent="center"
+      width="30px"
+      _hover={{
+        background: 'rgba(96, 121, 142, 0.8)',
+      }}
+      onClick={onClick}
+    >
+      <CalendarButtonIcon />
+    </Box>
+  )
+}
diff --git a/src/molecules/NavBarButtons/HelpButton.tsx b/src/molecules/NavBarButtons/HelpButton.tsx
new file mode 100644
index 00000000..fb56ceb3
--- /dev/null
+++ b/src/molecules/NavBarButtons/HelpButton.tsx
@@ -0,0 +1,26 @@
+import { Box } from '@chakra-ui/react'
+
+import { vars } from '@theme'
+import { HelpIcon } from '@/atoms/Icons/HelpIcon'
+
+export const HelpButton = (onClick: any): JSX.Element => {
+  return (
+    <Box
+      as="button"
+      alignItems="center"
+      bg={vars('colors-main-blueGrey')}
+      borderRadius="100%"
+      border="1px solid transparent"
+      display="flex"
+      height="30px"
+      justifyContent="center"
+      width="30px"
+      _hover={{
+        background: 'rgba(96, 121, 142, 0.8)',
+      }}
+      onClick={onClick}
+    >
+      <HelpIcon />
+    </Box>
+  )
+}

From 50082fc823c228e0c93f09f746a50f0f299df535 Mon Sep 17 00:00:00 2001
From: Javiera Munita <javiera.munita@eclass.cl>
Date: Mon, 16 Jun 2025 15:26:23 -0400
Subject: [PATCH 2/2] fix(PDYE-1284): componente para botones barra de
 navegacion

---
 src/index.ts                                  |   1 +
 .../NavBarButtons/CalendarButton.tsx          |  26 -----
 src/molecules/NavBarButtons/HelpButton.tsx    |  26 -----
 .../Icons/CalendarButtonIcon.tsx              |   0
 .../NavBarButtons}/Icons/HelpIcon.tsx         |   0
 src/molecules/NavBarButtons/NavBarButton.tsx  | 100 ++++++++++++++++++
 src/molecules/index.ts                        |   1 +
 .../Components/GoToCalendar.tsx               |   2 +-
 8 files changed, 103 insertions(+), 53 deletions(-)
 delete mode 100644 src/molecules/NavBarButtons/CalendarButton.tsx
 delete mode 100644 src/molecules/NavBarButtons/HelpButton.tsx
 rename src/{organisms/Calendar/Dropdown/CalendarDropdown => molecules/NavBarButtons}/Icons/CalendarButtonIcon.tsx (100%)
 rename src/{atoms => molecules/NavBarButtons}/Icons/HelpIcon.tsx (100%)
 create mode 100644 src/molecules/NavBarButtons/NavBarButton.tsx

diff --git a/src/index.ts b/src/index.ts
index 1a75fa24..4a4c8cd0 100644
--- a/src/index.ts
+++ b/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'
diff --git a/src/molecules/NavBarButtons/CalendarButton.tsx b/src/molecules/NavBarButtons/CalendarButton.tsx
deleted file mode 100644
index 4982ce30..00000000
--- a/src/molecules/NavBarButtons/CalendarButton.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Box } from '@chakra-ui/react'
-
-import { CalendarButtonIcon } from '@/organisms/Calendar/Dropdown/CalendarDropdown/Icons/CalendarButtonIcon'
-import { vars } from '@theme'
-
-export const CalendarButton = (onClick: any): JSX.Element => {
-  return (
-    <Box
-      as="button"
-      alignItems="center"
-      bg={vars('colors-main-blueGrey')}
-      borderRadius="100%"
-      border="1px solid transparent"
-      display="flex"
-      height="30px"
-      justifyContent="center"
-      width="30px"
-      _hover={{
-        background: 'rgba(96, 121, 142, 0.8)',
-      }}
-      onClick={onClick}
-    >
-      <CalendarButtonIcon />
-    </Box>
-  )
-}
diff --git a/src/molecules/NavBarButtons/HelpButton.tsx b/src/molecules/NavBarButtons/HelpButton.tsx
deleted file mode 100644
index fb56ceb3..00000000
--- a/src/molecules/NavBarButtons/HelpButton.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Box } from '@chakra-ui/react'
-
-import { vars } from '@theme'
-import { HelpIcon } from '@/atoms/Icons/HelpIcon'
-
-export const HelpButton = (onClick: any): JSX.Element => {
-  return (
-    <Box
-      as="button"
-      alignItems="center"
-      bg={vars('colors-main-blueGrey')}
-      borderRadius="100%"
-      border="1px solid transparent"
-      display="flex"
-      height="30px"
-      justifyContent="center"
-      width="30px"
-      _hover={{
-        background: 'rgba(96, 121, 142, 0.8)',
-      }}
-      onClick={onClick}
-    >
-      <HelpIcon />
-    </Box>
-  )
-}
diff --git a/src/organisms/Calendar/Dropdown/CalendarDropdown/Icons/CalendarButtonIcon.tsx b/src/molecules/NavBarButtons/Icons/CalendarButtonIcon.tsx
similarity index 100%
rename from src/organisms/Calendar/Dropdown/CalendarDropdown/Icons/CalendarButtonIcon.tsx
rename to src/molecules/NavBarButtons/Icons/CalendarButtonIcon.tsx
diff --git a/src/atoms/Icons/HelpIcon.tsx b/src/molecules/NavBarButtons/Icons/HelpIcon.tsx
similarity index 100%
rename from src/atoms/Icons/HelpIcon.tsx
rename to src/molecules/NavBarButtons/Icons/HelpIcon.tsx
diff --git a/src/molecules/NavBarButtons/NavBarButton.tsx b/src/molecules/NavBarButtons/NavBarButton.tsx
new file mode 100644
index 00000000..839c8ea6
--- /dev/null
+++ b/src/molecules/NavBarButtons/NavBarButton.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>
+  )
+}
diff --git a/src/molecules/index.ts b/src/molecules/index.ts
index 41fed3f2..3d36d9a8 100644
--- a/src/molecules/index.ts
+++ b/src/molecules/index.ts
@@ -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'
diff --git a/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx b/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx
index 1ab2f42c..46f3b557 100644
--- a/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx
+++ b/src/organisms/Calendar/Dropdown/CalendarDropdown/Components/GoToCalendar.tsx
@@ -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 {