@transferwise/components 0.0.0-experimental-47052c9 → 0.0.0-experimental-b2b287d

package/src/Snackbar/Snackbar.less

@@ -1,80 +1,159 @@
 @import (reference) "./../styles/variables/zindex.less";
-@import (reference) "./../styles/variables/neptune-tokens.less";
 
-.snackbar {
-  text-align: center;
+.wds-Snackbar {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-inline: var(--size-16);
+  padding-bottom: calc(var(--size-16) + env(safe-area-inset-bottom));
   position: fixed;
   bottom: 0;
-  left: 0;
+  inset-inline: 0;
+  z-index: @zindex-mobile-nav;
 
-  right: 0;
+  @media (--screen-sm) {
+    padding-bottom: var(--size-24);
+  }
 
-  z-index: @zindex-mobile-nav;
+  &--swipe-dismiss {
+    transition: transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+  }
 
-  &__text {
-    background: @color-navy-background-elevated;
-    color: @color-navy-content-primary;
-    display: inline-flex;
-    border-radius: 2px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-    align-items: center;
-    justify-content: space-between;
-    text-align: left;
-
-    font-size: var(--wds-font-size-body);
-    margin: 0 var(--size-16);
-    padding: var(--size-8) var(--size-16);
-    width: calc(100% - var(--size-32));
-    transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
-
-    .np-theme-personal & {
-      box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
-      position: relative;
-      background: var(--color-contrast-theme);
-      border-radius: var(--radius-small);
-      color: var(--color-contrast-overlay);
-
-      &::after {
-        display: block;
-        border-radius: inherit;
-        height: 100%;
-        width: 100%;
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 0;
-        z-index: -1;
-        background-color: var(--color-background-neutral);
-      }
-    }
+  &--swipe-settle {
+    transition: transform var(--Snackbar-exit-duration) cubic-bezier(0, 0, 0, 1);
+  }
 
-    .np-theme-personal--dark &,
-    .np-theme-personal--forest-green & {
-      box-shadow: none;
-    }
+  &-container {
+    --Prompt-border-radius: var(--radius-medium);
+    --Prompt-gap: var(--size-8);
+    --Prompt-padding-x: var(--size-12);
+    --Prompt-padding-y: var(--size-12);
+    box-sizing: border-box;
+    max-width: 480px;
+    text-align: start;
+    cursor: grab;
+    touch-action: pan-x pinch-zoom;
+  }
+
+  &-container .wds-prompt__content-wrapper--with-dismiss {
+    grid-template-columns: auto minmax(0, 1fr);
 
     @media (--screen-sm) {
-      width: auto;
-      max-width: 600px;
+      grid-template-columns: auto minmax(0, 1fr) auto;
     }
+  }
 
-    &__action {
-      flex-shrink: 0;
-      margin-left: var(--size-16);
+  &-container .wds-prompt__media-wrapper {
+    display: flex;
+    align-items: center;
+    min-height: max(var(--size-32), 1lh);
+    padding-top: 0;
+    color: var(--color-sentiment-content-primary);
+
+    // At 400% reflow spacing shrinks, but the text's line height does not.
+    &:has(+ .wds-Snackbar__content .wds-Snackbar__action) {
+      min-height: max(var(--size-32), calc(1lh + var(--size-5) * 2));
     }
+  }
 
-    &-container-enter,
-    &-container-exit {
-      transform: translateY(calc(100% + 10px));
+  &__media-asset {
+    display: flex;
+
+    svg {
+      width: var(--size-24);
+      height: var(--size-24);
     }
+  }
 
-    &-container-enter-active {
-      transform: translateY(-16px);
-      transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
+  &__process-indicator .process-circle {
+    stroke: currentColor;
+  }
+
+  &-container .wds-prompt__dismiss {
+    display: none;
+    align-self: flex-start;
+    margin-top: calc(var(--size-4) - 1px);
 
-      @media (--screen-sm) {
-        transform: translateY(-24px);
-      }
+    @media (--screen-sm) {
+      display: flex;
     }
   }
+
+  &__action {
+    flex-shrink: 0;
+  }
+
+  &__content {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--size-8);
+    flex: 1 0 0;
+    min-height: var(--size-32);
+    min-width: 0;
+  }
+
+  &__message {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: auto;
+    flex: 1 0 0;
+    min-width: 0;
+    align-self: stretch;
+  }
+
+  &__body {
+    display: block;
+  }
+}
+
+.wds-Snackbar-container-appear,
+.wds-Snackbar-container-enter {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+}
+
+.wds-Snackbar-container-appear-active,
+.wds-Snackbar-container-enter-active {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  transition:
+    opacity 150ms linear,
+    transform var(--Snackbar-enter-duration) cubic-bezier(0, 0, 0, 1);
+}
+
+.wds-Snackbar-container-exit {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.wds-Snackbar-container-exit-active {
+  opacity: 0;
+  transform: translateY(80px) scale(0.5);
+  transition:
+    opacity 50ms linear 50ms,
+    transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wds-Snackbar--swipe-dismiss,
+  .wds-Snackbar--swipe-settle {
+    transition: none;
+  }
+
+  .wds-Snackbar-container-appear,
+  .wds-Snackbar-container-appear-active,
+  .wds-Snackbar-container-enter,
+  .wds-Snackbar-container-enter-active,
+  .wds-Snackbar-container-exit {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+
+  .wds-Snackbar-container-exit-active {
+    opacity: 0;
+    transform: none;
+    transition: none;
+  }
 }

package/src/Snackbar/Snackbar.messages.ts

@@ -0,0 +1,9 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  escapeDismissHint: {
+    id: 'neptune.Snackbar.escapeDismissHint',
+    defaultMessage: 'Press Escape to dismiss.',
+    description: 'Screen-reader instruction for dismissing a Snackbar without moving focus',
+  },
+});