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

package/src/avatarLayout/AvatarLayout.tsx

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

package/src/avatarLayout/index.ts

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

package/src/avatarWrapper/AvatarWrapper.story.tsx

@@ -11,8 +11,6 @@ export default {
 
 type Story = StoryObj<typeof AvatarWrapper>;
 
-export const Basic: Story = {}
-
 export const All: Story = {
   args: {
     avatarProps: { outlined: true },

package/src/button/{LegacyButton/Button.less → Button.less}

@@ -1,4 +1,4 @@
-@import (reference) "../../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
 
 .np-btn {
   position: relative;

package/src/button/{LegacyButton/Button.spec.tsx → Button.spec.tsx}

@@ -1,10 +1,10 @@
 import { createRef } from 'react';
 
-import { ControlType, Type, Priority, Size } from '../../common';
-import { render, screen, userEvent } from '../../test-utils';
+import { ControlType, Type, Priority, Size } from '../common';
+import { render, screen, userEvent } from '../test-utils';
 
 import Button from '.';
-import messages from '../../i18n/commonMessages/Button.messages';
+import messages from '../i18n/commonMessages/Button.messages';
 import { ButtonReferenceType } from './Button';
 
 const { ACCENT, POSITIVE, NEGATIVE } = ControlType;

package/src/button/Button.story.tsx

@@ -0,0 +1,163 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within, fn } from '@storybook/test';
+
+import { ControlType, Priority } from '../common';
+import { storyConfig } from '../test-utils';
+
+import Button from './Button';
+
+export default {
+  component: Button,
+  title: 'Actions/Button',
+  args: {
+    children: 'Button text',
+    loading: false,
+    onClick: fn(),
+    onBlur: fn(),
+    onFocus: fn(),
+  },
+  argTypes: {
+    as: {
+      type: {
+        name: 'enum',
+        value: ['button', 'a'],
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {};
+
+export const Focused = storyConfig<Story>(
+  {
+    parameters: {
+      chromatic: {
+        delay: 1000,
+      },
+    },
+    play: async ({ canvasElement }) => {
+      const canvas = within(canvasElement);
+      await userEvent.click(canvas.getByRole('button'));
+    },
+  },
+  {
+    variants: ['dark'],
+  },
+);
+
+export const Variants = storyConfig<Story>(
+  {
+    render: (args) => {
+      return (
+        <>
+          <div className="m-b-2">
+            <div className="title-4 m-b-1">Accent</div>
+            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
+              <Button {...args} priority={Priority.PRIMARY} type={ControlType.ACCENT} />
+              <Button {...args} priority={Priority.SECONDARY} type={ControlType.ACCENT} />
+              <Button {...args} priority={Priority.TERTIARY} type={ControlType.ACCENT} />
+            </div>
+          </div>
+          <div className="m-b-2">
+            <div className="title-4 m-b-1">Positive</div>
+            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
+              <Button {...args} priority={Priority.PRIMARY} type={ControlType.POSITIVE} />
+              <Button {...args} priority={Priority.SECONDARY} type={ControlType.POSITIVE} />
+            </div>
+          </div>
+          <div className="m-b-2">
+            <div className="title-4 m-b-1">Negative</div>
+            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
+              <Button {...args} priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
+              <Button {...args} priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
+            </div>
+          </div>
+          <div className="m-b-2">
+            <div className="title-4 m-b-1">Disabled</div>
+            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
+              <Button {...args} priority={Priority.PRIMARY} disabled />
+              <Button {...args} priority={Priority.SECONDARY} disabled />
+              <Button {...args} priority={Priority.TERTIARY} disabled />
+            </div>
+          </div>
+        </>
+      );
+    },
+  },
+  { variants: ['default', 'dark', 'rtl'] },
+);
+
+/**
+ * The purpose of the `loading` mode is to convey a message to the
+ * user that some asynchronous process has been triggered, likely
+ * in response to their previous action.
+ *
+ * Although it carries some similarities with the `disabled` mode
+ * (users cannot activate a loading button), it's not hidden from
+ * the keyboard and assistive tech users (users can focus on it,
+ * and it's announced by screen readers), and is also much more
+ * accessible to sighted users due to its default, high contrast.
+ */
+export const Loading = storyConfig<Story>(
+  {
+    render: (args) => {
+      return (
+        <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
+          <Button {...args} loading priority={Priority.PRIMARY} />
+          <Button {...args} loading priority={Priority.SECONDARY} />
+          <Button {...args} loading priority={Priority.TERTIARY} />
+          <Button {...args} loading priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
+          <Button {...args} loading priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
+        </div>
+      );
+    },
+    args: {
+      loading: true,
+    },
+  },
+  { variants: ['default', 'dark', 'rtl'] },
+);
+
+export const SocialMedia = storyConfig<Story>(
+  {
+    render: () => {
+      return (
+        <>
+          <div className="m-b-2">
+            <button type="button" className="btn btn-google">
+              Login with Google
+            </button>
+          </div>
+          <div className="m-b-2">
+            <button type="button" className="btn btn-facebook">
+              Login with Facebook
+            </button>
+          </div>
+          <div className="m-b-2">
+            <button type="button" className="btn btn-lg btn-facebook">
+              Large Button
+            </button>
+          </div>
+          <div className="m-b-2">
+            <button type="button" className="btn btn-block btn-facebook">
+              Block Button
+            </button>
+          </div>
+          <div className="m-b-2">
+            <button type="button" className="btn btn-lg btn-block btn-facebook">
+              Large Block Button
+            </button>
+          </div>
+        </>
+      );
+    },
+  },
+  { variants: ['default', 'dark', 'rtl'] },
+);
+
+export const SocialMediaMobile = storyConfig<Story>(SocialMedia, {
+  variants: ['default', 'dark', 'rtl', 'mobile'],
+});

package/src/button/{LegacyButton/Button.tsx → Button.tsx}

@@ -16,10 +16,10 @@ import {
   SizeSmall,
   SizeMedium,
   SizeLarge,
-} from '../../common';
-import ProcessIndicator from '../../processIndicator';
+} from '../common';
+import ProcessIndicator from '../processIndicator';
 
-import messages from '../../i18n/commonMessages/Button.messages';
+import messages from '../i18n/commonMessages/Button.messages';
 import { typeClassMap, priorityClassMap } from './classMap';
 import { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';
 
@@ -33,23 +33,20 @@ type CommonProps = {
   block?: boolean;
   disabled?: boolean;
   loading?: boolean;
-  /** @deprecated */
   type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;
   priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;
   size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
 };
 
-export type ButtonProps = CommonProps &
+type ButtonProps = CommonProps &
   Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
-    as?: 'button' | undefined;
-    /** @deprecated */
+    as?: 'button';
     htmlType?: 'submit' | 'reset' | 'button';
   };
 
-export type AnchorProps = CommonProps &
+type AnchorProps = CommonProps &
   Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
-    as?: 'a' | undefined;
-    href?: string;
+    as?: 'a';
   };
 
 export type Props = ButtonProps | AnchorProps;
@@ -71,7 +68,7 @@ const Button = forwardRef<ButtonReferenceType, Props>(
       onClick,
       ...rest
     }: Props,
-    ref,
+    reference,
   ) => {
     const intl = useIntl();
 
@@ -135,7 +132,7 @@ const Button = forwardRef<ButtonReferenceType, Props>(
 
     return (
       <Element
-        ref={ref}
+        ref={reference}
         className={classes}
         onClick={handleClick(onClick)}
         {...props}
@@ -156,6 +153,4 @@ const Button = forwardRef<ButtonReferenceType, Props>(
   },
 );
 
-Button.displayName = 'Button';
-
 export default Button;

package/src/button/{LegacyButton/classMap.ts → classMap.ts}

@@ -1,4 +1,4 @@
-import { ControlType, Priority } from '../../common';
+import { ControlType, Priority } from '../common';
 
 export const typeClassMap = {
   [ControlType.ACCENT]: 'btn-accent',

package/src/button/index.ts

@@ -1,2 +1,3 @@
-export { default } from './src';
-export * from './src';
+export { default } from './Button';
+
+export type { Props as ButtonProps } from './Button';

package/src/button/{LegacyButton/legacyUtils → legacyUtils}/legacyUtils.spec.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
-import { ControlType, Priority, Size, Type } from '../../../common';
-import { cleanup } from '../../../test-utils';
+import { ControlType, Priority, Size, Type } from '../../common';
+import { cleanup } from '../../test-utils';
 
 import { establishNewPriority, establishNewType, logDeprecationNotices } from '.';
 

package/src/button/{LegacyButton/legacyUtils → legacyUtils}/legacyUtils.ts

@@ -1,5 +1,5 @@
-import { ControlType, Priority, Size, Type } from '../../../common';
-import { logActionRequired, logActionRequiredIf } from '../../../utilities';
+import { ControlType, Priority, Size, Type } from '../../common';
+import { logActionRequired, logActionRequiredIf } from '../../utilities';
 
 const deprecatedTypeMap: Record<Type, ControlType> = {
   [Type.PRIMARY]: ControlType.ACCENT,

package/src/circularButton/CircularButton.tsx

@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
 import { cloneElement } from 'react';
 
 import Body from '../body/Body';
-import { typeClassMap, priorityClassMap } from '../button/LegacyButton/classMap';
+import { typeClassMap, priorityClassMap } from '../button/classMap';
 import { Breakpoint, ControlType, Priority, Typography } from '../common';
 import Circle from '../common/circle';
 import { useMedia } from '../common/hooks/useMedia';

package/src/common/action/Action.tsx

@@ -22,7 +22,7 @@ export function Action({ action, className, variant = 'button' }: Props) {
   if ('href' in action) {
     return (
       <Link
-        href={action.href ?? ''}
+        href={action.href}
         className={className}
         aria-label={action['aria-label']}
         target={action.target}

package/src/iconButton/IconButton.css

@@ -2,72 +2,77 @@
   border: none;
 }
 .np-icon-button-tertiary-default {
-  --Button-color: var(--color-interactive-primary);
-  --Button-background: var(--color-background-neutral);
+  color: var(--color-interactive-primary);
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
 }
 .np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-background-neutral-hover);
+  background-color: var(--color-background-neutral-hover);
 }
 .np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-background-neutral-active);
+  background-color: var(--color-background-neutral-active);
 }
 .np-icon-button-primary-default {
-  --Button-color: var(--color-interactive-control);
-  --Button-background: var(--color-interactive-accent);
+  color: var(--color-interactive-control);
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-interactive-accent-hover);
+  background-color: #008fc9;
+  background-color: var(--color-interactive-accent-hover);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-interactive-accent-active);
+  background-color: #0081ba;
+  background-color: var(--color-interactive-accent-active);
 }
 .np-icon-button-primary-negative {
-  --Button-color: var(--color-contrast-overlay);
-  --Button-background: var(--color-sentiment-negative-primary);
+  color: var(--color-contrast-overlay);
+  background-color: var(--color-sentiment-negative-primary);
 }
 .np-icon-button-primary-negative:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-sentiment-negative-primary-hover);
+  background-color: var(--color-sentiment-negative-primary-hover);
 }
 .np-icon-button-primary-negative:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-sentiment-negative-primary-active);
+  background-color: var(--color-sentiment-negative-primary-active);
 }
 .np-theme-personal--bright-green .np-icon-button-primary-negative {
   color: var(--color-white);
 }
 .np-icon-button-minimal-default {
-  --Button-color: var(--color-interactive-primary);
-  --Button-background: var(--color-background-screen);
+  color: var(--color-interactive-primary);
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
   background-color: transparent;
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-background-screen-hover);
+  background-color: var(--color-background-screen-hover);
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-background-screen-active);
+  background-color: var(--color-background-screen-active);
 }
 .np-icon-button-secondary-default {
-  --Button-color: var(--color-interactive-primary);
-  --Button-background: var(--color-interactive-neutral);
+  color: var(--color-interactive-primary);
+  background-color: var(--color-interactive-neutral);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-interactive-neutral-hover);
+  background-color: var(--color-interactive-neutral-hover);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-interactive-neutral-active);
+  background-color: var(--color-interactive-neutral-active);
 }
 .np-theme-personal--bright-green .np-icon-button-secondary-default,
 .np-theme-personal--forest-green .np-icon-button-secondary-default {
   color: var(--color-interactive-control);
 }
 .np-icon-button-secondary-negative {
-  --Button-color: var(--color-sentiment-negative-primary);
-  --Button-background: var(--color-sentiment-negative-secondary);
+  color: var(--color-sentiment-negative-primary);
+  background-color: var(--color-sentiment-negative-secondary);
 }
 .np-icon-button-secondary-negative:not(.disabled):not(:disabled):hover {
-  --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
+  background-color: var(--color-sentiment-negative-secondary-hover);
 }
 .np-icon-button-secondary-negative:not(.disabled):not(:disabled):active {
-  --Button-background-active: var(--color-sentiment-negative-secondary-active);
+  background-color: var(--color-sentiment-negative-secondary-active);
 }
 .np-theme-personal--bright-green .np-icon-button-secondary-negative {
   color: var(--color-white);

package/src/iconButton/IconButton.less

@@ -42,14 +42,14 @@
   }
 
   .colors(@icon-color, @bg-color) {
-    --Button-color: var(@icon-color);
-    --Button-background: var(@bg-color);
+    color: var(@icon-color);
+    background-color: var(@bg-color);
 
     &:not(.disabled, :disabled):hover {
-      --Button-background-hover:~"var(@{bg-color}-hover)";
+      background-color:~"var(@{bg-color}-hover)";
     }
     &:not(.disabled, :disabled):active {
-      --Button-background-active:~"var(@{bg-color}-active)";
+      background-color:~"var(@{bg-color}-active)";
     }
   }
 }

