@transferwise/components 0.0.0-experimental-c388243 → 0.0.0-experimental-18063d6

package/build/types/markup/constants.d.ts

@@ -1,20 +0,0 @@
-export declare const ALLOWED_TAGS: readonly ["important", "positive", "negative", "strong", "strikethrough", "paragraph", "p", "link", "a"];
-/**
- * Matches opening and closing tags from the ALLOWED_TAGS allow-list.
- *
- * Capture groups:
- *  1. `/` if this is a closing tag, undefined otherwise
- *  2. Tag name
- *  3. Raw attribute string between the tag name and `>` (empty for closing tags)
- *
- * The lookahead `(?=[\s>/])` after the tag name ensures we don't match partial
- * words — e.g. `<stronger>` won't be matched as `<strong>`.
- *
- * Global flag (`g`) allows iterative matching via `exec()`.
- */
-export declare const TAG_REGEX: RegExp;
-export declare const TAG_ALIASES: Record<string, string>;
-export declare const MAX_NESTING_DEPTH = 32;
-export declare const ALLOWED_TARGETS: string[];
-export declare const ALLOWED_PROTOCOLS: string[];
-//# sourceMappingURL=constants.d.ts.map

package/build/types/markup/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/markup/constants.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,YAAY,0GAUf,CAAC;AAEX;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,SAAS,QAGrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAiC,CAAC;AAGjF,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAGpC,eAAO,MAAM,eAAe,UAAsB,CAAC;AAGnD,eAAO,MAAM,iBAAiB,UAAwB,CAAC"}

package/build/types/markup/index.d.ts

@@ -1,3 +0,0 @@
-export { Markup } from './Markup';
-export type { MarkupActionHandler, MarkupActions, MarkupNode, MarkupProps } from './Markup.types';
-//# sourceMappingURL=index.d.ts.map

package/build/types/markup/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/markup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,mBAAmB,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/build/types/markup/utils/parseMarkup.d.ts

@@ -1,6 +0,0 @@
-import { MAX_NESTING_DEPTH } from '../constants';
-import { MarkupNode } from '../Markup.types';
-export { MAX_NESTING_DEPTH };
-/** Entry point: tokenises the input string, then parses the token stream into a MarkupNode tree. */
-export declare function parseMarkup(input: string): MarkupNode[];
-//# sourceMappingURL=parseMarkup.d.ts.map

package/build/types/markup/utils/parseMarkup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"parseMarkup.d.ts","sourceRoot":"","sources":["../../../../src/markup/utils/parseMarkup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,iBAAiB,EAA0B,MAAM,cAAc,CAAC;AAC1F,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAuN7B,oGAAoG;AACpG,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,EAAE,CAQvD"}

package/build/types/markup/utils/sanitise.d.ts

@@ -1,2 +0,0 @@
-export declare function isAllowedHref(href: string): boolean;
-//# sourceMappingURL=sanitise.d.ts.map

package/build/types/markup/utils/sanitise.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"sanitise.d.ts","sourceRoot":"","sources":["../../../../src/markup/utils/sanitise.ts"],"names":[],"mappings":"AAaA,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAmFnD"}

package/src/markup/Markup.css

@@ -1,28 +0,0 @@
-.wds-markup-emphasis {
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  font-style: normal;
-}
-.wds-markup-emphasis--important {
-  color: #37517e;
-  color: var(--color-content-primary);
-}
-.wds-markup-emphasis--positive {
-  color: #008026;
-  color: var(--color-content-positive);
-}
-.wds-markup-emphasis--negative {
-  color: #cf2929;
-  color: var(--color-content-negative);
-}
-.wds-markup-strong {
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-}
-.wds-markup-strikethrough {
-  -webkit-text-decoration: line-through;
-  text-decoration: line-through;
-}
-.wds-markup-paragraph {
-  margin: 0;
-}

package/src/markup/Markup.less

@@ -1,29 +0,0 @@
-.wds-markup-emphasis {
-  font-weight: var(--font-weight-semi-bold);
-  font-style: normal;
-}
-
-.wds-markup-emphasis--important {
-  color: var(--color-content-primary);
-}
-
-.wds-markup-emphasis--positive {
-  color: var(--color-content-positive);
-}
-
-.wds-markup-emphasis--negative {
-  color: var(--color-content-negative);
-}
-
-.wds-markup-strong {
-  font-weight: var(--font-weight-semi-bold);
-}
-
-/// @see https://www.webaxe.org/strikethrough-html-accessibility/
-.wds-markup-strikethrough {
-  text-decoration: line-through;
-}
-
-.wds-markup-paragraph {
-  margin: 0;
-}

