@transferwise/components 0.0.0-experimental-6940853 → 0.0.0-experimental-d4d8885

package/build/body/Body.js

@@ -14,7 +14,6 @@ const Body = /*#__PURE__*/React.forwardRef(function Body({
   type = DEFAULT_TYPE,
   className,
   preserveNewlines,
-  style,
   ...props
 }, reference) {
   const isTypeSupported = bodyTypes.has(type);

package/build/body/Body.js.map

@@ -1 +1 @@
-{"version":3,"file":"Body.js","sources":["../../src/body/Body.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, HTMLAttributes } from 'react';\n\nimport { Typography, BodyTypes } from '../common/propsValues/typography';\n\nconst DEFAULT_TYPE = Typography.BODY_DEFAULT;\n\nconst bodyTypes = new Set<BodyTypes>([\n  Typography.BODY_DEFAULT,\n  Typography.BODY_DEFAULT_BOLD,\n  Typography.BODY_LARGE,\n  Typography.BODY_LARGE_BOLD,\n]);\n\ntype Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {\n  /**\n   * Default value: {@link DEFAULT_TYPE}\n   */\n  type?: BodyTypes;\n  /**\n   * Default value: `div`\n   */\n  as?: 'span' | 'p' | 'div';\n  /**\n   * When true, preserves newline characters in the text\n   * @default false\n   */\n  preserveNewlines?: boolean;\n};\n\nconst Body = forwardRef(function Body(\n  { as: Element = 'div', type = DEFAULT_TYPE, className, preserveNewlines, style, ...props }: Props,\n  reference: React.ForwardedRef<\n    | {\n        [key in typeof Element]: React.ElementRef<key>;\n      }[typeof Element]\n    | null\n  >,\n) {\n  const isTypeSupported = bodyTypes.has(type);\n  return (\n    <Element\n      {...props}\n      // @ts-expect-error TODO: Remove when component could be rewritten with generics\n      // See: https://fettblog.eu/typescript-react-generic-forward-refs/\n      ref={reference}\n      className={clsx(\n        `np-text-${isTypeSupported ? type : DEFAULT_TYPE}`,\n        preserveNewlines && 'np-text--pre-line',\n        className,\n      )}\n    />\n  );\n});\n\nexport default Body;\n"],"names":["DEFAULT_TYPE","Typography","BODY_DEFAULT","bodyTypes","Set","BODY_DEFAULT_BOLD","BODY_LARGE","BODY_LARGE_BOLD","Body","forwardRef","as","Element","type","className","preserveNewlines","style","props","reference","isTypeSupported","has","_jsx","ref","clsx"],"mappings":";;;;;;;;;AAKA,MAAMA,YAAY,GAAGC,qBAAU,CAACC,YAAY;AAE5C,MAAMC,SAAS,GAAG,IAAIC,GAAG,CAAY,CACnCH,qBAAU,CAACC,YAAY,EACvBD,qBAAU,CAACI,iBAAiB,EAC5BJ,qBAAU,CAACK,UAAU,EACrBL,qBAAU,CAACM,eAAe,CAC3B,CAAC;AAkBF,MAAMC,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAEC,gBAAgB;EAAEC,KAAK;EAAE,GAAGC;AAAc,CAAA,EACjGC,SAKC,EAAA;AAED,EAAA,MAAMC,eAAe,GAAGf,SAAS,CAACgB,GAAG,CAACP,IAAI,CAAC;EAC3C,oBACEQ,cAAA,CAACT,OAAO,EAAA;AAAA,IAAA,GACFK,KAAK;AACT;AACA;AACAK,IAAAA,GAAG,EAAEJ,SAAU;AACfJ,IAAAA,SAAS,EAAES,SAAI,CACb,CAAA,QAAA,EAAWJ,eAAe,GAAGN,IAAI,GAAGZ,YAAY,EAAE,EAClDc,gBAAgB,IAAI,mBAAmB,EACvCD,SAAS;AACT,GAAA,CACF;AAEN,CAAC;;;;"}
+{"version":3,"file":"Body.js","sources":["../../src/body/Body.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, HTMLAttributes } from 'react';\n\nimport { Typography, BodyTypes } from '../common/propsValues/typography';\n\nconst DEFAULT_TYPE = Typography.BODY_DEFAULT;\n\nconst bodyTypes = new Set<BodyTypes>([\n  Typography.BODY_DEFAULT,\n  Typography.BODY_DEFAULT_BOLD,\n  Typography.BODY_LARGE,\n  Typography.BODY_LARGE_BOLD,\n]);\n\ntype Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {\n  /**\n   * Default value: {@link DEFAULT_TYPE}\n   */\n  type?: BodyTypes;\n  /**\n   * Default value: `div`\n   */\n  as?: 'span' | 'p' | 'div';\n  /**\n   * When true, preserves newline characters in the text\n   * @default false\n   */\n  preserveNewlines?: boolean;\n};\n\nconst Body = forwardRef(function Body(\n  { as: Element = 'div', type = DEFAULT_TYPE, className, preserveNewlines, ...props }: Props,\n  reference: React.ForwardedRef<\n    | {\n        [key in typeof Element]: React.ElementRef<key>;\n      }[typeof Element]\n    | null\n  >,\n) {\n  const isTypeSupported = bodyTypes.has(type);\n  return (\n    <Element\n      {...props}\n      // @ts-expect-error TODO: Remove when component could be rewritten with generics\n      // See: https://fettblog.eu/typescript-react-generic-forward-refs/\n      ref={reference}\n      className={clsx(\n        `np-text-${isTypeSupported ? type : DEFAULT_TYPE}`,\n        preserveNewlines && 'np-text--pre-line',\n        className,\n      )}\n    />\n  );\n});\n\nexport default Body;\n"],"names":["DEFAULT_TYPE","Typography","BODY_DEFAULT","bodyTypes","Set","BODY_DEFAULT_BOLD","BODY_LARGE","BODY_LARGE_BOLD","Body","forwardRef","as","Element","type","className","preserveNewlines","props","reference","isTypeSupported","has","_jsx","ref","clsx"],"mappings":";;;;;;;;;AAKA,MAAMA,YAAY,GAAGC,qBAAU,CAACC,YAAY;AAE5C,MAAMC,SAAS,GAAG,IAAIC,GAAG,CAAY,CACnCH,qBAAU,CAACC,YAAY,EACvBD,qBAAU,CAACI,iBAAiB,EAC5BJ,qBAAU,CAACK,UAAU,EACrBL,qBAAU,CAACM,eAAe,CAC3B,CAAC;AAkBF,MAAMC,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAEC,gBAAgB;EAAE,GAAGC;AAAc,CAAA,EAC1FC,SAKC,EAAA;AAED,EAAA,MAAMC,eAAe,GAAGd,SAAS,CAACe,GAAG,CAACN,IAAI,CAAC;EAC3C,oBACEO,cAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFI,KAAK;AACT;AACA;AACAK,IAAAA,GAAG,EAAEJ,SAAU;AACfH,IAAAA,SAAS,EAAEQ,SAAI,CACb,CAAA,QAAA,EAAWJ,eAAe,GAAGL,IAAI,GAAGZ,YAAY,EAAE,EAClDc,gBAAgB,IAAI,mBAAmB,EACvCD,SAAS;AACT,GAAA,CACF;AAEN,CAAC;;;;"}

package/build/body/Body.mjs

@@ -10,7 +10,6 @@ const Body = /*#__PURE__*/forwardRef(function Body({
   type = DEFAULT_TYPE,
   className,
   preserveNewlines,
-  style,
   ...props
 }, reference) {
   const isTypeSupported = bodyTypes.has(type);

package/build/body/Body.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Body.mjs","sources":["../../src/body/Body.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, HTMLAttributes } from 'react';\n\nimport { Typography, BodyTypes } from '../common/propsValues/typography';\n\nconst DEFAULT_TYPE = Typography.BODY_DEFAULT;\n\nconst bodyTypes = new Set<BodyTypes>([\n  Typography.BODY_DEFAULT,\n  Typography.BODY_DEFAULT_BOLD,\n  Typography.BODY_LARGE,\n  Typography.BODY_LARGE_BOLD,\n]);\n\ntype Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {\n  /**\n   * Default value: {@link DEFAULT_TYPE}\n   */\n  type?: BodyTypes;\n  /**\n   * Default value: `div`\n   */\n  as?: 'span' | 'p' | 'div';\n  /**\n   * When true, preserves newline characters in the text\n   * @default false\n   */\n  preserveNewlines?: boolean;\n};\n\nconst Body = forwardRef(function Body(\n  { as: Element = 'div', type = DEFAULT_TYPE, className, preserveNewlines, style, ...props }: Props,\n  reference: React.ForwardedRef<\n    | {\n        [key in typeof Element]: React.ElementRef<key>;\n      }[typeof Element]\n    | null\n  >,\n) {\n  const isTypeSupported = bodyTypes.has(type);\n  return (\n    <Element\n      {...props}\n      // @ts-expect-error TODO: Remove when component could be rewritten with generics\n      // See: https://fettblog.eu/typescript-react-generic-forward-refs/\n      ref={reference}\n      className={clsx(\n        `np-text-${isTypeSupported ? type : DEFAULT_TYPE}`,\n        preserveNewlines && 'np-text--pre-line',\n        className,\n      )}\n    />\n  );\n});\n\nexport default Body;\n"],"names":["DEFAULT_TYPE","Typography","BODY_DEFAULT","bodyTypes","Set","BODY_DEFAULT_BOLD","BODY_LARGE","BODY_LARGE_BOLD","Body","forwardRef","as","Element","type","className","preserveNewlines","style","props","reference","isTypeSupported","has","_jsx","ref","clsx"],"mappings":";;;;;AAKA,MAAMA,YAAY,GAAGC,UAAU,CAACC,YAAY;AAE5C,MAAMC,SAAS,GAAG,IAAIC,GAAG,CAAY,CACnCH,UAAU,CAACC,YAAY,EACvBD,UAAU,CAACI,iBAAiB,EAC5BJ,UAAU,CAACK,UAAU,EACrBL,UAAU,CAACM,eAAe,CAC3B,CAAC;AAkBF,MAAMC,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAEC,gBAAgB;EAAEC,KAAK;EAAE,GAAGC;AAAc,CAAA,EACjGC,SAKC,EAAA;AAED,EAAA,MAAMC,eAAe,GAAGf,SAAS,CAACgB,GAAG,CAACP,IAAI,CAAC;EAC3C,oBACEQ,GAAA,CAACT,OAAO,EAAA;AAAA,IAAA,GACFK,KAAK;AACT;AACA;AACAK,IAAAA,GAAG,EAAEJ,SAAU;AACfJ,IAAAA,SAAS,EAAES,IAAI,CACb,CAAA,QAAA,EAAWJ,eAAe,GAAGN,IAAI,GAAGZ,YAAY,EAAE,EAClDc,gBAAgB,IAAI,mBAAmB,EACvCD,SAAS;AACT,GAAA,CACF;AAEN,CAAC;;;;"}
+{"version":3,"file":"Body.mjs","sources":["../../src/body/Body.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, HTMLAttributes } from 'react';\n\nimport { Typography, BodyTypes } from '../common/propsValues/typography';\n\nconst DEFAULT_TYPE = Typography.BODY_DEFAULT;\n\nconst bodyTypes = new Set<BodyTypes>([\n  Typography.BODY_DEFAULT,\n  Typography.BODY_DEFAULT_BOLD,\n  Typography.BODY_LARGE,\n  Typography.BODY_LARGE_BOLD,\n]);\n\ntype Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {\n  /**\n   * Default value: {@link DEFAULT_TYPE}\n   */\n  type?: BodyTypes;\n  /**\n   * Default value: `div`\n   */\n  as?: 'span' | 'p' | 'div';\n  /**\n   * When true, preserves newline characters in the text\n   * @default false\n   */\n  preserveNewlines?: boolean;\n};\n\nconst Body = forwardRef(function Body(\n  { as: Element = 'div', type = DEFAULT_TYPE, className, preserveNewlines, ...props }: Props,\n  reference: React.ForwardedRef<\n    | {\n        [key in typeof Element]: React.ElementRef<key>;\n      }[typeof Element]\n    | null\n  >,\n) {\n  const isTypeSupported = bodyTypes.has(type);\n  return (\n    <Element\n      {...props}\n      // @ts-expect-error TODO: Remove when component could be rewritten with generics\n      // See: https://fettblog.eu/typescript-react-generic-forward-refs/\n      ref={reference}\n      className={clsx(\n        `np-text-${isTypeSupported ? type : DEFAULT_TYPE}`,\n        preserveNewlines && 'np-text--pre-line',\n        className,\n      )}\n    />\n  );\n});\n\nexport default Body;\n"],"names":["DEFAULT_TYPE","Typography","BODY_DEFAULT","bodyTypes","Set","BODY_DEFAULT_BOLD","BODY_LARGE","BODY_LARGE_BOLD","Body","forwardRef","as","Element","type","className","preserveNewlines","props","reference","isTypeSupported","has","_jsx","ref","clsx"],"mappings":";;;;;AAKA,MAAMA,YAAY,GAAGC,UAAU,CAACC,YAAY;AAE5C,MAAMC,SAAS,GAAG,IAAIC,GAAG,CAAY,CACnCH,UAAU,CAACC,YAAY,EACvBD,UAAU,CAACI,iBAAiB,EAC5BJ,UAAU,CAACK,UAAU,EACrBL,UAAU,CAACM,eAAe,CAC3B,CAAC;AAkBF,MAAMC,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;EAAEE,EAAE,EAAEC,OAAO,GAAG,KAAK;AAAEC,EAAAA,IAAI,GAAGZ,YAAY;EAAEa,SAAS;EAAEC,gBAAgB;EAAE,GAAGC;AAAc,CAAA,EAC1FC,SAKC,EAAA;AAED,EAAA,MAAMC,eAAe,GAAGd,SAAS,CAACe,GAAG,CAACN,IAAI,CAAC;EAC3C,oBACEO,GAAA,CAACR,OAAO,EAAA;AAAA,IAAA,GACFI,KAAK;AACT;AACA;AACAK,IAAAA,GAAG,EAAEJ,SAAU;AACfH,IAAAA,SAAS,EAAEQ,IAAI,CACb,CAAA,QAAA,EAAWJ,eAAe,GAAGL,IAAI,GAAGZ,YAAY,EAAE,EAClDc,gBAAgB,IAAI,mBAAmB,EACvCD,SAAS;AACT,GAAA,CACF;AAEN,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-6940853",
+  "version": "0.0.0-experimental-d4d8885",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,8 +92,8 @@
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "^8.6.14",
     "@transferwise/less-config": "3.1.2",
-    "@wise/components-theming": "1.6.3",
     "@transferwise/neptune-css": "14.24.4",
+    "@wise/components-theming": "1.6.3",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {

package/src/body/Body.spec.tsx

@@ -32,6 +32,14 @@ describe('Body', () => {
     expect(copy).toHaveAttribute('role', 'banner');
   });
 
+  it('renders newlines as line breaks when preserveNewlines is true', () => {
+    render(<Body preserveNewlines>{'Line 1.\nLine 2'}</Body>);
+    const copy = screen.getByText(/Line 1\.\s*Line 2/);
+    expect(copy).toHaveClass('np-text--pre-line');
+    expect(copy).toHaveTextContent('Line 1.');
+    expect(copy).toHaveTextContent('Line 2');
+  });
+
   it('handles unsupported typography type', () => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error

package/src/body/Body.story.tsx

@@ -18,6 +18,9 @@ export const Basic = () => {
           We’re building the world’s most <strong>international account</strong>. We’re building the
           world’s most <b>international account</b>.
         </Body>
+        <Body as="p" type={Typography.BODY_LARGE_BOLD} preserveNewlines>
+          {'This is line one.\nThis is line two.'}
+        </Body>
         <Body as="p" type={Typography.BODY_LARGE_BOLD}>
           Ми будуємо найбільш <strong>міжнародний рахунок у світі</strong>. Ми будуємо найбільш{' '}
           <b>міжнародний рахунок у світі</b>.
@@ -40,6 +43,9 @@ export const Basic = () => {
           We’re building the world’s most <strong>international account</strong>. We’re building the
           world’s most <b>international account</b>.
         </Body>
+        <Body as="p" preserveNewlines>
+          {'This is line one.\nThis is line two.'}
+        </Body>
         <Body as="p" type={Typography.BODY_DEFAULT}>
           Ми будуємо найбільш <strong>міжнародний рахунок у світі</strong>. Ми будуємо найбільш{' '}
           <b>міжнародний рахунок у світі</b>.
@@ -62,6 +68,9 @@ export const Basic = () => {
           We’re building the world’s most <strong>international account</strong>. We’re building the
           world’s most <b>international account</b>.
         </Body>
+        <Body as="p" type={Typography.BODY_DEFAULT_BOLD} preserveNewlines>
+          {'This is line one.\nThis is line two.'}
+        </Body>
         <Body as="p" type={Typography.BODY_DEFAULT_BOLD}>
           Ми будуємо найбільш <strong>міжнародний рахунок у світі</strong>. Ми будуємо найбільш{' '}
           <b>міжнародний рахунок у світі</b>.
@@ -84,6 +93,9 @@ export const Basic = () => {
           We’re building the world’s most <strong>international account</strong>. We’re building the
           world’s most <b>international account</b>.
         </Body>
+        <Body as="p" type={Typography.BODY_LARGE} preserveNewlines>
+          {'This is line one.\nThis is line two.'}
+        </Body>
         <Body as="p" type={Typography.BODY_LARGE}>
           Ми будуємо найбільш <strong>міжнародний рахунок у світі</strong>. Ми будуємо найбільш{' '}
           <b>міжнародний рахунок у світі</b>.

package/src/body/Body.tsx

@@ -29,7 +29,7 @@ type Props = HTMLAttributes<HTMLSpanElement | HTMLParagraphElement> & {
 };
 
 const Body = forwardRef(function Body(
-  { as: Element = 'div', type = DEFAULT_TYPE, className, preserveNewlines, style, ...props }: Props,
+  { as: Element = 'div', type = DEFAULT_TYPE, className, preserveNewlines, ...props }: Props,
   reference: React.ForwardedRef<
     | {
         [key in typeof Element]: React.ElementRef<key>;

package/src/instructionsList/InstructionsList.story.tsx

@@ -1,4 +1,6 @@
-import { StoryFn } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { storyConfig } from '../test-utils';
 
 import Link from '../link';
 
@@ -7,46 +9,42 @@ import InstructionsList, { InstructionsListProps } from './InstructionsList';
 export default {
   component: InstructionsList,
   title: 'Typography/InstructionsList',
-};
+  render: (args) => <InstructionsList {...args} />,
+  tags: ['autodocs'],
+} satisfies Meta<typeof InstructionsList>;
+
+type Story = StoryObj<typeof InstructionsList>;
 
-export const Template: StoryFn = (args: InstructionsListProps) => {
-  return (
-    <>
-      <InstructionsList
-        className={args.className}
-        dos={[
-          'Do an initial money transfer',
-          'Invite at least 3 friends',
-          <span key="12">
-            Paying extra{' '}
-            <Link href="" type="link-large">
-              hidden fees
-            </Link>{' '}
-            for transfers
-          </span>,
-        ]}
-        donts={['Paying extra hidden fees for transfers', 'Use bad exchange rate']}
-        sort={args.sort}
-      />
-      <hr />
-      <InstructionsList
-        dos={[
-          { content: 'Multiple currencies', 'aria-label': 'Supports multiple currencies' },
-          { content: 'Existing recipients', 'aria-label': 'Supports existing recipients' },
-        ]}
-        donts={[
-          { content: 'Create recipients', 'aria-label': "Doesn't support creating recipients" },
-          { content: 'Edit recipients', 'aria-label': "Doesn't support editing recipients" },
-        ]}
-        sort={args.sort}
-      />
-    </>
-  );
+export const Basic: Story = {
+  args: {
+    sort: 'dosFirst',
+    dos: [
+      'Do an initial money transfer',
+      'Invite at least 3 friends',
+      <span key="12">
+        Paying extra{' '}
+        <Link href="" type="link-large">
+          hidden fees
+        </Link>{' '}
+        for transfers
+      </span>,
+    ],
+    donts: ['Paying extra hidden fees for transfers', 'Use bad exchange rate'],
+  },
 };
 
-export const Basic = {
-  render: Template,
+export const WithNewLine: Story = {
   args: {
     sort: 'dosFirst',
+    dos: [
+      'Do an initial money transfer',
+      'Invite at least 3 friends',
+      'This do item has a newline:\nSecond line appears below',
+    ],
+    donts: [
+      'Paying extra hidden fees for transfers',
+      'Use bad exchange rate',
+      'This dont item has a newline:\nSecond line appears below',
+    ],
   },
 };