@transferwise/components 46.93.0 → 46.93.2

package/build/upload/steps/processingStep/processingStep.js

@@ -60,6 +60,7 @@ function ProcessingStep({
         "aria-live": "polite",
         children: psProcessingText
       }), psButtonText && /*#__PURE__*/jsxRuntime.jsx(Button_resolver, {
+        v2: true,
         disabled: psButtonDisabled,
         onClick: onClear,
         children: psButtonText

package/build/upload/steps/processingStep/processingStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"processingStep.js","sources":["../../../../src/upload/steps/processingStep/processingStep.tsx"],"sourcesContent":["import Button from '../../../button';\nimport { Status, Typography } from '../../../common';\nimport ProcessIndicator, { ProcessIndicatorStatus } from '../../../processIndicator';\nimport Title from '../../../title';\n\nexport interface ProcessingStepProps {\n  isComplete: boolean;\n  isError: boolean;\n  isSuccess: boolean;\n  onAnimationCompleted: (status: ProcessIndicatorStatus) => void;\n  onClear: React.MouseEventHandler<HTMLButtonElement>;\n  psButtonText: string;\n  psProcessingText: string;\n  psButtonDisabled: boolean;\n}\n\nexport default function ProcessingStep({\n  isComplete,\n  isError,\n  isSuccess,\n  onAnimationCompleted,\n  onClear,\n  psButtonText,\n  psProcessingText,\n  psButtonDisabled,\n}: ProcessingStepProps) {\n  let processStatus = Status.PROCESSING;\n  if (isError) {\n    processStatus = Status.FAILED;\n  }\n  if (isSuccess) {\n    processStatus = Status.SUCCEEDED;\n  }\n\n  return (\n    <div className=\"droppable-processing-card droppable-card\" aria-hidden={isComplete}>\n      <div className=\"droppable-card-content\">\n        <ProcessIndicator\n          status={processStatus}\n          onAnimationCompleted={(status) => onAnimationCompleted(status)}\n        />\n        <Title className=\"m-y-2\" type={Typography.TITLE_BODY} aria-live=\"polite\">\n          {psProcessingText}\n        </Title>\n        {psButtonText && (\n          <Button disabled={psButtonDisabled} onClick={onClear}>\n            {psButtonText}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ProcessingStep","isComplete","isError","isSuccess","onAnimationCompleted","onClear","psButtonText","psProcessingText","psButtonDisabled","processStatus","Status","PROCESSING","FAILED","SUCCEEDED","_jsx","className","children","_jsxs","ProcessIndicator","status","Title","type","Typography","TITLE_BODY","Button","disabled","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBwB,SAAAA,cAAcA,CAAC;EACrCC,UAAU;EACVC,OAAO;EACPC,SAAS;EACTC,oBAAoB;EACpBC,OAAO;EACPC,YAAY;EACZC,gBAAgB;AAChBC,EAAAA,gBAAAA;AACoB,CAAA,EAAA;AACpB,EAAA,IAAIC,aAAa,GAAGC,aAAM,CAACC,UAAU,CAAA;AACrC,EAAA,IAAIT,OAAO,EAAE;IACXO,aAAa,GAAGC,aAAM,CAACE,MAAM,CAAA;AAC/B,GAAA;AACA,EAAA,IAAIT,SAAS,EAAE;IACbM,aAAa,GAAGC,aAAM,CAACG,SAAS,CAAA;AAClC,GAAA;AAEA,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,0CAA0C;AAAC,IAAA,aAAA,EAAad,UAAW;AAAAe,IAAAA,QAAA,eAChFC,eAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,wBAAwB;MAAAC,QAAA,EAAA,cACrCF,cAAA,CAACI,gBAAgB,EAAA;AACfC,QAAAA,MAAM,EAAEV,aAAc;AACtBL,QAAAA,oBAAoB,EAAGe,MAAM,IAAKf,oBAAoB,CAACe,MAAM,CAAA;AAAE,OAEjE,CAAA,eAAAL,cAAA,CAACM,KAAK,EAAA;AAACL,QAAAA,SAAS,EAAC,OAAO;QAACM,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAC,QAAA,WAAA,EAAU,QAAQ;AAAAP,QAAAA,QAAA,EACrET,gBAAAA;AAAgB,OACZ,CACP,EAACD,YAAY,iBACXQ,cAAA,CAACU,eAAM,EAAA;AAACC,QAAAA,QAAQ,EAAEjB,gBAAiB;AAACkB,QAAAA,OAAO,EAAErB,OAAQ;AAAAW,QAAAA,QAAA,EAClDV,YAAAA;AAAY,OACP,CACT,CAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"processingStep.js","sources":["../../../../src/upload/steps/processingStep/processingStep.tsx"],"sourcesContent":["import Button from '../../../button';\nimport { Status, Typography } from '../../../common';\nimport ProcessIndicator, { ProcessIndicatorStatus } from '../../../processIndicator';\nimport Title from '../../../title';\n\nexport interface ProcessingStepProps {\n  isComplete: boolean;\n  isError: boolean;\n  isSuccess: boolean;\n  onAnimationCompleted: (status: ProcessIndicatorStatus) => void;\n  onClear: React.MouseEventHandler<HTMLButtonElement>;\n  psButtonText: string;\n  psProcessingText: string;\n  psButtonDisabled: boolean;\n}\n\nexport default function ProcessingStep({\n  isComplete,\n  isError,\n  isSuccess,\n  onAnimationCompleted,\n  onClear,\n  psButtonText,\n  psProcessingText,\n  psButtonDisabled,\n}: ProcessingStepProps) {\n  let processStatus = Status.PROCESSING;\n  if (isError) {\n    processStatus = Status.FAILED;\n  }\n  if (isSuccess) {\n    processStatus = Status.SUCCEEDED;\n  }\n\n  return (\n    <div className=\"droppable-processing-card droppable-card\" aria-hidden={isComplete}>\n      <div className=\"droppable-card-content\">\n        <ProcessIndicator\n          status={processStatus}\n          onAnimationCompleted={(status) => onAnimationCompleted(status)}\n        />\n        <Title className=\"m-y-2\" type={Typography.TITLE_BODY} aria-live=\"polite\">\n          {psProcessingText}\n        </Title>\n        {psButtonText && (\n          <Button v2 disabled={psButtonDisabled} onClick={onClear}>\n            {psButtonText}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ProcessingStep","isComplete","isError","isSuccess","onAnimationCompleted","onClear","psButtonText","psProcessingText","psButtonDisabled","processStatus","Status","PROCESSING","FAILED","SUCCEEDED","_jsx","className","children","_jsxs","ProcessIndicator","status","Title","type","Typography","TITLE_BODY","Button","v2","disabled","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBwB,SAAAA,cAAcA,CAAC;EACrCC,UAAU;EACVC,OAAO;EACPC,SAAS;EACTC,oBAAoB;EACpBC,OAAO;EACPC,YAAY;EACZC,gBAAgB;AAChBC,EAAAA,gBAAAA;AACoB,CAAA,EAAA;AACpB,EAAA,IAAIC,aAAa,GAAGC,aAAM,CAACC,UAAU,CAAA;AACrC,EAAA,IAAIT,OAAO,EAAE;IACXO,aAAa,GAAGC,aAAM,CAACE,MAAM,CAAA;AAC/B,GAAA;AACA,EAAA,IAAIT,SAAS,EAAE;IACbM,aAAa,GAAGC,aAAM,CAACG,SAAS,CAAA;AAClC,GAAA;AAEA,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,0CAA0C;AAAC,IAAA,aAAA,EAAad,UAAW;AAAAe,IAAAA,QAAA,eAChFC,eAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,wBAAwB;MAAAC,QAAA,EAAA,cACrCF,cAAA,CAACI,gBAAgB,EAAA;AACfC,QAAAA,MAAM,EAAEV,aAAc;AACtBL,QAAAA,oBAAoB,EAAGe,MAAM,IAAKf,oBAAoB,CAACe,MAAM,CAAA;AAAE,OAEjE,CAAA,eAAAL,cAAA,CAACM,KAAK,EAAA;AAACL,QAAAA,SAAS,EAAC,OAAO;QAACM,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAAC,QAAA,WAAA,EAAU,QAAQ;AAAAP,QAAAA,QAAA,EACrET,gBAAAA;AAAgB,OACZ,CACP,EAACD,YAAY,iBACXQ,cAAA,CAACU,eAAM,EAAA;QAACC,EAAE,EAAA,IAAA;AAACC,QAAAA,QAAQ,EAAElB,gBAAiB;AAACmB,QAAAA,OAAO,EAAEtB,OAAQ;AAAAW,QAAAA,QAAA,EACrDV,YAAAA;AAAY,OACP,CACT,CAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/upload/steps/processingStep/processingStep.mjs

@@ -58,6 +58,7 @@ function ProcessingStep({
         "aria-live": "polite",
         children: psProcessingText
       }), psButtonText && /*#__PURE__*/jsx(Button, {
+        v2: true,
         disabled: psButtonDisabled,
         onClick: onClear,
         children: psButtonText

package/build/upload/steps/processingStep/processingStep.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"processingStep.mjs","sources":["../../../../src/upload/steps/processingStep/processingStep.tsx"],"sourcesContent":["import Button from '../../../button';\nimport { Status, Typography } from '../../../common';\nimport ProcessIndicator, { ProcessIndicatorStatus } from '../../../processIndicator';\nimport Title from '../../../title';\n\nexport interface ProcessingStepProps {\n  isComplete: boolean;\n  isError: boolean;\n  isSuccess: boolean;\n  onAnimationCompleted: (status: ProcessIndicatorStatus) => void;\n  onClear: React.MouseEventHandler<HTMLButtonElement>;\n  psButtonText: string;\n  psProcessingText: string;\n  psButtonDisabled: boolean;\n}\n\nexport default function ProcessingStep({\n  isComplete,\n  isError,\n  isSuccess,\n  onAnimationCompleted,\n  onClear,\n  psButtonText,\n  psProcessingText,\n  psButtonDisabled,\n}: ProcessingStepProps) {\n  let processStatus = Status.PROCESSING;\n  if (isError) {\n    processStatus = Status.FAILED;\n  }\n  if (isSuccess) {\n    processStatus = Status.SUCCEEDED;\n  }\n\n  return (\n    <div className=\"droppable-processing-card droppable-card\" aria-hidden={isComplete}>\n      <div className=\"droppable-card-content\">\n        <ProcessIndicator\n          status={processStatus}\n          onAnimationCompleted={(status) => onAnimationCompleted(status)}\n        />\n        <Title className=\"m-y-2\" type={Typography.TITLE_BODY} aria-live=\"polite\">\n          {psProcessingText}\n        </Title>\n        {psButtonText && (\n          <Button disabled={psButtonDisabled} onClick={onClear}>\n            {psButtonText}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ProcessingStep","isComplete","isError","isSuccess","onAnimationCompleted","onClear","psButtonText","psProcessingText","psButtonDisabled","processStatus","Status","PROCESSING","FAILED","SUCCEEDED","_jsx","className","children","_jsxs","ProcessIndicator","status","Title","type","Typography","TITLE_BODY","Button","disabled","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBwB,SAAAA,cAAcA,CAAC;EACrCC,UAAU;EACVC,OAAO;EACPC,SAAS;EACTC,oBAAoB;EACpBC,OAAO;EACPC,YAAY;EACZC,gBAAgB;AAChBC,EAAAA,gBAAAA;AACoB,CAAA,EAAA;AACpB,EAAA,IAAIC,aAAa,GAAGC,MAAM,CAACC,UAAU,CAAA;AACrC,EAAA,IAAIT,OAAO,EAAE;IACXO,aAAa,GAAGC,MAAM,CAACE,MAAM,CAAA;AAC/B,GAAA;AACA,EAAA,IAAIT,SAAS,EAAE;IACbM,aAAa,GAAGC,MAAM,CAACG,SAAS,CAAA;AAClC,GAAA;AAEA,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,0CAA0C;AAAC,IAAA,aAAA,EAAad,UAAW;AAAAe,IAAAA,QAAA,eAChFC,IAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,wBAAwB;MAAAC,QAAA,EAAA,cACrCF,GAAA,CAACI,gBAAgB,EAAA;AACfC,QAAAA,MAAM,EAAEV,aAAc;AACtBL,QAAAA,oBAAoB,EAAGe,MAAM,IAAKf,oBAAoB,CAACe,MAAM,CAAA;AAAE,OAEjE,CAAA,eAAAL,GAAA,CAACM,KAAK,EAAA;AAACL,QAAAA,SAAS,EAAC,OAAO;QAACM,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAC,QAAA,WAAA,EAAU,QAAQ;AAAAP,QAAAA,QAAA,EACrET,gBAAAA;AAAgB,OACZ,CACP,EAACD,YAAY,iBACXQ,GAAA,CAACU,MAAM,EAAA;AAACC,QAAAA,QAAQ,EAAEjB,gBAAiB;AAACkB,QAAAA,OAAO,EAAErB,OAAQ;AAAAW,QAAAA,QAAA,EAClDV,YAAAA;AAAY,OACP,CACT,CAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}
+{"version":3,"file":"processingStep.mjs","sources":["../../../../src/upload/steps/processingStep/processingStep.tsx"],"sourcesContent":["import Button from '../../../button';\nimport { Status, Typography } from '../../../common';\nimport ProcessIndicator, { ProcessIndicatorStatus } from '../../../processIndicator';\nimport Title from '../../../title';\n\nexport interface ProcessingStepProps {\n  isComplete: boolean;\n  isError: boolean;\n  isSuccess: boolean;\n  onAnimationCompleted: (status: ProcessIndicatorStatus) => void;\n  onClear: React.MouseEventHandler<HTMLButtonElement>;\n  psButtonText: string;\n  psProcessingText: string;\n  psButtonDisabled: boolean;\n}\n\nexport default function ProcessingStep({\n  isComplete,\n  isError,\n  isSuccess,\n  onAnimationCompleted,\n  onClear,\n  psButtonText,\n  psProcessingText,\n  psButtonDisabled,\n}: ProcessingStepProps) {\n  let processStatus = Status.PROCESSING;\n  if (isError) {\n    processStatus = Status.FAILED;\n  }\n  if (isSuccess) {\n    processStatus = Status.SUCCEEDED;\n  }\n\n  return (\n    <div className=\"droppable-processing-card droppable-card\" aria-hidden={isComplete}>\n      <div className=\"droppable-card-content\">\n        <ProcessIndicator\n          status={processStatus}\n          onAnimationCompleted={(status) => onAnimationCompleted(status)}\n        />\n        <Title className=\"m-y-2\" type={Typography.TITLE_BODY} aria-live=\"polite\">\n          {psProcessingText}\n        </Title>\n        {psButtonText && (\n          <Button v2 disabled={psButtonDisabled} onClick={onClear}>\n            {psButtonText}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["ProcessingStep","isComplete","isError","isSuccess","onAnimationCompleted","onClear","psButtonText","psProcessingText","psButtonDisabled","processStatus","Status","PROCESSING","FAILED","SUCCEEDED","_jsx","className","children","_jsxs","ProcessIndicator","status","Title","type","Typography","TITLE_BODY","Button","v2","disabled","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBwB,SAAAA,cAAcA,CAAC;EACrCC,UAAU;EACVC,OAAO;EACPC,SAAS;EACTC,oBAAoB;EACpBC,OAAO;EACPC,YAAY;EACZC,gBAAgB;AAChBC,EAAAA,gBAAAA;AACoB,CAAA,EAAA;AACpB,EAAA,IAAIC,aAAa,GAAGC,MAAM,CAACC,UAAU,CAAA;AACrC,EAAA,IAAIT,OAAO,EAAE;IACXO,aAAa,GAAGC,MAAM,CAACE,MAAM,CAAA;AAC/B,GAAA;AACA,EAAA,IAAIT,SAAS,EAAE;IACbM,aAAa,GAAGC,MAAM,CAACG,SAAS,CAAA;AAClC,GAAA;AAEA,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,0CAA0C;AAAC,IAAA,aAAA,EAAad,UAAW;AAAAe,IAAAA,QAAA,eAChFC,IAAA,CAAA,KAAA,EAAA;AAAKF,MAAAA,SAAS,EAAC,wBAAwB;MAAAC,QAAA,EAAA,cACrCF,GAAA,CAACI,gBAAgB,EAAA;AACfC,QAAAA,MAAM,EAAEV,aAAc;AACtBL,QAAAA,oBAAoB,EAAGe,MAAM,IAAKf,oBAAoB,CAACe,MAAM,CAAA;AAAE,OAEjE,CAAA,eAAAL,GAAA,CAACM,KAAK,EAAA;AAACL,QAAAA,SAAS,EAAC,OAAO;QAACM,IAAI,EAAEC,UAAU,CAACC,UAAW;AAAC,QAAA,WAAA,EAAU,QAAQ;AAAAP,QAAAA,QAAA,EACrET,gBAAAA;AAAgB,OACZ,CACP,EAACD,YAAY,iBACXQ,GAAA,CAACU,MAAM,EAAA;QAACC,EAAE,EAAA,IAAA;AAACC,QAAAA,QAAQ,EAAElB,gBAAiB;AAACmB,QAAAA,OAAO,EAAEtB,OAAQ;AAAAW,QAAAA,QAAA,EACrDV,YAAAA;AAAY,OACP,CACT,CAAA;KACE,CAAA;AACP,GAAK,CAAC,CAAA;AAEV;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.93.0",
+  "version": "46.93.2",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -81,8 +81,10 @@
     "@types/react-dom": "^18.3.1",
     "@types/react-transition-group": "4.4.10",
     "@wise/art": "^2.16.3",
+    "@wise/eslint-config": "^12.2.0",
     "babel-plugin-formatjs": "^10.5.16",
     "enzyme": "^3.11.0",
+    "eslint": "^9.21.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
@@ -93,7 +95,8 @@
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.22.0",
-    "@wise/components-theming": "1.6.1"
+    "@wise/components-theming": "1.6.1",
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
@@ -149,7 +152,7 @@
     "lint": "pnpm run lint:check",
     "lint:check": "npm-run-all --parallel lint:check:*",
     "lint:check:format": "prettier --check --ignore-path ../../.prettierignore . || echo \"Prettier failed. Remove this to make this a failure\"",
-    "lint:check:js+ts": "eslint --ext .js,.jsx,.mjs,.cjs,.ts,.tsx,.mts,.cts --ignore-path ../../.gitignore .",
+    "lint:check:js+ts": "eslint .",
     "lint:check:types": "tsc --noEmit --emitDeclarationOnly false",
     "lint:fix": "npm-run-all --serial lint:fix:*",
     "lint:fix:format": "prettier --write --ignore-path ../../.prettierignore .",

package/src/accordion/Accordion.story.tsx

@@ -75,7 +75,7 @@ export const Default: Story = {
 
 export const Multiple: Story = {
   render: (args) => {
-    const items = args.items;
+    const { items } = args;
     return (
       <>
         <Accordion {...args} items={[items[0]]} />
@@ -105,7 +105,7 @@ export const WithinModal: Story = {
     },
   },
   render: (args) => {
-    const items = args.items;
+    const { items } = args;
     return (
       <Modal
         body={

package/src/alert/Alert.story.tsx

@@ -213,7 +213,7 @@ export const DynamicRender: Story = {
 
     return (
       <>
-        <Button htmlType="button" onClick={() => setIsOneActive(true)}>
+        <Button v2 onClick={() => setIsOneActive(true)}>
           Trigger Alert
         </Button>
 
@@ -248,7 +248,7 @@ function Render(args) {
 
   return (
     <>
-      <Button htmlType="button" onClick={() => setIsOneActive(true)}>
+      <Button v2 onClick={() => setIsOneActive(true)}>
         Trigger Alert
       </Button>
 
@@ -325,7 +325,7 @@ export const MultipleDynamicAlerts: Story = {
         </Button>
 
         {alerts.map((props) => (
-          <Alert {...props} key={props.title} className="m-t-3" />
+          <Alert key={props.title} {...props} className="m-t-3" />
         ))}
       </>
     );
@@ -352,8 +352,8 @@ function Render() {
 
       {alerts.map(props => (
         <Alert 
-          {...props} 
           key={props.title} 
+          {...props} 
           className="m-t-3" 
         />
       ))}

package/src/alert/Alert.tests.story.tsx

@@ -37,7 +37,7 @@ export const SimpleTrigger: Story = {
 
     return (
       <>
-        <Button htmlType="button" onClick={() => setIsActive(true)}>
+        <Button v2 onClick={() => setIsActive(true)}>
           Trigger Alert
         </Button>
 
@@ -119,12 +119,12 @@ export const MultipleDynamicAlerts: Story = {
 
     return (
       <>
-        <Button htmlType="button" onClick={() => setAlerts(getAlerts())}>
+        <Button v2 onClick={() => setAlerts(getAlerts())}>
           Generate dynamic alerts
         </Button>
 
         {alerts.map((props) => (
-          <Alert {...props} key={props.title} className="m-t-3" />
+          <Alert key={props.title} {...props} className="m-t-3" />
         ))}
       </>
     );

package/src/button/LegacyButton.tsx

@@ -133,10 +133,8 @@ const LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(
         disabled,
       },
       // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       typeClassMap[newType],
       // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       priorityClassMap[newPriority],
       className,
     );

package/src/carousel/Carousel.spec.tsx

@@ -47,9 +47,7 @@ describe('Carousel', () => {
   const scrollBy = jest.fn();
 
   beforeEach(() => {
-    // eslint-disable-next-line functional/immutable-data
     window.HTMLElement.prototype.scrollIntoView = focusSpy;
-    // eslint-disable-next-line functional/immutable-data
     window.HTMLElement.prototype.scrollBy = scrollBy;
   });
 
@@ -198,13 +196,11 @@ describe('Carousel', () => {
 });
 
 const mockPositions = (scrollWidth: number, offsetWidth: number) => {
-  // eslint-disable-next-line functional/immutable-data
   Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
     configurable: true,
     value: scrollWidth,
   });
 
-  // eslint-disable-next-line functional/immutable-data
   Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
     configurable: true,
     value: offsetWidth,

package/src/carousel/Carousel.tsx

@@ -228,7 +228,6 @@ const Carousel: React.FC<CarouselProps> = ({ header, className, cards, onClick }
                 className={clsx('carousel__card-content', {
                   [card.className ?? '']: !!card.className,
                 })}
-                // eslint-disable-next-line react/forbid-dom-props
                 style={card.styles}
               >
                 {card.content}

package/src/checkbox/Checkbox.tsx

@@ -44,7 +44,6 @@ export default function Checkbox({
   const innerDisabled = disabled || readOnly;
   return (
     <div id={id} className={classList}>
-      {/* eslint-disable-next-line jsx-a11y/label-has-for */}
       <label className={clsx({ disabled })}>
         <CheckboxButton
           className="p-r-2"

package/src/checkboxButton/CheckboxButton.story.tsx

@@ -23,7 +23,6 @@ export const Basic: Story = {
     'aria-label': 'Toggle email updates',
   },
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [checked, setChecked] = useState(true);
 
     return <CheckboxButton {...args} checked={checked} onChange={() => setChecked(!checked)} />;
@@ -36,7 +35,6 @@ export const Indeterminate: Story = {
     indeterminate: true,
   },
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [indeterminate, setIndeterminate] = useState(true);
 
     return (

package/src/checkboxButton/CheckboxButton.tsx

@@ -19,7 +19,7 @@ const CheckboxButton = forwardRef<HTMLInputElement, CheckboxButtonProps>(functio
 
   useEffect(() => {
     if (internalRef.current) {
-      // eslint-disable-next-line functional/immutable-data, @typescript-eslint/no-unsafe-assignment
+      // eslint-disable-next-line functional/immutable-data
       internalRef.current.indeterminate = indeterminate;
     }
   }, [indeterminate, reference]);

package/src/checkboxOption/CheckboxOption.tsx

@@ -2,8 +2,7 @@ import { forwardRef } from 'react';
 
 import CheckboxButton from '../checkboxButton';
 import Option from '../common/Option';
-import { ReferenceType } from '../common/Option/Option';
-import { BaseOptionProps } from '../common/Option/Option';
+import { ReferenceType, BaseOptionProps } from '../common/Option/Option';
 
 export type CheckboxOptionProps = Omit<BaseOptionProps, 'onChange'> & {
   /**

package/src/common/bottomSheet/BottomSheet.spec.tsx

@@ -2,7 +2,6 @@ import { render, mockMatchMedia } from '../../test-utils';
 
 import BottomSheet from './BottomSheet';
 
-// eslint-disable-next-line @typescript-eslint/no-unsafe-call
 mockMatchMedia();
 
 describe('BottomSheet', () => {

package/src/common/bottomSheet/BottomSheet.story.tsx

@@ -19,8 +19,8 @@ export default {
     open: true,
   },
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [open, setOpen] = useState(args.open);
+
     return (
       <div style={{ height: '2000px' }}>
         <Button onClick={() => setOpen(true)}>Open BottomSheet</Button>

package/src/common/bottomSheet/BottomSheet.tsx

@@ -201,7 +201,6 @@ const BottomSheet = ({ role = 'dialog', ...props }: BottomSheetProps) => {
         position={Position.BOTTOM}
         className={clsx('np-bottom-sheet', props.className)}
       >
-        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
         <div
           id={overlayId}
           aria-labelledby={props['aria-labelledby'] || undefined}

package/src/common/dateUtils/isDateValid/isDateValid.ts

@@ -1,11 +1,13 @@
 export const isDateValid = (date: Date | string | null) => {
   if (date === null) {
     return false;
-  } else if (date instanceof Date) {
+  }
+
+  if (date instanceof Date) {
     return validDateObject(date);
-  } else {
-    return validDateString(date);
   }
+
+  return validDateString(date);
 };
 
 export const validDateString = (dateString: string) => validDateObject(new Date(dateString));

package/src/common/hooks/useHasIntersected/useHasIntersected.spec.js

@@ -65,7 +65,6 @@ describe('useHasIntersected', () => {
       });
 
       it('calls observer', () => {
-        // eslint-disable-next-line jest/prefer-spy-on
         window.IntersectionObserver = jest.fn(() => ({
           observe,
           unobserve,
@@ -107,7 +106,6 @@ describe('useHasIntersected', () => {
   });
 
   const setupIntersectionObserver = (isIntersecting) => {
-    // eslint-disable-next-line jest/prefer-spy-on
     window.IntersectionObserver = jest.fn((callback) => {
       callback([{ isIntersecting }], { unobserve });
       return {

package/src/common/panel/Panel.tsx

@@ -119,26 +119,15 @@ const Panel = forwardRef<HTMLDivElement, PanelProps>(function Panel(
         {...rest}
         ref={setPopperElement}
         role="dialog"
-        // eslint-disable-next-line react/forbid-dom-props
         style={{ ...styles.popper }}
         {...attributes.popper}
         className={clsx('np-panel', { 'np-panel--open': open }, rest.className)}
       >
-        <div
-          ref={reference}
-          /* eslint-disable-next-line react/forbid-dom-props */
-          style={contentStyle}
-          className={clsx('np-panel__content')}
-        >
+        <div ref={reference} style={contentStyle} className={clsx('np-panel__content')}>
           {children}
           {/* Arrow has to stay inside content to get the same animations as the "dialog" and to get hidden when panel is closed. */}
           {arrow && (
-            <div
-              ref={setArrowElement}
-              className={clsx('np-panel__arrow')}
-              // eslint-disable-next-line react/forbid-dom-props
-              style={styles.arrow}
-            />
+            <div ref={setArrowElement} className={clsx('np-panel__arrow')} style={styles.arrow} />
           )}
         </div>
       </div>

package/src/dimmer/Dimmer.spec.tsx

@@ -33,7 +33,9 @@ describe('Dimmer', () => {
     it('does not call onClose if the dimmer content is clicked', async () => {
       render(
         <Dimmer {...props}>
-          <Button onClick={() => {}}>McClicky</Button>
+          <Button v2 onClick={() => {}}>
+            McClicky
+          </Button>
         </Dimmer>,
       );
       await userEvent.click(screen.getByRole('button'));

package/src/dimmer/Dimmer.story.tsx

@@ -18,12 +18,13 @@ type Story = StoryObj<typeof Dimmer>;
 
 export const Basic: Story = {
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [open, setOpen] = useState(false);
 
     return (
       <>
-        <Button onClick={() => setOpen((isOpen) => !isOpen)}>Toggle dimmer</Button>
+        <Button v2 onClick={() => setOpen((isOpen) => !isOpen)}>
+          Toggle dimmer
+        </Button>
         <Dimmer
           {...args}
           open={open}

package/src/dimmer/dimmerManager/DimmerManager.ts

@@ -5,7 +5,7 @@ export default class DimmerManager {
   /**
    * Dimmer refs
    */
-  private dimmers: Element[];
+  private readonly dimmers: Element[];
 
   constructor() {
     this.dimmers = [];

package/src/display/Display.story.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/accessible-emoji */
-
 import { Typography } from '../common';
 import Money from '../money/Money';
 import Title from '../title/Title';

package/src/drawer/Drawer.story.tsx

@@ -18,7 +18,7 @@ export const Basic = () => {
 
   return (
     <>
-      <Button disabled={false} block={false} onClick={() => setOpenDrawer(true)}>
+      <Button v2 disabled={false} block={false} onClick={() => setOpenDrawer(true)}>
         Open drawer
       </Button>
       <Drawer
@@ -27,10 +27,10 @@ export const Basic = () => {
         headerTitle="This is the title of the drawer"
         footerContent={
           <>
-            <Button block onClick={() => {}}>
+            <Button v2 block onClick={() => {}}>
               Action 1
             </Button>
-            <Button block priority={Priority.SECONDARY} onClick={() => {}}>
+            <Button v2 block priority={Priority.SECONDARY} onClick={() => {}}>
               Action 2
             </Button>
           </>
@@ -50,7 +50,9 @@ export const Basic = () => {
         <Section className="m-t-2">
           <Input />
           <p className="m-t-3">Cat ipsum dolor sit amet, purr when being pet.</p>
-          <Button onClick={() => setOpenModal(true)}>Open Modal</Button>
+          <Button v2 onClick={() => setOpenModal(true)}>
+            Open Modal
+          </Button>
           <Modal
             body={
               <p className="m-t-4">

package/src/dropFade/DropFade.story.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/forbid-dom-props */
 import { action } from '@storybook/addon-actions';
 import { useState } from 'react';
 
@@ -35,7 +34,7 @@ export const Basic = () => {
           }}
         />
       </DropFade>
-      <Button className="m-t-3" block onClick={() => setOpen(true)}>
+      <Button v2 className="m-t-3" block onClick={() => setOpen(true)}>
         Some other content
       </Button>
     </div>

package/src/dropFade/DropFade.tsx

@@ -26,7 +26,6 @@ const DropFade = ({ children, show }: { children: ReactElement; show: boolean })
         setHeight(0);
       }}
     >
-      {/* eslint-disable-next-line react/forbid-dom-props */}
       <div ref={reference} style={{ height }} className="np-dropfade">
         {clonedChild}
       </div>

package/src/emphasis/EmphasisHtmlTransformer.spec.tsx

@@ -7,7 +7,7 @@ describe('creates safe, enphasised html', () => {
       emphasisHtmlTransformer.transform(
         '<script>something malicious</script><p>some text & more text</p>',
       ),
-    ).toStrictEqual(
+    ).toBe(
       '&lt;script&gt;something malicious&lt;/script&gt;&lt;p&gt;some text &amp; more text&lt;/p&gt;',
     );
   });
@@ -18,7 +18,7 @@ describe('creates safe, enphasised html', () => {
       emphasisHtmlTransformer.transform(
         '<script>something malicious</script><positive>hello</positive><negative>world</negative><positive>!</positive>',
       ),
-    ).toStrictEqual(
+    ).toBe(
       '&lt;script&gt;something malicious&lt;/script&gt;<em class="emphasis emphasis--positive">hello</em><em class="emphasis emphasis--negative">world</em><em class="emphasis emphasis--positive">!</em>',
     );
   });
@@ -26,11 +26,11 @@ describe('creates safe, enphasised html', () => {
   describe('supports new line characters', () => {
     it('supports slash n in the string', () => {
       const emphasisHtmlTransformer = new EmphasisHtmlTransformer();
-      expect(emphasisHtmlTransformer.transform('hello\\nworld')).toStrictEqual('hello<br />world');
+      expect(emphasisHtmlTransformer.transform('hello\\nworld')).toBe('hello<br />world');
     });
     it('supports new line characters', () => {
       const emphasisHtmlTransformer = new EmphasisHtmlTransformer();
-      expect(emphasisHtmlTransformer.transform('hello\nworld')).toStrictEqual('hello<br />world');
+      expect(emphasisHtmlTransformer.transform('hello\nworld')).toBe('hello<br />world');
     });
   });
 });

package/src/emphasis/EmphasisHtmlTransformer.ts

@@ -13,9 +13,9 @@ type Tags = {
 };
 
 class EmphasisHtmlTransformer {
-  tags: Array<Tags>;
+  tags: Tags[];
 
-  constructor(whitelistedTags?: Array<string>) {
+  constructor(whitelistedTags?: string[]) {
     this.tags = (whitelistedTags || []).map((tag) => {
       return {
         transformed: {

package/src/flowNavigation/FlowNavigation.story.tsx

@@ -235,7 +235,12 @@ export const SendFlow = () => {
 
       <Sticky>
         <div className="d-flex justify-content-center align-items-center p-a-3">
-          <Button disabled={activeStep === 3} block onClick={() => setActiveStep(activeStep + 1)}>
+          <Button
+            v2
+            disabled={activeStep === 3}
+            block
+            onClick={() => setActiveStep(activeStep + 1)}
+          >
             Continue
           </Button>
         </div>

package/src/inputs/Input.tsx

@@ -31,7 +31,6 @@ export const Input = forwardRef(function Input(
         'np-input--shape-rectangle': shape === 'rectangle',
         'np-input--shape-pill': shape === 'pill',
       })}
-      // eslint-disable-next-line react/forbid-dom-props
       style={inputPaddings}
       {...inputAttributes}
       {...restProps}

package/src/inputs/SelectInput.story.tsx

@@ -464,7 +464,9 @@ export const WithinDrawer: Story<Currency> = {
       const [open, setOpen] = useState(context.viewMode === 'story');
       return (
         <>
-          <Button onClick={() => setOpen(true)}>Open drawer</Button>
+          <Button v2 onClick={() => setOpen(true)}>
+            Open drawer
+          </Button>
           <Drawer
             open={open}
             headerTitle="This is the title of the drawer"
@@ -485,7 +487,9 @@ export const WithinModal: Story<Currency> = {
       const [open, setOpen] = useState(context.viewMode === 'story');
       return (
         <>
-          <Button onClick={() => setOpen(true)}>Open modal</Button>
+          <Button v2 onClick={() => setOpen(true)}>
+            Open modal
+          </Button>
           <Modal open={open} body={<Story />} onClose={() => setOpen(false)} />
         </>
       );

package/src/inputs/SelectInput.tsx

@@ -629,13 +629,7 @@ function SelectInputOptions<T = string>({
   const getItemNode = (index: number) => {
     const item = filteredItems[index];
     return (
-      <SelectInputItemView
-        // eslint-disable-next-line react/no-array-index-key
-        key={index}
-        item={item}
-        renderValue={renderValue}
-        needle={needle}
-      />
+      <SelectInputItemView key={index} item={item} renderValue={renderValue} needle={needle} />
     );
   };
 

package/src/inputs/_ButtonInput.tsx

@@ -19,7 +19,6 @@ export const ButtonInput = forwardRef(function ButtonInput(
       ref={ref}
       type="button"
       className={clsx(className, inputClassNameBase({ size }), 'np-button-input')}
-      // eslint-disable-next-line react/forbid-dom-props
       style={{ ...inputPaddings, ...style }}
       {...restProps}
     />

package/src/inputs/_Popover.tsx

@@ -113,7 +113,6 @@ export function Popover({
                     'np-popover-v2-container--size-md': size === 'md',
                     'np-popover-v2-container--size-lg': size === 'lg',
                   })}
-                  // eslint-disable-next-line react/forbid-dom-props
                   style={floatingStyles}
                   {...getFloatingProps()}
                 >

package/src/link/Link.story.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-child-element-spacing */
 import Body from '../body/Body';
 import { Typography } from '../common';
 import Title from '../title/Title';

package/src/listItem/ListItem.story.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable react/jsx-child-element-spacing */
-
 import { action } from '@storybook/addon-actions';
 import { Documents, FastFlag } from '@transferwise/icons';
 import { ComponentProps } from 'react';

package/src/markdown/Markdown.spec.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-key */
 import { MarkdownNodeType } from '../common';
 import { render, screen } from '../test-utils';