@transferwise/components 45.11.0 → 45.13.0

package/src/display/Display.story.tsx

@@ -0,0 +1,121 @@
+/* eslint-disable jsx-a11y/accessible-emoji */
+
+import { Typography } from '../common';
+import Money from '../money/Money';
+import Title from '../title/Title';
+
+import Display from './Display';
+
+export default {
+  title: 'Typography/Display',
+};
+
+export const Basic = () => {
+  const EN = 'compounding without subscription compounding without subscription'; // Made for hyphenation testing
+  const DE = 'äöüßabcdefghijklmnopqrstuvwxyz';
+  const UA = 'Ми будуємо найбільш міжнародний рахунок у світі';
+  const JA = 'ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてで';
+  return (
+    <>
+      <div lang="en">
+        <h1>🇬🇧</h1>
+        Large
+        <Display type={Typography.DISPLAY_LARGE}>{EN}</Display>
+        <hr />
+        Medium
+        <Display type={Typography.DISPLAY_MEDIUM}>{EN}</Display>
+        <hr />
+        Small
+        <Display type={Typography.DISPLAY_SMALL}>{EN}</Display>
+      </div>
+      <hr />
+      <div lang="de">
+        <h1>Languages with special symbols, e.g 🇩🇪</h1>
+        Large
+        <Display type={Typography.DISPLAY_LARGE}>
+          {DE}
+          <br />
+          {DE}
+        </Display>
+        <hr />
+        Medium
+        <Display type={Typography.DISPLAY_MEDIUM}>
+          {DE}
+          <br />
+          {DE}
+        </Display>
+        <hr />
+        Small
+        <Display type={Typography.DISPLAY_SMALL}>
+          {DE}
+          <br />
+          {DE}
+        </Display>
+      </div>
+      <hr />
+      <div lang="uk">
+        <h1>Greek + Cyrillic languages, e.g 🇺🇦</h1>
+        Large
+        <Display type={Typography.DISPLAY_LARGE}>
+          {UA}
+          <br />
+          {UA}
+        </Display>
+        <hr />
+        Medium
+        <Display type={Typography.DISPLAY_MEDIUM}>
+          {UA}
+          <br />
+          {UA}
+        </Display>
+        <hr />
+        Small
+        <Display type={Typography.DISPLAY_SMALL}>
+          {UA}
+          <br />
+          {UA}
+        </Display>
+      </div>
+      <hr />
+      <div lang="ja">
+        <h1>Everything eles, e.g 🇯🇵</h1>
+        Large
+        <Display type={Typography.DISPLAY_LARGE}>{JA}</Display>
+        <hr />
+        Medium
+        <Display type={Typography.DISPLAY_MEDIUM}>{JA}</Display>
+        <hr />
+        Small
+        <Display type={Typography.DISPLAY_SMALL}>{JA}</Display>
+      </div>
+    </>
+  );
+};
+
+export const Numbers = () => {
+  return (
+    <>
+      <Title type={Typography.TITLE_SCREEN}>Display Number</Title>
+      <hr />
+      <Display type={Typography.DISPLAY_NUMBER}>
+        <Money amount={1050.6} currency="UAH" />
+      </Display>
+      <hr />
+      <Display type={Typography.DISPLAY_NUMBER}>
+        <Money amount={10.17} currency="JPY" />
+      </Display>
+      <hr />
+      <Display type={Typography.DISPLAY_NUMBER}>
+        <Money amount={0.01} currency="EUR" />
+      </Display>
+      <hr />
+      <Display type={Typography.DISPLAY_NUMBER}>
+        <Money amount={1000000} currency="EUR" />
+      </Display>
+      <hr />
+      <Display type={Typography.DISPLAY_NUMBER}>
+        <Money amount={1000000} currency="GBP" />
+      </Display>
+    </>
+  );
+};

package/src/display/Display.tsx

@@ -0,0 +1,27 @@
+import classNames from 'classnames';
+import { PropsWithChildren } from 'react';
+
+import { DisplayTypes, Typography } from '../common';
+
+type Props = PropsWithChildren<{
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  id?: string;
+  type?: DisplayTypes;
+  className?: string;
+}>;
+
+function Display({
+  as: Heading = 'h1',
+  type = Typography.DISPLAY_LARGE,
+  children,
+  className,
+  id,
+}: Props) {
+  return (
+    <Heading id={id} className={classNames(`np-text-${type}`, 'text-primary', className)}>
+      {children}
+    </Heading>
+  );
+}
+
+export default Display;

package/src/display/index.ts

@@ -0,0 +1 @@
+export { default } from './Display';

package/src/drawer/Drawer.css

