@transferwise/components 0.0.0-experimental-bcea1dd → 0.0.0-experimental-1168b1c

package/src/Markup/_stories/Markup.docs.mdx

@@ -1,75 +0,0 @@
-import { Meta, Source } from '@storybook/addon-docs/blocks';
-
-<Meta title="Typography/Markup/Developer notes" />
-
-# Developer notes
-
-## How parsing works
-
-The parser runs in two phases: **tokenise** then **parse**.
-
-### Phase 1: Tokenise
-
-The input string is scanned left-to-right with a regex that only recognises allowed tag names. Everything between matches becomes text. Newlines become their own tokens.
-
-<Source dark language="text" code={`
-Input:  "Hello <important>world</important>!\\nBye"
-
-Tokens: [ TEXT:"Hello " ]
-[ OPEN:important ]
-[ TEXT:"world" ]
-[ CLOSE:important ]
-[ TEXT:"!" ]
-[ NEWLINE ]
-[ TEXT:"Bye" ]
-`} />
-
-Unrecognised tags like `<script>` or `<div>` are never tokenised — they stay as part of the text content. This is the first security layer.
-
-### Phase 2: Recursive descent parse
-
-The token stream is consumed by a recursive parser that builds a tree of nodes.
-
-<Source
-  dark
-  language="text"
-  code={`
-parse(tokens, until=none)
-  │
-  ├─ TEXT:"Hello " ────────────────────► { type: 'text', content: 'Hello ' }
-  ├─ OPEN:important
-  │  │
-  │  ├─ parse(tokens, until='important') // recurse
-  │  │  ├─ TEXT:"world" ───────────────► { type: 'text', content: 'world' }
-  │  │  └─ CLOSE:important ────────────► return { closed: true, nodes: [...] }
-  │  │
-  │  └─ result.closed? YES ────────────► { type: 'important', children: [...] }
-  │
-  ├─ TEXT:"!" ─────────────────────────► { type: 'text', content: '!' }
-  ├─ NEWLINE ──────────────────────────► { type: 'newline' }
-  └─ TEXT:"Bye" ───────────────────────► { type: 'text', content: 'Bye' }
-`}
-/>
-
-The key insight is the `closed` flag. When we see an open tag, we recurse to collect its children. Two outcomes:
-
-1. **Matching close tag found:** build a proper node with children.
-2. **No matching close tag found:** treat the open tag as literal text, and return the already-parsed children.
-
-This gives graceful degradation for malformed input — no crashes, no swallowed content.
-
-### Nesting
-
-Because each open tag recurses, nesting is handled naturally:
-
-<Source dark language="text" code={`
-Input: "<p><important>Read the <a href="/terms">terms</a></important></p>"
-
-Tree: paragraph
-└─ important
-├─ text: "Read the "
-└─ link (href="/terms")
-└─ text: "terms"
-`} />
-
-The parser enforces a `MAX_NESTING_DEPTH` limit (32). Beyond that depth, tags are emitted as literal text instead of recursing — this prevents stack overflow from deeply-nested input.

package/src/Markup/_stories/Markup.security.docs.mdx

