@transferwise/components 45.19.1 → 45.19.2

package/build/types/flowNavigation/FlowNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAgB,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAKnD,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED,QAAA,MAAM,cAAc,kEAQjB,mBAAmB,sBAwErB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FlowNavigation.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAgB,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAMnD,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sIAAsI;IACtI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,wGAAwG;IACxG,KAAK,EAAE,IAAI,EAAE,CAAC;CACf;AAED,QAAA,MAAM,cAAc,kEAQjB,mBAAmB,sBA0ErB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build/types/flowNavigation/FlowNavigation.messages.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    back: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=FlowNavigation.messages.d.ts.map

package/build/types/flowNavigation/FlowNavigation.messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowNavigation.messages.d.ts","sourceRoot":"","sources":["../../../src/flowNavigation/FlowNavigation.messages.ts"],"names":[],"mappings":";;;;;;AAEA,wBAKG"}

package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts

@@ -1,18 +1,10 @@
-export default AnimatedLabel;
-declare function AnimatedLabel({ activeLabel, className, labels }: {
-    activeLabel: any;
-    className: any;
-    labels: any;
-}): import("react").JSX.Element;
-declare namespace AnimatedLabel {
-    namespace propTypes {
-        const activeLabel: any;
-        const className: any;
-        const labels: any;
-    }
-    namespace defaultProps {
-        const className_1: undefined;
-        export { className_1 as className };
-    }
+import React from 'react';
+export interface AnimatedLabelProps {
+    activeLabel: number;
+    className?: string;
+    labels: React.ReactNode[];
+    'aria-label': string;
 }
+declare const AnimatedLabel: ({ activeLabel, className, labels, "aria-label": ariaLabel, }: AnimatedLabelProps) => React.JSX.Element;
+export default AnimatedLabel;
 //# sourceMappingURL=AnimatedLabel.d.ts.map

package/build/types/flowNavigation/animatedLabel/AnimatedLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnimatedLabel.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/animatedLabel/AnimatedLabel.js"],"names":[],"mappings":";AAGA;;;;gCAqBC"}
+{"version":3,"file":"AnimatedLabel.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/animatedLabel/AnimatedLabel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,kBAAkB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC1B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,aAAa,iEAKhB,kBAAkB,sBAwBpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/build/types/flowNavigation/animatedLabel/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./AnimatedLabel";
+export { default } from './AnimatedLabel';
 //# sourceMappingURL=index.d.ts.map

package/build/types/flowNavigation/animatedLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/animatedLabel/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/flowNavigation/animatedLabel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "45.19.1",
+  "version": "45.19.2",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/button/Button.spec.js

@@ -85,6 +85,12 @@ describe('Button', () => {
       render(<Button {...props} className="catsarethebest" />);
       expect(screen.getByRole('button')).toHaveClass('catsarethebest');
     });
+
+    it('passes through aria-label if set', () => {
+      render(<Button {...props} aria-label="unique label" />);
+      const loadingButton = screen.getByLabelText('unique label');
+      expect(loadingButton).toBeInTheDocument();
+    });
   });
 
   describe('onClick', () => {
@@ -170,6 +176,12 @@ describe('Button', () => {
       expect(screen.getByRole('button', { name: 'loading' })).toBeInTheDocument();
     });
 
+    it('loading button has aria-label of loading', () => {
+      render(<Button {...props} loading />);
+      const loadingButton = screen.getByLabelText('loading');
+      expect(loadingButton).toBeInTheDocument();
+    });
+
     it('renders as block if block is true', () => {
       expect(render(<Button {...props} block />).container).toMatchSnapshot();
     });

package/src/button/Button.tsx

@@ -126,7 +126,7 @@ const Button = forwardRef<ButtonReferenceType, Props>(
         className={classes}
         {...props}
         aria-live={loading ? 'polite' : 'off'}
-        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : undefined}
+        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}
       >
         {children}
         {loading && <ProcessIndicator size={processIndicatorSize()} className="btn-loader" />}

package/src/flowNavigation/FlowNavigation.messages.ts

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  back: {
+    id: 'neptune.FlowNavigation.back',
+    defaultMessage: 'back to previous step',
+  },
+});

