@allurereport/web-summary 3.0.0-beta.11

package/src/components/MetadataRow/index.tsx

@@ -0,0 +1,20 @@
+import { Text } from "@allurereport/web-components";
+import type { FunctionalComponent } from "preact";
+import * as styles from "./styles.scss";
+
+export type MetadataRowProps = {
+  label: string;
+};
+
+export const MetadataRow: FunctionalComponent<MetadataRowProps> = ({ 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>
+    </div>
+  );
+};

package/src/components/MetadataRow/styles.scss

@@ -0,0 +1,9 @@
+.metadata-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  color: var(--on-text-secondary);
+}
+
+.label {
+  text-transform: capitalize;
+}

package/src/components/ReportCard/index.tsx

@@ -0,0 +1,70 @@
+import { type Statistic, type TestStatus, formatDuration } from "@allurereport/core-api";
+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 * as styles from "./styles.scss";
+
+export type ReportCardProps = {
+  href: string;
+  name: string;
+  status: TestStatus;
+  stats: Statistic;
+  duration: number;
+};
+
+export const ReportCard: FunctionalComponent<ReportCardProps> = ({ href, status, stats, name, duration }) => {
+  const { t } = useI18n("summary");
+  const { percentage, slices } = getChartData(stats);
+  const formattedDuration = formatDuration(duration);
+
+  return (
+    <a
+      data-testid={"summary-report-card"}
+      className={styles["report-card"]}
+      href={href}
+      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-title"]}>
+          <Heading tag={"h2"} size={"s"}>
+            {name}
+          </Heading>
+        </div>
+        <div className={styles["report-card-status"]}>
+          <StatusLabel status={status}>{t(status)}</StatusLabel>
+          <Text type={"ui"} size={"s"}>
+            {t("in")}
+          </Text>
+          <Text type={"ui"} size={"s"} bold>
+            {formattedDuration}
+          </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>
+        </div>
+      </div>
+    </a>
+  );
+};

package/src/components/ReportCard/styles.scss

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

package/src/components/ThemeButton/index.tsx

@@ -0,0 +1,20 @@
+import { IconButton, allureIcons } from "@allurereport/web-components";
+import { useEffect } from "preact/hooks";
+import { getTheme, themeStore, toggleTheme } from "@/stores/theme";
+
+export const ThemeButton = () => {
+  const theme = themeStore.value;
+
+  useEffect(() => {
+    getTheme();
+  }, []);
+
+  return (
+    <IconButton
+      onClick={toggleTheme}
+      style="ghost"
+      icon={theme === "light" ? allureIcons.lineShapesMoon : allureIcons.lineShapesSun}
+      size="s"
+    />
+  );
+};

package/src/i18n/constants.ts

@@ -0,0 +1,124 @@
+export const AVAILABLE_LOCALES = [
+  "en",
+  "ru",
+  "pl",
+  "es",
+  "pt",
+  "de",
+  "hy",
+  "az",
+  "fr",
+  "it",
+  "ja",
+  "he",
+  "ka",
+  "kr",
+  "nl",
+  "sv",
+  "tr",
+  "zh",
+] as const;
+
+export const DEFAULT_LOCALE = "en";
+
+export type LangLocale = (typeof AVAILABLE_LOCALES)[number];
+
+export const LANG_LOCALE: Record<
+  LangLocale,
+  {
+    short: string;
+    full: string;
+    iso: string;
+  }
+> = {
+  en: {
+    short: "Eng",
+    full: "English",
+    iso: "en-US",
+  },
+  ru: {
+    short: "Ру",
+    full: "Русский",
+    iso: "ru-RU",
+  },
+  pl: {
+    short: "Pl",
+    full: "Polski",
+    iso: "pl-PL",
+  },
+  es: {
+    short: "Es",
+    full: "Español",
+    iso: "es-ES",
+  },
+  pt: {
+    short: "Pt",
+    full: "Português",
+    iso: "pt-PT",
+  },
+  de: {
+    short: "De",
+    full: "Deutsch",
+    iso: "de-DE",
+  },
+  hy: {
+    short: "Hy",
+    full: "Հայերեն",
+    iso: "hy-AM",
+  },
+  az: {
+    short: "Az",
+    full: "Azərbaycan",
+    iso: "az-AZ",
+  },
+  fr: {
+    short: "Fr",
+    full: "Français",
+    iso: "fr-FR",
+  },
+  it: {
+    short: "It",
+    full: "Italiano",
+    iso: "it-IT",
+  },
+  ja: {
+    short: "Ja",
+    full: "日本語",
+    iso: "ja-JP",
+  },
+  he: {
+    short: "He",
+    full: "עברית",
+    iso: "he-IL",
+  },
+  ka: {
+    short: "Ka",
+    full: "ქართული",
+    iso: "ka-GE",
+  },
+  kr: {
+    short: "Kr",
+    full: "한국어",
+    iso: "kr-KR",
+  },
+  nl: {
+    short: "Nl",
+    full: "Nederlands",
+    iso: "nl-NL",
+  },
+  sv: {
+    short: "Sv",
+    full: "Svenska",
+    iso: "sv-SE",
+  },
+  tr: {
+    short: "Tr",
+    full: "Türkçe",
+    iso: "tr-TR",
+  },
+  zh: {
+    short: "Zh",
+    full: "中文",
+    iso: "zh-CN",
+  },
+};