@@ -1,256 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import { MAX_NESTING_DEPTH } from '../utils/parseMarkup';
-import { Vulnerability, Badge } from './Vulnerability/Vulnerability';
-
-<Meta title="Typography/Markup/Parser security" />
-
-# Parser security
-
-## Security model
-
-Three layers, each independent:
-
-1. Tag allow-list (tokeniser). Only known tags are tokenised. `<script>`, `<img>`, `<iframe>`, etc. stay as
-   literal text.
-2. Attribute allow-list (parseAttributes). Only `href`, `action`, `target`, `accessibilityLabel` are extracted. `onclick`, `onerror`, etc. are silently ignored.
-3. Protocol allow-list (sanitise). Only `https:`, `mailto:`, `/path`, and `#fragment` are allowed. Relative paths (`./`, `../`), `javascript:`, `data:`, `//`, and all other schemes are blocked.
-
-No `dangerouslySetInnerHTML` is used anywhere. The parser produces a typed AST, and the renderer maps it to React elements — React's own escaping handles the rest.
-
-## Attack vector
-
-This page documents all attack vectors tested against the Markup component. Each section shows the raw malicious input and how the component neutralises it.
-
-### XSS: Dangerous protocols
-
-#### javascript: protocol <Badge severity="High" />
-
-The `javascript:` protocol is blocked by the href sanitiser. The link degrades to plain text.
-
-<Vulnerability markup='<link href="javascript:alert(1)">click me</link>' />
-
-#### javascript: mixed case <Badge severity="High" />
-
-`new URL()` normalises the protocol to lowercase before checking the allowlist.
-
-<Vulnerability markup='<link href="JavaScript:alert(1)">mixed case</link>' />
-
-#### data: URI with script <Badge severity="High" />
-
-The `data:` protocol is blocked regardless of MIME type or encoding.
-
-<Vulnerability markup='<link href="data:text/html,<script>alert(1)</script>">data URI</link>' />
-
-#### data: base64-encoded <Badge severity="High" />
-
-Base64-encoded payloads are equally blocked.
-
-<Vulnerability markup='<link href="data:text/html;base64,PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg==">base64</link>' />
-
-#### vbscript: protocol <Badge severity="High" />
-
-Legacy protocol explicitly blocked.
-
-<Vulnerability markup='<link href="vbscript:MsgBox(1)">vbscript</link>' />
-
-#### SVG data URI in href <Badge severity="High" />
-
-SVG data URIs can contain executable JavaScript. Blocked by the `data:` protocol check.
-
-<Vulnerability markup='<link href="data:image/svg+xml,<svg onload=alert(1)>">svg data</link>' />
-
-### XSS: Control character bypass
-
-#### Null byte in scheme <Badge severity="High" />
-
-Null bytes inserted mid-scheme cause URL parsing to fail. The sanitiser rejects any href containing control characters.
-
-<Vulnerability markup={'<link href="java\x00script:alert(1)">null byte</link>'} />
-
-#### Zero-width space prefix <Badge severity="High" />
-
-Invisible characters (ZWSP, BOM, ZWNJ) are stripped before validation so they cannot bypass `.trim()`.
-
-<Vulnerability markup={'<link href="​javascript:alert(1)">invisible prefix</link>'} />
-
-#### URL-encoded colon (%3A) <Badge severity="Medium" />
-
-The sanitiser checks for `javascript%3a` patterns that evade URL constructor parsing.
-
-<Vulnerability markup='<link href="javascript%3Aalert(1)">encoded colon</link>' />
-
-### XSS: HTML tag injection
-
-#### &lt;script&gt; tag <Badge severity="High" />
-
-Not in the allowed tag list. Never tokenised — remains as escaped text.
-
-<Vulnerability markup='<script>alert("xss")</script>' />
-
-#### &lt;img onerror&gt; <Badge severity="High" />
-
-Not in the allowed tag list. Passes through as literal text rendered via `textContent`.
-
-<Vulnerability markup="<img src=x onerror=alert(1)>" />
-
-#### &lt;svg onload&gt; <Badge severity="High" />
-
-Not in the allowed tag list. Rendered as harmless text content.
-
-<Vulnerability markup="<svg onload=alert(1)>" />
-
-#### &lt;svg&gt; inside allowed element <Badge severity="High" />
-
-Even inside a valid element, unrecognised tags are text nodes. React escapes them.
-
-<Vulnerability markup="<important><svg onload=alert(1)></important>" />
-
-#### &lt;iframe&gt; injection <Badge severity="High" />
-
-Not in the allowed tag list. The entire string renders as escaped text.
-
-<Vulnerability markup='<iframe src="javascript:alert(1)"></iframe>' />
-
-#### &lt;img&gt; inside link <Badge severity="High" />
-
-Unrecognised tags within link content are safe text children.
-
-<Vulnerability markup='<link href="/safe"><img src=x onerror=alert(1)></link>' />
-
-#### &lt;input&gt; with autofocus <Badge severity="High" />
-
-Not in the allowed tag list. Cannot trigger focus-based XSS.
-
-<Vulnerability markup="<input onfocus=alert(1) autofocus>" />
-
-#### &lt;details ontoggle&gt; <Badge severity="High" />
-
-Not in the allowed tag list. Cannot trigger toggle-based XSS.
-
-<Vulnerability markup="<details open ontoggle=alert(1)>" />
-
-### XSS: Attribute injection
-
-#### onclick attribute on link <Badge severity="High" />
-
-Only `href`, `action`, `target`, and `accessibilityLabel` are extracted. All event handlers are discarded.
-
-<Vulnerability markup='<link href="/safe" onclick="alert(1)">click</link>' />
-
-#### HTML in accessibilityLabel <Badge severity="Medium" />
-
-HTML metacharacters are stripped from `accessibilityLabel` to prevent injection if the value is ever used in an unsafe context.
-
-<Vulnerability markup='<important accessibilityLabel="&lt;img onerror=alert(1)&gt;">safe text</important>' />
-
-#### Slash as attribute separator <Badge severity="Low" />
-
-The attribute regex now requires whitespace before attribute names. `<link/href="x">` no longer parses the href.
-
-<Vulnerability markup='<link/href="/evil">slash separator</link>' />
-
-### Open redirect
-
-#### Protocol-relative URL (//) <Badge severity="High" />
-
-Protocol-relative URLs navigate to external domains. Blocked by `startsWith("//")` check.
-
-<Vulnerability markup='<link href="//evil.com/phishing">protocol relative</link>' />
-
-#### Backslash after slash (/\) <Badge severity="High" />
-
-Browsers normalise `\` to `/`, making `/\evil.com` equivalent to `//evil.com`. Blocked.
-
-<Vulnerability markup='<link href="/\evil.com">backslash redirect</link>' />
-
-#### Relative path traversal <Badge severity="Medium" />
-
-Relative paths (`./`, `../`) could be exploited to navigate outside the expected domain or bypass path-based security checks. Only absolute `https:` URLs, `mailto:`, root-relative `/path`, and `#fragment` are allowed.
-
-<Vulnerability markup='<link href="../admin/secret">parent traversal</link>' />
-
-<Vulnerability markup='<link href="./evil-page">dot relative</link>' />
-
-#### Credential confusion (@) <Badge severity="Medium" />
-
-In `https://good.com@evil.com`, the actual host is `evil.com`. URLs with username/password components are rejected.
-
-<Vulnerability markup='<link href="https://good.com@evil.com">phishing link</link>' />
-
-### SSRF: Internal network
-
-#### Localhost IP <Badge severity="Medium" />
-
-Numeric IPs, hex IPs, localhost, and `*.internal` hosts are blocked.
-
-<Vulnerability markup='<link href="https://127.0.0.1/admin">localhost</link>' />
-
-#### Cloud metadata endpoint <Badge severity="Medium" />
-
-Prevents access to cloud instance metadata services.
-
-<Vulnerability markup='<link href="https://169.254.169.254/latest/meta-data">AWS metadata</link>' />
-
-#### IPv6 localhost <Badge severity="Medium" />
-
-IPv6 loopback address blocked.
-
-<Vulnerability markup='<link href="https://[::1]/">ipv6 localhost</link>' />
-
-### DoS: Stack overflow
-
-#### Deep nesting <Badge severity="High" />
-
-The recursive parser enforces a `MAX_NESTING_DEPTH` limit (currently {MAX_NESTING_DEPTH}). Beyond that, tags are emitted as literal text.
-
-<Vulnerability
-  markup={
-    '<important>'.repeat(MAX_NESTING_DEPTH + 20) +
-    'deep' +
-    '</important>'.repeat(MAX_NESTING_DEPTH + 20)
-  }
-/>
-
-### Prototype pollution
-
-#### action="\_\_proto\_\_" <Badge severity="Medium" />
-
-Action values that collide with `Object.prototype` properties are rejected by the parser.
-Without this, `actions?.['__proto__']` resolves to a truthy inherited value, rendering an unintended clickable link.
-
-<Vulnerability markup='<link action="__proto__">click</link>' />
-
-#### action="constructor" <Badge severity="Medium" />
-
-`Object.prototype.constructor` is the `Object` function — truthy and callable. Blocked.
-
-<Vulnerability markup='<link action="constructor">click</link>' />
-
-### Attribute injection
-
-#### Duplicate href (first wins) <Badge severity="Medium" />
-
-When the same attribute appears twice, the first value is used. Previously the last won,
-which could bypass content filters that only inspect the first occurrence.
-
-<Vulnerability markup='<link href="/safe" href="javascript:alert(1)">duplicate href</link>' />
-
-#### target="\_top" (iframe breakout) <Badge severity="Low" />
-
-The `target` attribute is restricted to `_blank` and `_self`. Values like `_top` and `_parent` are stripped.
-
-<Vulnerability markup='<link href="https://example.com" target="_top">escape iframe</link>' />
-
-### Mailto abuse
-
-#### Header injection (cc/bcc) <Badge severity="Medium" />
-
-Mailto query parameters can inject additional recipients. Mailto URLs with query strings are blocked.
-
-<Vulnerability markup='<link href="mailto:evil@evil.com?cc=victim@good.com&bcc=spy@evil.com">contact</link>' />
-
-#### No recipient (social engineering) <Badge severity="Medium" />
-
-Mailto URLs must have an actual address.
-
-<Vulnerability markup='<link href="mailto:?subject=urgent&body=click%20here">empty mailto</link>' />

