@transferwise/components 0.0.0-experimental-4b93e2b → 0.0.0-experimental-f144cf1

package/src/Popover/Popover.css

@@ -31,6 +31,12 @@
   letter-spacing: 0;
   word-wrap: break-word;
   margin-block-end: initial;
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  font-size: 1.625rem;
+  font-size: var(--font-size-26);
+  letter-spacing: -0.02em;
+  line-height: 122%;
 }
 @supports (hyphenate-limit-chars: 1) {
   .np-popover__container.np-bottom-sheet .np-popover__title {

package/src/PromoCard/Indicator/PromoCardIndicator.tsx

@@ -1,4 +1,4 @@
-import { ArrowEnd, Check, Download } from '@transferwise/icons';
+import { ArrowRight, Check, Download } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { ReactElement, ReactNode } from 'react';
 
@@ -57,7 +57,7 @@ const PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({
     isIconString &&
     {
       check: Check,
-      arrow: ArrowEnd,
+      arrow: ArrowRight,
       download: Download,
     }[icon];
 

package/src/PromoCard/PromoCard.css

@@ -53,6 +53,9 @@
 .np-Card-indicatorIcon .tw-icon {
   color: var(--Card-indicator-icon-color);
 }
+[dir="rtl"] .np-Card-indicatorIcon .tw-icon {
+  transform: scaleX(-1);
+}
 .np-Card--checked,
 .np-Card--link {
   color: currentColor;

package/src/PromoCard/PromoCard.less

@@ -50,6 +50,11 @@
 
     &Icon .tw-icon {
       color: var(--Card-indicator-icon-color);
+
+      // Flips icon for right to left content
+      [dir="rtl"] & {
+        transform: scaleX(-1);
+      }
     }
   }
 

package/src/Prompt/CriticalBanner/_stories/CriticalBanner.test.story.tsx

@@ -511,5 +511,5 @@ export const RTLDiff: Story = {
       />
     </>
   ),
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  ...withRTLDiff(),
 };

package/src/Snackbar/Snackbar.css

@@ -1,79 +1,200 @@
-.snackbar {
-  text-align: center;
+.wds-Snackbar {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-inline: 16px;
+  padding-inline: var(--size-16);
+  padding-block-end: calc(16px + env(safe-area-inset-bottom));
+  padding-block-end: calc(var(--size-16) + env(safe-area-inset-bottom));
   position: fixed;
   inset-block-end: 0;
   inset-inline-start: 0;
   inset-inline-end: 0;
   z-index: 1060;
 }
-.snackbar__text {
-  background: #37517e;
-  color: #ffffff;
-  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: start;
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  margin-block: 0;
-  margin-inline: 16px;
-  margin-inline: var(--size-16);
-  padding-block: 8px;
-  padding-block: var(--size-8);
-  padding-inline: 16px;
-  padding-inline: var(--size-16);
-  inline-size: calc(100% - 32px);
-  inline-size: calc(100% - var(--size-32));
-  transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-.np-theme-personal .snackbar__text {
-  box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
-  position: relative;
-  background: var(--color-contrast-theme);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-  color: var(--color-contrast-overlay);
-}
-.np-theme-personal .snackbar__text::after {
-  display: block;
-  border-radius: inherit;
-  block-size: 100%;
+@media (min-width: 600px) {
+  .wds-Snackbar {
+    padding-block-end: 24px;
+    padding-block-end: var(--size-24);
+  }
+}
+.wds-Snackbar--swipe-dismiss {
+  transition: transform 150ms cubic-bezier(1, 0, 1, 1);
+}
+.wds-Snackbar-container.wds-prompt {
+  box-sizing: border-box;
   inline-size: 100%;
-  content: "";
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  z-index: -1;
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
+  max-inline-size: 480px;
+  padding: 12px;
+  padding: var(--size-12);
+  gap: 8px;
+  gap: var(--size-8);
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  text-align: start;
+  touch-action: pan-x pinch-zoom;
 }
-.np-theme-personal--dark .snackbar__text,
-.np-theme-personal--forest-green .snackbar__text {
-  box-shadow: none;
+.wds-Snackbar-container.wds-prompt .wds-prompt__content-wrapper--with-dismiss {
+  gap: 8px;
+  gap: var(--size-8);
+  grid-template-columns: auto minmax(0, 1fr);
 }
 @media (min-width: 600px) {
-  .snackbar__text {
-    inline-size: auto;
-    max-inline-size: 600px;
+  .wds-Snackbar-container.wds-prompt .wds-prompt__content-wrapper--with-dismiss {
+    grid-template-columns: auto minmax(0, 1fr) auto;
   }
 }
-.snackbar__text__action {
-  flex-shrink: 0;
-  margin-inline-start: 16px;
-  margin-inline-start: var(--size-16);
+.wds-Snackbar-container.wds-prompt .wds-prompt__media-wrapper {
+  color: var(--color-sentiment-content-primary);
+}
+@media (max-width: 320px) {
+  .wds-Snackbar-container.wds-prompt .wds-prompt__media-wrapper {
+    padding-block-start: 4px;
+    padding-block-start: var(--size-4);
+  }
+}
+@media (max-width: 320px) {
+  .wds-Snackbar-container.wds-prompt .wds-prompt__media-wrapper:has(.wds-Snackbar__media-asset > .tw-icon) {
+    padding-block-start: 8px;
+    padding-block-start: var(--size-8);
+  }
+}
+@media (max-width: 320px) {
+  .wds-Snackbar-container.wds-prompt .wds-prompt__media-wrapper:has(+ .wds-Snackbar__content .wds-Snackbar__action) {
+    padding-block-start: 8px;
+    padding-block-start: var(--size-8);
+  }
+}
+@media (max-width: 320px) {
+  .wds-Snackbar-container.wds-prompt .wds-prompt__media-wrapper:has(+ .wds-Snackbar__content .wds-Snackbar__action):has(.wds-Snackbar__media-asset > .tw-icon) {
+    padding-block-start: 12px;
+    padding-block-start: var(--size-12);
+  }
+}
+.wds-Snackbar-container.wds-prompt .wds-Snackbar__media-asset svg {
+  inline-size: 24px;
+  inline-size: var(--size-24);
+  block-size: 24px;
+  block-size: var(--size-24);
 }
-.snackbar__text-container-enter,
-.snackbar__text-container-exit {
-  transform: translateY(calc(100% + 10px));
+.wds-Snackbar-container.wds-prompt .wds-Snackbar__process-indicator .process-circle {
+  stroke: currentColor;
 }
-.snackbar__text-container-enter-active {
-  transform: translateY(-16px);
-  transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
+.wds-Snackbar-container.wds-prompt .wds-prompt__dismiss.np-icon-button {
+  display: none;
+  align-self: flex-start;
+  margin-block-start: calc(4px - 1px);
+  margin-block-start: calc(var(--size-4) - 1px);
+  color: var(--color-sentiment-content-primary);
+  fill: var(--color-sentiment-content-primary);
+  background-color: transparent;
 }
 @media (min-width: 600px) {
-  .snackbar__text-container-enter-active {
-    transform: translateY(-24px);
+  .wds-Snackbar-container.wds-prompt .wds-prompt__dismiss.np-icon-button {
+    display: flex;
+  }
+}
+.wds-Snackbar-container.wds-prompt .wds-prompt__dismiss.np-icon-button:not(.disabled):not(:disabled):hover,
+.wds-Snackbar-container.wds-prompt .wds-prompt__dismiss.np-icon-button:not(.disabled):not(:disabled):active {
+  background-color: var(--color-sentiment-interactive-secondary-neutral);
+}
+.wds-Snackbar-container.wds-prompt .wds-prompt__dismiss.np-icon-button:before {
+  inset: calc(-1 * 12px);
+  inset: calc(-1 * var(--size-12));
+  inline-size: calc(24px + 12px * 2);
+  inline-size: calc(var(--size-24) + var(--size-12) * 2);
+  block-size: calc(24px + 12px * 2);
+  block-size: calc(var(--size-24) + var(--size-12) * 2);
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+}
+.wds-Snackbar-container.wds-prompt .wds-Snackbar__action {
+  flex-shrink: 0;
+}
+.wds-Snackbar-container.wds-prompt .wds-Snackbar__action .wds-Button-labelText {
+  color: var(--color-sentiment-content-primary);
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+}
+.wds-Snackbar__content {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  gap: var(--size-8);
+  flex: 1 0 0;
+  min-block-size: 32px;
+  min-block-size: var(--size-32);
+  min-inline-size: 0;
+}
+.wds-Snackbar__message {
+  display: flex;
+  inline-size: auto;
+  flex: 1 0 0;
+  min-inline-size: 0;
+  align-self: stretch;
+}
+.wds-Snackbar__message > div {
+  display: flex;
+  flex: 1 0 0;
+  min-inline-size: 0;
+}
+.wds-Snackbar__body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 0 0;
+  min-inline-size: 0;
+  align-self: stretch;
+  word-wrap: break-word;
+  word-break: break-word;
+  color: var(--color-sentiment-content-primary);
+  font-feature-settings: "liga" off, "clig" off;
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  font-style: normal;
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+}
+.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 300ms 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 150ms cubic-bezier(1, 0, 1, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .wds-Snackbar--swipe-dismiss {
+    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.less

@@ -1,80 +1,209 @@
 @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;
-
   right: 0;
-
   z-index: @zindex-mobile-nav;
 
-  &__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(--font-size-14);
-    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);
+  @media (--screen-sm) {
+    padding-bottom: var(--size-24);
+  }
+
+  &--swipe-dismiss {
+    transition: transform 150ms cubic-bezier(1, 0, 1, 1);
+  }
+}
+
+.wds-Snackbar-container.wds-prompt {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 480px;
+  padding: var(--size-12);
+  gap: var(--size-8);
+  border-radius: var(--radius-medium);
+  text-align: start;
+  touch-action: pan-x pinch-zoom;
+
+  .wds-prompt__content-wrapper--with-dismiss {
+    gap: var(--size-8);
+    grid-template-columns: auto minmax(0, 1fr);
+
+    @media (--screen-sm) {
+      grid-template-columns: auto minmax(0, 1fr) auto;
+    }
+  }
+
+  .wds-prompt__media-wrapper {
+    color: var(--color-sentiment-content-primary);
+
+    @media (--screen-400-zoom) {
+      padding-top: var(--size-4);
+    }
+
+    &:has(.wds-Snackbar__media-asset > .tw-icon) {
+      @media (--screen-400-zoom) {
+        padding-top: var(--size-8);
       }
     }
 
-    .np-theme-personal--dark &,
-    .np-theme-personal--forest-green & {
-      box-shadow: none;
+    &:has(+ .wds-Snackbar__content .wds-Snackbar__action) {
+      @media (--screen-400-zoom) {
+        padding-top: var(--size-8);
+      }
+
+      &:has(.wds-Snackbar__media-asset > .tw-icon) {
+        @media (--screen-400-zoom) {
+          padding-top: var(--size-12);
+        }
+      }
     }
+  }
+
+  .wds-Snackbar__media-asset {
+    svg {
+      width: var(--size-24);
+      height: var(--size-24);
+    }
+  }
+
+  .wds-Snackbar__process-indicator {
+    .process-circle {
+      stroke: currentColor;
+    }
+  }
+
+  .wds-prompt__dismiss.np-icon-button {
+    display: none;
+    align-self: flex-start;
+    margin-top: calc(var(--size-4) - 1px);
+    color: var(--color-sentiment-content-primary);
+    fill: var(--color-sentiment-content-primary);
+    background-color: transparent;
 
     @media (--screen-sm) {
-      width: auto;
-      max-width: 600px;
+      display: flex;
     }
 
-    &__action {
-      flex-shrink: 0;
-      margin-left: var(--size-16);
+    &:not(.disabled, :disabled):hover,
+    &:not(.disabled, :disabled):active {
+      background-color: var(--color-sentiment-interactive-secondary-neutral);
     }
 
-    &-container-enter,
-    &-container-exit {
-      transform: translateY(calc(100% + 10px));
+    &:before {
+      inset: calc(-1 * var(--size-12));
+      width: calc(var(--size-24) + var(--size-12) * 2);
+      height: calc(var(--size-24) + var(--size-12) * 2);
+      border-radius: var(--radius-medium);
     }
+  }
 
-    &-container-enter-active {
-      transform: translateY(-16px);
-      transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
+  .wds-Snackbar__action {
+    flex-shrink: 0;
 
-      @media (--screen-sm) {
-        transform: translateY(-24px);
-      }
+    .wds-Button-labelText {
+      color: var(--color-sentiment-content-primary);
+      font-weight: var(--font-weight-medium);
     }
   }
 }
+
+.wds-Snackbar__content {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--size-8);
+  flex: 1 0 0;
+  min-height: var(--size-32);
+  min-width: 0;
+}
+
+.wds-Snackbar__message {
+  display: flex;
+  width: auto;
+  flex: 1 0 0;
+  min-width: 0;
+  align-self: stretch;
+
+  > div {
+    display: flex;
+    flex: 1 0 0;
+    min-width: 0;
+  }
+}
+
+.wds-Snackbar__body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 0 0;
+  min-width: 0;
+  align-self: stretch;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  color: var(--color-sentiment-content-primary);
+  font-feature-settings:
+    "liga" off,
+    "clig" off;
+  font-family: var(--font-family-regular);
+  font-size: var(--font-size-14);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+}
+
+.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 300ms 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 150ms cubic-bezier(1, 0, 1, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wds-Snackbar--swipe-dismiss {
+    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',
+  },
+});