@transferwise/components 46.80.0 → 46.82.0

package/src/money/Money.tsx

@@ -4,11 +4,18 @@ import { useIntl } from 'react-intl';
 export interface MoneyProps {
   amount: number;
   currency: string;
+  alwaysShowDecimals?: boolean;
 }
 
-const Money = ({ amount, currency }: MoneyProps) => {
+const Money = ({ amount, currency, alwaysShowDecimals = false }: MoneyProps) => {
   const { locale } = useIntl();
-  return <>{formatMoney(amount, currency, locale)}</>;
+  return (
+    <>
+      {formatMoney(amount, currency, locale, {
+        alwaysShowDecimals,
+      })}
+    </>
+  );
 };
 
 export default Money;

package/src/overlayHeader/OverlayHeader.story.tsx

@@ -2,9 +2,8 @@ import { action } from '@storybook/addon-actions';
 import { select, text } from '@storybook/addon-knobs';
 import { Person as ProfileIcon, Briefcase as BriefcaseIcon } from '@transferwise/icons';
 
-import Avatar, { AvatarType } from '../avatar';
-import AvatarWrapper from '../avatarWrapper';
-import { ProfileType, Size } from '../common';
+import AvatarView from '../avatarView';
+import { ProfileType } from '../common';
 import Logo from '../logo';
 
 import OverlayHeader from './OverlayHeader';
@@ -29,30 +28,23 @@ export const Basic = () => {
   return (
     <OverlayHeader
       logo={<Logo />}
-      avatar={
-        <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-          {avatarProfiles[showAvatar]}
-        </Avatar>
-      }
+      avatar={<AvatarView>{avatarProfiles[showAvatar]}</AvatarView>}
       onClose={action('Close clicked')}
     />
   );
 };
 
 export const WithAvatarWrapper = () => {
-  const avatarURL = text(
-    'avatarURL',
-    'https://wise.com/web-art/assets/illustrations/heart-small@2x.webp',
-  );
+  const avatarURL = text('avatarURL', '../tapestry-01.png');
   const profileType = select(
     'profileType',
-    Object.keys(ProfileType) as `${ProfileType}`[],
+    [ProfileType.PERSONAL, ProfileType.BUSINESS],
     undefined,
   );
   return (
     <OverlayHeader
       logo={<Logo />}
-      avatar={<AvatarWrapper url={avatarURL} profileType={profileType} />}
+      avatar={<AvatarView imgSrc={avatarURL} profileType={profileType} />}
       onClose={action('Close clicked')}
     />
   );

package/src/table/Table.css

@@ -0,0 +1,274 @@
+.np-table {
+  width: 100%;
+  background-color: transparent;
+}
+.np-table-outer-container {
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+}
+.np-table-outer-container:focus {
+  outline: none;
+}
+.np-table-outer-container:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.np-table-outer-container:focus-visible {
+  outline-offset: 0;
+}
+.np-table-outer-container--center {
+  margin-right: auto;
+  margin-left: auto;
+}
+@media (max-width: 767px) {
+  .np-table-outer-container--center {
+    width: 100%;
+  }
+}
+.np-table-outer-container--full-width {
+  width: 100%;
+}
+.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: inherit;
+}
+.np-table-container--loading .np-table-inner-container {
+  background-image: none;
+}
+.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:focus {
+  outline: none;
+}
+.np-table-row:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.np-table-row:focus-visible {
+  outline-offset: -2px;
+  border-radius: 6px;
+}
+.np-table-row--clickable .np-table-cell {
+  position: relative;
+}
+.np-table-row--clickable .np-table-cell:before {
+  display: none;
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background-color: var(--color-background-screen-hover);
+}
+.np-table-row--clickable .np-table-cell:first-child:before,
+.np-table-row--clickable .np-table-cell:last-child:before {
+  width: calc(100% - 8px);
+  width: calc(100% - var(--size-8));
+}
+.np-table-row--clickable .np-table-cell:first-child:before {
+  left: 8px;
+  left: var(--size-8);
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.np-table-row--clickable .np-table-cell:last-child:before {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+.np-table-row--clickable:hover .np-table-cell:before {
+  display: block;
+}
+.np-table-row--clickable:hover:focus-visible .np-table-cell:first-child:before,
+.np-table-row--clickable:hover:focus-visible .np-table-cell:last-child:before {
+  width: 100%;
+}
+.np-table-row--clickable:hover:focus-visible .np-table-cell:first-child:before {
+  left: 0;
+}
+.np-table-row--cosmetic .np-table-cell {
+  height: 8px;
+  height: var(--size-8);
+  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-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:not(.np-table-header--right),
+.np-table-cell.np-table-cell--right + .np-table-cell:not(.np-table-cell--right) {
+  padding-left: calc(8px + 12px);
+  padding-left: calc(var(--size-8) + var(--size-12));
+}
+.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: var(--color-interactive-primary);
+}
+.np-table-header-content {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  white-space: nowrap;
+  line-height: 1.375rem;
+  line-height: var(--line-height-22);
+  letter-spacing: 0.0125em;
+  letter-spacing: var(--letter-spacing-sm);
+}
+.np-table-header--error {
+  color: var(--color-sentiment-negative);
+}
+.np-table-header--action {
+  min-width: 0;
+  padding: 0;
+}
+.np-table-cell {
+  padding: 16px 8px;
+  padding: var(--size-16) var(--size-8);
+  position: relative;
+}
+.np-table-cell--cosmetic {
+  padding: 0;
+}
+.np-table-cell--primary {
+  min-width: 200px;
+}
+.np-table-cell--currency .np-text-body-default {
+  white-space: nowrap;
+}
+.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;
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  padding: 0;
+}
+.np-table-cell .np-text-body-default-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);
+}

