@allurereport/web-classic 3.8.2 → 3.10.0

package/src/components/Packages/styles.scss

@@ -13,7 +13,7 @@
   position: relative;
 
   &:not(:first-child) {
-    border-top: 1px solid var(--on-border-muted);
+    border-top: 1px solid var(--color-border-subtle);
   }
 }
 
@@ -30,7 +30,7 @@
   padding: 4px 8px 4px 6px;
 
   &:hover {
-    background: var(--bg-control-flat-medium);
+    background: var(--color-control-bg-ghost-hover);
   }
 }
 
@@ -64,15 +64,15 @@
   position: relative;
 
   &:hover {
-    background: var(--bg-control-flat-medium);
+    background: var(--color-control-bg-ghost-hover);
   }
 
   &:not(:first-child) {
-    border-top: 1px solid var(--on-border-muted);
+    border-top: 1px solid var(--color-border-subtle);
   }
 }
 .tree-item-marked {
-  background: var(--bg-base-secondary);
+  background: var(--color-bg-secondary);
 }
 
 .item-title {
@@ -82,7 +82,7 @@
 .item-time {
   flex: none;
   margin-left: auto;
-  color: var(--on-text-hint);
+  color: var(--color-text-muted);
 }
 
 .test-count {
@@ -94,7 +94,7 @@
   display: block;
   padding-left: 24px;
   margin-bottom: 12px;
-  border-top: 1px solid var(--on-border-muted);
+  border-top: 1px solid var(--color-border-subtle);
 }
 
 .tree-item-icon {
@@ -103,71 +103,76 @@
 }
 
 .status-passed {
-  color: var(--bg-support-castor);
+  color: var(--color-status-passed-bg);
 }
 
 .status-failed {
-  color: var(--bg-support-capella);
+  color: var(--color-status-failed-bg);
 }
 
 .status-broken {
-  color: var(--bg-support-atlas);
+  color: var(--color-status-broken-bg);
 }
 
 .status-skipped {
-  color: var(--bg-support-rau);
+  color: var(--color-status-skipped-bg);
 }
 
 .status-unknown {
-  color: var(--bg-support-skat);
+  color: var(--color-status-unknown-bg);
 }
 
 .tree-header-bar {
   display: inline-flex;
+  align-items: center;
+  gap: var(--space-0-25);
   font-family: var(--font-family);
   max-width: 140px;
   min-width: 46px;
-  border-radius: 4px;
-  height: 12px;
-  background: var(--on-text-hint);
+  height: var(--space-2);
+  background: transparent;
   margin-left: auto;
-  font-size: 10px;
-  font-weight: var(--font-weight-extra-bold);
-  line-height: 12px;
-  overflow: hidden;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-s);
+  overflow: visible;
 }
 
 .tree-header-bar-item {
   display: flex;
-  min-width: 16px;
+  align-items: center;
   justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--space-2);
+  height: var(--space-2);
+  border-radius: var(--radius-pill);
   text-align: center;
-  padding: 0 6px;
+  padding: 0 var(--space-0-75);
   flex-grow: 1;
 
   &.passed {
-    background-color: var(--bg-support-castor);
-    color: var(--constant-on-text-primary);
+    background-color: var(--color-status-passed-bg);
+    color: var(--color-status-passed-on-bg);
   }
 
   &.failed {
-    background-color: var(--bg-support-capella);
-    color: var(--constant-on-text-primary);
+    background-color: var(--color-status-failed-bg);
+    color: var(--color-status-failed-on-bg);
   }
 
   &.broken {
-    background-color: var(--bg-support-atlas);
-    color: var(--constant-on-text-primary);
+    background-color: var(--color-status-broken-bg);
+    color: var(--color-status-broken-on-bg);
   }
 
   &.skipped {
-    background-color: var(--bg-support-rau);
-    color: var(--constant-on-text-primary);
+    background-color: var(--color-status-skipped-bg);
+    color: var(--color-status-skipped-on-bg);
   }
 
   &.unknown {
-    background-color: var(--bg-support-skat);
-    color: var(--constant-on-text-primary);
+    background-color: var(--color-status-unknown-bg);
+    color: var(--color-status-unknown-on-bg);
   }
 }
 
