MOBILE-4268 core: Rename core-error-accordion

src/core/components/error-accordion/core-error-accordion.html

@@ -2,5 +2,5 @@
     The markup for this component is rendered dynamically using the static render() method
     instead of using Angular's engine. The reason for using this approach is that this
     allows injecting this component into HTML directly, rather than requiring Angular
-    to control its lifecycle.
+    to control its lifecycle. This is necessary, for example, to render within alerts.
 -->

src/core/components/error-accordion/error-accordion.scss

@@ -1,4 +1,4 @@
-.core-error-info {
+.core-error-accordion {
     background: var(--gray-200);
     border-radius: var(--radius-xs);
     font-size: var(--body-font-size-sm);
@@ -12,26 +12,26 @@
         margin-bottom: 0;
     }
 
-    .core-error-info--code {
+    .core-error-accordion--code {
         padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
         font-size: var(--body-font-size-md);
     }
 
-    .core-error-info--details p {
+    .core-error-accordion--details p {
         padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
         color: var(--gray-500);
     }
 
-    .core-error-info--checkbox {
+    .core-error-accordion--checkbox {
         display: none;
 
-        & + .core-error-info--details,
-        & + .core-error-info--code + .core-error-info--details {
+        & + .core-error-accordion--details,
+        & + .core-error-accordion--code + .core-error-accordion--details {
             max-height: 0;
             overflow: hidden;
             transition: max-height 600ms ease-in-out;
 
-            & + .core-error-info--toggle {
+            & + .core-error-accordion--toggle {
                 display: flex;
                 padding: var(--spacing-2);
                 min-height: var(--a11y-min-target-size);
@@ -48,7 +48,7 @@
                     width: 11px;
                 }
 
-                .core-error-info--hide-content {
+                .core-error-accordion--hide-content {
                     display: none;
                 }
 
@@ -56,15 +56,15 @@
 
         }
 
-        &:checked + .core-error-info--details,
-        &:checked + .core-error-info--code + .core-error-info--details {
+        &:checked + .core-error-accordion--details,
+        &:checked + .core-error-accordion--code + .core-error-accordion--details {
             max-height: 110px;
 
-            & + .core-error-info--toggle .core-error-info--hide-content {
+            & + .core-error-accordion--toggle .core-error-accordion--hide-content {
                 display: flex;
             }
 
-            & + .core-error-info--toggle .core-error-info--show-content {
+            & + .core-error-accordion--toggle .core-error-accordion--show-content {
                 display: none;
             }
 

src/core/components/error-accordion/error-accordion.ts

@@ -23,11 +23,11 @@ import { CoreForms } from '@singletons/form';
  * it can be rendered using the static render() method to get the raw HTML.
  */
 @Component({
-    selector: 'core-error-info',
-    templateUrl: 'core-error-info.html',
-    styleUrls: ['error-info.scss'],
+    selector: 'core-error-accordion',
+    templateUrl: 'core-error-accordion.html',
+    styleUrls: ['error-accordion.scss'],
 })
-export class CoreErrorInfoComponent implements OnInit, OnChanges {
+export class CoreErrorAccordionComponent implements OnInit, OnChanges {
 
     /**
      * Render an instance of the component into an HTML string.
@@ -37,24 +37,24 @@ export class CoreErrorInfoComponent implements OnInit, OnChanges {
      * @returns Component HTML.
      */
     static render(errorDetails: string, errorCode: string): string {
-        const toggleId = CoreForms.uniqueId('error-info-toggle');
+        const toggleId = CoreForms.uniqueId('error-accordion-toggle');
         const errorCodeLabel = Translate.instant('core.errorcode', { errorCode });
         const hideDetailsLabel = Translate.instant('core.errordetailshide');
         const showDetailsLabel = Translate.instant('core.errordetailsshow');
 
         return `
-            <div class="core-error-info">
-                <input id="${toggleId}" type="checkbox" class="core-error-info--checkbox" />
-                <div class="core-error-info--code"><strong>${errorCodeLabel}</strong></div>
-                <div class="core-error-info--details">
+            <div class="core-error-accordion">
+                <input id="${toggleId}" type="checkbox" class="core-error-accordion--checkbox" />
+                <div class="core-error-accordion--code"><strong>${errorCodeLabel}</strong></div>
+                <div class="core-error-accordion--details">
                     <p>${errorDetails}</p>
                 </div>
-                <label for="${toggleId}" class="core-error-info--toggle" aria-hidden="true">
-                    <span class="core-error-info--hide-content">
+                <label for="${toggleId}" class="core-error-accordion--toggle" aria-hidden="true">
+                    <span class="core-error-accordion--hide-content">
                         ${hideDetailsLabel}
                         <ion-icon name="chevron-up" />
                     </span>
-                    <span class="core-error-info--show-content">
+                    <span class="core-error-accordion--show-content">
                         ${showDetailsLabel}
                         <ion-icon name="chevron-down" />
                     </span>
@@ -86,7 +86,7 @@ export class CoreErrorInfoComponent implements OnInit, OnChanges {
      * Render component html in the element created by Angular.
      */
     private render(): void {
-        this.element.nativeElement.innerHTML = CoreErrorInfoComponent.render(this.errorDetails, this.errorCode);
+        this.element.nativeElement.innerHTML = CoreErrorAccordionComponent.render(this.errorDetails, this.errorCode);
     }
 
 }

src/core/features/login/pages/site/site.ts

@@ -40,7 +40,7 @@ import { CoreForms } from '@singletons/form';
 import { AlertButton } from '@ionic/core';
 import { CoreSiteError, CoreSiteErrorDebug } from '@classes/errors/siteerror';
 import { CoreUserSupport } from '@features/user/services/support';
-import { CoreErrorInfoComponent } from '@components/error-info/error-info';
+import { CoreErrorAccordionComponent } from '@components/error-accordion/error-accordion';
 import { CoreUserSupportConfig } from '@features/user/classes/support/support-config';
 import { CoreUserGuestSupportConfig } from '@features/user/classes/support/guest-support-config';
 import { CoreLoginError } from '@classes/errors/loginerror';
@@ -421,7 +421,7 @@ export class CoreLoginSitePage implements OnInit {
         }
 
         if (debug) {
-            errorMessage = `<p>${errorMessage}</p><div class="core-error-info-container"></div>`;
+            errorMessage = `<p>${errorMessage}</p><div class="core-error-accordion-container"></div>`;
         }
 
         const alertSupportConfig = supportConfig;
@@ -457,9 +457,10 @@ export class CoreLoginSitePage implements OnInit {
         });
 
         if (debug) {
-            const containerElement = alertElement.querySelector('.core-error-info-container');
+            const containerElement = alertElement.querySelector('.core-error-accordion-container');
+
             if (containerElement) {
-                containerElement.innerHTML = CoreErrorInfoComponent.render(debug.details, debug.code);
+                containerElement.innerHTML = CoreErrorAccordionComponent.render(debug.details, debug.code);
             }
         }
     }

src/core/services/utils/dom.ts

@@ -52,7 +52,7 @@ import { Subscription } from 'rxjs';
 import { CoreNetwork } from '@services/network';
 import { CoreSiteError } from '@classes/errors/siteerror';
 import { CoreUserSupport } from '@features/user/services/support';
-import { CoreErrorInfoComponent } from '@components/error-info/error-info';
+import { CoreErrorAccordionComponent } from '@components/error-accordion/error-accordion';
 import { CorePlatform } from '@services/platform';
 import { CoreCancellablePromise } from '@classes/cancellable-promise';
 import { CoreLang } from '@services/lang';
@@ -1038,7 +1038,7 @@ export class CoreDomUtilsProvider {
             alertOptions.buttons = error.buttons;
         } else if (error instanceof CoreSiteError) {
             if (error.debug) {
-                alertOptions.message = `<p>${alertOptions.message}</p><div class="core-error-info-container"></div>`;
+                alertOptions.message = `<p>${alertOptions.message}</p><div class="core-error-accordion-container"></div>`;
             }
 
             const supportConfig = error.supportConfig;
@@ -1062,10 +1062,10 @@ export class CoreDomUtilsProvider {
         const alertElement = await this.showAlertWithOptions(alertOptions, autocloseTime);
 
         if (error instanceof CoreSiteError && error.debug) {
-            const containerElement = alertElement.querySelector('.core-error-info-container');
+            const containerElement = alertElement.querySelector('.core-error-accordion-container');
 
             if (containerElement) {
-                containerElement.innerHTML = CoreErrorInfoComponent.render(error.debug.details, error.debug.code);
+                containerElement.innerHTML = CoreErrorAccordionComponent.render(error.debug.details, error.debug.code);
             }
         }
 

src/theme/theme.scss

@@ -26,8 +26,8 @@
 @import "components/rubrics.scss";
 @import "components/mod-label.scss";
 @import "components/ion-icon.scss";
-@import "../core/components/error-info/error-info.scss";
 @import "components/videojs.scss";
+@import "../core/components/error-accordion/error-accordion.scss";
 
 /* Some styles from 3rd party libraries. */
 @import "bootstrap.scss";