@transferwise/components 0.0.0-experimental-5598332 → 0.0.0-experimental-cbc00a7

package/src/main.css

@@ -26174,83 +26174,135 @@ button.np-link {
   box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
   box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
 }
-.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;
+  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: 24px;
+    padding-block-end: var(--size-24);
+  }
+}
+.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: 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);
+.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: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
+@media (min-width: 600px) {
+  .wds-Snackbar-container .wds-prompt__content-wrapper--with-dismiss {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
 }
-.np-theme-personal--dark .snackbar__text,
-.np-theme-personal--forest-green .snackbar__text {
-  box-shadow: none;
+.wds-Snackbar-container .wds-prompt__media-wrapper {
+  display: flex;
+  align-items: center;
+  min-block-size: max(32px, 1lh);
+  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(32px, calc(1lh + 5px * 2));
+  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: 24px;
+  inline-size: var(--size-24);
+  block-size: 24px;
+  block-size: var(--size-24);
+}
+.wds-Snackbar-container .wds-prompt__dismiss {
+  display: none;
+  align-self: flex-start;
+  margin-block-start: calc(4px - 1px);
+  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: 16px;
-  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: 8px;
+  gap: var(--size-8);
+  flex: 1 0 0;
+  min-block-size: 32px;
+  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;
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+}
+.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-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;
   }
 }
 .status-circle.negative,

package/src/ListItem/ListItem.ssr.test.tsx

@@ -1,115 +0,0 @@
-import { renderToString } from 'react-dom/server';
-import { render } from '@testing-library/react';
-import { Edit } from '@transferwise/icons';
-import { mockMatchMedia, within } from '../test-utils';
-import Provider from '../Provider';
-import en from '../i18n/en.json';
-import { ListItem } from './ListItem';
-
-mockMatchMedia();
-
-describe('ListItem server rendering and hydration', () => {
-  beforeEach(() => {
-    jest.spyOn(console, 'error').mockImplementation((message: string) => {
-      // React 18 warns about the existing layout effects when rendering on the server.
-      if (!message.startsWith('Warning: useLayoutEffect does nothing on the server')) {
-        throw new Error(message);
-      }
-    });
-  });
-
-  afterEach(() => {
-    jest.restoreAllMocks();
-  });
-
-  const controls = [
-    { name: 'navigation link', control: <ListItem.Navigation href="/payments" /> },
-    { name: 'navigation button', control: <ListItem.Navigation /> },
-    {
-      name: 'navigation without indicator',
-      control: <ListItem.Navigation href="/payments" hideIndicator />,
-    },
-    { name: 'button', control: <ListItem.Button>Pay</ListItem.Button> },
-    { name: 'button link', control: <ListItem.Button href="/payments">Pay</ListItem.Button> },
-    {
-      name: 'icon button',
-      control: (
-        <ListItem.IconButton aria-label="Edit">
-          <Edit />
-        </ListItem.IconButton>
-      ),
-    },
-    {
-      name: 'icon button link',
-      control: (
-        <ListItem.IconButton href="/payments" aria-label="Edit">
-          <Edit />
-        </ListItem.IconButton>
-      ),
-    },
-    { name: 'checkbox', control: <ListItem.Checkbox /> },
-    { name: 'radio', control: <ListItem.Radio name="payment" /> },
-    { name: 'switch', control: <ListItem.Switch onClick={jest.fn()} /> },
-  ];
-
-  describe.each(['active', 'inactive'] as const)('%s spotlight', (spotlight) => {
-    it.each(controls)(
-      'is present before hydration and unchanged afterwards for $name',
-      ({ control }) => {
-        const element = (
-          <Provider i18n={{ locale: 'en-GB', messages: en }}>
-            <ListItem title="Payments" spotlight={spotlight} control={control} />
-          </Provider>
-        );
-        const container = document.createElement('div');
-        container.innerHTML = renderToString(element);
-        const item = within(container).getByRole('listitem');
-        expect(item).toHaveClass(
-          'wds-list-item-interactive',
-          'wds-list-item-spotlight',
-          `wds-list-item-spotlight-${spotlight}`,
-        );
-        expect(item.querySelector('.wds-list-item-spotlight__border') !== null).toBe(
-          spotlight === 'inactive',
-        );
-        const serverMarkup = container.innerHTML;
-
-        render(element, { container, hydrate: true });
-
-        expect(within(container).getByRole('listitem')).toBe(item);
-        expect(container.innerHTML).toBe(serverMarkup);
-      },
-    );
-
-    it.each([
-      { name: 'no control', control: undefined },
-      {
-        name: 'partial button',
-        control: <ListItem.Button partiallyInteractive>Pay</ListItem.Button>,
-      },
-      {
-        name: 'partial icon button',
-        control: (
-          <ListItem.IconButton partiallyInteractive aria-label="Edit">
-            <Edit />
-          </ListItem.IconButton>
-        ),
-      },
-    ])('is absent before and after hydration for $name', ({ control }) => {
-      const element = (
-        <Provider i18n={{ locale: 'en-GB', messages: en }}>
-          <ListItem title="Payments" spotlight={spotlight} control={control} />
-        </Provider>
-      );
-      const container = document.createElement('div');
-      container.innerHTML = renderToString(element);
-      expect(within(container).getByRole('listitem')).not.toHaveClass('wds-list-item-spotlight');
-      expect(container.querySelector('.wds-list-item-spotlight__border')).toBeNull();
-      const serverMarkup = container.innerHTML;
-
-      render(element, { container, hydrate: true });
-
-      expect(container.innerHTML).toBe(serverMarkup);
-    });
-  });
-});