@allurereport/web-classic 3.0.0-beta.10

package/src/assets/scss/typography.scss

@@ -0,0 +1,218 @@
+:root {
+  --font-family: "PTRootUIWebVF", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  --font-family-mono: "JetBrainsMonoVF", ui-monospace, monospace;
+
+  /* line-heights */
+  --line-height-xxl: 40px;
+  --line-height-xl: 32px;
+  --line-height-l: 24px;
+  --line-height-m: 20px;
+  --line-height-s: 16px;
+
+  /* font-sizes */
+  --font-size-3xl: 36px;
+  --font-size-2xl: 24px;
+  --font-size-xl: 18px;
+  --font-size-l: 16px;
+  --font-size-m: 14px;
+  --font-size-m-code: 13px;
+  --font-size-s: 12px;
+  --font-size-xs: 11px;
+}
+
+:root[data-os="mac"] {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  --font-weight-normal: 425;
+  --font-weight-bold: 625;
+  --font-weight-extra-bold: 700;
+}
+
+/* For non macos users font weights are different and nor antialiased */
+:root:not([data-os="mac"]) {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+
+  --font-weight-normal: 400;
+  --font-weight-bold: 600;
+  --font-weight-extra-bold: 700;
+}
+
+body {
+  /* paragraphs-text-m  */
+  font-size: var(--font-size-m);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.headings-head-l) {
+  font-size: var(--font-size-3xl);
+  line-height: var(--line-height-xxl);
+  font-weight: var(--font-weight-extra-bold);
+  letter-spacing: -0.016em; // -1.6%
+  font-family: var(--font-family);
+}
+
+:global(.headings-head-m) {
+  font-size: var(--font-size-2xl);
+  line-height: var(--line-height-xl);
+  font-weight: var(--font-weight-extra-bold);
+  letter-spacing: -0.016em; // -1.6%
+  font-family: var(--font-family);
+}
+
+:global(.headings-head-s) {
+  font-size: var(--font-size-xl);
+  line-height: var(--line-height-l);
+  font-weight: var(--font-weight-extra-bold);
+  letter-spacing: -0.01em; // -1%
+  font-family: var(--font-family);
+}
+
+:global(.paragraphs-text-l-bold) {
+  font-size: var(--font-size-l);
+  line-height: var(--line-height-l);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.paragraphs-text-l) {
+  font-size: var(--font-size-l);
+  line-height: var(--line-height-l);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.paragraphs-text-m-bold) {
+  font-size: var(--font-size-m);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.paragraphs-text-m) {
+  font-size: var(--font-size-m);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.paragraphs-text-s-bold) {
+  font-size: var(--font-size-s);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.paragraphs-text-s) {
+  font-size: var(--font-size-s);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.paragraphs-code-m) {
+  font-size: var(--font-size-m-code);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family-mono);
+}
+
+:global(.paragraphs-code-s) {
+  font-size: var(--font-size-s);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family-mono);
+}
+
+:global(.ui-text-l-ui-bold) {
+  font-size: var(--font-size-l);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.ui-text-l-ui) {
+  font-size: var(--font-size-l);
+  line-height: var(--line-height-m);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.ui-text-m-ui-bold) {
+  font-size: var(--font-size-m);
+  line-height: var(--line-height-s);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.ui-text-m-ui) {
+  font-size: var(--font-size-m);
+  line-height: var(--line-height-s);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.ui-text-s-ui-bold) {
+  font-size: var(--font-size-s);
+  line-height: var(--line-height-s);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.ui-text-s-ui) {
+  font-size: var(--font-size-s);
+  line-height: var(--line-height-s);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.ui-text-xs-ui-bold) {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-s);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.ui-text-xs-ui) {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-s);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family);
+}
+
+:global(.ui-code-m-ui) {
+  font-size: var(--font-size-m-code);
+  line-height: var(--line-height-s);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family-mono);
+}
+
+:global(.ui-code-s-ui) {
+  font-size: var(--font-size-s);
+  line-height: var(--line-height-s);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: 0;
+  font-family: var(--font-family-mono);
+}

