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

package/src/components/commons/Button/styles.scss

@@ -1,560 +0,0 @@
-.button {
-  --allure-btn-height: 0px;
-  --allure-btn-padding-horizontal: 0px;
-  --allure-btn-padding-vertical: 0px;
-  --allure-btn-radius: 0px;
-  --allure-btn-border: 0px;
-  --allure-btn-leading-icon-margin-right: 0px;
-  --allure-btn-dropdown-icon-margin-left: 0px;
-  --allure-btn-focus-ring-offset: 1px;
-  --allure-btn-bg-color: transparent;
-  --allure-btn-text-color: transparent;
-  --allure-btn-icon-color: transparent;
-  --allure-btn-border-color: transparent;
-  --allure-btn-icon-base-size: 16px;
-  --allure-btn-icon-size: var(--allure-btn-icon-base-size);
-  --allure-btn-pressed-scale: 0.96;
-
-  background-color: var(--allure-btn-bg-color);
-  border: var(--allure-btn-border) solid transparent;
-  border-color: var(--allure-btn-border-color);
-  border-radius: var(--allure-btn-radius);
-  padding: calc(var(--allure-btn-padding-vertical) - var(--allure-btn-border))
-    calc(var(--allure-btn-padding-horizontal) - var(--allure-btn-border));
-  max-height: var(--allure-btn-height);
-  height: var(--allure-btn-height);
-  max-width: max-content;
-  min-width: min-content;
-  margin: 0;
-  box-sizing: border-box;
-  cursor: pointer;
-  transition:
-    transform var(--interaction-transition-duration) ease-out,
-    outline var(--interaction-transition-duration) ease-out,
-    background-color var(--color-change-transition-duration),
-    border-color var(--color-change-transition-duration);
-  transform: scale(1);
-  outline-offset: var(--allure-btn-focus-ring-offset);
-  outline: var(--allure-btn-focus-ring-offset) solid transparent;
-
-  &.fullWidth {
-    width: 100%;
-    max-width: 100%;
-  }
-
-  &:disabled .contentIcon,
-  &:disabled .leadingIcon,
-  &:disabled .dropdownIcon {
-    user-select: none;
-  }
-
-  &.buttonIcon {
-    max-height: var(--allure-btn-height);
-    min-height: var(--allure-btn-height);
-    height: var(--allure-btn-height);
-    max-width: var(--allure-btn-height);
-    min-width: var(--allure-btn-height);
-    width: var(--allure-btn-height);
-    padding: calc(
-        var(--allure-btn-padding-vertical) - var(--allure-btn-border) -
-          (var(--allure-btn-icon-size) - var(--allure-btn-icon-base-size))
-      )
-      calc(
-        var(--allure-btn-padding-horizontal) - var(--allure-btn-border) -
-          (var(--allure-btn-icon-size) - var(--allure-btn-icon-base-size))
-      );
-  }
-
-  &:focus {
-    background-color: var(--allure-btn-bg-color);
-    outline: var(--allure-btn-focus-ring-offset) solid transparent;
-  }
-
-  /* Focus ring */
-  &:focus-visible {
-    outline: var(--allure-btn-focus-ring-offset) solid var(--ad-other-focus);
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-
-  &:active {
-    transform: scale(var(--allure-btn-pressed-scale));
-  }
-
-  &.size_l {
-    --allure-btn-height: 40px;
-    --allure-btn-padding-horizontal: 12px;
-    --allure-btn-padding-vertical: 10px;
-    --allure-btn-pressed-scale: 0.96;
-    --allure-btn-radius: 6px;
-    --allure-btn-leading-icon-margin-right: 8px;
-    --allure-btn-dropdown-icon-margin-left: 4px;
-    --allure-btn-icon-size: 20px;
-
-    &.buttonIcon {
-      --allure-btn-padding-horizontal: 10px;
-      --allure-btn-padding-vertical: 10px;
-    }
-  }
-
-  &.size_m {
-    --allure-btn-height: 32px;
-    --allure-btn-padding-horizontal: 8px;
-    --allure-btn-padding-vertical: 6px;
-    --allure-btn-pressed-scale: 0.94;
-    --allure-btn-radius: 6px;
-    --allure-btn-leading-icon-margin-right: 6px;
-    --allure-btn-dropdown-icon-margin-left: 4px;
-    --allure-btn-icon-size: 20px;
-
-    &.buttonIcon {
-      --allure-btn-padding-horizontal: 6px;
-      --allure-btn-padding-vertical: 6px;
-    }
-  }
-
-  &.size_s {
-    --allure-btn-height: 24px;
-    --allure-btn-padding-horizontal: 6px;
-    --allure-btn-padding-vertical: 4px;
-    --allure-btn-pressed-scale: 0.94;
-    --allure-btn-radius: 4px;
-    --allure-btn-leading-icon-margin-right: 4px;
-    --allure-btn-dropdown-icon-margin-left: 2px;
-    --allure-btn-icon-size: 16px;
-
-    &.buttonIcon {
-      --allure-btn-padding-horizontal: 4px;
-      --allure-btn-padding-vertical: 4px;
-    }
-  }
-
-  &.icon_size_xs {
-    --allure-btn-icon-size: 12px;
-
-    &.buttonIcon {
-      --allure-btn-padding-horizontal: 0;
-      --allure-btn-icon-size: 12px;
-      --allure-btn-padding-vertical: 4px;
-      --allure-btn-height: 32px;
-      --allure-btn-width: 20px;
-      width: var(--allure-btn-width);
-      min-width: var(--allure-btn-width);
-    }
-  }
-
-  &.style_primary {
-    --allure-btn-border: 0px;
-    --allure-btn-border-color: transparent;
-    --allure-btn-bg-color: var(--bg-support-aldebaran);
-    --allure-btn-text-color: var(--constant-on-text-primary);
-    --allure-btn-icon-color: var(--constant-on-icon-primary);
-
-    &:hover {
-      --allure-btn-bg-color: var(--bg-support-aldebaran-medium);
-    }
-
-    &:focus-visible {
-      --allure-btn-bg-color: var(--bg-support-aldebaran-medium);
-    }
-
-    &:disabled {
-      --allure-btn-bg-color: var(--bg-control-secondary);
-      --allure-btn-text-color: var(--on-text-hint);
-      --allure-btn-icon-color: var(--on-icon-hint);
-    }
-
-    &:active,
-    .active {
-      --allure-btn-bg-color: var(--bg-support-aldebaran-heavy);
-    }
-  }
-
-  &.style_primary.danger {
-    --allure-btn-border-color: transparent;
-    --allure-btn-bg-color: var(--bg-support-capella);
-    --allure-btn-text-color: var(--constant-on-text-primary);
-    --allure-btn-icon-color: var(--constant-on-icon-primary);
-
-    &:hover {
-      --allure-btn-bg-color: var(--bg-support-capella-medium);
-    }
-
-    &:focus-visible {
-      --allure-btn-bg-color: var(--bg-support-capella-medium);
-    }
-
-    &:active,
-    .active {
-      --allure-btn-bg-color: var(--bg-support-capella-heavy);
-    }
-  }
-
-  &.style_primary.positive {
-    --allure-btn-border-color: transparent;
-    --allure-btn-bg-color: var(--bg-support-castor);
-    --allure-btn-text-color: var(--constant-on-text-primary);
-    --allure-btn-icon-color: var(--constant-on-icon-primary);
-
-    &:hover {
-      --allure-btn-bg-color: var(--bg-support-castor-medium);
-    }
-
-    &:focus-visible {
-      --allure-btn-bg-color: var(--bg-support-castor-medium);
-    }
-
-    &:active,
-    &.active {
-      --allure-btn-bg-color: var(--bg-support-castor-heavy);
-    }
-  }
-
-  &.style_outline {
-    --allure-btn-border: 1px;
-    --allure-btn-border-color: var(--on-border-control);
-    --allure-btn-bg-color: var(--bg-control-flat);
-    --allure-btn-text-color: var(--on-text-primary);
-    --allure-btn-icon-color: var(--on-icon-primary);
-
-    &:hover {
-      --allure-btn-bg-color: var(--bg-control-flat-medium);
-    }
-
-    &:focus-visible {
-      --allure-btn-bg-color: var(--bg-control-flat-medium);
-    }
-
-    &:active,
-    &.active {
-      --allure-btn-bg-color: var(--bg-control-flat-heavy);
-    }
-
-    &:disabled {
-      --allure-btn-border: 0px;
-      --allure-btn-border-color: transparent;
-      --allure-btn-bg-color: var(--bg-control-secondary);
-      --allure-btn-text-color: var(--on-text-hint);
-      --allure-btn-icon-color: var(--on-icon-hint);
-    }
-  }
-
-  &.style_outline.danger {
-    --allure-btn-border-color: var(--on-border-control);
-    --allure-btn-bg-color: var(--bg-control-flat);
-    --allure-btn-text-color: var(--on-support-capella);
-    --allure-btn-icon-color: var(--on-support-capella);
-
-    &:hover {
-      --allure-btn-bg-color: var(--bg-support-capella);
-    }
-
-    &:focus-visible {
-      --allure-btn-bg-color: var(--bg-support-capella);
-    }
-
-    &:active,
-    &.active {
-      --allure-btn-bg-color: var(--bg-support-capella-medium);
-    }
-  }
-
-  &.style_outline.positive {
-    --allure-btn-border-color: var(--on-border-control);
-    --allure-btn-bg-color: var(--bg-control-flat);
-    --allure-btn-text-color: var(--on-support-castor);
-    --allure-btn-icon-color: var(--on-support-castor);
-
-    &:hover {
-      --allure-btn-bg-color: var(--bg-support-castor);
-    }
-
-    &:focus-visible {
-      --allure-btn-bg-color: var(--bg-support-castor);
-    }
-
-    &:active,
-    &.active {
-      --allure-btn-bg-color: var(--bg-support-castor-medium);
-    }
-  }
-
-  &.style_ghost {
-    --allure-btn-border: 0px;
-    --allure-btn-border-color: transparent;
-    --allure-btn-bg-color: var(--bg-control-flat);
-    --allure-btn-text-color: var(--on-text-primary);
-    --allure-btn-icon-color: var(--on-icon-primary);
-
-    &:hover {
-      --allure-btn-bg-color: var(--bg-control-flat-medium);
-
-      .contentIcon,
-      .leadingIcon,
-      .dropdownIcon {
-        color: var(--allure-btn-icon-color);
-      }
-    }
-
-    &:active,
-    &.active {
-      --allure-btn-bg-color: var(--bg-control-flat-heavy);
-    }
-
-    &:disabled {
-      --allure-btn-bg-color: transparent;
-      --allure-btn-text-color: var(--on-text-hint);
-      --allure-btn-icon-color: var(--on-icon-hint);
-    }
-  }
-
-  &.style_ghost.danger {
-    --allure-btn-border: 0px;
-    --allure-btn-border-color: transparent;
-    --allure-btn-bg-color: transparent;
-    --allure-btn-text-color: var(--on-support-capella);
-    --allure-btn-icon-color: var(--on-support-capella);
-
-    &:hover {
-      --allure-btn-bg-color: var(--bg-support-capella);
-    }
-
-    &:focus-visible {
-      --allure-btn-bg-color: var(--bg-support-capella);
-    }
-
-    &:active,
-    &.active {
-      --allure-btn-bg-color: var(--bg-support-capella-medium);
-    }
-  }
-
-  &.style_ghost.positive {
-    --allure-btn-border: 0px;
-    --allure-btn-border-color: transparent;
-    --allure-btn-bg-color: transparent;
-    --allure-btn-text-color: var(--on-support-castor);
-    --allure-btn-icon-color: var(--on-support-castor);
-
-    &:hover {
-      --allure-btn-bg-color: var(--bg-support-castor);
-    }
-
-    &:focus-visible {
-      --allure-btn-bg-color: var(--bg-support-castor);
-    }
-
-    &:active,
-    &.active {
-      --allure-btn-bg-color: var(--bg-support-castor-medium);
-    }
-  }
-
-  &.style_flat {
-    --allure-btn-border: 0px;
-    --allure-btn-border-color: transparent;
-    --allure-btn-bg-color: var(--bg-control-secondary);
-    --allure-btn-text-color: var(--on-text-primary);
-    --allure-btn-icon-color: var(--on-icon-primary);
-
-    &:hover {
-      --allure-btn-bg-color: var(--bg-control-secondary-medium);
-    }
-
-    &:focus-visible {
-      --allure-btn-bg-color: var(--bg-control-secondary-medium);
-    }
-
-    &:active,
-    &.active {
-      --allure-btn-bg-color: var(--bg-control-secondary-heavy);
-    }
-
-    &:disabled {
-      --allure-btn-bg-color: var(--bg-control-secondary);
-      --allure-btn-text-color: var(--on-text-hint);
-      --allure-btn-icon-color: var(--on-icon-hint);
-    }
-  }
-
-  &.style_flat.danger {
-    --allure-btn-border-color: transparent;
-    --allure-btn-bg-color: var(--bg-support-capella);
-    --allure-btn-text-color: var(--on-support-capella);
-    --allure-btn-icon-color: var(--on-support-capella);
-
-    &:hover {
-      --allure-btn-bg-color: var(--bg-support-capella-medium);
-    }
-
-    &:focus-visible {
-      --allure-btn-bg-color: var(--bg-support-capella-medium);
-    }
-
-    &:active,
-    &.active {
-      --allure-btn-bg-color: var(--bg-alpha-capella-heavy);
-    }
-  }
-
-  &.style_flat.positive {
-    --allure-btn-border-color: transparent;
-    --allure-btn-bg-color: var(--bg-support-castor);
-    --allure-btn-text-color: var(--on-support-castor);
-    --allure-btn-icon-color: var(--on-support-castor);
-
-    &:hover {
-      --allure-btn-bg-color: var(--bg-support-castor-medium);
-    }
-
-    &:focus-visible {
-      --allure-btn-bg-color: var(--bg-support-castor-medium);
-    }
-
-    &:active,
-    &.active {
-      --allure-btn-bg-color: var(--bg-alpha-castor-heavy);
-    }
-  }
-
-  &.style_raised {
-    --allure-btn-border: 1px;
-    --allure-btn-border-color: var(--on-border-primary);
-    --allure-btn-bg-color: var(--bg-base-modal);
-    --allure-btn-text-color: var(--on-text-primary);
-    --allure-btn-icon-color: var(--on-icon-primary);
-
-    box-shadow: var(--shadow-raised);
-
-    &:hover {
-      --allure-btn-bg-color: var(--bg-control-flat-medium);
-    }
-
-    &:focus-visible {
-      --allure-btn-bg-color: var(--bg-control-flat-medium);
-    }
-
-    &:active,
-    &.active {
-      --allure-btn-bg-color: var(--bg-control-flat-heavy);
-    }
-
-    &:disabled {
-      --allure-btn-border: 0px;
-      --allure-btn-border-color: transparent;
-      --allure-btn-bg-color: var(--bg-control-secondary);
-      --allure-btn-text-color: var(--on-text-hint);
-      --allure-btn-icon-color: var(--on-icon-hint);
-
-      box-shadow: none;
-    }
-  }
-
-  &.style_raised.danger {
-    --allure-btn-text-color: var(--on-support-capella);
-    --allure-btn-icon-color: var(--on-support-capella);
-
-    &:hover {
-      --allure-btn-bg-color: var(--bg-support-capella);
-    }
-
-    &:focus-visible {
-      --allure-btn-bg-color: var(--bg-support-capella);
-    }
-
-    &:active,
-    &.active {
-      --allure-btn-bg-color: var(--bg-support-capella-medium);
-    }
-  }
-
-  &.style_raised.positive {
-    --allure-btn-text-color: var(--on-support-castor);
-    --allure-btn-icon-color: var(--on-support-castor);
-
-    &:hover {
-      --allure-btn-bg-color: var(--bg-support-castor);
-    }
-
-    &:focus-visible {
-      --allure-btn-bg-color: var(--bg-support-castor);
-    }
-
-    &:active,
-    &.active {
-      --allure-btn-bg-color: var(--bg-support-castor-medium);
-    }
-  }
-}
-
-.text {
-  color: var(--allure-btn-text-color);
-  padding: 0;
-  margin: 0;
-  white-space: nowrap;
-  user-select: none;
-}
-
-.pending .text,
-.pending .leadingIcon,
-.pending .dropdownIcon,
-.pending .contentIcon {
-  visibility: hidden;
-}
-
-.content {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  user-select: none;
-}
-
-.leadingIcon {
-  margin-right: var(--allure-btn-leading-icon-margin-right);
-}
-
-.leadingIcon,
-.contentIcon,
-.dropdownIcon {
-  width: var(--allure-btn-icon-size) !important;
-  height: var(--allure-btn-icon-size) !important;
-  color: var(--on-icon-secondary);
-  transition: color var(--color-change-transition-duration);
-  user-select: none;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.dropdownIcon {
-  margin-left: var(--allure-btn-dropdown-icon-margin-left);
-  transition:
-    transform var(--interaction-transition-duration) ease-in,
-    color var(--color-change-transition-duration);
-}
-
-.button.active .dropdownIcon {
-  transform: rotate(180deg);
-}
-
-.pending .spinner {
-  display: flex;
-}
-
-.spinner {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  user-select: none;
-  color: var(--allure-btn-icon-color);
-  display: none;
-}

package/src/components/commons/Counter/index.tsx

@@ -1,29 +0,0 @@
-import type { TestStatus } from "@allurereport/core-api";
-import { clsx } from "clsx";
-import { Text } from "@/components/commons/Typography";
-import * as styles from "./styles.scss";
-
-type Props = {
-  size?: "s" | "m" | "l";
-  count: number;
-  truncateCount?: boolean;
-  status?: TestStatus;
-};
-
-export const Counter = (props: Props) => {
-  const { count, size = "s", truncateCount = false, status } = props;
-
-  const displayedCount = truncateCount && count > 99 ? "99+" : count;
-
-  return (
-    <Text
-      tag="small"
-      size={size === "l" ? "m" : "s"}
-      type="ui"
-      bold
-      className={clsx(styles.counter, styles[`size-${size}`], status && styles[`status-${status}`])}
-    >
-      {displayedCount}
-    </Text>
-  );
-};

package/src/components/commons/Counter/styles.scss

@@ -1,21 +0,0 @@
-@import "../../../assets/scss/mixins.scss";
-
-.counter {
-  background-color: var(--bg-control-secondary);
-  color: var(--on-text-primary);
-  border-radius: 12px;
-  @include status-bg-and-text();
-
-  &.size-s {
-    padding-left: 8px;
-    padding-right: 8px;
-  }
-
-  &.size-m {
-    padding: 10px 2px;
-  }
-
-  &.size-l {
-    padding: 12px 4px;
-  }
-}

package/src/components/commons/Label/index.tsx

@@ -1,11 +0,0 @@
-import { FunctionComponent } from "preact";
-import * as styles from "@/components/commons/Label/styles.scss";
-import { Text } from "@/components/commons/Typography";
-
-export const Label: FunctionComponent = ({ children }) => (
-  <div className={styles.label}>
-    <Text size="s" bold type="ui">
-      {children}
-    </Text>
-  </div>
-);

package/src/components/commons/Label/styles.scss

@@ -1,7 +0,0 @@
-.label {
-  display: flex;
-  border: 1px solid var(--on-border-control);
-  color: var(--on-text-secondary);
-  padding: 4px 8px;
-  border-radius: 100px;
-}

package/src/components/commons/Link/index.tsx

@@ -1,20 +0,0 @@
-import { ComponentChildren } from "preact";
-import * as styles from "./styles.scss";
-
-type Props = {
-  href?: string;
-  children: ComponentChildren;
-  onClick?: (e: MouseEvent) => void;
-};
-
-export const Link = (props: Props) => {
-  const { children, onClick, href } = props;
-  const isPseudoLink = href === undefined;
-  const Tag = isPseudoLink ? "button" : "a";
-
-  return (
-    <Tag href={href} onClick={onClick} className={styles.link}>
-      {children}
-    </Tag>
-  );
-};

package/src/components/commons/Link/styles.scss

@@ -1,46 +0,0 @@
-.link {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: inherit;
-  line-height: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  font-family: inherit;
-  background-color: transparent;
-  padding: 0;
-  margin: 0;
-  text-decoration: none;
-  appearance: none;
-  border: none;
-  color: var(--on-support-aldebaran);
-  cursor: pointer;
-  outline: 1px solid transparent;
-  outline-offset: 1px;
-  transition:
-    outline var(--interaction-transition-duration) ease-out,
-    border-color var(--color-change-transition-duration);
-
-  &:hover {
-    color: var(--on-support-aldebaran-medium);
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible {
-    border-radius: 3px;
-    color: var(--on-support-aldebaran-medium);
-    outline: 1px solid var(--ad-other-focus);
-    outline-offset: 1px;
-  }
-
-  &:active {
-    color: var(--on-support-aldebaran-heavy);
-  }
-
-  &:visited {
-    color: var(--on-support-aldebaran);
-  }
-}