@allurereport/web-awesome 3.0.0-beta.8 → 3.0.0

package/dist/single/app-f16f6693.js.LICENSE.txt

@@ -1,16 +0,0 @@
-/**
- * Prism: Lightweight, robust, elegant syntax highlighting
- *
- * @license MIT <https://opensource.org/licenses/MIT>
- * @author Lea Verou <https://lea.verou.me>
- * @namespace
- * @public
- */
-
-/**
- * filesize
- *
- * @copyright 2024 Jason Mulligan <jason.mulligan@avoidwork.com>
- * @license BSD-3-Clause
- * @version 10.1.6
- */

package/src/assets/scss/code.scss

@@ -1,71 +0,0 @@
-pre[class*="language-"],
-code[class*="language-"] {
-  background: var(--bg-base-secondary);
-  font-size: 12px;
-  font-family: "JetBrains Mono", monospace;
-  color: var(--on-text-primary);
-  text-shadow: none !important;
-  margin: 0;
-}
-
-.toolbar {
-  display: none;
-}
-
-.token.number {
-  color: var(--on-support-aldebaran);
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: var(--on-support-atlas);
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: var(--on-support-castor);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: var(--on-support-sirius);
-}
-
-.token.function,
-.token.class-name {
-  color: var(--on-support-capella);
-}
-
-.token.punctuation {
-  color: var(--on-text-primary);
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-  color: var(--on-support-atlas);
-}
-
-.line-numbers,
-.line-numbers-rows {
-  border-right: none;
-  color: var(--on-text-hint);
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: var(--on-text-primary);
-  background: none;
-}

package/src/assets/scss/typography.scss

@@ -1,218 +0,0 @@
-: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/components/ArrowButton/index.tsx

@@ -1,36 +0,0 @@
-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

@@ -1,35 +0,0 @@
-.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/LanguagePicker/index.tsx

@@ -1,40 +0,0 @@
-import { DropdownButton, Menu } from "@allurereport/web-components";
-import { LANG_LOCALE, type LangLocale } from "@/i18n/constants";
-import { currentLocale } from "@/stores";
-import { setLocale } from "@/stores/locale";
-
-// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-const langPickerOptions = Object.entries(LANG_LOCALE).map(([key, { full }]) => ({
-  key: key as LangLocale,
-  value: full,
-}));
-
-export const LanguagePicker = () => {
-  const locale = currentLocale.value;
-  const handleSelect = (selectedOption: LangLocale) => {
-    setLocale(selectedOption);
-  };
-
-  return (
-    <Menu
-      size="s"
-      menuTrigger={({ isOpened, onClick }) => (
-        <DropdownButton
-          style="ghost"
-          size="s"
-          text={LANG_LOCALE[locale || "en"].short}
-          isExpanded={isOpened}
-          onClick={onClick}
-        />
-      )}
-    >
-      <Menu.Section>
-        {langPickerOptions.map(({ key, value }) => (
-          <Menu.ItemWithCheckmark onClick={() => handleSelect(key)} key={key} isChecked={locale === key}>
-            {value}
-          </Menu.ItemWithCheckmark>
-        ))}
-      </Menu.Section>
-    </Menu>
-  );
-};

package/src/components/Modal/styles.scss

@@ -1,126 +0,0 @@
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--ad-other-modal-overlay);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.modal-content {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 16px;
-  max-width: 90%;
-  max-height: 90%;
-}
-
-.modal-wrapper {
-  position: relative;
-  background: var(--bg-base-primary);
-  max-width: 90%;
-  max-height: 80vh;
-  width: 90vw;
-  min-width: 320px;
-  min-height: 320px;
-  display: flex;
-  border-radius: 16px;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  overflow: hidden;
-  z-index: 1;
-  overflow-y: auto;
-}
-
-.modal-data-component {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  pointer-events: all;
-  padding-top: 56px;
-}
-
-.modal-image {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.close-button-wrap {
-  position: absolute;
-  top: 0;
-  right: 0;
-  cursor: pointer;
-  z-index: 1;
-}
-
-.modal-buttons {
-  display: flex;
-  gap: 8px;
-  margin-left: auto;
-}
-
-.modal-button {
-}
-
-.modal-data {
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  pointer-events: none;
-  display: flex;
-  position: relative;
-}
-
-.modal-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: calc(100% - 32px);
-  position: absolute;
-  top: 16px;
-  left: 16px;
-  z-index: 1;
-}
-
-.modal-bottom {
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  color: var(--gray-neutral-0);
-}
-
-.modal-thumb {
-  display: flex;
-  justify-content: center;
-  width: 64px;
-  height: 64px;
-  border-radius: 12px;
-  background: var(--constant-bg-base-primary-night);
-  overflow: hidden;
-  border: 1px solid transparent;
-  cursor: pointer;
-  user-select: none;
-
-  &.active {
-    border: 1px solid var(--constant-on-border-heavy);
-  }
-}
-
-.modal-gallery {
-  display: flex;
-  width: 100%;
-  gap: 8px;
-  justify-content: center;
-  flex-wrap: wrap;
-}

package/src/components/ReportLogo/index.tsx

