@transferwise/components 0.0.0-experimental-b2dc1ea → 0.0.0-experimental-4c86474

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-b2dc1ea",
+  "version": "0.0.0-experimental-4c86474",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,9 +92,9 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
+    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.18.0",
-    "@wise/components-theming": "1.6.0",
-    "@transferwise/less-config": "3.1.0"
+    "@wise/components-theming": "1.6.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/divider/Divider.css

@@ -0,0 +1,24 @@
+.wds-Divider {
+  --Divider-border-width: var(--size-4);
+  --Divider-border-color: var(--color-border-neutral);
+  --Divider-border-style: solid;
+  --Divider-dash-length: var(--size-4);
+  --Divider-dash-spacing: var(--size-4);
+  border-top: 4px solid rgba(0,0,0,0.10196);
+  border-top: var(--Divider-border-width) var(--Divider-border-style) var(--Divider-border-color);
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  height: 4px;
+  height: var(--Divider-border-width);
+  width: 100%;
+}
+.wds-Divider--content {
+  border-top: none;
+  background: repeating-linear-gradient(to right, var(--Divider-border-color), var(--Divider-border-color) var(--Divider-dash-length), transparent var(--Divider-dash-length), transparent calc(var(--Divider-dash-length) + var(--Divider-dash-spacing)));
+  height: var(--Divider-border-width);
+}
+.wds-Divider--content,
+.wds-Divider--subsection {
+  --Divider-border-width: 1px;
+}

package/src/divider/Divider.less

@@ -0,0 +1,31 @@
+.wds-Divider {
+    --Divider-border-width: var(--size-4);
+    --Divider-border-color: var(--color-border-neutral);
+    --Divider-border-style: solid;
+    --Divider-dash-length: var(--size-4);
+    --Divider-dash-spacing: var(--size-4);
+
+    border-top: var(--Divider-border-width) var(--Divider-border-style) var(--Divider-border-color);
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    height: var(--Divider-border-width);
+    width: 100%;
+
+    &--content {
+        border-top: none;
+        background: repeating-linear-gradient(
+            to right,
+            var(--Divider-border-color),
+            var(--Divider-border-color) var(--Divider-dash-length),
+            transparent var(--Divider-dash-length),
+            transparent calc(var(--Divider-dash-length) + var(--Divider-dash-spacing))
+        );
+        height: var(--Divider-border-width);
+    }
+
+    &--content,
+    &--subsection {
+        --Divider-border-width: 1px;
+    }
+}

package/src/divider/Divider.spec.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Divider, { DividerProps } from './Divider';
+
+describe('Divider', () => {
+  const defaultProps: DividerProps = {
+    testId: 'test-divider',
+  };
+
+  let rerenderDivider: (props?: DividerProps) => void;
+
+  beforeEach(() => {
+    const { rerender } = render(<Divider {...defaultProps} />);
+
+    rerenderDivider = (props?: DividerProps) => {
+      rerender(<Divider {...defaultProps} {...props} />);
+    };
+  });
+
+  const renderDivider = (props: Partial<DividerProps> = {}) => {
+    return render(<Divider {...props} />);
+  };
+
+  it('renders', () => {
+    expect(screen.getByTestId('test-divider')).toBeInTheDocument();
+    expect(screen.getByTestId('test-divider')).toHaveClass('wds-Divider');
+  });
+
+  it('renders as an `div`', () => {
+    const props: DividerProps = {
+      as: 'div',
+    };
+
+    expect(screen.getByTestId('test-divider')).toBeInTheDocument();
+    expect(screen.getByTestId('test-divider')).not.toHaveAttribute('role', 'separator');
+    expect(screen.getByTestId('test-divider')).not.toHaveAttribute(
+      'aria-orientation',
+      'horizontal',
+    );
+
+    rerenderDivider(props);
+
+    expect(screen.getByTestId('test-divider')).toHaveAttribute('role', 'separator');
+    expect(screen.getByTestId('test-divider')).toHaveAttribute('aria-orientation', 'horizontal');
+  });
+
+  it('renders with a custom class', () => {
+    const props: DividerProps = {
+      className: 'custom-class',
+    };
+
+    expect(screen.getByTestId('test-divider')).not.toHaveClass('custom-class');
+
+    rerenderDivider(props);
+
+    expect(screen.getByTestId('test-divider')).toHaveClass('custom-class');
+  });
+
+  it('renders with content variant class', () => {
+    const props: DividerProps = {
+      variant: 'content',
+    };
+
+    expect(screen.getByTestId('test-divider')).not.toHaveClass('wds-Divider--content');
+
+    rerenderDivider(props);
+
+    expect(screen.getByTestId('test-divider')).toHaveClass('wds-Divider', 'wds-Divider--content');
+  });
+
+  it('renders with subsection variant class', () => {
+    const props: DividerProps = {
+      variant: 'subsection',
+    };
+
+    expect(screen.getByTestId('test-divider')).not.toHaveClass('wds-Divider--subsection');
+
+    rerenderDivider(props);
+
+    expect(screen.getByTestId('test-divider')).toHaveClass(
+      'wds-Divider',
+      'wds-Divider--subsection',
+    );
+  });
+});

