@transferwise/components 0.0.0-experimental-6e04f56 → 0.0.0-experimental-542ae69

package/src/styles/less/popovers.css

@@ -1,4 +1,36 @@
-.close {
+.popover,
+.popover-content {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .popover,
+  .popover-content {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .popover,
+    .popover-content {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .popover,
+    .popover-content {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .popover,
+  .popover-content {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .popover,
+    .popover-content {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.close {
   float: inline-end;
   color: #0097c7;
   color: var(--color-content-accent);
@@ -66,12 +98,6 @@ button.close {
   word-break: normal;
   word-spacing: normal;
   word-wrap: normal;
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
@@ -258,20 +284,8 @@ button.close {
   margin-inline: 0;
 }
 .popover-title {
-  padding: 0;
   margin: 0;
-  color: #37517e;
-  color: var(--color-content-primary);
-  line-height: 1.2;
-  line-height: var(--line-height-title);
-  letter-spacing: 0;
-  word-wrap: break-word;
-  font-size: 1.125rem;
-  font-size: var(--font-size-18);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: -0.014em;
-  line-height: 135%;
+  padding: 0;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-block-end: 0;
@@ -279,50 +293,11 @@ button.close {
   border-start-end-radius: 2px;
   border-end-end-radius: 0;
   border-end-start-radius: 0;
+  color: #37517e !important;
   color: var(--color-content-primary) !important;
 }
-@supports (hyphenate-limit-chars: 1) {
-  .popover-title {
-    hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .popover-title {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .popover-title {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}
-@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .popover-title {
-    hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .popover-title {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}
-.popover-title + p,
-.popover-title + ul:not(.list-unstyled),
-.popover-title + ol:not(.list-unstyled) {
-  margin-block-start: 8px;
-  margin-block-start: var(--size-8);
-}
 .popover-content {
   padding: 0;
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   color: #5d7079;
   color: var(--color-content-secondary);

package/src/styles/less/popovers.less

@@ -24,7 +24,7 @@
   // So reset our font and text properties to avoid inheriting weird values.
   .reset-text();
 
-  .np-text-body-default;
+  .wds-text-body-default;
 
   background-color: var(--color-background-screen);
   background-clip: padding-box;
@@ -221,7 +221,7 @@
   margin: 0; // reset heading margin
   padding: 0;
 
-  .np-text-title-body();
+  .wds-text-title-body();
 
   background-color: var(--color-background-screen);
   border-bottom: 0;
@@ -232,7 +232,7 @@
 .popover-content {
   padding: 0;
 
-  .np-text-body-default;
+  .wds-text-body-default;
 
   color: var(--color-content-secondary);
 }

package/src/styles/less/sequences.css

@@ -131,6 +131,10 @@
 .sequence > li .h2,
 .sequence > li .h3,
 .sequence > li .h4,
+.sequence > li .wds-text-title-screen,
+.sequence > li .wds-text-title-section,
+.sequence > li .wds-text-title-subsection,
+.sequence > li .wds-text-title-body,
 .sequence > li .btn-toolbar {
   margin-block-end: 16px;
 }
@@ -221,7 +225,8 @@
 }
 .sequence-inverse > .active .small,
 .sequence-inverse > .active .body-2,
-.sequence-inverse > .active .np-text-body-default {
+.sequence-inverse > .active .np-text-body-default,
+.sequence-inverse > .active .wds-text-body-default {
   color: #5d7079;
   color: var(--color-content-secondary);
 }

package/src/styles/less/sequences.less

@@ -85,6 +85,10 @@
     .h2,
     .h3,
     .h4,
+    .wds-text-title-screen,
+    .wds-text-title-section,
+    .wds-text-title-subsection,
+    .wds-text-title-body,
     .btn-toolbar {
       margin-bottom: 16px;
     }
@@ -186,7 +190,8 @@
 
     .small,
     .body-2,
-    .np-text-body-default {
+    .np-text-body-default,
+    .wds-text-body-default {
       color: var(--color-content-secondary);
     }
 
@@ -216,7 +221,7 @@
 
   > .active {
     &::before {
-      border-width: (@sequence-pip-size / 2);  // TODO sequence-line-width?
+      border-width: (@sequence-pip-size / 2); // TODO sequence-line-width?
     }
 
     ~ li::before {

package/src/styles/less/tooltip.css

@@ -1,4 +1,30 @@
-.tooltip {
+.tooltip-inner {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .tooltip-inner {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .tooltip-inner {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .tooltip-inner {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .tooltip-inner {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .tooltip-inner {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.tooltip {
   position: absolute;
   z-index: 1070;
   display: block;
@@ -45,12 +71,6 @@
   padding-inline: 5px;
 }
 .tooltip-inner {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   max-inline-size: 200px;
   min-inline-size: 120px;

package/src/styles/less/tooltip.less

@@ -50,7 +50,7 @@
 
 // Wrapper for the tooltip content
 .tooltip-inner {
-  .np-text-body-default;
+  .wds-text-body-default;
 
   max-width: @tooltip-max-width;
   min-width: 120px;

package/src/Snackbar/Snackbar.test.tsx

@@ -1,190 +0,0 @@
-import { act, render, screen, userEvent } from '../test-utils';
-import Button from '../Button';
-
-import { Snackbar, type SnackbarProps } from './Snackbar';
-import { SnackbarConsumer } from './SnackbarContext';
-import SnackbarProvider from './SnackbarProvider';
-
-const CSS_TRANSITION_DURATION = 400;
-const TIMEOUT = 4000;
-
-const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTimeAsync });
-
-const advanceTimers = (duration: number) => {
-  act(() => {
-    jest.advanceTimersByTime(duration);
-  });
-};
-
-const renderSnackbar = (props: Partial<SnackbarProps> = {}) =>
-  render(<Snackbar text="" timeout={TIMEOUT} timestamp={0} {...props} />);
-
-beforeEach(() => {
-  jest.useFakeTimers();
-});
-
-afterEach(() => {
-  jest.clearAllTimers();
-  jest.useRealTimers();
-});
-
-describe('Snackbar', () => {
-  it('renders the live region wrapper even while no notification is shown', () => {
-    renderSnackbar();
-
-    expect(screen.getByRole('alert')).toHaveAttribute('aria-live', 'assertive');
-    expect(screen.getByRole('alert')).toHaveClass('snackbar');
-  });
-
-  it('does not show a notification that is already present on mount', () => {
-    renderSnackbar({ text: 'Changes saved', timestamp: 1 });
-
-    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
-  });
-
-  it('shows the notification once text arrives after mount', () => {
-    const { rerender } = renderSnackbar();
-
-    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
-
-    expect(screen.getByText('Changes saved')).toBeInTheDocument();
-  });
-
-  it('renders an action and calls its onClick handler', async () => {
-    const onClick = jest.fn();
-    const { rerender } = renderSnackbar();
-
-    rerender(
-      <Snackbar
-        action={{ label: 'View', onClick }}
-        text="Transfer completed"
-        timeout={TIMEOUT}
-        timestamp={1}
-      />,
-    );
-    await user.click(screen.getByRole('button', { name: 'View' }));
-
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('dismisses the notification once the timeout elapses', () => {
-    const { rerender } = renderSnackbar();
-
-    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
-
-    advanceTimers(TIMEOUT - 1);
-    expect(screen.getByText('Changes saved')).toBeInTheDocument();
-
-    advanceTimers(1);
-    advanceTimers(CSS_TRANSITION_DURATION);
-    expect(screen.queryByText('Changes saved')).not.toBeInTheDocument();
-  });
-
-  it('exits the current notification before entering the next one', () => {
-    const { rerender } = renderSnackbar();
-
-    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
-    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
-
-    advanceTimers(CSS_TRANSITION_DURATION - 1);
-    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
-
-    advanceTimers(1);
-    expect(screen.getByText('Second message')).toBeInTheDocument();
-    expect(screen.queryByText('First message')).not.toBeInTheDocument();
-  });
-
-  it('shows the next notification immediately when the previous one has already been dismissed', () => {
-    const { rerender } = renderSnackbar();
-
-    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
-    advanceTimers(TIMEOUT + CSS_TRANSITION_DURATION);
-
-    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
-    expect(screen.getByText('Second message')).toBeInTheDocument();
-  });
-
-  it('restarts the timeout for a replacing notification', () => {
-    const { rerender } = renderSnackbar();
-
-    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
-    advanceTimers(TIMEOUT - 100);
-
-    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={2} />);
-    advanceTimers(CSS_TRANSITION_DURATION);
-    expect(screen.getByText('Second message')).toBeInTheDocument();
-
-    advanceTimers(TIMEOUT - 1);
-    expect(screen.getByText('Second message')).toBeInTheDocument();
-
-    advanceTimers(1);
-    advanceTimers(CSS_TRANSITION_DURATION);
-    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
-  });
-
-  // Documents existing behaviour rather than endorsing it: clearing the text leaves the notification
-  // on screen indefinitely, because the previous shouldComponentUpdate blocked the dismissal too.
-  it('keeps the notification visible for as long as text is empty', () => {
-    const { rerender } = renderSnackbar();
-
-    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
-    rerender(<Snackbar text="" timeout={TIMEOUT} timestamp={2} />);
-
-    advanceTimers(TIMEOUT + CSS_TRANSITION_DURATION);
-    expect(screen.getByText('Changes saved')).toBeInTheDocument();
-  });
-
-  it('ignores a repeated timestamp', () => {
-    const { rerender } = renderSnackbar();
-
-    rerender(<Snackbar text="First message" timeout={TIMEOUT} timestamp={1} />);
-    rerender(<Snackbar text="Second message" timeout={TIMEOUT} timestamp={1} />);
-
-    advanceTimers(CSS_TRANSITION_DURATION);
-    expect(screen.getByText('First message')).toBeInTheDocument();
-    expect(screen.queryByText('Second message')).not.toBeInTheDocument();
-  });
-
-  it('clears its pending dismissal timer on unmount', () => {
-    const { rerender, unmount } = renderSnackbar();
-
-    rerender(<Snackbar text="Changes saved" timeout={TIMEOUT} timestamp={1} />);
-    const pendingTimers = jest.getTimerCount();
-    unmount();
-
-    // The timer left behind belongs to CSSTransition's enter timeout, not to Snackbar.
-    expect(jest.getTimerCount()).toBe(pendingTimers - 1);
-  });
-});
-
-describe('Snackbar created through SnackbarProvider', () => {
-  const renderProvider = () =>
-    render(
-      <SnackbarProvider timeout={TIMEOUT}>
-        <SnackbarConsumer>
-          {({ createSnackbar }) => (
-            <Button onClick={() => createSnackbar({ text: 'Changes saved' })}>Show</Button>
-          )}
-        </SnackbarConsumer>
-      </SnackbarProvider>,
-    );
-
-  it('shows a notification created through the context', async () => {
-    renderProvider();
-
-    await user.click(screen.getByRole('button', { name: 'Show' }));
-
-    expect(screen.getByText('Changes saved')).toBeInTheDocument();
-  });
-
-  it('shows only one notification when the trigger is clicked repeatedly', async () => {
-    renderProvider();
-
-    const trigger = screen.getByRole('button', { name: 'Show' });
-    await user.click(trigger);
-    await user.click(trigger);
-    await user.click(trigger);
-
-    expect(screen.getAllByRole('alert')).toHaveLength(1);
-  });
-});