feat: logs components

tblivet · Aug 14, 2024 · 9049b94 · 9049b94
1 parent dc4d935
commit 9049b94
Show file tree

Hide file tree

Showing 10 changed files with 351 additions and 35 deletions.
diff --git a/css/styles.css b/css/styles.css
diff --git a/css/styles.css.map b/css/styles.css.map
diff --git a/scss/components/_check-requirements.scss b/scss/components/_check-requirements.scss
@@ -85,8 +85,8 @@ $e: ".check-requirements";
     }
 
     &--success {
-      background-color: none;
       padding: 0;
+      background-color: none;
     }
   }
 }
diff --git a/scss/components/_index.scss b/scss/components/_index.scss
@@ -2,5 +2,6 @@
 @use "badge";
 @use "check-requirements";
 @use "form";
+@use "logs";
 @use "radio-card";
 @use "typography";
diff --git a/scss/components/_logs.scss b/scss/components/_logs.scss
@@ -0,0 +1,68 @@
+@use "../variables" as *;
+
+$e: ".logs";
+
+#{$ua-prefix} {
+  #{$e} {
+    --ua-logs-height: 14rem;
+    --ua-logs-background-color: #f7f7f7;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+    min-height: var(--ua-logs-height);
+    max-height: 100%;
+    background-color: var(--ua-logs-background-color);
+
+    &__scroll {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      flex-shrink: 1;
+      gap: 1rem;
+      height: 100%;
+      overflow-y: auto;
+    }
+
+    &__buttons {
+      flex-shrink: 0;
+    }
+
+    &__list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    &__line {
+      padding-inline-start: 2rem;
+      background-position: left center;
+      background-repeat: no-repeat;
+      background-size: 1.5rem 1.5rem;
+      font-size: 0.875rem;
+      line-height: 1.4;
+
+      &--success {
+        background-image: url("../img/check.svg");
+      }
+
+      &--warning {
+        background-image: url("../img/warning.svg");
+      }
+
+      &--error {
+        background-image: url("../img/close.svg");
+      }
+    }
+
+    &__summary-anchor {
+      font-weight: 700;
+    }
+
+    &__summaries {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+  }
+}
diff --git a/scss/components/_radio-card.scss b/scss/components/_radio-card.scss
@@ -76,12 +76,12 @@ $e: ".radio-card";
       flex-shrink: 0;
       padding: 0.125rem 0.5rem;
       background-color: var(--ua-radio-card-badge-background-color);
+      border: 0.0625rem solid var(--ua-radio-card-badge-border-color);
       border-radius: 2rem;
       font-size: 12px;
       font-weight: 500;
       color: var(--ua-radio-card-badge-color);
       line-height: 1.5;
-      border: 0.0625rem solid var(--ua-radio-card-badge-border-color);
 
       &--major {
         background-color: var(--ua-radio-card-badge-major-background-color);

diff --git a/scss/components/_typography.scss b/scss/components/_typography.scss
@@ -42,7 +42,7 @@
     font-size: 0.875rem;
   }
 
-  a {
+  a.link {
     color: var(--ua-link-color);
     text-decoration: underline;
     text-underline-offset: 0.125rem;

diff --git a/storybook/stories/components/Logs.stories.js b/storybook/stories/components/Logs.stories.js
@@ -0,0 +1,188 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to [email protected] so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <[email protected]>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+
+import Logs from "../../../views/templates/components/logs.html.twig";
+
+export default {
+  component: Logs,
+  args: {
+    logs: [
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'warning',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+        id: 'warning_1',
+      },
+      {
+        status: 'error',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+        id: 'error_1',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+      {
+        status: 'success',
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+      },
+    ],
+    logsSummaryWarning: [
+      {
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+        anchor: 'warning_1',
+      },
+    ],
+    logsSummaryError: [
+      {
+        message: 'src/Core/Domain/Product/Pack/Query/GetPackedProducts.php added to archive. 13114 files left.',
+        anchor: 'error_1',
+      },
+    ],
+    downloadLogsButtonUrl: "#",
+    downloadLogsButtonLabel: "Download update logs",
+  },
+};
+
+export const Default = {};
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.logs__summary-anchor').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
+      e.preventDefault();
+
+      const targetId = this.getAttribute('href').substring(1);
+      const targetElement = document.getElementById(targetId);
+      const logsScroll = document.querySelector('.logs__scroll');
+
+      if (logsScroll && targetElement) {
+        const targetRect = targetElement.getBoundingClientRect();
+        const containerRect = logsScroll.getBoundingClientRect();
+        const offsetTop = targetRect.top - containerRect.top + logsScroll.scrollTop;
+
+        logsScroll.scrollTo({
+          top: offsetTop,
+          behavior: 'smooth'
+        });
+      } else {
+        console.error('Element not found:', {
+          logsScroll: logsScroll,
+          targetElement: targetElement
+        });
+      }
+    });
+  });
+});