package/src/markup/Markup.test.tsx

@@ -1,330 +0,0 @@
-import React from 'react';
-
-import { render, screen, userEvent } from '../test-utils';
-
-import { Markup } from './Markup';
-
-describe('Markup', () => {
-  it('renders plain text', () => {
-    render(<Markup>hello world</Markup>);
-    expect(screen.getByText('hello world')).toBeInTheDocument();
-  });
-
-  it('returns null for empty children', () => {
-    const { container } = render(<Markup />);
-    expect(container).toBeEmptyDOMElement();
-  });
-
-  describe('wrapper element', () => {
-    it('renders in a span wrapper for inline content', () => {
-      render(<Markup>content</Markup>);
-      const element = screen.getByText('content');
-      expect(element.tagName).toBe('SPAN');
-    });
-
-    it('renders in a div wrapper when paragraph nodes are present', () => {
-      const { container } = render(<Markup>{'<p>block content</p>'}</Markup>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.tagName).toBe('DIV');
-    });
-
-    it('renders in a div wrapper when nested paragraph nodes are present', () => {
-      const { container } = render(
-        <Markup>{'<important><p>nested paragraph</p></important>'}</Markup>,
-      );
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.tagName).toBe('DIV');
-    });
-
-    it('uses span when as="span" even with paragraphs', () => {
-      const { container } = render(<Markup as="span">{'<p>forced span</p>'}</Markup>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.tagName).toBe('SPAN');
-    });
-
-    it('uses div when as="div" even without paragraphs', () => {
-      const { container } = render(<Markup as="div">inline but div</Markup>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.tagName).toBe('DIV');
-    });
-
-    it('accepts any HTML element via as prop', () => {
-      const { container } = render(<Markup as="section">{'<p>in a section</p>'}</Markup>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.tagName).toBe('SECTION');
-    });
-
-    it('accepts a React component via as prop', () => {
-      const Card = ({
-        className,
-        children,
-      }: {
-        className?: string;
-        children?: React.ReactNode;
-      }) => (
-        <article data-testid="card" className={className}>
-          {children}
-        </article>
-      );
-      const { container } = render(
-        <Markup as={Card} className="custom">
-          {'<important>inside component</important>'}
-        </Markup>,
-      );
-      expect(screen.getByTestId('card')).toHaveClass('custom');
-      expect(container.querySelector('em')).toHaveTextContent('inside component');
-    });
-
-    it('passes data-testid to the wrapper element', () => {
-      render(<Markup data-testid="markup-wrapper">content</Markup>);
-      expect(screen.getByTestId('markup-wrapper')).toBeInTheDocument();
-    });
-
-    it('applies className to wrapper regardless of element type', () => {
-      render(<Markup className="custom">content</Markup>);
-      expect(screen.getByText('content')).toHaveClass('custom');
-    });
-
-    it('applies className to div wrapper with paragraphs', () => {
-      const { container } = render(<Markup className="block-wrapper">{'<p>paragraph</p>'}</Markup>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper).toHaveClass('block-wrapper');
-      expect(wrapper.tagName).toBe('DIV');
-    });
-  });
-
-  describe('emphasis', () => {
-    it('renders <important> with correct class', () => {
-      render(<Markup>{'<important>critical</important>'}</Markup>);
-      const element = screen.getByText('critical');
-      expect(element.tagName).toBe('EM');
-      expect(element).toHaveClass('wds-markup-emphasis', 'wds-markup-emphasis--important');
-    });
-
-    it('renders <positive> with correct class', () => {
-      render(<Markup>{'<positive>good</positive>'}</Markup>);
-      expect(screen.getByText('good')).toHaveClass('wds-markup-emphasis--positive');
-    });
-
-    it('renders <negative> with correct class', () => {
-      render(<Markup>{'<negative>bad</negative>'}</Markup>);
-      expect(screen.getByText('bad')).toHaveClass('wds-markup-emphasis--negative');
-    });
-
-    it('treats <warning> as plain text (unsupported tag)', () => {
-      render(<Markup>{'<warning>careful</warning>'}</Markup>);
-      expect(screen.getByText(/<warning>/)).toBeInTheDocument();
-    });
-  });
-
-  describe('links', () => {
-    it('renders a link with href', () => {
-      render(<Markup>{'<link href="/settings">settings</link>'}</Markup>);
-      const link = screen.getByRole('link', { name: 'settings' });
-      expect(link).toHaveAttribute('href', '/settings');
-    });
-
-    it('renders a link with target', () => {
-      render(<Markup>{'<link href="https://example.com" target="_blank">visit</link>'}</Markup>);
-      const link = screen.getByRole('link', { name: /visit/ });
-      expect(link).toHaveAttribute('target', '_blank');
-    });
-
-    it('renders a button-mode link with action', async () => {
-      const handleSave = jest.fn();
-      render(<Markup actions={{ save: handleSave }}>{'<link action="save">Save</link>'}</Markup>);
-      const button = screen.getByRole('button', { name: 'Save' });
-      await userEvent.click(button);
-      expect(handleSave).toHaveBeenCalledTimes(1);
-    });
-
-    it('renders as plain text when action handler is missing', () => {
-      render(<Markup>{'<link action="missing">text</link>'}</Markup>);
-      expect(screen.queryByRole('link')).not.toBeInTheDocument();
-      expect(screen.queryByRole('button')).not.toBeInTheDocument();
-      expect(screen.getByText('text')).toBeInTheDocument();
-    });
-
-    it('renders as plain text when href is unsafe', () => {
-      render(<Markup>{'<link href="javascript:alert(1)">evil</link>'}</Markup>);
-      expect(screen.queryByRole('link')).not.toBeInTheDocument();
-      expect(screen.getByText('evil')).toBeInTheDocument();
-    });
-  });
-
-  describe('nesting', () => {
-    it('renders emphasis inside link', () => {
-      render(<Markup>{'<link href="/x"><important>bold link</important></link>'}</Markup>);
-      const link = screen.getByRole('link');
-      const emphasis = link.querySelector('em');
-      expect(emphasis).toHaveClass('wds-markup-emphasis--important');
-      expect(emphasis).toHaveTextContent('bold link');
-    });
-
-    it('renders link inside emphasis', () => {
-      render(<Markup>{'<important>Read the <link href="/terms">terms</link></important>'}</Markup>);
-      const emphasis = screen.getByText(/Read the/);
-      expect(emphasis.tagName).toBe('EM');
-      const link = screen.getByRole('link', { name: 'terms' });
-      expect(emphasis).toContainElement(link);
-    });
-  });
-
-  describe('strong', () => {
-    it('renders <strong> as a strong element', () => {
-      render(<Markup>{'<strong>bold</strong>'}</Markup>);
-      const element = screen.getByText('bold');
-      expect(element.tagName).toBe('STRONG');
-    });
-  });
-
-  describe('strikethrough', () => {
-    it('renders <strikethrough> as a del element', () => {
-      render(<Markup>{'<strikethrough>removed</strikethrough>'}</Markup>);
-      const element = screen.getByText('removed');
-      expect(element.tagName).toBe('DEL');
-    });
-  });
-
-  describe('paragraph', () => {
-    it('renders <paragraph> as a p element', () => {
-      render(<Markup>{'<paragraph>A paragraph.</paragraph>'}</Markup>);
-      const element = screen.getByText('A paragraph.');
-      expect(element.tagName).toBe('P');
-    });
-
-    it('renders <p> as a p element', () => {
-      render(<Markup>{'<p>Short form.</p>'}</Markup>);
-      const element = screen.getByText('Short form.');
-      expect(element.tagName).toBe('P');
-    });
-  });
-
-  describe('newlines', () => {
-    it('renders newlines as br elements', () => {
-      const { container } = render(<Markup>{'line one\nline two'}</Markup>);
-      expect(container.querySelector('br')).toBeInTheDocument();
-    });
-  });
-
-  describe('non-string children (pass-through)', () => {
-    it('passes through JSX elements unchanged', () => {
-      render(
-        <Markup>
-          <button type="button">Click me</button>
-        </Markup>,
-      );
-      expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
-    });
-
-    it('passes through a React component', () => {
-      const Custom = () => <span data-testid="custom">custom component</span>;
-      render(
-        <Markup>
-          <Custom />
-        </Markup>,
-      );
-      expect(screen.getByTestId('custom')).toBeInTheDocument();
-    });
-
-    it('applies className when passing through JSX', () => {
-      const { container } = render(
-        <Markup className="wrapper">
-          <em>styled</em>
-        </Markup>,
-      );
-      expect(container.firstChild).toHaveClass('wrapper');
-    });
-
-    it('returns null for undefined children', () => {
-      const { container } = render(<Markup>{undefined}</Markup>);
-      expect(container).toBeEmptyDOMElement();
-    });
-
-    it('returns null for null children', () => {
-      const { container } = render(<Markup>{null}</Markup>);
-      expect(container).toBeEmptyDOMElement();
-    });
-
-    it('passes through numbers as-is', () => {
-      render(<Markup>{42}</Markup>);
-      expect(screen.getByText('42')).toBeInTheDocument();
-    });
-
-    it('passes through fragment with mixed content', () => {
-      render(
-        <Markup>
-          <>
-            <strong>bold</strong> and text
-          </>
-        </Markup>,
-      );
-      expect(screen.getByText('bold')).toBeInTheDocument();
-      expect(screen.getByText(/and text/)).toBeInTheDocument();
-    });
-  });
-
-  describe('accessibilityLabel', () => {
-    it('applies aria-label to emphasis tags', () => {
-      render(
-        <Markup>{'<important accessibilityLabel="Important notice">critical</important>'}</Markup>,
-      );
-      const element = screen.getByText('critical');
-      expect(element).toHaveAttribute('aria-label', 'Important notice');
-    });
-
-    it('applies aria-label to strong tags', () => {
-      render(<Markup>{'<strong accessibilityLabel="Highlighted">bold</strong>'}</Markup>);
-      expect(screen.getByText('bold')).toHaveAttribute('aria-label', 'Highlighted');
-    });
-
-    it('applies aria-label to strikethrough tags', () => {
-      render(
-        <Markup>
-          {'<strikethrough accessibilityLabel="No longer valid">old price</strikethrough>'}
-        </Markup>,
-      );
-      expect(screen.getByText('old price')).toHaveAttribute('aria-label', 'No longer valid');
-    });
-
-    it('applies aria-label to link tags with href', () => {
-      render(
-        <Markup>
-          {'<link href="/settings" accessibilityLabel="Go to account settings">settings</link>'}
-        </Markup>,
-      );
-      const link = screen.getByRole('link', { name: 'Go to account settings' });
-      expect(link).toBeInTheDocument();
-    });
-
-    it('applies aria-label to button-mode link tags', () => {
-      const handler = jest.fn();
-      render(
-        <Markup actions={{ save: handler }}>
-          {'<link action="save" accessibilityLabel="Save your changes">Save</link>'}
-        </Markup>,
-      );
-      expect(screen.getByRole('button', { name: 'Save your changes' })).toBeInTheDocument();
-    });
-
-    it('does not apply aria-label to paragraph tags', () => {
-      render(<Markup>{'<paragraph accessibilityLabel="ignored">content</paragraph>'}</Markup>);
-      const element = screen.getByText('content');
-      expect(element.tagName).toBe('P');
-      expect(element).not.toHaveAttribute('aria-label');
-    });
-
-    it('does not render aria-label attribute when not provided', () => {
-      render(<Markup>{'<strong>plain bold</strong>'}</Markup>);
-      expect(screen.getByText('plain bold')).not.toHaveAttribute('aria-label');
-    });
-  });
-
-  describe('security', () => {
-    it('does not render script tags', () => {
-      const { container } = render(<Markup>{'<script>alert("xss")</script>'}</Markup>);
-      expect(container.querySelector('script')).not.toBeInTheDocument();
-      expect(container).toHaveTextContent('<script>alert("xss")</script>');
-    });
-  });
-});

