@snack-uikit/toaster 0.8.14-preview-abb5f7dc.0 → 0.8.14

package/src/components/ToastUpload/constants.ts

@@ -1,26 +0,0 @@
-import { ProgressBarProps } from '@snack-uikit/progress-bar';
-
-import { ToastUploadStatus } from './types';
-
-export const TOAST_UPLOAD_STATUS = {
-  Loading: 'loading',
-  Pause: 'pause',
-  Error: 'error',
-  Uploaded: 'uploaded',
-  ErrorUploaded: 'errorUploaded',
-} as const;
-
-export const TOAST_UPLOAD_ITEM_STATUS = {
-  Loading: 'loading',
-  Pause: 'pause',
-  Error: 'error',
-  Uploaded: 'uploaded',
-} as const;
-
-export const progressBarAppearanceByStatus: Record<ToastUploadStatus, ProgressBarProps['appearance']> = {
-  pause: 'neutral',
-  loading: 'green',
-  uploaded: 'green',
-  errorUploaded: 'red',
-  error: 'red',
-};

package/src/components/ToastUpload/index.ts

@@ -1 +0,0 @@
-export * from './ToastUpload';

package/src/components/ToastUpload/styles.module.scss

@@ -1,123 +0,0 @@
-/* stylelint-disable scss/operator-no-newline-after */
-
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUpload';
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
-
-.container {
-  @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUpload.$toaster-upload-toast-container);
-
-  cursor: default;
-
-  position: relative;
-
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-
-  box-sizing: border-box;
-  width: calc(
-    styles-tokens-toaster-toasterSystemEvent.$size-toaster-toast-system-event-container -
-      (2 * styles-tokens-toaster-toasterUpload.$space-toaster-toast-system-event-container-padding)
-  );
-  max-width: 100%;
-  max-height: 386px;
-  padding: styles-tokens-toaster-toasterUpload.$space-toaster-toast-system-event-container-padding 0;
-
-  background-color: styles-theme-variables.$sys-invert-neutral-background;
-
-  &[data-collapsed='false'] {
-    gap: 0;
-  }
-}
-
-.titleLine {
-  display: flex;
-  flex-direction: column;
-  padding: 0 styles-tokens-toaster-toasterUpload.$space-toaster-toast-system-event-container-padding;
-}
-
-.titleLineBody {
-  @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUpload.$toaster-upload-title-line-body);
-
-  display: flex;
-  align-items: center;
-}
-
-.title {
-  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-title-s);
-
-  flex-grow: 1;
-  color: styles-theme-variables.$sys-invert-neutral-text-main;
-}
-
-.generalProgress {
-  @include styles-theme-variables.composite-var(
-    styles-tokens-toaster-toasterUpload.$toaster-upload-title-line-general-progress
-  );
-
-  display: flex;
-  flex-direction: column;
-  align-self: stretch;
-}
-
-.statusLine {
-  @include styles-theme-variables.composite-var(
-    styles-tokens-toaster-toasterUpload.$toaster-upload-status-line-container
-  );
-
-  display: flex;
-  align-items: center;
-}
-
-.statusWrap {
-  @include styles-theme-variables.composite-var(
-    styles-tokens-toaster-toasterUpload.$toaster-upload-status-line-status-wrap
-  );
-
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-}
-
-.description {
-  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
-
-  color: styles-theme-variables.$sys-invert-neutral-text-main;
-
-  &[data-status='loading'] {
-    color: styles-theme-variables.$sys-invert-neutral-text-light;
-  }
-
-  &[data-status='uploaded'] {
-    color: styles-theme-variables.$sys-invert-neutral-text-light;
-  }
-}
-
-.totalCounter {
-  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
-
-  color: styles-theme-variables.$sys-invert-neutral-text-support;
-}
-
-.totalPercentage {
-  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
-
-  color: styles-theme-variables.$sys-invert-neutral-text-support;
-}
-
-.list {
-  overflow: scroll;
-  display: flex;
-  flex-direction: column;
-
-  max-height: 280px;
-  padding: 0 styles-tokens-toaster-toasterUpload.$space-toaster-toast-system-event-container-padding;
-
-  transition: all 0.1s;
-
-  &[data-collapsed='false'] {
-    max-height: 0;
-  }
-}

