@transferwise/components 46.114.1 → 46.115.0

package/src/main.css

@@ -2326,89 +2326,42 @@ button.np-option {
   }
 }
 .np-drawer .np-drawer-header {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
   min-height: 56px;
   min-height: var(--size-56);
-  padding: 24px 16px;
-  padding: var(--size-24) var(--size-16);
-}
-.np-theme-personal .np-drawer .np-drawer-header {
   padding: 24px;
   padding: var(--size-24);
 }
 @media (max-width: 320px) {
-  .np-theme-personal .np-drawer .np-drawer-header {
+  .np-drawer .np-drawer-header {
     padding: 16px;
     padding: var(--size-16);
   }
 }
-.np-theme-personal .np-drawer .np-drawer-header .np-close-button {
-  margin-top: calc(8px * -1);
-  margin-top: calc(var(--size-8) * -1);
-  margin-right: calc(8px * -1);
-  margin-right: calc(var(--size-8) * -1);
-  margin-bottom: calc(8px * -1);
-  margin-bottom: calc(var(--size-8) * -1);
-}
-.np-drawer .np-drawer-header.np-drawer-header--withborder {
-  box-shadow: inset 0 -1px 0 0 #e2e6e8;
-}
-.np-theme-personal .np-drawer .np-drawer-header.np-drawer-header--withborder {
-  box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.10196);
-  box-shadow: inset 0 -1px 0 0 var(--color-border-neutral);
-}
-.np-drawer .np-drawer-header .np-text-title-body {
-  margin-right: 16px;
-  margin-right: var(--size-16);
-  font-size: 1.125rem;
-  font-size: var(--font-size-18);
-  letter-spacing: -0.01em;
-  letter-spacing: var(--letter-spacing-negative-xs);
-  line-height: 1.5rem;
-  line-height: var(--line-height-24);
-}
-.np-drawer .np-drawer-header .np-close-button {
-  margin-left: auto;
-}
-.np-drawer .np-drawer-header .tw-icon {
-  display: block;
-  cursor: pointer;
-  fill: #00b9ff;
+.np-drawer .np-drawer-title {
+  max-width: 85%;
 }
 .np-drawer .np-drawer-content {
   overflow-y: auto;
   flex: 1;
-}
-.np-drawer .np-drawer-content .np-theme-personal {
   background-color: transparent;
 }
-.np-drawer .np-drawer-footer,
-.np-drawer .np-drawer-content {
+.np-drawer .np-drawer-footer {
   padding: 16px;
   padding: var(--size-16);
 }
-.np-drawer .np-drawer-footer {
-  box-shadow: inset 0 1px 0 0 #e2e6e8;
-}
-.np-theme-personal .np-drawer .np-drawer-footer {
-  box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.10196);
-  box-shadow: inset 0 1px 0 0 var(--color-border-neutral);
+.np-drawer .np-drawer-content {
+  padding: 0 16px;
+  padding: 0 var(--size-16);
 }
 @media (min-width: 768px) {
-  .np-drawer .np-drawer-header {
-    padding: 32px 24px;
-    padding: var(--size-32) var(--size-24);
-  }
-  .np-theme-personal .np-drawer .np-drawer-header {
+  .np-drawer .np-drawer-header,
+  .np-drawer .np-drawer-footer {
     padding: 24px;
     padding: var(--size-24);
   }
-  .np-drawer .np-drawer-footer,
   .np-drawer .np-drawer-content {
-    padding: 24px;
-    padding: var(--size-24);
+    padding: 0 24px;
+    padding: 0 var(--size-24);
   }
 }
 .wds-Divider {
@@ -4231,14 +4184,9 @@ button.np-link {
 .tw-modal .tw-modal-dialog {
   transition: transform 0.3s ease-out;
   transform: translateY(-25%);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-  background: #ffffff;
-  background: var(--color-background-elevated);
-}
-.np-theme-personal .tw-modal .tw-modal-dialog {
+  box-shadow: none;
   background: #ffffff;
   background: var(--color-background-elevated);
-  box-shadow: none;
   border-radius: 24px;
   border-radius: var(--radius-large);
 }
@@ -4247,6 +4195,7 @@ button.np-link {
 }
 .tw-modal .tw-modal-content {
   width: 100%;
+  background-color: transparent;
 }
 .tw-modal .tw-modal-content .tw-modal-body {
   flex: 1;
@@ -4255,26 +4204,6 @@ button.np-link {
 .tw-modal .tw-modal-content .tw-modal-body--scrollable {
   overflow-y: auto;
 }
-.tw-modal .tw-modal-content .tw-modal-header {
-  box-shadow: inset 0 -1px 0 0 #e2e6e8;
-}
-.np-theme-personal .tw-modal .tw-modal-content .tw-modal-header {
-  box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.10196);
-  box-shadow: inset 0 -1px 0 0 var(--color-border-neutral);
-}
-.np-theme-personal .tw-modal .tw-modal-content .tw-modal-header .np-close-button {
-  margin: calc(8px * -1) calc(8px * -1) calc(8px * -1) 0;
-  margin: calc(var(--size-8) * -1) calc(var(--size-8) * -1) calc(var(--size-8) * -1) 0;
-}
-.tw-modal .tw-modal-content .tw-modal-header.modal--withoutborder {
-  box-shadow: none;
-}
-.tw-modal .tw-modal-content .tw-modal-header .tw-icon {
-  fill: #0097c7;
-  fill: var(--color-content-accent);
-  cursor: pointer;
-  display: block;
-}
 .tw-modal .tw-modal-content .tw-modal-header,
 .tw-modal .tw-modal-content .tw-modal-footer,
 .tw-modal .tw-modal-content .tw-modal-body {
@@ -4289,55 +4218,16 @@ button.np-link {
   padding-top: var(--size-12);
   padding-bottom: 12px;
   padding-bottom: var(--size-12);
-  box-shadow: inset 0 1px 0 0 #e2e6e8;
-}
-.np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer {
-  border-top: 1px solid rgba(0,0,0,0.10196);
-  border-top: 1px solid var(--color-border-neutral);
-}
-.np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer,
-.tw-modal .tw-modal-content .tw-modal-footer.modal--withoutborder {
-  box-shadow: none;
-}
-.tw-modal .tw-modal-content.tw-modal-no-title .tw-modal-body {
-  padding-top: 0 !important;
-}
-.tw-modal .tw-modal-content.tw-modal-no-title .tw-modal-header {
-  min-height: 32px;
-  min-height: var(--size-32);
-  padding-bottom: 4px !important;
-}
-.tw-modal .tw-modal-content .np-theme-personal {
-  background-color: transparent;
-}
-.tw-modal table,
-.tw-modal .table {
-  background-color: transparent;
 }
 @media (min-width: 576px) {
   .tw-modal .tw-modal-content .tw-modal-header,
-  .tw-modal .tw-modal-content .tw-modal-footer,
-  .tw-modal .tw-modal-content .tw-modal-body {
-    padding: 32px 24px;
-    padding: var(--size-32) var(--size-24);
-  }
-  .np-theme-personal .tw-modal .tw-modal-content .tw-modal-header,
-  .np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer,
-  .np-theme-personal .tw-modal .tw-modal-content .tw-modal-body {
+  .tw-modal .tw-modal-content .tw-modal-footer {
     padding: 24px;
     padding: var(--size-24);
   }
-  .tw-modal .tw-modal-compact .tw-modal-header {
-    min-height: calc(8px * 7);
-    min-height: calc(var(--size-8) * 7);
-  }
-  .tw-modal .tw-modal-compact .tw-modal-header,
-  .tw-modal .tw-modal-compact .tw-modal-footer,
-  .tw-modal .tw-modal-compact .tw-modal-body {
-    padding-top: 16px;
-    padding-top: var(--size-16);
-    padding-bottom: 16px;
-    padding-bottom: var(--size-16);
+  .tw-modal .tw-modal-content .tw-modal-body {
+    padding: 0 24px;
+    padding: 0 var(--size-24);
   }
 }
 @media (min-width: 480px) {

package/src/modal/Modal.css

@@ -6,14 +6,9 @@
 .tw-modal .tw-modal-dialog {
   transition: transform 0.3s ease-out;
   transform: translateY(-25%);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-  background: #ffffff;
-  background: var(--color-background-elevated);
-}
-.np-theme-personal .tw-modal .tw-modal-dialog {
+  box-shadow: none;
   background: #ffffff;
   background: var(--color-background-elevated);
-  box-shadow: none;
   border-radius: 24px;
   border-radius: var(--radius-large);
 }
@@ -22,6 +17,7 @@
 }
 .tw-modal .tw-modal-content {
   width: 100%;
+  background-color: transparent;
 }
 .tw-modal .tw-modal-content .tw-modal-body {
   flex: 1;
@@ -30,26 +26,6 @@
 .tw-modal .tw-modal-content .tw-modal-body--scrollable {
   overflow-y: auto;
 }
-.tw-modal .tw-modal-content .tw-modal-header {
-  box-shadow: inset 0 -1px 0 0 #e2e6e8;
-}
-.np-theme-personal .tw-modal .tw-modal-content .tw-modal-header {
-  box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.10196);
-  box-shadow: inset 0 -1px 0 0 var(--color-border-neutral);
-}
-.np-theme-personal .tw-modal .tw-modal-content .tw-modal-header .np-close-button {
-  margin: calc(8px * -1) calc(8px * -1) calc(8px * -1) 0;
-  margin: calc(var(--size-8) * -1) calc(var(--size-8) * -1) calc(var(--size-8) * -1) 0;
-}
-.tw-modal .tw-modal-content .tw-modal-header.modal--withoutborder {
-  box-shadow: none;
-}
-.tw-modal .tw-modal-content .tw-modal-header .tw-icon {
-  fill: #0097c7;
-  fill: var(--color-content-accent);
-  cursor: pointer;
-  display: block;
-}
 .tw-modal .tw-modal-content .tw-modal-header,
 .tw-modal .tw-modal-content .tw-modal-footer,
 .tw-modal .tw-modal-content .tw-modal-body {
@@ -64,55 +40,16 @@
   padding-top: var(--size-12);
   padding-bottom: 12px;
   padding-bottom: var(--size-12);
-  box-shadow: inset 0 1px 0 0 #e2e6e8;
-}
-.np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer {
-  border-top: 1px solid rgba(0,0,0,0.10196);
-  border-top: 1px solid var(--color-border-neutral);
-}
-.np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer,
-.tw-modal .tw-modal-content .tw-modal-footer.modal--withoutborder {
-  box-shadow: none;
-}
-.tw-modal .tw-modal-content.tw-modal-no-title .tw-modal-body {
-  padding-top: 0 !important;
-}
-.tw-modal .tw-modal-content.tw-modal-no-title .tw-modal-header {
-  min-height: 32px;
-  min-height: var(--size-32);
-  padding-bottom: 4px !important;
-}
-.tw-modal .tw-modal-content .np-theme-personal {
-  background-color: transparent;
-}
-.tw-modal table,
-.tw-modal .table {
-  background-color: transparent;
 }
 @media (min-width: 576px) {
   .tw-modal .tw-modal-content .tw-modal-header,
-  .tw-modal .tw-modal-content .tw-modal-footer,
-  .tw-modal .tw-modal-content .tw-modal-body {
-    padding: 32px 24px;
-    padding: var(--size-32) var(--size-24);
-  }
-  .np-theme-personal .tw-modal .tw-modal-content .tw-modal-header,
-  .np-theme-personal .tw-modal .tw-modal-content .tw-modal-footer,
-  .np-theme-personal .tw-modal .tw-modal-content .tw-modal-body {
+  .tw-modal .tw-modal-content .tw-modal-footer {
     padding: 24px;
     padding: var(--size-24);
   }
-  .tw-modal .tw-modal-compact .tw-modal-header {
-    min-height: calc(8px * 7);
-    min-height: calc(var(--size-8) * 7);
-  }
-  .tw-modal .tw-modal-compact .tw-modal-header,
-  .tw-modal .tw-modal-compact .tw-modal-footer,
-  .tw-modal .tw-modal-compact .tw-modal-body {
-    padding-top: 16px;
-    padding-top: var(--size-16);
-    padding-bottom: 16px;
-    padding-bottom: var(--size-16);
+  .tw-modal .tw-modal-content .tw-modal-body {
+    padding: 0 24px;
+    padding: 0 var(--size-24);
   }
 }
 @media (min-width: 480px) {

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>