From 84f64df838048245b5ef53fbac9f5a79d1489eff Mon Sep 17 00:00:00 2001 From: Keshav Varadachari Date: Tue, 7 Sep 2021 11:14:16 -0400 Subject: [PATCH] refactor(amp-accordion): (#35864) * update (p)react component names * update component.type --- extensions/amp-accordion/1.0/amp-accordion.js | 2 +- extensions/amp-accordion/1.0/base-element.js | 32 +- extensions/amp-accordion/1.0/component.js | 34 +- .../amp-accordion/1.0/component.type.js | 20 +- .../amp-accordion/1.0/storybook/Basic.js | 80 ++--- .../amp-accordion/1.0/test/test-component.js | 295 +++++++++--------- .../amp-instagram/1.0/storybook/Basic.js | 24 +- extensions/amp-video/1.0/storybook/Basic.js | 36 +-- .../amp-video/1.0/storybook/VideoIframe.js | 24 +- extensions/amp-youtube/1.0/storybook/Basic.js | 36 +-- 10 files changed, 296 insertions(+), 287 deletions(-) diff --git a/extensions/amp-accordion/1.0/amp-accordion.js b/extensions/amp-accordion/1.0/amp-accordion.js index 7117b7f7296bc..0508ba0d25a8a 100644 --- a/extensions/amp-accordion/1.0/amp-accordion.js +++ b/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} */ +/** @extends {PreactBaseElement} */ class AmpAccordion extends BaseElement { /** @override */ init() { diff --git a/extensions/amp-accordion/1.0/base-element.js b/extensions/amp-accordion/1.0/base-element.js index 303444368a082..110a311e5e286 100644 --- a/extensions/amp-accordion/1.0/base-element.js +++ b/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} */ +/** @extends {PreactBaseElement} */ export class BaseElement extends PreactBaseElement { /** @override */ init() { @@ -106,10 +106,10 @@ function getState(element, mu, getExpandStateTrigger) { 'role': section.lastElementChild.getAttribute('role') || undefined, }); return ( - - - - + + + + ); }); return dict({'children': children}); @@ -117,7 +117,7 @@ function getState(element, mu, getExpandStateTrigger) { /** * @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; diff --git a/extensions/amp-accordion/1.0/component.js b/extensions/amp-accordion/1.0/component.js index 74fc3c66bee73..c434c0d10caba 100644 --- a/extensions/amp-accordion/1.0/component.js +++ b/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} */ @@ -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 = '', diff --git a/extensions/amp-accordion/1.0/component.type.js b/extensions/amp-accordion/1.0/component.type.js index cc7b39f5d3ca0..0e583f10a5dca 100644 --- a/extensions/amp-accordion/1.0/component.type.js +++ b/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 */ diff --git a/extensions/amp-accordion/1.0/storybook/Basic.js b/extensions/amp-accordion/1.0/storybook/Basic.js index 55b63f9e9f667..d45cb66fbe095 100644 --- a/extensions/amp-accordion/1.0/storybook/Basic.js +++ b/extensions/amp-accordion/1.0/storybook/Basic.js @@ -3,15 +3,15 @@ import {boolean, withKnobs} from '@storybook/addon-knobs'; import * as Preact from '#preact'; import { - Accordion, - AccordionContent, - AccordionHeader, - AccordionSection, + BentoAccordion, + BentoAccordionContent, + BentoAccordionHeader, + BentoAccordionSection, } from '../component'; export default { title: 'Accordion', - component: Accordion, + component: BentoAccordion, decorators: [withKnobs], }; @@ -25,7 +25,7 @@ function AccordionWithActions(props) { const ref = Preact.useRef(); return (
- +