@transferwise/components 0.0.0-experimental-c20c070 → 0.0.0-experimental-b2b287d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-c20c070",
+  "version": "0.0.0-experimental-b2b287d",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -59,7 +59,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
-    "@transferwise/icons": "^4.7.0",
+    "@transferwise/icons": "^4.6.0",
     "@transferwise/less-config": "3.2.0",
     "@tsconfig/recommended": "^1.0.13",
     "@types/babel__core": "^7.20.5",
@@ -74,7 +74,7 @@
     "@monaco-editor/react": "^4.7.0",
     "monaco-editor": "^0.57.0",
     "monaco-editor-webpack-plugin": "^7.1.1",
-    "@wise/art": "^2.33.0",
+    "@wise/art": "^2.32.0",
     "@wise/components-theming": "1.10.3",
     "@wise/eslint-config": "^14.2.1",
     "@wise/wds-configs": "0.0.0",

package/src/FlowNavigation/_stories/FlowNavigation.CriticalBanner.docs.mdx

@@ -0,0 +1,66 @@
+import { Meta, Source } from '@storybook/addon-docs/blocks';
+
+<Meta title="Navigation/FlowNavigation/Critical Banner Guide" />
+
+# Critical Banner in FlowNavigation
+
+The `FlowNavigation` component supports displaying critical banners above the navigation, by passing a `banner` prop.
+
+`banner` accepts either the internal `CriticalBannerProps` shape, or the legacy backend `CriticalBannerData` shape (e.g. as received from `navigation-service`/`navigation-ui`) — `FlowNavigation` maps the legacy shape to `CriticalBannerProps` internally, so no manual mapping is required.
+
+## Basic Usage
+
+When you're using `FlowNavigation` directly from `@transferwise/components`.
+
+<Source
+code={`import { FlowNavigation, CriticalBannerProps } from '@transferwise/components';
+
+const banner: CriticalBannerProps = {
+    sentiment: 'negative',
+    title: 'Action required',
+    description: 'Please verify your identity to continue with this transfer.',
+    action: {
+      label: 'Verify now',
+      onClick: () => {
+          // Handle action
+      },
+    },
+};
+
+<FlowNavigation
+    banner={banner}
+    steps={steps}
+    activeStep={activeStep}
+    avatar={avatar}
+    onClose={onClose}
+/>;
+`}
+language="typescript"
+dark
+/>
+
+## Using Legacy Backend Data
+
+If your application receives banner data from a backend service (e.g. navigation-ui) in the legacy shape, you can pass it directly to `banner` — `FlowNavigation` maps it to the internal `CriticalBannerProps` shape automatically.
+
+<Source
+code={`import { FlowNavigation, CriticalBannerData } from '@transferwise/components';
+
+const banner: CriticalBannerData = {
+    id: 'banner-123',
+    title: 'Your account requires attention', // Rendered as the banner description
+    subtitle: 'Action required', // Rendered as the banner title
+    style: 'WARNING',
+    action: { label: 'Take action', href: '/action' },
+    collapsed: false, // Rendered expanded
+};
+
+<FlowNavigation
+    banner={banner}
+    steps={steps}
+    activeStep={activeStep}
+/>;
+`}
+language="typescript"
+dark
+/>

package/src/Link/Link.tsx