package/src/divider/Divider.story.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Divider from './Divider';
+
+const meta: Meta<typeof Divider> = {
+  component: Divider,
+  title: 'Layouts/Divider',
+  tags: ['autodocs'],
+  parameters: {
+    actions: { argTypesRegex: null },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Divider>;
+
+export const Basic: Story = {};
+
+export const Subsection: Story = {
+  args: {
+    variant: 'subsection',
+  },
+};
+
+export const Content: Story = {
+  args: {
+    variant: 'content',
+  },
+};

package/src/divider/Divider.tsx

@@ -0,0 +1,72 @@
+import { clsx } from 'clsx';
+import React, { FunctionComponent } from 'react';
+
+export interface DividerProps {
+  /** Option prop to specify DOM render element */
+  as?: 'hr' | 'div';
+
+  /** Optional prop to specify classNames onto the Divider */
+  className?: string;
+
+  /** Optional prop to specify the ID used for testing */
+  testId?: string;
+
+  /** Optional prop to specify the variant of the Divider */
+  variant?: 'content' | 'subsection' | 'section';
+}
+
+/**
+ * Divider component
+ *
+ * The Divider component is used to visually separate different sections of content.
+ * It can be rendered as a horizontal line and supports various styles such as
+ * section, subsection, and content. Additionally, the Divider can include custom styles.
+ *
+ * @component
+ * @param {'hr' | 'div'} [as='hr'] - Option prop to specify DOM render element.
+ * @param {string} [className] - Optional prop to specify classNames onto the Divider.
+ * @param {string} [testId] - Optional prop to specify the ID used for testing.
+ * @param {'section' | 'subsection' | 'content'} [variant='section'] - Optional prop to specify the variant of the Divider.
+ *
+ * @example
+ * // Example usage:
+ * import Divider from './Divider';
+ *
+ * function App() {
+ *   return (
+ *     <div>
+ *       <p>Content above the divider</p>
+ *       <Divider variant="content" />
+ *       <p>Content below the divider</p>
+ *       <Divider variant="subsection" />
+ *     </div>
+ *   );
+ * }
+ */
+const Divider: FunctionComponent<DividerProps> = ({
+  as = 'hr',
+  className,
+  testId,
+  variant = 'section',
+  ...props
+}) => {
+  const Element = as;
+  const variantClass = variant && variant !== 'section' ? `wds-Divider--${variant}` : '';
+
+  const commonProps = {
+    className: clsx('wds-Divider', variantClass, className),
+    'data-testid': testId,
+  };
+
+  const divProps = {
+    ...commonProps,
+    'aria-orientation': 'horizontal',
+    role: 'separator',
+  };
+
+  const componentProps = Element === 'div' ? divProps : commonProps;
+
+  return <Element {...componentProps} {...props} />;
+};
+
+export default Divider;

package/src/divider/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Divider';
+export type { DividerProps } from './Divider';

package/src/header/Header.css

@@ -14,9 +14,6 @@
   -moz-column-gap: var(--size-24);
        column-gap: var(--size-24);
 }
-.np-header--section {
-  border-bottom: none;
-}
 .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);

package/src/header/Header.less

