@transferwise/components 0.0.0-experimental-db6cf60 → 0.0.0-experimental-4678400

package/src/Header/Header.less

@@ -1,7 +1,3 @@
-// Above this header width a long title wraps beside the action corner. At or below it, the title
-// only shares a line with the actions while it fits on one line, so it keeps room to read.
-@np-header-actions-stack-width: 360px;
-
 .np-header {
   display: grid;
   grid-template-columns: 1fr auto;
@@ -17,7 +13,7 @@
     border-bottom: 1px solid var(--color-border-neutral);
 
     &,
-    .np-header__title {
+    .np-header__title{
       color: var(--color-content-secondary);
     }
   }
@@ -28,62 +24,4 @@
     display: flex;
     align-items: center;
   }
-
-  // Button actions are taller than the title, so it centres on them rather than sitting low.
-  // The actions wrap under the title when they don't fit beside it.
-  &--with-actions {
-    --Header-actions-gap: var(--size-8);
-
-    align-items: center;
-    container-type: inline-size;
-    display: flex;
-    flex-wrap: wrap;
-    row-gap: var(--size-8);
-
-    > .np-header__title {
-      flex: 1 1 0;
-
-      @container (width <= @np-header-actions-stack-width) {
-        flex-basis: auto;
-      }
-    }
-  }
-
-  // The title is a `Link`, but keeps the title's typography and colour rather than the link
-  // text style, and flows inline so the chevron can follow its last word.
-  &__title-link.np-link {
-    color: inherit;
-    display: inline;
-    font: inherit;
-    letter-spacing: inherit;
-    // `Link` renders a button when there is no `href`, which would otherwise centre the title.
-    text-align: start;
-    text-decoration: none;
-
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
-    }
-
-    .np-header__title-chevron {
-      white-space: nowrap;
-
-      .tw-icon {
-        display: inline-block;
-        margin: 0;
-        vertical-align: text-bottom;
-      }
-    }
-  }
-
-  &__actions {
-    // Stays in the top corner when a long title wraps onto more lines.
-    align-self: start;
-    align-items: center;
-    display: flex;
-    flex: none;
-    gap: var(--Header-actions-gap);
-    // Keeps the actions at the inline end once they wrap under the title.
-    margin-inline-start: auto;
-  }
 }

package/src/Header/Header.test.tsx

@@ -1,10 +1,6 @@
-import { Plus, Settings } from '@transferwise/icons';
-
-import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
+import { render, screen, userEvent } from '../test-utils';
 import Header, { HeaderProps } from '.';
 
