@transferwise/components 0.0.0-experimental-6528439 → 0.0.0-experimental-1ffdc56

package/src/criticalBanner/CriticalCommsBanner.less

@@ -1,78 +1,17 @@
-div.critical-comms {
-  --critical-comms-background-color: var(--color-background-negative);
-  --critical-comms-title-color: var(--color-content-negative);
-  --critical-comms-subtitle-color: var(--color-content-secondary);
-  --critical-comms-subtitle-color-padding-left: var(--size-16);
-  --critical-comms-vertical-spacing: var(--size-8);
-
-  .np-theme-personal &,
-  .np-theme-personal--dark & {
-    --critical-comms-background-color: var(--color-sentiment-negative);
-    --critical-comms-title-color: var(--color-contrast);
-    --critical-comms-subtitle-color: var(--color-contrast);
-    --critical-comms-subtitle-color-padding-left: 0;
-    --critical-comms-vertical-spacing: var(--size-16);
-
-    padding: var(--padding-medium);
-
-    .tw-icon-alert-circle-fill {
-      color: var(--color-contrast);
-
-      svg {
-        width: 48px;
-        height: 48px;
-      }
-    }
-
-    .cta-btn {
-      background-color: var(--color-contrast);
-
-      &:not(.disabled,:disabled):focus {
-        outline-color: var(--color-contrast);
+.np-theme-personal {
+  .critical-comms {
+    .alert-critical {
+      color: var(--color-contrast-overlay);
+      background-color: var(--color-sentiment-negative) !important;
+
+      .np-text-title-body {
+        color: var(--color-contrast-overlay);
       }
     }
-  }
-
-  background-color: var(--critical-comms-background-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  @media (--screen-sm-max) {
-    display: initial;
-  }
-
-  .critical-comms--title {
-    color: var(--critical-comms-title-color);
-  }
-
-  .critical-comms--subtitle {
-    color: var(--critical-comms-subtitle-color);
-  }
-
-  .critical-comms--cta {
-    padding-left: 0;
-
-    @media (--screen-sm-max) {
-      padding-left: var(--critical-comms-subtitle-color-padding-left);
-      padding-top: var(--critical-comms-vertical-spacing);
-      min-width: 100%;
-    }
-  }
-
-  .critical-comms-body {
-    display: flex;
-    width: 100%;
-
-    @media (--screen-sm-max) {
-      flex-direction: column;
-    }
-  }
 
-  .critical-comms-content {
-    @media (--screen-sm-max) {
-      padding-top: var(--critical-comms-vertical-spacing);
-      flex-wrap: wrap;
+    .action__desktop {
+      display: flex;
+      align-items: center;
     }
   }
-}
+}

package/src/criticalBanner/CriticalCommsBanner.story.tsx

@@ -1,6 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import CriticalCommsBanner from '.';
+import { Variant } from '../common';
+import { storyConfig } from '../test-utils';
 
 export default {
   component: CriticalCommsBanner,
@@ -8,12 +10,14 @@ export default {
   tags: ['autodocs'],
 } satisfies Meta<typeof CriticalCommsBanner>;
 
-type Story = StoryObj<typeof CriticalCommsBanner>;
-
-export const Basic: Story = {
-  args: {
-    title: 'Your account is overdrawn',
-    subtitle: 'Add money within the next 30 days',
-    action: { label: 'Take action', href: 'https://wise.com' },
+export const Basic = storyConfig(
+  {
+    args: {
+      title: 'Your account is overdrawn',
+      subtitle: 'Add money within the next 30 days',
+      action: { label: 'Take action', href: 'https://wise.com' },
+      variant: Variant.DESKTOP,
+    },
   },
-};
+  { variants: ['default', 'dark', 'rtl'] },
+);

package/src/criticalBanner/CriticalCommsBanner.tsx

@@ -1,13 +1,6 @@
-import { Alert as DangerIcon, AlertCircleFill } from '@transferwise/icons';
-import { useTheme } from '@wise/components-theming';
+import Alert from '../alert';
 import { clsx } from 'clsx';
 
-import Avatar, { AvatarType } from '../avatar';
-import Body from '../body';
-import Button from '../button';
-import { ControlType, Priority, Size, Typography } from '../common';
-import Title from '../title';
-
 export type CriticalCommsBannerProps = {
   title: string;
   subtitle?: string;
@@ -19,50 +12,15 @@ export type CriticalCommsBannerProps = {
 };
 
 function CriticalCommsBanner({ title, subtitle, action, className }: CriticalCommsBannerProps) {
-  const { isModern } = useTheme();
   return (
     <div className={clsx('critical-comms', className)}>
-      <div className="critical-comms-body">
-        <Avatar
-          size={Size.MEDIUM}
-          type={AvatarType.ICON}
-          className={clsx(isModern ? 'm-r-2' : 'm-r-1')}
-          backgroundColor={
-            isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)'
-          }
-        >
-          {isModern ? <AlertCircleFill /> : <DangerIcon size={24} />}
-        </Avatar>
-        <div className="critical-comms-content d-flex align-items-center flex-grow-1">
-          <div className={clsx('flex-grow-1', { 'p-x-2': !isModern })}>
-            <Title
-              type={isModern ? Typography.TITLE_BODY : Typography.TITLE_GROUP}
-              className="critical-comms--title"
-            >
-              {title}
-            </Title>
-            <Body className="critical-comms--subtitle">{subtitle}</Body>
-          </div>
-          {action ? (
-            <div className="critical-comms--cta">
-              <Button
-                block={isModern}
-                size={Size.SMALL}
-                type={ControlType.NEGATIVE}
-                priority={isModern ? Priority.SECONDARY : Priority.PRIMARY}
-                className="cta-btn"
-                onClick={() => {
-                  if (action) {
-                    window.location.href = action.href;
-                  }
-                }}
-              >
-                {action.label}
-              </Button>
-            </div>
-          ) : null}
-        </div>
-      </div>
+      <Alert
+        title={title}
+        message={subtitle}
+        action={{ target: action?.href, text: action?.label }}
+        className={className}
+        type="critical"
+      />
     </div>
   );
 }

package/src/dimmer/Dimmer.tsx

@@ -1,5 +1,6 @@
+import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
-import { MouseEvent, ReactNode, useCallback, useEffect, useRef } from 'react';
+import { MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import {
@@ -58,6 +59,7 @@ const Dimmer = ({
   onClose,
   onExited: handleExited,
 }: DimmerProps) => {
+  const [hasNotExited, setHasNotExited] = useState(false);
   const dimmerReference = useRef<HTMLDivElement>(null);
 
   const closeOnClick = (event: MouseEvent<HTMLDivElement>) => {
@@ -89,11 +91,15 @@ const Dimmer = ({
   );
 
   const onEnter = () => {
+    setHasNotExited(true);
+
     if (dimmerReference.current) {
       dimmerManager.add(dimmerReference.current);
     }
   };
   const onExited = () => {
+    setHasNotExited(false);
+
     if (dimmerReference.current) {
       dimmerManager.remove(dimmerReference.current);
     }
@@ -116,54 +122,76 @@ const Dimmer = ({
   }, [handleKeyDown, open]);
 
   return (
-    <CSSTransition
-      nodeRef={dimmerReference}
-      in={open}
-      appear
-      // Wait for animation to finish before unmount.
-      timeout={{ enter: 0, exit: EXIT_ANIMATION }}
-      classNames={{
-        enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),
-        enterDone: clsx('dimmer--enter-done', {
-          'dimmer--enter-fade': fadeContentOnEnter,
-        }),
-        exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),
-      }}
-      unmountOnExit
-      onEnter={onEnter}
-      onExited={onExited}
-    >
-      <DimmerContentWrapper scrollBody={!transparent}>
-        <FocusBoundary>
-          <div
-            ref={dimmerReference}
-            className={clsx(
-              'dimmer',
-              { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },
-              className,
-            )}
-            role="presentation"
-            onClick={handleClick}
-          >
+    <DimmerWrapper open={open} hasNotExited={hasNotExited}>
+      <CSSTransition
+        nodeRef={dimmerReference}
+        in={open}
+        appear
+        // Wait for animation to finish before unmount.
+        timeout={{ enter: 0, exit: EXIT_ANIMATION }}
+        classNames={{
+          enter: clsx({ 'dimmer--enter-fade': fadeContentOnEnter }),
+          enterDone: clsx('dimmer--enter-done', {
+            'dimmer--enter-fade': fadeContentOnEnter,
+          }),
+          exit: clsx('dimmer--exit', { 'dimmer--exit-fade': fadeContentOnExit }),
+        }}
+        unmountOnExit
+        onEnter={onEnter}
+        onExited={onExited}
+      >
+        <DimmerContentWrapper scrollBody={!transparent}>
+          <FocusBoundary>
             <div
+              ref={dimmerReference}
               className={clsx(
-                'dimmer-content-positioner',
-                contentPosition != null && [
-                  'd-flex justify-content-center',
-                  {
-                    'align-items-start': contentPosition === 'top',
-                    'align-items-center': contentPosition === 'center',
-                    'align-items-end': contentPosition === 'bottom',
-                  },
-                ],
+                'dimmer',
+                { 'dimmer--scrollable': scrollable, 'dimmer--transparent': transparent },
+                className,
               )}
+              role="presentation"
+              onClick={handleClick}
             >
-              {children}
+              <div
+                className={clsx(
+                  'dimmer-content-positioner',
+                  contentPosition != null && [
+                    'd-flex justify-content-center',
+                    {
+                      'align-items-start': contentPosition === 'top',
+                      'align-items-center': contentPosition === 'center',
+                      'align-items-end': contentPosition === 'bottom',
+                    },
+                  ],
+                )}
+              >
+                {children}
+              </div>
             </div>
-          </div>
-        </FocusBoundary>
-      </DimmerContentWrapper>
-    </CSSTransition>
+          </FocusBoundary>
+        </DimmerContentWrapper>
+      </CSSTransition>
+    </DimmerWrapper>
+  );
+};
+
+const DimmerWrapper: React.ComponentType<{
+  open: boolean;
+  hasNotExited: boolean;
+  children: React.ReactNode;
+}> = ({ open, hasNotExited, children }) => {
+  const { screenMode, theme } = useTheme();
+
+  return open || hasNotExited ? (
+    <ThemeProvider
+      theme="personal"
+      screenMode={theme === 'personal' ? screenMode : 'light'}
+      isNotRootProvider
+    >
+      {children}
+    </ThemeProvider>
+  ) : (
+    <>{children}</>
   );
 };
 

package/src/field/Field.story.tsx

@@ -12,7 +12,7 @@ import Info from '../info';
 
 export default {
   component: Field,
-  title: 'Field',
+  title: 'Forms/Field',
   tags: ['autodocs'],
   argTypes: {
     messageIconLabel: {

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -9,10 +9,9 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
       class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
     >
       <button
-        aria-disabled="false"
         aria-label="back to previous step"
         aria-live="off"
-        class="wds-Button np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
+        class="np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"
         style="--circle-size: 40px; --circle-icon-size: 20px; --circle-font-size: 18px;"
         type="button"
       >

package/src/i18n/en.json

@@ -27,6 +27,7 @@
   "neptune.SelectInput.noResultsFound": "No results found",
   "neptune.SelectOption.action.label": "Choose",
   "neptune.SelectOption.selected.action.label": "Change chosen option",
+  "neptune.StatusIcon.iconLabel.critical": "Critical:",
   "neptune.StatusIcon.iconLabel.error": "Error:",
   "neptune.StatusIcon.iconLabel.information": "Information:",
   "neptune.StatusIcon.iconLabel.pending": "Pending:",

package/src/inputs/SelectInput.story.tsx

@@ -5,7 +5,7 @@ import { Flag } from '@wise/art';
 import { clsx } from 'clsx';
 import { useState } from 'react';
 
-import Button from '../button/Button';
+import Button from '../button';
 import { getMonthNames } from '../common/dateUtils';
 import Drawer from '../drawer';
 import { Field } from '../field/Field';

package/src/inputs/_BottomSheet.tsx

@@ -8,7 +8,7 @@ import {
 } from '@floating-ui/react';
 import { Transition } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
-import { ThemedLayer } from '@wise/components-theming';
+import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import { Fragment, useState } from 'react';
 
@@ -60,6 +60,8 @@ export function BottomSheet({
 
   const [floatingKey, setFloatingKey] = useState(0);
 
+  const { theme, screenMode } = useTheme();
+
   return (
     <>
       {open ? <PreventScroll /> : null}
@@ -69,7 +71,11 @@ export function BottomSheet({
       })}
 
       <FloatingPortal>
-        <ThemedLayer>
+        <ThemeProvider
+          theme="personal"
+          screenMode={theme === 'personal' ? screenMode : 'light'}
+          isNotRootProvider
+        >
           <Transition
             show={open}
             className="np-bottom-sheet-v2-container"
@@ -125,7 +131,7 @@ export function BottomSheet({
               </FocusScope>
             </div>
           </Transition>
-        </ThemedLayer>
+        </ThemeProvider>
       </FloatingPortal>
     </>
   );

package/src/inputs/_Popover.tsx

@@ -3,10 +3,10 @@ import {
   flip,
   FloatingFocusManager,
   FloatingPortal,
-  size as floatingSize,
   offset,
   type Placement,
   shift,
+  size as floatingSize,
   useDismiss,
   useFloating,
   useInteractions,
@@ -14,7 +14,7 @@ import {
 } from '@floating-ui/react';
 import { Transition } from '@headlessui/react';
 import { FocusScope } from '@react-aria/focus';
-import { ThemedLayer } from '@wise/components-theming';
+import { ThemeProvider, useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import { useState } from 'react';
 
@@ -79,6 +79,8 @@ export function Popover({
 
   const [floatingKey, setFloatingKey] = useState(0);
 
+  const { theme, screenMode } = useTheme();
+
   return (
     <>
       {open ? <PreventScroll /> : null}
@@ -88,7 +90,11 @@ export function Popover({
       })}
 
       <FloatingPortal>
-        <ThemedLayer>
+        <ThemeProvider
+          theme="personal"
+          screenMode={theme === 'personal' ? screenMode : 'light'}
+          isNotRootProvider
+        >
           <Transition
             show={open}
             leave="transition-opacity"
@@ -125,7 +131,7 @@ export function Popover({
               </FloatingFocusManager>
             </FocusScope>
           </Transition>
-        </ThemedLayer>
+        </ThemeProvider>
       </FloatingPortal>
     </>
   );

package/src/label/Label.story.tsx

@@ -3,7 +3,7 @@ import { Label } from './Label';
 
 export default {
   component: Label,
-  title: 'Label',
+  title: 'Forms/Label',
   tags: ['autodocs'],
 };
 

package/src/link/Link.tsx

@@ -1,13 +1,14 @@
 import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import { AnchorHTMLAttributes } from 'react';
 import { useIntl } from 'react-intl';
+import { PrimitiveAnchor } from '../primitives';
+import type { PrimitiveAnchorProps } from '../primitives';
 
 import { LinkLarge, LinkDefault } from '../common';
 
 import messages from './Link.messages';
 
-export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };
+export type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };
 
 /**
  * Standard Link component with navigate away icon
@@ -24,22 +25,30 @@ const Link = ({
   onClick,
   ...props
 }: Props) => {
+  const { formatMessage } = useIntl();
   const isBlank = target === '_blank';
 
-  const { formatMessage } = useIntl();
+  const classNames = clsx(
+    'np-link',
+    'd-inline-flex',
+    {
+      [`np-text-${type}`]: type,
+    },
+    className,
+  );
 
   return (
-    <a
+    <PrimitiveAnchor
       href={href}
       target={target}
-      className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}
+      className={classNames}
       aria-label={ariaLabel}
       rel={isBlank ? 'noreferrer' : undefined}
       onClick={onClick}
       {...props}
     >
       {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}
-    </a>
+    </PrimitiveAnchor>
   );
 };