package/src/Markup/_stories/Markup.story.tsx

@@ -1,227 +0,0 @@
-import React, { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { action } from 'storybook/actions';
-
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../../.storybook/components/sandbox/SandboxEditor';
-import { storySourceWithoutNoise } from '../../../.storybook/helpers';
-
-import { Markup } from '../Markup';
-import type { MarkupActionHandler } from '../Markup.types';
-
-export default {
-  component: Markup,
-  title: 'Typography/Markup',
-  tags: ['early-access'],
-} satisfies Meta<typeof Markup>;
-
-type Story = StoryObj<typeof Markup>;
-
-const MARKUP_STRING = `This markup string supports number of tags:
-<important>important</important>,
-<positive>positive</positive>,
-<negative>negative</negative>,
-<strong>strong</strong>, 
-<strikethrough accessibilityLabel="old value label">strikethrough with a screen-reader-friendly label</strikethrough>,
-and a <link href="https://docs.wise.design">link</link>.
-<paragraph>
-  It respects 
-  line breaks
-  and also allows for paragraphs <positive>and nest tags</positive>.
-</paragraph>
-`;
-
-export const Playground: Story = {
-  args: {
-    children: MARKUP_STRING,
-  },
-};
-
-export const Sandbox = createSandboxStory({
-  code: `<Markup>
-  {\`${MARKUP_STRING}\`}
-</Markup>`,
-  scope: globalScope,
-});
-
-/**
- * Renders the design system `Link` component inline. `<a>` is an alias for `<link>`. External
- * links with `target="_blank"` automatically receive a navigate-away icon and `rel="noreferrer"`.
- * */
-export const WithLinks: Story = {
-  args: {
-    children:
-      'Using link tag: <link href="/settings">settings</link>. Using a tag: <a href="https://wise.com" target="_blank">our website</a>.',
-  },
-};
-
-/**
- * Button-mode link using the `action` attribute. The handler is provided via the `actions` prop.
- * If the named action is missing from the map, the link degrades to plain text.
- * */
-export const WithLinksAsButtons = storySourceWithoutNoise<Story>({
-  args: {
-    children: 'Click <link action="increment">increment</link> to add `1`.',
-  },
-  render: function Render(args) {
-    const [count, setCount] = useState(0);
-
-    const increment: MarkupActionHandler = (event) => {
-      action('Button event')(event);
-      setCount((prev) => prev + 1);
-    };
-
-    return (
-      <>
-        <Markup actions={{ increment }}>{args.children}</Markup>
-        <output>{count}</output>
-      </>
-    );
-  },
-});
-
-/**
- * `<strong>` renders a `<strong>` element. `<strikethrough>` renders a `<del>` element for
- * struck-through text.
- * */
-export const StrongAndStrikethrough: Story = {
-  args: {
-    children:
-      'This is <strong>bold</strong> and this is <strikethrough>no longer relevant</strikethrough>.',
-  },
-};
-
-/**
- * Block-level paragraphs. `<p>` is an alias for `<paragraph>`. Both render a `<p>` element.
- * */
-export const Paragraphs: Story = {
-  args: {
-    children:
-      '<paragraph>First paragraph using the full tag name.</paragraph><p>Second paragraph using the short alias.</p>',
-  },
-};
-
-/**
- * Tags can nest to arbitrary depth — emphasis wrapping a link, strong inside a paragraph, etc.
- * */
-export const Nested: Story = {
-  args: {
-    children:
-      '<p><important>Read the <a href="/terms">terms and conditions</a> carefully</important></p>',
-  },
-};
-
-/**
- * Literal newline characters (`\n`) in the string are converted to `<br />` elements.
- * */
-export const Newlines: Story = {
-  args: {
-    children: 'First line.\nSecond line.\nThird line.',
-  },
-};
-
-/**
- * Non-string children (JSX, components, numbers) pass through unchanged — no parsing occurs.
- * This lets parent components use Markup as a unified slot for both markup strings and JSX.
- * */
-export const PassThrough: Story = {
-  render: () => (
-    <Markup>
-      <em>
-        This JSX is <strong>passed through</strong>
-      </em>{' '}
-      without parsing.
-    </Markup>
-  ),
-};
-
-/**
- * The wrapper element is automatically chosen based on content: `<span>` for inline-only markup,
- * `<div>` when `<paragraph>` nodes are present (to avoid invalid `<p>` inside `<span>`).
- * The `as` prop overrides auto-detection when you need explicit control.
- * */
-export const WrapperElement: Story = {
-  parameters: {
-    docs: {
-      source: { type: 'dynamic' },
-    },
-  },
-  render: () => (
-    <>
-      <Markup className="demo-wrapper">
-        {'This is <important>inline</important> content — wrapper is a span.'}
-      </Markup>
-      <Markup className="demo-wrapper">
-        {'<p>Block content with a paragraph.</p><p>Second paragraph.</p>'}
-      </Markup>
-      <Markup as="section" className="demo-wrapper">
-        {'<p>Paragraph forced into a span wrapper via the as prop.</p>'}
-      </Markup>
-    </>
-  ),
-};
-
-/**
- * Not all semantic tags are announced by screen readers — for example, `<del>` (strikethrough) is
- * often skipped. The `accessibilityLabel` attribute provides extended copy for visually impaired
- * users, ensuring the meaning is conveyed even when the visual styling is not perceived. It is
- * rendered as `aria-label` on the DOM element.
- * */
-export const AccessibilityLabels: Story = {
-  args: {
-    children: [
-      'Was <strikethrough accessibilityLabel="Previously 50 GBP">£50.00</strikethrough>,',
-      'now <strong accessibilityLabel="New price">£35.00</strong>.',
-      '<important accessibilityLabel="Offer ending soon">Limited time offer</important>',
-    ].join(' '),
-  },
-};
-
-/**
- * Use the `data` prop whenever the markup template contains values that originate from
- * user-generated content or external API responses (e.g. recipient names, amounts, dates).
- * This separates trusted template structure from untrusted data content, preventing markup
- * injection attacks.
- *
- * All matched Mustache-style placeholders (`{{key}}`) are replaced (including duplicates) with
- * values from the `data` object. If a key is not found, it will be rendered literally as `{{key}}`.
- * Data values are always rendered as plain text — even if they contain markup tags, those are
- * displayed literally and never parsed into elements.
- * */
-export const DataSubstitution: Story = {
-  parameters: {
-    docs: {
-      source: { type: 'dynamic' },
-    },
-  },
-  render: () => (
-    <>
-      <Markup data={{ amount: '£35.00', recipient: 'Alice' }}>
-        {'You sent <strong>{{amount}}</strong> to {{recipient}}. {{amount}} is now pending.'}
-      </Markup>
-      <Markup data={{ name: '</strong><link href="https://evil.com">Click here</link><strong>' }}>
-        {'Hello, <strong>{{name}}</strong>!'}
-      </Markup>
-    </>
-  ),
-};
-
-/**
- * The component applies a strict whitelist of allowed tags and attributes. Malicious or malformed input is rendered as literal text, preventing XSS attacks. [Full list of handled attack vectors](?path=/docs/typography-markup-parser-security--docs)
- * */
-export const MalformedInput: Story = {
-  args: {
-    children: [
-      '<script>alert("xss")</script>',
-      '<img src=x onerror="alert(1)">',
-      '<iframe src="https://evil.com"></iframe>',
-      '<link href="javascript:alert(1)">blocked protocol</link>',
-      '<link href="data:text/html,<script>alert(1)</script>">data URI</link>',
-      '<a href="vbscript:MsgBox">vbscript</a>',
-      '<link onclick="steal()" href="/safe">ignored attribute</link>',
-      '<important>this is safe</important>',
-    ].join('\n'),
-  },
-};

package/src/Markup/_stories/Vulnerability/Vulnerability.css

@@ -1,70 +0,0 @@
-.vulnerability {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 4px 16px;
-  margin-bottom: 32px;
-}
-
-.vulnerability__label {
-  font-size: 11px;
-  font-weight: 600;
-  color: #64748b;
-  text-transform: uppercase;
-}
-
-.vulnerability__input {
-  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
-  width: 100%;
-  min-height: 56px;
-  padding: 10px;
-  font-size: 12px;
-  border-radius: 4px;
-  border: 1px solid #e2e8f0;
-  background: #000000d9;
-  color: #ededed;
-  field-sizing: content;
-  resize: none;
-  overflow-wrap: break-word;
-}
-
-.vulnerability__output {
-  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
-  padding: 10px;
-  min-height: 56px;
-  border-radius: 4px;
-  border: 1px solid #e2e8f0;
-  background: #ffffff;
-  font-size: 14px;
-  line-height: 1.5;
-  overflow-wrap: break-word;
-}
-
-.vulnerability__badge {
-  display: inline-block;
-  padding: 3px 8px;
-  border-radius: 3em;
-  font-size: 11px;
-  line-height: 0.75rem;
-  font-weight: 700;
-  margin-left: 8px;
-  vertical-align: middle;
-  text-align: center;
-  background-color: var(--badge-bg);
-  color: var(--badge-color);
-  box-shadow: color-mix(in srgb, var(--badge-color) 10%, transparent) 0 0 0 1px inset;
-}
-
-.vulnerability__badge--high {
-  --badge-bg: #ffe8ea;
-  --badge-color: #f30010;
-}
-
-.vulnerability__badge--medium {
-  --badge-bg: #fff7cf;
-  --badge-color: #51390d;
-}
-
-.vulnerability__badge--low {
-  --badge-bg: #d7f8ce;
-  --badge-color: #00511e;
-}

package/src/Markup/_stories/Vulnerability/Vulnerability.tsx

@@ -1,30 +0,0 @@
-import { Markup } from '../../Markup';
-
-import './Vulnerability.css';
-
-type Severity = 'High' | 'Medium' | 'Low';
-
-interface VulnerabilityProps {
-  markup: string;
-}
-
-export const Vulnerability = ({ markup }: VulnerabilityProps) => (
-  <div className="vulnerability">
-    <div className="vulnerability__label">Markup input</div>
-    <div className="vulnerability__label">Rendered output</div>
-    <textarea readOnly value={markup} className="vulnerability__input" aria-label="Markup input" />
-    <div className="vulnerability__output">
-      <Markup>{markup}</Markup>
-    </div>
-  </div>
-);
-
-interface BadgeProps {
-  severity: Severity;
-}
-
-export const Badge = ({ severity }: BadgeProps) => (
-  <span className={`vulnerability__badge vulnerability__badge--${severity.toLowerCase()}`}>
-    {severity}
-  </span>
-);