@transferwise/components 0.0.0-experimental-61e8d6a → 0.0.0-experimental-aa02721

package/build/main.css

@@ -3850,6 +3850,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   left: auto;
   left: initial;
 }
+.sliding-panel.sliding-panel-enter-done {
+  background-color: pink;
+}
 .sliding-panel.sliding-panel-enter-done.sliding-panel--open-right,
 .sliding-panel.sliding-panel-enter-done.sliding-panel--open-left {
   transform: translateX(0);

package/build/styles/main.css

@@ -3850,6 +3850,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   left: auto;
   left: initial;
 }
+.sliding-panel.sliding-panel-enter-done {
+  background-color: pink;
+}
 .sliding-panel.sliding-panel-enter-done.sliding-panel--open-right,
 .sliding-panel.sliding-panel-enter-done.sliding-panel--open-left {
   transform: translateX(0);

package/build/styles/slidingPanel/SlidingPanel.css

@@ -41,6 +41,9 @@
   left: auto;
   left: initial;
 }
+.sliding-panel.sliding-panel-enter-done {
+  background-color: pink;
+}
 .sliding-panel.sliding-panel-enter-done.sliding-panel--open-right,
 .sliding-panel.sliding-panel-enter-done.sliding-panel--open-left {
   transform: translateX(0);

package/build/types/slidingPanel/SlidingPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlidingPanel.d.ts","sourceRoot":"","sources":["../../../src/slidingPanel/SlidingPanel.js"],"names":[],"mappings":"AAMA,iCAAkC;;AAElC,0GA2CE"}
+{"version":3,"file":"SlidingPanel.d.ts","sourceRoot":"","sources":["../../../src/slidingPanel/SlidingPanel.js"],"names":[],"mappings":"AAMA,iCAAkC;;AAElC,0GA4CE"}

package/build/types/stepper/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/stepper/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,QAAA,MAAM,OAAO,qCAA0C,YAAY,6BA6DlE,CAAC;AAGF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/stepper/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,QAAA,MAAM,OAAO,qCAA0C,YAAY,6BA8DlE,CAAC;AAGF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-61e8d6a",
+  "version": "0.0.0-experimental-aa02721",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

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

@@ -75,6 +75,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
             class="tw-stepper-steps p-t-1 m-b-0"
           >
             <li
+              aria-current="false"
               class="hidden-xs tw-stepper__step np-text-body-default"
               style="left: 0%;"
             >
@@ -85,6 +86,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
               </span>
             </li>
             <li
+              aria-current="step"
               class="hidden-xs tw-stepper__step np-text-body-default-bold tw-stepper__step--active"
               style="left: 50%;"
             >
@@ -95,6 +97,7 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
               </span>
             </li>
             <li
+              aria-current="false"
               class="hidden-xs tw-stepper__step np-text-body-default"
               style="left: 100%;"
             >
@@ -188,6 +191,7 @@ exports[`FlowNavigation renders as expected 1`] = `
             class="tw-stepper-steps p-t-1 m-b-0"
           >
             <li
+              aria-current="step"
               class="hidden-xs tw-stepper__step np-text-body-default-bold tw-stepper__step--active"
               style="left: 0%;"
             >
@@ -198,6 +202,7 @@ exports[`FlowNavigation renders as expected 1`] = `
               </span>
             </li>
             <li
+              aria-current="false"
               class="hidden-xs tw-stepper__step np-text-body-default"
               style="left: 50%;"
             >
@@ -208,6 +213,7 @@ exports[`FlowNavigation renders as expected 1`] = `
               </span>
             </li>
             <li
+              aria-current="false"
               class="hidden-xs tw-stepper__step np-text-body-default"
               style="left: 100%;"
             >

package/src/main.css

@@ -3850,6 +3850,9 @@ html:not([dir="rtl"]) .np-navigation-option {
   left: auto;
   left: initial;
 }
+.sliding-panel.sliding-panel-enter-done {
+  background-color: pink;
+}
 .sliding-panel.sliding-panel-enter-done.sliding-panel--open-right,
 .sliding-panel.sliding-panel-enter-done.sliding-panel--open-left {
   transform: translateX(0);

package/src/slidingPanel/SlidingPanel.css

@@ -41,6 +41,9 @@
   left: auto;
   left: initial;
 }
+.sliding-panel.sliding-panel-enter-done {
+  background-color: pink;
+}
 .sliding-panel.sliding-panel-enter-done.sliding-panel--open-right,
 .sliding-panel.sliding-panel-enter-done.sliding-panel--open-left {
   transform: translateX(0);

package/src/slidingPanel/SlidingPanel.js

@@ -25,6 +25,7 @@ const SlidingPanel = forwardRef(
     return (
       <CSSTransition
         {...rest}
+        key={`sliding-panel--open-${position}`}
         nodeRef={localReference}
         in={open}
         // Wait for animation to finish before unmount.

package/src/slidingPanel/SlidingPanel.less

@@ -32,6 +32,7 @@
   }
 
   &.sliding-panel-enter-done {
+    background-color: pink;
     &.sliding-panel--open-right,
     &.sliding-panel--open-left {
       transform: translateX(0);

package/src/stepper/Stepper.spec.js

@@ -162,6 +162,22 @@ describe('Stepper', () => {
       expect(step(1).clickable).toBe(true);
       expect(step(2).clickable).toBe(true);
     });
+
+    it('are aria-current=step when active', () => {
+      const stepCurrent = (index) =>
+        component.find('.tw-stepper__step').at(index).props()['aria-current'];
+      steps(4);
+      activeStep(1);
+      expect(stepCurrent(0)).toBe(false);
+      expect(stepCurrent(1)).toBe('step');
+      expect(stepCurrent(2)).toBe(false);
+      expect(stepCurrent(3)).toBe(false);
+      activeStep(2);
+      expect(stepCurrent(0)).toBe(false);
+      expect(stepCurrent(1)).toBe(false);
+      expect(stepCurrent(2)).toBe('step');
+      expect(stepCurrent(3)).toBe(false);
+    });
   });
 
   describe('hover labels', () => {

package/src/stepper/Stepper.tsx

@@ -60,6 +60,7 @@ const Stepper = ({ steps, activeStep = 0, className }: StepperProps) => {
           clickable && 'tw-stepper__step--clickable',
           step.hoverLabel && 'tw-stepper__step--has-tooltip',
         )}
+        aria-current={active ? 'step' : false}
         style={
           isRTL
             ? { right: `${index * stepPercentage * 100}%` }