@transferwise/components 46.114.0 → 46.115.0

package/src/modal/Modal.less

@@ -10,14 +10,9 @@
   .tw-modal-dialog {
     transition: transform 0.3s ease-out;
     transform: translateY(-25%);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    box-shadow: none;
     background: var(--color-background-elevated);
-
-    .np-theme-personal & {
-      background: var(--color-background-elevated);
-      box-shadow: none;
-      border-radius: var(--radius-large);
-    }
+    border-radius: var(--radius-large);
   }
 
   &.in {
@@ -28,6 +23,7 @@
 
   .tw-modal-content {
     width: 100%;
+    background-color: transparent;
 
     .tw-modal-body {
       flex: 1;
@@ -38,28 +34,6 @@
       }
     }
 
-    .tw-modal-header {
-      box-shadow: inset 0 -1px 0 0 rgb(226 230 232);
-
-      .np-theme-personal & {
-        box-shadow: inset 0 -1px 0 0 var(--color-border-neutral);
-
-        .np-close-button {
-          margin: calc(var(--size-8) * -1) calc(var(--size-8) * -1) calc(var(--size-8) * -1) 0;
-        }
-      }
-
-      &.modal--withoutborder {
-        box-shadow: none;
-      }
-
-      .tw-icon {
-        fill: var(--color-content-accent);
-        cursor: pointer;
-        display: block;
-      }
-    }
-
     .tw-modal-header,
     .tw-modal-footer,
     .tw-modal-body {
@@ -73,63 +47,19 @@
     .tw-modal-footer {
       padding-top: var(--size-12);
       padding-bottom: var(--size-12);
-      box-shadow: inset 0 1px 0 0 rgb(226 230 232);
-
-      .np-theme-personal & {
-        border-top: 1px solid var(--color-border-neutral);
-      }
-
-      .np-theme-personal &,
-      &.modal--withoutborder {
-        box-shadow: none;
-      }
-    }
-
-    &.tw-modal-no-title {
-      .tw-modal-body {
-        padding-top: 0 !important;
-      }
-
-      .tw-modal-header {
-        min-height: var(--size-32);
-        padding-bottom: 4px !important;
-      }
-    }
-
-    .np-theme-personal {
-      background-color: transparent;
     }
   }
-
-  table, .table {
-    background-color: transparent;
-  }
 }
 
 @media (--screen-sm) {
   .tw-modal {
     .tw-modal-content {
       .tw-modal-header,
-      .tw-modal-footer,
-      .tw-modal-body {
-        padding: var(--size-32) var(--size-24);
-
-        .np-theme-personal & {
-          padding: var(--size-24);
-        }
-      }
-    }
-
-    .tw-modal-compact {
-      .tw-modal-header {
-        min-height: calc(var(--size-8) * 7);
+      .tw-modal-footer {
+        padding: var(--size-24);
       }
-
-      .tw-modal-header,
-      .tw-modal-footer,
       .tw-modal-body {
-        padding-top: var(--size-16);
-        padding-bottom: var(--size-16);
+        padding: 0 var(--size-24);
       }
     }
   }

package/src/modal/Modal.tsx

@@ -1,6 +1,7 @@
 import { clsx } from 'clsx';
 import { ReactNode, useContext, useId, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
+import { useIntl } from 'react-intl';
 
 import {
   Size,
@@ -17,12 +18,14 @@ import {
   ScrollViewport,
   Typography,
 } from '../common';
-import { CloseButton } from '../common/closeButton';
 import { useLayout } from '../common/hooks';
 import Dimmer from '../dimmer';
 import Drawer from '../drawer';
 import { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';
 import Title from '../title/Title';
+import { Cross } from '@transferwise/icons';
+import IconButton from '../iconButton';
+import closeBtnMessages from '../common/closeButton/CloseButton.messages';
 
 const TRANSITION_DURATION_IN_MILLISECONDS = 150;
 
@@ -53,14 +56,9 @@ const Modal = ({
   disableDimmerClickToClose = false,
   ...otherProps
 }: ModalProps) => {
-  const checkSpecialClasses = (classToCheck: string) =>
-    className?.split(' ').includes(classToCheck);
+  const intl = useIntl();
   const { isMedium } = useLayout();
 
-  // These should be replaced with props in breaking change.
-  const isCompact = checkSpecialClasses('compact');
-  const noDivider = checkSpecialClasses('no-divider');
-
   const contentReference = useRef<HTMLDivElement>(null);
   const titleId = useId();
 
@@ -121,10 +119,6 @@ const Modal = ({
                 'd-flex',
                 'flex-column',
                 'justify-content-between',
-                {
-                  'tw-modal-compact': isCompact,
-                  'tw-modal-no-title': !title,
-                },
               )}
             >
               <div
@@ -132,17 +126,23 @@ const Modal = ({
                   'tw-modal-header',
                   'd-flex',
                   'align-items-center',
-                  'justify-content-between',
+                  title ? 'justify-content-between' : 'justify-content-end',
                   'flex-wrap',
-                  {
-                    'modal--withoutborder': !title || noDivider,
-                  },
                 )}
               >
-                <Title id={titleId} type={Typography.TITLE_BODY} className="tw-modal-title">
-                  {title}
-                </Title>
-                <CloseButton onClick={onClose} />
+                {title && (
+                  <Title id={titleId} type={Typography.TITLE_SUBSECTION} className="tw-modal-title">
+                    {title}
+                  </Title>
+                )}
+                <IconButton
+                  size={40}
+                  priority="tertiary"
+                  aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}
+                  onClick={onClose}
+                >
+                  <Cross />
+                </IconButton>
               </div>
               <div
                 className={clsx('tw-modal-body', {
@@ -151,14 +151,14 @@ const Modal = ({
               >
                 {body}
               </div>
-              {footer && (
+              {footer ? (
                 <div
-                  className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap', {
-                    'modal--withoutborder': noDivider,
-                  })}
+                  className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap')}
                 >
                   {footer}
                 </div>
+              ) : (
+                <div className="m-t-3" />
               )}
             </div>
           </div>

package/src/provider/theme/ThemeProvider.story.tsx

@@ -2,6 +2,10 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { ThemeProvider } from '@wise/components-theming';
 
 import Button from '../../button';
+import { lorem100 } from '../../test-utils';
+import Display from '../../display';
+import Logo from '../../logo';
+import Body from '../../body';
 
 export default {
   component: ThemeProvider,
@@ -17,3 +21,22 @@ export const PlatformTheme: Story = {
     </ThemeProvider>
   ),
 };
+
+export const BusinessLandingPage: Story = {
+  render: () => (
+    <ThemeProvider theme="business">
+      <Display type="display-large">Wise Business</Display>
+      <Body type="body-large-bold">
+        {lorem100}
+      </Body>
+      <ThemeProvider theme="business--forest-green">
+        <Body type="body-large">
+          {lorem100}
+        </Body>
+      </ThemeProvider>
+      <Body type="body-large">
+        {lorem100}
+      </Body>
+    </ThemeProvider>
+  ),
+};