@transferwise/components 0.0.0-experimental-37d8e2c → 0.0.0-experimental-dabe7c7

package/src/actionButton/ActionButton.story.tsx

@@ -23,6 +23,9 @@ export const Basic: Story = storyConfig(
         <ActionButton priority="secondary" {...args}>
           Secondary label
         </ActionButton>
+        <ActionButton priority="tertiary" {...args} style={{ display: 'flex', gap: '0.4rem' }}>
+          Tertiary label
+        </ActionButton>
         <ActionButton priority="primary" {...args} style={{ display: 'flex', gap: '0.4rem' }}>
           <Settings />
           Primary label
@@ -31,6 +34,10 @@ export const Basic: Story = storyConfig(
           <Settings />
           Secondary label
         </ActionButton>
+        <ActionButton priority="tertiary" {...args} style={{ display: 'flex', gap: '0.4rem' }}>
+          <Settings />
+          Tertiary label
+        </ActionButton>
       </div>
     ),
   },

package/src/actionButton/ActionButton.tsx

@@ -1,10 +1,10 @@
 import { clsx } from 'clsx';
 import { ButtonHTMLAttributes, forwardRef } from 'react';
 
-import { Priority, PriorityPrimary, PrioritySecondary } from '../common';
+import { Priority, PriorityPrimary, PrioritySecondary, PriorityTertiary } from '../common';
 
 export type ActionButtonProps = {
-  priority?: PriorityPrimary | PrioritySecondary;
+  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
   /**
    * @deprecated use `children` instead
    */
@@ -30,7 +30,11 @@ const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(
       className={clsx(
         'np-action-btn',
         'np-text-body-default-bold',
-        priority === Priority.SECONDARY ? 'btn-priority-2' : 'btn-priority-1',
+        priority === Priority.TERTIARY
+          ? 'btn-priority-3'
+          : priority === Priority.SECONDARY
+            ? 'btn-priority-2'
+            : 'btn-priority-1',
         className,
       )}
       disabled={disabled}

package/src/actionOption/ActionOption.css

@@ -0,0 +1,4 @@
+.np-action-btn-chevron {
+  color: #c9cbce;
+  color: var(--color-interactive-secondary);
+}

package/src/actionOption/ActionOption.less

@@ -0,0 +1,3 @@
+.np-action-btn-chevron {
+  color: var(--color-interactive-secondary);
+}

package/src/actionOption/ActionOption.story.tsx

@@ -29,6 +29,10 @@ export const WithSecondarypriority: Story = {
   render: (args) => <ActionOption priority="secondary" {...args} />,
 };
 
+export const WithTertiarypriority: Story = {
+  render: (args) => <ActionOption priority="tertiary" {...args} />,
+};
+
 export const WithContainerContent: Story = {
   render: (args) => (
     <>

package/src/actionOption/ActionOption.tsx

@@ -1,8 +1,15 @@
 import { clsx } from 'clsx';
 
 import ActionButton from '../actionButton';
-import { CommonProps, Priority, PriorityPrimary, PrioritySecondary } from '../common';
+import {
+  CommonProps,
+  Priority,
+  PriorityPrimary,
+  PrioritySecondary,
+  PriorityTertiary,
+} from '../common';
 import Option from '../common/Option';
+import { ChevronRight } from '@transferwise/icons';
 
 export type ActionOptionProps = {
   complex?: boolean;
@@ -13,7 +20,7 @@ export type ActionOptionProps = {
   onClick: () => void;
   title: React.ReactNode;
   action: React.ReactNode;
-  priority?: PriorityPrimary | PrioritySecondary;
+  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary;
   showMediaCircle?: boolean;
   isContainerAligned?: boolean;
   as?: React.ElementType;
@@ -72,6 +79,12 @@ const ActionOption = ({
           onClick={onClick}
         >
           {action}
+          {priority === Priority.TERTIARY && (
+            <>
+              &nbsp;
+              <ChevronRight className="np-action-btn-chevron" />
+            </>
+          )}
         </ActionButton>
       }
     />

package/src/avatar/Avatar.tsx

@@ -44,9 +44,6 @@ const backwardsCompatibleSize = (size: AvatarSize): NumericAvatarSize => {
   }
 };
 
-/**
- * @deprecated Use `AvatarView` component instead
- */
 const Avatar: React.FC<AvatarProps> = ({
   backgroundColor = null,
   backgroundColorSeed = null,
@@ -61,7 +58,7 @@ const Avatar: React.FC<AvatarProps> = ({
   const backgroundColorFromSeed = useMemo<string | undefined>(
     () =>
       !backgroundColor && backgroundColorSeed
-        ? getAvatarColorFromSeed(backgroundColorSeed)
+        ? `var(${getAvatarColorFromSeed(backgroundColorSeed)})`
         : undefined,
     [backgroundColor, backgroundColorSeed],
   );

package/src/avatar/colors/colors.ts

@@ -4,10 +4,10 @@
  * Do not change this array.
  */
 const avatarColors = [
-  'var(--color-bright-blue)',
-  'var(--color-bright-yellow)',
-  'var(--color-bright-pink)',
-  'var(--color-bright-orange)',
+  '--color-bright-blue',
+  '--color-bright-yellow',
+  '--color-bright-pink',
+  '--color-bright-orange',
 ] as const;
 
 /*

package/src/avatarWrapper/AvatarWrapper.tsx

@@ -3,14 +3,7 @@ import { useState, useEffect } from 'react';
 
 import Avatar, { AvatarProps, AvatarType } from '../avatar';
 import Badge, { BadgeProps } from '../badge';
-import {
-  ProfileType,
-  ProfileTypePersonal,
-  ProfileTypeBusiness,
-  Size,
-  Sentiment,
-  getInitials,
-} from '../common';
+import { ProfileType, ProfileTypePersonal, ProfileTypeBusiness, Size, Sentiment } from '../common';
 import StatusIcon from '../statusIcon/StatusIcon';
 
 interface OptionalBadgeProps extends Omit<BadgeProps, 'badge'> {
@@ -75,9 +68,6 @@ export type AvatarWrapperProps = {
     }
 );
 
-/**
- * @deprecated Use `AvatarView` component instead
- */
 const AvatarWrapper = ({
   url,
   'aria-label': ariaLabel,
@@ -119,7 +109,7 @@ const AvatarWrapper = ({
       return {
         type: AvatarType.INITIALS,
         children: <>{getInitials(name)}</>,
-        backgroundColorSeed: name?.toString(),
+        backgroundColorSeed: profileId?.toString(),
         ...updatedAvatarProps,
       };
     }
@@ -143,4 +133,18 @@ const AvatarWrapper = ({
   );
 };
 
+function getInitials(name: string) {
+  const allInitials = name
+    .split(' ')
+    .map((part) => part[0])
+    .join('')
+    .toUpperCase();
+
+  if (allInitials.length === 1) {
+    return allInitials[0];
+  }
+
+  return allInitials[0] + allInitials.slice(-1);
+}
+
 export default AvatarWrapper;

package/src/badge/Badge.css

@@ -14,16 +14,16 @@
   --badge-border-color: rgba(0, 0, 0, 0.08);
 }
 .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 [dir="rtl"] .tw-badge > .tw-badge__children {
-  -webkit-mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
-          mask-image: radial-gradient(circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+  -webkit-mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
+          mask-image: radial-gradient(circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)), transparent 0, transparent calc(var(--badge-size) / 2 + var(--badge-mask)), black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px));
 }
 .tw-badge > .tw-badge__content {
   position: absolute;
-  bottom: var(--badge-bottom-position);
+  bottom: 0;
   right: 0;
   box-sizing: border-box;
   text-align: center;

package/src/badge/Badge.less

@@ -33,7 +33,7 @@
 
     mask-image:
       radial-gradient(
-        circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)),
+        circle at top calc(100% - var(--badge-mask-offset)) left calc(100% - var(--badge-mask-offset)),
         transparent 0,
         transparent calc(var(--badge-size) / 2 + var(--badge-mask)),
         black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px)
@@ -42,7 +42,7 @@
     [dir="rtl"] & {
       mask-image:
         radial-gradient(
-          circle at var(--badge-mask-position) calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)),
+          circle at top calc(100% - var(--badge-mask-offset)) right calc(100% - var(--badge-mask-offset)),
           transparent 0,
           transparent calc(var(--badge-size) / 2 + var(--badge-mask)),
           black calc(var(--badge-size) / 2 + var(--badge-mask) + 0.5px)
@@ -52,7 +52,7 @@
 
   & > &__content {
     position: absolute;
-    bottom: var(--badge-bottom-position);
+    bottom: 0;
     .right(0);
 
     box-sizing: border-box;

package/src/badge/Badge.tsx

@@ -27,7 +27,6 @@ export type BadgeProps = {
   size?: SizeSmall | DeprecatedSizes | SizeLarge;
   border?: ThemeDark | ThemeLight;
   'aria-label'?: string;
-  position?: 'top-right' | 'bottom-right';
 } & CommonProps;
 
 const mapLegacySize = {
@@ -44,7 +43,6 @@ const Badge = ({
   border = Theme.LIGHT,
   'aria-label': ariaLabel,
   children,
-  position = 'bottom-right',
 }: BadgeProps) => {
   // medium is deprecated, so we map it to small
   const size = sizeProp === Size.MEDIUM ? Size.SMALL : sizeProp;
@@ -58,14 +56,7 @@ const Badge = ({
   );
 
   return (
-    <div
-      aria-label={ariaLabel}
-      className={classes}
-      style={{
-        '--badge-mask-position': position === 'top-right' ? 'bottom' : 'top',
-        '--badge-bottom-position': position === 'top-right' ? 'calc(var(--badge-size) * 2)' : 0,
-      }}
-    >
+    <div aria-label={ariaLabel} className={classes}>
       <div className="tw-badge__children">{children}</div>
       <Circle size={mapLegacySize[size]} fixedSize className="tw-badge__content">
         {badge}

package/src/circularButton/CircularButton.css

@@ -6,6 +6,30 @@
   cursor: pointer;
   position: relative;
 }
+.np-circular-btn .tw-icon {
+  position: absolute;
+  top: 16px;
+  top: var(--size-16);
+  pointer-events: none;
+  color: white;
+  transition: color 0.15s ease-in-out;
+  width: 100%;
+  left: 0;
+}
+[dir="rtl"] .np-circular-btn .tw-icon {
+  right: 0;
+  left: auto;
+  left: initial;
+}
+@media (max-width: 320px) {
+  .np-circular-btn .tw-icon {
+    top: 8px;
+    top: var(--size-8);
+  }
+}
+.np-circular-btn .tw-icon > svg {
+  margin: 0 auto;
+}
 .np-theme-personal .np-circular-btn {
   /* stylelint-disable-next-line no-duplicate-selectors */
 }

package/src/circularButton/CircularButton.less

@@ -9,23 +9,23 @@
   cursor: pointer;
   position: relative;
 
-  // .tw-icon {
-  //   position: absolute;
-  //   top: var(--size-16);
-  //   pointer-events: none;
-  //   color: white;
-  //   transition: color 0.15s ease-in-out;
-  //   width: 100%;
-  //   .left(0);
+  .tw-icon {
+    position: absolute;
+    top: var(--size-16);
+    pointer-events: none;
+    color: white;
+    transition: color 0.15s ease-in-out;
+    width: 100%;
+    .left(0);
 
-  //   @media (--screen-400-zoom) {
-  //     top: var(--size-8);
-  //   }
+    @media (--screen-400-zoom) {
+      top: var(--size-8);
+    }
 
-  //   > svg {
-  //     margin: 0 auto;
-  //   }
-  // }
+    > svg {
+      margin: 0 auto;
+    }
+  }
 
   .np-theme-personal & {
     /* stylelint-disable-next-line no-duplicate-selectors */

package/src/circularButton/CircularButton.tsx

@@ -28,12 +28,14 @@ const CircularButton = ({
 }: CircularButtonProps) => {
   const classes = clsx('btn np-btn', 'm-b-1', typeClassMap[type], priorityClassMap[priority]);
 
+  const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;
+
   const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
 
   return (
     <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>
       <Circle
-        as="button"
+        as="input"
         // @ts-expect-error it's input[type=button] element
         type="button"
         size={isTinyViewport ? 64 : 56}
@@ -41,9 +43,8 @@ const CircularButton = ({
         className={classes}
         disabled={disabled}
         {...rest}
-      >
-        {icon}
-      </Circle>
+      />
+      {iconElement}
       <Body as="span" className="np-circular-btn__label" type={Typography.BODY_DEFAULT_BOLD}>
         {children}
       </Body>

package/src/common/circle/Circle.css

@@ -4,21 +4,4 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
-  font-size: var(--circle-font-size);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  line-height: 1;
-}
-.np-circle img {
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
-  width: 100%;
-  height: 100%;
-}
-.np-circle .np-display {
-  font-size: var(--circle-font-size);
-}
-.np-circle .tw-icon > svg {
-  height: var(--circle-icon-size);
-  width: var(--circle-icon-size);
 }

package/src/common/circle/Circle.less

@@ -3,26 +3,4 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
-
-  img {
-    border-radius: var(--radius-full);
-    width: 100%;
-    height: 100%;
-  }
-
-  // circle like components set custom typography styles for default (Inter) font
-  font-size: var(--circle-font-size);
-  font-weight: var(--font-weight-semi-bold);
-  line-height: 1;
-
-  // circle like components set custom typography styles for Wise Sand font
-  .np-display {
-    font-size: var(--circle-font-size);
-  }
-
-  // circle like components have 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,7 @@
 import { HTMLAttributes, forwardRef } from 'react';
 import { clsx } from 'clsx';
 
-export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;
+export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
 
 export type Props = {
   /**
@@ -19,32 +19,6 @@ export type Props = {
   fixedSize?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
-/**
- * circle like components has custom sizes for icons
- */
-const mapIconSize = {
-  16: 12,
-  24: 16,
-  32: 18,
-  40: 20,
-  48: 24,
-  56: 28,
-  72: 36,
-};
-
-/**
- * circle like components have custom font styles
- */
-const mapFontSize = {
-  16: 8,
-  24: 12,
-  32: 14,
-  40: 18,
-  48: 22,
-  56: 26,
-  72: 30,
-};
-
 const Circle = forwardRef(function Circle(
   {
     as: Element = 'div',
@@ -61,12 +35,7 @@ const Circle = forwardRef(function Circle(
     <Element
       {...props}
       ref={ref}
-      style={{
-        ...style,
-        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
-        '--circle-icon-size': `${mapIconSize[size]}px`,
-        '--circle-font-size': `${mapFontSize[size]}px`,
-      }}
+      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}
       className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}
     >
       {children}

package/src/common/index.js

@@ -23,4 +23,3 @@ export { MarkdownNodeType } from './propsValues/markdownNodeType';
 export { FileType } from './fileType';
 export * from './locale';
 export * from './commonProps';
-export * from './initials';

package/src/display/Display.tsx

@@ -18,7 +18,7 @@ function Display({
   id,
 }: Props) {
   return (
-    <Heading id={id} className={clsx('np-display', `np-text-${type}`, 'text-primary', className)}>
+    <Heading id={id} className={clsx(`np-text-${type}`, 'text-primary', className)}>
       {children}
     </Heading>
   );

package/src/index.ts

@@ -8,7 +8,6 @@ export type { ActionOptionProps } from './actionOption';
 export type { SelectOptionProps, SelectOptionValue, SelectOptiopsSection } from './selectOption';
 export type { AlertAction, AlertProps, AlertType } from './alert';
 export type { AvatarProps } from './avatar';
-export type { AvatarViewProps } from './avatarView';
 export type { BadgeProps } from './badge';
 export type { CardProps } from './card';
 export type { CarouselProps } from './carousel';
@@ -103,7 +102,6 @@ export { default as ActionOption } from './actionOption';
 export { default as SelectOption } from './selectOption';
 export { default as Alert } from './alert';
 export { default as Avatar } from './avatar';
-export { default as AvatarView } from './avatarView';
 export { default as AvatarWrapper } from './avatarWrapper';
 export { default as Badge } from './badge';
 export { default as Body } from './body';
@@ -245,9 +243,7 @@ export {
   getLangFromLocale,
   isBrowser,
   isServerSide,
-  getInitials,
 } from './common';
-export { getAvatarColorFromSeed } from './avatar/colors';
 
 /**
  * Translations