@transferwise/components 0.0.0-experimental-5acc778 → 0.0.0-experimental-0ffb1f6

package/src/header/Header.story.tsx

@@ -1,207 +1,53 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import Header, { HeaderProps } from './Header';
-import { storyConfig } from '../test-utils';
+import Header from './Header';
 
-const withContainer = (Story: any) => (
-  <div style={{ display: 'flex', justifyContent: 'center' }}>
-    <Story />
-  </div>
-);
-
-/**
- * Not all stories need access to all controls as it causes unnecessary UI noise.
- */
-const hideControls = (args: string[]) =>
-  Object.fromEntries(args.map((item) => [item, { table: { disable: true } }]));
+export default {
+  component: Header,
+  title: 'Typography/Header',
+};
 
-/**
- * Reusable render logic for wrapping `Header` in a `<fieldset>` if `as` is `legend`.
- */
-const renderHeader = (args: HeaderProps) => {
-  if (args.as === 'legend') {
-    return (
-      <fieldset style={{ width: '100%' }}>
-        <Header {...args} />
-      </fieldset>
-    );
-  }
-  return <Header {...args} />;
+export const Basic = () => {
+  return <Header title="Header title" />;
 };
 
-/**
- * Helper to generate variants for `AllVariants` story.
- */
-const renderVariants = () => (
-  <div
-    className="header-variants"
-    style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', maxWidth: '1200px' }}
-  >
-    {(['h1', 'h2', 'h3', 'legend'] as const).map((as) => (
-      <Header key={as} as={as} title={`Header as ${as}`} />
-    ))}
-    {(['section', 'group'] as const).map((level) => (
-      <Header key={level} level={level} title={`Header level ${level}`} />
-    ))}
+export const WithAction = () => {
+  return (
     <Header
-      as="h2"
-      title="Header with Action"
+      title="Header title"
       action={{
-        'aria-label': 'Action',
-        text: 'Action',
-        onClick: () => alert('Action clicked!'),
+        'aria-label': 'Magic',
+        text: 'Click me!',
+        onClick: () => alert('Action!'),
       }}
     />
+  );
+};
+
+export const WithActionAsLink = () => {
+  return (
     <Header
-      as="h2"
-      title="Header with link"
+      title="Header title"
       action={{
-        'aria-label': 'Action',
-        text: 'Action',
+        text: 'This is a link',
         href: 'https://wise.com',
       }}
     />
-  </div>
-);
-
-/**
- * The stories below document the `Header` component, which is used to structure content and convey hierarchy. <br />
- * For more details, refer to the [design documentation](https://wise.design/components/section-header).
- */
-const meta: Meta<typeof Header> = {
-  component: Header,
-  title: 'Typography/Header',
-  argTypes: {
-    level: {
-      type: {
-        name: 'enum',
-        value: ['section', 'group'],
-      },
-      table: {
-        type: {
-          summary: 'HeaderLevel',
-        },
-      },
-      description: 'Defines the hierarchical level of the header.',
-    },
-    as: {
-      type: {
-        name: 'enum',
-        value: ['h1', 'h2', 'h3', 'legend'],
-      },
-      table: {
-        type: {
-          summary: 'HeaderAs',
-        },
-      },
-      description:
-        'Defines which HTML element the Header will render as. Use `legend` only as the first child of a `<fieldset>` — otherwise a warning will appear. The `action` prop is not supported with `legend`. You can also use heading tags like `h1`, `h2`, `h3`, or `header`.',
-    },
-    action: {
-      table: {
-        type: {
-          summary: 'HeaderAction',
-        },
-      },
-      description: 'Defines an optional action (e.g., button or link) associated with the header.',
-    },
-  },
-  args: {
-    title: 'Default Header',
-    level: 'group',
-    as: 'h1',
-    action: undefined,
-  },
-  tags: ['autodocs'],
-  decorators: [withContainer],
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Header>;
-
-export const Playground: Story = {
-  render: renderHeader,
-  args: {
-    title: 'Playground Header',
-    level: 'group',
-    as: 'h2',
-    action: {
-      'aria-label': 'Action',
-      text: 'Click me',
-      onClick: () => alert('Action clicked!'),
-    },
-  },
-};
-
-/**
- * Demonstrates a `Header` with an associated action.
- */
-export const Action: Story = {
-  args: {
-    title: 'Header with Action',
-    action: {
-      'aria-label': 'Action',
-      text: 'Action',
-      onClick: () => alert('Action clicked!'),
-    },
-  },
-  argTypes: hideControls(['as', 'className', 'level', 'title', 'testId']),
+  );
 };
 
-/**
- * Demonstrates a `Header` with an associated action as a link.
- */
-export const ActionAsLink: Story = {
-  args: {
-    title: 'Header with Action as Link',
-    action: {
-      'aria-label': 'Learn more about this section',
-      text: 'Learn more',
-      href: 'https://wise.com',
-      target: '_blank',
-    },
-  },
-  argTypes: hideControls(['as', 'className', 'level', 'title', 'testId']),
-};
-
-/**
- * Demonstrates a `Header` rendered as a custom HTML element.
- */
-export const CustomElement: Story = {
-  render: renderHeader,
-  args: {
-    title: 'Legend Header',
-    as: 'legend',
-  },
-  argTypes: hideControls(['action', 'className', 'level', 'testId']),
-};
+export const WithActionAsLinkPreventingNavigationWithTracking = () => {
+  return (
+    <Header
+      title="Header title"
+      action={{
+        text: 'This is a link',
+        href: 'https://wise.com',
+        onClick: (event: React.MouseEvent<HTMLElement>) => {
+          alert('Running onClick handler');
 
-/**
- * Demonstrates a `Header` with a specific hierarchical level.
- */
-export const SectionLevel: Story = {
-  args: {
-    title: 'Section Header',
-    level: 'section',
-  },
-  argTypes: hideControls(['action', 'as', 'className', 'title', 'testId']),
+          // we can stop the navigation from happening as onClick will always run before href redirect
+          event.preventDefault();
+        },
+      }}
+    />
+  );
 };
-
-/**
- * Displays all variants of the `Header` component, including different levels, tags, and actions.
- */
-export const AllVariants = storyConfig(
-  {
-    tags: ['!autodocs'],
-    parameters: {
-      padding: '0',
-    },
-    render: renderVariants,
-  },
-  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
-);

package/src/header/Header.tsx

@@ -1,142 +1,102 @@
 import { clsx } from 'clsx';
 
-import { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';
+import { ActionButtonProps } from '../actionButton/ActionButton';
 import Button from '../button';
+import { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';
+import Link from '../link';
 import Title from '../title';
-import React, { useEffect, useRef, FunctionComponent } from 'react';
+import { HTMLAttributes } from 'react';
 
 type ActionProps = AriaLabelProperty & {
   text: string;
-  onClick?: () => void;
 };
 
-type ButtonActionProps = ActionProps;
+type ButtonActionProps = ActionProps & ActionButtonProps;
+
 type LinkActionProps = ActionProps & LinkProps;
 
-export interface HeaderProps extends CommonProps {
+export type HeaderProps = CommonProps & {
   /**
-   * Optional prop to define the action for the header. If the `href` property
-   * is provided, a `Link` will be rendered instead of a `Button`.
+   * When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.
    */
   action?: ButtonActionProps | LinkActionProps;
-
   /**
-   * Option prop to specify DOM render element of the title
-   *
-   * - When `as="legend"`, the `Header` will render as a `<legend>` element.
-   *   **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.
-   *   If this condition is not met, a warning will be logged to the console.
+   * Override the heading element rendered for the title, useful to specify the semantics of your header.
    *
-   * - Other valid values include standard heading tags (`h1` to `h6`) or `header`.
+   * @default "h5"
    */
   as?: Heading | 'legend' | 'header';
-
-  /** Required prop to set the title of the Header. */
   title: string;
+} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'id'>;
 
-  /** Optional prop to specify the level of the Header */
-  level?: 'section' | 'group';
-
-  className?: string;
-  testId?: string;
-}
-
-/**
- * Renders a header action which can be either a button or a link.
- *
- * @param {Object} props - The properties object.
- * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.
- * @returns {JSX.Element} The rendered header action component.
- */
-const HeaderAction = React.forwardRef(
-  (
-    { action }: { action: ButtonActionProps | LinkActionProps },
-    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
-  ) => {
-    const baseProps = {
-      ref,
-      className: 'np-header__action-button',
-      priority: 'tertiary' as const,
-      size: 'sm' as const,
-      'aria-label': action['aria-label'],
-      onClick: action.onClick,
-      children: action.text,
-    };
-
-    const linkProps =
-      'href' in action ? { href: action.href, target: action.target, as: 'a' as const } : {};
+const HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {
+  const props = {
+    'aria-label': action['aria-label'],
+  };
 
+  if ('href' in action) {
     return (
-      <div className="np-header__action">
-        <Button {...baseProps} {...linkProps} />
-      </div>
+      <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>
+        {action.text}
+      </Link>
     );
-  },
-);
-
-HeaderAction.displayName = 'HeaderAction';
+  }
+
+  return (
+    <Button
+      className="np-header__button"
+      priority="tertiary"
+      size="sm"
+      onClick={action.onClick}
+      {...props}
+    >
+      {action.text}
+    </Button>
+  );
+};
 
 /**
- * @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.
- * @param {string} [className]
- * @param {string} [testId]
  *
- * @see {@link Header } for further information.
- * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}
+ * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header
+ *
  */
-const Header: FunctionComponent<HeaderProps> = React.forwardRef(
-  (
-    { as = 'h5', action, className, testId, title, level = 'group', ...props },
-    ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,
-  ) => {
-    const internalRef = useRef<HTMLLegendElement>(null);
-    const actionRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);
-    const levelTypography =
-      level === 'group' ? Typography.TITLE_GROUP : Typography.TITLE_SUBSECTION;
-    const isLegendOrNoAction = !action || as === 'legend';
-    const headerClasses = clsx('np-header', className, {
-      'np-header--group': level === 'group',
-      'np-header__title': isLegendOrNoAction,
-    });
-
-    const commonProps = {
-      className: headerClasses,
-      'data-testid': testId,
-    };
-
-    useEffect(() => {
-      if (as === 'legend' && internalRef.current) {
-        const { parentElement } = internalRef.current;
-        if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {
-          console.warn(
-            'Legends should be the first child in a fieldset, and this is not possible when including an action',
-          );
-        }
-      }
-    }, [as]);
-
-    if (!action) {
-      return (
-        <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>
-          {title}
-        </Title>
-      );
-    }
-
+export const Header = ({
+  id,
+  action,
+  as = 'h5',
+  title,
+  className,
+  role = undefined,
+}: HeaderProps) => {
+  if (!action) {
     return (
-      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>
-        <Title as={as} type={levelTypography} className="np-header__title">
-          {title}
-        </Title>
-        <HeaderAction ref={actionRef} action={action} />
-      </div>
+      <Title
+        as={as}
+        id={id}
+        role={role}
+        type={Typography.TITLE_GROUP}
+        className={clsx('np-header', 'np-header__title', className)}
+      >
+        {title}
+      </Title>
     );
-  },
-);
+  }
 
-Header.displayName = 'Header';
+  if (as === 'legend') {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Legends should be the first child in a fieldset, and this is not possible when including an action',
+    );
+  }
+
+  return (
+    <div className={clsx('np-header', className)}>
+      <Title as={as} type={Typography.TITLE_GROUP} id={id} className="np-header__title">
+        {title}
+      </Title>
+      <HeaderAction action={action} />
+    </div>
+  );
+};
 
 export default Header;

package/src/header/index.ts

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

package/src/i18n/cs.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "Nahrání se nezdařilo. Zkuste to prosím později",
   "neptune.Upload.csSuccessText": "Úspěšně nahráno!",
   "neptune.Upload.csTooLargeMessage": "Nahrajte soubor menší než {maxSize} MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "Nahrajte menší soubor",
   "neptune.Upload.csWrongTypeMessage": "Tento formát souboru není podporován. Zkuste to znovu s jiným souborem",
   "neptune.Upload.psButtonText": "Zrušit",
   "neptune.Upload.psProcessingText": "Načítání...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "Nebo vyberte soubor",
   "neptune.Upload.usDropMessage": "Přetáhněte soubor a zahajte nahrávání",
   "neptune.Upload.usPlaceholder": "Přetáhněte soubor menší než {maxSize} MB",
+  "neptune.Upload.usPlaceholderNoLimit": "Přetáhněte soubor",
   "neptune.UploadButton.allFileTypes": "Všechny typy souborů",
   "neptune.UploadButton.dropFiles": "Přetáhněte soubor a zahajte nahrávání",
   "neptune.UploadButton.instructions": "{fileTypes}, menší než {size} MB",

package/src/i18n/th.json

@@ -45,6 +45,7 @@
   "neptune.Upload.csFailureText": "การอัปโหลดล้มเหลว กรุณาลองอีกครั้ง",
   "neptune.Upload.csSuccessText": "อัปโหลดเรียบร้อย!",
   "neptune.Upload.csTooLargeMessage": "กรุณาใช้ไฟล์ที่มีขนาดเล็กกว่า {maxSize} MB",
+  "neptune.Upload.csTooLargeNoLimitMessage": "โปรดอัปโหลดไฟล์ที่เล็กลง",
   "neptune.Upload.csWrongTypeMessage": "ไม่รองรับประเภทไฟล์ โปรดลองอีกครั้งโดยใช้ไฟล์อื่น",
   "neptune.Upload.psButtonText": "ยกเลิก",
   "neptune.Upload.psProcessingText": "กำลังอัปโหลด...",
@@ -52,6 +53,7 @@
   "neptune.Upload.usButtonText": "หรือเลือกไฟล์",
   "neptune.Upload.usDropMessage": "วางไฟล์เพื่อเริ่มการอัปโหลด",
   "neptune.Upload.usPlaceholder": "ลากและวางไฟล์ที่น้อยกว่า {maxSize} MB",
+  "neptune.Upload.usPlaceholderNoLimit": "ลากและวางไฟล์",
   "neptune.UploadButton.allFileTypes": "ไฟล์ทุกประเภท",
   "neptune.UploadButton.dropFiles": "วางไฟล์เพื่อเริ่มการอัปโหลด",
   "neptune.UploadButton.instructions": "{fileTypes} น้อยกว่า {size} MB",

package/src/index.ts

@@ -31,7 +31,6 @@ export type { DefinitionListProps, DefinitionListDefinition } from './definition
 export type { DimmerProps } from './dimmer';
 export type { DrawerProps } from './drawer';
 export type { DividerProps } from './divider';
-export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';

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/listItem/_stories/ListItem.story.tsx

@@ -46,7 +46,7 @@ export default {
     'ListItem.Image': ListItem.Image,
   },
   title: 'Content/ListItem',
-  tags: ['wds:early-access'],
+  tags: ['early-access'],
   parameters: {
     docs: {
       toc: true,

package/src/main.css

@@ -2433,45 +2433,30 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   fill: var(--color-interactive-primary);
 }
 .np-header {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  grid-column-gap: 24px;
-  grid-column-gap: var(--size-24);
-  -moz-column-gap: 24px;
-       column-gap: 24px;
-  -moz-column-gap: var(--size-24);
-       column-gap: var(--size-24);
-  align-items: center;
-  margin-bottom: 8px;
-  margin-bottom: var(--size-8);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
   max-width: 100%;
   padding: 8px 0;
   padding: var(--size-8) 0;
-  width: 100%;
-}
-.np-header--group {
-  align-items: flex-end;
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
+  margin-bottom: 8px;
+  margin-bottom: var(--size-8);
+  -moz-column-gap: 24px;
+       column-gap: 24px;
+  -moz-column-gap: var(--size-24);
+       column-gap: var(--size-24);
 }
 .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);
-  margin: 0;
-}
-.np-header__action {
-  margin: 0;
-  height: 20px;
-  display: flex;
-  align-items: center;
 }
-.np-header__action-button {
-  margin-right: -16px;
-}
-@media (max-width: 320px) {
-  .np-header__action-button {
-    margin-right: -12.5px;
-  }
+.np-header__button {
+  margin-inline: calc(16px * -1);
+  margin-inline: calc(var(--size-16) * -1);
+  margin-bottom: calc(4px * -1);
+  margin-bottom: calc(var(--size-4) * -1);
 }
 .tw-image {
   max-width: none;

package/src/navigationOption/NavigationOption.story.tsx

@@ -15,10 +15,13 @@ import { fn } from 'storybook/test';
 
 type StoryArgs = NavigationOptionProps & { hasTitleOnly?: boolean };
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Navigation control](?path=/docs/content-listitem-listitem-navigation--docs).
+ */
 const meta: Meta<StoryArgs> = {
   component: NavigationOption,
   title: 'Option/NavigationOption',
-  tags: ['autodocs'],
+  tags: ['deprecated'],
   argTypes: {
     href: { control: 'text' },
     title: { control: 'text' },

package/src/navigationOption/NavigationOption.tsx

@@ -8,6 +8,14 @@ import { OptionProps, ReferenceType } from '../common/Option/Option';
 
 export type NavigationOptionProps = OptionProps;
 
+/**
+ * @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 NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(
   ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {
     if ('href' in rest && rest.href) {

package/src/navigationOptionsList/NavigationOptionsList.story.tsx

@@ -2,9 +2,13 @@ import NavigationOption from '../navigationOption';
 
 import NavigationOptionsList from '.';
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [List](?path=/docs/content-list--docs), [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Navigation control](?path=/docs/content-listitem-listitem-navigation--docs).
+ */
 export default {
   component: NavigationOptionsList,
   title: 'Option/NavigationOptionsList',
+  tags: ['deprecated'],
 };
 
 export const Basic = () => {

package/src/navigationOptionsList/NavigationOptionsList.tsx

@@ -5,6 +5,15 @@ export interface NavigationOptionListProps {
   children: React.ReactNode;
 }
 
+/**
+ * @deprecated Please use `<List />` and `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [List source](../list/List.tsx)
+ * @see [ListItem 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 NavigationOptionList = ({ children }: NavigationOptionListProps) => {
   return (
     <ul className="np-navigation-options-list">