package/src/markup/Markup.tsx

@@ -1,144 +0,0 @@
-import React, { Fragment, useMemo } from 'react';
-
-import Link from '../link';
-
-import { parseMarkup } from './utils/parseMarkup';
-import { isAllowedHref } from './utils/sanitise';
-import type { MarkupActions, MarkupNode, MarkupProps } from './Markup.types';
-
-function renderNodes(nodes: MarkupNode[], actions?: MarkupActions): React.ReactNode[] {
-  return nodes.map((node, index) => renderNode(node, actions, index));
-}
-
-function renderLinkNode(
-  node: Extract<MarkupNode, { type: 'link' }>,
-  actions: MarkupActions | undefined,
-  key: number,
-): React.ReactNode {
-  const children = renderNodes(node.children, actions);
-
-  if (node.action && actions?.[node.action]) {
-    return (
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-      <Link key={key} aria-label={node.accessibilityLabel} onClick={actions[node.action]}>
-        {children}
-      </Link>
-    );
-  }
-
-  if (node.href && isAllowedHref(node.href)) {
-    return (
-      <Link key={key} href={node.href} target={node.target} aria-label={node.accessibilityLabel}>
-        {children}
-      </Link>
-    );
-  }
-
-  return <Fragment key={key}>{children}</Fragment>;
-}
-
-function renderNode(
-  node: MarkupNode,
-  actions: MarkupActions | undefined,
-  key: number,
-): React.ReactNode {
-  switch (node.type) {
-    case 'text':
-      return <Fragment key={key}>{node.content}</Fragment>;
-    case 'newline':
-      return <br key={key} />;
-    case 'important':
-    case 'positive':
-    case 'negative':
-      return (
-        <em
-          key={key}
-          className={`wds-markup-emphasis wds-markup-emphasis--${node.type}`}
-          aria-label={node.accessibilityLabel}
-        >
-          {renderNodes(node.children, actions)}
-        </em>
-      );
-    case 'strong':
-      return (
-        <strong key={key} className="wds-markup-strong" aria-label={node.accessibilityLabel}>
-          {renderNodes(node.children, actions)}
-        </strong>
-      );
-    case 'strikethrough':
-      return (
-        <del key={key} className="wds-markup-strikethrough" aria-label={node.accessibilityLabel}>
-          {renderNodes(node.children, actions)}
-        </del>
-      );
-    case 'paragraph':
-      return (
-        <p key={key} className="wds-markup-paragraph">
-          {renderNodes(node.children, actions)}
-        </p>
-      );
-    case 'link':
-      return renderLinkNode(node, actions, key);
-  }
-}
-
-/**
- * Parses a markup string and renders it as React elements. Supports `<important>`,
- * `<positive>`, `<negative>`, `<strong>`, `<strikethrough>`, `<paragraph>` (alias `<p>`),
- * and `<link>` (alias `<a>`) with secure href validation.
- *
- * It only processes `string` input, while `ReactNode` is passed-through without processing.
- *
- * > The component supersedes [Emphasis](?path=/docs/typography-emphasis--docs), which will be
- * eventually deprecated.
- *
- * @see http://storybook.wise.design/?path=/docs/typography-markup--docs
- * @link ../emphasis/Emphasis | Emphasis
- */
-function hasParagraph(nodes: MarkupNode[]): boolean {
-  for (const node of nodes) {
-    if (node.type === 'paragraph') {
-      return true;
-    }
-    if ('children' in node && hasParagraph(node.children)) {
-      return true;
-    }
-  }
-  return false;
-}
-
-export const Markup: React.FC<MarkupProps> = ({
-  children,
-  actions,
-  as,
-  className,
-  'data-testid': testId,
-}) => {
-  const tree = useMemo(
-    () => (typeof children === 'string' ? parseMarkup(children) : []),
-    [children],
-  );
-
-  if (typeof children !== 'string') {
-    if (children == null) {
-      return null;
-    }
-    return (
-      <span className={className} data-testid={testId}>
-        {children}
-      </span>
-    );
-  }
-
-  if (tree.length === 0) {
-    return null;
-  }
-
-  const Element = as ?? (hasParagraph(tree) ? 'div' : 'span');
-
-  return (
-    <Element className={className} data-testid={testId}>
-      {renderNodes(tree, actions)}
-    </Element>
-  );
-};

