♻️ docs/bento-stream-gallery

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;

extensions/amp-stream-gallery/1.0/component.js

@@ -17,11 +17,11 @@ 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,
@@ -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({

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;

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>

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);