@transferwise/components 0.0.0-experimental-bc13343 → 0.0.0-experimental-739bfcf

package/src/avatarLayout/AvatarLayout.tsx

@@ -1,7 +1,8 @@
 import { clsx } from 'clsx';
 import AvatarView, { AvatarViewProps } from '../avatarView';
+import { useDirection } from '../common/hooks';
 
-type SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<
+export type SingleAvatarType = { asset?: AvatarViewProps['children'] } & Omit<
   AvatarViewProps,
   'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'
 >;
@@ -24,6 +25,7 @@ export default function AvatarLayout({
 }: Props) {
   const orientation =
     size === 16 && orientationProp === 'diagonal' ? 'horizontal' : orientationProp;
+  const { isRTL } = useDirection();
   const isDiagonal = orientation === 'diagonal';
   const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;
   return avatars.length < 1 ? null : avatars.length === 1 ? (
@@ -46,8 +48,14 @@ export default function AvatarLayout({
           // eslint-disable-next-line react/no-array-index-key
           key={index}
           className={clsx(
-            { [`np-avatar-layout-${orientation}-child`]: index !== 0 },
-            { [`np-avatar-layout-${orientation}-mask`]: index !== avatars.length - 1 },
+            {
+              [`np-avatar-layout-${orientation}-child`]:
+                !isDiagonal && isRTL ? index !== avatars.length - 1 : index !== 0,
+            },
+            {
+              [`np-avatar-layout-${orientation}-mask`]:
+                !isDiagonal && isRTL ? index !== 0 : index !== avatars.length - 1,
+            },
           )}
         >
           <AvatarView

package/src/avatarLayout/index.ts

@@ -1,2 +1,3 @@
 export type { Props as AvatarLayoutProps } from './AvatarLayout';
+export type { SingleAvatarType } from './AvatarLayout';
 export { default } from './AvatarLayout';

package/src/button/Button.css

@@ -1,23 +1,239 @@
-.np-btn {
+.wds-Button {
+  --Button-background: var(--color-interactive-accent);
+  --Button-background-hover: var(--color-interactive-accent-hover);
+  --Button-background-active: var(--color-interactive-accent-active);
+  --Button-color: var(--color-interactive-control);
+  --Button-padding: var(--size-8) var(--size-12);
+  --Button-border-radius: var(--radius-full);
+  --Button-size-small-padding: 5px var(--size-12);
+  --Button-size-medium-padding: var(--size-8) var(--size-12);
+  --Button-size-large-padding: var(--size-12) var(--size-16);
+  --Button-transition-duration: 150ms;
+  --Button-transition-easing: ease-in-out;
+  --Button-secondary-background: var(--color-interactive-neutral);
+  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
+  --Button-secondary-background-active: var(--color-interactive-neutral-active);
+  --Button-secondary-color: var(--color-interactive-primary);
+  --Button-tertiary-background: var(--color-background-neutral);
+  --Button-tertiary-background-hover: var(--color-background-neutral-hover);
+  --Button-tertiary-background-active: var(--color-background-neutral-active);
+  --Button-tertiary-color: var(--color-content-primary);
+  --Button-minimal-background: transparent;
+  --Button-minimal-background-hover: var(--color-background-screen-hover);
+  --Button-minimal-background-active: var(--color-background-screen-active);
+  --Button-minimal-color: var(--color-interactive-primary);
+  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
+  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
+  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
+  --Button-primary-negative-color: var(--color-contrast);
+  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
+  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
+  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
+  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
+}
+.np-theme-personal--bright-green .wds-Button {
+  --color-contrast: #FFFFFF;
+  --Button-secondary-color: var(--color-interactive-control);
+  --Button-secondary-negative-color: var(--color-contrast);
+}
+/* Button Styles */
+.wds-Button {
+  display: inline-flex;
+  flex: none;
+  width: auto;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  word-wrap: break-word;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: var(--Button-background);
+  border: none;
+  border-radius: var(--Button-border-radius);
+  color: var(--Button-color);
+  cursor: pointer;
+  padding: var(--Button-padding);
+  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
+}
+.wds-Button:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-Button:hover {
+  background-color: var(--Button-background-hover);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-Button:active {
+  background-color: var(--Button-background-active);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-Button.wds-Button--disabled,
+.wds-Button:disabled {
+  mix-blend-mode: luminosity;
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.wds-Button.wds-Button--disabled:hover,
+.wds-Button:disabled:hover,
+.wds-Button.wds-Button--disabled:active,
+.wds-Button:disabled:active {
+  background-color: var(--Button-background);
+}
+.wds-Button--secondary {
+  --Button-background: var(--Button-secondary-background);
+  --Button-background-hover: var(--Button-secondary-background-hover);
+  --Button-background-active: var(--Button-secondary-background-active);
+  --Button-color: var(--Button-secondary-color);
+}
+.wds-Button--tertiary {
+  --Button-background: var(--Button-tertiary-background);
+  --Button-background-hover: var(--Button-tertiary-background-hover);
+  --Button-background-active: var(--Button-tertiary-background-active);
+  --Button-color: var(--Button-tertiary-color);
+}
+.wds-Button--tertiary .wds-Button-icon--end {
+  color: var(--color-interactive-primary);
+}
+.wds-Button--minimal {
+  --Button-background: var(--Button-minimal-background);
+  --Button-background-hover: var(--Button-minimal-background-hover);
+  --Button-background-active: var(--Button-minimal-background-active);
+  --Button-color: var(--Button-minimal-color);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+}
+.wds-Button--minimal:hover,
+.wds-Button--minimal:hover:active {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+.wds-Button--negative.wds-Button--primary {
+  --Button-background: var(--Button-primary-negative-background);
+  --Button-background-hover: var(--Button-primary-negative-background-hover);
+  --Button-background-active: var(--Button-primary-negative-background-active);
+  --Button-color: var(--Button-primary-negative-color);
+}
+.wds-Button--negative.wds-Button--secondary {
+  --Button-background: var(--Button-secondary-negative-background);
+  --Button-background-hover: var(--Button-secondary-negative-background-hover);
+  --Button-background-active: var(--Button-secondary-negative-background-active);
+  --Button-color: var(--Button-secondary-negative-color);
+}
+.wds-Button--small {
+  --Button-padding: var(--Button-size-small-padding);
+}
+.wds-Button--small .wds-Button-icon--start {
+  margin-right: 4px;
+  margin-right: var(--size-4);
+}
+[dir="rtl"] .wds-Button--small .wds-Button-icon--start {
+  margin-right: 0;
+  margin-left: 4px;
+  margin-left: var(--size-4);
+}
+.wds-Button--medium {
+  --Button-padding: var(--Button-size-medium-padding);
+}
+.wds-Button--large {
+  --Button-padding: var(--Button-size-large-padding);
+}
+.wds-Button--block {
+  width: 100%;
+}
+.wds-Button-avatars {
+  display: inline-flex;
+  margin-right: 5px;
+  margin-left: calc(4px * -1);
+  margin-left: calc(var(--size-4) * -1);
+}
+[dir="rtl"] .wds-Button-avatars {
+  margin-right: 0;
+  margin-left: 5px;
+}
+.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
+  color: var(--Button-color);
+}
+.wds-Button-icon {
+  display: inline-block;
+}
+.wds-Button-icon--start {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+}
+[dir="rtl"] .wds-Button-icon--start {
+  margin-right: 0;
+  margin-left: 8px;
+  margin-left: var(--size-8);
+}
+.wds-Button-icon--end {
+  margin-left: 4px;
+  margin-left: var(--size-4);
+}
+[dir="rtl"] .wds-Button-icon--end {
+  margin-left: 0;
+  margin-right: 4px;
+  margin-right: var(--size-4);
+}
+.wds-Button-content {
+  position: relative;
+}
+.wds-Button-content--loading .wds-Button-label,
+.wds-Button-content--loading .wds-Button-media,
+.wds-Button-content--loading .wds-Button-icon {
+  visibility: hidden;
+  opacity: 0;
+}
+.wds-Button-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   position: relative;
 }
-.np-btn.np-btn-block > span.btn-loader {
+.wds-Button-loader {
   position: absolute;
-  left: 24px;
-  left: var(--size-24);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.wds-Button-loader .process-circle {
+  stroke: var(--Button-color);
+}
+/* RTL Styles */
+[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right {
+  transform: rotate(180deg);
+}
+[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
+  transform: rotate(180deg);
 }
-[dir="rtl"] .np-btn.np-btn-block > span.btn-loader {
-  right: 24px;
-  right: var(--size-24);
-  left: auto;
-  left: initial;
+/* Avatar border transparency */
+/* dark buttons get 20% transparency, light buttons get 12% */
+.wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
 }
-.np-btn.np-btn-xs > span.btn-loader {
-  background-size: 16px 16px;
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
-.np-btn.np-btn-xs.btn-block > span.btn-loader {
-  top: 0;
+.np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
+.np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }
-.np-btn.disabled[class] {
-  pointer-events: auto;
+.np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
+.np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
 }

package/src/button/Button.less

@@ -1,24 +1,242 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import './Button.vars.less';
 
-.np-btn {
-  position: relative;
+/* Button Styles */
+.wds-Button {
+  display: inline-flex;
+  flex: none;
+  width: auto;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  word-wrap: break-word;
+  appearance: none;
+  background-color: var(--Button-background);
+  border: none;
+  border-radius: var(--Button-border-radius);
+  color: var(--Button-color);
+  cursor: pointer;
+  padding: var(--Button-padding);
+  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
 
-  &.np-btn-block > span.btn-loader {
-    position: absolute;
-    .left(var(--size-24));
+  &:focus {
+    text-decoration: none;
+  }
+
+  &:hover {
+    background-color: var(--Button-background-hover);
+    text-decoration: none;
+  }
+
+  &:active {
+    background-color: var(--Button-background-active);
+    text-decoration: none;
+  }
+
+  &.wds-Button--disabled,
+  &:disabled {
+    mix-blend-mode: luminosity;
+    opacity: 0.45;
+    cursor: not-allowed;
+
+    &:hover,
+    &:active {
+      background-color: var(--Button-background);
+    }
+  }
+
+  // Priority modifiers
+  &--secondary {
+    --Button-background: var(--Button-secondary-background);
+    --Button-background-hover: var(--Button-secondary-background-hover);
+    --Button-background-active: var(--Button-secondary-background-active);
+    --Button-color: var(--Button-secondary-color);
+  }
+
+  &--tertiary {
+    --Button-background: var(--Button-tertiary-background);
+    --Button-background-hover: var(--Button-tertiary-background-hover);
+    --Button-background-active: var(--Button-tertiary-background-active);
+    --Button-color: var(--Button-tertiary-color);
+
+    .wds-Button-icon--end {
+      color: var(--color-interactive-primary);
+    }
+  }
+
+  &--minimal {
+    --Button-background: var(--Button-minimal-background);
+    --Button-background-hover: var(--Button-minimal-background-hover);
+    --Button-background-active: var(--Button-minimal-background-active);
+    --Button-color: var(--Button-minimal-color);
+
+    text-decoration: underline;
+    text-underline-offset: 3px;
+    text-decoration-thickness: 1px;
+
+    &:hover,
+    &:hover:active {
+      text-decoration: underline;
+    }
+  }
+
+  // Negative styles
+  &--negative {
+
+    &.wds-Button--primary {
+      --Button-background: var(--Button-primary-negative-background);
+      --Button-background-hover: var(--Button-primary-negative-background-hover);
+      --Button-background-active: var(--Button-primary-negative-background-active);
+      --Button-color: var(--Button-primary-negative-color);
+    }
+
+    &.wds-Button--secondary {
+      --Button-background: var(--Button-secondary-negative-background);
+      --Button-background-hover: var(--Button-secondary-negative-background-hover);
+      --Button-background-active: var(--Button-secondary-negative-background-active);
+      --Button-color: var(--Button-secondary-negative-color);
+    }
+  }
+
+  // Size modifiers
+  &--small {
+    --Button-padding: var(--Button-size-small-padding);
+
+    .wds-Button-icon--start {
+      margin-right: var(--size-4);
+      :dir(rtl) & {
+        margin-right: 0;
+        margin-left: var(--size-4);
+      }
+    }
   }
 
-  &.np-btn-xs > span.btn-loader {
-    background-size: 16px 16px;
+  &--medium {
+    --Button-padding: var(--Button-size-medium-padding);
   }
 
-  &.np-btn-xs.btn-block > span.btn-loader {
-    top: 0;
+  &--large {
+    --Button-padding: var(--Button-size-large-padding);
   }
 
-  // we do not want pointer events disabled as that
-  // prevents the custom cursor to be shown
-  &.disabled[class] {
-    pointer-events: auto;
+  // Width mofidiers
+  &--block {
+    width: 100%;
+  }
+
+  &-avatars {
+    display: inline-flex;
+    margin-right: 5px;
+    margin-left: calc(var(--size-4) * -1);
+
+    :dir(rtl) & {
+      margin-right: 0;
+      margin-left: 5px;
+    }
+
+    .np-avatar-view .np-avatar-view-content {
+      color: var(--Button-color);
+    }
+  }
+
+  // Icon styles
+  &-icon {
+    display: inline-block;
+
+    &--start {
+      margin-right: var(--size-8);
+      :dir(rtl) & {
+        margin-right: 0;
+        margin-left: var(--size-8);
+      }
+    }
+
+    &--end {
+      margin-left: var(--size-4);
+      :dir(rtl) & {
+        margin-left: 0;
+        margin-right: var(--size-4);
+      }
+    }
+  }
+
+  &-content {
+    position: relative;
+
+    &--loading {
+      .wds-Button-label,
+      .wds-Button-media,
+      .wds-Button-icon {
+        visibility: hidden;
+        opacity: 0;
+      }
+    }
+  }
+
+  &-label {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+
+  &-loader {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    .process-circle {
+      stroke: var(--Button-color);
+    }
+  }
+}
+
+/* RTL Styles */
+:dir(rtl) {
+  .wds-Button {
+    .tw-icon-chevron-right,
+    .tw-icon-arrow-right {
+      transform: rotate(180deg);
+    }
+
+    .tw-icon-chevron-left,
+    .tw-icon-arrow-left {
+      transform: rotate(180deg);
+    }
   }
 }
+
+/* Avatar border transparency */
+/* dark buttons get 20% transparency, light buttons get 12% */
+.wds-Button-avatars {
+  .np-circle {
+    --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
+
+    .wds-Button--secondary.wds-Button--negative &,
+    .wds-Button--secondary &,
+    .wds-Button--tertiary &,
+    .wds-Button--minimal & {
+      .np-theme-personal:not(.np-theme-personal--dark, .np-theme-personal--forest-green, .np-theme-personal--bright-green) & {
+        --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+      }
+    }
+    .wds-Button--primary &,
+    .wds-Button--primary.wds-Button--negative & {
+      .np-theme-personal--dark &,
+      .np-theme-personal--forest-green & {
+        --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+      }
+    }
+    .wds-Button--tertiary &,
+    .wds-Button--minimal & {
+      .np-theme-personal--bright-green & {
+        --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+      }
+    }
+  }
+}

package/src/button/Button.resolver.tsx

@@ -0,0 +1,120 @@
+import { forwardRef } from 'react';
+import LegacyButton, { LegacyButtonProps } from './LegacyButton';
+import { ButtonProps as NewButtonProps } from './Button.types';
+import NewButton from './Button';
+
+type LegacyButtonType =
+  | 'accent'
+  | 'negative'
+  | 'positive'
+  | 'primary'
+  | 'pay'
+  | 'secondary'
+  | 'danger'
+  | 'link'
+  | null
+  | undefined;
+
+type NewButtonType = 'button' | 'submit' | 'reset' | LegacyButtonType | undefined;
+
+type CommonButtonProps = {
+  href?: string;
+  target?: string;
+  ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
+};
+
+export type ButtonProps =
+  | (Omit<LegacyButtonProps, 'ref'> &
+      CommonButtonProps & {
+        priority?: LegacyButtonProps['priority'];
+        type?: LegacyButtonType;
+        htmlType?: string;
+        v2?: false;
+      })
+  | (Omit<Omit<NewButtonProps, 'type'>, 'ref'> &
+      CommonButtonProps & {
+        priority?: NewButtonProps['priority'];
+        type?: NewButtonType;
+        v2: true;
+      });
+
+const mapProps = (props: LegacyButtonProps): NewButtonProps => {
+  const { priority, size, type, as, ...newProps } = props;
+
+  const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {
+    accent: {
+      primary: 'primary',
+      secondary: 'tertiary',
+      tertiary: 'minimal',
+    },
+    positive: {
+      primary: 'primary',
+      secondary: 'tertiary',
+      tertiary: 'tertiary',
+    },
+    negative: {
+      primary: 'primary',
+      secondary: 'secondary',
+      tertiary: 'secondary',
+    },
+  };
+
+  const mappedPriority =
+    type && priority ? priorityMapping[type]?.[priority] || priority : priority || undefined;
+  const mappedSentiment = type === 'negative' ? 'negative' : undefined;
+
+  const legacyButtonTypes: LegacyButtonType[] = [
+    'accent',
+    'negative',
+    'positive',
+    'primary',
+    'pay',
+    'secondary',
+    'danger',
+    'link',
+  ];
+
+  const resolveSize = () => {
+    if (size) {
+      return { xs: 'sm', sm: 'sm', md: 'md', lg: 'lg' }[size] || size;
+    }
+
+    return size;
+  };
+
+  return {
+    ...newProps,
+    size: resolveSize(),
+    priority: mappedPriority,
+    sentiment: mappedSentiment || ('sentiment' in props ? props.sentiment : null),
+    type:
+      type && !legacyButtonTypes.includes(type as LegacyButtonType) ? type : props.htmlType || null,
+    href: as === 'a' ? props.href || '' : null,
+  } as NewButtonProps;
+};
+
+const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>((props, ref) => {
+  const { v2 = false, as, ...rest } = props;
+
+  if (v2) {
+    const mappedProps = mapProps(props as LegacyButtonProps);
+    return (
+      <NewButton
+        {...mappedProps}
+        ref={ref as React.Ref<HTMLButtonElement | HTMLAnchorElement>}
+        as={as}
+      />
+    );
+  }
+
+  return (
+    <LegacyButton
+      {...(rest as LegacyButtonProps)}
+      ref={ref as React.Ref<HTMLButtonElement | HTMLAnchorElement>}
+    />
+  );
+});
+
+Button.displayName = 'Button';
+
+export default Button;