@transferwise/components 46.155.1 → 46.157.0

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

@@ -0,0 +1,266 @@
+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://wise.com/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 section 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>
+    </>
+  ),
+};
+
+/**
+ * Controls which link destinations are allowed. By default, only root-relative paths
+ * and `wise.com` URLs render as links. External domains are blocked.
+ *
+ * - `"internal"` (default) — `/*` and `https://wise.com/*` only
+ * - `"all"` — any href that passes base sanitisation
+ * - `"none"` — all href-based links render as plain text
+ *
+ * The prop is an additional restriction — it never bypasses protocol/host sanitisation.
+ * */
+export const AllowLinks: Story = {
+  parameters: {
+    docs: {
+      source: { type: 'dynamic' },
+    },
+  },
+  render: () => (
+    <>
+      <Markup>
+        {
+          'By default only <link href="/settings">internal</link> or <link href="https://wise.com/help">wise.com</link> links are allowed, while all <link href="https://partner.com">external ones</link> are blocked.'
+        }
+      </Markup>
+
+      <Markup allowLinks="all">
+        {
+          'If set to `all`, every <link href="/settings">internal</link>, <link href="https://wise.com/help">wise.com</link> and <link href="https://partner.com/page">external</link> link will be respected.'
+        }
+      </Markup>
+
+      <Markup allowLinks="none">
+        {
+          'If set to `none `, every <link href="/settings">internal</link>, <link href="https://wise.com/help">wise.com</link> and <link href="https://partner.com/page">external</link> link will render as plain text.'
+        }
+      </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

@@ -0,0 +1,69 @@
+.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,
+.vulnerability__output {
+  min-height: 1lh;
+  max-height: 28lh;
+  border: 1px solid #e2e8f0;
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  line-height: 1.5;
+  padding: 10px;
+  border-radius: 4px;
+  overflow-wrap: break-word;
+  font-size: 12px;
+}
+
+.vulnerability__input {
+  width: 100%;
+  background: #000000d9;
+  color: #ededed;
+  field-sizing: content;
+  resize: none;
+}
+
+.vulnerability__output {
+  background: #ffffff;
+  overflow-y: auto;
+}
+
+.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

@@ -0,0 +1,30 @@
+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>
+);

package/src/Markup/constants.ts

@@ -0,0 +1,23 @@
+// Only these tags are recognised — anything else is treated as plain text (security allow-list)
+export const ALLOWED_TAGS = [
+  'important',
+  'positive',
+  'negative',
+  'strong',
+  'strikethrough',
+  'paragraph',
+  'p',
+  'link',
+  'a',
+] as const;
+
+export const TAG_ALIASES: Record<string, string> = { p: 'paragraph', a: 'link' };
+
+// Maximum recursive nesting before the parser emits tags as literal text (DoS protection)
+export const MAX_NESTING_DEPTH = 32;
+
+// Only these link targets are allowed — others are stripped to prevent iframe breakout
+export const ALLOWED_TARGETS = ['_blank', '_self'];
+
+// Only these protocols pass href validation — all others are blocked
+export const ALLOWED_PROTOCOLS = ['https:', 'mailto:'];

package/src/Markup/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Markup';
+export type { MarkupActionHandler, MarkupActions, MarkupNode, MarkupProps } from './Markup.types';