@transferwise/components 0.0.0-experimental-7df8816 → 0.0.0-experimental-d2bc8ee

package/src/drawer/Drawer.css

@@ -16,41 +16,88 @@
   }
 }
 .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-drawer .np-drawer-header {
+  .np-theme-personal .np-drawer .np-drawer-header {
     padding: 16px;
     padding: var(--size-16);
   }
 }
-.np-drawer .np-drawer-title {
-  max-width: 85%;
+.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(14,15,12,0.12157);
+  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-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-footer,
+.np-drawer .np-drawer-content {
   padding: 16px;
   padding: var(--size-16);
 }
-.np-drawer .np-drawer-content {
-  padding: 0 16px;
-  padding: 0 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(14,15,12,0.12157);
+  box-shadow: inset 0 1px 0 0 var(--color-border-neutral);
 }
 @media (min-width: 768px) {
-  .np-drawer .np-drawer-header,
-  .np-drawer .np-drawer-footer {
+  .np-drawer .np-drawer-header {
+    padding: 32px 24px;
+    padding: var(--size-32) var(--size-24);
+  }
+  .np-theme-personal .np-drawer .np-drawer-header {
     padding: 24px;
     padding: var(--size-24);
   }
+  .np-drawer .np-drawer-footer,
   .np-drawer .np-drawer-content {
-    padding: 0 24px;
-    padding: 0 var(--size-24);
+    padding: 24px;
+    padding: var(--size-24);
   }
 }

package/src/drawer/Drawer.less

@@ -1,3 +1,6 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/addons/_spacing-utilities.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+
 .np-drawer {
   display: flex;
   flex-direction: column;
@@ -13,36 +16,89 @@
   max-height: 100dvh;
 
   .np-drawer-header {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
     min-height: var(--size-56);
-    padding: var(--size-24);
-    @media (--screen-400-zoom) {
-      padding: var(--size-16);
+    padding: var(--size-24) var(--size-16);
+
+    .np-theme-personal & {
+      padding: var(--size-24);
+      @media (--screen-400-zoom) {
+        padding: var(--size-16);
+      }
+
+      .np-close-button {
+        @close-btn-margin: calc(var(--size-8) * -1);
+
+        margin-top: @close-btn-margin;
+        margin-right: @close-btn-margin;
+        margin-bottom: @close-btn-margin;
+      }
+    }
+
+    &.np-drawer-header--withborder {
+      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-text-title-body {
+      margin-right: var(--size-16);
+      font-size: var(--font-size-18);
+      letter-spacing: var(--letter-spacing-negative-xs);
+      line-height: var(--line-height-24);
+    }
+
+    .np-close-button {
+      margin-left: auto;
+    }
+
+    .tw-icon {
+      display: block;
+      cursor: pointer;
+      fill: rgb(0 185 255);
     }
   }
-  .np-drawer-title {
-    max-width: 85%;
-  }
+
   .np-drawer-content {
     overflow-y: auto;
     flex: 1;
-    background-color: transparent;
+
+    .np-theme-personal {
+      background-color: transparent;
+    }
   }
-  .np-drawer-footer {
+
+  .np-drawer-footer,
+  .np-drawer-content {
     padding: var(--size-16);
   }
-  .np-drawer-content {
-    padding: 0 var(--size-16);
+
+  .np-drawer-footer {
+    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);
+    }
   }
 }
 
 @media (--screen-md) {
   .np-drawer {
-    .np-drawer-header,
-    .np-drawer-footer {
-      padding: var(--size-24);
+    .np-drawer-header {
+      padding: var(--size-32) var(--size-24);
+
+      .np-theme-personal & {
+        padding: var(--size-24);
+      }
     }
+
+    .np-drawer-footer,
     .np-drawer-content {
-      padding: 0 var(--size-24);
+      padding: var(--size-24);
     }
   }
 }

package/src/drawer/Drawer.story.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { Position, Priority } from '../common';
-import { Section, Button, Input, Modal, type DrawerProps, Body } from '..';
+import { Section, Button, Input, Modal, type DrawerProps } from '..';
 import Drawer from './Drawer';
-import { lorem10, lorem20, lorem40, lorem5 } from '../test-utils';
 
 export default {
   component: Drawer,
@@ -15,167 +14,110 @@ export default {
   },
 };
 
-export const Basic = {
-  args: {
-    position: Position.RIGHT,
-    open: true,
-  },
-  render: (args: DrawerProps) => {
-    const [openDrawer, setOpenDrawer] = useState(args.open);
-    const [openModal, setOpenModal] = useState(false);
-
-    return (
-      <>
-        <Button v2 disabled={false} block={false} onClick={() => setOpenDrawer(true)}>
-          Open drawer
-        </Button>
-        <Drawer
-          open={openDrawer}
-          position={args.position}
-          headerTitle="This is the title of the drawer"
-          footerContent={
-            <>
-              <Button v2 block className="m-b-1" onClick={() => {}}>
-                Action 1
-              </Button>
-              <Button v2 block priority={Priority.SECONDARY} onClick={() => {}}>
-                Action 2
-              </Button>
-            </>
-          }
-          onClose={(event) => {
-            console.log('drawer close');
-            event.stopPropagation();
-            setOpenDrawer(false);
-          }}
-        >
-          <p>{lorem20}</p>
-          <Section className="m-t-2">
-            <Input />
-            <p className="m-t-3">{lorem5}</p>
-            <Button v2 onClick={() => setOpenModal(true)}>
-              Open Modal
-            </Button>
-            <Modal
-              body={<p>{lorem40}</p>}
-              open={openModal}
-              title="Title"
-              onClose={() => {
-                console.log('modal close');
-                setOpenModal(false);
-              }}
-            />
-          </Section>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-        </Drawer>
-      </>
-    );
-  },
-};
+export const Basic = (args: DrawerProps) => {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [openModal, setOpenModal] = useState(false);
 
-export const LongTitle = {
-  args: {
-    open: true,
-  },
-  render: (args: DrawerProps) => {
-    const [openDrawer, setOpenDrawer] = useState(args.open);
-    return (
-      <>
-        <Button v2 block={false} onClick={() => setOpenDrawer(true)}>
-          Open drawer
-        </Button>
-        <Drawer
-          open={openDrawer}
-          headerTitle={lorem10}
-          footerContent={
+  return (
+    <>
+      <Button v2 disabled={false} block={false} onClick={() => setOpenDrawer(true)}>
+        Open drawer
+      </Button>
+      <Drawer
+        open={openDrawer}
+        position={args.position}
+        headerTitle="This is the title of the drawer"
+        footerContent={
+          <>
             <Button v2 block onClick={() => {}}>
               Action 1
             </Button>
-          }
-          onClose={() => {
-            setOpenDrawer(false);
-          }}
-        >
-          <p>{lorem20}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-        </Drawer>
-      </>
-    );
-  },
-};
-
-export const NoTitle = {
-  args: {
-    open: true,
-  },
-  render: (args: DrawerProps) => {
-    const [openDrawer, setOpenDrawer] = useState(args.open);
-    return (
-      <>
-        <Button v2 block={false} onClick={() => setOpenDrawer(true)}>
-          Open drawer
-        </Button>
-        <Drawer
-          open={openDrawer}
-          footerContent={
-            <Button v2 block onClick={() => {}}>
-              Action 1
+            <Button v2 block priority={Priority.SECONDARY} onClick={() => {}}>
+              Action 2
             </Button>
-          }
-          onClose={() => {
-            setOpenDrawer(false);
-          }}
-        >
-          <p>{lorem20}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-        </Drawer>
-      </>
-    );
-  },
+          </>
+        }
+        onClose={(event) => {
+          console.log('drawer close');
+          event.stopPropagation();
+          setOpenDrawer(false);
+        }}
+      >
+        <p>
+          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
+          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
+          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
+          stumptown try-hard chartreuse.
+        </p>
+        <Section className="m-t-2">
+          <Input />
+          <p className="m-t-3">Cat ipsum dolor sit amet, purr when being pet.</p>
+          <Button v2 onClick={() => setOpenModal(true)}>
+            Open Modal
+          </Button>
+          <Modal
+            body={
+              <p className="m-t-4">
+                I am baby actually poke kickstarter, street art jean shorts bespoke chambray
+                activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo,
+                cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage
+                disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke
+                kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa
+                shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts
+                bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape
+                cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester
+                readymade selvage disrupt pok pok.
+              </p>
+            }
+            open={openModal}
+            title="Title"
+            onClose={() => {
+              console.log('modal close');
+              setOpenModal(false);
+            }}
+          />
+        </Section>
+        <p>
+          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
+          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
+          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
+          stumptown try-hard chartreuse.
+        </p>
+        <p>
+          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
+          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
+          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
+          stumptown try-hard chartreuse.
+        </p>
+        <p>
+          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
+          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
+          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
+          stumptown try-hard chartreuse.
+        </p>
+        <p>
+          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
+          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
+          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
+          stumptown try-hard chartreuse.
+        </p>
+        <p>
+          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
+          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
+          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
+          stumptown try-hard chartreuse.
+        </p>
+        <p>
+          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
+          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
+          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
+          stumptown try-hard chartreuse.
+        </p>
+      </Drawer>
+    </>
+  );
 };
 
-export const NoFooter = {
-  args: {
-    open: true,
-  },
-  render: (args: DrawerProps) => {
-    const [openDrawer, setOpenDrawer] = useState(args.open);
-    return (
-      <>
-        <Button v2 block={false} onClick={() => setOpenDrawer(true)}>
-          Open drawer
-        </Button>
-        <Drawer
-          open={openDrawer}
-          headerTitle="This is the title of the drawer"
-          onClose={() => {
-            setOpenDrawer(false);
-          }}
-        >
-          <p>{lorem20}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-          <p>{lorem40}</p>
-          <Body>{lorem40}</Body>
-        </Drawer>
-      </>
-    );
-  },
+Basic.args = {
+  position: Position.RIGHT,
 };

package/src/drawer/Drawer.tsx

@@ -2,16 +2,13 @@ import { clsx } from 'clsx';
 import { HTMLAttributes, useContext, useId } from 'react';
 
 import { Position, Typography } from '../common';
+import { CloseButton } from '../common/closeButton';
 import { useLayout } from '../common/hooks';
 import Dimmer from '../dimmer';
 import { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';
 import SlidingPanel from '../slidingPanel';
 import Title from '../title';
 import { logActionRequiredIf } from '../utilities';
-import IconButton from '../iconButton';
-import closeBtnMessages from '../common/closeButton/CloseButton.messages';
-import { useIntl } from 'react-intl';
-import { Cross } from '@transferwise/icons';
 
 export type DrawerProps = {
   /** The content to appear in the drawer body. */
@@ -42,7 +39,6 @@ export default function Drawer({
   role = 'dialog',
   'aria-labelledby': ariaLabelledBy,
 }: DrawerProps) {
-  const intl = useIntl();
   logActionRequiredIf(
     'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',
     !onClose,
@@ -64,34 +60,19 @@ export default function Drawer({
           className={clsx('np-drawer', className)}
         >
           <div
-            className={clsx(
-              'np-drawer-header',
-              'd-flex',
-              'align-items-center',
-              headerTitle ? 'justify-content-between' : 'justify-content-end',
-              'flex-wrap',
-            )}
+            className={clsx('np-drawer-header', {
+              'np-drawer-header--withborder': headerTitle,
+            })}
           >
             {headerTitle && (
-              <Title id={titleId} type={Typography.TITLE_SUBSECTION} className="np-drawer-title">
+              <Title id={titleId} type={Typography.TITLE_BODY}>
                 {headerTitle}
               </Title>
             )}
-            <IconButton
-              size={40}
-              priority="tertiary"
-              aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}
-              onClick={onClose}
-            >
-              <Cross />
-            </IconButton>
+            <CloseButton onClick={onClose} />
           </div>
           {children && <div className={clsx('np-drawer-content')}>{children}</div>}
-          {footerContent ? (
-            <div className={clsx('np-drawer-footer')}>{footerContent}</div>
-          ) : (
-            <div className="m-t-3" />
-          )}
+          {footerContent && <div className={clsx('np-drawer-footer')}>{footerContent}</div>}
         </div>
       </SlidingPanel>
     </Dimmer>

package/src/emphasis/Emphasis.css

@@ -4,28 +4,27 @@
   font-style: normal;
 }
 .emphasis--important {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .emphasis--positive {
-  color: #008026;
   color: var(--color-content-positive);
 }
 .np-theme-personal .emphasis--positive {
+  color: #054d28;
   color: var(--color-sentiment-positive);
 }
 .emphasis--negative {
-  color: #cf2929;
   color: var(--color-content-negative);
 }
 .np-theme-personal .emphasis--negative {
+  color: #cb272f;
   color: var(--color-sentiment-negative);
 }
 .emphasis--warning {
-  color: #9a6500;
   color: var(--color-content-warning);
 }
 .np-theme-personal .emphasis--warning {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }

package/src/expressiveMoneyInput/ExpressiveMoneyInput.css

@@ -6,6 +6,7 @@
   justify-content: right;
   width: 100%;
   transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
+  color: #163300;
   color: var(--color-interactive-primary);
   overflow: hidden;
   margin-bottom: 0 !important;
@@ -40,6 +41,7 @@
   width: 32px;
   width: var(--size-32);
   overflow: hidden;
+  color: #163300;
   color: var(--color-interactive-primary);
   margin-left: 8px;
   margin-left: var(--size-8);

package/src/expressiveMoneyInput/amountInput/AmountInput.css

@@ -6,6 +6,7 @@
   justify-content: right;
   width: 100%;
   transition: font-size 0.4s cubic-bezier(0.3, 0, 0.1, 1), height 0.4s cubic-bezier(0.3, 0, 0.1, 1), margin-top 0.4s cubic-bezier(0.3, 0, 0.1, 1), color 0.4s ease;
+  color: #163300;
   color: var(--color-interactive-primary);
   overflow: hidden;
   margin-bottom: 0 !important;

package/src/expressiveMoneyInput/chevron/Chevron.css

@@ -2,6 +2,7 @@
   width: 32px;
   width: var(--size-32);
   overflow: hidden;
+  color: #163300;
   color: var(--color-interactive-primary);
   margin-left: 8px;
   margin-left: var(--size-8);

package/src/flowNavigation/FlowNavigation.css

@@ -4,7 +4,7 @@
 }
 .np-flow-navigation--border-bottom {
   min-height: 96px;
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
+  border-bottom: 1px solid rgba(14,15,12,0.12157);
   border-bottom: 1px solid var(--color-border-neutral);
 }
 .np-flow-navigation__content {
@@ -72,5 +72,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .np-theme-personal--forest-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--bright-green .np-flow-navigation .np-flow-header__left path,
 .np-theme-personal--dark .np-flow-navigation .np-flow-header__left path {
+  fill: #163300;
   fill: var(--color-interactive-primary);
 }

package/src/header/Header.css

@@ -17,12 +17,12 @@
 }
 .np-header--group {
   align-items: flex-end;
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
+  border-bottom: 1px solid rgba(14,15,12,0.12157);
   border-bottom: 1px solid var(--color-border-neutral);
 }
 .np-header--group,
 .np-header--group .np-header__title {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .np-header__action {