@@ -0,0 +1 @@
+.np-drawer{display:flex;flex-direction:column;height:100vh;height:100dvh;justify-content:space-between;max-height:100vh;max-height:100dvh;max-width:600px;width:100vw}.np-drawer .np-drawer-header{display:flex;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)}.np-theme-personal .np-drawer .np-drawer-header .np-text-title-body{margin-bottom:0;padding-top:0}.np-theme-personal .np-drawer .np-drawer-header .np-close-button{margin-bottom:-8px;margin-bottom:calc(var(--size-8)*-1);margin-right:-8px;margin-right:calc(var(--size-8)*-1);margin-top:-8px;margin-top: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 #0000001a;box-shadow:inset 0 -1px 0 0 var(--color-border-neutral)}.np-drawer .np-drawer-header .np-text-title-body{font-size:1.125rem;font-size:var(--font-size-18);letter-spacing:-.01em;letter-spacing:var(--letter-spacing-negative-xs);line-height:1.5rem;line-height:var(--line-height-24);margin-bottom:-2px;margin-right:16px;margin-right:var(--size-16);padding-top:2px}.np-drawer .np-drawer-header .np-close-button{margin-left:auto}.np-drawer .np-drawer-header .tw-icon{fill:#00b9ff;cursor:pointer;display:block}.np-drawer .np-drawer-content{flex:1;overflow-y:auto}.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 #0000001a;box-shadow:inset 0 1px 0 0 var(--color-border-neutral)}@media (min-width:768px){.np-drawer .np-drawer-header{padding:32px 24px;padding:var(--size-32) var(--size-24)}.np-drawer .np-drawer-content,.np-drawer .np-drawer-footer,.np-theme-personal .np-drawer .np-drawer-header{padding:24px;padding:var(--size-24)}}

package/src/drawer/Drawer.js

@@ -0,0 +1,66 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { Position, Typography } from '../common';
+import { CloseButton } from '../common/closeButton';
+import { useLayout } from '../common/hooks';
+import Dimmer from '../dimmer';
+import SlidingPanel from '../slidingPanel';
+import Title from '../title';
+import { logActionRequiredIf } from '../utilities';
+
+const Drawer = ({ children, className, footerContent, headerTitle, onClose, open, position }) => {
+  logActionRequiredIf(
+    'Drawer now expects `onClose`, and will soon make this prop required. Please update your usage to provide it.',
+    !onClose,
+  );
+
+  const { isMobile } = useLayout();
+
+  return (
+    <Dimmer open={open} onClose={onClose}>
+      <SlidingPanel open={open} position={isMobile ? Position.BOTTOM : position}>
+        <div className={classNames('np-drawer', className)} role="dialog">
+          <div
+            className={classNames('np-drawer-header', {
+              'np-drawer-header--withborder': headerTitle,
+            })}
+          >
+            {headerTitle && <Title type={Typography.TITLE_BODY}>{headerTitle}</Title>}
+            <CloseButton onClick={onClose} />
+          </div>
+          {children && <div className={classNames('np-drawer-content')}>{children}</div>}
+          {footerContent && <div className={classNames('np-drawer-footer')}>{footerContent}</div>}
+        </div>
+      </SlidingPanel>
+    </Dimmer>
+  );
+};
+
+Drawer.propTypes = {
+  /** The content to appear in the drawer body. */
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /** The content to appear in the drawer footer. */
+  footerContent: PropTypes.node,
+  /** The content to appear in the drawer header. */
+  headerTitle: PropTypes.node,
+  /** The action to perform on close click. */
+  onClose: PropTypes.func,
+  /** The status of Drawer either open or not. */
+  open: PropTypes.bool,
+  /** The placement of Drawer on the screen either left or right. On mobile it will default to bottom. */
+  position: PropTypes.oneOf(['left', 'right', 'bottom']),
+};
+
+Drawer.defaultProps = {
+  children: null,
+  className: undefined,
+  footerContent: null,
+  headerTitle: null,
+  onClose: null,
+  open: false,
+  position: Position.RIGHT,
+};
+
+export default Drawer;

package/src/drawer/Drawer.less

@@ -0,0 +1,102 @@
+@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;
+  justify-content: space-between;
+  width: 100vw;
+  max-width: 600px;
+  height: 100vh;
+  height: 100dvh;
+  max-height: 100vh;
+  max-height: 100dvh;
+
+  .np-drawer-header {
+    display: flex;
+    flex-wrap: nowrap;
+    min-height: var(--size-56);
+    padding: var(--size-24) var(--size-16);
+
+    .np-theme-personal & {
+      padding: var(--size-24);
+
+      .np-text-title-body {
+        padding-top: 0;
+        margin-bottom: 0;
+      }
+
+      .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 {
+      @vertical-alignment-shift: 2px;
+
+      margin-right: var(--size-16);
+      font-size: var(--font-size-18);
+      letter-spacing: var(--letter-spacing-negative-xs);
+      line-height: var(--line-height-24);
+      padding-top: @vertical-alignment-shift;
+      margin-bottom: -@vertical-alignment-shift;
+    }
+
+    .np-close-button {
+      margin-left: auto;
+    }
+
+    .tw-icon {
+      display: block;
+      cursor: pointer;
+      fill: rgb(0 185 255);
+    }
+  }
+
+  .np-drawer-content {
+    overflow-y: auto;
+    flex: 1;
+  }
+
+  .np-drawer-footer,
+  .np-drawer-content {
+    padding: 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 {
+      padding: var(--size-32) var(--size-24);
+
+      .np-theme-personal & {
+        padding: var(--size-24);
+      }
+    }
+
+    .np-drawer-footer,
+    .np-drawer-content {
+      padding: var(--size-24);
+    }
+  }
+}

package/src/drawer/Drawer.rtl.spec.js

@@ -0,0 +1,55 @@
+import { render, screen, userEvent } from '../test-utils';
+
+import Drawer from './Drawer';
+
+jest.mock(
+  '../dimmer',
+  () =>
+    function ({ open, children }) {
+      return open ? <div className="dimmer">{children}</div> : null;
+    },
+);
+
+jest.mock(
+  '../slidingPanel',
+  () =>
+    function ({ open, children }) {
+      return open ? <div className="sliding-panel">{children}</div> : null;
+    },
+);
+
+describe('Drawer', () => {
+  const props = {
+    onClose: jest.fn(),
+    open: true,
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders content when open', () => {
+    const { container } = render(<Drawer {...props}>content</Drawer>);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("doesn't render content when closed", () => {
+    const { container } = render(
+      <Drawer {...props} open={false}>
+        content
+      </Drawer>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('calls onClose when user clicks close button', () => {
+    render(<Drawer {...props}>content</Drawer>);
+    expect(props.onClose).not.toHaveBeenCalled();
+    userEvent.click(getCloseButton());
+    expect(props.onClose).toHaveBeenCalledTimes(1);
+  });
+
+  const getCloseButton = () => screen.getByLabelText('Close');
+});

package/src/drawer/Drawer.spec.js

@@ -0,0 +1,80 @@
+import { shallow } from 'enzyme';
+
+import Title from '../title/Title';
+
+import Drawer from '.';
+
+jest.mock('../common');
+jest.useFakeTimers();
+
+jest.mock(
+  '../dimmer',
+  () =>
+    function ({ open, children }) {
+      return open ? <div className="dimmer">{children}</div> : null;
+    },
+);
+
+jest.mock(
+  '../slidingPanel',
+  () =>
+    function ({ open, children }) {
+      return open ? <div className="sliding-panel">{children}</div> : null;
+    },
+);
+
+const defaultLocale = 'en-GB';
+
+jest.mock('react-intl', () => ({
+  injectIntl: (Component) =>
+    function (props) {
+      return <Component {...props} intl={{ locale: defaultLocale }} />;
+    },
+  useIntl: () => ({ locale: defaultLocale, formatMessage: (id) => `${id}` }),
+  defineMessages: (translations) => translations,
+}));
+
+describe('Drawer', () => {
+  let component;
+  const props = {
+    open: true,
+    position: 'left',
+    onClose: jest.fn(),
+    children: null,
+    headerTitle: null,
+    footerContent: null,
+  };
+
+  beforeEach(() => {
+    component = shallow(<Drawer {...props} />);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders drawer header if title is provided', () => {
+    expect(component.find('.np-drawer-header--title')).toHaveLength(0);
+    component.setProps({ headerTitle: 'A title' });
+    expect(component.find(Title)).toHaveLength(1);
+    expect(component.find(Title).props().children).toBe('A title');
+  });
+
+  it('renders header with or without borders', () => {
+    expect(component.find('.np-drawer-header--withborder')).toHaveLength(0);
+    component.setProps({ headerTitle: 'A title' });
+    expect(component.find('.np-drawer-header--withborder')).toHaveLength(1);
+  });
+
+  it('renders content if children are provided', () => {
+    expect(component.find('.np-drawer-content')).toHaveLength(0);
+    component.setProps({ children: 'SomeChildren' });
+    expect(component.find('.np-drawer-content')).toHaveLength(1);
+  });
+
+  it('renders drawer footer if footerContent is provided', () => {
+    expect(component.find('.np-drawer-footer')).toHaveLength(0);
+    component.setProps({ footerContent: 'SomeContent' });
+    expect(component.find('.np-drawer-footer')).toHaveLength(1);
+  });
+});

package/src/drawer/Drawer.story.js

@@ -0,0 +1,83 @@
+import { select } from '@storybook/addon-knobs';
+import { useState } from 'react';
+
+import { Section, Button, Input, Modal } from '..';
+import { Position } from '../common';
+
+import Drawer from './Drawer';
+
+export default {
+  component: Drawer,
+  title: 'Dialogs/Drawer',
+};
+
+export const Basic = () => {
+  const [openDrawer, setOpenDrawer] = useState(false);
+  const [openModal, setOpenModal] = useState(false);
+  const position = select('position', [Position.LEFT, Position.RIGHT], Position.RIGHT);
+
+  const handleDrawerClose = (event) => {
+    console.log('drawer close');
+    event.stopPropagation();
+    setOpenDrawer(false);
+  };
+
+  const handleModalClose = (event) => {
+    console.log('modal close');
+    event.stopPropagation();
+    setOpenModal(false);
+  };
+
+  return (
+    <>
+      <Button disabled={false} block={false} onClick={() => setOpenDrawer(true)}>
+        Open drawer
+      </Button>
+      <Drawer
+        open={openDrawer}
+        position={position}
+        headerTitle="This is the title of the drawer"
+        footerContent={
+          <>
+            <Button block onClick={() => {}}>
+              Action
+            </Button>
+          </>
+        }
+        onClose={handleDrawerClose}
+      >
+        <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 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={handleModalClose}
+          />
+        </Section>
+      </Drawer>
+    </>
+  );
+};

package/src/drawer/__snapshots__/Drawer.rtl.spec.js.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Drawer doesn't render content when closed 1`] = `<div />`;
+
+exports[`Drawer renders content when open 1`] = `
+<div>
+  <div
+    class="dimmer"
+  >
+    <div
+      class="sliding-panel"
+    >
+      <div
+        class="np-drawer"
+        role="dialog"
+      >
+        <div
+          class="np-drawer-header"
+        >
+          <button
+            aria-label="Close"
+            class="np-close-button close btn-link text-no-decoration np-close-button--large"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="tw-icon tw-icon-cross "
+              data-testid="cross-icon"
+              role="presentation"
+            >
+              <svg
+                fill="currentColor"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+              >
+                <path
+                  d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+        <div
+          class="np-drawer-content"
+        >
+          content
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/drawer/index.js

@@ -0,0 +1 @@
+export { default } from './Drawer';

package/src/dropFade/DropFade.css

@@ -0,0 +1 @@
+.np-dropfade,.np-dropfade-enter{height:0;opacity:0;overflow:hidden}.np-dropfade-enter-active{opacity:1;transition:height .15s ease-in,opacity .15s ease-in .15s}.np-dropfade-enter-done,.np-dropfade-exit{height:auto;opacity:1}.np-dropfade-exit-active{opacity:0;transition:opacity .15s ease-in,height .15s ease-in .15s}

package/src/dropFade/DropFade.less

@@ -0,0 +1,22 @@
+.np-dropfade,
+.np-dropfade-enter {
+  opacity: 0;
+  overflow: hidden;
+  height: 0;
+}
+
+.np-dropfade-enter-active {
+  transition: height 150ms ease-in, opacity 150ms ease-in 150ms;
+  opacity: 1;
+}
+
+.np-dropfade-enter-done,
+.np-dropfade-exit {
+  opacity: 1;
+  height: auto;
+}
+
+.np-dropfade-exit-active {
+  transition: opacity 150ms ease-in, height 150ms ease-in 150ms;
+  opacity: 0;
+}

package/src/dropFade/DropFade.story.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable react/forbid-dom-props */
+import { action } from '@storybook/addon-actions';
+import { useState } from 'react';
+
+import { Button, Nudge } from '..';
+
+import DropFade from './DropFade';
+
+export default {
+  title: 'Dialogs/DropFade',
+  component: DropFade,
+};
+
+export const Basic = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div style={{ margin: '0 auto', maxWidth: 400 }}>
+      <DropFade show={open}>
+        <Nudge
+          media={
+            <img
+              alt=""
+              style={{ width: 44, height: 44 }}
+              src="https://wise.com/public-resources/assets/public-navigation/saving.svg"
+            />
+          }
+          mediaName="globe"
+          title="Did you know it's cool to be Wise?"
+          link="Get Wise"
+          href="https://wise.com"
+          onClick={action('action clicked')}
+          onDismiss={() => {
+            action('dismissed');
+            setOpen(false);
+          }}
+        />
+      </DropFade>
+      <Button className="m-t-3" block onClick={() => setOpen(true)}>
+        Some other content
+      </Button>
+    </div>
+  );
+};