package/src/i18n/locales/az.json

@@ -0,0 +1,14 @@
+{
+  "summary": {
+    "passed": "keçdi",
+    "failed": "uğursuz",
+    "broken": "sınıq",
+    "skipped": "keçildi",
+    "unknown": "naməlum",
+    "total": "cəmi",
+    "in": "içində"
+  },
+  "empty": {
+    "no-reports": "Hesabat tapılmadı"
+  }
+}

package/src/i18n/locales/de.json

@@ -0,0 +1,14 @@
+{
+  "summary": {
+    "passed": "bestanden",
+    "failed": "fehlgeschlagen",
+    "broken": "defekt",
+    "skipped": "übersprungen",
+    "unknown": "unbekannt",
+    "total": "gesamt",
+    "in": "in"
+  },
+  "empty": {
+    "no-reports": "Keine Berichte gefunden"
+  }
+}

package/src/i18n/locales/en.json

@@ -0,0 +1,14 @@
+{
+  "summary": {
+    "passed": "passed",
+    "failed": "failed",
+    "broken": "broken",
+    "skipped": "skipped",
+    "unknown": "unknown",
+    "total": "total",
+    "in": "in"
+  },
+  "empty": {
+    "no-reports": "No reports found"
+  }
+}

package/src/i18n/locales/es.json

@@ -0,0 +1,14 @@
+{
+  "summary": {
+    "passed": "aprobado",
+    "failed": "fallido",
+    "broken": "roto",
+    "skipped": "omitido",
+    "unknown": "desconocido",
+    "total": "total",
+    "in": "en"
+  },
+  "empty": {
+    "no-reports": "No se encontraron informes"
+  }
+}

package/src/i18n/locales/fr.json

@@ -0,0 +1,14 @@
+{
+  "summary": {
+    "passed": "réussi",
+    "failed": "échoué",
+    "broken": "cassé",
+    "skipped": "ignoré",
+    "unknown": "inconnu",
+    "total": "total",
+    "in": "dans"
+  },
+  "empty": {
+    "no-reports": "Aucun rapport trouvé"
+  }
+}

package/src/i18n/locales/he.json

@@ -0,0 +1,14 @@
+{
+  "summary": {
+    "passed": "עבר",
+    "failed": "נכשל",
+    "broken": "שבור",
+    "skipped": "דלג",
+    "unknown": "לא ידוע",
+    "total": "סה\"כ",
+    "in": "ב-"
+  },
+  "empty": {
+    "no-reports": "לא נמצאו דוחות"
+  }
+}

package/src/i18n/locales/hy.json

@@ -0,0 +1,13 @@
+{
+  "summary": {
+    "passed": "անցած",
+    "failed": "ձախողված",
+    "broken": "կոտրված",
+    "skipped": "բաց թողնված",
+    "unknown": "անհայտ",
+    "in": "մեջ"
+  },
+  "empty": {
+    "no-reports": "Ոչ մի հաշվետվություն չի գտնվել"
+  }
+}

package/src/i18n/locales/it.json

@@ -0,0 +1,14 @@
+{
+  "summary": {
+    "passed": "superato",
+    "failed": "fallito",
+    "broken": "rotto",
+    "skipped": "saltato",
+    "unknown": "sconosciuto",
+    "total": "totale",
+    "in": "in"
+  },
+  "empty": {
+    "no-reports": "Nessun report trovato"
+  }
+}

package/src/i18n/locales/ja.json

@@ -0,0 +1,14 @@
+{
+  "summary": {
+    "passed": "成功",
+    "failed": "失敗",
+    "broken": "壊れた",
+    "skipped": "スキップ",
+    "unknown": "不明",
+    "total": "合計",
+    "in": "中"
+  },
+  "empty": {
+    "no-reports": "レポートが見つかりません"
+  }
+}

package/src/i18n/locales/ka.json

