@transferwise/components 0.0.0-experimental-75fc27b → 0.0.0-experimental-8a932bb

package/src/button/Button/less/Button.less

@@ -0,0 +1,221 @@
+@import './Button.vars.less';
+  
+/* Button Styles */
+.wds-Button {
+  display: inline-flex;
+  flex: none;
+  width: auto;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  font-weight: var(--Button-font-weight);
+  font-size: var(--Button-font-size);
+  letter-spacing: var(--Button-letter-spacing);
+  line-height: var(--Button-line-height);
+  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);
+  
+  &:focus {
+    text-decoration: none;
+  }
+
+  &:hover {
+    background-color: var(--Button-background-hover);
+    text-decoration: none;
+  }
+
+  &:active {
+    background-color: var(--Button-background-active);
+    text-decoration: none;
+  }
+
+  &: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-hover-background);
+    --Button-background-active: var(--Button-secondary-active-background);
+    --Button-color: var(--Button-secondary-color);
+  }
+
+  &--tertiary {
+    --Button-background: var(--Button-tertiary-background);
+    --Button-background-hover: var(--Button-tertiary-hover-background);
+    --Button-background-active: var(--Button-tertiary-active-background);
+    --Button-color: var(--Button-tertiary-color);
+
+    .wds-Button-icon--right {
+      color: var(--color-interactive-primary);
+    }
+  }
+
+  &--minimal {
+    --Button-background: var(--Button-minimal-background);
+    --Button-background-hover: var(--Button-minimal-hover-background);
+    --Button-background-active: var(--Button-minimal-active-background);
+    --Button-color: var(--Button-minimal-color);
+
+    text-decoration: underline;
+
+    &: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-hover-background);
+      --Button-background-active: var(--Button-primary-negative-active-background);
+      --Button-color: var(--Button-primary-negative-color);
+      --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
+    }
+
+    &.wds-Button--secondary {
+      --Button-background: var(--Button-secondary-negative-background);
+      --Button-background-hover: var(--Button-secondary-negative-hover-background);
+      --Button-background-active: var(--Button-secondary-negative-active-background);
+      --Button-color: var(--Button-secondary-negative-color);
+      --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
+    }
+  }
+
+  // Size modifiers
+  &--small {
+    --Button-padding: var(--Button-size-small-padding);
+    --Button-line-height: 22px;
+    --Button-font-size: var(--font-size-14);
+    --Button-letter-spacing: -0.006em;
+
+    .wds-Button-icon--left {
+      margin-right: var(--size-4);
+      :dir(rtl) & {
+        margin-right: 0;
+        margin-left: var(--size-4);
+      }
+    }
+  }
+
+  &--medium {
+    --Button-padding: var(--Button-size-medium-padding);
+  }
+
+  &--large {
+    --Button-padding: var(--Button-size-large-padding);
+  }
+
+  // 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-circle {
+      --circle-border-color: var(--Button-avatar-border-color);
+    }
+
+    .np-avatar-view .np-avatar-view-content {
+      color: var(--Button-color);
+    }
+  }
+
+  // Icon styles
+  &-icon {
+    display: inline-block;
+
+    &--left {
+      margin-right: var(--size-8);
+      :dir(rtl) & {
+        margin-right: 0;
+        margin-left: var(--size-8);
+      }
+    }
+
+    &--right {
+      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);
+    }
+  }
+}

package/src/button/Button/less/Button.vars.css

@@ -0,0 +1,57 @@
+:root {
+  --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-font-size: var(--font-size-16);
+  --Button-line-height: var(--size-24);
+  --Button-font-weight: var(--font-weight-semi-bold);
+  --Button-letter-spacing: -0.011em;
+  --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-avatar-border-color: var(--color-border-neutral);
+  --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-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
+  --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);
+  --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
+}
+.np-theme-personal--dark {
+  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
+}
+.np-theme-personal--forest-green {
+  --color-interactive-neutral: rgba(159,232,112,0.2);
+  --color-interactive-neutral-hover: rgba(205,255,173,0.2);
+  --color-interactive-neutral-active: rgba(236,255,224,0.2);
+  --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
+  --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
+  --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
+  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
+  --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
+}
+.np-theme-personal--bright-green {
+  --color-contrast: #FFFFFF;
+  --Button-secondary-color: var(--color-interactive-control);
+  --Button-secondary-negative-color: var(--color-contrast);
+  --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
+}

package/src/button/Button/less/Button.vars.less

@@ -0,0 +1,65 @@
+:root {
+  --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-font-size: var(--font-size-16);
+  --Button-line-height: var(--size-24);
+  --Button-font-weight: var(--font-weight-semi-bold);
+  --Button-letter-spacing: -0.011em;
+  --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-avatar-border-color: var(--color-border-neutral);
+
+  --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-primary-netative-avatar-border-color: #FFFFFF33;
+
+  --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);
+  --Button-secondary-netative-avatar-border-color: #A8200D1F;
+}
+
+.np-theme-personal--dark {
+  --Button-primary-netative-avatar-border-color: #0E0F0C1F;
+}
+
+.np-theme-personal--forest-green {
+  --color-interactive-neutral: #9FE87033;
+  --color-interactive-neutral-hover: #CDFFAD33;
+  --color-interactive-neutral-active: #ECFFE033;
+  --color-sentiment-negative-secondary: #FFC4C233;
+  --color-sentiment-negative-secondary-hover: #FFDCDB33;
+  --color-sentiment-negative-secondary-active: #FFEBEB33;
+  --Button-primary-netative-avatar-border-color: #0E0F0C1F;
+  --Button-secondary-netative-avatar-border-color: #0E0F0C1F;
+}
+
+.np-theme-personal--bright-green {
+  --color-contrast: #FFFFFF;
+  --Button-secondary-color: var(--color-interactive-control);
+  --Button-secondary-negative-color: var(--color-contrast);
+  --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
+}

