Merge branch 'develop' of https://github.com/amagovpt/AccessMonitor i…

…nto develop

.gitignore

@@ -24,3 +24,5 @@ yarn-debug.log*
 yarn-error.log*
 
 .env
+
+src/utils/all.json

package.json

@@ -3,7 +3,7 @@
   "version": "1.1.0",
   "private": true,
   "dependencies": {
-    "ama-design-system": "^1.1.42",
+    "ama-design-system": "^1.1.80",
     "axios": "^1.6.8",
     "bootstrap": "^5.3.3",
     "classnames": "^2.5.1",

src/App.jsx

@@ -2,6 +2,8 @@ import "./styles/theme.css";
 import "./styles/fontStyle.css";
 import "./styles/main.css";
 
+import 'ama-design-system/dist/index.css';
+
 import { useState } from "react";
 import { ThemeProvider } from "./context/ThemeContext";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

src/pages/Details/_components/TableDetails.js

@@ -33,7 +33,7 @@ export function TableDetails({ data }) {
                     <dt>{t("ELEMENT_RESULTS.result.content")}</dt>
                     <dd className="mb-4">
                       <div
-                        className="img"
+                        className="big-width"
                         dangerouslySetInnerHTML={renderHTML(item.showCode)}
                       />
                     </dd>

src/pages/Details/_components/styles.css

@@ -34,3 +34,11 @@
     width: auto;
   }
 }
+
+.big-width img {
+  width: 100%;
+}
+
+.big-width title {
+  display: flex;
+}

src/pages/Details/index.js

@@ -9,6 +9,7 @@ import { Breadcrumb, Icon, LoadingComponent } from "ama-design-system";
 
 // Api
 import { getEvalData } from "../../config/api";
+import tests from "../../lib/tests";
 
 import { useParams, useNavigate, useLocation } from "react-router-dom";
 
@@ -49,9 +50,20 @@ export default function Details({ allData, setAllData }) {
     }
   };
 
-  const textHeading = t(`ELEMS.${details}`);
+  let resultKey = null;
+  for (const key in tests) {
+    if (tests[key].test === details) {
+      resultKey = key;
+      break;
+    }
+  }
+
+  // const textHeading = t(`ELEMS.${details}`);
   const [dataTable, setDataTable] = useState([]);
 
+  const testResultType = dataTable?.size === 1 ? "s" : "p";
+  const testResult = t(`TESTS_RESULTS.${resultKey}.${testResultType}`);
+
   const dataBreadCrumb = [
     {
       title: "Acessibilidade.gov.pt",
@@ -63,7 +75,9 @@ export default function Details({ allData, setAllData }) {
       href: "",
     },
     {
-      title: textHeading,
+      title: <span
+        dangerouslySetInnerHTML={{ __html: testResult.replace("{{value}}", dataTable?.size) }}
+      />,
       href: "#",
     },
   ];
@@ -173,7 +187,7 @@ export default function Details({ allData, setAllData }) {
 
                   <span
                     className="textHeader ama-typography-body-large bold"
-                    dangerouslySetInnerHTML={{ __html: textHeading }}
+                    dangerouslySetInnerHTML={{ __html: testResult.replace("{{value}}", dataTable?.size) }}
                   />
                 </div>
 

src/pages/Details/styles.css

@@ -5,6 +5,12 @@
   border-left: 1px solid var(--ama-color-background-white);
 }
 
+mark {
+  background-color: initial;
+  font-weight: 900 !important;
+  text-decoration: underline;
+}
+
 .show_details {
   margin-bottom: 2rem;
 }
@@ -13,6 +19,24 @@
   margin-bottom: 0 !important;
 }
 
