@transferwise/components 46.95.1 → 46.96.0

package/src/promoCard/PromoCard.spec.tsx

@@ -1,8 +1,10 @@
-import { render, fireEvent, screen } from '../test-utils';
+import { render, fireEvent, screen, mockMatchMedia } from '../test-utils';
 import React from 'react';
 
 import PromoCard, { PromoCardProps, PromoCardCheckedProps, PromoCardLinkProps } from './PromoCard';
 
+mockMatchMedia();
+
 describe('PromoCard', () => {
   const defaultProps = {
     title: 'Test Title',

package/src/promoCard/PromoCardIndicator.tsx

@@ -2,9 +2,9 @@ import { ArrowRight, Check, Download } from '@transferwise/icons';
 import { clsx } from 'clsx';
 import { ReactElement, ReactNode } from 'react';
 
-import Avatar, { AvatarType } from '../avatar';
 import Body from '../body';
 import { Typography } from '../common';
+import AvatarView from '../avatarView';
 
 export type PromoCardIndicatorProps = {
   /** Optional class name(s) to add to the indicator container. */
@@ -69,14 +69,14 @@ const PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({
         </Body>
       )}
       {icon && (
-        <Avatar
-          type={AvatarType.ICON}
+        <AvatarView
+          interactive
           size={isSmall ? 40 : 56}
-          backgroundColor="var(--Card-indicator-icon-background-color)"
+          style={{ backgroundColor: 'var(--Card-indicator-icon-background-color)' }}
           className="np-Card-indicatorIcon"
         >
           {IconComponent ? <IconComponent size={24} aria-hidden="true" /> : icon}
-        </Avatar>
+        </AvatarView>
       )}
       {children}
     </div>

package/src/select/option/Option.spec.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Person as ProfileIcon } from '@transferwise/icons';
+
+import Option, { Props as OptionProps } from './Option';
+
+describe('Option', () => {
+  const defaultProps: OptionProps<string> = {
+    testId: 'test-option',
+    label: 'Option Label',
+    value: 'option-value',
+  };
+
+  const renderOption = (props: Partial<OptionProps<string>> = {}) => {
+    return render(<Option {...defaultProps} {...props} />);
+  };
+
+  it('should render the Option component', () => {
+    renderOption();
+    expect(screen.getByText('Option Label')).toBeInTheDocument();
+  });
+
+  it('should render the given note', () => {
+    renderOption({ note: 'Note Text' });
+    expect(screen.getByText('Note Text')).toBeInTheDocument();
+  });
+
+  it('should render the given secondary text', () => {
+    renderOption({ secondary: 'Secondary Text' });
+    expect(screen.getByText('Secondary Text')).toBeInTheDocument();
+  });
+
+  it('should render the given icon', () => {
+    renderOption({ icon: <ProfileIcon /> });
+    const optionElement = screen.getByTestId('test-option');
+    expect(optionElement.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('should render the given currency flag for a given currency', () => {
+    renderOption({ currency: 'USD' });
+    const optionElement = screen.getByTestId('test-option');
+    expect(optionElement.querySelector('img')).toBeInTheDocument();
+  });
+
+  it('should override the currency flag with the given icon', () => {
+    renderOption({ currency: 'USD', icon: <ProfileIcon /> });
+    const optionElement = screen.getByTestId('test-option');
+    expect(optionElement.querySelector('svg')).toBeInTheDocument();
+    expect(optionElement.querySelectorAll('svg')).toHaveLength(1);
+  });
+});

package/src/select/option/Option.tsx

@@ -16,6 +16,7 @@ export type Props<T> = {
   /** @deprecated */
   classNames?: Record<string, string>;
   selected?: boolean;
+  testId?: string;
 };
 
 function Option<T>({
@@ -25,6 +26,7 @@ function Option<T>({
   secondary = '',
   icon,
   selected = false,
+  testId,
 }: Props<T>) {
   const iconElement = icon
     ? cloneElement(icon as ReactElement<IdIconProps>, {
@@ -49,7 +51,7 @@ function Option<T>({
   );
 
   return iconElement ? (
-    <div className="d-flex np-option-content">
+    <div className="d-flex np-option-content" data-testid={testId}>
       <div className={`d-flex flex-column${selected ? ' justify-content-center' : ''}`}>
         {iconElement}
       </div>

package/src/stepper/Stepper.css

@@ -75,10 +75,3 @@
   transition: width 0.6s ease-in-out;
   will-change: width;
 }
-.btn-unstyled {
-  background: none;
-  border: none;
-  margin: 0;
-  padding: 0;
-  display: block;
-}

package/src/stepper/Stepper.less

@@ -83,11 +83,3 @@
   transition: width 0.6s ease-in-out;
   will-change: width;
 }
-
-.btn-unstyled {
-  background: none;
-  border: none;
-  margin: 0;
-  padding: 0;
-  display: block;
-}

package/src/summary/Summary.css

@@ -74,10 +74,6 @@
 .np-summary__action {
   margin-top: 4px;
   margin-top: var(--size-4);
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
 }
 .np-summary + .np-summary {
   margin-top: 24px;

package/src/summary/Summary.less

@@ -78,8 +78,6 @@
 
   &__action {
     margin-top: var(--size-4);
-    font-size: var(--font-size-14);
-    font-weight: var(--font-weight-semi-bold);
   }
 
   & + .np-summary {

package/src/summary/Summary.tsx

@@ -21,7 +21,8 @@ import Info, { InfoProps } from '../info';
 import StatusIcon from '../statusIcon';
 
 import messages from './Summary.messages';
-import { Action, ActionOptions } from '../common/action/Action';
+import Link from '../link';
+import type { AlertAction } from '../alert';
 
 const BadgeIcons = {
   [Status.DONE]: CheckCircleIcon,
@@ -43,7 +44,7 @@ export interface Props {
   /**
    * Action displayed at the bottom of the Summary
    */
-  action?: ActionOptions;
+  action?: AlertAction;
   /**
    * Decides which html element should wrap the Summary
    */
@@ -168,7 +169,17 @@ const Summary = ({
             {description}
           </Body>
         )}
-        {action && <Action action={action} className="np-summary__action" />}
+        {action && (
+          <Link
+            href={action.href}
+            target={action.target}
+            className="np-summary__action"
+            aria-label={action['aria-label']}
+            onClick={action.onClick}
+          >
+            {action.text}
+          </Link>
+        )}
       </div>
       {info && (
         <Info

package/src/tile/Tile.story.tsx

@@ -1,10 +1,10 @@
 import { action } from '@storybook/addon-actions';
 import { text, boolean } from '@storybook/addon-knobs';
 
-import Avatar from '../avatar';
 import { Size } from '../common';
 
 import Tile from '.';
+import AvatarView from '../avatarView';
 
 export default {
   component: Tile,
@@ -41,11 +41,7 @@ export const Basic = () => {
           description={description}
           disabled={disabled}
           href="#href1"
-          media={
-            <Avatar size="md" type="initials">
-              HM
-            </Avatar>
-          }
+          media={<AvatarView profileName="Henry Morris" />}
           size={medium ? Size.MEDIUM : Size.SMALL}
           title={title}
           onClick={action('onClick')}

package/build/common/action/Action.js

@@ -1,53 +0,0 @@
-'use strict';
-
-var clsx = require('clsx');
-var Link = require('../../link/Link.js');
-var typography = require('../propsValues/typography.js');
-var control = require('../propsValues/control.js');
-var Button_resolver = require('../../button/Button.resolver.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function Action({
-  action,
-  className,
-  variant = 'button',
-  sentiment = 'default',
-  priority = control.Priority.SECONDARY
-}) {
-  if ('href' in action) {
-    return /*#__PURE__*/jsxRuntime.jsx(Link.default, {
-      href: action.href,
-      className: className,
-      "aria-label": action['aria-label'],
-      target: action.target,
-      type: typography.Typography.LINK_LARGE,
-      onClick: action.onClick,
-      children: action.text
-    });
-  }
-  switch (variant) {
-    case 'action-button':
-      return /*#__PURE__*/jsxRuntime.jsx(Button_resolver.default, {
-        v2: true,
-        size: "sm",
-        sentiment: sentiment,
-        "aria-label": action['aria-label'],
-        priority: priority,
-        className: clsx.clsx(className),
-        onClick: action.onClick,
-        children: action.text
-      });
-    case 'button':
-    default:
-      return /*#__PURE__*/jsxRuntime.jsx("button", {
-        type: "button",
-        "aria-label": action['aria-label'],
-        className: clsx.clsx('btn-unstyled np-text-link-large', className),
-        onClick: action.onClick,
-        children: action.text
-      });
-  }
-}
-
-exports.Action = Action;
-//# sourceMappingURL=Action.js.map

package/build/common/action/Action.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Action.js","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport { Priority } from '../propsValues/control';\nimport Button from '../../button';\nimport { ButtonPriority, ButtonSentiment } from '../../button/Button.types';\n\nexport type ActionOptions = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\ntype Props = {\n  action: ActionOptions;\n  className?: string;\n  variant?: 'button' | 'action-button';\n  sentiment?: ButtonSentiment;\n  priority?: ButtonPriority;\n};\n\nexport function Action({\n  action,\n  className,\n  variant = 'button',\n  sentiment = 'default',\n  priority = Priority.SECONDARY,\n}: Props) {\n  if ('href' in action) {\n    return (\n      <Link\n        href={action.href}\n        className={className}\n        aria-label={action['aria-label']}\n        target={action.target}\n        type={Typography.LINK_LARGE}\n        onClick={action.onClick}\n      >\n        {action.text}\n      </Link>\n    );\n  }\n\n  switch (variant) {\n    case 'action-button':\n      return (\n        <Button\n          v2\n          size=\"sm\"\n          sentiment={sentiment}\n          aria-label={action['aria-label']}\n          priority={priority}\n          className={clsx(className)}\n          onClick={action.onClick}\n        >\n          {action.text}\n        </Button>\n      );\n    case 'button':\n    default:\n      return (\n        <button\n          type=\"button\"\n          aria-label={action['aria-label']}\n          className={clsx('btn-unstyled np-text-link-large', className)}\n          onClick={action.onClick}\n        >\n          {action.text}\n        </button>\n      );\n  }\n}\n"],"names":["Action","action","className","variant","sentiment","priority","Priority","SECONDARY","_jsx","Link","href","target","type","Typography","LINK_LARGE","onClick","children","text","Button","v2","size","clsx"],"mappings":";;;;;;;;;AAuBM,SAAUA,MAAMA,CAAC;EACrBC,MAAM;EACNC,SAAS;AACTC,EAAAA,OAAO,GAAG,QAAQ;AAClBC,EAAAA,SAAS,GAAG,SAAS;EACrBC,QAAQ,GAAGC,gBAAQ,CAACC,SAAAA;AACd,CAAA,EAAA;EACN,IAAI,MAAM,IAAIN,MAAM,EAAE;IACpB,oBACEO,cAAA,CAACC,YAAI,EAAA;MACHC,IAAI,EAAET,MAAM,CAACS,IAAK;AAClBR,MAAAA,SAAS,EAAEA,SAAU;MACrB,YAAYD,EAAAA,MAAM,CAAC,YAAY,CAAE;MACjCU,MAAM,EAAEV,MAAM,CAACU,MAAO;MACtBC,IAAI,EAAEC,qBAAU,CAACC,UAAW;MAC5BC,OAAO,EAAEd,MAAM,CAACc,OAAQ;MAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,QAAQd,OAAO;AACb,IAAA,KAAK,eAAe;MAClB,oBACEK,cAAA,CAACU,uBAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFC,QAAAA,IAAI,EAAC,IAAI;AACThB,QAAAA,SAAS,EAAEA,SAAU;QACrB,YAAYH,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCI,QAAAA,QAAQ,EAAEA,QAAS;AACnBH,QAAAA,SAAS,EAAEmB,SAAI,CAACnB,SAAS,CAAE;QAC3Ba,OAAO,EAAEd,MAAM,CAACc,OAAQ;QAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,OACN,CAAC,CAAA;AAEb,IAAA,KAAK,QAAQ,CAAA;AACb,IAAA;AACE,MAAA,oBACET,cAAA,CAAA,QAAA,EAAA;AACEI,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAYX,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCC,QAAAA,SAAS,EAAEmB,SAAI,CAAC,iCAAiC,EAAEnB,SAAS,CAAE;QAC9Da,OAAO,EAAEd,MAAM,CAACc,OAAQ;QAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,OACN,CAAC,CAAA;AAEf,GAAA;AACF;;;;"}

package/build/common/action/Action.mjs

@@ -1,51 +0,0 @@
-import { clsx } from 'clsx';
-import Link from '../../link/Link.mjs';
-import { Typography } from '../propsValues/typography.mjs';
-import { Priority } from '../propsValues/control.mjs';
-import Button from '../../button/Button.resolver.mjs';
-import { jsx } from 'react/jsx-runtime';
-
-function Action({
-  action,
-  className,
-  variant = 'button',
-  sentiment = 'default',
-  priority = Priority.SECONDARY
-}) {
-  if ('href' in action) {
-    return /*#__PURE__*/jsx(Link, {
-      href: action.href,
-      className: className,
-      "aria-label": action['aria-label'],
-      target: action.target,
-      type: Typography.LINK_LARGE,
-      onClick: action.onClick,
-      children: action.text
-    });
-  }
-  switch (variant) {
-    case 'action-button':
-      return /*#__PURE__*/jsx(Button, {
-        v2: true,
-        size: "sm",
-        sentiment: sentiment,
-        "aria-label": action['aria-label'],
-        priority: priority,
-        className: clsx(className),
-        onClick: action.onClick,
-        children: action.text
-      });
-    case 'button':
-    default:
-      return /*#__PURE__*/jsx("button", {
-        type: "button",
-        "aria-label": action['aria-label'],
-        className: clsx('btn-unstyled np-text-link-large', className),
-        onClick: action.onClick,
-        children: action.text
-      });
-  }
-}
-
-export { Action };
-//# sourceMappingURL=Action.mjs.map

package/build/common/action/Action.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Action.mjs","sources":["../../../src/common/action/Action.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport Link from '../../link';\nimport { Typography } from '../propsValues/typography';\nimport { Priority } from '../propsValues/control';\nimport Button from '../../button';\nimport { ButtonPriority, ButtonSentiment } from '../../button/Button.types';\n\nexport type ActionOptions = {\n  'aria-label'?: string;\n  href?: string;\n  target?: string;\n  text: React.ReactNode;\n  onClick?: () => void;\n};\n\ntype Props = {\n  action: ActionOptions;\n  className?: string;\n  variant?: 'button' | 'action-button';\n  sentiment?: ButtonSentiment;\n  priority?: ButtonPriority;\n};\n\nexport function Action({\n  action,\n  className,\n  variant = 'button',\n  sentiment = 'default',\n  priority = Priority.SECONDARY,\n}: Props) {\n  if ('href' in action) {\n    return (\n      <Link\n        href={action.href}\n        className={className}\n        aria-label={action['aria-label']}\n        target={action.target}\n        type={Typography.LINK_LARGE}\n        onClick={action.onClick}\n      >\n        {action.text}\n      </Link>\n    );\n  }\n\n  switch (variant) {\n    case 'action-button':\n      return (\n        <Button\n          v2\n          size=\"sm\"\n          sentiment={sentiment}\n          aria-label={action['aria-label']}\n          priority={priority}\n          className={clsx(className)}\n          onClick={action.onClick}\n        >\n          {action.text}\n        </Button>\n      );\n    case 'button':\n    default:\n      return (\n        <button\n          type=\"button\"\n          aria-label={action['aria-label']}\n          className={clsx('btn-unstyled np-text-link-large', className)}\n          onClick={action.onClick}\n        >\n          {action.text}\n        </button>\n      );\n  }\n}\n"],"names":["Action","action","className","variant","sentiment","priority","Priority","SECONDARY","_jsx","Link","href","target","type","Typography","LINK_LARGE","onClick","children","text","Button","v2","size","clsx"],"mappings":";;;;;;;AAuBM,SAAUA,MAAMA,CAAC;EACrBC,MAAM;EACNC,SAAS;AACTC,EAAAA,OAAO,GAAG,QAAQ;AAClBC,EAAAA,SAAS,GAAG,SAAS;EACrBC,QAAQ,GAAGC,QAAQ,CAACC,SAAAA;AACd,CAAA,EAAA;EACN,IAAI,MAAM,IAAIN,MAAM,EAAE;IACpB,oBACEO,GAAA,CAACC,IAAI,EAAA;MACHC,IAAI,EAAET,MAAM,CAACS,IAAK;AAClBR,MAAAA,SAAS,EAAEA,SAAU;MACrB,YAAYD,EAAAA,MAAM,CAAC,YAAY,CAAE;MACjCU,MAAM,EAAEV,MAAM,CAACU,MAAO;MACtBC,IAAI,EAAEC,UAAU,CAACC,UAAW;MAC5BC,OAAO,EAAEd,MAAM,CAACc,OAAQ;MAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,KACR,CAAC,CAAA;AAEX,GAAA;AAEA,EAAA,QAAQd,OAAO;AACb,IAAA,KAAK,eAAe;MAClB,oBACEK,GAAA,CAACU,MAAM,EAAA;QACLC,EAAE,EAAA,IAAA;AACFC,QAAAA,IAAI,EAAC,IAAI;AACThB,QAAAA,SAAS,EAAEA,SAAU;QACrB,YAAYH,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCI,QAAAA,QAAQ,EAAEA,QAAS;AACnBH,QAAAA,SAAS,EAAEmB,IAAI,CAACnB,SAAS,CAAE;QAC3Ba,OAAO,EAAEd,MAAM,CAACc,OAAQ;QAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,OACN,CAAC,CAAA;AAEb,IAAA,KAAK,QAAQ,CAAA;AACb,IAAA;AACE,MAAA,oBACET,GAAA,CAAA,QAAA,EAAA;AACEI,QAAAA,IAAI,EAAC,QAAQ;QACb,YAAYX,EAAAA,MAAM,CAAC,YAAY,CAAE;AACjCC,QAAAA,SAAS,EAAEmB,IAAI,CAAC,iCAAiC,EAAEnB,SAAS,CAAE;QAC9Da,OAAO,EAAEd,MAAM,CAACc,OAAQ;QAAAC,QAAA,EAEvBf,MAAM,CAACgB,IAAAA;AAAI,OACN,CAAC,CAAA;AAEf,GAAA;AACF;;;;"}

package/build/types/common/action/Action.d.ts

@@ -1,18 +0,0 @@
-import { ButtonPriority, ButtonSentiment } from '../../button/Button.types';
-export type ActionOptions = {
-    'aria-label'?: string;
-    href?: string;
-    target?: string;
-    text: React.ReactNode;
-    onClick?: () => void;
-};
-type Props = {
-    action: ActionOptions;
-    className?: string;
-    variant?: 'button' | 'action-button';
-    sentiment?: ButtonSentiment;
-    priority?: ButtonPriority;
-};
-export declare function Action({ action, className, variant, sentiment, priority, }: Props): import("react").JSX.Element;
-export {};
-//# sourceMappingURL=Action.d.ts.map

package/build/types/common/action/Action.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Action.d.ts","sourceRoot":"","sources":["../../../../src/common/action/Action.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5E,MAAM,MAAM,aAAa,GAAG;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,QAAQ,GAAG,eAAe,CAAC;IACrC,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,SAAS,EACT,OAAkB,EAClB,SAAqB,EACrB,QAA6B,GAC9B,EAAE,KAAK,+BA4CP"}

package/src/common/action/Action.tsx

@@ -1,74 +0,0 @@
-import { clsx } from 'clsx';
-import Link from '../../link';
-import { Typography } from '../propsValues/typography';
-import { Priority } from '../propsValues/control';
-import Button from '../../button';
-import { ButtonPriority, ButtonSentiment } from '../../button/Button.types';
-
-export type ActionOptions = {
-  'aria-label'?: string;
-  href?: string;
-  target?: string;
-  text: React.ReactNode;
-  onClick?: () => void;
-};
-
-type Props = {
-  action: ActionOptions;
-  className?: string;
-  variant?: 'button' | 'action-button';
-  sentiment?: ButtonSentiment;
-  priority?: ButtonPriority;
-};
-
-export function Action({
-  action,
-  className,
-  variant = 'button',
-  sentiment = 'default',
-  priority = Priority.SECONDARY,
-}: Props) {
-  if ('href' in action) {
-    return (
-      <Link
-        href={action.href}
-        className={className}
-        aria-label={action['aria-label']}
-        target={action.target}
-        type={Typography.LINK_LARGE}
-        onClick={action.onClick}
-      >
-        {action.text}
-      </Link>
-    );
-  }
-
-  switch (variant) {
-    case 'action-button':
-      return (
-        <Button
-          v2
-          size="sm"
-          sentiment={sentiment}
-          aria-label={action['aria-label']}
-          priority={priority}
-          className={clsx(className)}
-          onClick={action.onClick}
-        >
-          {action.text}
-        </Button>
-      );
-    case 'button':
-    default:
-      return (
-        <button
-          type="button"
-          aria-label={action['aria-label']}
-          className={clsx('btn-unstyled np-text-link-large', className)}
-          onClick={action.onClick}
-        >
-          {action.text}
-        </button>
-      );
-  }
-}

package/src/select/option/Option.spec.js

@@ -1,43 +0,0 @@
-import { Person as ProfileIcon } from '@transferwise/icons';
-import { Flag } from '@wise/art';
-import { shallow } from 'enzyme';
-
-import Body from '../../body';
-
-import Option from './Option';
-
-describe('option', () => {
-  let component;
-  let props;
-
-  beforeEach(() => {
-    props = { label: 'hello' };
-    component = shallow(<Option {...props} />);
-  });
-
-  it('renders the given small note', () => {
-    component.setProps({ note: 'whadup' });
-    expect(component.find(Body).last().props().children).toBe('whadup');
-  });
-
-  it('renders the given secondary text in a separate line', () => {
-    component.setProps({ secondary: 'secondary text' });
-    expect(component.find(Body).last().props().children).toBe('secondary text');
-  });
-
-  it('renders a given icon', () => {
-    component.setProps({ icon: <ProfileIcon /> });
-    expect(component.find(ProfileIcon)).toHaveLength(1);
-  });
-
-  it('renders the given currency flag for a given currency', () => {
-    component.setProps({ currency: 'hustle' });
-    expect(component.find(Flag)).toHaveLength(1);
-  });
-
-  it('overrides currency flag with icon', () => {
-    component.setProps({ currency: 'hustle', icon: <ProfileIcon /> });
-    expect(component.find(ProfileIcon)).toHaveLength(1);
-    expect(component.find(Flag)).toHaveLength(0);
-  });
-});