@snack-uikit/alert 0.5.20-preview-85c5f47b.0

package/src/helperComponents/AlertTopButton/index.ts

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

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

@@ -0,0 +1,57 @@
+@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;
+
+  opacity: $opacity-a080;
+  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 */
+  }
+
+  &:hover {
+    opacity: unset;
+    background-color: $sys-opacity-hovered;
+  }
+  &:focus-visible {
+    @include outline-var($container-focused-s);
+
+    opacity: unset;
+    background-color: $sys-opacity-hovered;
+    outline-color: $sys-available-on-complementary;
+  }
+  &:active {
+    opacity: $opacity-a080;
+    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');
+      }
+    }
+  }
+}

package/src/helperComponents/index.ts

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

package/src/index.ts

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

package/src/utils.tsx

@@ -0,0 +1,18 @@
+import { AlarmFilledSVG, CheckFilledSVG, CrossFilledSVG, InfoFilledSVG } from '@snack-uikit/icons';
+
+import { Appearance } from './constants';
+
+export function getIcon(appearance: Appearance) {
+  switch (appearance) {
+    case Appearance.Success:
+      return <CheckFilledSVG />;
+    case Appearance.Error:
+      return <CrossFilledSVG />;
+    case Appearance.Warning:
+      return <AlarmFilledSVG />;
+    case Appearance.Primary:
+    case Appearance.Neutral:
+    default:
+      return <InfoFilledSVG />;
+  }
+}