package/src/flowNavigation/FlowNavigation.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { useRef } from 'react';
 import React from 'react';
+import { useIntl } from 'react-intl';
 
 import { Breakpoint, Layout } from '../common';
 import { CloseButton } from '../common/closeButton';
@@ -9,6 +10,7 @@ import { useClientWidth } from '../common/hooks';
 import Logo from '../logo';
 import Stepper, { Step } from '../stepper/Stepper';
 
+import messages from './FlowNavigation.messages';
 import AnimatedLabel from './animatedLabel';
 import BackButton from './backButton';
 
@@ -35,6 +37,7 @@ const FlowNavigation = ({
   steps,
 }: FlowNavigationProps) => {
   const reference = useRef<HTMLDivElement>(null);
+  const intl = useIntl();
 
   const [clientWidth] = useClientWidth({ ref: reference });
   const closeButton = onClose != null && <CloseButton size="lg" onClick={onClose} />;
@@ -53,6 +56,7 @@ const FlowNavigation = ({
                 className="m-x-1"
                 labels={steps.map((step) => step.label)}
                 activeLabel={activeStep - 1}
+                aria-label={intl.formatMessage(messages.back)}
               />
             }
             onClick={onGoBack}

package/src/flowNavigation/animatedLabel/AnimatedLabel.spec.js

@@ -14,6 +14,12 @@ describe('AnimatedLabel', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('renders aria-label if provided', () => {
+    render(<AnimatedLabel {...props} aria-label="hello" />);
+    const checkbox = screen.getByLabelText('hello');
+    expect(checkbox).toBeInTheDocument();
+  });
+
   it('renders only one label with class in', () => {
     const { container } = render(<AnimatedLabel {...props} />);
     expect(screen.getByText(props.labels[0])).toHaveClass('np-animated-label--in');

package/src/flowNavigation/animatedLabel/{AnimatedLabel.js → AnimatedLabel.tsx}

@@ -1,11 +1,26 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
+import React from 'react';
 
-const AnimatedLabel = ({ activeLabel, className, labels }) => {
+export interface AnimatedLabelProps {
+  activeLabel: number;
+  className?: string;
+  labels: React.ReactNode[];
+  'aria-label': string;
+}
+
+const AnimatedLabel = ({
+  activeLabel,
+  className,
+  labels,
+  'aria-label': ariaLabel,
+}: AnimatedLabelProps) => {
   const numberLabels = labels.length - 1;
 
   return (
-    <div className={classNames('np-animated-label', 'np-text-body-large-bold', className)}>
+    <div
+      aria-label={ariaLabel}
+      className={classNames('np-animated-label', 'np-text-body-large-bold', className)}
+    >
       {labels.map((label, index) => {
         const nextLabel = index - 1;
         return (
@@ -24,13 +39,4 @@ const AnimatedLabel = ({ activeLabel, className, labels }) => {
   );
 };
 
-AnimatedLabel.propTypes = {
-  activeLabel: PropTypes.number.isRequired,
-  className: PropTypes.string,
-  labels: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
-AnimatedLabel.defaultProps = {
-  className: undefined,
-};
-
 export default AnimatedLabel;

package/src/i18n/en.json

@@ -14,6 +14,7 @@
   "neptune.DateLookup.selected": "selected",
   "neptune.DateLookup.twentyYears": "20 years",
   "neptune.DateLookup.year": "year",
+  "neptune.FlowNavigation.back": "back to previous step",
   "neptune.Link.opensInNewTab": "(opens in new tab)",
   "neptune.MoneyInput.Select.placeholder": "Select an option...",
   "neptune.Select.searchPlaceholder": "Search...",