@transferwise/components 46.106.0 → 46.108.0

package/src/checkboxOption/CheckboxOption.story.tsx

@@ -5,6 +5,9 @@ import { FastFlag } from '@transferwise/icons';
 import { Nudge, Title, Typography } from '..';
 import CheckboxOption, { type CheckboxOptionProps } from './CheckboxOption';
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Checkbox control](?path=/docs/content-listitem-listitem-checkbox--docs).
+ */
 const meta: Meta<typeof CheckboxOption> = {
   component: CheckboxOption,
   title: 'Option/CheckboxOption',
@@ -13,6 +16,7 @@ const meta: Meta<typeof CheckboxOption> = {
       source: { type: 'dynamic' },
     },
   },
+  tags: ['deprecated'],
 };
 
 export default meta;

package/src/checkboxOption/CheckboxOption.tsx

@@ -15,6 +15,14 @@ export type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {
   onChange?: (value: boolean) => void;
 };
 
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 const CheckboxOption = forwardRef<ReferenceType, CheckboxOptionProps>(
   ({ checked, disabled, onChange, ...rest }, reference) => {
     return (

package/src/header/Header.story.tsx

@@ -98,6 +98,7 @@ export const Playground: Story = {
       'aria-label': 'Action',
       text: 'Click me',
       onClick: () => alert('Action clicked!'),
+      disabled: false,
     },
   },
 };
@@ -133,6 +134,19 @@ export const ActionAsLink: Story = {
   argTypes: hideControls(['as', 'className', 'level', 'title', 'testId']),
 };
 
+export const DisabledAction: Story = {
+  args: {
+    title: 'Header with Disabled Action',
+    action: {
+      'aria-label': 'Disabled action',
+      text: 'Disabled Action',
+      onClick: () => alert('This should not fire!'),
+      disabled: true,
+    },
+  },
+  argTypes: hideControls(['as', 'className', 'level', 'title', 'testId']),
+};
+
 /**
  * Demonstrates a `Header` rendered as a custom HTML element.
  */

package/src/header/Header.tsx

@@ -8,6 +8,7 @@ import React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';
 type ActionProps = AriaLabelProperty & {
   text: string;
   onClick?: (event: React.MouseEvent) => void;
+  disabled?: boolean;
 };
 
 type ButtonActionProps = ActionProps;
@@ -58,6 +59,7 @@ const HeaderAction = React.forwardRef<
       aria-label={action['aria-label']}
       href={'href' in action ? action.href : undefined}
       target={'target' in action ? action.target : undefined}
+      disabled={action.disabled}
       onClick={action.onClick}
     >
       {action.text}

package/src/legacylistItem/LegacyListItem.story.tsx

@@ -8,9 +8,13 @@ import Info from '../info';
 import Title from '../title/Title';
 import LegacyListItem from '.';
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs).
+ */
 export default {
   component: LegacyListItem,
   title: 'Content/LegacyListItem',
+  tags: ['deprecated'],
 };
 
 const Template = ({

package/src/legacylistItem/LegacyListItem.tsx

@@ -13,6 +13,14 @@ export type LegacyListItemProps = {
   as?: ElementType;
 };
 
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 const LegacyListItem: FC<LegacyListItemProps> = ({
   media,
   action,

package/src/link/Link.css

@@ -14,3 +14,10 @@ button.np-link {
   margin-left: 0;
   margin-left: initial;
 }
+.np-link.np-link--disabled,
+.np-link:disabled {
+  filter: none;
+  mix-blend-mode: luminosity;
+  opacity: 0.45;
+  cursor: not-allowed;
+}

package/src/link/Link.less

@@ -11,4 +11,12 @@ a, button.np-link {
     align-items: center;
     .margin(left, var(--size-4));
   }
+
+  &.np-link--disabled,
+  &:disabled {
+    filter: none;
+    mix-blend-mode: luminosity;
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
 }

package/src/link/Link.spec.tsx

@@ -74,4 +74,32 @@ describe('Link', () => {
 
     expect(link).toHaveAttribute('aria-label', 'make me accessible');
   });
+
+  it('renders disabled button with attribute and class', () => {
+    const onClick = jest.fn();
+    render(
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+      <Link disabled onClick={onClick}>
+        button as link
+      </Link>,
+    );
+
+    const link = screen.getByText('button as link');
+    expect(link.tagName).toBe('BUTTON');
+    expect(link).toHaveClass('np-link--disabled');
+    expect(link).toBeDisabled();
+  });
+
+  it('passes disabled attribute to anchor element when rendered as link', () => {
+    render(
+      <Link {...props} disabled>
+        disabled link
+      </Link>,
+    );
+
+    const link = screen.getByText('disabled link');
+
+    expect(link).toHaveClass('np-link--disabled');
+    expect(link.tagName).toBe('A');
+  });
 });

package/src/link/Link.story.tsx

@@ -36,68 +36,124 @@ export const Basic = () => {
       >
         button as Link
       </Link>
+
+      <Title type={Typography.TITLE_SCREEN} className="m-t-3">
+        Disabled links
+      </Title>
+      <Link href="#" disabled className="m-t-3">
+        Disabled link
+      </Link>
+      <Link type={Typography.LINK_LARGE} href="#" disabled className="m-t-3">
+        Disabled large link
+      </Link>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+      <Link className="m-t-3" disabled onClick={() => console.log('click disabled button')}>
+        Disabled button as Link
+      </Link>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+      <Link
+        className="m-t-3"
+        type={Typography.LINK_LARGE}
+        disabled
+        onClick={() => console.log('click disabled button')}
+      >
+        Disabled button as Link (large)
+      </Link>
+
       <Title type={Typography.TITLE_SCREEN} className="m-t-3">
         Links via <code>{'<Link />'}</code> component in all types of body copy
       </Title>
       <Body type={Typography.BODY_LARGE_BOLD} className="m-t-3">
-        We’re building the world’s{' '}
+        We&apos;re building the world&apos;s{' '}
         <Link href="#" target="_blank">
           most international account
         </Link>
-        . We’re building the world’s most international account
+        . We&apos;re building the world&apos;s most international account
       </Body>
       <Body type={Typography.BODY_LARGE} className="m-t-3">
-        We’re building the world’s{' '}
+        We&apos;re building the world&apos;s{' '}
         <Link href="#" target="_blank">
           most international account
         </Link>
-        . We’re building the world’s most international account
+        . We&apos;re building the world&apos;s most international account
       </Body>
       <Body type={Typography.BODY_DEFAULT_BOLD} className="m-t-3">
-        We’re building the world’s{' '}
+        We&apos;re building the world&apos;s{' '}
         <Link href="#" target="_blank">
           most international account
         </Link>
-        . We’re building the world’s most international account
+        . We&apos;re building the world&apos;s most international account
       </Body>
       <Body type={Typography.BODY_DEFAULT} className="m-t-3">
-        We’re building the world’s{' '}
+        We&apos;re building the world&apos;s{' '}
         <Link href="#" target="_blank">
           most international account
         </Link>
-        . We’re building the world’s most international account
+        . We&apos;re building the world&apos;s most international account
+      </Body>
+
+      <Title type={Typography.TITLE_SCREEN} className="m-t-3">
+        Disabled links in body copy
+      </Title>
+      <Body type={Typography.BODY_LARGE_BOLD} className="m-t-3">
+        We&apos;re building the world&apos;s{' '}
+        <Link href="#" disabled>
+          most international account
+        </Link>
+        . We&apos;re building the world&apos;s most international account
+      </Body>
+      <Body type={Typography.BODY_LARGE} className="m-t-3">
+        We&apos;re building the world&apos;s{' '}
+        <Link href="#" disabled>
+          most international account
+        </Link>
+        . We&apos;re building the world&apos;s most international account
+      </Body>
+      <Body type={Typography.BODY_DEFAULT_BOLD} className="m-t-3">
+        We&apos;re building the world&apos;s{' '}
+        <Link href="#" disabled>
+          most international account
+        </Link>
+        . We&apos;re building the world&apos;s most international account
+      </Body>
+      <Body type={Typography.BODY_DEFAULT} className="m-t-3">
+        We&apos;re building the world&apos;s{' '}
+        <Link href="#" disabled>
+          most international account
+        </Link>
+        . We&apos;re building the world&apos;s most international account
       </Body>
 
       <Title type={Typography.TITLE_SCREEN} className="m-t-3">
         Links via <code>{'<a>'}</code> tag in all types of body copy
       </Title>
       <Body type={Typography.BODY_LARGE_BOLD} className="m-t-3">
-        We’re building the world’s{' '}
+        We&apos;re building the world&apos;s{' '}
         <a href="#" target="_blank">
           most international account
         </a>
-        . We’re building the world’s most international account
+        . We&apos;re building the world&apos;s most international account
       </Body>
       <Body type={Typography.BODY_LARGE} className="m-t-3">
-        We’re building the world’s{' '}
+        We&apos;re building the world&apos;s{' '}
         <a href="#" target="_blank">
           most international account
         </a>
-        . We’re building the world’s most international account
+        . We&apos;re building the world&apos;s most international account
       </Body>
       <Body type={Typography.BODY_DEFAULT_BOLD} className="m-t-3">
-        We’re building the world’s{' '}
+        We&apos;re building the world&apos;s{' '}
         <a href="#" target="_blank">
           most international account
         </a>
-        . We’re building the world’s most international account
+        . We&apos;re building the world&apos;s most international account
       </Body>
       <Body type={Typography.BODY_DEFAULT} className="m-t-3">
-        We’re building the world’s{' '}
+        We&apos;re building the world&apos;s{' '}
         <a href="#" target="_blank">
           most international account
         </a>
-        . We’re building the world’s most international account
+        . We&apos;re building the world&apos;s most international account
       </Body>
     </>
   );

package/src/link/Link.tsx

@@ -24,6 +24,7 @@ const Link = ({
   type = Typography.LINK_DEFAULT,
   'aria-label': ariaLabel,
   onClick,
+  disabled,
   ...props
 }: Props) => {
   const { formatMessage } = useIntl();
@@ -35,6 +36,7 @@ const Link = ({
     'd-inline-flex',
     {
       [`np-text-${type}`]: type,
+      'np-link--disabled': disabled,
     },
     className,
   );
@@ -43,7 +45,8 @@ const Link = ({
     <PrimitiveButton
       type="button"
       aria-label={ariaLabel}
-      className={clsx(classNames, 'btn-unstyled', className)}
+      className={clsx(classNames, 'btn-unstyled')}
+      disabled={disabled}
       onClick={onClick}
     >
       {children}
@@ -55,6 +58,7 @@ const Link = ({
       className={classNames}
       aria-label={ariaLabel}
       rel={isBlank ? 'noreferrer' : undefined}
+      disabled={disabled}
       onClick={onClick}
       {...props}
     >