package/src/components/ToastUpload/types.ts

@@ -1,39 +0,0 @@
-import { MouseEvent } from 'react';
-
-import { ProgressBarProps } from '@snack-uikit/progress-bar';
-import { ValueOf } from '@snack-uikit/utils';
-
-import { TOAST_UPLOAD_ITEM_STATUS, TOAST_UPLOAD_STATUS } from './constants';
-
-export type ToastUploadStatus = ValueOf<typeof TOAST_UPLOAD_STATUS>;
-
-export type ToastUploadItemStatus = ValueOf<typeof TOAST_UPLOAD_ITEM_STATUS>;
-
-export type ToastUploadStateSubscription<T> = (subscription: (newValue: T) => void) => () => void;
-export type WithStateSubscription<T> = {
-  subscribeToState?: ToastUploadStateSubscription<Partial<T>>;
-} & T;
-
-export type ToastUploadItemLink = {
-  text: string;
-  href: string;
-  onClick?(e: MouseEvent<HTMLAnchorElement>): void;
-};
-
-export type UploadActions = {
-  onCancel?: () => void;
-  onPause?: () => void;
-  onRetry?: () => void;
-  onContinue?: () => void;
-};
-
-export type UploadItem = WithStateSubscription<{
-  id: string;
-  title: string;
-  status: ToastUploadItemStatus;
-  statusLabel: string;
-  progress: ProgressBarProps['progress'];
-  size: string;
-  actions: UploadActions;
-  link?: ToastUploadItemLink;
-}>;

package/src/components/ToastUpload/utils/formatPercent.ts

@@ -1 +0,0 @@
-export const formatPercent = (value: number) => `${value}%`;

package/src/components/ToastUpload/utils/index.ts

@@ -1 +0,0 @@
-export * from './formatPercent';

package/src/helperComponents/ButtonTextNeutral/ButtonTextNeutral.tsx

@@ -1,23 +0,0 @@
-import { MouseEvent } from 'react';
-
-import styles from './styles.module.scss';
-
-export type ButtonTextNeutralProps = {
-  label: string;
-  onClick(e: MouseEvent<HTMLButtonElement>): void;
-  critical?: boolean;
-};
-
-export function ButtonTextNeutral({ label, onClick, critical }: ButtonTextNeutralProps) {
-  return (
-    <button
-      type='button'
-      className={styles.buttonTextNeutral}
-      onClick={onClick}
-      aria-label='action'
-      data-critical={critical || undefined}
-    >
-      {label}
-    </button>
-  );
-}

package/src/helperComponents/ButtonTextNeutral/index.ts

@@ -1 +0,0 @@
-export * from './ButtonTextNeutral';

package/src/helperComponents/ButtonTextNeutral/styles.module.scss

@@ -1,42 +0,0 @@
-/* stylelint-disable scss/operator-no-newline-after */
-
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUpload';
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
-
-.buttonTextNeutral {
-  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
-
-  cursor: pointer;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-
-  color: styles-theme-variables.$sys-invert-neutral-text-light;
-
-  background-color: transparent;
-  border: none;
-
-  &:hover {
-    color: styles-theme-variables.$sys-invert-neutral-text-main;
-  }
-
-  &:focus,
-  &:active {
-    color: styles-theme-variables.$sys-invert-neutral-accent-pressed;
-  }
-
-  &:focus-visible {
-    @include styles-theme-variables.outline-var(styles-tokens-element.$container-focused-s);
-
-    color: styles-theme-variables.$sys-invert-neutral-text-main;
-    outline-color: styles-theme-variables.$sys-available-on-complementary;
-    outline-offset: styles-theme-variables.$spacing-state-focus-offset;
-  }
-}