Bento Carousel: Restore default rtl values (#35924)

ampproject · Sep 3, 2021 · 0b20293 · 0b20293
1 parent ce36ba5
commit 0b20293
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/extensions/amp-base-carousel/1.0/arrow.js b/extensions/amp-base-carousel/1.0/arrow.js
@@ -38,7 +38,7 @@ export function Arrow({
       disabled={disabled}
       onClick={onClick}
       outsetArrows={outsetArrows}
-      rtl={rtl}
+      rtl={rtl.toString()}
     />
   );
 }

diff --git a/extensions/amp-base-carousel/1.0/component.js b/extensions/amp-base-carousel/1.0/component.js
@@ -320,7 +320,7 @@ function BaseCarouselWithRef(
           by={-advanceCount}
           disabled={disableForDir(-1)}
           outsetArrows={outsetArrows}
-          rtl={rtl.toString()}
+          rtl={rtl}
         />
       )}
       <Scroller
@@ -360,7 +360,7 @@ function BaseCarouselWithRef(
           as={arrowNextAs}
           disabled={disableForDir(1)}
           outsetArrows={outsetArrows}
-          rtl={rtl.toString()}
+          rtl={rtl}
         />
       )}
     </ContainWrapper>

diff --git a/extensions/amp-base-carousel/1.0/component.type.js b/extensions/amp-base-carousel/1.0/component.type.js
@@ -65,10 +65,11 @@ BaseCarouselDef.SlideProps;
 /**
  * @typedef {{
  *   advance: (function():undefined|undefined),
- *   customArrow: (PreactDef.VNode|undefined),
  *   by: number,
+ *   customArrow: (PreactDef.VNode|undefined),
  *   disabled: (boolean|undefined),
  *   outsetArrows: (boolean|undefined),
+ *   rtl: (boolean|undefined),
  * }}
  */
 BaseCarouselDef.ArrowProps;

diff --git a/extensions/amp-base-carousel/1.0/test/test-component.js b/extensions/amp-base-carousel/1.0/test/test-component.js
@@ -14,9 +14,20 @@ describes.sandboxed('BaseCarousel preact component', {}, () => {
         <div>slide 3</div>
       </BaseCarousel>
     );
-    expect(wrapper.find('Arrow')).to.have.lengthOf(2);
-    expect(wrapper.find('Arrow').first().prop('rtl')).to.equal('false');
-    expect(wrapper.find('Arrow').last().prop('rtl')).to.equal('false');
+
+    const arrows = wrapper.find('Arrow');
+    expect(arrows).to.have.lengthOf(2);
+    const arrow0 = arrows.first();
+    const arrow1 = arrows.last();
+
+    // Arrows are given rtl booleans and propagate them as strings.
+    expect(arrow0.prop('rtl')).to.equal(false);
+    expect(arrow0.children()).to.have.lengthOf(1);
+    expect(arrow0.childAt(0).prop('rtl')).to.equal('false');
+    expect(arrow1.prop('rtl')).to.equal(false);
+    expect(arrow1.children()).to.have.lengthOf(1);
+    expect(arrow1.childAt(0).prop('rtl')).to.equal('false');
+
     expect(wrapper.find('Scroller').prop('group')).to.be.undefined;
 
     const slides = wrapper.find('[data-slide]');