package/src/assets/scss/vars.scss

@@ -0,0 +1,8 @@
+:root {
+  --shadow-small: 0px 2px 10px 0px rgba(48, 57, 64, 0.08);
+  --shadow-medium: 0px 8px 24px 0px rgba(48, 57, 64, 0.12);
+  --shadow-raised: 0px 2px 6px 0px rgba(48, 57, 64, 0.08);
+
+  --color-change-transition-duration: 0.15s;
+  --interaction-transition-duration: 0.1s;
+}

package/src/components/ArrowButton/index.tsx

@@ -0,0 +1,36 @@
+import { SvgIcon, allureIcons } from "@allurereport/web-components";
+import { clsx } from "clsx";
+import type { FunctionalComponent } from "preact";
+import * as styles from "./styles.scss";
+
+export interface ArrowButtonProps {
+  isOpened?: boolean;
+  iconSize?: "m" | "xs" | "s";
+  buttonSize?: "m" | "xs" | "s";
+  className?: string;
+  icon?: string;
+}
+
+export const ArrowButton: FunctionalComponent<ArrowButtonProps> = ({
+  isOpened,
+  buttonSize = "m",
+  iconSize = "xs",
+  className,
+  icon = allureIcons.lineArrowsChevronDown,
+  ...rest
+}) => {
+  return (
+    <button className={clsx(styles["arrow-button"], styles[`arrow-button-${buttonSize}`])} {...rest}>
+      <SvgIcon
+        id={icon}
+        size={iconSize}
+        className={clsx(
+          styles["arrow-button-icon"],
+          isOpened && styles["arrow-button-icon--opened"],
+          styles[`icon-size-${iconSize}`],
+          className,
+        )}
+      />
+    </button>
+  );
+};

package/src/components/ArrowButton/styles.scss

@@ -0,0 +1,35 @@
+.arrow-button {
+  background: transparent;
+  border: none;
+  padding: 8px 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--on-icon-secondary);
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+    color: var(--on-icon-primary);
+  }
+}
+
+.arrow-button-s {
+  padding: 0 4px;
+}
+
+.arrow-button-m {
+  padding: 6px 6px;
+}
+
+.icon-size-m {
+  width: 15px;
+  height: 15px;
+}
+
+.arrow-button-icon {
+  transform: rotate(-90deg);
+  transition: transform 200ms;
+}
+
+.arrow-button-icon--opened {
+  transform: rotate(0);
+}

package/src/components/BaseLayout/index.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from "preact/hooks";
+import Modal from "@/components/Modal";
+import SideNav from "@/components/SideNav/SideNav";
+import { fetchStats } from "@/stores";
+import { route } from "@/stores/router";
+import { testResultStore } from "@/stores/testResults";
+import * as styles from "./styles.scss";
+
+export const BaseLayout = ({ children }) => {
+  const { testResultId } = route.value.params;
+  const testResult = testResultStore.value;
+
+  useEffect(() => {
+    fetchStats();
+  }, []);
+  return (
+    <div className={styles.layout}>
+      <SideNav />
+      {children}
+      <Modal testResult={testResult.data?.[testResultId]} />
+    </div>
+  );
+};

package/src/components/BaseLayout/styles.scss

