@transferwise/components 46.83.3 → 46.84.0

package/src/main.css

@@ -535,6 +535,88 @@ div.critical-comms .critical-comms-body {
 .np-avatar-layout-horizontal-child {
   margin-left: calc(var(--np-avatar-offset) * -1);
 }
+.np-icon-button {
+  border: none;
+}
+.np-icon-button-tertiary-default {
+  color: var(--color-interactive-primary);
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+}
+.np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-neutral-active);
+}
+.np-icon-button-primary-default {
+  color: var(--color-interactive-control);
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+}
+.np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
+  background-color: #008fc9;
+  background-color: var(--color-interactive-accent-hover);
+}
+.np-icon-button-primary-default:not(.disabled):not(:disabled):active {
+  background-color: #0081ba;
+  background-color: var(--color-interactive-accent-active);
+}
+.np-icon-button-primary-negative {
+  color: var(--color-contrast-overlay);
+  background-color: var(--color-sentiment-negative-primary);
+}
+.np-icon-button-primary-negative:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-sentiment-negative-primary-hover);
+}
+.np-icon-button-primary-negative:not(.disabled):not(:disabled):active {
+  background-color: var(--color-sentiment-negative-primary-active);
+}
+.np-theme-personal--bright-green .np-icon-button-primary-negative {
+  color: var(--color-white);
+}
+.np-icon-button-minimal-default {
+  color: var(--color-interactive-primary);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  background-color: transparent;
+}
+.np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-background-screen-hover);
+}
+.np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
+  background-color: var(--color-background-screen-active);
+}
+.np-icon-button-secondary-default {
+  color: var(--color-interactive-primary);
+  background-color: var(--color-interactive-neutral);
+}
+.np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-interactive-neutral-hover);
+}
+.np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
+  background-color: var(--color-interactive-neutral-active);
+}
+.np-theme-personal--bright-green .np-icon-button-secondary-default,
+.np-theme-personal--forest-green .np-icon-button-secondary-default {
+  color: var(--color-interactive-control);
+}
+.np-icon-button-secondary-negative {
+  color: var(--color-sentiment-negative-primary);
+  background-color: var(--color-sentiment-negative-secondary);
+}
+.np-icon-button-secondary-negative:not(.disabled):not(:disabled):hover {
+  background-color: var(--color-sentiment-negative-secondary-hover);
+}
+.np-icon-button-secondary-negative:not(.disabled):not(:disabled):active {
+  background-color: var(--color-sentiment-negative-secondary-active);
+}
+.np-theme-personal--bright-green .np-icon-button-secondary-negative {
+  color: var(--color-white);
+}
+.np-theme-personal--forest-green .np-icon-button-secondary-negative {
+  color: var(--color-contrast-overlay);
+}
 .tw-badge {
   position: relative;
   display: inline-block;
@@ -2201,38 +2283,6 @@ button.np-option {
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
-.np-back-button {
-  color: #00a2dd;
-  color: var(--color-interactive-accent);
-  display: flex !important;
-}
-.np-back-button:hover {
-  color: #008fc9;
-  color: var(--color-interactive-accent-hover);
-}
-.np-back-button:active {
-  color: #0081ba;
-  color: var(--color-interactive-accent-active);
-}
-.np-theme-personal .np-back-button {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-theme-personal .np-back-button:hover {
-  color: var(--color-content-primary-hover);
-}
-.np-theme-personal .np-back-button:active {
-  color: var(--color-content-primary-active);
-}
-.np-theme-personal .np-back-button .tw-icon {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-back-button .tw-icon:hover {
-  color: var(--color-interactive-primary-hover);
-}
-.np-theme-personal .np-back-button .tw-icon:active {
-  color: var(--color-interactive-primary-active);
-}
 .np-flow-navigation {
   width: 100%;
   min-height: 97px;
@@ -4950,6 +5000,10 @@ html:not([dir="rtl"]) .np-navigation-option {
   padding-left: calc(var(--size-24) + var(--size-8));
   padding-right: 0;
 }
+.np-summary__description-icon {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
 .np-summary__action {
   margin-top: 4px;
   margin-top: var(--size-4);

package/src/main.less

@@ -5,6 +5,7 @@
 @import "./avatar/Avatar.less";
 @import "./avatarView/AvatarView.less";
 @import "./avatarLayout/AvatarLayout.less";
+@import "./iconButton/IconButton.less";
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";
@@ -30,7 +31,6 @@
 @import "./dropFade/DropFade.less";
 @import "./emphasis/Emphasis.less";
 @import "./flowNavigation/animatedLabel/AnimatedLabel.less";
-@import "./flowNavigation/backButton/BackButton.less";
 @import "./flowNavigation/FlowNavigation.less";
 @import "./header/Header.less";
 @import "./image/Image.less";

package/src/summary/Summary.css

@@ -67,6 +67,10 @@
   padding-left: calc(var(--size-24) + var(--size-8));
   padding-right: 0;
 }
+.np-summary__description-icon {
+  margin-top: 4px;
+  margin-top: var(--size-4);
+}
 .np-summary__action {
   margin-top: 4px;
   margin-top: var(--size-4);

package/src/summary/Summary.less

@@ -72,6 +72,9 @@
       padding-right: 0;
     }
   }
+  &__description-icon {
+    margin-top: var(--size-4);
+  }
 
   &__action {
     margin-top: var(--size-4);

package/src/summary/Summary.story.tsx

@@ -38,7 +38,7 @@ export const Basic = () => {
           'aria-label': ' Click here to change address',
         }}
         as="li"
-        description="10 Downing Street, Westminster, London SW1A 2AA."
+        description={description}
         info={{
           title: 'You entered your address',
           content: 'Your address has been verified, no more actions are required.',
@@ -58,7 +58,7 @@ export const Basic = () => {
           'aria-label': ' Click here to change address',
         }}
         as="li"
-        description="10 Downing Street, Westminster, London SW1A 2AA."
+        description={description}
         info={{
           title: 'Address verification pending',
           content:
@@ -80,11 +80,21 @@ export const Basic = () => {
           target: '_blank',
         }}
         as="li"
-        description="10 Downing Street, Westminster, London SW1A 2AA."
+        description={description}
         icon={<HomeIcon size={24} />}
         title="We’re verifying your address"
         status={Status.PENDING}
       />
+      <Summary
+        action={{
+          text: actionText,
+          href: '#change-address',
+          'aria-label': ' Click here to change address',
+        }}
+        as="li"
+        description={description}
+        title={title}
+      />
     </ul>
   );
 };

package/src/summary/Summary.tsx

@@ -124,16 +124,18 @@ const Summary = ({
       // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`
       aria-label={status && intl.formatMessage(messages[statusLabels[status]])}
     >
-      <div className="np-summary__icon">
-        {media}
-        {Badge && (
-          <div>
-            {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}
-            <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />
-          </div>
-        )}
-      </div>
-      <div className="np-summary__body m-l-2">
+      {icon && (
+        <div className="np-summary__icon">
+          {media}
+          {Badge && (
+            <div>
+              {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}
+              <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />
+            </div>
+          )}
+        </div>
+      )}
+      <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>
         <div className="np-summary__title d-flex">
           <Body
             as="span"
@@ -161,7 +163,7 @@ const Summary = ({
           <Body
             as="span"
             type={Typography.BODY_DEFAULT}
-            className="d-block np-summary__description"
+            className={`d-block ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}
           >
             {description}
           </Body>

package/build/flowNavigation/backButton/BackButton.js

@@ -1,30 +0,0 @@
-'use strict';
-
-var icons = require('@transferwise/icons');
-var clsx = require('clsx');
-var avatarTypes = require('../../avatar/avatarTypes.js');
-var Avatar = require('../../avatar/Avatar.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function BackButton({
-  className,
-  onClick,
-  'aria-label': ariaLabel
-}) {
-  return /*#__PURE__*/jsxRuntime.jsx(Avatar, {
-    type: avatarTypes.AvatarType.ICON,
-    size: 40,
-    children: /*#__PURE__*/jsxRuntime.jsx("button", {
-      type: "button",
-      "aria-label": ariaLabel,
-      className: clsx.clsx('np-back-button', 'btn-unstyled', className),
-      onClick: onClick,
-      children: /*#__PURE__*/jsxRuntime.jsx(icons.ArrowLeft, {
-        size: 24
-      })
-    })
-  });
-}
-
-module.exports = BackButton;
-//# sourceMappingURL=BackButton.js.map

package/build/flowNavigation/backButton/BackButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BackButton.js","sources":["../../../src/flowNavigation/backButton/BackButton.tsx"],"sourcesContent":["import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport Avatar, { AvatarType } from '../../avatar';\n\nexport interface BackButtonProps {\n  'aria-label': string;\n  className?: string;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport default function BackButton({\n  className,\n  onClick,\n  'aria-label': ariaLabel,\n}: BackButtonProps) {\n  return (\n    <Avatar type={AvatarType.ICON} size={40}>\n      <button\n        type=\"button\"\n        aria-label={ariaLabel}\n        className={clsx('np-back-button', 'btn-unstyled', className)}\n        onClick={onClick}\n      >\n        <ArrowLeftIcon size={24} />\n      </button>\n    </Avatar>\n  );\n}\n"],"names":["BackButton","className","onClick","ariaLabel","_jsx","Avatar","type","AvatarType","ICON","size","children","clsx","ArrowLeftIcon"],"mappings":";;;;;;;;AAWwB,SAAAA,UAAUA,CAAC;EACjCC,SAAS;EACTC,OAAO;AACP,EAAA,YAAY,EAAEC,SAAAA;AACE,CAAA,EAAA;EAChB,oBACEC,cAAA,CAACC,MAAM,EAAA;IAACC,IAAI,EAAEC,sBAAU,CAACC,IAAK;AAACC,IAAAA,IAAI,EAAE,EAAG;AAAAC,IAAAA,QAAA,eACtCN,cAAA,CAAA,QAAA,EAAA;AACEE,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,YAAA,EAAYH,SAAU;MACtBF,SAAS,EAAEU,SAAI,CAAC,gBAAgB,EAAE,cAAc,EAAEV,SAAS,CAAE;AAC7DC,MAAAA,OAAO,EAAEA,OAAQ;MAAAQ,QAAA,eAEjBN,cAAA,CAACQ,eAAa,EAAA;AAACH,QAAAA,IAAI,EAAE,EAAA;OACvB,CAAA;KAAQ,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/flowNavigation/backButton/BackButton.mjs

@@ -1,28 +0,0 @@
-import { ArrowLeft } from '@transferwise/icons';
-import { clsx } from 'clsx';
-import { AvatarType } from '../../avatar/avatarTypes.mjs';
-import Avatar from '../../avatar/Avatar.mjs';
-import { jsx } from 'react/jsx-runtime';
-
-function BackButton({
-  className,
-  onClick,
-  'aria-label': ariaLabel
-}) {
-  return /*#__PURE__*/jsx(Avatar, {
-    type: AvatarType.ICON,
-    size: 40,
-    children: /*#__PURE__*/jsx("button", {
-      type: "button",
-      "aria-label": ariaLabel,
-      className: clsx('np-back-button', 'btn-unstyled', className),
-      onClick: onClick,
-      children: /*#__PURE__*/jsx(ArrowLeft, {
-        size: 24
-      })
-    })
-  });
-}
-
-export { BackButton as default };
-//# sourceMappingURL=BackButton.mjs.map

package/build/flowNavigation/backButton/BackButton.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"BackButton.mjs","sources":["../../../src/flowNavigation/backButton/BackButton.tsx"],"sourcesContent":["import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';\nimport { clsx } from 'clsx';\n\nimport Avatar, { AvatarType } from '../../avatar';\n\nexport interface BackButtonProps {\n  'aria-label': string;\n  className?: string;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport default function BackButton({\n  className,\n  onClick,\n  'aria-label': ariaLabel,\n}: BackButtonProps) {\n  return (\n    <Avatar type={AvatarType.ICON} size={40}>\n      <button\n        type=\"button\"\n        aria-label={ariaLabel}\n        className={clsx('np-back-button', 'btn-unstyled', className)}\n        onClick={onClick}\n      >\n        <ArrowLeftIcon size={24} />\n      </button>\n    </Avatar>\n  );\n}\n"],"names":["BackButton","className","onClick","ariaLabel","_jsx","Avatar","type","AvatarType","ICON","size","children","clsx","ArrowLeftIcon"],"mappings":";;;;;;AAWwB,SAAAA,UAAUA,CAAC;EACjCC,SAAS;EACTC,OAAO;AACP,EAAA,YAAY,EAAEC,SAAAA;AACE,CAAA,EAAA;EAChB,oBACEC,GAAA,CAACC,MAAM,EAAA;IAACC,IAAI,EAAEC,UAAU,CAACC,IAAK;AAACC,IAAAA,IAAI,EAAE,EAAG;AAAAC,IAAAA,QAAA,eACtCN,GAAA,CAAA,QAAA,EAAA;AACEE,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,YAAA,EAAYH,SAAU;MACtBF,SAAS,EAAEU,IAAI,CAAC,gBAAgB,EAAE,cAAc,EAAEV,SAAS,CAAE;AAC7DC,MAAAA,OAAO,EAAEA,OAAQ;MAAAQ,QAAA,eAEjBN,GAAA,CAACQ,SAAa,EAAA;AAACH,QAAAA,IAAI,EAAE,EAAA;OACvB,CAAA;KAAQ,CAAA;AACV,GAAQ,CAAC,CAAA;AAEb;;;;"}

package/build/styles/flowNavigation/backButton/BackButton.css

@@ -1,32 +0,0 @@
-.np-back-button {
-  color: #00a2dd;
-  color: var(--color-interactive-accent);
-  display: flex !important;
-}
-.np-back-button:hover {
-  color: #008fc9;
-  color: var(--color-interactive-accent-hover);
-}
-.np-back-button:active {
-  color: #0081ba;
-  color: var(--color-interactive-accent-active);
-}
-.np-theme-personal .np-back-button {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-theme-personal .np-back-button:hover {
-  color: var(--color-content-primary-hover);
-}
-.np-theme-personal .np-back-button:active {
-  color: var(--color-content-primary-active);
-}
-.np-theme-personal .np-back-button .tw-icon {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-back-button .tw-icon:hover {
-  color: var(--color-interactive-primary-hover);
-}
-.np-theme-personal .np-back-button .tw-icon:active {
-  color: var(--color-interactive-primary-active);
-}

package/build/types/flowNavigation/backButton/BackButton.d.ts

@@ -1,7 +0,0 @@
-export interface BackButtonProps {
-    'aria-label': string;
-    className?: string;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
-}
-export default function BackButton({ className, onClick, 'aria-label': ariaLabel, }: BackButtonProps): import("react").JSX.Element;
-//# sourceMappingURL=BackButton.d.ts.map

package/build/types/flowNavigation/backButton/BackButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/backButton/BackButton.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,SAAS,EACT,OAAO,EACP,YAAY,EAAE,SAAS,GACxB,EAAE,eAAe,+BAajB"}

package/build/types/flowNavigation/backButton/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './BackButton';
-export type { BackButtonProps } from './BackButton';
-//# sourceMappingURL=index.d.ts.map

package/build/types/flowNavigation/backButton/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/backButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/src/flowNavigation/backButton/BackButton.css

@@ -1,32 +0,0 @@
-.np-back-button {
-  color: #00a2dd;
-  color: var(--color-interactive-accent);
-  display: flex !important;
-}
-.np-back-button:hover {
-  color: #008fc9;
-  color: var(--color-interactive-accent-hover);
-}
-.np-back-button:active {
-  color: #0081ba;
-  color: var(--color-interactive-accent-active);
-}
-.np-theme-personal .np-back-button {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-theme-personal .np-back-button:hover {
-  color: var(--color-content-primary-hover);
-}
-.np-theme-personal .np-back-button:active {
-  color: var(--color-content-primary-active);
-}
-.np-theme-personal .np-back-button .tw-icon {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-back-button .tw-icon:hover {
-  color: var(--color-interactive-primary-hover);
-}
-.np-theme-personal .np-back-button .tw-icon:active {
-  color: var(--color-interactive-primary-active);
-}

package/src/flowNavigation/backButton/BackButton.less

@@ -1,36 +0,0 @@
-.np-back-button {
-  color: var(--color-interactive-accent);
-  display: flex !important;
-
-  &:hover {
-    color: var(--color-interactive-accent-hover);
-  }
-
-  &:active {
-    color: var(--color-interactive-accent-active);
-  }
-
-  .np-theme-personal & {
-    color: var(--color-content-primary);
-
-    &:hover {
-      color: var(--color-content-primary-hover);
-    }
-
-    &:active {
-      color: var(--color-content-primary-active);
-    }
-
-    & .tw-icon {
-      color: var(--color-interactive-primary);
-
-      &:hover {
-        color: var(--color-interactive-primary-hover);
-      }
-
-      &:active {
-        color: var(--color-interactive-primary-active);
-      }
-    }
-  }
-}

package/src/flowNavigation/backButton/BackButton.tsx

@@ -1,29 +0,0 @@
-import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';
-import { clsx } from 'clsx';
-
-import Avatar, { AvatarType } from '../../avatar';
-
-export interface BackButtonProps {
-  'aria-label': string;
-  className?: string;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-}
-
-export default function BackButton({
-  className,
-  onClick,
-  'aria-label': ariaLabel,
-}: BackButtonProps) {
-  return (
-    <Avatar type={AvatarType.ICON} size={40}>
-      <button
-        type="button"
-        aria-label={ariaLabel}
-        className={clsx('np-back-button', 'btn-unstyled', className)}
-        onClick={onClick}
-      >
-        <ArrowLeftIcon size={24} />
-      </button>
-    </Avatar>
-  );
-}

package/src/flowNavigation/backButton/index.ts

@@ -1,2 +0,0 @@
-export { default } from './BackButton';
-export type { BackButtonProps } from './BackButton';