package/src/markup/Markup.types.ts

@@ -1,48 +0,0 @@
-import React from 'react';
-
-import type { LinkProps } from '../link';
-
-export type MarkupNode =
-  | { type: 'text'; content: string }
-  | { type: 'newline' }
-  | { type: 'important'; accessibilityLabel?: string; children: MarkupNode[] }
-  | { type: 'positive'; accessibilityLabel?: string; children: MarkupNode[] }
-  | { type: 'negative'; accessibilityLabel?: string; children: MarkupNode[] }
-  | { type: 'strong'; accessibilityLabel?: string; children: MarkupNode[] }
-  | { type: 'strikethrough'; accessibilityLabel?: string; children: MarkupNode[] }
-  | { type: 'paragraph'; children: MarkupNode[] }
-  | {
-      type: 'link';
-      href?: string;
-      action?: string;
-      target?: string;
-      accessibilityLabel?: string;
-      children: MarkupNode[];
-    };
-
-export type MarkupActionHandler = NonNullable<LinkProps['onClick']>;
-
-export type MarkupActions = Record<string, MarkupActionHandler>;
-
-export interface MarkupProps {
-  /**
-   * Markup string to parse and render, or arbitrary JSX to pass through unchanged.
-   * Parsing only occurs when children is a string.
-   * */
-  children?: React.ReactNode;
-  /**
-   * Map of action names to click handlers for `<link action="name">` button-mode links.
-   * */
-  actions?: MarkupActions;
-  /**
-   * Wrapper element. Defaults to `div` when the parsed tree contains `<paragraph>` nodes,
-   * `span` otherwise. Set explicitly to override auto-detection.
-   * When passing a custom React component, it must accept a `className` prop.
-   * */
-  as?: React.ElementType;
-  className?: string;
-  /**
-   * When using a custom React component via `as`, it must also accept a `data-testid` prop.
-   * */
-  'data-testid'?: string;
-}