@allurereport/web-classic 3.8.1 → 3.9.0

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-d95b6198c4d471014aa1.js"
+  "main.js": "app-3d4358effbb13febd942.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-classic",
-  "version": "3.8.1",
+  "version": "3.9.0",
   "description": "The static files for Allure Classic Report",
   "keywords": [
     "allure",
@@ -15,7 +15,10 @@
   "types": "./types.d.ts",
   "scripts": {
     "clean": "rimraf dist",
-    "dev": "webpack serve --mode development",
+    "dev": "run-s dev:demo dev:copy dev:serve",
+    "dev:demo": "rimraf out/demo && yarn run -T allure generate ${ALLURE_RESULTS_DIR:-../sandbox/allure-results} --config=./allurerc-dev.mjs --output=./out/demo",
+    "dev:copy": "rimraf out/dev/data out/dev/widgets && mkdir -p out/dev && cp -R out/demo/data out/dev/data && cp -R out/demo/widgets out/dev/widgets",
+    "dev:serve": "webpack serve --mode development",
     "build": "run-s clean 'build:prod:*'",
     "build:dev": "run-s clean 'build:dev:*'",
     "build:prod:single": "SINGLE_FILE_MODE=1 webpack --mode production",
@@ -27,10 +30,10 @@
     "lint:fix": "oxlint --import-plugin --fix src test features stories"
   },
   "dependencies": {
-    "@allurereport/charts-api": "3.8.1",
-    "@allurereport/core-api": "3.8.1",
-    "@allurereport/web-commons": "3.8.1",
-    "@allurereport/web-components": "3.8.1",
+    "@allurereport/charts-api": "3.9.0",
+    "@allurereport/core-api": "3.9.0",
+    "@allurereport/web-commons": "3.9.0",
+    "@allurereport/web-components": "3.9.0",
     "@preact/signals": "^2.6.1",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",
@@ -54,6 +57,7 @@
     "@types/underscore": "^1",
     "@vitest/runner": "^2.1.9",
     "@vitest/snapshot": "^2.1.9",
+    "allure-js-commons": "^3.3.3",
     "allure-vitest": "^3.3.3",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",

package/src/assets/scss/code.scss

@@ -13,7 +13,7 @@ code[class*="language-"] {
 }
 
 .token.number {
-  color: var(--on-support-aldebaran);
+  color: var(--color-syntax-number);
 }
 
 .token.property,
@@ -22,7 +22,7 @@ code[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-  color: var(--on-support-atlas);
+  color: var(--color-syntax-property);
 }
 
 .token.selector,
@@ -31,18 +31,18 @@ code[class*="language-"] {
 .token.char,
 .token.builtin,
 .token.inserted {
-  color: var(--on-support-castor);
+  color: var(--color-syntax-string);
 }
 
 .token.atrule,
 .token.attr-value,
 .token.keyword {
-  color: var(--on-support-sirius);
+  color: var(--color-syntax-keyword);
 }
 
 .token.function,
 .token.class-name {
-  color: var(--on-support-capella);
+  color: var(--color-syntax-function);
 }
 
 .token.punctuation {
@@ -52,7 +52,7 @@ code[class*="language-"] {
 .token.regex,
 .token.important,
 .token.variable {
-  color: var(--on-support-atlas);
+  color: var(--color-syntax-property);
 }
 
 .line-numbers,

package/src/assets/scss/index.scss

@@ -1,9 +1,9 @@
-@import "fonts.scss";
-@import "typography.scss";
-@import "day.scss";
-@import "night.scss";
-@import "theme.scss";
-@import "palette.scss";
+@import "../../../../web-components/src/assets/scss/fonts.scss";
+@import "../../../../web-components/src/assets/scss/typography.scss";
+@import "../../../../web-components/src/assets/scss/palette.scss";
+@import "../../../../web-components/src/assets/scss/semantic.scss";
+@import "../../../../web-components/src/assets/scss/spacing.scss";
+@import "../../../../web-components/src/assets/scss/radius.scss";
+@import "../../../../web-components/src/assets/scss/effects.scss";
+@import "../../../../web-components/src/assets/scss/motion.scss";
 @import "common.scss";
-
-@import "vars.scss";

package/src/components/Behaviors/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/Categories/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/HeaderActions/styles.scss

@@ -46,7 +46,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/Modal/index.tsx

@@ -101,6 +101,8 @@ const Modal: FunctionalComponent<ModalProps> = ({ testResult }) => {
 
   const isImageAttachment = link?.contentType?.startsWith("image");
   const isHtmlAttachment = link?.contentType === "text/html";
+  const isMarkdownAttachment = link?.contentType === "text/markdown";
+  const isPreviewToggleAttachment = isHtmlAttachment || isMarkdownAttachment;
   const downloadData = async (e: Event) => {
     e.stopPropagation();
     const { id, ext, contentType } = link || {};
@@ -132,7 +134,7 @@ const Modal: FunctionalComponent<ModalProps> = ({ testResult }) => {
                   text={"Open in new tab"}
                 />
               )}
-              {isHtmlAttachment && (
+              {isPreviewToggleAttachment && (
                 <TooltipWrapper tooltipText={"Preview attachment"}>
                   <IconButton
                     style={"outline"}

package/src/components/Modal/styles.scss

@@ -97,7 +97,7 @@
   width: 100%;
   position: absolute;
   bottom: 0;
-  color: var(--gray-neutral-0);
+  color: var(--color-text-inverse);
 }
 
 .modal-thumb {
@@ -106,7 +106,7 @@
   width: 64px;
   height: 64px;
   border-radius: 12px;
-  background: var(--constant-bg-base-primary-night);
+  background: var(--color-bg-inverse-primary);
   overflow: hidden;
   border: 1px solid transparent;
   cursor: pointer;

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;