-mockMatchMedia();
-
 describe('Header', () => {
   const defaultProps: HeaderProps = {
     title: 'Header title',
@@ -114,132 +110,4 @@ describe('Header', () => {
     await userEvent.click(button);
     expect(callback).toHaveBeenCalledTimes(1);
   });
-
-  describe('titleAction', () => {
-    it('renders the title as a link inside the heading', () => {
-      renderHeader({ as: 'h3', titleAction: { href: '/cards' } });
-      const link = screen.getByRole('link', { name: 'Header title' });
-      expect(link).toHaveAttribute('href', '/cards');
-      expect(screen.getByRole('heading', { level: 3 })).toContainElement(link);
-    });
-
-    it('calls the titleAction onClick handler', async () => {
-      const onClick = jest.fn();
-      renderHeader({ titleAction: { href: '/cards', onClick } });
-      await userEvent.click(screen.getByRole('link', { name: 'Header title' }));
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('renders the title as a button when titleAction has only onClick', async () => {
-      const onClick = jest.fn();
-      renderHeader({ titleAction: { onClick } });
-      await userEvent.click(screen.getByRole('button', { name: 'Header title' }));
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('marks a title link that opens in a new tab', () => {
-      renderHeader({ titleAction: { href: '/cards', target: '_blank' } });
-      expect(screen.getByRole('link', { name: /Header title/u })).toHaveAttribute(
-        'rel',
-        'noreferrer',
-      );
-    });
-
-    it('keeps the title link alongside actions', () => {
-      renderHeader({ titleAction: { href: '/cards' }, action: { label: 'Order card' } });
-      expect(screen.getByRole('link', { name: 'Header title' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Order card' })).toBeInTheDocument();
-    });
-  });
-
-  describe('action buttons', () => {
-    it('still renders a text action as a link-styled action', () => {
-      renderHeader({ action: { text: 'View all', href: '#' } });
-      const link = screen.getByRole('link', { name: 'View all' });
-      expect(link).toHaveClass('np-header__action-button');
-      expect(link.closest('.np-header')).not.toHaveClass('np-header--with-actions');
-    });
-
-    it('renders a labelled action as a button', () => {
-      renderHeader({ action: { label: 'Order card' } });
-      expect(screen.getByRole('button', { name: 'Order card' })).toBeInTheDocument();
-    });
-
-    it('renders a labelled action with an href as a link', () => {
-      renderHeader({ action: { label: 'Order card', href: '/cards/order' } });
-      expect(screen.getByRole('link', { name: 'Order card' })).toHaveAttribute(
-        'href',
-        '/cards/order',
-      );
-    });
-
-    it('names an unlabelled action from its aria-label', () => {
-      renderHeader({ action: { 'aria-label': 'Card settings', icon: <Settings size={16} /> } });
-      expect(screen.getByRole('button', { name: 'Card settings' })).toBeInTheDocument();
-    });
-
-    it('calls the action onClick handler', async () => {
-      const onClick = jest.fn();
-      renderHeader({ action: { label: 'Order card', onClick } });
-      await userEvent.click(screen.getByRole('button', { name: 'Order card' }));
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('does not call onClick when disabled', async () => {
-      const onClick = jest.fn();
-      renderHeader({ action: { label: 'Order card', disabled: true, onClick } });
-      await userEvent.click(screen.getByRole('button', { name: 'Order card' }));
-      expect(onClick).not.toHaveBeenCalled();
-    });
-
-    it('renders actionSecondary before action in the DOM', () => {
-      renderHeader({ action: { label: 'Order card' }, actionSecondary: { label: 'Manage' } });
-      const [first, second] = screen.getAllByRole('button');
-      expect(first).toHaveAccessibleName('Manage');
-      expect(second).toHaveAccessibleName('Order card');
-    });
-
-    it('takes button priority from the slot the action is passed to', () => {
-      renderHeader({ action: { label: 'Order card' }, actionSecondary: { label: 'Manage' } });
-      expect(screen.getByRole('button', { name: 'Order card' })).toHaveClass(
-        'wds-Button--secondary',
-      );
-      expect(screen.getByRole('button', { name: 'Manage' })).toHaveClass(
-        'wds-Button--secondary-neutral',
-      );
-    });
-
-    it('takes icon button priority from the slot the action is passed to', () => {
-      renderHeader({
-        action: { 'aria-label': 'Add', icon: <Plus size={16} /> },
-        actionSecondary: { 'aria-label': 'Settings', icon: <Settings size={16} /> },
-      });
-      expect(screen.getByRole('button', { name: 'Add' })).toHaveClass(
-        'np-icon-button-secondary-default',
-      );
-      expect(screen.getByRole('button', { name: 'Settings' })).toHaveClass(
-        'np-icon-button-tertiary-default',
-      );
-    });
-
-    it('keeps the lower emphasis when actionSecondary is used on its own', () => {
-      renderHeader({ actionSecondary: { label: 'Manage' } });
-      expect(screen.getByRole('button', { name: 'Manage' })).toHaveClass(
-        'wds-Button--secondary-neutral',
-      );
-    });
-
-    it('renders an arbitrary node in place of the action buttons', () => {
-      renderHeader({ action: <span>Custom node</span> });
-      expect(screen.getByText('Custom node')).toBeInTheDocument();
-      expect(screen.queryByRole('button')).not.toBeInTheDocument();
-    });
-
-    it('renders an element as given, even when it has a label prop', () => {
-      const CustomAction = ({ label }: { label: string }) => <span>{label}</span>;
-      renderHeader({ action: <CustomAction label="Custom action" /> });
-      expect(screen.getByText('Custom action')).toBeInTheDocument();
-      expect(screen.queryByRole('button')).not.toBeInTheDocument();
-    });
-  });
 });

package/src/Header/Header.tsx

@@ -1,16 +1,9 @@
-import { ChevronEnd } from '@transferwise/icons';
 import { clsx } from 'clsx';
 
 import { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';
-import Link, { type LinkProps as LinkComponentProps } from '../Link';
+import Link from '../Link';
 import Title from '../Title';
-import React, { useEffect, useRef, FunctionComponent, ReactNode, isValidElement } from 'react';
-
-import HeaderActionButtonComponent, {
-  isHeaderActionButton,
-  type HeaderActionButton,
-  type HeaderActionSlot,
-} from './HeaderActionButton';
+import React, { useEffect, useRef, FunctionComponent, ReactNode } from 'react';
 
 type ActionProps = AriaLabelProperty & {
   text: string;
@@ -21,38 +14,12 @@ type ActionProps = AriaLabelProperty & {
 type ButtonActionProps = ActionProps;
 type LinkActionProps = ActionProps & LinkProps;
 
-/**
- * Props passed to the [Link](https://storybook.wise.design/?path=/docs/typography-link--docs)
- * that the title is rendered as. A trailing chevron is rendered automatically, so do not put one
- * in `title`.
- */
-export type HeaderTitleAction = Pick<LinkComponentProps, 'href' | 'target' | 'onClick'>;
-
 export interface HeaderProps extends CommonProps {
   /**
-   * Optional prop to define the action for the header.
-   *
-   * - An object with `text` renders a `Link` (or a link-styled button without `href`).
-   * - A `HeaderActionButton` object (with a `label` or an `icon`) renders a small button that
-   *   carries the visual emphasis, anchored to the inline end.
-   * - Any other node is rendered as given.
-   * @default undefined
-   */
-  action?: ButtonActionProps | LinkActionProps | HeaderActionButton | ReactNode;
-
-  /**
-   * Second action, at a lower emphasis, rendered before `action`. Two is the maximum, to keep
-   * the title legible. Takes a `HeaderActionButton` object or any other node, and keeps its lower
-   * emphasis when used on its own.
-   * @default undefined
+   * Optional prop to define the action for the header. If the `href` property
+   * is provided, a `Link` will be rendered instead of a `Button`.
    */
-  actionSecondary?: HeaderActionButton | ReactNode;
-
-  /**
-   * Makes the title a link with a trailing chevron.
-   * @default undefined
-   */
-  titleAction?: HeaderTitleAction;
+  action?: ButtonActionProps | LinkActionProps;
 
   /**
    * Option prop to specify DOM render element of the title
@@ -106,27 +73,8 @@ const HeaderAction = React.forwardRef<
 
 HeaderAction.displayName = 'HeaderAction';
 
-const isHeaderTextAction = (value: unknown): value is ButtonActionProps | LinkActionProps =>
-  typeof value === 'object' &&
-  value !== null &&
-  !isValidElement(value) &&
-  !Array.isArray(value) &&
-  'text' in value;
-
-const renderAction = (action: HeaderProps['action'], slot: HeaderActionSlot) => {
-  if (isHeaderTextAction(action)) {
-    return <HeaderAction action={action} />;
-  }
-  if (isHeaderActionButton(action)) {
-    return <HeaderActionButtonComponent action={action} slot={slot} />;
-  }
-  return action;
-};
-
 /**
- * @param {ButtonActionProps | LinkActionProps | HeaderActionButton | ReactNode} [action] - Optional prop to specify the action link, button or custom node.
- * @param {HeaderActionButton | ReactNode} [actionSecondary] - Optional second action, at a lower emphasis.
- * @param {HeaderTitleAction} [titleAction] - Optional prop to make the title a link with a trailing chevron.
+ * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.
  * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.
  * @param {string} title - Required prop to set the title of the section header.
  * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.
@@ -138,26 +86,14 @@ const renderAction = (action: HeaderProps['action'], slot: HeaderActionSlot) =>
  */
 const Header: FunctionComponent<HeaderProps> = React.forwardRef(
   (
-    {
-      as = 'h5',
-      action,
-      actionSecondary,
-      titleAction,
-      className,
-      testId,
-      title,
-      level = 'group',
-      ...props
-    },
+    { as = 'h5', action, className, testId, title, level = 'group', ...props },
     ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,
   ) => {
     const internalRef = useRef<HTMLLegendElement>(null);
     const levelTypography =
       level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;
-    const hasActionCorner = Boolean(actionSecondary) || (!!action && !isHeaderTextAction(action));
     const headerClasses = clsx('np-header', className, {
       'np-header--group': level === 'group',
-      'np-header--with-actions': hasActionCorner,
     });
 
     const commonProps = {
@@ -176,52 +112,20 @@ const Header: FunctionComponent<HeaderProps> = React.forwardRef(
       }
     }, [as]);
 
-    const titleContent = titleAction ? (
-      <Link
-        href={titleAction.href}
-        target={titleAction.target}
-        className="np-header__title-link"
-        onClick={titleAction.onClick}
-      >
-        {title}
-        {/* The word joiner keeps the chevron on the title's last line instead of wrapping alone. */}
-        <span className="np-header__title-chevron" aria-hidden>
-          {'\u2060'}
-          <ChevronEnd size={16} />
-        </span>
-      </Link>
-    ) : (
-      title
-    );
-
-    if (!action && !actionSecondary) {
+    if (!action) {
       return (
         <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>
-          {titleContent}
+          {title}
         </Title>
       );
     }
 
-    if (!hasActionCorner) {
-      return (
-        <div {...commonProps} {...props} ref={ref}>
-          <Title as={as} type={levelTypography} className="np-header__title">
-            {titleContent}
-          </Title>
-          {renderAction(action, 'action')}
-        </div>
-      );
-    }
-
     return (
       <div {...commonProps} {...props} ref={ref}>
         <Title as={as} type={levelTypography} className="np-header__title">
-          {titleContent}
+          {title}
         </Title>
-        <div className="np-header__actions">
-          {actionSecondary && renderAction(actionSecondary, 'actionSecondary')}
-          {action && renderAction(action, 'action')}
-        </div>
+        <HeaderAction action={action} />
       </div>
     );
   },

package/src/Header/_stories/Header.story.tsx

@@ -1,7 +1,4 @@
-import { Plus, Settings } from '@transferwise/icons';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import Body from '../../Body';
-import { Typography } from '../../common';
 import Header, { HeaderProps } from '..';
 import {
   createSandboxStory,
@@ -56,29 +53,10 @@ const meta: Meta<typeof Header> = {
     action: {
       table: {
         type: {
-          summary: 'HeaderAction | HeaderActionButton | ReactNode',
+          summary: 'HeaderAction',
         },
       },
-      description:
-        'Defines an optional action associated with the header: a `text` link, a `HeaderActionButton` (`label` or `icon`) rendered as a button, or any other node.',
-    },
-    actionSecondary: {
-      control: false,
-      table: {
-        type: {
-          summary: 'HeaderActionButton | ReactNode',
-        },
-      },
-      description: 'A second action, at a lower emphasis, rendered before `action`.',
-    },
-    titleAction: {
-      control: false,
-      table: {
-        type: {
-          summary: 'HeaderTitleAction',
-        },
-      },
-      description: 'Makes the title a link with a trailing chevron.',
+      description: 'Defines an optional action (e.g., button or link) associated with the header.',
     },
   },
   args: {
@@ -192,76 +170,3 @@ export const SectionLevel: Story = {
   },
   argTypes: hideControls(['action', 'as', 'className', 'title', 'testId']),
 };
-
-/**
- * `titleAction` turns the title into a link to its own screen and appends a chevron, which stays
- * on the title's last line when it wraps.
- */
-export const TitleAction: Story = {
-  args: {
-    title: 'Cards',
-    titleAction: { href: '#cards' },
-  },
-  argTypes: hideControls(['action', 'actionSecondary', 'as', 'className', 'testId']),
-};
-
-/**
- * A `HeaderActionButton` (an object with a `label` or an `icon`) renders as a small button.
- * Emphasis comes from the slot: `action` is the louder one, anchored to the inline end, and
- * `actionSecondary` sits before it at a lower emphasis. An icon-only action requires an
- * `aria-label`.
- */
-export const ActionButtons: Story = {
-  render: (args) => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: '480px' }}>
-      <Header
-        {...args}
-        title="Leading action"
-        action={{ label: 'Order card', icon: <Plus size={16} /> }}
-      />
-      <Header {...args} title="Secondary action only" actionSecondary={{ label: 'Manage' }} />
-      <Header
-        {...args}
-        title="Both actions"
-        titleAction={{ href: '#cards' }}
-        action={{ label: 'Order card', icon: <Plus size={16} /> }}
-        actionSecondary={{ 'aria-label': 'Card settings', icon: <Settings size={16} /> }}
-      />
-    </div>
-  ),
-  argTypes: hideControls([
-    'action',
-    'actionSecondary',
-    'titleAction',
-    'title',
-    'className',
-    'testId',
-  ]),
-};
-
-/**
- * Either action slot also takes any node, rendered as given in place of the action buttons.
- */
-export const CustomAction: Story = {
-  render: (args) => (
-    <div style={{ width: '480px' }}>
-      <Header
-        {...args}
-        title="Balance"
-        action={
-          <Body as="span" type={Typography.BODY_DEFAULT_BOLD}>
-            £1,240.00
-          </Body>
-        }
-      />
-    </div>
-  ),
-  argTypes: hideControls([
-    'action',
-    'actionSecondary',
-    'titleAction',
-    'title',
-    'className',
-    'testId',
-  ]),
-};

package/src/Header/_stories/Header.test.story.tsx

@@ -1,4 +1,3 @@
-import { Plus, Settings } from '@transferwise/icons';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import Header, { type HeaderProps } from '../Header';
@@ -121,26 +120,6 @@ export const AllVariants: Story = {
           href: 'https://wise.com',
         }}
       />
-      {(['section', 'group'] as const).map((level) => (
-        <Header
-          key={`title-link-${level}`}
-          as="h2"
-          level={level}
-          title={`Header level ${level} with title link`}
-          titleAction={{ href: '#target' }}
-        />
-      ))}
-      {(['section', 'group'] as const).map((level) => (
-        <Header
-          key={`buttons-${level}`}
-          as="h2"
-          level={level}
-          title={`Header level ${level} with action buttons`}
-          titleAction={{ href: '#target' }}
-          action={{ label: 'Order card', icon: <Plus size={16} /> }}
-          actionSecondary={{ 'aria-label': 'Settings', icon: <Settings size={16} /> }}
-        />
-      ))}
     </div>
   ),
 };
@@ -168,13 +147,6 @@ export const RTLDiff: Story = {
           level="section"
           action={{ 'aria-label': i18n.learnMore, text: i18n.learnMore, href: '#' }}
         />
-        <Header
-          title={i18n.groupWithButtons}
-          level="group"
-          titleAction={{ href: '#' }}
-          action={{ label: i18n.viewAll, icon: <Plus size={16} /> }}
-          actionSecondary={{ 'aria-label': i18n.learnMore, icon: <Settings size={16} /> }}
-        />
       </div>
     );
   },
@@ -185,10 +157,6 @@ export const RTLDiff: Story = {
       groupWithAction: { en: 'Group level with action', ar: 'مستوى المجموعة مع إجراء' },
       sectionWithoutAction: { en: 'Section level without action', ar: 'مستوى القسم بدون إجراء' },
       sectionWithAction: { en: 'Section level with action', ar: 'مستوى القسم مع إجراء' },
-      groupWithButtons: {
-        en: 'Group level with action buttons',
-        ar: 'مستوى المجموعة مع أزرار الإجراءات',
-      },
       viewAll: { en: 'View all', ar: 'عرض الكل' },
       learnMore: { en: 'Learn more', ar: 'اعرف المزيد' },
     },

package/src/Header/index.ts

@@ -1,3 +1,2 @@
 export { default } from './Header';
-export type { HeaderProps, HeaderTitleAction } from './Header';
-export type { HeaderActionButton } from './HeaderActionButton';
+export type { HeaderProps } from './Header';