Rename Lightbox to BentoLightbox (ampproject#36019)

henel677 · Sep 10, 2021 · 290f4cd · 290f4cd
1 parent 89e5a07
commit 290f4cd
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 31 deletions.
diff --git a/extensions/amp-lightbox-gallery/1.0/provider.js b/extensions/amp-lightbox-gallery/1.0/provider.js
@@ -16,7 +16,7 @@ import {PADDING_ALLOWANCE, useStyles} from './component.jss';
 import {LightboxGalleryContext} from './context';
 
 import {BentoBaseCarousel} from '../../amp-base-carousel/1.0/component';
-import {Lightbox} from '../../amp-lightbox/1.0/component';
+import {BentoLightbox} from '../../amp-lightbox/1.0/component';
 
 /** @const {string} */
 const DEFAULT_GROUP = 'default';
@@ -181,7 +181,7 @@ export function LightboxGalleryProviderWithRef(
 
   return (
     <>
-      <Lightbox
+      <BentoLightbox
         class={objstr({
           [classes.lightbox]: true,
           [classes.showControls]: showControls,
@@ -254,7 +254,7 @@ export function LightboxGalleryProviderWithRef(
             {gridElements.current[group]}
           </div>
         )}
-      </Lightbox>
+      </BentoLightbox>
       <LightboxGalleryContext.Provider value={context}>
         {render ? render() : children}
       </LightboxGalleryContext.Provider>

diff --git a/extensions/amp-lightbox/1.0/base-element.js b/extensions/amp-lightbox/1.0/base-element.js
@@ -1,5 +1,5 @@
 import {CSS as COMPONENT_CSS} from './component.jss';
-import {Lightbox} from './component';
+import {BentoLightbox} from './component';
 import {PreactBaseElement} from '#preact/base-element';
 import {dict} from '#core/types/object';
 import {toggle} from '#core/dom/style';
@@ -59,7 +59,7 @@ export class BaseElement extends PreactBaseElement {
 }
 
 /** @override */
-BaseElement['Component'] = Lightbox;
+BaseElement['Component'] = BentoLightbox;
 
 /** @override */
 BaseElement['props'] = {

diff --git a/extensions/amp-lightbox/1.0/component.js b/extensions/amp-lightbox/1.0/component.js
@@ -28,11 +28,11 @@ const DEFAULT_CLOSE_LABEL = 'Close the modal';
 const CONTENT_PROPS = {'part': 'scroller'};
 
 /**
- * @param {!LightboxDef.Props} props
- * @param {{current: ?LightboxDef.LightboxApi}} ref
+ * @param {!BentoLightboxDef.Props} props
+ * @param {{current: ?BentoLightboxDef.LightboxApi}} ref
  * @return {PreactDef.Renderable}
  */
-function LightboxWithRef(
+function BentoLightboxWithRef(
   {
     animation = 'fade-in',
     children,
@@ -158,13 +158,13 @@ function LightboxWithRef(
   );
 }
 
-const Lightbox = forwardRef(LightboxWithRef);
-Lightbox.displayName = 'Lightbox';
-export {Lightbox};
+const BentoLightbox = forwardRef(BentoLightboxWithRef);
+BentoLightbox.displayName = 'Lightbox';
+export {BentoLightbox};
 
 /**
  *
- * @param {!LightboxDef.CloseButtonProps} props
+ * @param {!BentoLightboxDef.CloseButtonProps} props
  * @return {PreactDef.Renderable}
  */
 function CloseButton({onClick, as: Comp = ScreenReaderCloseButton}) {
@@ -180,7 +180,7 @@ function CloseButton({onClick, as: Comp = ScreenReaderCloseButton}) {
  * We do not want this in the tab order since it is not really "visible"
  * and would be confusing to tab to if not using a screen reader.
  *
- * @param {!LightboxDef.CloseButtonProps} props
+ * @param {!BentoLightboxDef.CloseButtonProps} props
  * @return {PreactDef.Renderable}
  */
 function ScreenReaderCloseButton({'aria-label': ariaLabel, onClick}) {

diff --git a/extensions/amp-lightbox/1.0/component.type.js b/extensions/amp-lightbox/1.0/component.type.js
@@ -1,6 +1,6 @@
 /** @externs */
 
-var LightboxDef = {};
+var BentoLightboxDef = {};
 
 /**
  * @typedef {{
@@ -15,7 +15,7 @@ var LightboxDef = {};
  *   onAfterClose: (function():void|undefined),
  * }}
  */
-LightboxDef.Props;
+BentoLightboxDef.Props;
 
 /**
  * @typedef {{
@@ -24,10 +24,10 @@ LightboxDef.Props;
  *   onClick: function():void,
  * }}
  */
-LightboxDef.CloseButtonProps;
+BentoLightboxDef.CloseButtonProps;
 
 /** @interface */
-LightboxDef.LightboxApi = class {
+BentoLightboxDef.LightboxApi = class {
   /** Open the lightbox */
   open() {}
 

diff --git a/extensions/amp-lightbox/1.0/storybook/Basic.js b/extensions/amp-lightbox/1.0/storybook/Basic.js
@@ -1,23 +1,23 @@
 import * as Preact from '#preact';
-import {Lightbox} from '../component';
+import {BentoLightbox} from '../component';
 import {boolean, select, text, withKnobs} from '@storybook/addon-knobs';
 import {useRef} from '#preact';
 
 export default {
   title: 'Lightbox',
-  component: Lightbox,
+  component: BentoLightbox,
   decorators: [withKnobs],
 };
 
 /**
  * @param {!Object} props
  * @return {*}
  */
-function LightboxWithActions({children, ...rest}) {
+function BentoLightboxWithActions({children, ...rest}) {
   const ref = useRef();
   return (
     <section>
-      <Lightbox
+      <BentoLightbox
         closeButtonAs={(props) => (
           <button {...props} aria-label="My custom close button">
             close
@@ -27,7 +27,7 @@ function LightboxWithActions({children, ...rest}) {
         {...rest}
       >
         {children}
-      </Lightbox>
+      </BentoLightbox>
       <div style={{marginTop: 8}}>
         <button onClick={() => ref.current.open()}>open</button>
       </div>
@@ -160,7 +160,7 @@ export const _default = () => {
   const color = text('font color', '');
   return (
     <div>
-      <LightboxWithActions
+      <BentoLightboxWithActions
         id="lightbox"
         animation={animation}
         style={{backgroundColor, color}}
@@ -169,7 +169,7 @@ export const _default = () => {
           Lorem <i>ips</i>um dolor sit amet, has nisl nihil convenire et, vim at
           aeque inermis reprehendunt.
         </p>
-      </LightboxWithActions>
+      </BentoLightboxWithActions>
     </div>
   );
 };
@@ -186,7 +186,7 @@ export const scrollable = () => {
   const lotsOfText = boolean('lots of text?', true);
   return (
     <div>
-      <LightboxWithActions
+      <BentoLightboxWithActions
         id="lightbox"
         animation={animation}
         style={{backgroundColor, color}}
@@ -321,7 +321,7 @@ export const scrollable = () => {
             </p>
           </>
         )}
-      </LightboxWithActions>
+      </BentoLightboxWithActions>
     </div>
   );
 };
diff --git a/extensions/amp-lightbox/1.0/test/test-component.js b/extensions/amp-lightbox/1.0/test/test-component.js
@@ -1,14 +1,14 @@
 import * as Preact from '#preact';
-import {Lightbox} from '../component';
+import {BentoLightbox} from '../component';
 import {mount} from 'enzyme';
 
 describes.sandboxed('Lightbox preact component v1.0', {}, () => {
   it('renders', () => {
     const ref = Preact.createRef();
     const wrapper = mount(
-      <Lightbox id="lightbox" ref={ref}>
+      <BentoLightbox id="lightbox" ref={ref}>
         <p>Hello World</p>
-      </Lightbox>
+      </BentoLightbox>
     );
 
     // Nothing is rendered at first.
@@ -36,7 +36,7 @@ describes.sandboxed('Lightbox preact component v1.0', {}, () => {
   it('renders custom close button', () => {
     const ref = Preact.createRef();
     const wrapper = mount(
-      <Lightbox
+      <BentoLightbox
         id="lightbox"
         ref={ref}
         closeButtonAs={(props) => (
@@ -46,7 +46,7 @@ describes.sandboxed('Lightbox preact component v1.0', {}, () => {
         )}
       >
         <p>Hello World</p>
-      </Lightbox>
+      </BentoLightbox>
     );
 
     // Nothing is rendered at first.