@transferwise/components 0.0.0-experimental-60cb1a1 → 0.0.0-experimental-69a95e1

package/build/uploadInput/uploadButton/getAllowedFileTypes.js

@@ -1,28 +1,8 @@
 'use strict';
 
-const parseFileType = fileType => {
-  if (fileType?.includes('.')) {
-    return fileType.replace('.', '').toUpperCase();
-  }
-  const mimeType = fileType?.split('/');
-  if (mimeType?.length > 1) {
-    let parsedType = mimeType[1];
-    if (parsedType.toLocaleLowerCase() === 'jpeg') {
-      parsedType = 'jpg, '.concat(parsedType).toUpperCase();
-    }
-    return parsedType.toUpperCase();
-  }
-  return fileType;
-};
-const getAllowedFileTypes = fileTypes => fileTypes.map(fileType => {
-  const splittedFileTypes = fileType?.split(',');
-  if (splittedFileTypes?.length > 1) {
-    // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types
-    return splittedFileTypes.filter(splittedFileType => !splittedFileType?.includes('/')).map(splittedFileType => parseFileType(splittedFileType)).join(', ');
-  }
-  // If `fileType` contains only `format` or `mime` type, parse the type
-  return parseFileType(fileType);
-});
+const getAllowedFileTypes = fileTypes => fileTypes.map(fileTypeDefinition => fileTypeDefinition.split(',').filter(extension => !extension.includes('/')) // Filter out mime types
+.map(extension => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions
+.join(', '));
 
 module.exports = getAllowedFileTypes;
 //# sourceMappingURL=getAllowedFileTypes.js.map

package/build/uploadInput/uploadButton/getAllowedFileTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"getAllowedFileTypes.js","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst parseFileType = (fileType: string): string => {\n  if (fileType?.includes('.')) {\n    return fileType.replace('.', '').toUpperCase();\n  }\n\n  const mimeType = fileType?.split('/');\n  if (mimeType?.length > 1) {\n    let parsedType = mimeType[1];\n\n    if (parsedType.toLocaleLowerCase() === 'jpeg') {\n      parsedType = 'jpg, '.concat(parsedType).toUpperCase();\n    }\n\n    return parsedType.toUpperCase();\n  }\n\n  return fileType;\n};\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n  fileTypes.map((fileType: string) => {\n    const splittedFileTypes = fileType?.split(',');\n\n    if (splittedFileTypes?.length > 1) {\n      // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types\n      return splittedFileTypes\n        .filter((splittedFileType: string) => !splittedFileType?.includes('/'))\n        .map((splittedFileType: string) => parseFileType(splittedFileType))\n        .join(', ');\n    }\n\n    // If `fileType` contains only `format` or `mime` type, parse the type\n    return parseFileType(fileType);\n  });\n\nexport default getAllowedFileTypes;\n"],"names":["parseFileType","fileType","includes","replace","toUpperCase","mimeType","split","length","parsedType","toLocaleLowerCase","concat","getAllowedFileTypes","fileTypes","map","splittedFileTypes","filter","splittedFileType","join"],"mappings":";;AAEA,MAAMA,aAAa,GAAIC,QAAgB,IAAY;AACjD,EAAA,IAAIA,QAAQ,EAAEC,QAAQ,CAAC,GAAG,CAAC,EAAE;IAC3B,OAAOD,QAAQ,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAA;AAChD,GAAA;AAEA,EAAA,MAAMC,QAAQ,GAAGJ,QAAQ,EAAEK,KAAK,CAAC,GAAG,CAAC,CAAA;AACrC,EAAA,IAAID,QAAQ,EAAEE,MAAM,GAAG,CAAC,EAAE;AACxB,IAAA,IAAIC,UAAU,GAAGH,QAAQ,CAAC,CAAC,CAAC,CAAA;AAE5B,IAAA,IAAIG,UAAU,CAACC,iBAAiB,EAAE,KAAK,MAAM,EAAE;MAC7CD,UAAU,GAAG,OAAO,CAACE,MAAM,CAACF,UAAU,CAAC,CAACJ,WAAW,EAAE,CAAA;AACvD,KAAA;AAEA,IAAA,OAAOI,UAAU,CAACJ,WAAW,EAAE,CAAA;AACjC,GAAA;AAEA,EAAA,OAAOH,QAAQ,CAAA;AACjB,CAAC,CAAA;AAEKU,MAAAA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEZ,QAAgB,IAAI;AACjC,EAAA,MAAMa,iBAAiB,GAAGb,QAAQ,EAAEK,KAAK,CAAC,GAAG,CAAC,CAAA;AAE9C,EAAA,IAAIQ,iBAAiB,EAAEP,MAAM,GAAG,CAAC,EAAE;AACjC;AACA,IAAA,OAAOO,iBAAiB,CACrBC,MAAM,CAAEC,gBAAwB,IAAK,CAACA,gBAAgB,EAAEd,QAAQ,CAAC,GAAG,CAAC,CAAC,CACtEW,GAAG,CAAEG,gBAAwB,IAAKhB,aAAa,CAACgB,gBAAgB,CAAC,CAAC,CAClEC,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,GAAA;AAEA;EACA,OAAOjB,aAAa,CAACC,QAAQ,CAAC,CAAA;AAChC,CAAC;;;;"}
+{"version":3,"file":"getAllowedFileTypes.js","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n  fileTypes.map((fileTypeDefinition: string) =>\n    fileTypeDefinition\n      .split(',')\n      .filter((extension) => !extension.includes('/')) // Filter out mime types\n      .map((extension) => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions\n      .join(', '),\n  );\n\nexport default getAllowedFileTypes;\n"],"names":["getAllowedFileTypes","fileTypes","map","fileTypeDefinition","split","filter","extension","includes","replace","toUpperCase","join"],"mappings":";;AAEA,MAAMA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEC,kBAA0B,IACvCA,kBAAkB,CACfC,KAAK,CAAC,GAAG,CAAC,CACVC,MAAM,CAAEC,SAAS,IAAK,CAACA,SAAS,CAACC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAAC,CAChDL,GAAG,CAAEI,SAAS,IAAKA,SAAS,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAC;AAAC,CAC7DC,IAAI,CAAC,IAAI,CAAC;;;;"}