@@ -14,7 +14,7 @@ export type LinkProps = PrimitiveAnchorProps &
 /**
  * Standard Link component with navigate away icon
  *
- * Documentation: https://storybook.wise.design/?path=/docs/typography-link--docs
+ * Documentation: https://transferwise.github.io/neptune-web/components/content/Link
  */
 const Link = ({
   className,

package/src/ListItem/AdditionalInfo/_stories/ListItemAdditionalInfo.story.tsx

@@ -15,7 +15,7 @@ import { action } from 'storybook/actions';
 /**
  * Use additional information to add extra details that help make the information clearer for users. Use additional information only after you've used the subtitle.
  *
- * Refer to the [design documentation](https://docs.wise.design/components/list-item#additional-information) for more details.
+ * Refer to the [design documentation](https://docs.wise.design/components/list-item#content:~:text=StatusIcon.iconLabel.error-,Additional%20information,-Use%20additional%20information) for more details.
  */
 export default {
   component: ListItem.AdditionalInfo,

package/src/ListItem/AvatarView/_stories/ListItemAvatarView.story.tsx

@@ -135,7 +135,7 @@ export const Playground: Story = {
 
 /**
  * AvatarView can display different types of content including icons, profile images, and initials. <br />
- * Refer to the [design documentation](https://docs.wise.design/components/avatar#media) for details.
+ * Refer to the [design documentation](https://docs.wise.design/components/avatar#:~:text=56%2C%20%E2%80%A8and%2072.-,Media,-There%20are%204) for details.
  */
 export const ContentTypes: Story = {
   args: {
@@ -209,7 +209,7 @@ export const ContentTypes: Story = {
 
 /**
  * AvatarView supports 6 sizes to fit different list item contexts: `24`, `32`, `40`, `48`, `56`, `72`. If decorated with a Badge, those will be sized accordingly as well. <br />
- * Please refer to the [design documentation](https://docs.wise.design/components/list-item#avatar-sizes) for details on when to use which one.
+ * Please refer to the [design documentation](https://docs.wise.design/components/list-item#avatar:~:text=of%20the%20avatar.-,Avatar%20sizes,-List%20item%20supports) for details on when to use which one.
  */
 export const Sizes: Story = {
   parameters: {
@@ -243,7 +243,7 @@ export const Sizes: Story = {
 
 /**
  * AvatarView supports different types of badges for additional context and information. <br />
- * Refer to the [design documentation](https://docs.wise.design/components/avatar#with-badge) for details.
+ * Refer to the [design documentation](https://docs.wise.design/components/avatar#:~:text=support%20the%20information.-,With%20badge,-Badges%20contain%20additional) for details.
  */
 export const Badges: Story = {
   args: {

package/src/ListItem/_stories/ListItem.disabled.story.tsx

@@ -42,7 +42,7 @@ const disabledPromptMessage = (
 );
 
 /**
- * Please refer to the [design documentation](https://docs.wise.design/components/list-item#disabled-states) for more details
+ * Please refer to the [design documentation](https://docs.wise.design/components/list-item#accessibility:~:text=-,Disabled%20states,-) for more details
  */
 export default {
   component: ListItem,

package/src/Loader/Loader.tsx

@@ -32,7 +32,7 @@ export type LoaderProps = {
 /**
  * Loader component
  *
- * Docs link: https://storybook.wise.design/?path=/docs/loading-loader--docs
+ * Docs link: https://transferwise.github.io/neptune-web/components/progress/Loader
  *
  * @param root0
  * @param root0.small

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

@@ -14,6 +14,8 @@ import { CriticalBanner, type CriticalBannerProps } from '..';
  * **Design guidance**: <a href="https://docs.wise.design/components/critical-banner" target="_blank">wise.design/components/critical-banner</a>
  *
  * Can be controlled or uncontrolled. When `onToggle` is provided, the consumer manages the expanded state via `expanded` and the banner calls `onToggle` when the user clicks the chevron. When `onToggle` is not provided, the banner manages its own expanded state internally and toggles it when the user clicks the chevron.
+ *
+ * **Using with FlowNavigation**: See the [FlowNavigation Critical Banner Guide](?path=/docs/navigation-flownavigation-critical-banner-guide--docs) for integration patterns and data mapping examples.
  */
 const meta = {
   component: CriticalBanner,

package/src/Section/Section.tsx

@@ -13,7 +13,7 @@ type SectionProps = PropsWithChildren<
 
 /**
  *
- * Neptune Web: https://storybook.wise.design/?path=/docs/content-section--docs
+ * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Section
  *
  */
 const Section = ({

package/src/Snackbar/Snackbar.css

@@ -1,71 +1,134 @@
-.snackbar {
-  text-align: center;
+.wds-Snackbar {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-inline: var(--size-16);
+  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;
+  inset-inline: 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;
+@media (min-width: 600px) {
+  .wds-Snackbar {
+    padding-block-end: var(--size-24);
+  }
+}
+.wds-Snackbar--swipe-dismiss {
+  transition: transform var(--Snackbar-exit-duration) cubic-bezier(1, 0, 1, 1);
+}
+.wds-Snackbar--swipe-settle {
+  transition: transform var(--Snackbar-exit-duration) cubic-bezier(0, 0, 0, 1);
+}
+.wds-Snackbar-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-inline-size: 480px;
   text-align: start;
-  font-size: var(--wds-font-size-body);
-  margin-block: 0;
-  margin-inline: var(--size-16);
-  padding-block: var(--size-8);
-  padding-inline: var(--size-16);
-  inline-size: calc(100% - var(--size-32));
-  transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  cursor: grab;
+  touch-action: pan-x pinch-zoom;
 }
-.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: var(--radius-small);
-  color: var(--color-contrast-overlay);
+.wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+  grid-template-columns: auto minmax(0, 1fr);
 }
-.np-theme-personal .snackbar__text::after {
-  display: block;
-  border-radius: inherit;
-  block-size: 100%;
-  inline-size: 100%;
-  content: "";
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  z-index: -1;
-  background-color: var(--color-background-neutral);
-}
-.np-theme-personal--dark .snackbar__text,
-.np-theme-personal--forest-green .snackbar__text {
-  box-shadow: none;
+@media (min-width: 600px) {
+  .wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+}
+.wds-Snackbar-container .wds-prompt__media-wrapper {
+  display: flex;
+  align-items: center;
+  min-block-size: max(var(--size-32), 1lh);
+  padding-block-start: 0;
+  color: var(--color-sentiment-content-primary);
+}
+.wds-Snackbar-container .wds-prompt__media-wrapper:has(+ .wds-Snackbar__content .wds-Snackbar__action) {
+  min-block-size: max(var(--size-32), calc(1lh + var(--size-5) * 2));
+}
+.wds-Snackbar__media-asset {
+  display: flex;
+}
+.wds-Snackbar__media-asset svg {
+  inline-size: var(--size-24);
+  block-size: var(--size-24);
+}
+.wds-Snackbar__process-indicator .process-circle {
+  stroke: currentColor;
+}
+.wds-Snackbar-container .wds-prompt__dismiss {
+  display: none;
+  align-self: flex-start;
+  margin-block-start: calc(var(--size-4) - 1px);
 }
 @media (min-width: 600px) {
-  .snackbar__text {
-    inline-size: auto;
-    max-inline-size: 600px;
+  .wds-Snackbar-container .wds-prompt__dismiss {
+    display: flex;
   }
 }
-.snackbar__text__action {
+.wds-Snackbar__action {
   flex-shrink: 0;
-  margin-inline-start: var(--size-16);
 }
-.snackbar__text-container-enter,
-.snackbar__text-container-exit {
-  transform: translateY(calc(100% + 10px));
+.wds-Snackbar__content {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--size-8);
+  flex: 1 0 0;
+  min-block-size: var(--size-32);
+  min-inline-size: 0;
 }
-.snackbar__text-container-enter-active {
-  transform: translateY(-16px);
-  transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
+.wds-Snackbar__message {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  inline-size: auto;
+  flex: 1 0 0;
+  min-inline-size: 0;
+  align-self: stretch;
 }
-@media (min-width: 600px) {
-  .snackbar__text-container-enter-active {
-    transform: translateY(-24px);
+.wds-Snackbar__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.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',
+  },
+});