@transferwise/components 0.0.0-experimental-7b7608c → 0.0.0-experimental-c76c3bc

package/src/circularButton/__snapshots__/CircularButton.spec.tsx.snap

@@ -8,7 +8,7 @@ exports[`CircularButton defaults renders a button of type accent and priority pr
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -46,7 +46,7 @@ exports[`CircularButton priorities renders primary buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -84,7 +84,7 @@ exports[`CircularButton priorities renders primary buttons 2`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -122,7 +122,7 @@ exports[`CircularButton priorities renders primary buttons 3`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -160,7 +160,7 @@ exports[`CircularButton priorities renders secondary buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-2"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -198,7 +198,7 @@ exports[`CircularButton priorities renders secondary buttons 2`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-2"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -236,7 +236,7 @@ exports[`CircularButton priorities renders secondary buttons 3`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-2"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -274,7 +274,7 @@ exports[`CircularButton types renders accent buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -312,7 +312,7 @@ exports[`CircularButton types renders negative buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -350,7 +350,7 @@ exports[`CircularButton types renders positive buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span

package/src/common/circle/Circle.css

@@ -5,3 +5,7 @@
   height: var(--circle-size);
   flex-shrink: 0;
 }
+.np-circle .tw-icon > svg {
+  height: var(--circle-icon-size);
+  width: var(--circle-icon-size);
+}

package/src/common/circle/Circle.less

@@ -3,4 +3,10 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
+
+  // has custom icon sizes
+  .tw-icon > svg {
+    height: var(--circle-icon-size);
+    width: var(--circle-icon-size);
+  }
 }

package/src/common/circle/Circle.tsx

@@ -1,7 +1,9 @@
 import { HTMLAttributes, forwardRef } from 'react';
 import { clsx } from 'clsx';
+import { useMedia } from '../hooks/useMedia';
+import { Breakpoint } from '../propsValues/breakpoint';
 
-export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
+export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;
 
 export type Props = {
   /**
@@ -19,6 +21,19 @@ export type Props = {
   fixedSize?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
+/**
+ * circle like components has custom sizes for icons
+ */
+const MAP_ICON_SIZE = {
+  16: 12,
+  24: 16,
+  32: 18,
+  40: 20,
+  48: 24,
+  56: 28,
+  72: 36,
+};
+
 const Circle = forwardRef(function Circle(
   {
     as: Element = 'div',
@@ -31,11 +46,19 @@ const Circle = forwardRef(function Circle(
   }: Props,
   ref,
 ) {
+  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   return (
     <Element
       {...props}
       ref={ref}
-      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}
+      style={{
+        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
+        '--circle-icon-size':
+          isTinyViewport && !fixedSize
+            ? `${MAP_ICON_SIZE[size] / 2}px`
+            : `${MAP_ICON_SIZE[size]}px`,
+        ...style,
+      }}
       className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}
     >
       {children}

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -22,11 +22,11 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
       >
         <div
           class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          style="--circle-size: 48px; --circle-icon-size: 24px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            style="--circle-size: 48px; --circle-icon-size: 16px;"
           >
             TM
           </div>
@@ -139,11 +139,11 @@ exports[`FlowNavigation renders as expected 1`] = `
       >
         <div
           class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          style="--circle-size: 48px; --circle-icon-size: 24px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            style="--circle-size: 48px; --circle-icon-size: 16px;"
           >
             TM
           </div>

package/src/i18n/en.json

@@ -30,8 +30,6 @@
   "neptune.Summary.statusDone": "Item done",
   "neptune.Summary.statusNotDone": "Item to do",
   "neptune.Summary.statusPending": "Item pending",
-  "neptune.Table.emptyData": "No results found",
-  "neptune.Table.refreshPage": "Refresh page",
   "neptune.Upload.csButtonText": "Upload another file?",
   "neptune.Upload.csFailureText": "Upload failed. Please, try again",
   "neptune.Upload.csSuccessText": "Upload complete!",

package/src/main.css

@@ -1013,8 +1013,8 @@ div.critical-comms .critical-comms-body {
 }
 @media (max-width: 320px) {
   .np-circular-btn .tw-icon {
-    top: 8px;
-    top: var(--size-8);
+    top: 12px;
+    top: var(--size-12);
   }
 }
 .np-circular-btn .tw-icon > svg {
@@ -1169,6 +1169,10 @@ div.critical-comms .critical-comms-body {
   height: var(--circle-size);
   flex-shrink: 0;
 }
+.np-circle .tw-icon > svg {
+  height: var(--circle-icon-size);
+  width: var(--circle-icon-size);
+}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }
@@ -4155,12 +4159,6 @@ html:not([dir="rtl"]) .np-navigation-option {
     transform: translateY(-24px);
   }
 }
-.status-icon > svg {
-  height: 32px;
-  height: var(--size-32);
-  width: 32px;
-  width: var(--size-32);
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -4176,20 +4174,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-sm .status-icon > svg {
-  height: 14px;
-  height: var(--size-14);
-  width: 14px;
-  width: var(--size-14);
-}
-@media (max-width: 320px) {
-  .status-circle-sm .status-icon > svg {
-    width: 24px;
-    width: var(--size-24);
-    height: 24px;
-    height: var(--size-24);
-  }
-}
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);
@@ -5025,221 +5009,6 @@ html:not([dir="rtl"]) .np-navigation-option {
     padding: 0 var(--size-24);
   }
 }
-.np-table {
-  width: 100%;
-  background-color: transparent;
-}
-.np-table-container {
-  padding: 8px;
-  padding: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  border-radius: 16px;
-  border-radius: var(--radius-medium);
-}
-.np-table-container--loading .np-table-header {
-  min-width: calc(160px * 2);
-}
-.np-table-container--center {
-  margin-right: auto;
-  margin-left: auto;
-}
-.np-table-container--full-width {
-  width: 100%;
-}
-.np-table-inner-container {
-  background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
-  background-position: left center, right center, left center, right center;
-  background-repeat: no-repeat;
-  background-color: var(--color-contrast-overlay);
-  background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
-  background-attachment: local, local, scroll, scroll;
-  overflow-x: auto;
-  border-radius: 10px;
-}
-.np-theme-personal--dark .np-table-inner-container {
-  background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, #000000, rgba(0, 0, 0, 0)), linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
-}
-.np-table-row:last-child .np-table-cell:first-child {
-  border-bottom-left-radius: 10px;
-}
-.np-table-row:last-child .np-table-cell:last-child {
-  border-bottom-right-radius: 10px;
-}
-.np-table-row--clickable:hover .np-table-cell {
-  background-color: var(--color-background-screen-hover);
-  cursor: pointer;
-}
-.np-table-row--separator .np-table-cell {
-  padding: 0;
-}
-.np-table-header,
-.np-table-cell {
-  padding: 0;
-}
-.np-table-header:first-child,
-.np-table-cell:first-child {
-  padding-left: 16px;
-  padding-left: var(--size-16);
-}
-.np-table-header:first-child .np-table-header-content,
-.np-table-cell:first-child .np-table-header-content,
-.np-table-header:first-child .np-table-cell-content,
-.np-table-cell:first-child .np-table-cell-content {
-  padding-left: 0;
-}
-.np-table-header:last-child,
-.np-table-cell:last-child {
-  padding-right: 16px;
-  padding-right: var(--size-16);
-}
-.np-table-header:last-child .np-table-header-content,
-.np-table-cell:last-child .np-table-header-content,
-.np-table-header:last-child .np-table-cell-content,
-.np-table-cell:last-child .np-table-cell-content {
-  padding-right: 0;
-}
-.np-table-header .np-text-body-large-bold,
-.np-table-cell .np-text-body-large-bold {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-}
-.np-table-header.np-table-header--right,
-.np-table-cell.np-table-cell--right {
-  padding-right: calc(8px + 12px);
-  padding-right: calc(var(--size-8) + var(--size-12));
-}
-.np-table-header.np-table-header--right > .np-text-body-default,
-.np-table-cell.np-table-cell--right > .np-text-body-default {
-  text-align: right;
-}
-.np-table-header.np-table-header--right .np-table-header-content,
-.np-table-cell.np-table-cell--right .np-table-content {
-  justify-content: end;
-}
-.np-table-header-content,
-.np-table-content {
-  display: flex;
-  align-items: center;
-  justify-content: start;
-}
-.np-table-header {
-  min-width: 160px;
-  padding-right: 8px;
-  padding-right: var(--size-8);
-  padding-bottom: 8px;
-  padding-bottom: var(--size-8);
-  padding-left: 8px;
-  padding-left: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.np-table-header-content {
-  padding-top: 5px;
-  padding-bottom: 5px;
-  white-space: nowrap;
-}
-.np-table-header--has-error {
-  color: var(--color-sentiment-negative);
-}
-.np-table-cell {
-  padding: 16px 8px;
-  padding: var(--size-16) var(--size-8);
-}
-.np-table-cell--primary {
-  min-width: 200px;
-}
-.np-table-cell--currency .np-text-body-default {
-  white-space: nowrap;
-}
-.np-table-cell--status .status-circle {
-  width: 24px;
-  height: 24px;
-}
-.np-table-cell--status .status-circle .status-icon > svg {
-  width: 21px;
-  height: 21px;
-}
-.np-table-cell .tw-chevron {
-  margin-left: 8px;
-  margin-left: var(--size-8);
-}
-.np-table-cell-separator {
-  margin-top: 4px;
-  margin-top: var(--size-4);
-  margin-bottom: 4px;
-  margin-bottom: var(--size-4);
-  height: 1px;
-  padding: 0;
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
-}
-.np-table-cell .np-text-body-default {
-  line-height: 1.375rem;
-  line-height: var(--line-height-22);
-}
-.np-table-cell .np-text-body-large-bold {
-  display: flex;
-  align-items: center;
-  color: #37517e;
-  color: var(--color-content-primary);
-  white-space: nowrap;
-}
-.np-table-cell .np-table-content--success {
-  color: var(--color-sentiment-positive);
-}
-.np-table-cell .np-table-content--error {
-  color: var(--color-sentiment-negative);
-}
-.np-table-cell .tw-loader {
-  margin: 150px auto;
-}
-@media (max-width: 320px) {
-  .np-table-cell .tw-loader {
-    margin-top: 70px;
-    margin-bottom: 70px;
-  }
-}
-.np-table-content {
-  gap: 12px;
-  gap: var(--size-12);
-}
-.np-table-content--success,
-.np-table-content--error {
-  gap: 4px;
-  gap: var(--size-4);
-}
-.np-table-content--success .np-table-content-text,
-.np-table-content--error .np-table-content-text {
-  line-height: 155%;
-}
-.np-table-content-media {
-  flex-shrink: 0;
-}
-.np-table-content-body {
-  display: flex;
-  flex-direction: column;
-  font-size: 0.75rem;
-  font-size: var(--font-size-12);
-  color: #768e9c;
-  color: var(--color-content-tertiary);
-}
-.np-table-content--reversed {
-  flex-direction: row-reverse;
-}
-.np-table-content--reversed .np-table-content-body {
-  align-items: end;
-}
-.np-table-empty-data {
-  display: flex;
-  align-items: center;
-}
-.np-table-empty-data .status-circle {
-  margin-right: 12px;
-  margin-right: var(--size-12);
-}
 .np-tile {
   min-width: 120px;
   border-radius: 10px;

package/src/main.less

@@ -60,7 +60,6 @@
 @import "./summary/Summary.less";
 @import "./switch/Switch.less";
 @import "./tabs/Tabs.less";
-@import "./table/Table.less";
 @import "./tile/Tile.less";
 @import "./tooltip/Tooltip.less";
 @import "./typeahead/Typeahead.less";

package/src/overlayHeader/OverlayHeader.spec.tsx

@@ -1,9 +1,11 @@
 import Avatar, { AvatarType } from '../avatar';
 import { Size } from '../common';
-import { render } from '../test-utils';
+import { render, mockMatchMedia } from '../test-utils';
 
 import OverlayHeader from '.';
 
+mockMatchMedia();
+
 describe('OverlayHeader', () => {
   const props = {
     avatar: (

package/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap

@@ -19,11 +19,11 @@ exports[`OverlayHeader renders as expected 1`] = `
       >
         <div
           class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          style="--circle-size: 48px; --circle-icon-size: 24px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            style="--circle-size: 48px; --circle-icon-size: 16px;"
           >
             TM
           </div>

package/src/promoCard/PromoCard.spec.tsx

@@ -1,8 +1,10 @@
-import { render, fireEvent, screen } from '@testing-library/react';
+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/radio/Radio.rtl.spec.tsx

@@ -1,8 +1,9 @@
 import Avatar, { AvatarType } from '../avatar';
-import { render } from '../test-utils';
+import { render, mockMatchMedia } from '../test-utils';
 
 import Radio from '.';
 
+mockMatchMedia();
 jest.mock('../common/hooks');
 
 describe('Radio', () => {

package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap

@@ -35,11 +35,11 @@ exports[`Radio shows the avatar when supplied 1`] = `
       >
         <div
           class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          style="--circle-size: 48px; --circle-icon-size: 24px;"
         >
           <div
             class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            style="--circle-size: 48px; --circle-icon-size: 16px;"
           >
             HD
           </div>

package/src/statusIcon/StatusIcon.css

@@ -1,9 +1,3 @@
-.status-icon > svg {
-  height: 32px;
-  height: var(--size-32);
-  width: 32px;
-  width: var(--size-32);
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -19,20 +13,6 @@
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-sm .status-icon > svg {
-  height: 14px;
-  height: var(--size-14);
-  width: 14px;
-  width: var(--size-14);
-}
-@media (max-width: 320px) {
-  .status-circle-sm .status-icon > svg {
-    width: 24px;
-    width: var(--size-24);
-    height: 24px;
-    height: var(--size-24);
-  }
-}
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);

package/src/statusIcon/StatusIcon.less

@@ -1,8 +1,3 @@
-.status-icon > svg {
-  height: var(--size-32);
-  width: var(--size-32);
-}
-
 .status-circle {
   .light {
     color: var(--color-contrast);
@@ -22,18 +17,6 @@
       }
     }
   }
-
-  &-sm {
-    .status-icon > svg {
-      height: var(--size-14);
-      width: var(--size-14);
-
-      @media (--screen-400-zoom) {
-        width: var(--size-24);
-        height: var(--size-24);
-      }
-    }
-  }
 }
 
 .status-circle.negative,

package/src/statusIcon/StatusIcon.spec.tsx

@@ -1,15 +1,12 @@
-import { Sentiment, Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
+import { Sentiment, Size } from '../common';
 import { render, cleanup, screen, mockMatchMedia } from '../test-utils';
 
-import StatusIcon from '.';
+import StatusIcon, { type StatusIconProps } from '.';
 
 mockMatchMedia();
 
 describe('StatusIcon', () => {
-  const renderStatusIcon = (props?: {
-    sentiment?: Sentiment;
-    size?: SizeLarge | SizeMedium | SizeSmall;
-  }) => {
+  const renderStatusIcon = (props?: StatusIconProps) => {
     return render(
       <StatusIcon
         sentiment={props?.sentiment || Sentiment.NEUTRAL}
@@ -25,23 +22,8 @@ describe('StatusIcon', () => {
 
     expect(screen.getByTestId('status-icon')).toHaveClass('neutral');
     expect(screen.getByTestId('status-icon')).toHaveClass('status-circle');
-    expect(screen.getByTestId('status-icon')).toHaveClass('status-circle-md');
   });
 
-  it.each([
-    [Size.SMALL as const, 'status-circle-sm'],
-    [Size.MEDIUM as const, 'status-circle-md'],
-    [Size.LARGE as const, 'status-circle-lg'],
-  ])(
-    "if prop 'size' equals '%s' is passed, renders the status icon with class '%s'",
-    (size, expectedClass) => {
-      renderStatusIcon({ size });
-
-      expect(screen.getByTestId('status-icon')).toHaveClass(expectedClass);
-      cleanup();
-    },
-  );
-
   it.each([
     [Sentiment.NEGATIVE, Sentiment.NEGATIVE],
     [Sentiment.NEUTRAL, Sentiment.NEUTRAL],