♻️ Docs/bento accordion

extensions/amp-accordion/1.0/amp-accordion.js

@@ -14,7 +14,7 @@ import {userAssert} from '../../../src/log';
 /** @const {string} */
 const TAG = 'amp-accordion';
 
-/** @extends {PreactBaseElement<AccordionDef.AccordionApi>} */
+/** @extends {PreactBaseElement<BentoAccordionDef.AccordionApi>} */
 class AmpAccordion extends BaseElement {
   /** @override */
   init() {

extensions/amp-accordion/1.0/base-element.js

@@ -11,10 +11,10 @@ import {useDOMHandle} from '#preact/component';
 import {useSlotContext} from '#preact/slot';
 
 import {
-  Accordion,
-  AccordionContent,
-  AccordionHeader,
-  AccordionSection,
+  BentoAccordion,
+  BentoAccordionContent,
+  BentoAccordionHeader,
+  BentoAccordionSection,
 } from './component';
 
 import {devAssert} from '../../../src/log';
@@ -25,7 +25,7 @@ const CONTENT_SHIM_PROP = '__AMP_C_SHIM';
 const SECTION_POST_RENDER = '__AMP_PR';
 const EXPAND_STATE_SHIM_PROP = '__AMP_EXPAND_STATE_SHIM';
 
-/** @extends {PreactBaseElement<AccordionDef.AccordionApi>} */
+/** @extends {PreactBaseElement<BentoAccordionDef.AccordionApi>} */
 export class BaseElement extends PreactBaseElement {
   /** @override */
   init() {
@@ -106,18 +106,18 @@ function getState(element, mu, getExpandStateTrigger) {
       'role': section.lastElementChild.getAttribute('role') || undefined,
     });
     return (
-      <AccordionSection {...sectionProps}>
-        <AccordionHeader {...headerProps}></AccordionHeader>
-        <AccordionContent {...contentProps}></AccordionContent>
-      </AccordionSection>
+      <BentoAccordionSection {...sectionProps}>
+        <BentoAccordionHeader {...headerProps}></BentoAccordionHeader>
+        <BentoAccordionContent {...contentProps}></BentoAccordionContent>
+      </BentoAccordionSection>
     );
   });
   return dict({'children': children});
 }
 
 /**
  * @param {!Element} sectionElement
- * @param {!AccordionDef.SectionShimProps} props
+ * @param {!BentoAccordionDef.SectionShimProps} props
  * @return {PreactDef.Renderable}
  */
 function SectionShim(sectionElement, {children, expanded}) {
@@ -132,13 +132,13 @@ function SectionShim(sectionElement, {children, expanded}) {
 
 /**
  * @param {!Element} element
- * @return {function(!AccordionDef.SectionProps):PreactDef.Renderable}
+ * @return {function(!BentoAccordionDef.SectionProps):PreactDef.Renderable}
  */
 const bindSectionShimToElement = (element) => SectionShim.bind(null, element);
 
 /**
  * @param {!Element} sectionElement
- * @param {!AccordionDef.HeaderShimProps} props
+ * @param {!BentoAccordionDef.HeaderShimProps} props
  * @return {PreactDef.Renderable}
  */
 function HeaderShim(
@@ -185,13 +185,13 @@ function HeaderShim(
 
 /**
  * @param {!Element} element
- * @return {function(!AccordionDef.HeaderProps):PreactDef.Renderable}
+ * @return {function(!BentoAccordionDef.HeaderProps):PreactDef.Renderable}
  */
 const bindHeaderShimToElement = (element) => HeaderShim.bind(null, element);
 
 /**
  * @param {!Element} sectionElement
- * @param {!AccordionDef.ContentShimProps} props
+ * @param {!BentoAccordionDef.ContentShimProps} props
  * @param {{current: ?}} ref
  * @return {PreactDef.Renderable}
  */
@@ -222,7 +222,7 @@ function ContentShimWithRef(
 
 /**
  * @param {!Element} element
- * @return {function(!AccordionDef.ContentProps):PreactDef.Renderable}
+ * @return {function(!BentoAccordionDef.ContentProps):PreactDef.Renderable}
  */
 const bindContentShimToElement = (element) =>
   forwardRef(
@@ -232,7 +232,7 @@ const bindContentShimToElement = (element) =>
   );
 
 /** @override */
-BaseElement['Component'] = Accordion;
+BaseElement['Component'] = BentoAccordion;
 
 /** @override */
 BaseElement['detached'] = true;

extensions/amp-accordion/1.0/component.js

@@ -24,11 +24,11 @@ import {animateCollapse, animateExpand} from './animations';
 import {useStyles} from './component.jss';
 
 const AccordionContext = Preact.createContext(
-  /** @type {AccordionDef.AccordionContext} */ ({})
+  /** @type {BentoAccordionDef.AccordionContext} */ ({})
 );
 
 const SectionContext = Preact.createContext(
-  /** @type {AccordionDef.SectionContext} */ ({})
+  /** @type {BentoAccordionDef.SectionContext} */ ({})
 );
 
 /** @type {!Object<string, boolean>} */
@@ -41,11 +41,11 @@ const generateSectionId = sequentialIdGenerator();
 const generateRandomId = randomIdGenerator(100000);
 
 /**
- * @param {!AccordionDef.AccordionProps} props
- * @param {{current: ?AccordionDef.AccordionApi}} ref
+ * @param {!BentoAccordionDef.BentoAccordionProps} props
+ * @param {{current: ?BentoAccordionDef.AccordionApi}} ref
  * @return {PreactDef.Renderable}
  */
-function AccordionWithRef(
+function BentoAccordionWithRef(
   {
     animate = false,
     as: Comp = 'section',
@@ -187,7 +187,7 @@ function AccordionWithRef(
   useImperativeHandle(
     ref,
     () =>
-      /** @type {!AccordionDef.AccordionApi} */ ({
+      /** @type {!BentoAccordionDef.AccordionApi} */ ({
         toggle,
         expand,
         collapse,
@@ -197,7 +197,7 @@ function AccordionWithRef(
 
   const context = useMemo(
     () =>
-      /** @type {!AccordionDef.AccordionContext} */ ({
+      /** @type {!BentoAccordionDef.AccordionContext} */ ({
         registerSection,
         toggleExpanded,
         isExpanded,
@@ -216,9 +216,9 @@ function AccordionWithRef(
   );
 }
 
-const Accordion = forwardRef(AccordionWithRef);
-Accordion.displayName = 'Accordion'; // Make findable for tests.
-export {Accordion};
+const BentoAccordion = forwardRef(BentoAccordionWithRef);
+BentoAccordion.displayName = 'Accordion'; // Make findable for tests.
+export {BentoAccordion};
 
 /**
  * @param {string} id
@@ -243,10 +243,10 @@ function setExpanded(id, value, expandedMap, expandSingleSection) {
 }
 
 /**
- * @param {!AccordionDef.AccordionSectionProps} props
+ * @param {!BentoAccordionDef.BentoAccordionSectionProps} props
  * @return {PreactDef.Renderable}
  */
-export function AccordionSection({
+export function BentoAccordionSection({
   animate: defaultAnimate = false,
   as: Comp = 'section',
   children,
@@ -311,7 +311,7 @@ export function AccordionSection({
 
   const context = useMemo(
     () =>
-      /** @type {AccordionDef.SectionContext} */ ({
+      /** @type {BentoAccordionDef.SectionContext} */ ({
         animate,
         contentId,
         headerId,
@@ -333,10 +333,10 @@ export function AccordionSection({
 }
 
 /**
- * @param {!AccordionDef.AccordionHeaderProps} props
+ * @param {!BentoAccordionDef.BentoAccordionHeaderProps} props
  * @return {PreactDef.Renderable}
  */
-export function AccordionHeader({
+export function BentoAccordionHeader({
   as: Comp = 'div',
   children,
   'class': className = '',
@@ -372,10 +372,10 @@ export function AccordionHeader({
 }
 
 /**
- * @param {!AccordionDef.AccordionContentProps} props
+ * @param {!BentoAccordionDef.BentoAccordionContentProps} props
  * @return {PreactDef.Renderable}
  */
-export function AccordionContent({
+export function BentoAccordionContent({
   as: Comp = 'div',
   children,
   'class': className = '',

extensions/amp-accordion/1.0/component.type.js

@@ -1,7 +1,7 @@
 /** @externs */
 
 /** @const */
-var AccordionDef = {};
+var BentoAccordionDef = {};
 
 /**
  * @typedef {{
@@ -12,7 +12,7 @@ var AccordionDef = {};
  *   children: (?PreactDef.Renderable|undefined),
  * }}
  */
-AccordionDef.AccordionProps;
+BentoAccordionDef.BentoAccordionProps;
 
 /**
  * @typedef {{
@@ -24,7 +24,7 @@ AccordionDef.AccordionProps;
  *   onExpandStateChange: (function(boolean):undefined|undefined),
  * }}
  */
-AccordionDef.AccordionSectionProps;
+BentoAccordionDef.BentoAccordionSectionProps;
 
 /**
  * @typedef {{
@@ -36,7 +36,7 @@ AccordionDef.AccordionSectionProps;
  *   children: (?PreactDef.Renderable|undefined),
  * }}
  */
-AccordionDef.AccordionHeaderProps;
+BentoAccordionDef.BentoAccordionHeaderProps;
 
 /**
  * @typedef {{
@@ -47,7 +47,7 @@ AccordionDef.AccordionHeaderProps;
  *   children: (?PreactDef.Renderable|undefined),
  * }}
  */
-AccordionDef.AccordionContentProps;
+BentoAccordionDef.BentoAccordionContentProps;
 
 /**
  * This is not a public API, it exists to define properties for reference
@@ -61,7 +61,7 @@ AccordionDef.AccordionContentProps;
  *   children: (?PreactDef.Renderable|undefined),
  * }}
  */
-AccordionDef.HeaderShimProps;
+BentoAccordionDef.HeaderShimProps;
 
 /**
  * This is not a public API, it exists to define properties for reference
@@ -73,7 +73,7 @@ AccordionDef.HeaderShimProps;
  *   children: (?PreactDef.Renderable|undefined),
  * }}
  */
-AccordionDef.ContentShimProps;
+BentoAccordionDef.ContentShimProps;
 
 /**
  * @typedef {{
@@ -84,7 +84,7 @@ AccordionDef.ContentShimProps;
  *   prefix: (string),
  * }}
  */
-AccordionDef.AccordionContext;
+BentoAccordionDef.AccordionContext;
 
 /**
  * @typedef {{
@@ -97,10 +97,10 @@ AccordionDef.AccordionContext;
  *   setHeaderId: (function(string)),
  * }}
  */
-AccordionDef.SectionContext;
+BentoAccordionDef.SectionContext;
 
 /** @interface */
-AccordionDef.AccordionApi = class {
+BentoAccordionDef.BentoAccordionApi = class {
   /**
    * @param {string|undefined} section
    */