refactor(amp-stream-gallery): rename StreamGallery -> BentoStreamGallery

ampproject · Sep 3, 2021 · 9f45f78 · 9f45f78
1 parent c6baa0e
commit 9f45f78
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 33 deletions.
diff --git a/extensions/amp-stream-gallery/1.0/base-element.js b/extensions/amp-stream-gallery/1.0/base-element.js
@@ -1,7 +1,7 @@
 import {CSS as CAROUSEL_CSS} from '../../amp-base-carousel/1.0/component.jss';
 import {CSS as GALLERY_CSS} from './component.jss';
 import {PreactBaseElement} from '#preact/base-element';
-import {StreamGallery} from './component';
+import {BentoStreamGallery} from './component';
 import {dict} from '#core/types/object';
 
 export class BaseElement extends PreactBaseElement {
@@ -17,7 +17,7 @@ export class BaseElement extends PreactBaseElement {
 }
 
 /** @override */
-BaseElement['Component'] = StreamGallery;
+BaseElement['Component'] = BentoStreamGallery;
 
 /** @override */
 BaseElement['layoutSizeDefined'] = true;

diff --git a/extensions/amp-stream-gallery/1.0/component.js b/extensions/amp-stream-gallery/1.0/component.js
@@ -1,27 +1,27 @@
 import * as Preact from '#preact';
-import {BentoBaseCarousel} from '../../amp-base-carousel/1.0/component';
-import {forwardRef} from '#preact/compat';
-import {setStyle} from '#core/dom/style';
-import {toWin} from '#core/window';
+import { BentoBaseCarousel } from '../../amp-base-carousel/1.0/component';
+import { forwardRef } from '#preact/compat';
+import { setStyle } from '#core/dom/style';
+import { toWin } from '#core/window';
 import {
   useCallback,
   useImperativeHandle,
   useLayoutEffect,
   useRef,
   useState,
 } from '#preact';
-import {useStyles} from './component.jss';
+import { useStyles } from './component.jss';
 import objstr from 'obj-str';
 
 const DEFAULT_VISIBLE_COUNT = 1;
 const OUTSET_ARROWS_WIDTH = 100;
 
 /**
- * @param {!StreamGalleryDef.Props} props
+ * @param {!BentoStreamGalleryDef.Props} props
  * @param {{current: (!BentoBaseCarouselDef.CarouselApi|null)}} ref
  * @return {PreactDef.Renderable}
  */
-function StreamGalleryWithRef(props, ref) {
+function BentoStreamGalleryWithRef(props, ref) {
   const {
     arrowPrevAs = DefaultArrow,
     arrowNextAs = DefaultArrow,
@@ -68,11 +68,11 @@ function StreamGalleryWithRef(props, ref) {
   useImperativeHandle(
     ref,
     () =>
-      /** @type {!BentoBaseCarouselDef.CarouselApi} */ ({
-        goToSlide: (index) => carouselRef.current.goToSlide(index),
-        next: () => carouselRef.current.next(),
-        prev: () => carouselRef.current.prev(),
-      }),
+      /** @type {!BentoBaseCarouselDef.CarouselApi} */({
+      goToSlide: (index) => carouselRef.current.goToSlide(index),
+      next: () => carouselRef.current.next(),
+      prev: () => carouselRef.current.prev(),
+    }),
     []
   );
 
@@ -119,12 +119,12 @@ function StreamGalleryWithRef(props, ref) {
   );
 }
 
-const StreamGallery = forwardRef(StreamGalleryWithRef);
-StreamGallery.displayName = 'StreamGallery'; // Make findable for tests.
-export {StreamGallery};
+const BentoStreamGallery = forwardRef(BentoStreamGalleryWithRef);
+BentoStreamGallery.displayName = 'StreamGallery'; // Make findable for tests.
+export {BentoStreamGallery};
 
 /**
- * @param {!StreamGalleryDef.ArrowProps} props
+ * @param {!BentoStreamGalleryDef.ArrowProps} props
  * @return {PreactDef.Renderable}
  */
 function DefaultArrow({

diff --git a/extensions/amp-stream-gallery/1.0/component.type.js b/extensions/amp-stream-gallery/1.0/component.type.js
@@ -1,7 +1,7 @@
 /** @externs */
 
 /** @const */
-var StreamGalleryDef = {};
+var BentoStreamGalleryDef = {};
 
 /**
  * @typedef {{
@@ -22,7 +22,7 @@ var StreamGalleryDef = {};
  *   snap: (boolean|undefined)
  * }}
  */
-StreamGalleryDef.Props;
+BentoStreamGalleryDef.Props;
 
 /**
  * @typedef {{
@@ -33,4 +33,4 @@ StreamGalleryDef.Props;
  *   outsetArrows: (boolean|undefined)
  * }}
  */
-StreamGalleryDef.ArrowProps;
+BentoStreamGalleryDef.ArrowProps;
diff --git a/extensions/amp-stream-gallery/1.0/storybook/Basic.js b/extensions/amp-stream-gallery/1.0/storybook/Basic.js
@@ -1,12 +1,12 @@
 import * as Preact from '#preact';
-import {StreamGallery} from '../component';
+import {BentoStreamGallery} from '../component';
 import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
 
 const CONTROLS = ['auto', 'always', 'never'];
 
 export default {
   title: 'StreamGallery',
-  component: StreamGallery,
+  component: BentoStreamGallery,
   decorators: [withKnobs],
 };
 
@@ -20,7 +20,7 @@ function CarouselWithActions(props) {
   const ref = Preact.useRef();
   return (
     <section>
-      <StreamGallery ref={ref} {...props} />
+      <BentoStreamGallery ref={ref} {...props} />
       <div style={{marginTop: 8}}>
         <button onClick={() => ref.current.goToSlide(3)}>goToSlide(3)</button>
         <button onClick={() => ref.current.next()}>next</button>

diff --git a/extensions/amp-stream-gallery/1.0/test/test-component.js b/extensions/amp-stream-gallery/1.0/test/test-component.js
@@ -1,15 +1,15 @@
 import * as Preact from '#preact';
-import {StreamGallery} from '../component';
+import {BentoStreamGallery} from '../component';
 import {mount} from 'enzyme';
 
 describes.sandboxed('StreamGallery preact component', {}, () => {
   it('should render BentoBaseCarousel', () => {
     const wrapper = mount(
-      <StreamGallery>
+      <BentoStreamGallery>
         <div>slide 1</div>
         <div>slide 2</div>
         <div>slide 3</div>
-      </StreamGallery>
+      </BentoStreamGallery>
     );
     const carousel = wrapper.find('BentoBaseCarousel');
     expect(carousel).to.have.lengthOf(1);
@@ -35,11 +35,11 @@ describes.sandboxed('StreamGallery preact component', {}, () => {
       </div>
     );
     const wrapper = mount(
-      <StreamGallery arrowPrevAs={arrowPrev} arrowNextAs={arrowNext}>
+      <BentoStreamGallery arrowPrevAs={arrowPrev} arrowNextAs={arrowNext}>
         <div>slide 1</div>
         <div>slide 2</div>
         <div>slide 3</div>
-      </StreamGallery>
+      </BentoStreamGallery>
     );
     const arrows = wrapper.find('Arrow');
     expect(arrows).to.have.lengthOf(2);
@@ -49,11 +49,11 @@ describes.sandboxed('StreamGallery preact component', {}, () => {
 
   it('should not loop by default', () => {
     const wrapper = mount(
-      <StreamGallery>
+      <BentoStreamGallery>
         <div class="my-slide">slide 1</div>
         <div class="my-slide">slide 2</div>
         <div class="my-slide">slide 3</div>
-      </StreamGallery>
+      </BentoStreamGallery>
     );
     const slides = wrapper.find('[data-slide]');
     expect(slides).to.have.lengthOf(3);
@@ -67,11 +67,11 @@ describes.sandboxed('StreamGallery preact component', {}, () => {
 
   it('should render in preparation for looping with loop prop', () => {
     const wrapper = mount(
-      <StreamGallery loop>
+      <BentoStreamGallery loop>
         <div class="my-slide">slide 1</div>
         <div class="my-slide">slide 2</div>
         <div class="my-slide">slide 3</div>
-      </StreamGallery>
+      </BentoStreamGallery>
     );
     const slides = wrapper.find('[data-slide]');
     expect(slides).to.have.lengthOf(3);