package/src/table/Table.less

@@ -0,0 +1,334 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+
+.np-table {
+  @table-background-color: var(--color-background-neutral);
+  @table-border-width: var(--size-8);
+  @table-border-radius: var(--radius-small);
+  @table-border-radius: var(--radius-medium);
+  @table-inner-border-radius: 10px;
+  @table-cell-border-radius: 6px;
+
+  @table-spacing-sm: var(--size-4);
+  @table-spacing-md: var(--size-8);
+  @table-spacing-lg: var(--size-12);
+  @table-spacing-xl: var(--size-16);
+
+  @header-min-width: 160px;
+  @header-min-width-loading: calc(@header-min-width * 2);
+
+  width: 100%;
+  background-color: transparent;
+
+  &-outer-container {
+    border-radius: @table-border-radius;
+
+    .focus-ring();
+    &:focus-visible {
+      outline-offset: 0;
+    }
+
+    &--center {
+      margin-right: auto;
+      margin-left: auto;
+
+      @media (--screen-sm-max) {
+        width: 100%;
+      }
+    }
+
+    &--full-width {
+      width: 100%;
+    }
+  }
+
+  &-container {
+    padding: @table-spacing-md;
+    background-color: @table-background-color;
+    border-radius: inherit;
+
+    &--loading {
+      .np-table-inner-container {
+        background-image: none;
+      }
+    }
+  }
+
+  &-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: @table-inner-border-radius;
+
+    .np-theme-personal--dark & {
+      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, 1), rgba(0, 0, 0, 0)),
+        linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+    }
+  }
+
+  &-row {
+    &:last-child {
+      .np-table-cell {
+        &:first-child {
+          border-bottom-left-radius: @table-inner-border-radius;
+        }
+        &:last-child {
+          border-bottom-right-radius: @table-inner-border-radius;
+        }
+      }
+    }
+
+    .focus-ring();
+    &:focus-visible {
+      outline-offset: -2px;
+      border-radius: @table-cell-border-radius;
+    }
+
+    &--clickable {
+      .np-table-cell {
+        position: relative;
+        &:before {
+          display: none;
+          content: "";
+          position: absolute;
+          height: 100%;
+          width: 100%;
+          top: 0;
+          left: 0;
+          background-color: var(--color-background-screen-hover);
+        }
+
+        &:first-child,
+        &:last-child {
+          &:before {
+            width: calc(100% - @table-spacing-md);
+          }
+        }
+
+        &:first-child {
+          &:before {
+            left: @table-spacing-md;
+            border-top-left-radius: @table-cell-border-radius;
+            border-bottom-left-radius: @table-cell-border-radius;
+          }
+        }
+
+        &:last-child {
+          &:before {
+            border-top-right-radius: @table-cell-border-radius;
+            border-bottom-right-radius: @table-cell-border-radius;
+          }
+        }
+      }
+
+      &:hover {
+        .np-table-cell:before {
+          display: block;
+        }
+
+        &:focus-visible {
+          .np-table-cell {
+            &:first-child,
+            &:last-child {
+              &:before {
+                width: 100%;
+              }
+            }
+
+            &:first-child {
+              &:before {
+                left: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &--cosmetic {
+      .np-table-cell {
+        height: @table-spacing-md;
+        padding: 0;
+      }
+    }
+  }
+
+  &-header,
+  &-cell {
+    padding: 0;
+
+    &:first-child {
+      padding-left: @table-spacing-xl;
+
+      .np-table-header-content,
+      .np-table-cell-content {
+        padding-left: 0;
+      }
+    }
+
+    &:last-child {
+      padding-right: @table-spacing-xl;
+
+      .np-table-header-content,
+      .np-table-cell-content {
+        padding-right: 0;
+      }
+    }
+  }
+
+  &-header.np-table-header--right,
+  &-cell.np-table-cell--right {
+    > .np-text-body-default {
+      text-align: right;
+    }
+  }
+
+  &-header.np-table-header--right + .np-table-header:not(.np-table-header--right),
+  &-cell.np-table-cell--right + .np-table-cell:not(.np-table-cell--right) {
+    padding-left: calc(@table-spacing-md + @table-spacing-lg);
+  }
+
+  &-header.np-table-header--right .np-table-header-content,
+  &-cell.np-table-cell--right .np-table-content {
+    justify-content: end;
+  }
+
+  &-header-content,
+  &-content {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+  }
+
+  &-header {
+    min-width: @header-min-width;
+    padding-right: @table-spacing-md;
+    padding-bottom: @table-spacing-md;
+    padding-left: @table-spacing-md;
+    background-color: var(--color-background-neutral);
+    color: var(--color-interactive-primary);
+
+    &-content {
+      padding-top: 5px;
+      padding-bottom: 5px;
+      white-space: nowrap;
+      line-height: var(--line-height-22);
+      letter-spacing: var(--letter-spacing-sm);
+    }
+
+    &--error {
+      color: var(--color-sentiment-negative);
+    }
+
+    &--action {
+      min-width: 0;
+      padding: 0;
+    }
+  }
+
+  &-cell {
+    padding: @table-spacing-xl @table-spacing-md;
+    position: relative;
+
+    &--cosmetic {
+      padding: 0;
+    }
+
+    &--primary {
+      min-width: 200px;
+    }
+
+    &--currency {
+      .np-text-body-default {
+        white-space: nowrap;
+      }
+    }
+
+    .tw-chevron {
+      margin-left: @table-spacing-md;
+    }
+
+    &-separator {
+      margin-top: @table-spacing-sm;
+      margin-bottom: @table-spacing-sm;
+      height: 1px;
+      background-color: @table-background-color;
+      padding: 0;
+    }
+
+    .np-text-body-default-bold {
+      display: flex;
+      align-items: center;
+      color: var(--color-content-primary);
+      white-space: nowrap;
+    }
+
+    .np-table-content--success {
+      color: var(--color-sentiment-positive);
+    }
+
+    .np-table-content--error {
+      color: var(--color-sentiment-negative);
+    }
+
+    .tw-loader {
+      // The loading area of the table should equals to 5 rows of the table for huge screens and 3 rows for small screens
+      margin: 150px auto;
+      @media (--screen-400-zoom) {
+        margin-top: 70px;
+        margin-bottom: 70px;
+      }
+    }
+  }
+
+  &-content {
+    gap: @table-spacing-lg;
+
+    &--success,
+    &--error {
+      gap: @table-spacing-sm;
+
+      .np-table-content-text {
+        line-height: 155%;
+      }
+    }
+
+    &-media {
+      flex-shrink: 0;
+    }
+    
+    &-body {
+      display: flex;
+      flex-direction: column;
+      font-size: var(--font-size-12);
+      color: var(--color-content-tertiary);
+    }
+
+    &--reversed {
+      flex-direction: row-reverse;
+
+      .np-table-content-body {
+        align-items: end;
+      }
+    }
+  }
+
+  &-empty-data {
+    display: flex;
+    align-items: center;
+
+    .status-circle {
+      margin-right: @table-spacing-lg;
+    }
+  }
+}

package/src/table/Table.messages.ts

@@ -0,0 +1,24 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  loading: {
+    id: 'neptune.Table.loading',
+    defaultMessage: 'Table data is loading',
+  },
+  loaded: {
+    id: 'neptune.Table.loaded',
+    defaultMessage: 'Table data has loaded',
+  },
+  emptyData: {
+    id: 'neptune.Table.emptyData',
+    defaultMessage: 'No results found',
+  },
+  refreshPage: {
+    id: 'neptune.Table.refreshPage',
+    defaultMessage: 'Refresh page',
+  },
+  actionHeader: {
+    id: 'neptune.Table.actionHeader',
+    defaultMessage: 'Action',
+  },
+});