@transferwise/components 0.0.0-experimental-033dd15 → 0.0.0-experimental-64ea603

package/src/divider/index.ts

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

package/src/dropFade/DropFade.story.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/forbid-dom-props */
 import { action } from '@storybook/addon-actions';
 import { useState } from 'react';
 

package/src/dropFade/DropFade.tsx

@@ -26,7 +26,6 @@ const DropFade = ({ children, show }: { children: ReactElement; show: boolean })
         setHeight(0);
       }}
     >
-      {/* eslint-disable-next-line react/forbid-dom-props */}
       <div ref={reference} style={{ height }} className="np-dropfade">
         {clonedChild}
       </div>

package/src/emphasis/EmphasisHtmlTransformer.spec.tsx

@@ -7,7 +7,7 @@ describe('creates safe, enphasised html', () => {
       emphasisHtmlTransformer.transform(
         '<script>something malicious</script><p>some text & more text</p>',
       ),
-    ).toStrictEqual(
+    ).toBe(
       '&lt;script&gt;something malicious&lt;/script&gt;&lt;p&gt;some text &amp; more text&lt;/p&gt;',
     );
   });
@@ -18,7 +18,7 @@ describe('creates safe, enphasised html', () => {
       emphasisHtmlTransformer.transform(
         '<script>something malicious</script><positive>hello</positive><negative>world</negative><positive>!</positive>',
       ),
-    ).toStrictEqual(
+    ).toBe(
       '&lt;script&gt;something malicious&lt;/script&gt;<em class="emphasis emphasis--positive">hello</em><em class="emphasis emphasis--negative">world</em><em class="emphasis emphasis--positive">!</em>',
     );
   });
@@ -26,11 +26,11 @@ describe('creates safe, enphasised html', () => {
   describe('supports new line characters', () => {
     it('supports slash n in the string', () => {
       const emphasisHtmlTransformer = new EmphasisHtmlTransformer();
-      expect(emphasisHtmlTransformer.transform('hello\\nworld')).toStrictEqual('hello<br />world');
+      expect(emphasisHtmlTransformer.transform('hello\\nworld')).toBe('hello<br />world');
     });
     it('supports new line characters', () => {
       const emphasisHtmlTransformer = new EmphasisHtmlTransformer();
-      expect(emphasisHtmlTransformer.transform('hello\nworld')).toStrictEqual('hello<br />world');
+      expect(emphasisHtmlTransformer.transform('hello\nworld')).toBe('hello<br />world');
     });
   });
 });

package/src/emphasis/EmphasisHtmlTransformer.ts

