@transferwise/components 0.0.0-experimental-8edf644 → 0.0.0-experimental-9381602

package/build/types/instructionsList/InstructionsList.d.ts

@@ -13,6 +13,6 @@ export type InstructionsListProps = CommonProps & ({
     donts?: readonly InstructionNode[];
     sort?: 'dosFirst' | 'dontsFirst';
 });
-declare const InstructionsList: ({ className, dos, donts, sort }: InstructionsListProps) => import("react").JSX.Element;
+declare const InstructionsList: ({ dos, donts, sort }: InstructionsListProps) => import("react").JSX.Element;
 export default InstructionsList;
 //# sourceMappingURL=InstructionsList.d.ts.map

package/build/types/instructionsList/InstructionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InstructionsList.d.ts","sourceRoot":"","sources":["../../../src/instructionsList/InstructionsList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAc,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,SAAS,CAAC;IACnB,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAC7C,CACI;IACE,GAAG,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC7B,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAClC,GACD;IACE,GAAG,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACnC,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAClC,CACJ,CAAC;AAEJ,QAAA,MAAM,gBAAgB,oCAAkD,qBAAqB,gCA2B5F,CAAC;AAsBF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"InstructionsList.d.ts","sourceRoot":"","sources":["../../../src/instructionsList/InstructionsList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAO,EAAc,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,SAAS,CAAC;IACnB,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAC7C,CACI;IACE,GAAG,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC7B,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAClC,GACD;IACE,GAAG,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACnC,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAClC,CACJ,CAAC;AAEJ,QAAA,MAAM,gBAAgB,yBAAuC,qBAAqB,gCA2BjF,CAAC;AAsBF,eAAe,gBAAgB,CAAC"}

package/build/types/markdown/Markdown.d.ts

@@ -4,6 +4,7 @@ export type MarkdownProps = {
     as?: React.ElementType;
     config?: {
         link?: Pick<React.ComponentPropsWithoutRef<'a'>, 'target'>;
+        paragraph?: Pick<React.ComponentPropsWithoutRef<'p'>, 'className'>;
     };
     className?: string;
     children?: string;

package/build/types/markdown/Markdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../../src/markdown/Markdown.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAQ7C,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC,CAAC;KAC5D,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,CACA;IACE,SAAS,CAAC,EAAE,SAAS,GAAG,gBAAgB,EAAE,EAAE,CAAC;IAC7C,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB,GACD;IACE,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,GAAG,gBAAgB,EAAE,EAAE,CAAC;CAC9C,CACJ,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,EAAE,EAAE,OAAe,EACnB,SAAS,EACT,SAAS,EACT,MAAM,EACN,SAAS,EACT,QAAQ,GACT,EAAE,aAAa,sCA0Bf"}
+{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../../src/markdown/Markdown.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAQ7C,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC,CAAC;QAC3D,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,WAAW,CAAC,CAAC;KACpE,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,CACA;IACE,SAAS,CAAC,EAAE,SAAS,GAAG,gBAAgB,EAAE,EAAE,CAAC;IAC7C,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB,GACD;IACE,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,GAAG,gBAAgB,EAAE,EAAE,CAAC;CAC9C,CACJ,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,EAAE,EAAE,OAAe,EACnB,SAAS,EACT,SAAS,EACT,MAAM,EACN,SAAS,EACT,QAAQ,GACT,EAAE,aAAa,sCA8Bf"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-8edf644",
+  "version": "0.0.0-experimental-9381602",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -94,9 +94,9 @@
     "react-intl": "^5.10.0",
     "rollup": "^3.28.1",
     "storybook": "^7.6.17",
-    "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.9.6",
-    "@wise/components-theming": "1.1.0"
+    "@wise/components-theming": "1.1.0",
+    "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/instructionsList/InstructionsList.spec.tsx

@@ -3,11 +3,6 @@ import { render, screen } from '../test-utils';
 import InstructionsList from '.';
 
 describe('InstructionsList', () => {
-  it('should render with custom class', () => {
-    render(<InstructionsList className="foo" dos={['bar', 'baz']} />);
-    expect(screen.getByRole('list')).toHaveClass('foo');
-  });
-
   it('should render dos list only', () => {
     const dos = ['Test this component', 'With multiple dos'];
     render(<InstructionsList dos={dos} />);

package/src/instructionsList/InstructionsList.story.tsx

@@ -13,7 +13,6 @@ export const Template: StoryFn = (args: InstructionsListProps) => {
   return (
     <>
       <InstructionsList
-        className="tw-instructions--className"
         dos={[
           'Do an initial money transfer',
           'Invite at least 3 friends',

package/src/instructionsList/InstructionsList.tsx

@@ -1,5 +1,4 @@
 import { CrossCircleFill as DontIcon, CheckCircleFill as DoIcon } from '@transferwise/icons';
-import classNames from 'classnames';
 import { ReactNode } from 'react';
 
 import Body from '../body/Body';
@@ -24,7 +23,7 @@ export type InstructionsListProps = CommonProps &
       }
   );
 
-const InstructionsList = ({ className, dos, donts, sort = 'dosFirst' }: InstructionsListProps) => {
+const InstructionsList = ({ dos, donts, sort = 'dosFirst' }: InstructionsListProps) => {
   const dosInstructions =
     dos?.map((doThis, index) => (
       // eslint-disable-next-line react/no-array-index-key
@@ -50,7 +49,7 @@ const InstructionsList = ({ className, dos, donts, sort = 'dosFirst' }: Instruct
       </>
     );
 
-  return <ul className={classNames('tw-instructions', className)}>{orderedInstructions}</ul>;
+  return <ul className="tw-instructions">{orderedInstructions}</ul>;
 };
 
 function Instruction({ item, type }: { item: ReactNode | InstructionNode; type: 'do' | 'dont' }) {

package/src/markdown/Markdown.spec.tsx

@@ -126,6 +126,22 @@ describe('Markdown', () => {
     });
   });
 
+  describe('config.paragraph.className', () => {
+    it('adds a custom class when specified', () => {
+      render(
+        <Markdown config={{ paragraph: { className: 'm-b-0' } }}>{`# Heading
+
+This is a paragraph
+      `}</Markdown>,
+      );
+
+      expect(screen.getByText('This is a paragraph').closest('p')).toHaveAttribute(
+        'class',
+        'm-b-0',
+      );
+    });
+  });
+
   it('adds a target=_self attribute when nothing specified', () => {
     render(
       <Markdown>{`# Heading

package/src/markdown/Markdown.tsx

@@ -12,6 +12,7 @@ export type MarkdownProps = {
   as?: React.ElementType;
   config?: {
     link?: Pick<React.ComponentPropsWithoutRef<'a'>, 'target'>;
+    paragraph?: Pick<React.ComponentPropsWithoutRef<'p'>, 'className'>;
   };
   className?: string;
   children?: string;
@@ -39,6 +40,7 @@ export default function Markdown({
   }
 
   const linkTarget = config?.link?.target ?? '_self';
+  const paragraphClass = config?.paragraph?.className ?? '';
 
   if (allowList != null && blockList != null) {
     logActionRequired(
@@ -55,7 +57,10 @@ export default function Markdown({
 
   const createMarkup = () => {
     const parsed = parser(children);
-    return writer.render(parsed).replace(/<a href="/g, `<a target="${linkTarget}" href="`);
+    return writer
+      .render(parsed)
+      .replace(/<a href="/g, `<a target="${linkTarget}" href="`)
+      .replace(/<p>/g, `<p class="${paragraphClass}">`);
   };
 
   return <Element className={className} dangerouslySetInnerHTML={{ __html: createMarkup() }} />;