package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs

@@ -1,26 +1,6 @@
-const parseFileType = fileType => {
-  if (fileType?.includes('.')) {
-    return fileType.replace('.', '').toUpperCase();
-  }
-  const mimeType = fileType?.split('/');
-  if (mimeType?.length > 1) {
-    let parsedType = mimeType[1];
-    if (parsedType.toLocaleLowerCase() === 'jpeg') {
-      parsedType = 'jpg, '.concat(parsedType).toUpperCase();
-    }
-    return parsedType.toUpperCase();
-  }
-  return fileType;
-};
-const getAllowedFileTypes = fileTypes => fileTypes.map(fileType => {
-  const splittedFileTypes = fileType?.split(',');
-  if (splittedFileTypes?.length > 1) {
-    // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types
-    return splittedFileTypes.filter(splittedFileType => !splittedFileType?.includes('/')).map(splittedFileType => parseFileType(splittedFileType)).join(', ');
-  }
-  // If `fileType` contains only `format` or `mime` type, parse the type
-  return parseFileType(fileType);
-});
+const getAllowedFileTypes = fileTypes => fileTypes.map(fileTypeDefinition => fileTypeDefinition.split(',').filter(extension => !extension.includes('/')) // Filter out mime types
+.map(extension => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions
+.join(', '));
 
 export { getAllowedFileTypes as default };
 //# sourceMappingURL=getAllowedFileTypes.mjs.map

package/build/uploadInput/uploadButton/getAllowedFileTypes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"getAllowedFileTypes.mjs","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst parseFileType = (fileType: string): string => {\n  if (fileType?.includes('.')) {\n    return fileType.replace('.', '').toUpperCase();\n  }\n\n  const mimeType = fileType?.split('/');\n  if (mimeType?.length > 1) {\n    let parsedType = mimeType[1];\n\n    if (parsedType.toLocaleLowerCase() === 'jpeg') {\n      parsedType = 'jpg, '.concat(parsedType).toUpperCase();\n    }\n\n    return parsedType.toUpperCase();\n  }\n\n  return fileType;\n};\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n  fileTypes.map((fileType: string) => {\n    const splittedFileTypes = fileType?.split(',');\n\n    if (splittedFileTypes?.length > 1) {\n      // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types\n      return splittedFileTypes\n        .filter((splittedFileType: string) => !splittedFileType?.includes('/'))\n        .map((splittedFileType: string) => parseFileType(splittedFileType))\n        .join(', ');\n    }\n\n    // If `fileType` contains only `format` or `mime` type, parse the type\n    return parseFileType(fileType);\n  });\n\nexport default getAllowedFileTypes;\n"],"names":["parseFileType","fileType","includes","replace","toUpperCase","mimeType","split","length","parsedType","toLocaleLowerCase","concat","getAllowedFileTypes","fileTypes","map","splittedFileTypes","filter","splittedFileType","join"],"mappings":"AAEA,MAAMA,aAAa,GAAIC,QAAgB,IAAY;AACjD,EAAA,IAAIA,QAAQ,EAAEC,QAAQ,CAAC,GAAG,CAAC,EAAE;IAC3B,OAAOD,QAAQ,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAA;AAChD,GAAA;AAEA,EAAA,MAAMC,QAAQ,GAAGJ,QAAQ,EAAEK,KAAK,CAAC,GAAG,CAAC,CAAA;AACrC,EAAA,IAAID,QAAQ,EAAEE,MAAM,GAAG,CAAC,EAAE;AACxB,IAAA,IAAIC,UAAU,GAAGH,QAAQ,CAAC,CAAC,CAAC,CAAA;AAE5B,IAAA,IAAIG,UAAU,CAACC,iBAAiB,EAAE,KAAK,MAAM,EAAE;MAC7CD,UAAU,GAAG,OAAO,CAACE,MAAM,CAACF,UAAU,CAAC,CAACJ,WAAW,EAAE,CAAA;AACvD,KAAA;AAEA,IAAA,OAAOI,UAAU,CAACJ,WAAW,EAAE,CAAA;AACjC,GAAA;AAEA,EAAA,OAAOH,QAAQ,CAAA;AACjB,CAAC,CAAA;AAEKU,MAAAA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEZ,QAAgB,IAAI;AACjC,EAAA,MAAMa,iBAAiB,GAAGb,QAAQ,EAAEK,KAAK,CAAC,GAAG,CAAC,CAAA;AAE9C,EAAA,IAAIQ,iBAAiB,EAAEP,MAAM,GAAG,CAAC,EAAE;AACjC;AACA,IAAA,OAAOO,iBAAiB,CACrBC,MAAM,CAAEC,gBAAwB,IAAK,CAACA,gBAAgB,EAAEd,QAAQ,CAAC,GAAG,CAAC,CAAC,CACtEW,GAAG,CAAEG,gBAAwB,IAAKhB,aAAa,CAACgB,gBAAgB,CAAC,CAAC,CAClEC,IAAI,CAAC,IAAI,CAAC,CAAA;AACf,GAAA;AAEA;EACA,OAAOjB,aAAa,CAACC,QAAQ,CAAC,CAAA;AAChC,CAAC;;;;"}
+{"version":3,"file":"getAllowedFileTypes.mjs","sources":["../../../src/uploadInput/uploadButton/getAllowedFileTypes.ts"],"sourcesContent":["import { FileType } from '../../common';\n\nconst getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>\n  fileTypes.map((fileTypeDefinition: string) =>\n    fileTypeDefinition\n      .split(',')\n      .filter((extension) => !extension.includes('/')) // Filter out mime types\n      .map((extension) => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions\n      .join(', '),\n  );\n\nexport default getAllowedFileTypes;\n"],"names":["getAllowedFileTypes","fileTypes","map","fileTypeDefinition","split","filter","extension","includes","replace","toUpperCase","join"],"mappings":"AAEA,MAAMA,mBAAmB,GAAIC,SAAkD,IAC7EA,SAAS,CAACC,GAAG,CAAEC,kBAA0B,IACvCA,kBAAkB,CACfC,KAAK,CAAC,GAAG,CAAC,CACVC,MAAM,CAAEC,SAAS,IAAK,CAACA,SAAS,CAACC,QAAQ,CAAC,GAAG,CAAC,CAAC;AAAC,CAChDL,GAAG,CAAEI,SAAS,IAAKA,SAAS,CAACE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAACC,WAAW,EAAE,CAAC;AAAC,CAC7DC,IAAI,CAAC,IAAI,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-60cb1a1",
+  "version": "0.0.0-experimental-69a95e1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -91,13 +91,13 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "0.0.0-experimental-60cb1a1",
-    "@wise/components-theming": "1.6.1"
+    "@transferwise/neptune-css": "0.0.0-experimental-69a95e1",
+    "@wise/components-theming": "1.6.1",
+    "@transferwise/less-config": "3.1.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",
-    "@transferwise/neptune-css": "0.0.0-experimental-60cb1a1",
+    "@transferwise/neptune-css": "0.0.0-experimental-69a95e1",
     "@wise/art": "^2.16",
     "@wise/components-theming": "^1.0.0",
     "react": ">=18",

package/src/avatarLayout/AvatarLayout.css

@@ -24,8 +24,7 @@
   margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
 }
 .np-avatar-layout-horizontal {
-  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
-  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
+  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
   height: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-horizontal-mask {

package/src/avatarLayout/AvatarLayout.less

@@ -35,7 +35,7 @@
   }
 
   &-horizontal {
-    width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
+    width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
     height: var(--np-avatar-layout-size);
 
     &-mask {

package/src/avatarLayout/AvatarLayout.tsx

@@ -40,7 +40,6 @@ export default function AvatarLayout({
         '--np-avatar-layout-size': `${size}px`,
         '--np-avatar-size': `${avatarSize}px`,
         '--np-avatar-offset': `${isDiagonal ? DIAGONAL_LAYOUT_STYLE_CONFIG[size].offset : HORIZONTAL_LAYOUT_OFFSET[size]}px`,
-        '--np-avatar-avatars-count': avatars.length,
       }}
       {...restProps}
     >

package/src/button/Button.css

@@ -68,10 +68,13 @@
 }
 .wds-Button.wds-Button--disabled,
 .wds-Button:disabled {
+  filter: none;
   mix-blend-mode: luminosity;
   opacity: 0.45;
   cursor: not-allowed;
 }
+.wds-Button.wds-Button--disabled,
+.wds-Button:disabled,
 .wds-Button.wds-Button--disabled:hover,
 .wds-Button:disabled:hover,
 .wds-Button.wds-Button--disabled:active,

package/src/button/Button.less

@@ -30,10 +30,16 @@
 
   &.wds-Button--disabled,
   &:disabled {
+    // The declarations below are necessary as design specs for
+    // the button's disabled state have changed. This is to be
+    // further investigated at a later stage.
+    // @see https://transferwise.atlassian.net/browse/DS-7386
+    filter: none;
     mix-blend-mode: luminosity;
     opacity: 0.45;
     cursor: not-allowed;
 
+    &,
     &:hover,
     &:active {
       background-color: var(--Button-background);
@@ -122,7 +128,7 @@
 
 
 
-  // Width mofidiers
+  // Width modifiers
   &--block {
     width: 100%;
   }

package/src/button/Button.spec.tsx

@@ -67,6 +67,109 @@ describe('Button', () => {
         );
         expect(screen.getByRole('link', { name })).toHaveAttribute('href', href);
       });
+
+      describe('disabled mode', () => {
+        describe('button', () => {
+          it('should not be disabled by default', () => {
+            render(<Button v2>{name}</Button>);
+            const button = screen.getByRole('button');
+            expect(button).toBeEnabled();
+            expect(button).not.toHaveAttribute('aria-disabled');
+          });
+
+          it('should respect disabled mode and set it only via the `disabled` attribute', () => {
+            render(
+              <Button v2 disabled>
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('button');
+            expect(button).toBeDisabled();
+            expect(button).not.toHaveAttribute('aria-disabled');
+          });
+        });
+
+        describe('anchor', () => {
+          it('should not be disabled by default', () => {
+            render(
+              <Button v2 href="wise.com">
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('link');
+            expect(button).toBeEnabled();
+            expect(button).not.toHaveAttribute('aria-disabled');
+          });
+
+          it('should respect disabled mode', () => {
+            render(
+              <Button v2 href="wise.com" disabled>
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('link');
+            expect(button).toHaveAttribute('aria-disabled');
+            expect(button).toBeEnabled();
+            expect(button).not.toHaveAttribute('href');
+          });
+        });
+      });
+
+      describe('loading mode', () => {
+        describe('button', () => {
+          it('should not be loading by default', () => {
+            render(<Button v2>{name}</Button>);
+            const button = screen.getByRole('button');
+            expect(button).toBeEnabled();
+            expect(button).not.toHaveAttribute('aria-busy');
+          });
+
+          it('should respect loading mode', () => {
+            render(
+              <Button v2 loading>
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('button');
+            expect(button).toHaveAttribute('aria-busy');
+            // the `disabled` attribute is not set to keep the button
+            // focusable but aria attribute is defined to make it
+            // announced properly by the assistive tech
+            expect(button).toBeEnabled();
+            expect(button).toHaveAttribute('aria-disabled');
+          });
+        });
+
+        describe('anchor', () => {
+          it('should not be loading by default', () => {
+            render(
+              <Button v2 href="wise.com">
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('link');
+            expect(button).toBeEnabled();
+            expect(button).not.toHaveAttribute('aria-busy');
+            expect(button).not.toHaveAttribute('aria-disabled');
+          });
+
+          it('should respect loading mode', () => {
+            render(
+              <Button v2 loading href="wise.com">
+                {name}
+              </Button>,
+            );
+            const button = screen.getByRole('link');
+            expect(button).toHaveAttribute('aria-busy');
+            // the `disabled` attribute is not set to keep the button
+            // focusable but aria attribute is defined to make it
+            // announced properly by the assistive tech
+            expect(button).toBeEnabled();
+            expect(button).toHaveAttribute('aria-disabled');
+            expect(button).not.toHaveAttribute('href');
+          });
+        });
+      });
     });
   });
 

package/src/button/Button.tsx

@@ -87,7 +87,8 @@ const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, NewButtonProps>
           {...(props as any)}
           href={href}
           className={classNames}
-          disabled={disabled}
+          disabled={disabled || loading}
+          aria-busy={loading || undefined}
         >
           {content}
         </PrimitiveAnchor>

package/src/button/Button.vars.less

@@ -39,10 +39,9 @@
   --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
   --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
   --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
-}
 
-.np-theme-personal--bright-green {
-  .wds-Button {
+
+  .np-theme-personal--bright-green & {
     --color-contrast: #FFFFFF;
     --Button-secondary-color: var(--color-interactive-control);
     --Button-secondary-negative-color: var(--color-contrast);

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -9,7 +9,6 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
       class="np-flow-header d-flex flex-wrap align-items-center justify-content-between flex__item--12 np-flow-navigation__content p-x-3 np-flow-navigation--xs-max"
     >
       <button
-        aria-disabled="false"
         aria-label="back to previous step"
         aria-live="off"
         class="np-circle d-flex align-items-center justify-content-center np-icon-button np-icon-button-tertiary-default"

package/src/index.ts

@@ -96,17 +96,6 @@ export type { UploadProps } from './upload';
 export type { UploadError, UploadResponse, UploadedFile } from './uploadInput/types';
 export type { WithIdProps } from './withId';
 export type { IconButtonProps } from './iconButton';
-export type {
-  TableProps,
-  TableRowType,
-  TableRowClickableType,
-  TableHeaderType,
-  TableCellLeading,
-  TableCellText,
-  TableCellCurrency,
-  TableCellStatus,
-  TableCellType,
-} from './table';
 
 /**
  * Components
@@ -207,7 +196,6 @@ export { default as Tooltip } from './tooltip';
 export { default as Typeahead } from './typeahead';
 export { default as Upload } from './upload';
 export { default as UploadInput } from './uploadInput';
-export { default as Table } from './table';
 
 /**
  * Hooks

package/src/main.css

@@ -531,8 +531,7 @@ div.critical-comms .critical-comms-body {
   margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
 }
 .np-avatar-layout-horizontal {
-  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - (var(--np-avatar-offset) * (var(--np-avatar-avatars-count) - 1)));
-  width: calc(var(--np-avatar-size) * var(--np-avatar-avatars-count) - calc(var(--np-avatar-offset) * calc(var(--np-avatar-avatars-count) - 1)));
+  width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
   height: var(--np-avatar-layout-size);
 }
 .np-avatar-layout-horizontal-mask {
@@ -787,10 +786,13 @@ div.critical-comms .critical-comms-body {
 }
 .wds-Button.wds-Button--disabled,
 .wds-Button:disabled {
+  filter: none;
   mix-blend-mode: luminosity;
   opacity: 0.45;
   cursor: not-allowed;
 }
+.wds-Button.wds-Button--disabled,
+.wds-Button:disabled,
 .wds-Button.wds-Button--disabled:hover,
 .wds-Button:disabled:hover,
 .wds-Button.wds-Button--disabled:active,

package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx

@@ -90,7 +90,7 @@ const PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(
      * https://www.scottohara.me/blog/2021/05/28/disabled-links.html
      */
     const anchorProps = {
-      'aria-disabled': disabled,
+      'aria-disabled': disabled || undefined,
       className: anchorClasses,
       'data-testid': testId,
       href: disabled ? undefined : href,

package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx

@@ -95,10 +95,9 @@ const PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(
      *   by assistive technologies, set to 'polite' during loading.
      */
     const buttonProps = {
-      'aria-disabled': disabled || loading,
-      'aria-label': loading
-        ? intl.formatMessage(messages.loadingAriaLabel as MessageDescriptor)
-        : props['aria-label'],
+      'aria-disabled': loading || undefined,
+      'aria-busy': loading || undefined,
+      'aria-label': loading ? intl.formatMessage(messages.loadingAriaLabel) : props['aria-label'],
       'aria-live': (loading ? 'polite' : 'off') as 'polite' | 'off' | 'assertive' | undefined,
       className: classNames,
       'data-testid': testId,

package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
-import PrimitiveButton from '../src';
-import messages from '../../../i18n/commonMessages/Button.messages';
 import { render } from '../../../test-utils';
+import PrimitiveButton from '../src';
+import allMessages from '../../../i18n';
 
 describe('Button', () => {
   const defaultProps = {
@@ -11,7 +11,7 @@ describe('Button', () => {
   const renderButton = (
     props?: Partial<typeof defaultProps>,
     locale = 'en',
-    localeMessages = messages,
+    localeMessages = allMessages.en,
   ) => {
     return render(
       <PrimitiveButton {...defaultProps} {...props} />,
@@ -50,6 +50,17 @@ describe('Button', () => {
     expect(button).toBeDisabled();
   });
 
+  it('disables and announces the button as busy in loading mode', () => {
+    const props = {
+      ...defaultProps,
+      loading: true,
+    };
+
+    renderButton(props);
+
+    expect(screen.getByRole('button', { busy: true })).toHaveAttribute('aria-disabled', 'true');
+  });
+
   it('sets data-testid attribute', () => {
     const props = {
       ...defaultProps,
@@ -98,12 +109,7 @@ describe('Button', () => {
       loading: true,
     };
 
-    const spanishMessages = {
-      ...messages,
-      'neptune.Button.loadingAriaLabel': 'cargando',
-    };
-
-    renderButton(props, 'es', spanishMessages);
+    renderButton(props, 'es', allMessages.es);
 
     const button = screen.getByRole('button');
     expect(button).toHaveAttribute('aria-label', 'cargando');

package/src/uploadInput/UploadInput.tests.story.tsx

@@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Status } from '../common';
 import UploadInput, { UploadInputProps } from './UploadInput';
 import { UploadedFile, UploadResponse } from './types';
-import { userEvent } from '@storybook/test';
+import { userEvent, within } from '@storybook/test';
 
 const meta: Meta<typeof UploadInput> = {
   title: 'Forms/UploadInput/Tests',
@@ -65,8 +65,8 @@ const createDelayedPromise = async ({
   });
 
 const props = {
-  onUploadFile: async () => createDelayedPromise(),
-  onDeleteFile: async () => createDelayedPromise(),
+  onUploadFile: async (formData: FormData) => createDelayedPromise(),
+  onDeleteFile: async (id: string | number) => createDelayedPromise(),
 };
 
 export const UploadInputWithDescriptionFromProps: Story = {
@@ -268,7 +268,7 @@ export const DeletingTop: Story = {
     files: [files[0], files[1], files[2]],
     multiple: true,
   },
-  play: async () => {
+  play: async ({ canvasElement }) => {
     await userEvent.tab();
     await triggerModalAndConfirm();
     await triggerModalAndConfirm({ isLink: false });
@@ -282,7 +282,7 @@ export const DeletingBottom: Story = {
     files: [files[0], files[1], files[2]],
     multiple: true,
   },
-  play: async () => {
+  play: async ({ canvasElement }) => {
     await userEvent.tab();
     await userEvent.tab();
     await userEvent.tab();

package/src/uploadInput/uploadButton/getAllowedFileTypes.spec.ts

@@ -38,16 +38,4 @@ describe('getAllowedFileTypes', () => {
       expect(allowedFileTypes).toStrictEqual(['*']);
     });
   });
-
-  describe('using only mime types', () => {
-    const mimeTypes = ['application/json', 'image/jpeg'];
-
-    beforeAll(() => {
-      allowedFileTypes = getAllowedFileTypes(mimeTypes);
-    });
-
-    it('returns the original mime types', () => {
-      expect(allowedFileTypes).toStrictEqual(['JSON', 'JPG, JPEG']);
-    });
-  });
 });

package/src/uploadInput/uploadButton/getAllowedFileTypes.ts

@@ -1,38 +1,12 @@
 import { FileType } from '../../common';
 
-const parseFileType = (fileType: string): string => {
-  if (fileType?.includes('.')) {
-    return fileType.replace('.', '').toUpperCase();
-  }
-
-  const mimeType = fileType?.split('/');
-  if (mimeType?.length > 1) {
-    let parsedType = mimeType[1];
-
-    if (parsedType.toLocaleLowerCase() === 'jpeg') {
-      parsedType = 'jpg, '.concat(parsedType).toUpperCase();
-    }
-
-    return parsedType.toUpperCase();
-  }
-
-  return fileType;
-};
-
 const getAllowedFileTypes = (fileTypes: readonly FileType[] | readonly string[]): string[] =>
-  fileTypes.map((fileType: string) => {
-    const splittedFileTypes = fileType?.split(',');
-
-    if (splittedFileTypes?.length > 1) {
-      // If `fileType` contains `format` and `mime` types, remove mime types, proceed only with format types
-      return splittedFileTypes
-        .filter((splittedFileType: string) => !splittedFileType?.includes('/'))
-        .map((splittedFileType: string) => parseFileType(splittedFileType))
-        .join(', ');
-    }
-
-    // If `fileType` contains only `format` or `mime` type, parse the type
-    return parseFileType(fileType);
-  });
+  fileTypes.map((fileTypeDefinition: string) =>
+    fileTypeDefinition
+      .split(',')
+      .filter((extension) => !extension.includes('/')) // Filter out mime types
+      .map((extension) => extension.replace('.', '').toUpperCase()) // Remove dot and convert extensions to uppercase to be displayed in the instructions
+      .join(', '),
+  );
 
 export default getAllowedFileTypes;