package/src/button/Button/src/Button.tsx

@@ -0,0 +1,116 @@
+import React, { forwardRef, useMemo } from 'react';
+import { clsx } from 'clsx';
+import type { ButtonProps } from './Button.types';
+import PrimitiveButton from '../../../primitives/PrimitiveButton';
+import PrimitiveAnchor from '../../../primitives/PrimitiveAnchor';
+import ProcessIndicator from '../../../processIndicator/ProcessIndicator';
+import AvatarView from '../../../avatarView/AvatarView';
+import AvatarLayout from '../../../avatarLayout/AvatarLayout';
+
+const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
+  (
+    {
+      as = 'button',
+      children,
+      className,
+      size = 'md',
+      href,
+      priority = 'primary',
+      appearance = 'default',
+      iconLeft: LeftIcon,
+      iconRight: RightIcon,
+      avatars,
+      type = 'button',
+      loading = false,
+      block = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const sizeClass = useMemo(() => {
+      return size === 'sm' ? 'small' : size === 'md' ? 'medium' : size === 'lg' ? 'large' : '';
+    }, [size]);
+
+    const classNames = clsx(
+      {
+        [`wds-Button`]: as === 'a',
+        [`wds-Button--block`]: block,
+        [`wds-Button--${sizeClass}`]: size,
+        [`wds-Button--${priority}`]: priority,
+        [`wds-Button--${appearance}`]: appearance,
+      },
+      className,
+    );
+
+    const contentClassNames = clsx('wds-Button-content', {
+      [`wds-Button-content--loading`]: loading,
+    });
+
+    const content = (
+      <span className={contentClassNames}>
+        {loading && (
+          <ProcessIndicator
+            size="xs"
+            className="wds-Button-loader"
+            data-testid="button-loader-indicator"
+          />
+        )}
+        <span className="wds-Button-label" aria-hidden={loading}>
+          {size === 'lg' ? (
+            children
+          ) : (
+            <>
+              {size === 'md' && avatars && (
+                <span className="wds-Button-avatars">
+                  {avatars.length === 1 ? (
+                    <AvatarView size={24} {...avatars[0]}>
+                      {avatars[0]?.asset}
+                    </AvatarView>
+                  ) : (
+                    <AvatarLayout orientation="horizontal" avatars={avatars} size={24} />
+                  )}
+                </span>
+              )}
+              {!avatars && LeftIcon && (
+                <LeftIcon className="wds-Button-icon wds-Button-icon--left" />
+              )}
+              {children}
+              {RightIcon && <RightIcon className="wds-Button-icon wds-Button-icon--right" />}
+            </>
+          )}
+        </span>
+      </span>
+    );
+
+    if (as === 'a') {
+      return (
+        <PrimitiveAnchor
+          ref={ref as React.Ref<HTMLAnchorElement>}
+          {...(props as any)}
+          href={href}
+          className={classNames}
+          disabled={props.disabled}
+        >
+          {content}
+        </PrimitiveAnchor>
+      );
+    }
+
+    return (
+      <PrimitiveButton
+        ref={ref as React.Ref<HTMLButtonElement>}
+        {...(props as any)}
+        className={classNames}
+        disabled={props.disabled}
+        loading={loading}
+        type={type}
+      >
+        {content}
+      </PrimitiveButton>
+    );
+  },
+);
+
+Button.displayName = 'Button';
+
+export default Button;

package/src/button/Button/src/Button.types.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+import type {
+  PrimitiveButtonProps,
+  PrimitiveAnchorProps,
+  PrimitiveButtonElementRef,
+  PrimitiveAnchorElementRef,
+} from '../../../primitives';
+import type { SingleAvatarType } from '../../../avatarLayout';
+
+export type ButtonApperance = 'default' | 'negative';
+export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonRefType = PrimitiveButtonElementRef | PrimitiveAnchorElementRef;
+
+/**
+ * Common properties for the Button component.
+ */
+export interface CommonButtonProps {
+  /** The HTML element to render */
+  as?: 'button' | 'a';
+
+  /** Additional class name(s) to apply to the button */
+  className?: string;
+
+  /** Content to be displayed inside the button */
+  children?: ReactNode;
+
+  /** Whether the button is disabled */
+  disabled?: boolean;
+
+  href?: string;
+
+  /** Whether the button is in a loading state */
+  loading?: boolean;
+
+  /** Whether the button should take up the full width of its container */
+  block?: boolean;
+
+  /** Size of the button */
+  size?: ButtonSize;
+
+  /**
+   * Priority of the button
+   * @default 'primary'
+   */
+  priority?: ButtonPriority;
+
+  /**
+   * Appearance of the button
+   * @default 'default'
+   */
+  appearance?: ButtonApperance;
+
+  /** Icon to be displayed on the left side of the button */
+  iconLeft?: React.ElementType;
+
+  /** Icon to be displayed on the right side of the button */
+  iconRight?: React.ElementType;
+
+  /** Media to be displayed on the left side of the button */
+  avatars?: SingleAvatarType[];
+
+  /** Optional property to provide component Ref */
+  ref?: ButtonRefType;
+}
+
+export type ButtonElementProps = PrimitiveButtonProps & CommonButtonProps;
+export type AnchorElementProps = PrimitiveAnchorProps & CommonButtonProps;
+export type ButtonProps = ButtonElementProps | AnchorElementProps;

package/src/button/Button/src/index.ts

@@ -0,0 +1 @@
+export { default } from './Button';