package/src/link/Link.tsx

@@ -1,14 +1,13 @@
 import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
+import { AnchorHTMLAttributes } from 'react';
 import { useIntl } from 'react-intl';
-import { PrimitiveAnchor } from '../primitives';
-import type { PrimitiveAnchorProps } from '../primitives';
 
 import { LinkLarge, LinkDefault } from '../common';
 
 import messages from './Link.messages';
 
-export type Props = PrimitiveAnchorProps & { type?: LinkLarge | LinkDefault };
+export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge | LinkDefault };
 
 /**
  * Standard Link component with navigate away icon
@@ -25,30 +24,22 @@ const Link = ({
   onClick,
   ...props
 }: Props) => {
-  const { formatMessage } = useIntl();
   const isBlank = target === '_blank';
 
-  const classNames = clsx(
-    'np-link',
-    'd-inline-flex',
-    {
-      [`np-text-${type}`]: type,
-    },
-    className,
-  );
+  const { formatMessage } = useIntl();
 
   return (
-    <PrimitiveAnchor
+    <a
       href={href}
       target={target}
-      className={classNames}
+      className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}
       aria-label={ariaLabel}
       rel={isBlank ? 'noreferrer' : undefined}
       onClick={onClick}
       {...props}
     >
       {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}
-    </PrimitiveAnchor>
+    </a>
   );
 };