@transferwise/components 0.0.0-experimental-a9e2e05 → 0.0.0-experimental-ca51404

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

@@ -1,221 +0,0 @@
-@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

@@ -1,57 +0,0 @@
-: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

@@ -1,65 +0,0 @@
-: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

@@ -1,116 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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' | undefined;
-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' | undefined;
-
-  /** 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

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