@@ -1,16 +0,0 @@
-import { getReportOptions } from "@allurereport/web-commons";
-import { SvgIcon, allureIcons } from "@allurereport/web-components";
-import { clsx } from "clsx";
-import type { AllureAwesomeReportOptions } from "types";
-import * as styles from "./styles.scss";
-
-export const ReportLogo = (props: { className?: string; logo?: never }) => {
-  const { className } = props;
-  const { logo } = getReportOptions<AllureAwesomeReportOptions>() ?? {};
-
-  return (
-    <div className={clsx(styles["report-logo"], className)}>
-      {logo ? <img src={logo} alt="report logo" /> : <SvgIcon id={allureIcons.reportLogo} inline />}
-    </div>
-  );
-};

package/src/components/ReportLogo/styles.scss

@@ -1,20 +0,0 @@
-.report-logo {
-  padding: 8px;
-  background: var(--bg-base-secondary);
-  border-radius: 8px;
-  width: 48px;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-}
-
-.text {
-  color: var(--on-text-primary);
-}

package/src/components/ReportLogoFull/index.tsx

@@ -1,20 +0,0 @@
-import { SvgIcon, allureIcons } from "@allurereport/web-components";
-import { Text } from "@allurereport/web-components";
-import { clsx } from "clsx";
-import * as styles from "./styles.scss";
-
-export const ReportLogoFull = (props: {
-  /**
-   * Additional class name
-   */
-  className?: string;
-}) => {
-  const { className } = props;
-
-  return (
-    <Text type="paragraph" size="m" bold className={clsx(className, styles.text)}>
-      <SvgIcon id={allureIcons.reportLogo} size="m" inline className={styles.logo} />
-      <span>Allure Report</span>
-    </Text>
-  );
-};

package/src/components/ReportLogoFull/styles.scss

@@ -1,7 +0,0 @@
-.logo {
-    margin-right: 8px;
-}
-
-.text {
-    color: var(--on-text-primary);
-}

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

@@ -1,27 +0,0 @@
-import type { AttachmentTestStepResult } from "@allurereport/core-api";
-import type { FunctionalComponent } from "preact";
-import type { AllureAwesomeTestResult } from "types";
-import { TestResultAttachment } from "@/components/TestResult/TestResultSteps/testResultAttachment";
-import { useI18n } from "@/stores";
-import * as styles from "./styles.scss";
-
-export type TestResultAttachmentViewProps = {
-  testResult?: AllureAwesomeTestResult;
-};
-
-export const TestResultAttachmentView: FunctionalComponent<TestResultAttachmentViewProps> = ({ testResult }) => {
-  const { attachments } = testResult ?? {};
-  const { t } = useI18n("empty");
-
-  return (
-    <div className={styles["test-result-attachments-view"]}>
-      {attachments.length ? (
-        attachments?.map((attach, key) => (
-          <TestResultAttachment item={attach as AttachmentTestStepResult} key={key} stepIndex={key + 1} />
-        ))
-      ) : (
-        <div className={styles["test-result-empty"]}>{t("no-attachments-results")}</div>
-      )}
-    </div>
-  );
-};

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

@@ -1,59 +0,0 @@
-import type { TestError } from "@allurereport/core-api";
-import { Code, IconButton, Text, TooltipWrapper, allureIcons } from "@allurereport/web-components";
-import { type FunctionalComponent } from "preact";
-import { useState } from "preact/hooks";
-import { useI18n } from "@/stores/locale";
-import { copyToClipboard } from "@/utils/copyToClipboard";
-import * as styles from "./styles.scss";
-
-const TestResultErrorTrace = ({ trace }: { trace: string }) => {
-  return (
-    <div data-testid="test-result-error-trace" className={styles["test-result-error-trace"]}>
-      <Code size={"s"} type={"ui"}>
-        <pre>{trace}</pre>
-      </Code>
-    </div>
-  );
-};
-
-export const TestResultError: FunctionalComponent<TestError> = ({ message, trace }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const { t } = useI18n("ui");
-  const { t: tooltip } = useI18n("controls");
-  const { t: empty } = useI18n("empty");
-
-  return (
-    <div data-testid="test-result-error" className={styles["test-result-error"]}>
-      {message ? (
-        <>
-          <div data-testid="test-result-error-header" className={styles["test-result-error-header"]}>
-            <Text tag={"p"} size={"m"} bold className={styles["test-result-error-text"]}>
-              {t("error")}
-            </Text>
-            <TooltipWrapper tooltipText={tooltip("clipboard")} tooltipTextAfterClick={tooltip("clipboardSuccess")}>
-              <IconButton
-                style={"ghost"}
-                size={"s"}
-                icon={allureIcons.lineGeneralCopy3}
-                onClick={() => {
-                  copyToClipboard(message);
-                }}
-              />
-            </TooltipWrapper>
-          </div>
-          <div className={styles["test-result-error-message"]} onClick={() => setIsOpen(!isOpen)}>
-            <Code data-testid="test-result-error-message" size={"s"}>
-              <pre>{message}</pre>
-            </Code>
-          </div>
-        </>
-      ) : (
-        // TODO add translations
-        empty("no-message-provided")
-      )}
-
-      {/* TODO no trace? message is still clickable */}
-      {isOpen && trace && <TestResultErrorTrace trace={trace} />}
-    </div>
-  );
-};