@@ -177,7 +182,7 @@
 }
 
 .tree-empty-results-title {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 .tree-empty-results-clear-button {
@@ -186,7 +191,7 @@
 
 .order {
   user-select: none;
-  color: var(--on-text-hint);
+  color: var(--color-text-muted);
   min-width: 16px;
   text-align: center;
   box-sizing: content-box;

package/src/components/ReportBody/styles.scss

@@ -28,7 +28,7 @@
 /* This is a hack because button do not have this state */
 .filtersBtnWithFilters > button::after {
   content: "";
-  background-color: var(--bg-support-aldebaran);
+  background-color: var(--color-intent-primary-bg);
   width: 6px;
   height: 6px;
   border-radius: 100px;

package/src/components/TestResult/TestResultError/styles.scss

@@ -1,6 +1,6 @@
 .test-result-error {
   padding: 8px 8px 12px 16px;
-  background-color: var(--bg-alpha-capella);
+  background-color: var(--color-status-failed-bg-subtle);
   border-radius: 8px;
   position: relative;
   overflow: hidden;
@@ -14,7 +14,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    background: var(--on-support-capella);
+    background: var(--color-status-failed-border);
   }
 }
 
@@ -27,7 +27,7 @@
 .test-result-error-text {
   margin-bottom: 8px;
   padding-left: 8px;
-  color: var(--on-support-capella);
+  color: var(--color-status-failed-text);
 }
 
 .test-result-error-trace {
@@ -50,6 +50,6 @@
   transition: background-color 300ms;
 
   &:hover {
-    background: var(--bg-alpha-capella);
+    background: var(--color-status-failed-bg-subtle);
   }
 }

package/src/components/TestResult/TestResultLinks/styles.scss

@@ -19,7 +19,7 @@
 }
 
 .test-result-link-text {
-  color: var(--on-support-aldebaran);
+  color: var(--color-link-text);
 }
 
 .test-result-links-list {

package/src/components/TestResult/TestResultNavigation/index.tsx

@@ -44,7 +44,7 @@ export const TestResultNavigation: FunctionalComponent<TestResultNavigationProps
         return (
           <div className={styles["test-result-nav"]}>
             {fullName && <FullName />}
-            {data && !testResult?.hidden && (
+            {data && !testResult?.isRetry && (
               <div className={styles["test-result-navigator"]}>
                 <TooltipWrapper tooltipText={tooltip("prevTR")} isTriggerActive={currentIndex > 1}>
                   <IconButton

package/src/components/TestResult/TestResultPrevStatuses/styles.scss

@@ -26,23 +26,23 @@
 }
 
 .status-passed {
-  color: var(--bg-support-castor);
+  color: var(--color-status-passed-chart);
 }
 
 .status-failed {
-  color: var(--bg-support-capella);
+  color: var(--color-status-failed-chart);
 }
 
 .status-broken {
-  color: var(--bg-support-atlas);
+  color: var(--color-status-broken-chart);
 }
 
 .status-skipped {
-  color: var(--bg-support-rau);
+  color: var(--color-status-skipped-chart);
 }
 
 .status-unknown {
-  color: var(--bg-support-skat);
+  color: var(--color-status-unknown-chart);
 }
 
 .test-result-prev-status-tooltip {

package/src/components/TestResult/TestResultSeverity/styles.scss

@@ -9,11 +9,11 @@
 }
 
 .severity-blocker {
-  color: var(--on-support-capella);
+  color: var(--color-intent-danger-text);
 }
 
 .severity-critical {
-  color: var(--on-support-atlas);
+  color: var(--color-intent-warning-text);
 }
 
 .severity-normal {
@@ -21,9 +21,9 @@
 }
 
 .severity-minor {
-  color: var(--on-support-aldebaran);
+  color: var(--color-intent-primary-text);
 }
 
 .severity-trivial {
-  color: var(--on-support-castor);
+  color: var(--color-intent-success-text);
 }

package/src/components/TestResult/TestResultStatus/styles.scss

@@ -1,36 +1,3 @@
-.test-result-status {
-  padding: 2px;
-  display: flex;
-  border-radius: 100px;
-  color: var(--constant-on-text-primary);
-  height: max-content;
-}
+@import "~@allurereport/web-components/mixins.scss";
 
-.test-result-status-text {
-  padding: 0 4px;
-}
-
-.test-result-status-icon {
-  color: var(--constant-on-text-primary);
-  padding: 0;
-}
-
-.status-passed {
-  background-color: var(--bg-support-castor);
-}
-
-.status-failed {
-  background-color: var(--bg-support-capella);
-}
-
-.status-broken {
-  background-color: var(--bg-support-atlas);
-}
-
-.status-skipped {
-  background-color: var(--bg-support-rau);
-}
-
-.status-unknown {
-  background-color: var(--bg-support-skat);
-}
+@include status-label-shape("test-result-status", "test-result-status-icon", "test-result-status-text");

package/src/components/TestResult/TestResultSteps/attachment.tsx

@@ -1,5 +1,5 @@
 import type { AttachmentTestStepResult } from "@allurereport/core-api";
-import { Spinner } from "@allurereport/web-components";
+import { MarkdownPreview, Spinner } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
 import { useEffect, useState } from "preact/hooks";
 
@@ -22,13 +22,17 @@ const componentsByAttachmentType: Record<string, any> = {
   css: AttachmentCode,
   table: AttachmentCode,
   html: AttachmentCode,
+  markdown: AttachmentCode,
   text: AttachmentCode,
   video: AttachmentVideo,
 };
 const previewComponentsByAttachmentType: Record<string, any> = {
   html: HtmlAttachmentPreview,
+  markdown: MarkdownPreview,
 };
 
+const DUAL_VIEW_ATTACHMENT_TYPES = new Set(["html", "markdown"]);
+
 export interface AttachmentTestStepResultProps {
   item: AttachmentTestStepResult;
   previewable?: boolean;
@@ -61,8 +65,26 @@ export const Attachment: FunctionalComponent<AttachmentTestStepResultProps> = ({
     );
   }
 
+  const defaultRenderedPreview = attachmentComponent.type === "markdown" || attachmentComponent.type === "html";
+  const showPreview =
+    !!CurrentPreviewComponent &&
+    (defaultRenderedPreview ? !previewable || modalData.value.preview : !!(previewable && modalData.value.preview));
+
+  if (DUAL_VIEW_ATTACHMENT_TYPES.has(attachmentComponent.type) && CurrentPreviewComponent && CurrentComponent) {
+    return (
+      <div className={styles.attachmentViewStack}>
+        <div className={styles.attachmentViewPane} hidden={showPreview}>
+          <CurrentComponent attachment={attachment} item={item} />
+        </div>
+        <div className={styles.attachmentViewPane} hidden={!showPreview}>
+          <CurrentPreviewComponent attachment={attachment} item={item} />
+        </div>
+      </div>
+    );
+  }
+
   // temp solution before modal component refactoring
-  if (CurrentPreviewComponent && previewable && modalData.value.preview) {
+  if (showPreview) {
     return <CurrentPreviewComponent attachment={attachment} item={item} />;
   }
 

package/src/components/TestResult/TestResultSteps/attachmentVideo.tsx

@@ -1,6 +1,8 @@
 import { Spinner } from "@allurereport/web-components";
 import { type FunctionalComponent } from "preact";
 
+import * as styles from "./styles.scss";
+
 export const AttachmentVideo: FunctionalComponent<{
   attachment: { src: string; contentType?: string };
 }> = ({ attachment }) => {
@@ -8,7 +10,7 @@ export const AttachmentVideo: FunctionalComponent<{
     return <Spinner />;
   }
   return (
-    <video controls loop muted>
+    <video class={styles["test-result-attachment-video"]} controls loop muted>
       <source src={attachment?.src} type={attachment?.contentType} />
     </video>
   );

package/src/components/TestResult/TestResultSteps/styles.scss

@@ -2,7 +2,7 @@
   padding-right: 24px;
 
   &:not(:first-child) {
-    border-top: 1px solid var(--on-border-muted);
+    border-top: 1px solid var(--color-border-subtle);
   }
 }
 
@@ -12,19 +12,19 @@
 
 .test-result-step {
   &:not(:first-child) {
-    border-top: 1px solid var(--on-border-muted);
+    border-top: 1px solid var(--color-border-subtle);
   }
 }
 
 .test-result-step-content {
   padding-left: 24px;
   margin-bottom: 12px;
-  border-top: 1px solid var(--on-border-muted);
+  border-top: 1px solid var(--color-border-subtle);
   min-width: 0;
 }
 
 .test-result-attachment-content {
-  border-top: 1px solid var(--on-border-muted);
+  border-top: 1px solid var(--color-border-subtle);
 }
 
 .test-result-attachment-content-wrapper {
@@ -46,7 +46,7 @@
   min-height: 32px;
 
   &:hover {
-    background: var(--bg-control-flat-medium);
+    background: var(--color-control-bg-ghost-hover);
   }
 }
 
@@ -63,7 +63,7 @@
 }
 
 .test-result-step-number {
-  color: var(--on-text-hint);
+  color: var(--color-text-muted);
   min-width: 16px;
   text-align: center;
   box-sizing: content-box;
@@ -72,7 +72,7 @@
 .item-time {
   flex: none;
   margin-left: auto;
-  color: var(--on-text-hint);
+  color: var(--color-text-muted);
   line-height: 20px;
   min-width: 56px;
   text-align: right;
@@ -82,7 +82,7 @@
   margin-left: auto;
   display: flex;
   gap: 8px;
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   align-items: center;
   flex: 0 0 auto;
 }
@@ -91,7 +91,7 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
   min-width: 52px;
   justify-content: flex-end;
 }
@@ -103,7 +103,7 @@
 }
 
 .item-info-step-icon {
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
 }
 
 .test-result-step-chevron {
@@ -126,7 +126,7 @@
   padding: 4px 8px 4px 6px;
 
   &:hover {
-    background: var(--bg-control-flat-medium);
+    background: var(--color-control-bg-ghost-hover);
   }
 }
 
@@ -140,7 +140,7 @@
 }
 
 .test-result-attachment-icon {
-  color: var(--on-icon-secondary);
+  color: var(--color-icon-secondary);
   padding: 2px 4px;
   height: max-content;
 }
@@ -159,9 +159,11 @@
   height: 100%;
 
   img {
-    width: 100%;
-    height: 100%;
-    object-fit: scale-down;
+    display: block;
+    max-width: 100%;
+    max-height: 80vh;
+    width: auto;
+    height: auto;
   }
 }
 
@@ -189,7 +191,7 @@
 }
 
 .item-button {
-  color: var(--bg-control-flat);
+  color: var(--color-control-bg-ghost);
 }
 
 .wrong-attachment-sign {
@@ -199,7 +201,7 @@
 }
 
 .test-result-attachment-missed {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   line-height: 20px;
   margin-right: auto;
   padding-top: 2px;
@@ -217,6 +219,22 @@
   width: 24px;
 }
 
+.attachmentViewStack {
+  width: 100%;
+}
+
+.attachmentViewPane[hidden] {
+  display: none !important;
+}
+
 .html-attachment-preview {
   padding: 0 16px;
 }
+
+.test-result-attachment-video {
+  display: block;
+  max-width: 100%;
+  max-height: 80vh;
+  width: auto;
+  height: auto;
+}

package/src/components/TestResult/TestResultSteps/testResultAttachmentInfo.tsx

@@ -35,6 +35,7 @@ export const TestResultAttachmentInfo: FunctionalComponent<TestResultAttachmentI
     openModal({
       data: item,
       component: <Attachment item={item} previewable={true} />,
+      preview: contentType === "text/markdown" || contentType === "text/html",
     });
   };
 

package/src/components/TestResult/TestResultSteps/testResultStep.tsx

@@ -1,5 +1,5 @@
 import type { DefaultTestStepResult } from "@allurereport/core-api";
-import { Code, Text, allureIcons } from "@allurereport/web-components";
+import { Code, LinkifiedText, allureIcons } from "@allurereport/web-components";
 import type { FunctionComponent } from "preact";
 import { useState } from "preact/hooks";
 
@@ -71,7 +71,7 @@ export const TestResultStep: FunctionComponent<{
         <Code size={"s"} className={styles["test-result-step-number"]}>
           {stepIndex}
         </Code>
-        <Text className={styles["test-result-header-text"]}>{item.name}</Text>
+        <LinkifiedText className={styles["test-result-header-text"]} text={item.name} />
         <TestResultStepInfo item={item} />
       </div>
       {hasContent && isOpened && <TestResultStepsContent item={item} />}

package/src/components/TestResult/TestResultTabs/styles.scss

@@ -45,7 +45,7 @@
     cursor: default;
 
     &:after {
-      border-bottom: 2px solid var(--on-support-aldebaran);
+      border-bottom: 2px solid var(--color-link-text);
     }
 
     span {

package/src/components/Tree/TreeHeader.tsx

@@ -70,7 +70,7 @@ const TreeHeader: FunctionComponent<TreeHeaderProps> = ({
               {categoryTitle}
             </Text>
             {treeHeaderBar && (
-              <div className={styles["tree-header-bar"]} style={{ width: `${width}px` }}>
+              <div className={styles["tree-header-bar"]} style={{ minWidth: `${width}px` }}>
                 {treeHeaderBar}
               </div>
             )}