@transferwise/components 46.85.0 → 46.86.0

package/src/avatar/Avatar.story.tsx

@@ -7,6 +7,9 @@ import { storyConfig } from '../test-utils';
 
 import Avatar, { AvatarType } from '.';
 
+/**
+ * @deprecated use **`AvatarView`** components instead
+ */
 export default {
   component: Avatar,
   title: 'Content/Avatar',
@@ -45,7 +48,7 @@ export const Table: Story = storyConfig(
       const backgroundColor = '#d6f5e3';
       const emoji = '✈️';
       const initials = 'GN';
-      const Icon = wiseIcons['Check'];
+      const Icon = wiseIcons.Check;
 
       return (
         <div>

package/src/avatarLayout/AvatarLayout.story.tsx

@@ -197,8 +197,10 @@ export const EdgeInstances: Story = {
       <AvatarLayout orientation="diagonal" avatars={[{}]} />
 
       <AvatarLayout orientation="diagonal" avatars={[{ profileName: 'Jay Jay' }]} />
+      <AvatarLayout orientation="diagonal" size={16} avatars={[{ profileName: 'Jay Jay' }]} />
 
       <AvatarLayout orientation="diagonal" avatars={[{ asset: <Flag code="gb" /> }]} />
+      <AvatarLayout orientation="diagonal" size={24} avatars={[{ asset: <Flag code="gb" /> }]} />
 
       <AvatarLayout
         orientation="diagonal"

package/src/avatarLayout/AvatarLayout.tsx

@@ -27,7 +27,9 @@ export default function AvatarLayout({
   const isDiagonal = orientation === 'diagonal';
   const avatarSize = isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size]?.avatarSize : size;
   return avatars.length < 1 ? null : avatars.length === 1 ? (
-    <AvatarView {...avatars[0]}>{avatars[0].asset}</AvatarView>
+    <AvatarView {...avatars[0]} size={size}>
+      {avatars[0].asset}
+    </AvatarView>
   ) : (
     <div
       className={clsx('np-avatar-layout', `np-avatar-layout-${orientation}`, className)}

package/src/avatarWrapper/AvatarWrapper.story.tsx

@@ -4,7 +4,11 @@ import { ProfileType, Sentiment } from '../common';
 
 import AvatarWrapper from './AvatarWrapper';
 
+/**
+ * @deprecated use **`AvatarView`** components instead
+ */
 export default {
+  tags: ['autodocs'],
   component: AvatarWrapper,
   title: 'Content/AvatarWrapper',
 } satisfies Meta<typeof AvatarWrapper>;

package/src/badge/Badge.story.tsx

@@ -5,7 +5,11 @@ import { Size, Theme } from '../common';
 
 import Badge from './Badge';
 
+/**
+ * @deprecated use **`<AvatarView badge={..} />`** components instead
+ */
 export default {
+  tags: ['autodocs'],
   component: Badge,
   title: 'Content/Badge',
   excludeStories: ['ExampleBadgeCss'],

package/src/circularButton/CircularButton.css

@@ -2,173 +2,32 @@
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  text-align: center;
   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: 12px;
-    top: var(--size-12);
-  }
-}
-.np-circular-btn .tw-icon > svg {
-  margin: 0 auto;
-}
-.np-theme-personal .np-circular-btn {
-  /* stylelint-disable-next-line no-duplicate-selectors */
-}
-.np-theme-personal .np-circular-btn .tw-icon,
-.np-theme-personal .np-circular-btn .tw-icon:hover,
-.np-theme-personal .np-circular-btn .tw-icon:active {
-  color: var(--color-interactive-control);
-}
-.np-theme-personal .np-circular-btn.negative .tw-icon,
-.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):active .tw-icon {
-  color: var(--color-contrast) !important;
-}
-.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled) .tw-icon {
-  color: var(--color-sentiment-negative) !important;
-}
-.np-circular-btn.accent .np-circular-btn__label {
-  color: #00a2dd;
-  color: var(--color-interactive-accent);
-}
-.np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: #008fc9;
-  color: var(--color-interactive-accent-hover);
-}
-.np-circular-btn.accent:active .np-circular-btn__label,
-.np-circular-btn.accent input[type="button"]:active ~ .np-circular-btn__label {
-  color: #0081ba;
-  color: var(--color-interactive-accent-active);
-}
-.np-circular-btn.accent.secondary .tw-icon {
-  color: #00a2dd;
-  color: var(--color-interactive-accent);
-}
-.np-circular-btn.accent.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-circular-btn.accent.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-}
-.np-circular-btn.positive .np-circular-btn__label {
-  color: #2ead4b;
-  color: var(--color-interactive-positive);
-}
-.np-circular-btn.positive:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: #069939;
-  color: var(--color-interactive-positive-hover);
-}
-.np-circular-btn.positive:active .np-circular-btn__label,
-.np-circular-btn.positive input[type="button"]:active ~ .np-circular-btn__label {
-  color: #008b2b;
-  color: var(--color-interactive-positive-active);
-}
-.np-circular-btn.positive.secondary .tw-icon {
-  color: #2ead4b;
-  color: var(--color-interactive-positive);
-}
-.np-circular-btn.positive.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-circular-btn.positive.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-}
-.np-circular-btn.negative .np-circular-btn__label {
-  color: #e74848;
-  color: var(--color-interactive-negative);
-}
-.np-circular-btn.negative:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: #d03238;
-  color: var(--color-interactive-negative-hover);
-}
-.np-circular-btn.negative:active .np-circular-btn__label,
-.np-circular-btn.negative input[type="button"]:active ~ .np-circular-btn__label {
-  color: #bf1e2c;
-  color: var(--color-interactive-negative-active);
-}
-.np-circular-btn.negative.secondary .tw-icon {
-  color: #e74848;
-  color: var(--color-interactive-negative);
-}
-.np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-circular-btn.negative.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-}
-.np-theme-personal .np-circular-btn.accent .np-circular-btn__label {
+.np-circular-btn-primary-default .np-circular-btn-label,
+.np-circular-btn-secondary-default .np-circular-btn-label {
   color: var(--color-interactive-primary);
 }
-.np-theme-personal .np-circular-btn.accent:not(.disabled):not(:disabled):hover .np-circular-btn__label {
+.np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,
+.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover {
   color: var(--color-interactive-primary-hover);
 }
-.np-theme-personal .np-circular-btn.accent:active .np-circular-btn__label,
-.np-theme-personal .np-circular-btn.accent input[type="button"]:active ~ .np-circular-btn__label {
+.np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):active,
+.np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):active {
   color: var(--color-interactive-primary-active);
 }
-.np-theme-personal .np-circular-btn.accent.secondary .tw-icon {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-circular-btn.accent.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-theme-personal .np-circular-btn.accent.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-  color: var(--color-interactive-control);
-}
-.np-theme-personal .np-circular-btn.accent.secondary:active input[type="button"] + .tw-icon {
-  color: var(--color-interactive-control);
-}
-.np-theme-personal .np-circular-btn.positive .np-circular-btn__label {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-circular-btn.positive:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: var(--color-interactive-primary-hover);
-}
-.np-theme-personal .np-circular-btn.positive:active .np-circular-btn__label,
-.np-theme-personal .np-circular-btn.positive input[type="button"]:active ~ .np-circular-btn__label {
-  color: var(--color-interactive-primary-active);
-}
-.np-theme-personal .np-circular-btn.positive.secondary .tw-icon {
-  color: var(--color-interactive-primary);
-}
-.np-theme-personal .np-circular-btn.positive.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-theme-personal .np-circular-btn.positive.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-  color: var(--color-interactive-control);
-}
-.np-theme-personal .np-circular-btn.positive.secondary:active input[type="button"] + .tw-icon {
-  color: var(--color-interactive-control);
-}
-.np-theme-personal .np-circular-btn.negative .np-circular-btn__label {
-  color: var(--color-sentiment-negative);
-}
-.np-theme-personal .np-circular-btn.negative:not(.disabled):not(:disabled):hover .np-circular-btn__label {
-  color: var(--color-sentiment-negative-hover);
-}
-.np-theme-personal .np-circular-btn.negative:active .np-circular-btn__label,
-.np-theme-personal .np-circular-btn.negative input[type="button"]:active ~ .np-circular-btn__label {
-  color: var(--color-sentiment-negative-active);
+.np-circular-btn-primary-negative .np-circular-btn-label,
+.np-circular-btn-secondary-negative .np-circular-btn-label {
+  color: var(--color-sentiment-negative-primary);
 }
-.np-theme-personal .np-circular-btn.negative.secondary .tw-icon {
-  color: var(--color-sentiment-negative);
+.np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover,
+.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover {
+  color: var(--color-sentiment-negative-primary-hover);
 }
-.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled):hover .tw-icon,
-.np-theme-personal .np-circular-btn.negative.secondary input[type="button"]:active + .tw-icon {
-  color: white;
-  color: var(--color-interactive-control);
+.np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active,
+.np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active {
+  color: var(--color-sentiment-negative-primary-active);
 }
-.np-theme-personal .np-circular-btn.negative.secondary:active input[type="button"] + .tw-icon {
-  color: var(--color-interactive-control);
+.np-circular-btn-disabled {
+  cursor: not-allowed;
 }

package/src/circularButton/CircularButton.less

@@ -1,105 +1,36 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
-@import "./_button-label-states.less";
-
 .np-circular-btn {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
-  text-align: center;
   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);
 
-    @media (--screen-400-zoom) {
-      top: var(--size-12);
-    }
-
-    > svg {
-      margin: 0 auto;
+  &-primary-default,
+  &-secondary-default {
+    .np-circular-btn-label {
+      color: var(--color-interactive-primary);
+      &:not(.disabled, :disabled):hover {
+        color: var(--color-interactive-primary-hover);
+      }
+      &:not(.disabled, :disabled):active {
+        color: var(--color-interactive-primary-active);
+      }
     }
   }
 
-  .np-theme-personal & {
-    /* stylelint-disable-next-line no-duplicate-selectors */
-    .tw-icon {
-      &,
-      &:hover,
-      &:active {
-        color: var(--color-interactive-control);
+  &-primary-negative,
+  &-secondary-negative {
+    .np-circular-btn-label {
+      color: var(--color-sentiment-negative-primary);
+      &:not(.disabled, :disabled):hover {
+        color: var(--color-sentiment-negative-primary-hover);
+      }
+      &:not(.disabled, :disabled):active {
+        color: var(--color-sentiment-negative-primary-active);
       }
-    }
-
-    &.negative .tw-icon,
-    &.negative.secondary:not(.disabled, :disabled):hover .tw-icon,
-    &.negative.secondary:not(.disabled, :disabled):active .tw-icon {
-      // TODO, this will need to be removed when we update our CSS architecture
-      color: var(--color-contrast) !important;
-    }
-
-    &.negative.secondary:not(.disabled, :disabled) .tw-icon {
-      // TODO, this will need to be removed when we update our CSS architecture
-      color: var(--color-sentiment-negative) !important;
     }
   }
-}
-
-.button-label-states(
-  np-circular-btn,
-  accent,
-  var(--color-interactive-accent),
-  var(--color-interactive-accent-hover),
-  var(--color-interactive-accent-active)
-);
-
-.button-label-states(
-  np-circular-btn,
-  positive,
-  var(--color-interactive-positive),
-  var(--color-interactive-positive-hover),
-  var(--color-interactive-positive-active)
-);
 
-.button-label-states(
-  np-circular-btn,
-  negative,
-  var(--color-interactive-negative),
-  var(--color-interactive-negative-hover),
-  var(--color-interactive-negative-active)
-);
-
-.np-theme-personal {
-  .button-label-states(
-    np-circular-btn,
-    accent,
-    var(--color-interactive-primary),
-    var(--color-interactive-primary-hover),
-    var(--color-interactive-primary-active),
-    true
-  );
-
-  .button-label-states(
-    np-circular-btn,
-    positive,
-    var(--color-interactive-primary),
-    var(--color-interactive-primary-hover),
-    var(--color-interactive-primary-active),
-    true
-  );
-
-  .button-label-states(
-    np-circular-btn,
-    negative,
-    var(--color-sentiment-negative),
-    var(--color-sentiment-negative-hover),
-    var(--color-sentiment-negative-active),
-    true
-  );
+  &-disabled {
+    cursor: not-allowed;
+  }
 }

package/src/circularButton/CircularButton.story.tsx

@@ -5,14 +5,16 @@ import { ControlType, Priority } from '../common';
 import { Meta, StoryObj } from '@storybook/react';
 import CircularButton from './CircularButton';
 import { storyConfig } from '../test-utils';
+import Title from '../title';
+import Body from '../body';
 
 export default {
   component: CircularButton,
   title: 'Actions/CircularButton',
+  tags: ['autodocs'],
   args: {
     children: 'Button text',
-    // Needs to be cast because we're mapping icon names to components
-    icon: 'Freeze' as unknown as React.ReactElement,
+    icon: <Icons.Freeze />,
   },
   argTypes: {
     icon: {
@@ -28,8 +30,8 @@ type Story = StoryObj<typeof CircularButton>;
 
 export const Basic: Story = {
   args: {
-    priority: Priority.PRIMARY,
-    type: ControlType.ACCENT,
+    priority: 'primary',
+    type: 'default',
     disabled: false,
   },
 };
@@ -41,26 +43,45 @@ export const All: Story = {
   render: (props) => {
     return (
       <>
-        <div className="m-b-2">
-          <div className="title-4 m-b-1">Accent</div>
-          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.ACCENT} />
-          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.ACCENT} />
-        </div>
-        <div className="m-b-2">
-          <div className="title-4 m-b-1">Positive</div>
-          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.POSITIVE} />
-          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.POSITIVE} />
-        </div>
-        <div className="m-b-2">
-          <div className="title-4 m-b-1">Negative</div>
-          <CircularButton {...props} priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
-          <CircularButton {...props} priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
-        </div>
-        <div className="m-b-2">
-          <div className="title-4 m-b-1">Disabled</div>
-          <CircularButton {...props} disabled />
-          <CircularButton {...props} priority={Priority.SECONDARY} disabled />
-        </div>
+        <Title type="title-subsection" className="m-y-2">
+          Default (Primary and secondary)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="default" />
+          <CircularButton {...props} priority="secondary" type="default" />
+          <CircularButton {...props} priority="primary" type="default" disabled />
+          <CircularButton {...props} priority="secondary" type="default" disabled />
+        </Body>
+
+        <Title type="title-subsection" className="m-y-2">
+          Negative (Primary and secondary)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="negative" />
+          <CircularButton {...props} priority="secondary" type="negative" />
+          <CircularButton {...props} priority="primary" type="negative" disabled />
+          <CircularButton {...props} priority="secondary" type="negative" disabled />
+        </Body>
+
+        <Title type="title-body" className="m-y-2">
+          Accent (Deprecated)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="accent" />
+          <CircularButton {...props} priority="secondary" type="accent" />
+          <CircularButton {...props} priority="primary" type="accent" disabled />
+          <CircularButton {...props} priority="secondary" type="accent" disabled />
+        </Body>
+
+        <Title type="title-body" className="m-y-2">
+          Positive (Deprecated)
+        </Title>
+        <Body>
+          <CircularButton {...props} priority="primary" type="positive" />
+          <CircularButton {...props} priority="secondary" type="positive" />
+          <CircularButton {...props} priority="primary" type="positive" disabled />
+          <CircularButton {...props} priority="secondary" type="positive" disabled />
+        </Body>
       </>
     );
   },

package/src/circularButton/CircularButton.tsx

@@ -1,20 +1,28 @@
 import { clsx } from 'clsx';
-import { cloneElement } from 'react';
 
 import Body from '../body/Body';
-import { typeClassMap, priorityClassMap } from '../button/classMap';
 import { Breakpoint, ControlType, Priority, Typography } from '../common';
-import Circle from '../common/circle';
+import IconButton, { IconButtonProps } from '../iconButton';
 import { useMedia } from '../common/hooks/useMedia';
 
+/**
+ * @deprecated use `'default'` instead
+ */
+type DeprecatedTypes = `${ControlType.ACCENT | ControlType.POSITIVE}`;
+
 export interface CircularButtonProps {
   className?: string;
   children: string;
   disabled?: boolean;
-  icon: React.ReactElement<{ size?: unknown }>;
-  onClick?: React.MouseEventHandler<HTMLInputElement>;
+  icon: React.ReactElement<{ size?: unknown }> | React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLInputElement> &
+    React.MouseEventHandler<HTMLButtonElement> &
+    React.MouseEventHandler<HTMLAnchorElement>;
   priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;
-  type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;
+  /**
+   * `"accent"` and `"positive"` values are **deprecated**, please use `"default"` instead
+   */
+  type?: DeprecatedTypes | 'default' | `${ControlType.NEGATIVE}`;
 }
 
 const CircularButton = ({
@@ -22,30 +30,35 @@ const CircularButton = ({
   children,
   disabled,
   icon,
+  onClick,
   priority = Priority.PRIMARY,
-  type = ControlType.ACCENT,
-  ...rest
+  type = 'default',
 }: 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="input"
-        // @ts-expect-error it's input[type=button] element
-        type="button"
-        size={isTinyViewport ? 72 : 56}
-        aria-label={children}
-        className={classes}
+    <label
+      className={clsx(
+        'np-circular-btn',
+        `np-circular-btn-${priority}-${type}`,
+        { 'np-circular-btn-disabled': disabled },
+        className,
+      )}
+    >
+      <IconButton
+        size={isTinyViewport ? 32 : 56}
+        priority={priority}
+        type={['accent', 'positive'].includes(type) ? 'default' : (type as IconButtonProps['type'])}
+        className={clsx('m-b-1')}
         disabled={disabled}
-        {...rest}
-      />
-      {iconElement}
-      <Body as="span" className="np-circular-btn__label" type={Typography.BODY_DEFAULT_BOLD}>
+        onClick={onClick}
+      >
+        {icon}
+      </IconButton>
+      <Body
+        as="span"
+        className={clsx('np-circular-btn-label', { disabled })}
+        type={Typography.BODY_DEFAULT_BOLD}
+      >
         {children}
       </Body>
     </label>