♻️ Docs/bento inline gallery

extensions/amp-inline-gallery/1.0/amp-inline-gallery-pagination.js

@@ -1,6 +1,6 @@
 import {CSS} from './pagination.jss';
 import {CarouselContextProp} from '../../amp-base-carousel/1.0/carousel-props';
-import {Pagination} from './pagination';
+import {BentoInlineGalleryPagination} from './pagination';
 import {PreactBaseElement} from '#preact/base-element';
 import {isExperimentOn} from '#experiments';
 import {userAssert} from '../../../src/log';
@@ -24,7 +24,7 @@ export class AmpInlineGalleryPagination extends PreactBaseElement {
 }
 
 /** @override */
-AmpInlineGalleryPagination['Component'] = Pagination;
+AmpInlineGalleryPagination['Component'] = BentoInlineGalleryPagination;
 
 /** @override */
 AmpInlineGalleryPagination['props'] = {

extensions/amp-inline-gallery/1.0/amp-inline-gallery-thumbnails.js

@@ -2,7 +2,7 @@ import {CSS as CAROUSEL_CSS} from '../../amp-base-carousel/1.0/component.jss';
 import {CarouselContextProp} from '../../amp-base-carousel/1.0/carousel-props';
 import {PreactBaseElement} from '#preact/base-element';
 import {CSS as THUMBNAIL_CSS} from './thumbnails.jss';
-import {Thumbnails} from './thumbnails';
+import {BentoInlineGalleryThumbnails} from './thumbnails';
 import {isExperimentOn} from '#experiments';
 import {userAssert} from '../../../src/log';
 
@@ -25,7 +25,7 @@ export class AmpInlineGalleryThumbnails extends PreactBaseElement {
 }
 
 /** @override */
-AmpInlineGalleryThumbnails['Component'] = Thumbnails;
+AmpInlineGalleryThumbnails['Component'] = BentoInlineGalleryThumbnails;
 
 /** @override */
 AmpInlineGalleryThumbnails['props'] = {

extensions/amp-inline-gallery/1.0/base-element.js

@@ -1,6 +1,6 @@
 import * as Preact from '#preact';
 import {CarouselContextProp} from '../../amp-base-carousel/1.0/carousel-props';
-import {InlineGallery} from './component';
+import {BentoInlineGallery} from './component';
 import {PreactBaseElement} from '#preact/base-element';
 import {dict} from '#core/types/object';
 import {setProp} from '#core/context';
@@ -16,7 +16,7 @@ export class BaseElement extends PreactBaseElement {
 }
 
 /** @override */
-BaseElement['Component'] = InlineGallery;
+BaseElement['Component'] = BentoInlineGallery;
 
 /** @override */
 BaseElement['detached'] = true;

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

@@ -4,10 +4,10 @@ import {ContainWrapper} from '#preact/component';
 import {useMemo, useState} from '#preact';
 
 /**
- * @param {!InlineGalleryDef.Props} props
+ * @param {!BentoInlineGalleryDef.Props} props
  * @return {PreactDef.Renderable}
  */
-export function InlineGallery({children, ...rest}) {
+export function BentoInlineGallery({children, ...rest}) {
   const [currentSlide, setCurrentSlide] = useState(0);
   const [slides, setSlides] = useState([]);
   const carouselContext = useMemo(

extensions/amp-inline-gallery/1.0/component.type.js

@@ -1,7 +1,7 @@
 /** @externs */
 
 /** @const */
-var InlineGalleryDef = {};
+var BentoInlineGalleryDef = {};
 
 /**
  * @typedef {{
@@ -12,7 +12,7 @@ var InlineGalleryDef = {};
  *   onSlideChange: (function(number):undefined|undefined),
  * }}
  */
-InlineGalleryDef.Props;
+BentoInlineGalleryDef.Props;
 
 /**
  * @typedef {{
@@ -23,7 +23,7 @@ InlineGalleryDef.Props;
  *   children: !Array<PreactDef.Renderable>
  * }}
  */
-InlineGalleryDef.PaginationProps;
+BentoInlineGalleryDef.PaginationProps;
 
 /**
  * Note that aspectRatio is expressed in terms of width/height.
@@ -33,12 +33,12 @@ InlineGalleryDef.PaginationProps;
  *   children: !Array<PreactDef.Renderable>
  * }}
  */
-InlineGalleryDef.ThumbnailProps;
+BentoInlineGalleryDef.ThumbnailProps;
 
 /**
  * @typedef {{
  *   children: !Array<PreactDef.Renderable>,
  *   style: (!Object|undefined),
  * }}
  */
-InlineGalleryDef.SlideProps;
+BentoInlineGalleryDef.SlideProps;

extensions/amp-inline-gallery/1.0/pagination.js

@@ -5,10 +5,10 @@ import {useContext} from '#preact';
 import {useStyles} from './pagination.jss';
 
 /**
- * @param {!InlineGalleryDef.PaginationProps} props
+ * @param {!BentoInlineGalleryDef.PaginationProps} props
  * @return {PreactDef.Renderable}
  */
-export function Pagination({inset, ...rest}) {
+export function BentoInlineGalleryPagination({inset, ...rest}) {
   const classes = useStyles();
   const {currentSlide, setCurrentSlide, slides} = useContext(CarouselContext);
   const slideCount = slides ? slides.length : 0;
@@ -49,7 +49,7 @@ export function Pagination({inset, ...rest}) {
 }
 
 /**
- * @param {!InlineGalleryDef.PaginationProps} props
+ * @param {!BentoInlineGalleryDef.PaginationProps} props
  * @return {PreactDef.Renderable}
  */
 function Dots({currentSlide, goTo, inset, slideCount}) {
@@ -77,7 +77,7 @@ function Dots({currentSlide, goTo, inset, slideCount}) {
 }
 
 /**
- * @param {!InlineGalleryDef.PaginationProps} props
+ * @param {!BentoInlineGalleryDef.PaginationProps} props
  * @return {PreactDef.Renderable}
  */
 function Numbers({currentSlide, inset, slideCount}) {

extensions/amp-inline-gallery/1.0/storybook/Basic.js

@@ -1,13 +1,13 @@
 import * as Preact from '#preact';
 import {BentoBaseCarousel} from '../../../amp-base-carousel/1.0/component';
-import {InlineGallery} from '../component';
-import {Pagination} from '../pagination';
-import {Thumbnails} from '../thumbnails';
+import {BentoInlineGallery} from '../component';
+import {BentoInlineGalleryPagination} from '../pagination';
+import {BentoInlineGalleryThumbnails} from '../thumbnails';
 import {boolean, number, select, withKnobs} from '@storybook/addon-knobs';
 
 export default {
   title: 'InlineGallery',
-  component: InlineGallery,
+  component: BentoInlineGallery,
   decorators: [withKnobs],
 };
 
@@ -32,15 +32,18 @@ export const _default = () => {
 
   return (
     <>
-      <InlineGallery style={{width}}>
-        <Pagination style={{height: paginationHeight}} inset={topInset} />
-        <Thumbnails
+      <BentoInlineGallery style={{width}}>
+        <BentoInlineGalleryPagination
+          style={{height: paginationHeight}}
+          inset={topInset}
+        />
+        <BentoInlineGalleryThumbnails
           aspectRatio={aspectRatio}
           loop={loop}
           style={{height: thumbnailHeight}}
         />
         <br />
-        <Thumbnails />
+        <BentoInlineGalleryThumbnails />
         <br />
         <BentoBaseCarousel
           style={{height}}
@@ -75,8 +78,8 @@ export const _default = () => {
             thumbnailSrc="https://images.unsplash.com/photo-1603123853880-a92fafb7809f?ixlib=rb-1.2.1&auto=format&fit=crop&w=120&q=80"
           />
         </BentoBaseCarousel>
-        <Pagination inset={bottomInset} />
-      </InlineGallery>
+        <BentoInlineGalleryPagination inset={bottomInset} />
+      </BentoInlineGallery>
       Content below carousel
     </>
   );
@@ -113,12 +116,15 @@ export const WithLooping = () => {
   ));
 
   return (
-    <InlineGallery style={{width, position: 'relative'}}>
+    <BentoInlineGallery style={{width, position: 'relative'}}>
       <BentoBaseCarousel loop style={{height, position: 'relative'}}>
         {slides}
       </BentoBaseCarousel>
-      <Pagination inset={inset} style={{height: paginationHeight}} />
-      <Thumbnails
+      <BentoInlineGalleryPagination
+        inset={inset}
+        style={{height: paginationHeight}}
+      />
+      <BentoInlineGalleryThumbnails
         aspectRatio={aspectRatio}
         loop={loop}
         style={{height: thumbnailHeight}}
@@ -127,7 +133,7 @@ export const WithLooping = () => {
         <div>b</div>
         <div>c</div>
         <div>d</div>
-      </Thumbnails>
-    </InlineGallery>
+      </BentoInlineGalleryThumbnails>
+    </BentoInlineGallery>
   );
 };

extensions/amp-inline-gallery/1.0/test/test-component.js

@@ -1,45 +1,45 @@
 import * as Preact from '#preact';
 import {BentoBaseCarousel} from '../../../amp-base-carousel/1.0/component';
-import {InlineGallery} from '../component';
-import {Pagination} from '../pagination';
-import {Thumbnails} from '../thumbnails';
 import {mount} from 'enzyme';
+import {BentoInlineGallery} from '../component';
+import {BentoInlineGalleryPagination} from '../pagination';
+import {BentoInlineGalleryThumbnails} from '../thumbnails';
 
 describes.sandboxed('InlineGallery preact component', {}, () => {
-  describe('Pagination component', () => {
-    it('should render BentoBaseCarousel and Pagination', () => {
+  describe('BentoInlineGalleryPagination component', () => {
+    it('should render BentoBaseCarousels and BentoInlineGalleryPagination', () => {
       const jsx = (
-        <InlineGallery>
+        <BentoInlineGallery>
           <BentoBaseCarousel>
             <div>slide 1</div>
             <div>slide 2</div>
             <div>slide 3</div>
           </BentoBaseCarousel>
-          <Pagination />
-        </InlineGallery>
+          <BentoInlineGalleryPagination />
+        </BentoInlineGallery>
       );
       const wrapper = mount(jsx);
       const carousel = wrapper.find('BentoBaseCarousel');
       expect(carousel).to.have.lengthOf(1);
       const slides = carousel.find('[data-slide]');
       expect(slides).to.have.lengthOf(3);
 
-      const pagination = wrapper.find('Pagination');
+      const pagination = wrapper.find('BentoInlineGalleryPagination');
       expect(pagination).to.have.lengthOf(1);
     });
   });
 
   describe('Thumbnail component', () => {
-    it('should render BentoBaseCarousel and Thumbnails', () => {
+    it('should render BentoBaseCarousel and BentoInlineGalleryThumbnails', () => {
       const jsx = (
-        <InlineGallery>
+        <BentoInlineGallery>
           <BentoBaseCarousel>
             <div>slide 1</div>
             <div>slide 2</div>
             <div>slide 3</div>
           </BentoBaseCarousel>
-          <Thumbnails />
-        </InlineGallery>
+          <BentoInlineGalleryThumbnails />
+        </BentoInlineGallery>
       );
       const wrapper = mount(jsx);
 
@@ -48,7 +48,7 @@ describes.sandboxed('InlineGallery preact component', {}, () => {
       const slides = carousels.first().find('[data-slide]');
       expect(slides).to.have.lengthOf(3);
 
-      const thumbnails = wrapper.find('Thumbnails');
+      const thumbnails = wrapper.find('BentoInlineGalleryThumbnails');
       expect(thumbnails).to.have.lengthOf(1);
       const generatedCarousel = thumbnails.find('BentoBaseCarousel');
       expect(generatedCarousel).to.have.lengthOf(1);
@@ -67,14 +67,14 @@ describes.sandboxed('InlineGallery preact component', {}, () => {
 
     it('should respect thumbnailSrc', () => {
       const jsx = (
-        <InlineGallery>
+        <BentoInlineGallery>
           <BentoBaseCarousel>
             <div thumbnailSrc="slide1.jpg">slide 1</div>
             <div thumbnailSrc="slide2.jpg">slide 2</div>
             <div thumbnailSrc="slide3.jpg">slide 3</div>
           </BentoBaseCarousel>
-          <Thumbnails />
-        </InlineGallery>
+          <BentoInlineGalleryThumbnails />
+        </BentoInlineGallery>
       );
       const wrapper = mount(jsx);
 
@@ -83,7 +83,7 @@ describes.sandboxed('InlineGallery preact component', {}, () => {
       const slides = carousels.first().find('[data-slide]');
       expect(slides).to.have.lengthOf(3);
 
-      const thumbnails = wrapper.find('Thumbnails');
+      const thumbnails = wrapper.find('BentoInlineGalleryThumbnails');
       expect(thumbnails).to.have.lengthOf(1);
       const generatedCarousel = thumbnails.find('BentoBaseCarousel');
       expect(generatedCarousel).to.have.lengthOf(1);
@@ -108,14 +108,14 @@ describes.sandboxed('InlineGallery preact component', {}, () => {
 
     it('should respect looping with slide alignment', () => {
       const jsx = (
-        <InlineGallery>
+        <BentoInlineGallery>
           <BentoBaseCarousel>
             <div>slide 1</div>
             <div>slide 2</div>
             <div>slide 3</div>
           </BentoBaseCarousel>
-          <Thumbnails loop />
-        </InlineGallery>
+          <BentoInlineGalleryThumbnails loop />
+        </BentoInlineGallery>
       );
       const wrapper = mount(jsx);
 
@@ -124,7 +124,7 @@ describes.sandboxed('InlineGallery preact component', {}, () => {
       const slides = carousels.first().find('[data-slide]');
       expect(slides).to.have.lengthOf(3);
 
-      const thumbnails = wrapper.find('Thumbnails');
+      const thumbnails = wrapper.find('BentoInlineGalleryThumbnails');
       expect(thumbnails).to.have.lengthOf(1);
       const generatedCarousel = thumbnails.find('BentoBaseCarousel');
       expect(generatedCarousel).to.have.lengthOf(1);

extensions/amp-inline-gallery/1.0/thumbnails.js

@@ -12,10 +12,10 @@ import {
 import {useStyles} from './thumbnails.jss';
 
 /**
- * @param {!InlineGalleryDef.ThumbnailProps} props
+ * @param {!BentoInlineGalleryDef.BentoThumbnailProps} props
  * @return {PreactDef.Renderable}
  */
-export function Thumbnails({
+export function BentoInlineGalleryThumbnails({
   aspectRatio,
   children,
   'class': className = '',