@@ -13,9 +13,9 @@ type Tags = {
 };
 
 class EmphasisHtmlTransformer {
-  tags: Array<Tags>;
+  tags: Tags[];
 
-  constructor(whitelistedTags?: Array<string>) {
+  constructor(whitelistedTags?: string[]) {
     this.tags = (whitelistedTags || []).map((tag) => {
       return {
         transformed: {

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -29,7 +29,9 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
             width="16"
           >
             <path
-              d="M22.286 11.316H4.629l7.114-7.114-1.2-1.2-8.572 8.571a.829.829 0 0 0 0 1.2l8.572 8.572 1.2-1.2-7.114-7.114h17.657v-1.715Z"
+              clip-rule="evenodd"
+              d="m5.414 11 6.293-6.293-1.414-1.414L2.3 11.286a1.01 1.01 0 0 0 0 1.428l7.993 7.993 1.414-1.414L5.414 13H22v-2z"
+              fill-rule="evenodd"
             />
           </svg>
         </span>
@@ -74,7 +76,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
               width="24"
             >
               <path
-                d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
+                d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
               />
             </svg>
           </span>
@@ -190,7 +192,7 @@ exports[`FlowNavigation renders as expected 1`] = `
               width="24"
             >
               <path
-                d="m19.629 5.915-1.2-1.2-6.257 6.257-6.258-6.257-1.2 1.2 6.258 6.257-6.258 6.257 1.2 1.2 6.258-6.257 6.257 6.257 1.2-1.2-6.258-6.257 6.258-6.257Z"
+                d="m12 13.414-7.293 7.293-1.414-1.414L10.586 12 3.293 4.707l1.414-1.414L12 10.586l7.293-7.293 1.414 1.414L13.414 12l7.293 7.293-1.414 1.414z"
               />
             </svg>
           </span>

package/src/header/Header.accessibility.docs.mdx

@@ -0,0 +1,85 @@
+import { Meta, Canvas, Source } from '@storybook/blocks';
+import { NavigationOption } from '..';
+import { Bulb } from '@transferwise/icons';
+import * as stories from './Header.story';
+
+<Meta title="Typography/Header/Accessibility" />
+
+# Accessibility
+
+Given the `Header` is a key component for structuring content and conveying hierarchy, ensuring its accessibility is crucial for an inclusive experience.
+
+<NavigationOption
+  media={<Bulb size={24} />}
+  title="Design guidance"
+  content="Before you start, familiarise yourself with the dedicated accessibility documentation."
+  href="https://wise.design/components/section-header#accessibility"
+/>
+
+<br />
+<br />
+
+## Semantic headings
+
+The `Header` component should always use semantic HTML heading tags (`<h1>` to `<h6>`) to convey the document structure. Avoid using non-semantic tags unless absolutely necessary.
+
+<Source dark code={`
+// ✅ semantic heading
+<Header as="h1">Main heading</Header>
+
+// ⚠️ use with care
+
+<Header as="div">Non-semantic heading</Header>
+`}/>
+
+**Additional resources:**
+
+1. [Deque: Headings must follow a logical order](https://dequeuniversity.com/rules/axe/4.2/heading-order)
+2. [MDN: Using headings](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)
+
+<br />
+
+## ARIA roles
+
+If the `Header` is used in a non-semantic context, ensure it is accessible by applying appropriate ARIA roles, such as `role="heading"`, and providing a `aria-level` attribute to indicate its level in the hierarchy.
+
+<Source
+  dark
+  code={`
+// ⚠️ use with care
+<Header as="div" role="heading" aria-level="1">
+  Main heading
+</Header>
+`}
+/>
+
+<br />
+
+## Accessibility with actions
+
+When using the `Header` with actions (e.g., buttons or links), ensure the actions are accessible by providing clear labels and ARIA attributes.
+
+<Source
+  dark
+  code={`
+// ✅ accessible action
+<Header
+  as="h2"
+  action={{
+    'aria-label': 'Edit section',
+    text: 'Edit',
+    onClick: () => alert('Edit clicked'),
+  }}
+>
+  Section heading
+</Header>
+`}
+/>
+
+<br />
+
+## Visual hierarchy
+
+Ensure the `Header` visually aligns with its semantic level. For example, an `<h1>` should be the largest and most prominent, while an `<h6>` should be the smallest.
+
+<Canvas of={stories.Playground} />

package/src/header/Header.css

@@ -1,26 +1,43 @@
 .np-header {
-  display: flex;
-  justify-content: space-between;
   align-items: flex-end;
-  max-width: 100%;
-  padding: 8px 0;
-  padding: var(--size-8) 0;
   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);
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  margin-bottom: var(--size-8);
+  max-width: 100%;
+  padding: 8px 0;
+  padding: var(--size-8) 0;
+  position: relative;
+  width: 100%;
+}
+.np-header--section {
+  align-items: center;
+  border-bottom: none;
+}
+.np-header--section .np-header__button,
+.np-header--section .np-header__link {
+  margin-block-end: 0;
+  position: relative;
 }
 .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);
 }
+.np-header__link,
+.np-header__button {
+  position: absolute;
+  right: 0;
+}
+.np-header__link {
+  bottom: 7px;
+}
 .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);
+  margin-inline: calc(17px * -1);
+  margin-bottom: calc(6px * -1);
 }

package/src/header/Header.less

@@ -1,20 +1,42 @@
 .np-header {
+  align-items: flex-end;
+  border-bottom: 1px solid var(--color-border-neutral);
+  column-gap: var(--size-24);
   display: flex;
   justify-content: space-between;
-  align-items: flex-end;
+  margin-bottom: var(--size-8);
   max-width: 100%;
   padding: var(--size-8) 0;
-  border-bottom: 1px solid var(--color-border-neutral);
-  margin-bottom: var(--size-8);
+  position: relative;
+  width: 100%;
+
+  &--section {
+    align-items: center;
+    border-bottom: none;
+
+    .np-header__button,
+    .np-header__link {
+      margin-block-end: 0;
+      position: relative;
+    }
+  }
 
   &__title {
     color: var(--color-content-secondary);
   }
 
-  column-gap: var(--size-24);
+  &__link,
+  &__button {
+    position: absolute;
+    right: 0;
+  }
+
+  &__link {
+    bottom: 7px;
+  }
 
   &__button {
-    margin-inline: calc(var(--size-16) * -1);
-    margin-bottom: calc(var(--size-4) * -1);
+    margin-inline: calc(17px * -1);
+    margin-bottom: calc(6px * -1);
   }
-}
+}

package/src/header/Header.spec.tsx

@@ -1,95 +1,113 @@
 import { render, screen, userEvent } from '../test-utils';
-
-import Header from '.';
+import Header, { HeaderProps } from '.';
 
 describe('Header', () => {
-  it('can set header title', () => {
-    render(<Header title="Header title" />);
+  const defaultProps: HeaderProps = {
+    title: 'Header title',
+  };
+
+  const renderHeader = (props: Partial<HeaderProps> = {}) => {
+    return render(<Header {...defaultProps} {...props} />);
+  };
 
+  it('can set header title', () => {
+    renderHeader();
     expect(screen.getByText('Header title')).toBeInTheDocument();
   });
 
   it('can trigger header action', async () => {
     const onHeaderActionClick = jest.fn();
-
-    render(
-      <Header
-        title="Header title"
-        action={{
-          text: 'Click me!',
-          onClick: onHeaderActionClick,
-        }}
-      />,
-    );
+    renderHeader({
+      action: {
+        text: 'Click me!',
+        onClick: onHeaderActionClick,
+      },
+    });
 
     await userEvent.click(screen.getByRole('button', { name: 'Click me!' }));
-
     expect(onHeaderActionClick).toHaveBeenCalledTimes(1);
   });
 
   it('can set aria-label property for header action', async () => {
     const onHeaderActionClick = jest.fn();
-
-    render(
-      <Header
-        title="Header title"
-        action={{
-          'aria-label': 'Magic',
-          text: 'Click me!',
-          onClick: onHeaderActionClick,
-        }}
-      />,
-    );
+    renderHeader({
+      action: {
+        'aria-label': 'Magic',
+        text: 'Click me!',
+        onClick: onHeaderActionClick,
+      },
+    });
 
     await userEvent.click(screen.getByRole('button', { name: 'Magic' }));
-
     expect(onHeaderActionClick).toHaveBeenCalledTimes(1);
   });
 
   it('renders header action as a link when href is provided', () => {
-    render(
-      <Header
-        title="Header title"
-        action={{
-          'aria-label': 'Click me!',
-          text: 'I am a link',
-          href: 'https://wise.com',
-        }}
-      />,
-    );
+    renderHeader({
+      action: {
+        'aria-label': 'Click me!',
+        text: 'I am a link',
+        href: 'https://wise.com',
+      },
+    });
 
     const link = screen.getByRole('link', { name: 'Click me!' });
-
     expect(link).toHaveAttribute('href', 'https://wise.com');
   });
 
   it('renders header with h5 heading tag by default', () => {
-    render(<Header title="Header title" />);
-
+    renderHeader();
     expect(screen.getByRole('heading', { name: 'Header title', level: 5 })).toBeInTheDocument();
   });
 
   it('can render header with specific heading tag', () => {
-    render(<Header as="h3" title="Header title" />);
-
+    renderHeader({ as: 'h3' });
     expect(screen.getByRole('heading', { name: 'Header title', level: 3 })).toBeInTheDocument();
   });
 
-  it('runs onClick if specified even when it got href prop', async () => {
-    const callback = jest.fn();
+  it('renders header with section level', () => {
+    renderHeader({ level: '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();
+
+    renderHeader({ as: 'legend' });
+
+    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(
-      <Header
-        as="h3"
-        title="Header title"
-        action={{ text: 'Click me', href: '#', onClick: callback }}
-      />,
+      <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();
+    renderHeader({
+      as: 'h3',
+      action: { text: 'Click me', href: '#', onClick: callback },
+    });
+
     const button = screen.getByRole('link', { name: 'Click me' });
     expect(button).toBeInTheDocument();
 
     await userEvent.click(button);
-
     expect(callback).toHaveBeenCalledTimes(1);
   });
 });