@@ -7,10 +7,6 @@
   border-bottom: 1px solid var(--color-border-neutral);
   margin-bottom: var(--size-8);
 
-  &--section {
-    border-bottom: none;
-  }
-
   &__title {
     color: var(--color-content-secondary);
   }

package/src/header/Header.spec.tsx

@@ -75,39 +75,6 @@ describe('Header', () => {
     expect(screen.getByRole('heading', { name: 'Header title', level: 3 })).toBeInTheDocument();
   });
 
-  it('renders header with section variant', () => {
-    render(<Header title="Header title" variant="section" />);
-
-    const header = screen.getByRole('heading', { name: 'Header title' });
-    expect(header).toHaveClass('np-header--section');
-  });
-
-  it('warns if Header as legend is not inside a fieldset', () => {
-    const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
-
-    render(<Header as="legend" title="Header title" />);
-
-    expect(consoleWarnMock).toHaveBeenCalledWith(
-      'Legends should be the first child in a fieldset, and this is not possible when including an action',
-    );
-
-    consoleWarnMock.mockRestore();
-  });
-
-  it('does not warn if Header as legend is inside a fieldset', () => {
-    const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
-
-    render(
-      <fieldset>
-        <Header as="legend" title="Header title" />
-      </fieldset>,
-    );
-
-    expect(consoleWarnMock).not.toHaveBeenCalled();
-
-    consoleWarnMock.mockRestore();
-  });
-
   it('runs onClick if specified even when it got href prop', async () => {
     const callback = jest.fn();
     render(

package/src/header/Header.story.tsx

@@ -1,67 +1,53 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
 import Header from './Header';
 
-const meta: Meta<typeof Header> = {
+export default {
   component: Header,
   title: 'Typography/Header',
-  tags: ['autodocs'],
-  parameters: {
-    actions: { argTypesRegex: null },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Header>;
-
-export const Basic: Story = {
-  args: {
-    title: 'Group header',
-  },
-};
-
-export const WithAction: Story = {
-  args: {
-    ...Basic.args,
-    action: {
-      'aria-label': 'Magic',
-      text: 'Action',
-      onClick: () => alert('Action!'),
-    },
-  },
 };
 
-export const WithActionLink: Story = {
-  args: {
-    ...Basic.args,
-    action: {
-      text: 'Link',
-      href: 'https://wise.com',
-    },
-  },
+export const Basic = () => {
+  return <Header title="Header title" />;
 };
 
-export const WithCustomElement: Story = {
-  args: {
-    title: 'Legend header',
-    as: 'legend',
-  },
+export const WithAction = () => {
+  return (
+    <Header
+      title="Header title"
+      action={{
+        'aria-label': 'Magic',
+        text: 'Click me!',
+        onClick: () => alert('Action!'),
+      }}
+    />
+  );
 };
 
-export const WithSectionVariant: Story = {
-  args: {
-    title: 'Section header',
-    variant: 'section',
-  },
+export const WithActionAsLink = () => {
+  return (
+    <Header
+      title="Header title"
+      action={{
+        text: 'This is a link',
+        href: 'https://wise.com',
+      }}
+    />
+  );
 };
 
-export const WithSectionVariantAndAction: Story = {
-  args: {
-    ...WithSectionVariant.args,
-    action: {
-      'aria-label': 'Magic',
-      text: 'Action',
-      onClick: () => alert('Action!'),
-    },
-  },
+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');
+
+          // we can stop the navigation from happening as onClick will always run before href redirect
+          event.preventDefault();
+        },
+      }}
+    />
+  );
 };

package/src/header/Header.tsx

@@ -1,158 +1,92 @@
 import { clsx } from 'clsx';
 
 import { ActionButtonProps } from '../actionButton/ActionButton';
+import Button from '../button';
 import { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';
 import Link from '../link';
-import Button from '../button';
 import Title from '../title';
-import React, { useEffect, useRef, FunctionComponent } from 'react';
 
 type ActionProps = AriaLabelProperty & {
   text: string;
 };
 
 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 an `ActionButton`.
+   * 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 */
+  /**
+   * Override the heading element rendered for the title, useful to specify the semantics of your header.
+   *
+   * @default "h5"
+   */
   as?: Heading | 'legend';
-
-  /** Optional prop to specify classNames onto the Header */
-  className?: string;
-
-  /** Optional prop to specify the ID used for testing */
-  testId?: string;
-
-  /** Required prop to set the title of the Header. */
   title: string;
+};
 
-  /** Optional prop to specify the variant of the Header */
-  variant?: 'section' | 'group';
-}
-
-/**
- * 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 { 'aria-label': ariaLabel, text, onClick } = action;
-
-    if ('href' in action) {
-      const { href, target, onClick: linkOnClick } = action;
-      return (
-        <Link
-          ref={ref as React.Ref<HTMLAnchorElement>}
-          href={href}
-          target={target}
-          aria-label={ariaLabel}
-          onClick={linkOnClick}
-        >
-          {text}
-        </Link>
-      );
-    }
+const HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {
+  const props = {
+    'aria-label': action['aria-label'],
+  };
 
+  if ('href' in action) {
     return (
-      <Button
-        ref={ref as React.Ref<HTMLButtonElement>}
-        className="np-header__button"
-        priority="tertiary"
-        size="sm"
-        aria-label={ariaLabel}
-        onClick={onClick}
-      >
-        {text}
-      </Button>
+      <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>
+        {action.text}
+      </Link>
     );
-  },
-);
+  }
+
+  return (
+    <Button
+      className="np-header__button"
+      priority="tertiary"
+      size="sm"
+      onClick={action.onClick}
+      {...props}
+    >
+      {action.text}
+    </Button>
+  );
+};
 
 /**
- * Header component
- *
- * The header component is used to render a section header with an optional action button or link.
- * The header component can be rendered as a `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, or `legend` element.
  *
- * @component
- * @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'} [variant='group'] - Optional prop to specify the variant of the section header.
- * @param {string} [className] - Optional prop to specify classNames onto the Header.
- * @param {string} [testId] - Optional prop to specify the ID used for testing.
+ * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header
  *
- * @example
- * // Example usage:
- * import Header from './Header';
- *
- * function App() {
- *   return (
- *     <Header title="Header" />
- *   );
- * }
  */
-const Header: FunctionComponent<HeaderProps> = React.forwardRef(
-  (
-    { as = 'h5', action, className, testId, title, variant = 'group', ...props },
-    ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,
-  ) => {
-    const internalRef = useRef<HTMLLegendElement>(null);
-    const variantTypography =
-      variant === 'section' ? Typography.TITLE_SUBSECTION : Typography.TITLE_GROUP;
-    const headerClasses = clsx('np-header', className, {
-      'np-header--section': variant === 'section',
-      'np-header__title': !action || as === 'legend',
-    });
-
-    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 || as === 'legend') {
-      return (
-        <Title ref={internalRef} as={as} type={variantTypography} {...commonProps} {...props}>
-          {title}
-        </Title>
-      );
-    }
-
-    const actionRef = React.createRef<HTMLButtonElement | HTMLAnchorElement>();
-
+export const Header = ({ action, as = 'h5', title, className }: HeaderProps) => {
+  if (!action) {
     return (
-      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>
-        <Title as={as} type={variantTypography} className="np-header__title">
-          {title}
-        </Title>
-        <HeaderAction ref={actionRef} action={action} />
-      </div>
+      <Title
+        as={as}
+        type={Typography.TITLE_GROUP}
+        className={clsx('np-header', 'np-header__title', className)}
+      >
+        {title}
+      </Title>
     );
-  },
-);
+  }
+
+  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} 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/index.ts

@@ -28,7 +28,7 @@ export type { DecisionProps } from './decision/Decision';
 export type { DefinitionListProps, DefinitionListDefinition } from './definitionList';
 export type { DimmerProps } from './dimmer';
 export type { DrawerProps } from './drawer';
-export type { HeaderProps } from './header';
+export type { DividerProps } from './divider';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
@@ -125,6 +125,7 @@ export { default as Decision } from './decision';
 export { default as DefinitionList } from './definitionList';
 export { default as Dimmer } from './dimmer';
 export { default as Display } from './display';
+export { default as Divider } from './divider';
 export { default as Drawer } from './drawer';
 export { default as DropFade } from './dropFade';
 export { default as Emphasis } from './emphasis';