fix: notificacion en header (#220)

* fix: notificacion en header * fix: tamaño 7px * fix: alineacion de card horizontal * fix: se agrega download en enlace de descarga
gcba · Jan 16, 2024 · 5c68697 · 5c68697
1 parent 2465e99
commit 5c68697
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 16 deletions.
diff --git a/src/components/Link/Link.stories.tsx b/src/components/Link/Link.stories.tsx
@@ -84,7 +84,7 @@ export const Descarga = (): JSX.Element => {
     <>
       <p>
         Nuestro sistema de{' '}
-        <a className="download" href="#" target="_blank" rel="noreferrer">
+        <a className="download" href="#" target="_blank" rel="noreferrer" download>
           enlace de descarga
         </a>{' '}
         brinda un conjunto de herramientas y componentes colaborativos y accesibles que define procesos para que los
@@ -93,7 +93,7 @@ export const Descarga = (): JSX.Element => {
       <p>
         De esta forma, ayudamos a crear servicios consistentes para mejorar la experiencia digital de vecinos y vecinas.
       </p>
-      <a className="btn btn-secondary btn-sm download-link" href="#" target="_blank" rel="noreferrer">
+      <a className="btn btn-secondary btn-sm download-link" href="#" target="_blank" rel="noreferrer" download>
         Descargar
       </a>
 
@@ -103,7 +103,7 @@ export const Descarga = (): JSX.Element => {
       <div className="storybook__container__link">
         <p>
           Nuestro sistema de{' '}
-          <a className="download link-white" href="#" target="_blank" rel="noreferrer">
+          <a className="download link-white" href="#" target="_blank" rel="noreferrer" download>
             enlace de descarga
           </a>{' '}
           brinda un conjunto de herramientas y componentes colaborativos y accesibles que define procesos para que los

diff --git a/src/organisms/Header/index.tsx b/src/organisms/Header/index.tsx
@@ -79,16 +79,18 @@ export const LOGO = (
   </a>
 );
 
-export const BUTTON_TOGGLER = (
-  <button
-    className="navbar-toggler"
-    type="button"
-    data-toggle="collapse"
-    data-target="#navbarContent"
-    aria-controls="navbarContent"
-    aria-expanded="false"
-    aria-label="Menú"></button>
-);
+export const ButtonToggler = (notifications: boolean): JSX.Element => {
+  return (
+    <button
+      className={`navbar-toggler ${notifications ? 'notification' : ''}`}
+      type="button"
+      data-toggle="collapse"
+      data-target="#navbarContent"
+      aria-controls="navbarContent"
+      aria-expanded="false"
+      aria-label="Menú"></button>
+  );
+};
 
 export const SEARCH = (
   <div className="navbar-search">
@@ -127,7 +129,7 @@ export const USER = (
     <div className="dropdown">
       <button
         type="button"
-        className="btn btn-dropdown btn-dropdown-lg btn-dropdown-border dropdown-toggle"
+        className="btn btn-dropdown btn-dropdown-lg btn-dropdown-border dropdown-toggle notification"
         data-toggle="dropdown"
         aria-haspopup="true"
         aria-expanded="false">
@@ -249,7 +251,7 @@ export const Header: React.FC<HeaderProps> = ({ hasLogin, hasProfile, hasSearch,
         {hasLogin && <Login isMobile={true}></Login>}
         {(hasSearch || hasLogin || hasProfile || sections) && (
           <>
-            {shouldShowButtonToggler && BUTTON_TOGGLER}
+            {shouldShowButtonToggler && ButtonToggler(hasProfile ? true : false)}
             <div className="collapse navbar-collapse" id="navbarContent">
               {shouldShowNavbarContent && (
                 <div className="navbar-content">

diff --git a/src/scss/components/_cards.scss b/src/scss/components/_cards.scss
@@ -363,7 +363,7 @@ $accordion-bg-white: $white;
     .card-body {
       display: flex;
       flex-direction: column;
-      justify-content: center;
+      justify-content: flex-start;
       padding: $card-spacer;
     }
 

diff --git a/src/scss/variables/_miscellaneous.scss b/src/scss/variables/_miscellaneous.scss
@@ -67,3 +67,20 @@ $focus-box-shadow: 0 0 0 $focus-width $focus-color;
 
   @return rgba($red, $green, $blue, 0.9999);
 }
+
+
+//Notificaciones - HEADER
+.notification {
+  position: relative;
+  &[aria-expanded = false]:before {
+    content: "" !important;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    background-color: $danger;
+    border-radius: 50%;
+  }
+}