@@ -0,0 +1,63 @@
+.layout {
+  margin: auto;
+  //padding: 12px 32px;
+  background: var(--bg-base-primary);
+  color: var(--on-text-primary);
+  font-size: 14px;
+  height: 100vh;
+  display: flex;
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.wrapper {
+  //max-width: 920px;
+  width: 100%;
+  flex-direction: column;
+  //margin: auto;
+}
+
+.content {
+  box-shadow: var(--shadow-small);
+  background: var(--bg-base-primary);
+  border-radius: 12px;
+  width: 100%;
+}
+
+.test-results {
+  min-height: 320px;
+  padding-bottom: 32px;
+  padding-top: 12px;
+}
+
+.logo {
+  display: inline-block;
+  margin-bottom: 12px;
+}
+
+.title {
+  font-size: 14px;
+  line-height: 1.25;
+  color: var(--on-text-primary);
+  margin-bottom: 8px;
+}
+
+.above {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-bottom: 12px;
+  align-items: center;
+}
+
+.below {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 16px;
+  align-items: center;
+}
+
+.test-result-errors {
+  padding: 0 24px;
+  margin-top: 12px;
+}

package/src/components/Behaviors/BehaviorsList.tsx

@@ -0,0 +1,67 @@
+import { Button, Loadable, PageLoader, Text } from "@allurereport/web-components";
+import { useEffect } from "preact/hooks";
+import type { AwesomeStatus } from "types";
+import Tree from "@/components/Tree/Tree";
+import {
+  behaviorsStore,
+  clearBehaviorsFilters,
+  filteredBehaviors,
+  noTests,
+  noTestsFound,
+  setBehaviorsStatus,
+} from "@/stores/behaviors";
+import { useI18n } from "@/stores/locale";
+import { currentTab } from "@/stores/tabs";
+import * as styles from "./styles.scss";
+
+export const BehaviorsList = () => {
+  const { t } = useI18n("empty");
+
+  useEffect(() => {
+    setBehaviorsStatus(currentTab.value as AwesomeStatus);
+  }, [currentTab.value]);
+
+  return (
+    <Loadable
+      source={behaviorsStore}
+      renderLoader={() => <PageLoader />}
+      renderData={() => {
+        if (noTests.value) {
+          return (
+            <div className={styles["tree-list"]}>
+              <div className={styles["tree-empty-results"]}>
+                <Text className={styles["tree-empty-results-title"]}>{t("no-results")}</Text>
+              </div>
+            </div>
+          );
+        }
+
+        if (noTestsFound.value) {
+          return (
+            <div className={styles["tree-list"]}>
+              <div className={styles["tree-empty-results"]}>
+                <Text tag="p" className={styles["tree-empty-results-title"]}>
+                  {t("no-tests-found")}
+                </Text>
+                <Button
+                  className={styles["tree-empty-results-clear-button"]}
+                  type="button"
+                  text={t("clear-filters")}
+                  size={"s"}
+                  style={"outline"}
+                  onClick={() => clearBehaviorsFilters()}
+                />
+              </div>
+            </div>
+          );
+        }
+
+        return (
+          <div className={styles["tree-list"]}>
+            <Tree tree={filteredBehaviors.value} statusFilter={currentTab.value as AwesomeStatus} root />
+          </div>
+        );
+      }}
+    />
+  );
+};

package/src/components/Behaviors/index.tsx

@@ -0,0 +1,60 @@
+import { Heading, Loadable, PageLoader } from "@allurereport/web-components";
+import { useEffect } from "preact/compat";
+import { BehaviorsList } from "@/components/Behaviors/BehaviorsList";
+import { HeaderActions } from "@/components/HeaderActions/HeaderActions";
+import SideBySide from "@/components/SideBySide";
+import TestResult from "@/components/TestResult";
+import { useI18n } from "@/stores";
+import { fetchBehaviorsData } from "@/stores/behaviors";
+import { route } from "@/stores/router";
+import { fetchTestResult, testResultStore } from "@/stores/testResults";
+import * as styles from "./styles.scss";
+
+const Behaviors = () => {
+  const { params } = route.value;
+  const { testResultId } = params;
+
+  useEffect(() => {
+    fetchBehaviorsData();
+  }, []);
+
+  useEffect(() => {
+    if (testResultId) {
+      fetchTestResult(testResultId);
+    }
+  }, [testResultId]);
+
+  const testResult = (
+    <Loadable
+      source={testResultStore}
+      renderLoader={() => <PageLoader />}
+      transformData={(data) => data[testResultId]}
+      renderError={() => <div />}
+      renderData={(testResultItem) => (
+        <>
+          <div className={styles.wrapper} key={testResultItem?.id}>
+            <TestResult testResult={testResultItem} />
+          </div>
+        </>
+      )}
+    />
+  );
+
+  const BehaviorsSide = () => {
+    const { t } = useI18n("nav");
+    return (
+      <div className={styles.suites}>
+        <Heading size={"s"} className={styles["suites-title"]}>
+          {t("behaviors")}
+        </Heading>
+
+        <HeaderActions />
+        <BehaviorsList />
+      </div>
+    );
+  };
+
+  return <SideBySide left={<BehaviorsSide />} right={testResult} />;
+};
+
+export default Behaviors;

package/src/components/Behaviors/styles.scss

@@ -0,0 +1,196 @@
+.suites {
+  padding: 8px;
+}
+.suites-title {
+  display: flex;
+  margin-bottom: 24px;
+}
+.wrapper {
+  display: flex;
+}
+
+.tree {
+  position: relative;
+
+  &:not(:first-child) {
+    border-top: 1px solid var(--on-border-muted);
+  }
+}
+
+.tree-list {
+  min-height: 128px;
+}
+
+.tree-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transition: background-color 300ms;
+  cursor: pointer;
+  padding: 4px 8px 4px 6px;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+}
+
+.tree-header-arrow {
+  transform: rotate(-90deg);
+  transition: transform 200ms;
+}
+
+.tree-header-arrow-opened {
+  transform: rotate(0);
+}
+
+.tree-header-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 24px;
+}
+
+.tree-count {
+  display: flex;
+}
+
+.tree-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 8px 6px 6px;
+  transition: background-color 300ms;
+  gap: 4px;
+  cursor: pointer;
+  position: relative;
+
+  &:hover {
+    background: var(--bg-control-flat-medium);
+  }
+
+  &:not(:first-child) {
+    border-top: 1px solid var(--on-border-muted);
+  }
+}
+.tree-item-marked {
+  background: var(--bg-base-secondary);
+}
+
+.item-title {
+  display: flex;
+}
+
+.item-time {
+  flex: none;
+  margin-left: auto;
+  color: var(--on-text-hint);
+}
+
+.test-count {
+  display: flex;
+  margin-left: auto;
+}
+
+.tree-content:not(.root) {
+  display: block;
+  padding-left: 24px;
+  margin-bottom: 12px;
+  border-top: 1px solid var(--on-border-muted);
+}
+
+.tree-item-icon {
+  padding: 2px 4px;
+  height: max-content;
+}
+
+.status-passed {
+  color: var(--bg-support-castor);
+}
+
+.status-failed {
+  color: var(--bg-support-capella);
+}
+
+.status-broken {
+  color: var(--bg-support-atlas);
+}
+
+.status-skipped {
+  color: var(--bg-support-rau);
+}
+
+.status-unknown {
+  color: var(--bg-support-skat);
+}
+
+.tree-header-bar {
+  display: inline-flex;
+  font-family: var(--font-family);
+  max-width: 140px;
+  min-width: 46px;
+  border-radius: 4px;
+  height: 12px;
+  background: var(--on-text-hint);
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: var(--font-weight-extra-bold);
+  line-height: 12px;
+  overflow: hidden;
+}
+
+.tree-header-bar-item {
+  display: flex;
+  min-width: 16px;
+  justify-content: center;
+  text-align: center;
+  padding: 0 6px;
+  flex-grow: 1;
+
+  &.passed {
+    background-color: var(--bg-support-castor);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.failed {
+    background-color: var(--bg-support-capella);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.broken {
+    background-color: var(--bg-support-atlas);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.skipped {
+    background-color: var(--bg-support-rau);
+    color: var(--constant-on-text-primary);
+  }
+
+  &.unknown {
+    background-color: var(--bg-support-skat);
+    color: var(--constant-on-text-primary);
+  }
+}
+
+.tree-empty-results {
+  padding: 44px 24px;
+  text-align: center;
+}
+
+.tree-empty-results-title {
+  color: var(--on-text-secondary);
+}
+
+.tree-empty-results-clear-button {
+  margin-top: 4px;
+}
+
+.order {
+  user-select: none;
+  color: var(--on-text-hint);
+  min-width: 16px;
+  text-align: center;
+  box-sizing: content-box;
+  padding-top: 2px;
+  line-height: 16px;
+  width: 24px;
+}