@transferwise/components 46.95.2 → 46.96.0

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>
-      );
-  }
-}