@snack-uikit/alert 0.8.7 → 0.9.0

package/dist/helperComponents/AlertTopButton/AlertTopButton.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { APPEARANCE_TO_COLOR_MAP_INVERT } from '../../components/AlertTop/constants';
-import styles from './styles.module.css';
-export function AlertTopButton({ appearance, buttonText, buttonIcon, buttonOnClick }) {
-    return (_jsxs("button", { onClick: buttonOnClick, className: styles.alertTopButton, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], children: [_jsx("span", { children: buttonText }), buttonIcon] }));
-}

package/dist/helperComponents/AlertTopButton/index.d.ts

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

package/dist/helperComponents/AlertTopButton/index.js

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

package/dist/helperComponents/AlertTopButton/styles.module.css

@@ -1,55 +0,0 @@
-.alertTopButton{
-  height:var(--size-alert-top-button, 32px);
-  gap:var(--space-alert-top-button-gap, 4px);
-  border-radius:var(--radius-alert-top-button, 12px);
-  padding-left:var(--space-alert-top-button-horizontal-padding, 12px);
-  padding-right:var(--space-alert-top-button-horizontal-padding, 12px);
-  font-family:var(--sans-label-l-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-l-font-weight, Semibold);
-  line-height:var(--sans-label-l-line-height, 20px);
-  font-size:var(--sans-label-l-font-size, 14px);
-  letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
-  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
-  cursor:pointer;
-  display:flex;
-  align-items:center;
-  box-sizing:border-box;
-  margin:0;
-  margin-left:auto;
-  white-space:nowrap;
-  background:var(--sys-opacity-enabled, rgba(255, 255, 255, 0.1607843137));
-  border:0;
-}
-.alertTopButton svg{
-  width:var(--size-icon-container-s, 24px) !important;
-  height:var(--size-icon-container-s, 24px) !important;
-}
-.alertTopButton:hover{
-  opacity:unset;
-  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
-}
-.alertTopButton:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
-  outline-color:var(--sys-available-on-complementary, #ffffff);
-}
-.alertTopButton:active{
-  background-color:var(--sys-opacity-activated, rgba(255, 255, 255, 0.3215686275));
-}
-.alertTopButton[data-color=invert-neutral]{
-  color:var(--sys-invert-neutral-text-main, #e8eaf1);
-}
-.alertTopButton[data-color=primary]{
-  color:var(--sys-primary-on-accent, #fdfbff);
-}
-.alertTopButton[data-color=red]{
-  color:var(--sys-red-on-accent, #fffbf9);
-}
-.alertTopButton[data-color=yellow]{
-  color:var(--sys-yellow-on-accent, #5e3d06);
-}
-.alertTopButton[data-color=green]{
-  color:var(--sys-green-on-accent, #fcfefa);
-}

package/src/helperComponents/AlertButton/AlertButton.tsx

@@ -1,26 +0,0 @@
-import { MouseEvent, ReactElement } from 'react';
-
-import { APPEARANCE_TO_COLOR_MAP } from '../../constants';
-import { Appearance } from '../../types';
-import styles from './styles.module.scss';
-
-export type AlertButtonProps = {
-  appearance: Appearance;
-  label: string;
-  icon?: ReactElement;
-  onClick(e: MouseEvent<HTMLButtonElement>): void;
-};
-
-export function AlertButton({ appearance, label, icon, onClick }: AlertButtonProps) {
-  return (
-    <button
-      onClick={onClick}
-      className={styles.alertButton}
-      data-color={APPEARANCE_TO_COLOR_MAP[appearance]}
-      data-test-id='alert__action-button'
-    >
-      <span>{label}</span>
-      {icon}
-    </button>
-  );
-}

package/src/helperComponents/AlertButton/index.ts

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

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

@@ -1,49 +0,0 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-alert';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-
-$colors: 'neutral', 'primary', 'red', 'yellow', 'green';
-
-.alertButton {
-  @include composite-var($alert-button-button-action);
-  @include composite-var($sans-label-l);
-
-  cursor: pointer;
-
-  display: flex;
-  align-items: center;
-
-  box-sizing: border-box;
-  margin: 0;
-
-  white-space: nowrap;
-
-  background: none;
-  border: 0;
-
-  svg {
-    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
-    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
-  }
-
-  &:focus-visible {
-    @include outline-var($container-focused-s);
-
-    outline-color: $sys-available-complementary;
-    outline-offset: $spacing-state-focus-offset;
-  }
-
-  @each $color in $colors {
-    &[data-color='#{$color}'] {
-      color: simple-var($theme-variables, 'sys', $color, 'text-support');
-
-      &:hover,
-      &:focus-visible {
-        color: simple-var($theme-variables, 'sys', $color, 'text-light');
-      }
-
-      &:active {
-        color: simple-var($theme-variables, 'sys', $color, 'text-main');
-      }
-    }
-  }
-}

package/src/helperComponents/AlertTopButton/AlertTopButton.tsx

@@ -1,25 +0,0 @@
-import { ReactElement } from 'react';
-
-import { APPEARANCE_TO_COLOR_MAP_INVERT } from '../../components/AlertTop/constants';
-import { Appearance } from '../../types';
-import styles from './styles.module.scss';
-
-export type AlertTopButtonProps = {
-  appearance: Appearance;
-  buttonText: string;
-  buttonIcon?: ReactElement;
-  buttonOnClick?: () => void;
-};
-
-export function AlertTopButton({ appearance, buttonText, buttonIcon, buttonOnClick }: AlertTopButtonProps) {
-  return (
-    <button
-      onClick={buttonOnClick}
-      className={styles.alertTopButton}
-      data-color={APPEARANCE_TO_COLOR_MAP_INVERT[appearance]}
-    >
-      <span>{buttonText}</span>
-      {buttonIcon}
-    </button>
-  );
-}

package/src/helperComponents/AlertTopButton/index.ts

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

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

@@ -1,54 +0,0 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-alert-alertTop';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-
-$colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
-
-.alertTopButton {
-  @include composite-var($alert-top-button-button-action);
-  @include composite-var($sans-label-l);
-
-  cursor: pointer;
-
-  display: flex;
-  align-items: center;
-
-  box-sizing: border-box;
-  margin: 0;
-  margin-left: auto;
-
-  white-space: nowrap;
-
-  background: $sys-opacity-enabled;
-  border: 0;
-
-  svg {
-    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
-    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
-  }
-
-  &:hover {
-    opacity: unset;
-    background-color: $sys-opacity-hovered;
-  }
-  &:focus-visible {
-    @include outline-var($container-focused-s);
-
-    background-color: $sys-opacity-hovered;
-    outline-color: $sys-available-on-complementary;
-  }
-  &:active {
-    background-color: $sys-opacity-activated;
-  }
-
-  @each $color in $colors {
-    &[data-color='#{$color}'] {
-      @if $color == 'invert-neutral' {
-        color: simple-var($theme-variables, 'sys', $color, 'text-main');
-      }
-
- @else {
-        color: simple-var($theme-variables, 'sys', $color, 'on-accent');
-      }
-    }
-  }
-}