@@ -0,0 +1,14 @@
+{
+  "summary": {
+    "passed": "წარმატებული",
+    "failed": "წარუმატებელი",
+    "broken": "დამტვრეული",
+    "skipped": "გამოტოვებული",
+    "unknown": "უცნობი",
+    "total": "ჯამი",
+    "in": "ში"
+  },
+  "empty": {
+    "no-reports": "არ მოიძებნა არცერთი ანგარიში"
+  }
+}

package/src/i18n/locales/kr.json

@@ -0,0 +1,14 @@
+{
+  "summary": {
+    "passed": "통과",
+    "failed": "실패",
+    "broken": "손상됨",
+    "skipped": "건너뜀",
+    "unknown": "알 수 없음",
+    "total": "총계",
+    "in": "중"
+  },
+  "empty": {
+    "no-reports": "보고서가 없습니다"
+  }
+}

package/src/i18n/locales/nl.json

@@ -0,0 +1,14 @@
+{
+  "summary": {
+    "passed": "geslaagd",
+    "failed": "mislukt",
+    "broken": "gebroken",
+    "skipped": "overgeslagen",
+    "unknown": "onbekend",
+    "total": "totaal",
+    "in": "in"
+  },
+  "empty": {
+    "no-reports": "Geen rapporten gevonden"
+  }
+}

package/src/i18n/locales/pl.json

@@ -0,0 +1,14 @@
+{
+  "summary": {
+    "passed": "zdany",
+    "failed": "niezdany",
+    "broken": "zepsuty",
+    "skipped": "pominięty",
+    "unknown": "nieznany",
+    "total": "wszystkie",
+    "in": "za"
+  },
+  "empty": {
+    "no-reports": "Brak raportów"
+  }
+}

package/src/i18n/locales/pt.json

@@ -0,0 +1,14 @@
+{
+  "summary": {
+    "passed": "aprovado",
+    "failed": "falhou",
+    "broken": "quebrado",
+    "skipped": "ignorado",
+    "unknown": "desconhecido",
+    "total": "total",
+    "in": "em"
+  },
+  "empty": {
+    "no-reports": "Nenhum relatório encontrado"
+  }
+}

package/src/i18n/locales/ru.json

@@ -0,0 +1,14 @@
+{
+  "summary": {
+    "passed": "успешный",
+    "failed": "неуспешный",
+    "broken": "сломанный",
+    "skipped": "пропущенный",
+    "unknown": "неизвестный",
+    "total": "все",
+    "in": "за"
+  },
+  "empty": {
+    "no-reports": "Отчеты не найдены"
+  }
+}

package/src/i18n/locales/sv.json

@@ -0,0 +1,14 @@
+{
+  "summary": {
+    "passed": "godkänd",
+    "failed": "misslyckad",
+    "broken": "trasig",
+    "skipped": "hoppad över",
+    "unknown": "okänd",
+    "total": "totalt",
+    "in": "i"
+  },
+  "empty": {
+    "no-reports": "Inga rapporter"
+  }
+}

package/src/i18n/locales/tr.json

@@ -0,0 +1,14 @@
+{
+  "summary": {
+    "passed": "başarılı",
+    "failed": "başarısız",
+    "broken": "bozuk",
+    "skipped": "atlandı",
+    "unknown": "bilinmeyen",
+    "total": "toplam",
+    "in": "içinde"
+  },
+  "empty": {
+    "no-reports": "Rapor bulunamadı"
+  }
+}

package/src/i18n/locales/zh.json

@@ -0,0 +1,14 @@
+{
+  "summary": {
+    "passed": "通过",
+    "failed": "失败",
+    "broken": "损坏",
+    "skipped": "跳过",
+    "unknown": "未知",
+    "total": "总计",
+    "in": "在"
+  },
+  "empty": {
+    "no-reports": "未找到报告"
+  }
+}

package/src/index.html