+.error-cell,
+.success-cell,
+.warning-cell {
+  font-size: 36px;
+}
+
+.warning-cell {
+  background: #ff9 !important;
+}
+
+.error-cell {
+  background: #f99 !important;
+}
+
+.success-cell {
+  background: #bce1bc !important;
+}
+
 .textHeader code {
   color: #DC3545 !important;
   text-decoration: none;
@@ -21,7 +45,6 @@
 .tabContent_container-details {
   background: var(--ama-color-background-white);
   padding: 32px 48px;
-  overflow: auto;
 }
 
 @media (max-width: 768px) {
@@ -116,4 +139,8 @@
 
 .dark_mode-details .loading_container {
   background-color: var(--ama-color-background-dark-lighter) !important;
+}
+
+.dark_mode-details mark {
+  color: var(--ama-color-background-white);
 }

src/pages/Home/_components/insert-upload-html.js

@@ -58,19 +58,21 @@ export function InsertHtmlUpload() {
 
   return (
     <form onSubmit={handleSubmit}>
-      <label htmlFor={"escrever_ficheiro"} className="margin-bottom upload_label">{t("HOME_PAGE.file_title")}</label>
-      <div className="input-group mb-3 d-flex justify-content-start align-items-start">
-        <button className="btn" type="button" onClick={handleButtonClick}>
-          {t("HOME_PAGE.file_label")}
-        </button>
-        <input
-          id={"escrever_ficheiro"}
-          ref={fileInputRef}
-          type="file"
-          className="form-control"
-          aria-label="Upload"
-          onChange={handleChange}
-        />
+      <div className="field">
+        <label htmlFor={"escrever_ficheiro"} className="margin-bottom upload_label">{t("HOME_PAGE.file_title")}</label>
+        <div className="input-group mb-3 d-flex justify-content-start align-items-start">
+          <button className="btn" type="button" onClick={handleButtonClick}>
+            {t("HOME_PAGE.file_label")}
+          </button>
+          <input
+            id={"escrever_ficheiro"}
+            ref={fileInputRef}
+            type="file"
+            className="form-control"
+            aria-label="Upload"
+            onChange={handleChange}
+          />
+        </div>
       </div>
 
       <Button

src/pages/Home/_components/styles.css

@@ -12,7 +12,7 @@
   margin-right: 10px;
   position: absolute;
   z-index: 10;
-  min-width: 130px;
+  min-width: 160px;
 }
 
 .input-group .btn:hover {
@@ -32,6 +32,10 @@
   display: none;
 } */
 
+.field .input-group .form-control {
+  margin: 0;
+}
+
 input[type=file] {
   margin-bottom: 0px;
   padding-left: 0px;

src/pages/Home/styles.css

@@ -22,10 +22,11 @@
   width: 237px;
 }
 
-.nav-item button {
+.ama.tabs-container .nav-item button {
   width: 200px;
   min-width: 210px;
   height: 55px;
+  line-height: normal;
 }
 
 .link_breadcrumb_container .breadcrumb .breadcrumb-item:not(:first-child) {
@@ -36,6 +37,10 @@
   .link_breadcrumb_container {
     padding: 2rem 0px 1rem 0px;
   }
+
+  .ama.tabs-container .nav-item button {
+    line-height: 2rem;
+  }
 }
 
 @media only screen and (max-width: 991px) {
@@ -60,17 +65,17 @@
   color: var(--ama-color-background-white);
 }
 
-.main_content_home .nav-tabs {
+.main_content_home .ama.tabs-container .nav-tabs {
   background-color: var(--ama-color-background-dark-darker) !important;
   border-bottom: 0px;
 }
 
-.main_content_home .nav-item button {
+.main_content_home .ama.tabs-container .nav-item button {
   background-color: var(--ama-color-background-dark-darker) !important;
   color: var(--header-top-bar-dark-text) !important;
 }
 
-.main_content_home .nav-tabs .nav-link.active {
+.main_content_home .ama.tabs-container .nav-tabs .nav-link.active {
   border-bottom-color: var(--header-top-bar-dark-text);
 }
 
@@ -90,7 +95,6 @@
   background-color: var(--ama-color-background-dark-lighter);
   color: var(--ama-color-text-blue);
   border-color: var(--ama-color-text-blue) !important;
-  padding-top: 12px;
 }
 
 .main_content_home .input-group .btn {

src/pages/PageCode/_components/styles.css

@@ -20,50 +20,50 @@
   flex-wrap: wrap;
 }
 
-.firstGroupContainer button {
+.firstGroupContainer .ama.btn {
   width: 100%;
   font-size: 13.5px;
 }
 
-.firstGroupContainer button:first-child {
+.firstGroupContainer .ama.btn:first-child {
   margin-bottom: 10px;
 }
 
 /* Dark Mode */
-.dark_mode-code button {
+.dark_mode-code .ama.btn {
   background-color: var(--ama-color-text-blue) !important;
   color: var(--ama-color-background-dark-lighter);
 }
 
-.dark_mode-code button:not(:focus) {
+.dark_mode-code .ama.btn:not(:focus) {
   border-color: var(--ama-color-text-blue);
 }
 
-.dark_mode-code button:active {
+.dark_mode-code .ama.btn:active {
   background-color: var(--ama-color-text-blue) !important;
   color: var(--ama-color-background-dark-lighter) !important;
 }
 
-.dark_mode-code button:hover {
+.dark_mode-code .ama.btn:hover {
   background-color: transparent !important;
   border-color: var(--ama-color-text-blue);
   color: var(--ama-color-text-blue);
 }
 
-.dark_mode-code button:focus {
+.dark_mode-code .ama.btn:focus {
   color: var(--ama-color-text-grey) !important;
 }
 
-.dark_mode-code .other button:focus {
+.dark_mode-code .other .ama.btn:focus {
   color: var(--ama-color-text-blue) !important;
 }
 
-.dark_mode-code .other button {
+.dark_mode-code .other .ama.btn {
   background-color: var(--ama-color-background-dark-lighter) !important;
 
   color: var(--ama-color-text-blue);
 }
 
-.dark_mode-code .other button:not(:focus) {
+.dark_mode-code .other .ama.btn:not(:focus) {
   border-color: var(--ama-color-background-dark-lighter);
 }

src/pages/Resume/_components/buttons-revalidation.js

@@ -25,7 +25,7 @@ export function ButtonsActions({
   return (
     <>
       <div
-        className={`d-flex flex-row justify-content-between deskGroupMobile ${themeClass}`}
+        className={`d-flex flex-row justify-content-between deskGroup ${themeClass}`}
       >
         <Button
           size="md"