@transferwise/components 46.0.1 → 46.0.3

package/build/types/chevron/Chevron.d.ts

@@ -1,17 +1,14 @@
-import * as React from 'react';
-
-export type ChevronOrientation = "top" | "bottom" | "left" | "right";
-
-export type ChevronSize = "xs" | "sm" | "md";
-
-export interface ChevronProps {
-    orientation?: ChevronOrientation;
-    size?: ChevronSize;
-    disabled?: boolean;
-    className?: string;
-}
-
-declare const Chevron: React.FC<ChevronProps>;
-
-export default Chevron;
-
+/// <reference types="react" />
+import { PositionTop, PositionBottom, PositionRight, PositionLeft, SizeExtraSmall, SizeSmall, SizeMedium } from '../common';
+export interface ChevronProps {
+    orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;
+    size?: SizeExtraSmall | SizeSmall | SizeMedium;
+    disabled?: boolean;
+    className?: string;
+}
+export interface ExtraSmallChevronProps {
+    className?: string;
+}
+declare const Chevron: ({ orientation, size, disabled, className, }: ChevronProps) => import("react").JSX.Element;
+export default Chevron;
+//# sourceMappingURL=Chevron.d.ts.map

package/build/types/chevron/Chevron.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../src/chevron/Chevron.js"],"names":[],"mappings":";AAmCA;;;;;gCAeC"}
+{"version":3,"file":"Chevron.d.ts","sourceRoot":"","sources":["../../../src/chevron/Chevron.tsx"],"names":[],"mappings":";AAIA,OAAO,EAGL,WAAW,EACX,cAAc,EACd,aAAa,EACb,YAAY,EACZ,cAAc,EACd,SAAS,EACT,UAAU,EACX,MAAM,WAAW,CAAC;AAQnB,MAAM,WAAW,YAAY;IAC3B,WAAW,CAAC,EAAE,WAAW,GAAG,cAAc,GAAG,YAAY,GAAG,aAAa,CAAC;IAC1E,IAAI,CAAC,EAAE,cAAc,GAAG,SAAS,GAAG,UAAU,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmBD,QAAA,MAAM,OAAO,gDAKV,YAAY,gCAed,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/build/types/chevron/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./Chevron";
+export { default } from './Chevron';
 //# sourceMappingURL=index.d.ts.map

package/build/types/chevron/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chevron/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chevron/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.0.1",
+  "version": "46.0.3",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/avatar/Avatar.tsx

@@ -46,7 +46,7 @@ const Avatar: React.FC<AvatarProps> = ({
   backgroundColor = null,
   backgroundColorSeed = null,
   children = null,
-  className = null,
+  className,
   outlined = false,
   size: sizeFromProps = 48,
   theme = Theme.LIGHT,

package/src/card/Card.spec.js

@@ -3,8 +3,6 @@ import { render, screen, userEvent } from '../test-utils';
 
 import Card from '.';
 
-jest.mock('../chevron');
-
 describe('Card', () => {
   const defaultProps = {
     title: 'A Card',
@@ -103,14 +101,14 @@ describe('Card', () => {
     it('renders a chevron', () => {
       renderCard({ children: 'mock children' });
 
-      expect(screen.getByTestId('mock-chevron')).toHaveAttribute('orientation', Position.BOTTOM);
+      expect(screen.getByTestId('chevron-up-icon')).toHaveClass(Position.BOTTOM);
     });
 
     describe('when expanded', () => {
       it('flips chevron', () => {
         renderCard({ children: 'mock children', isExpanded: true });
 
-        expect(screen.getByTestId('mock-chevron')).toHaveAttribute('orientation', Position.TOP);
+        expect(screen.getByTestId('chevron-up-icon')).toHaveClass(Position.TOP);
       });
 
       it('renders children', () => {

package/src/chevron/Chevron.story.tsx

@@ -5,20 +5,6 @@ import Chevron from './Chevron';
 export default {
   component: Chevron,
   title: 'Other/Chevron',
-  argTypes: {
-    orientation: {
-      type: {
-        name: 'enum',
-        value: ['top', 'bottom', 'left', 'right'],
-      },
-    },
-    size: {
-      type: {
-        name: 'enum',
-        value: ['xs', 'sm', 'md'],
-      },
-    },
-  },
   tags: ['autodocs'],
 } satisfies Meta<typeof Chevron>;
 
@@ -29,4 +15,11 @@ export const Basic: Story = {
     orientation: 'top',
     size: 'md',
   },
+  render: (args) => {
+    return (
+      <span>
+        <Chevron {...args} />
+      </span>
+    );
+  },
 };

package/src/chevron/Chevron.tsx

@@ -0,0 +1,73 @@
+import { ChevronUp } from '@transferwise/icons';
+import { IconSize } from '@transferwise/icons/lib/types';
+import classNames from 'classnames';
+
+import {
+  Size,
+  Position,
+  PositionTop,
+  PositionBottom,
+  PositionRight,
+  PositionLeft,
+  SizeExtraSmall,
+  SizeSmall,
+  SizeMedium,
+} from '../common';
+
+const CONTAINER_SIZE = {
+  [Size.EXTRA_SMALL]: 10,
+  [Size.SMALL]: 16,
+  [Size.MEDIUM]: 24,
+};
+
+export interface ChevronProps {
+  orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;
+  size?: SizeExtraSmall | SizeSmall | SizeMedium;
+  disabled?: boolean;
+  className?: string;
+}
+
+export interface ExtraSmallChevronProps {
+  className?: string;
+}
+
+const ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {
+  return (
+    <span
+      className={classNames('tw-icon', 'tw-icon-chevron', className)}
+      role="presentation"
+      aria-hidden
+    >
+      <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor" focusable="false">
+        <path
+          fillRule="evenodd"
+          d="M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z"
+        />
+      </svg>
+    </span>
+  );
+};
+
+const Chevron = ({
+  orientation = Position.BOTTOM,
+  size = Size.SMALL,
+  disabled = false,
+  className,
+}: ChevronProps) => {
+  const classNameValue = classNames(
+    'tw-chevron',
+    { 'chevron-color': !disabled },
+    `${orientation}`.toLowerCase(),
+    className,
+  );
+
+  if (size === Size.EXTRA_SMALL) {
+    return <ExtraSmallChevron className={classNameValue} />;
+  }
+
+  const sizeValue = CONTAINER_SIZE[size] as IconSize;
+
+  return <ChevronUp className={classNameValue} size={sizeValue} />;
+};
+
+export default Chevron;

package/src/moneyInput/MoneyInput.js

@@ -361,7 +361,7 @@ class MoneyInput extends Component {
               renderValue={(currency, withinTrigger) => {
                 return (
                   <SelectInputOptionContent
-                    title={currency.label}
+                    title={withinTrigger ? currency.currency.toUpperCase() : currency.label}
                     note={withinTrigger ? undefined : currency.note}
                     icon={<Flag code={currency.currency} intrinsicSize={24} />}
                   />

package/src/moneyInput/MoneyInput.story.tsx

@@ -3,8 +3,6 @@ import { within, userEvent } from '@storybook/testing-library';
 import { Lock } from '@transferwise/icons';
 import React from 'react';
 
-import Drawer from '../drawer';
-
 import MoneyInput from '.';
 
 export default {
@@ -82,6 +80,17 @@ const exampleCurrency = {
   },
 } as const;
 
+const exampleBalanceCurrency = {
+  eur: {
+    ...exampleCurrency.eur,
+    label: '123.45 EUR',
+  },
+  gbp: {
+    ...exampleCurrency.gbp,
+    label: '12.34 GBP',
+  },
+} as const;
+
 export const SingleCurrency: Story = {
   args: {
     currencies: [],
@@ -117,6 +126,20 @@ export const MultipleCurrencies: Story = {
   },
 };
 
+export const BalanceCurrencies: Story = {
+  args: {
+    currencies: [
+      {
+        header: 'Balance currencies',
+      },
+      exampleBalanceCurrency.eur,
+      exampleBalanceCurrency.gbp,
+    ],
+    selectedCurrency: exampleBalanceCurrency.eur,
+    searchPlaceholder: 'Type a currency / country',
+  },
+};
+
 export const OpenedInput: Story = {
   ...MultipleCurrencies,
   play: ({ canvasElement }) => {

package/src/chevron/Chevron.js

@@ -1,67 +0,0 @@
-import { ChevronUp } from '@transferwise/icons';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import { Size, Position } from '../common';
-
-const CONTAINER_SIZE = {
-  [Size.EXTRA_SMALL]: 10,
-  [Size.SMALL]: 16,
-  [Size.MEDIUM]: 24,
-};
-
-const ExtraSmallChevron = ({ className }) => (
-  <span
-    className={classNames('tw-icon', 'tw-icon-chevron', className)}
-    role="presentation"
-    aria-hidden
-  >
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor" focusable="false">
-      <path
-        fillRule="evenodd"
-        d="M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z"
-      />
-    </svg>
-  </span>
-);
-
-ExtraSmallChevron.propTypes = {
-  className: PropTypes.string,
-};
-
-ExtraSmallChevron.defaultProps = {
-  className: null,
-};
-
-const Chevron = ({ orientation, size, disabled, className }) => {
-  const classNameValue = classNames(
-    'tw-chevron',
-    { 'chevron-color': !disabled },
-    `${[orientation]}`.toLowerCase(),
-    className,
-  );
-
-  const sizeValue = CONTAINER_SIZE[size];
-
-  if (size === Size.EXTRA_SMALL) {
-    return <ExtraSmallChevron className={classNameValue} />;
-  }
-
-  return <ChevronUp className={classNameValue} size={sizeValue} />;
-};
-
-Chevron.propTypes = {
-  orientation: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
-  size: PropTypes.oneOf(['xs', 'sm', 'md']),
-  disabled: PropTypes.bool,
-  className: PropTypes.string,
-};
-
-Chevron.defaultProps = {
-  orientation: Position.BOTTOM,
-  size: Size.SMALL,
-  disabled: false,
-  className: null,
-};
-
-export default Chevron;

package/src/chevron/__mocks__/index.js

@@ -1,7 +0,0 @@
-export default function (props) {
-  return (
-    <span data-testid="mock-chevron" {...props}>
-      Mock Chevron
-    </span>
-  );
-}