@allurereport/web-summary 3.0.0-beta.13 → 3.0.0-beta.15

package/dist/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-b6231977.js"
+  "main.js": "app-0ae3d8a1.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-summary",
-  "version": "3.0.0-beta.13",
+  "version": "3.0.0-beta.15",
   "description": "The static files for Allure Report Summary",
   "keywords": [
     "allure",
@@ -27,9 +27,9 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/core-api": "3.0.0-beta.13",
-    "@allurereport/web-commons": "3.0.0-beta.13",
-    "@allurereport/web-components": "3.0.0-beta.13",
+    "@allurereport/core-api": "3.0.0-beta.15",
+    "@allurereport/web-commons": "3.0.0-beta.15",
+    "@allurereport/web-components": "3.0.0-beta.15",
     "@preact/signals": "^1.3.0",
     "clsx": "^2.1.1",
     "i18next": "^24.0.2",

package/src/components/MetadataRow/MetadataItem.tsx

@@ -0,0 +1,56 @@
+import { Text } from "@allurereport/web-components";
+import { clsx } from "clsx";
+import type { FunctionalComponent } from "preact";
+import * as styles from "./styles.scss";
+
+export type MetadataProps = {
+  count?: number;
+  title?: string;
+  type?: string;
+  status?: string;
+};
+
+export const MetadataValue: FunctionalComponent<MetadataProps> = ({ count }) => {
+  return (
+    <Text data-testid="metadata-value" type={"ui"} size={"m"} tag={"div"} className={styles["metadata-item-value"]}>
+      {count}
+    </Text>
+  );
+};
+
+interface ReportMetadataItemProps {
+  className?: string;
+  renderComponent?: FunctionalComponent<MetadataProps>;
+  props?: MetadataProps;
+}
+
+export const MetadataTestType: FunctionalComponent<MetadataProps> = ({ status, count }) => {
+  return (
+    <div data-testid="metadata-value" className={styles["metadata-test-type"]}>
+      <div className={clsx(styles["metadata-color-badge"], styles?.[`status-${status}`])} />
+      <Text type={"ui"} size={"s"}>
+        {count}
+      </Text>
+    </div>
+  );
+};
+
+const MetadataItem: FunctionalComponent<ReportMetadataItemProps> = ({
+  className,
+  renderComponent: RenderComponent = MetadataValue,
+  props,
+  ...rest
+}) => {
+  const { title } = props || {};
+
+  return (
+    <div {...rest} className={clsx("metadata-item", className)}>
+      <Text type={"ui"} size={"s"} tag={"div"} className={styles["metadata-item-title"]}>
+        {title}
+      </Text>
+      {RenderComponent ? <RenderComponent {...props} /> : <MetadataValue {...props} />}
+    </div>
+  );
+};
+
+export default MetadataItem;

package/src/components/MetadataRow/index.tsx

@@ -1,20 +1,26 @@
-import { Text } from "@allurereport/web-components";
+import { Text, TooltipWrapper } from "@allurereport/web-components";
+import clsx from "clsx";
 import type { FunctionalComponent } from "preact";
 import * as styles from "./styles.scss";
 
 export type MetadataRowProps = {
   label: string;
+  status: string;
 };
 
-export const MetadataRow: FunctionalComponent<MetadataRowProps> = ({ label, children }) => {
+export const MetadataRow: FunctionalComponent<MetadataRowProps> = ({ status, label, children }) => {
   return (
     <div className={styles["metadata-row"]}>
-      <Text type={"ui"} size={"s"} bold className={styles.label}>
-        {label}
-      </Text>
-      <Text type={"ui"} size={"s"}>
-        {children}
-      </Text>
+      <TooltipWrapper tooltipText={label}>
+        <Text
+          className={clsx(styles["metadata-row-number"], styles[`status-${status.toLowerCase()}`])}
+          type={"ui"}
+          size={"s"}
+          tag={"div"}
+        >
+          {children}
+        </Text>
+      </TooltipWrapper>
     </div>
   );
 };

package/src/components/MetadataRow/styles.scss

@@ -1,9 +1,120 @@
+@import "~@allurereport/web-components/mixins.scss";
+
 .metadata-row {
+  display: flex;
+  gap: 12px;
+  color: var(--on-text-secondary);
+}
+
+.metadata-row-number {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 8px;
+  color: var(--constant-on-text-primary);
+  border-radius: 12px;
+}
+
+.status-total {
+  color: var(--on-text-primary);
+  background: var(--bg-control-secondary);
+}
+
+.report-metadata {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.report-metadata-wrapper {
+  padding: 0 24px;
+  align-items: center;
+}
+
+.report-metadata-separator {
+  border-left: 1px solid var(--on-border-primary);
+  height: 24px;
+  margin: 11px 0;
+}
+
+.report-metadata-status {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+
+.report-metadata-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  padding: 16px 0;
+  border-top: 1px solid var(--on-border-primary);
+  border-bottom: 1px solid var(--on-border-primary);
+  width: 100%;
+}
+
+.report-metadata-all-tests {
+  display: flex;
+  gap: 24px;
+  margin-right: 8px;
+}
+
+.metadata-item-title {
+  color: var(--on-text-secondary);
+  margin-bottom: 6px;
+}
+
+.metadata-item-value {
+  font-weight: bold;
+}
+
+.report-metadata {
+  border-bottom: 1px solid var(--on-border-primary);
+}
+
+.report-metadata-keyvalue {
   display: grid;
   grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.report-metadata-keyvalue-title {
+  padding: 8px 0;
+}
+
+.report-metadata-keyvalue-value {
+  padding: 8px 0;
+}
+
+.report-metadata-list {
+  display: grid;
+  column-gap: 48px;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(5, auto);
+  grid-auto-flow: column;
+  padding-top: 16px;
+}
+
+.metadata-test-type {
+  display: flex;
   color: var(--on-text-secondary);
 }
 
-.label {
-  text-transform: capitalize;
+.metadata-color-badge {
+  width: 4px;
+  height: 12px;
+  border-radius: 2px;
+  background: var(--on-text-secondary);
+  margin-right: 8px;
+  align-self: center;
+  @include status-bg-and-text();
+}
+
+.metadata-with-icon {
+  display: flex;
+  align-items: center;
+}
+
+.metadata-icon {
+  margin-right: 8px;
+  color: var(--on-icon-secondary);
 }

package/src/components/ReportCard/index.tsx

@@ -1,8 +1,10 @@
 import { type Statistic, type TestStatus, formatDuration } from "@allurereport/core-api";
+import { capitalize } from "@allurereport/web-commons";
 import { Heading, StatusLabel, SuccessRatePieChart, Text, getChartData } from "@allurereport/web-components";
 import type { FunctionalComponent } from "preact";
-import { MetadataRow } from "@/components/MetadataRow";
-import { useI18n } from "@/stores";
+import type { MetadataProps } from "@/components/MetadataRow/MetadataItem";
+import MetadataItem, { MetadataTestType } from "@/components/MetadataRow/MetadataItem";
+import { currentLocaleIso, useI18n } from "@/stores";
 import * as styles from "./styles.scss";
 
 export type ReportCardProps = {
@@ -11,12 +13,30 @@ export type ReportCardProps = {
   status: TestStatus;
   stats: Statistic;
   duration: number;
+  plugin?: string;
+  createdAt?: number;
 };
 
-export const ReportCard: FunctionalComponent<ReportCardProps> = ({ href, status, stats, name, duration }) => {
+export const ReportCard: FunctionalComponent<ReportCardProps> = ({
+  href,
+  status,
+  stats,
+  name,
+  duration,
+  plugin,
+  createdAt,
+}) => {
   const { t } = useI18n("summary");
   const { percentage, slices } = getChartData(stats);
   const formattedDuration = formatDuration(duration);
+  const formattedCreatedAt = new Date(createdAt as number).toLocaleDateString(currentLocaleIso.value as string, {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+  });
 
   return (
     <a
@@ -26,15 +46,22 @@ export const ReportCard: FunctionalComponent<ReportCardProps> = ({ href, status,
       target={"_blank"}
       rel="noreferrer"
     >
-      <div className={styles["report-card-chart-wrapper"]}>
-        <SuccessRatePieChart className={styles["report-card-chart"]} slices={slices} percentage={percentage} />
-      </div>
-      <div>
+      <div className={styles["report-card-content"]}>
+        {plugin && (
+          <Text type={"ui"} tag={"div"} size={"s"} className={styles["report-card-plugin"]}>
+            {plugin}
+          </Text>
+        )}
         <div className={styles["report-card-title"]}>
           <Heading tag={"h2"} size={"s"}>
             {name}
           </Heading>
         </div>
+        {formattedCreatedAt && (
+          <Text tag={"div"} size={"s"} className={styles["report-card-created-at"]}>
+            {formattedCreatedAt}
+          </Text>
+        )}
         <div className={styles["report-card-status"]}>
           <StatusLabel status={status}>{t(status)}</StatusLabel>
           <Text type={"ui"} size={"s"}>
@@ -45,26 +72,36 @@ export const ReportCard: FunctionalComponent<ReportCardProps> = ({ href, status,
           </Text>
         </div>
         <div className={styles["report-card-metadata"]}>
-          <li>
-            <MetadataRow label={t("passed")}>{stats?.passed ?? 0}</MetadataRow>
-          </li>
-          <li>
-            <MetadataRow label={t("failed")}>{stats?.failed ?? 0}</MetadataRow>
-          </li>
-          <li>
-            <MetadataRow label={t("broken")}>{stats?.broken ?? 0}</MetadataRow>
-          </li>
-          <li>
-            <MetadataRow label={t("skipped")}>{stats?.skipped ?? 0}</MetadataRow>
-          </li>
-          <li>
-            <MetadataRow label={t("unknown")}>{stats?.unknown ?? 0}</MetadataRow>
-          </li>
-          <li>
-            <MetadataRow label={t("total")}>{stats?.total ?? 0}</MetadataRow>
-          </li>
+          {[
+            { label: "total", value: stats?.total },
+            { label: "failed", value: stats?.failed },
+            { label: "broken", value: stats?.broken },
+            { label: "passed", value: stats?.passed },
+            { label: "skipped", value: stats?.skipped },
+            { label: "unknown", value: stats?.unknown },
+          ]
+            .filter((item) => item.value)
+            .map(({ label, value }) => {
+              const props = {
+                title: capitalize(t(label)),
+                count: value,
+                status: label,
+              } as MetadataProps;
+
+              return (
+                <MetadataItem
+                  data-testid={`metadata-item-${label}`}
+                  key={label}
+                  props={props}
+                  renderComponent={MetadataTestType}
+                />
+              );
+            })}
         </div>
       </div>
+      <div className={styles["report-card-chart-wrapper"]}>
+        <SuccessRatePieChart className={styles["report-card-chart"]} slices={slices} percentage={percentage} />
+      </div>
     </a>
   );
 };

package/src/components/ReportCard/styles.scss

@@ -1,49 +1,57 @@
 .report-card {
   display: grid;
-  grid-template-columns: 1fr 2fr;
+  grid-template-columns: 2fr 1fr;
   gap: 0 16px;
   padding: 16px;
   height: 100%;
   text-decoration: none;
-  box-shadow: var(--shadow-small);
   background: var(--bg-base-primary);
+  border: 1px solid var(--bg-base-secondary);
   border-radius: 12px;
   cursor: pointer;
 
   &:hover {
-    box-shadow: none;
     transition: box-shadow 0.2s;
+    box-shadow: var(--shadow-small);
   }
 }
 
+.report-card-plugin {
+  color: var(--on-text-secondary);
+}
+
+.report-card-created-at {
+  margin-bottom: 8px;
+  color: var(--on-text-secondary);
+}
+
 .report-card-chart {
-  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
+  max-width: 88px;
+  max-height: 88px;
 }
 
 .report-card-chart-wrapper {
-  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
 }
 
 .report-card-title {
-  margin-bottom: 2px;
-  color: var(--on-text-secondary);
+  color: var(--on-text-primary);
 }
 
 .report-card-status {
   display: flex;
   align-items: center;
   gap: 0 4px;
-  margin-bottom: 4px;
+  margin-bottom: 16px;
   color: var(--on-text-secondary);
 }
 
 .report-card-metadata {
-  & > li {
-    &:not(:last-child) {
-      margin-bottom: 2px;
-    }
-  }
+  display: flex;
+  gap: 12px;
 }

package/src/index.tsx

@@ -36,13 +36,7 @@ const App = () => {
             {summaries.map((summary: any) => {
               return (
                 <li key={summary.output}>
-                  <ReportCard
-                    href={summary.href}
-                    name={summary.name}
-                    status={summary.status}
-                    stats={summary.stats}
-                    duration={summary.duration}
-                  />
+                  <ReportCard {...summary} />
                 </li>
               );
             })}

package/src/styles.scss

@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
-  padding: 16px 0 24px 0;
+  padding: 16px 16px 24px 16px;
   max-width: var(--showcase-width);
   margin: 0 auto;
   min-height: 100vh;
@@ -14,12 +14,9 @@
 
 .summary-showcase {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
   gap: 8px;
   margin-bottom: 40px;
-  //max-width: var(--showcase-width);
-  //margin: 0 auto;
-  //padding: 40px;
 }
 
 .summary-card {