@@ -0,0 +1,89 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Allure Report</title>
+    <link rel="icon" href="data:image/svg+xml,%3Csvg width='32' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.232 4.662a3.6 3.6 0 0 1 5.09.035c2.855 2.894 4.662 6.885 4.662 11.295a3.6 3.6 0 0 1-7.2 0c0-2.406-.981-4.61-2.587-6.24a3.6 3.6 0 0 1 .035-5.09Z' fill='url(%23a)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.392 3.6a3.6 3.6 0 0 1 3.6-3.6c4.41 0 8.401 1.807 11.296 4.662a3.6 3.6 0 1 1-5.056 5.126C20.602 8.18 18.398 7.2 15.992 7.2a3.6 3.6 0 0 1-3.6-3.6Z' fill='url(%23b)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 15.992C0 7.157 7.157 0 15.992 0a3.6 3.6 0 0 1 0 7.2A8.789 8.789 0 0 0 7.2 15.992c0 2.406.981 4.61 2.588 6.24a3.6 3.6 0 0 1-5.126 5.056C1.807 24.393 0 20.402 0 15.992Z' fill='url(%23c)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.661 22.232a3.6 3.6 0 0 1 5.091-.035c1.63 1.606 3.834 2.587 6.24 2.587a3.6 3.6 0 0 1 0 7.2c-4.41 0-8.401-1.807-11.295-4.661a3.6 3.6 0 0 1-.036-5.091Z' fill='url(%23d)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.384 12.392a3.6 3.6 0 0 1 3.6 3.6c0 8.835-7.157 15.992-15.992 15.992a3.6 3.6 0 0 1 0-7.2 8.789 8.789 0 0 0 8.792-8.792 3.6 3.6 0 0 1 3.6-3.6Z' fill='url(%23e)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.385 12.392a3.6 3.6 0 0 1 3.6 3.6v12.392a3.6 3.6 0 0 1-7.2 0V15.992a3.6 3.6 0 0 1 3.6-3.6Z' fill='url(%23f)'/%3E%3Cg clip-path='url(%23g)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22.232 4.662a3.6 3.6 0 0 1 5.091.035c2.855 2.894 4.662 6.885 4.662 11.295a3.6 3.6 0 0 1-7.2 0c0-2.406-.982-4.61-2.588-6.24a3.6 3.6 0 0 1 .035-5.09Z' fill='url(%23h)'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='a' x1='26.4' y1='9.6' x2='28.8' y2='15' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%237E22CE'/%3E%3Cstop offset='1' stop-color='%238B5CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='26.8' y1='9.4' x2='17.8' y2='3.6' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EF4444'/%3E%3Cstop offset='1' stop-color='%23DC2626'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='3.6' y1='14' x2='5.4' y2='24.8' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2322C55E'/%3E%3Cstop offset='1' stop-color='%2315803D'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='4.8' y1='22.2' x2='14.4' y2='29.2' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2394A3B8'/%3E%3Cstop offset='.958' stop-color='%2364748B'/%3E%3Cstop offset='1' stop-color='%2364748B'/%3E%3C/linearGradient%3E%3ClinearGradient id='e' x1='28.4' y1='22.173' x2='22.188' y2='28.384' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D97706'/%3E%3Cstop offset='1' stop-color='%23FBBF24'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='29.2' y1='54.4' x2='30.626' y2='54.256' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FBBF24'/%3E%3Cstop offset='1' stop-color='%23FBBF24'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='26.4' y1='9.6' x2='28.8' y2='15' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%237E22CE'/%3E%3Cstop offset='1' stop-color='%238B5CF6'/%3E%3C/linearGradient%3E%3CclipPath id='g'%3E%3Cpath fill='%23fff' transform='translate(24.8 12)' d='M0 0h7.2v8H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E" />
+    <base href="http://localhost:8080" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script>
+      window.allure = window.allure || {};
+    </script>
+
+    <script>
+      const { origin, pathname } = window.location;
+      const url = new URL(pathname, origin);
+      const baseEl = document.createElement("base");
+
+      baseEl.href = url.toString();
+
+      window.document.head.appendChild(baseEl);
+    </script>
+    <script>
+      window.reportSummaries = [
+        {
+          name: "First sample report",
+          href: "#",
+          stats: {
+            passed: 100,
+            failed: 31,
+            broken: 5,
+            skipped: 1,
+            unknown: 2,
+            total: 139
+          },
+          duration: 1240812,
+          status: "failed",
+        },
+        {
+          name: "Second sample report with longer title",
+          href: "#",
+          stats: {
+            passed: 67,
+            total: 67
+          },
+          duration: 31290,
+          status: "passed",
+        },
+        {
+          name: "Third report",
+          href: "#",
+          stats: {
+            passed: 12,
+            broken: 48,
+            total: 60
+          },
+          duration: 512341,
+          status: "broken",
+        },
+        {
+          name: "Fourth report",
+          href: "#",
+          stats: {
+            passed: 10,
+            unknown: 4,
+            broken: 1,
+            total: 15
+          },
+          duration: 12341,
+          status: "broken",
+        },
+        {
+          name: "Fifth report with a very long title that should not be truncated and should be displayed in full",
+          href: "#",
+          stats: {
+            skipped: 1,
+            unknown: 1,
+            total: 2
+          },
+          duration: 0,
+          status: "unknown",
+        },
+      ]
+    </script>
+    <script async>
+      window.allureReportDataReady = true;
+    </script>
+  </body>
+</html>