fix: v1.55.1 (#205)

* fix: se modifica texto de skip-link de header * fix: correccion de tamaño de iconos en lista seleccionable de collapsables * fix: se elimina la opcion de 'nueva tarjeta de credito' en colapsable con lista seleccionable * fix: estilos de header en estados de boton de dropdown de perfil * fix: se mueve el borde amarillo del footer al indicador * fix: se agrega min-width en spinner * fix: modificacion de text-decoration-thickness en enlaces de footer * fix: correccion de url en footer * fix: modificacion de const en Bloque * fix: colapsable --------- Co-authored-by: davisLjr <davisprojectjr@gmail.com>
gcba · Nov 30, 2023 · 3a67d7c · 3a67d7c
1 parent 1ef6a32
commit 3a67d7c
Show file tree

Hide file tree

Showing 9 changed files with 153 additions and 246 deletions.
diff --git a/src/components/Block/Block.stories.tsx b/src/components/Block/Block.stories.tsx
@@ -36,17 +36,17 @@ const PROGRESS_BAR_BLOCK = {
   width: 25
 };
 
-export const ButtonBlockTitle = (): JSX.Element => {
+export const BlockTitle = (): JSX.Element => {
   return (
     <div className="storybook__container-block">
       <Block title="Iniciá el trámite y completá todos los pasos" button={BUTTON_BLOCK_LINK} positionSticky="48px" />
     </div>
   );
 };
 
-ButtonBlockTitle.story = { name: 'Con título' };
+BlockTitle.story = { name: 'Con título' };
 
-export const ButtonBlockText = (): JSX.Element => {
+export const BlockText = (): JSX.Element => {
   return (
     <div className="storybook__container-block">
       <Block
@@ -59,9 +59,9 @@ export const ButtonBlockText = (): JSX.Element => {
   );
 };
 
-ButtonBlockText.story = { name: 'Con bajada' };
+BlockText.story = { name: 'Con bajada' };
 
-export const ButtonBlockProgressBar = (): JSX.Element => {
+export const BlockProgressBar = (): JSX.Element => {
   return (
     <div className="storybook__container-block">
       <Block
@@ -74,9 +74,9 @@ export const ButtonBlockProgressBar = (): JSX.Element => {
   );
 };
 
-ButtonBlockProgressBar.story = { name: 'Con barra de progreso' };
+BlockProgressBar.story = { name: 'Con barra de progreso' };
 
-export const ButtonBlockSticky = (): JSX.Element => {
+export const BlockBackground = (): JSX.Element => {
   return (
     <div className="storybook__container-block">
       <Block
@@ -90,4 +90,4 @@ export const ButtonBlockSticky = (): JSX.Element => {
   );
 };
 
-ButtonBlockSticky.story = { name: 'Con fondo' };
+BlockBackground.story = { name: 'Con fondo' };
diff --git a/src/components/Collapse/Collapse.stories.tsx b/src/components/Collapse/Collapse.stories.tsx
@@ -109,11 +109,11 @@ CollapseMultipleSelection.story = { name: 'Selección múltiple' };
 const CollapseContent = (): JSX.Element => (
   <div className="card-body">
     <small className="text-success">$200,00</small>
-    <h5 className="mb-0">Solicitud de informes varios</h5>
+    <span>Solicitud de informes varios</span>
     <small>Boleta N° 2549-48758798</small>
     <hr />
     <small className="text-success">$250,00</small>
-    <h5 className="mb-0">Ecoparque</h5>
+    <span>Ecoparque</span>
     <small>Boleta N° 2549-48758798</small>
   </div>
 );
@@ -124,7 +124,7 @@ export const CollapseInformation = (): JSX.Element => {
       <div className="accordion">
         <Collapse identifier="collapseOne" content={<CollapseContent />}>
           <span className="collapse-label">Total a pagar</span>
-          <h4 className="collapse-title">$450,00</h4>
+          <span className="collapse-title">$450,00</span>
         </Collapse>
       </div>
 
@@ -133,7 +133,7 @@ export const CollapseInformation = (): JSX.Element => {
       <div className="accordion accordion-white">
         <Collapse identifier="collapseOneWhite" content={<CollapseContent />}>
           <span className="collapse-label">Total a pagar</span>
-          <h4 className="collapse-title">$450,00</h4>
+          <span className="collapse-title">$450,00</span>
         </Collapse>
       </div>
     </div>
@@ -147,15 +147,17 @@ export const CollapseIcon = (): JSX.Element => {
     <div className="storybook__container-accordion">
       <div className="accordion">
         <Collapse description={COLLAPSE_DESCRIPTION} identifier="collapseOne">
-          <i className="bx bxs-user-circle"></i> Título
+          <i className="bx bxs-user-circle"></i>
+          <span className="collapse-title">Título</span>
         </Collapse>
       </div>
 
       <br />
 
       <div className="accordion accordion-white">
         <Collapse description={COLLAPSE_DESCRIPTION} identifier="collapseOneWhite">
-          <i className="bx bxs-user-circle"></i> Título
+          <i className="bx bxs-user-circle"></i>
+          <span className="collapse-title">Título</span>
         </Collapse>
       </div>
     </div>
@@ -171,7 +173,7 @@ export const CollapsableLabelIcon = (): JSX.Element => {
         <Collapse description={COLLAPSE_DESCRIPTION} identifier="collapseOne">
           <i className="bx bxs-user-circle"></i>
           <span className="collapse-label">Volanta</span>
-          <h4 className="collapse-title">Título</h4>
+          <span className="collapse-title">Título</span>
           <span className="collapse-subtitle">Descripción</span>
         </Collapse>
       </div>
@@ -182,7 +184,7 @@ export const CollapsableLabelIcon = (): JSX.Element => {
         <Collapse description={COLLAPSE_DESCRIPTION} identifier="collapseOneWhite">
           <i className="bx bxs-user-circle"></i>
           <span className="collapse-label">Volanta</span>
-          <h4 className="collapse-title">Título</h4>
+          <span className="collapse-title">Título</span>
           <span className="collapse-subtitle">Descripción</span>
         </Collapse>
       </div>
@@ -197,7 +199,7 @@ const CollapseForm = (): JSX.Element => (
     <label className="card-details" htmlFor="visa">
       <i className="bx bxl-visa"></i>
       <div className="card-details-content">
-        <h5>Visa Débito ****1234</h5>
+        <span>Visa Débito ****1234</span>
         <small>Heraldo Paez</small>
       </div>
       <input type="radio" className="form-radio" name="credit_card" id="visa" />
@@ -206,19 +208,11 @@ const CollapseForm = (): JSX.Element => (
     <label className="card-details" htmlFor="master">
       <i className="bx bxl-mastercard"></i>
       <div className="card-details-content">
-        <h5>MasterCard Crédito ****5678</h5>
+        <span>MasterCard Crédito ****5678</span>
         <small>Heraldo Paez</small>
       </div>
       <input type="radio" className="form-radio" name="credit_card" id="master" />
     </label>
-    <hr />
-    <label className="card-details" htmlFor="new_card">
-      <span className="material-icons-round">info</span>
-      <div className="card-details-content">
-        <h5>Nueva tarjeta de crédito</h5>
-      </div>
-      <input type="radio" className="form-radio" name="credit_card" id="new_card" />
-    </label>
   </form>
 );
 
@@ -227,7 +221,7 @@ const CollapseFormWhite = (): JSX.Element => (
     <label className="card-details" htmlFor="visa_white">
       <i className="bx bxl-visa"></i>
       <div className="card-details-content">
-        <h5>Visa Débito ****1234</h5>
+        <span>Visa Débito ****1234</span>
         <small>Heraldo Paez</small>
       </div>
       <input type="radio" className="form-radio" name="credit_card" id="visa_white" />
@@ -236,19 +230,11 @@ const CollapseFormWhite = (): JSX.Element => (
     <label className="card-details" htmlFor="master_white">
       <i className="bx bxl-mastercard"></i>
       <div className="card-details-content">
-        <h5>MasterCard Crédito ****5678</h5>
+        <span>MasterCard Crédito ****5678</span>
         <small>Heraldo Paez</small>
       </div>
       <input type="radio" className="form-radio" name="credit_card" id="master_white" />
     </label>
-    <hr />
-    <label className="card-details" htmlFor="new_card_white">
-      <span className="material-icons-round">info</span>
-      <div className="card-details-content">
-        <h5>Nueva tarjeta de crédito</h5>
-      </div>
-      <input type="radio" className="form-radio" name="credit_card" id="new_card_white" />
-    </label>
   </form>
 );
 
@@ -257,7 +243,7 @@ export const CollapseList = (): JSX.Element => {
     <div className="storybook__container-accordion">
       <div className="accordion">
         <Collapse identifier="collapseOne" content={<CollapseForm />}>
-          <h4 className="collapse-title">Tarjeta de crédito / débito </h4>
+          <span className="collapse-title">Tarjeta de crédito / débito </span>
           <span className="collapse-subtitle">VISA, MasterCard, AMEX, CABAL, Maestro</span>
         </Collapse>
       </div>
@@ -266,7 +252,7 @@ export const CollapseList = (): JSX.Element => {
 
       <div className="accordion accordion-white">
         <Collapse identifier="collapseOneWhite" content={<CollapseFormWhite />}>
-          <h4 className="collapse-title">Tarjeta de crédito / débito </h4>
+          <span className="collapse-title">Tarjeta de crédito / débito </span>
           <span className="collapse-subtitle">VISA, MasterCard, AMEX, CABAL, Maestro</span>
         </Collapse>
       </div>

diff --git a/src/components/Collapse/index.tsx b/src/components/Collapse/index.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import React from 'react';
 
 interface CollapseProps {
@@ -17,14 +16,9 @@ export const Collapse: React.FC<CollapseProps> = ({
   isOnlySelect,
   dataParent
 }): JSX.Element => {
-  const collapseClass = classNames({
-    'card-header collapsed card-link': true,
-    'card-info': !!content
-  });
-
   return (
     <div className="card">
-      <button className={collapseClass} data-toggle="collapse" data-target={'#' + identifier}>
+      <button className="card-header collapsed" data-toggle="collapse" data-target={'#' + identifier}>
         {children}
       </button>
       <div id={identifier} className="collapse" {...(isOnlySelect && dataParent ? { 'data-parent': dataParent } : {})}>

diff --git a/src/organisms/Footer/Footer.stories.tsx b/src/organisms/Footer/Footer.stories.tsx
@@ -42,7 +42,7 @@ const PhonesSection = (): JSX.Element => (
         </li>
       ))}
     </ul>
-    <a href="https://www.buenosaires.gob.ar/laciudad/telefonosutiles">Ver todos los teléfonos</a>
+    <a href="https://buenosaires.gob.ar/inicio/telefonos">Ver todos los teléfonos</a>
   </section>
 );
 
@@ -76,12 +76,10 @@ const LegalSection = (): JSX.Element => (
             <a href="https://boletinoficial.buenosaires.gob.ar">Boletín oficial</a>
           </li>
           <li className="list-inline-item">
-            <a href="https://buenosaires.gob.ar/jefaturadegabinete/innovacion/terminos-y-condiciones">
-              Términos y condiciones
-            </a>
+            <a href="https://buenosaires.gob.ar/inicio/terminos-y-condiciones">Términos y condiciones</a>
           </li>
           <li className="list-inline-item">
-            <a href="https://www.buenosaires.gob.ar/privacidad">Política de privacidad</a>
+            <a href="https://buenosaires.gob.ar/inicio/privacidad">Política de privacidad</a>
           </li>
           <li className="list-inline-item">
             <a href="https://buenosaires.gob.ar/jefedegobierno/legalytecnica/normativa/boletin-oficial-y-registro/oficios-judiciales">

diff --git a/src/organisms/Header/index.tsx b/src/organisms/Header/index.tsx
@@ -242,7 +242,7 @@ export const Header: React.FC<HeaderProps> = ({ hasLogin, hasProfile, hasSearch,
   return (
     <header className="navbar navbar-light navbar-expand-lg" role="banner">
       <a href="#main" className="skip-to-main-content-link">
-        Ir al contenido principal
+        Saltar al contenido principal
       </a>
       <div className="container header-container">
         {LOGO}