From 366e4a14bff3916736df9656942a1c56a1d9fa22 Mon Sep 17 00:00:00 2001 From: Corey Masanto Date: Mon, 27 Sep 2021 15:02:47 -0400 Subject: [PATCH 01/12] Remove amp-sidebar code from extensions/amp-story --- .../amp-story-desktop-user-overridable.css | 4 -- extensions/amp-story/1.0/amp-story.js | 27 -------- .../amp-story/1.0/test/test-amp-story.js | 64 ------------------- 3 files changed, 95 deletions(-) diff --git a/extensions/amp-story/1.0/amp-story-desktop-user-overridable.css b/extensions/amp-story/1.0/amp-story-desktop-user-overridable.css index 7621147020ff..7441c9f77250 100644 --- a/extensions/amp-story/1.0/amp-story-desktop-user-overridable.css +++ b/extensions/amp-story/1.0/amp-story-desktop-user-overridable.css @@ -4,7 +4,3 @@ .i-amphtml-story-background { background-color: transparent; } - -amp-sidebar { - background-color: #ffffff; -} diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js index ad8123ccc294..a8d86e6945cf 100644 --- a/extensions/amp-story/1.0/amp-story.js +++ b/extensions/amp-story/1.0/amp-story.js @@ -974,7 +974,6 @@ export class AmpStory extends AMP.BaseElement { const initialPageId = this.getInitialPageId_(); this.buildSystemLayer_(initialPageId); - this.initializeSidebar_(); this.setThemeColor_(); const storyLayoutPromise = Promise.all([ @@ -2454,32 +2453,6 @@ export class AmpStory extends AMP.BaseElement { this.switchTo_(targetPage.element.id, direction); } - /** - * Checks for the presence of a sidebar. If a sidebar does exist, then an icon - * permitting for the opening/closing of the sidebar is shown. - * @private - */ - initializeSidebar_() { - this.sidebar_ = this.element.querySelector('amp-sidebar'); - if (!this.sidebar_) { - return; - } - - this.mutateElement(() => { - this.sidebar_.classList.add(SIDEBAR_CLASS_NAME); - }); - - this.initializeOpacityMask_(); - this.storeService_.dispatch(Action.TOGGLE_HAS_SIDEBAR, !!this.sidebar_); - - const actions = [ - {tagOrTarget: 'AMP-SIDEBAR', method: 'open'}, - {tagOrTarget: 'AMP-SIDEBAR', method: 'close'}, - {tagOrTarget: 'AMP-SIDEBAR', method: 'toggle'}, - ]; - this.storeService_.dispatch(Action.ADD_TO_ACTIONS_ALLOWLIST, actions); - } - /** * Checks for the the storyNavigationPath stack in the history. * @private diff --git a/extensions/amp-story/1.0/test/test-amp-story.js b/extensions/amp-story/1.0/test/test-amp-story.js index f5bdabab74e6..e37872b90f6c 100644 --- a/extensions/amp-story/1.0/test/test-amp-story.js +++ b/extensions/amp-story/1.0/test/test-amp-story.js @@ -790,70 +790,6 @@ describes.realWin( }); }); - describe('amp-story custom sidebar', () => { - it('should show the sidebar control if a sidebar exists', async () => { - await createStoryWithPages(2, ['cover', 'page-1']); - - const sidebar = win.document.createElement('amp-sidebar'); - story.element.appendChild(sidebar); - - await story.layoutCallback(); - expect(story.storeService_.get(StateProperty.HAS_SIDEBAR_STATE)).to.be - .true; - }); - }); - - it('should open the sidebar on button click', async () => { - await createStoryWithPages(2, ['cover', 'page-1']); - - const sidebar = win.document.createElement('amp-sidebar'); - story.element.appendChild(sidebar); - - const executeSpy = env.sandbox.spy(); - env.sandbox.stub(Services, 'actionServiceForDoc').returns({ - setAllowlist: () => {}, - trigger: () => {}, - execute: executeSpy, - }); - - story.buildCallback(); - await story.layoutCallback(); - story.storeService_.dispatch(Action.TOGGLE_SIDEBAR, true); - expect(executeSpy).to.have.been.calledWith( - story.sidebar_, - 'open', - null, - null, - null, - null, - ActionTrust.HIGH - ); - }); - - it('should unpause the story when the sidebar is closed', async () => { - await createStoryWithPages(2, ['cover', 'page-1']); - - const sidebar = win.document.createElement('amp-sidebar'); - story.element.appendChild(sidebar); - - env.sandbox.stub(Services, 'actionServiceForDoc').returns({ - setAllowlist: () => {}, - trigger: () => {}, - execute: () => { - sidebar.setAttribute('open', ''); - }, - }); - - story.buildCallback(); - await story.layoutCallback(); - story.storeService_.dispatch(Action.TOGGLE_SIDEBAR, true); - await Promise.resolve(); - story.sidebar_.removeAttribute('open'); - await Promise.resolve(); - expect(story.storeService_.get(StateProperty.SIDEBAR_STATE)).to.be - .false; - }); - it('should add previous visited attribute', async () => { env.sandbox .stub(utils, 'setAttributeInMutate') From 627fc3e2d8ccb0f962e43d3b9af25dc7835347ba Mon Sep 17 00:00:00 2001 From: Corey Masanto Date: Mon, 27 Sep 2021 15:03:25 -0400 Subject: [PATCH 02/12] Remove amp-sidebar visual tests from examples/visual-tests/amp-story --- .../amp-story/amp-story-sidebar.html | 85 ------------------- .../amp-story/amp-story-sidebar.js | 43 ---------- 2 files changed, 128 deletions(-) delete mode 100644 examples/visual-tests/amp-story/amp-story-sidebar.html delete mode 100644 examples/visual-tests/amp-story/amp-story-sidebar.js diff --git a/examples/visual-tests/amp-story/amp-story-sidebar.html b/examples/visual-tests/amp-story/amp-story-sidebar.html deleted file mode 100644 index 6d871206cbd0..000000000000 --- a/examples/visual-tests/amp-story/amp-story-sidebar.html +++ /dev/null @@ -1,85 +0,0 @@ - - - - - - - - amp-story sidebar visual diff - - - - - - - - - - - - - - - - -

Hello world!

-

Page one of three

- - - - - - - -

Hello world!

-

Page two of three

- - - - - - - -

Hello world!

-

Page three of three

- - - - - diff --git a/examples/visual-tests/amp-story/amp-story-sidebar.js b/examples/visual-tests/amp-story/amp-story-sidebar.js deleted file mode 100644 index 3f3aaaab9757..000000000000 --- a/examples/visual-tests/amp-story/amp-story-sidebar.js +++ /dev/null @@ -1,43 +0,0 @@ -'use strict'; - -const { - verifySelectorsVisible, -} = require('../../../build-system/tasks/visual-diff/helpers'); - -module.exports = { - 'tapping on sidebar control button should show sidebar and opacity mask': - async (page, name) => { - const screen = page.touchscreen; - await screen.tap(200, 240); - await page.waitForSelector('amp-story-page#cover[active]'); - await page.tap('.i-amphtml-story-sidebar-control'); - await verifySelectorsVisible(page, name, [ - 'amp-sidebar[side][open]', - '.i-amphtml-story-opacity-mask', - ]); - }, - 'tapping on element with sidebar close action should close opacity mask ': - async (page, name) => { - const screen = page.touchscreen; - await screen.tap(200, 240); - await page.waitForSelector('amp-story-page#cover[active]'); - await page.tap('.i-amphtml-story-sidebar-control'); - await page.waitForTimeout(400); - await page.tap('button#close-button'); - await verifySelectorsVisible(page, name, [ - 'amp-sidebar[hidden]', - '.i-amphtml-story-opacity-mask[hidden]', - ]); - }, - 'tapping on the opacity mask should close sidebar ': async (page, name) => { - const screen = page.touchscreen; - await screen.tap(200, 240); - await page.waitForSelector('amp-story-page#cover[active]'); - await page.tap('.i-amphtml-story-sidebar-control'); - await screen.tap(200, 240); - await verifySelectorsVisible(page, name, [ - 'amp-sidebar[hidden]', - '.i-amphtml-story-opacity-mask[hidden]', - ]); - }, -}; From 313e51710e96c159601ee633297e12514a7b31d2 Mon Sep 17 00:00:00 2001 From: Corey Masanto Date: Mon, 27 Sep 2021 15:06:06 -0400 Subject: [PATCH 03/12] Remove reference to amp-sidebar from amp-story-interactive README --- extensions/amp-story-interactive/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/amp-story-interactive/README.md b/extensions/amp-story-interactive/README.md index 1810077acd68..fcbd7857e79a 100644 --- a/extensions/amp-story-interactive/README.md +++ b/extensions/amp-story-interactive/README.md @@ -382,7 +382,7 @@ This is a starting point for creating the inputs on a creation tool (and just a - _Styles_: A good starting point for customizing the style is to provide a color picker for accent color (and can additionally provide gradients for the prompt-background), and have dropdowns to select the theme=dark|light) and chip-style=flat|shadow. Dropdowns are better for future-proofing the attributes, as we may add more styles later. - _Fields_: Prompt text can be a field that, if left empty, the tool doesn't specify it in the component. Options should be a list of custom fields, where users start with 2 options and can add new options (up to 4 if not a binary-poll). Each option requires a text, but more attributes such as the confetti/correct can be assigned to each option. -- _Results_: It's useful to guide the users through creating multi-page results. For quizzes, users can add the results component to any page, but it's a good idea to warn users that they need quizzes on previous pages to use it correctly. Users can edit the attributes in a WYSIWYG editor for the multiple states if tools provide a dropdown to change the visible option, allowing users to input one state at a time (thresholds can be specified on a sidebar for example). Poll results can also be edited in a WYSIWYG manner, but it's a good idea to first require users to create the categories in the results component, and provide a dropdown on each poll option to link it to a category of the results page. This prevents errors in matching the names of the categories across components (eg: titlecase vs lowercase, extra spaces, etc) that are hard to debug from a user standpoint. +- _Results_: It's useful to guide the users through creating multi-page results. For quizzes, users can add the results component to any page, but it's a good idea to warn users that they need quizzes on previous pages to use it correctly. Users can edit the attributes in a WYSIWYG editor for the multiple states if tools provide a dropdown to change the visible option, allowing users to input one state at a time. Poll results can also be edited in a WYSIWYG manner, but it's a good idea to first require users to create the categories in the results component, and provide a dropdown on each poll option to link it to a category of the results page. This prevents errors in matching the names of the categories across components (eg: titlecase vs lowercase, extra spaces, etc) that are hard to debug from a user standpoint. **What if I want to animate the interactive components?** From ca235c125bd27657dd39367c8a6fdb785cf7a20d Mon Sep 17 00:00:00 2001 From: Corey Masanto Date: Mon, 27 Sep 2021 15:56:15 -0400 Subject: [PATCH 04/12] Remove remaining amp-sidebar logic from extensions/amp-story --- extensions/amp-story/1.0/amp-story.css | 47 -------- extensions/amp-story/1.0/amp-story.js | 145 +------------------------ 2 files changed, 1 insertion(+), 191 deletions(-) diff --git a/extensions/amp-story/1.0/amp-story.css b/extensions/amp-story/1.0/amp-story.css index a2f553336d5c..9b4bf4f7c6da 100644 --- a/extensions/amp-story/1.0/amp-story.css +++ b/extensions/amp-story/1.0/amp-story.css @@ -215,25 +215,6 @@ amp-story-page[active] { z-index: 1 !important; } -.i-amphtml-story-sidebar[open] { - animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1) !important; - animation-duration: 0.3s !important; - animation-name: i-amphtml-sidebar-slide-in-right; -} - -[desktop] .i-amphtml-story-sidebar { - min-width: 25% !important; - max-width: 600px !important; -} - -.i-amphtml-story-sidebar { - min-width: 75% !important; - max-width: 360px !important; - animation-timing-function: cubic-bezier(0.4, 0.0, 1, 1) !important; - animation-duration: 0.2s !important; - animation-name: i-amphtml-sidebar-slide-out-right; -} - /* Setting `translateY` distances as a trick so that the runtime schedules * layout for the next N pages. The default value (1000%) means that pages are * not be automatically laid out. Max distance is set to 2 (next 2 pages) since @@ -272,34 +253,6 @@ amp-story-page [data-text-background-color] { -webkit-box-decoration-break: clone !important; } -.i-amphtml-story-opacity-mask { - position: absolute !important; - top: 0 !important; - bottom: 0 !important; - width: 100% !important; - height: 100% !important; - opacity: 1 !important; - display: block !important; - /* Prevent someone from making this a full-screen image */ - background-image: none !important; - background-color: rgba(0, 0, 0, 0.75) !important; - visibility: visible; - z-index: 100003 !important; - transition: visibility 0.3s, opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important; -} - -.i-amphtml-story-opacity-mask[hidden] { - opacity: 0 !important; - pointer-events: none !important; - display: block !important; - visibility: hidden; - transition: visibility 0.2s, opacity 0.2s cubic-bezier(0.4, 0.0, 1, 1) !important; -} - -.i-amphtml-sidebar-mask { - display: none !important; -} - /** Call to action layer, positioned at the bottom 20% of the screen. */ amp-story-cta-layer { display: block !important; diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js index a8d86e6945cf..0c7e343b0a4a 100644 --- a/extensions/amp-story/1.0/amp-story.js +++ b/extensions/amp-story/1.0/amp-story.js @@ -167,19 +167,6 @@ const MINIMUM_AD_MEDIA_ELEMENTS = 2; */ const STORY_LOADED_CLASS_NAME = 'i-amphtml-story-loaded'; -/** - * CSS class for the opacity layer that separates the amp-sidebar and the rest - * of the story when the amp-sidebar is entering the screen. - * @const {string} - */ -const OPACITY_MASK_CLASS_NAME = 'i-amphtml-story-opacity-mask'; - -/** - * CSS class for sidebars in stories. - * @const {string} - */ -const SIDEBAR_CLASS_NAME = 'i-amphtml-story-sidebar'; - /** @const {!Object} */ const MAX_MEDIA_ELEMENT_COUNTS = { [MediaType.AUDIO]: 4, @@ -195,14 +182,6 @@ const TAG = 'amp-story'; */ const DEFAULT_THEME_COLOR = '#202125'; -/** - * MutationObserverInit options to listen for changes to the `open` attribute. - */ -const SIDEBAR_OBSERVER_OPTIONS = { - attributes: true, - attributeFilter: ['open'], -}; - /** * @implements {./media-pool.MediaPoolRoot} */ @@ -311,12 +290,6 @@ export class AmpStory extends AMP.BaseElement { */ this.pausedStateToRestore_ = null; - /** @private {?Element} */ - this.sidebar_ = null; - - /** @private {?MutationObserver} */ - this.sidebarObserver_ = null; - /** @private {?Element} */ this.maskElement_ = null; @@ -422,13 +395,7 @@ export class AmpStory extends AMP.BaseElement { Action.SET_ADVANCEMENT_MODE, AdvancementMode.GO_TO_PAGE ); - // If open, closes the sidebar before navigating. - const promise = this.storeService_.get(StateProperty.SIDEBAR_STATE) - ? Services.historyForDoc(this.getAmpDoc()).goBack() - : Promise.resolve(); - promise.then(() => - this.switchTo_(args['id'], NavigationDirection.NEXT) - ); + this.switchTo_(args['id'], NavigationDirection.NEXT) }); } if (isExperimentOn(this.win, 'story-load-first-page-only')) { @@ -748,13 +715,6 @@ export class AmpStory extends AMP.BaseElement { this.onPausedStateUpdate_(isPaused); }); - this.storeService_.subscribe( - StateProperty.SIDEBAR_STATE, - (sidebarState) => { - this.onSidebarStateUpdate_(sidebarState); - } - ); - this.storeService_.subscribe( StateProperty.UI_STATE, (uiState) => { @@ -864,7 +824,6 @@ export class AmpStory extends AMP.BaseElement { if ( embedComponent.state !== EmbeddedComponentState.HIDDEN || this.storeService_.get(StateProperty.ACCESS_STATE) || - this.storeService_.get(StateProperty.SIDEBAR_STATE) || !this.storeService_.get(StateProperty.SYSTEM_UI_IS_VISIBLE_STATE) || !this.storeService_.get(StateProperty.CAN_SHOW_NAVIGATION_OVERLAY_HINT) ) { @@ -1821,108 +1780,6 @@ export class AmpStory extends AMP.BaseElement { this.activePage_.setState(pageState); } - /** - * Reacts to sidebar state updates. - * @param {boolean} sidebarState - * @private - */ - onSidebarStateUpdate_(sidebarState) { - this.analyticsService_.triggerEvent( - sidebarState ? StoryAnalyticsEvent.OPEN : StoryAnalyticsEvent.CLOSE, - this.sidebar_ - ); - - const actions = Services.actionServiceForDoc(this.element); - if (this.win.MutationObserver) { - if (!this.sidebarObserver_) { - this.sidebarObserver_ = new this.win.MutationObserver(() => { - this.storeService_.dispatch( - Action.TOGGLE_SIDEBAR, - this.sidebar_.hasAttribute('open') - ); - }); - } - if (this.sidebar_ && sidebarState) { - this.sidebarObserver_.observe(this.sidebar_, SIDEBAR_OBSERVER_OPTIONS); - this.openOpacityMask_(); - actions.execute( - this.sidebar_, - 'open', - /* args */ null, - /* source */ null, - /* caller */ null, - /* event */ null, - ActionTrust.HIGH - ); - } else { - this.closeOpacityMask_(); - this.sidebarObserver_.disconnect(); - } - } else if (this.sidebar_ && sidebarState) { - this.openOpacityMask_(); - actions.execute( - this.sidebar_, - 'open', - /* args */ null, - /* source */ null, - /* caller */ null, - /* event */ null, - ActionTrust.HIGH - ); - this.storeService_.dispatch(Action.TOGGLE_SIDEBAR, false); - } - } - - /** - * @private - */ - initializeOpacityMask_() { - if (!this.maskElement_) { - const maskEl = this.win.document.createElement('div'); - maskEl.classList.add(OPACITY_MASK_CLASS_NAME); - maskEl.addEventListener('click', () => { - const actions = Services.actionServiceForDoc(this.element); - if (this.sidebar_) { - this.closeOpacityMask_(); - actions.execute( - this.sidebar_, - 'close', - /* args */ null, - /* source */ null, - /* caller */ null, - /* event */ null, - ActionTrust.HIGH - ); - } - }); - this.maskElement_ = maskEl; - this.mutateElement(() => { - this.element.appendChild(this.maskElement_); - toggle(dev().assertElement(this.maskElement_), /* display */ false); - }); - } - } - - /** - * @private - */ - openOpacityMask_() { - this.mutateElement(() => { - toggle(dev().assertElement(this.maskElement_), /* display */ true); - }); - } - - /** - * @private - */ - closeOpacityMask_() { - if (this.maskElement_) { - this.mutateElement(() => { - toggle(dev().assertElement(this.maskElement_), /* display */ false); - }); - } - } - /** * If browser is supported, displays the story. Otherwise, shows either the * default unsupported browser layer or the publisher fallback (if provided). From 0696fc54b2c01479595a19a9fb06366bca866644 Mon Sep 17 00:00:00 2001 From: Corey Masanto Date: Mon, 27 Sep 2021 16:00:36 -0400 Subject: [PATCH 05/12] Remove amp-sidebar logic from amp-story-system-layer code --- .../amp-story/1.0/amp-story-system-layer.css | 9 ---- .../amp-story/1.0/amp-story-system-layer.js | 46 ------------------- .../1.0/test/test-amp-story-system-layer.js | 8 ---- 3 files changed, 63 deletions(-) diff --git a/extensions/amp-story/1.0/amp-story-system-layer.css b/extensions/amp-story/1.0/amp-story-system-layer.css index 9a3756bc3846..b4ab12b66434 100644 --- a/extensions/amp-story/1.0/amp-story-system-layer.css +++ b/extensions/amp-story/1.0/amp-story-system-layer.css @@ -293,15 +293,10 @@ .i-amphtml-story-mute-text, .i-amphtml-story-unmute-sound-text, .i-amphtml-story-unmute-no-sound-text, -.i-amphtml-story-sidebar-control, .i-amphtml-story-skip-to-next { display: none !important; } -[i-amphtml-story-has-sidebar] .i-amphtml-story-sidebar-control { - display: block !important; -} - .i-amphtml-story-has-audio:not([muted]) .i-amphtml-story-mute-audio-control, .i-amphtml-story-has-audio[muted] .i-amphtml-story-unmute-audio-control { display: block !important; @@ -361,10 +356,6 @@ background-image: url('data:image/svg+xml;charset=utf-8,') !important; } -.i-amphtml-story-sidebar-control { - background-image: url('data:image/svg+xml;charset=utf-8,') !important; -} - .i-amphtml-story-share-control { background-image: url('data:image/svg+xml;charset=utf-8,') !important; } diff --git a/extensions/amp-story/1.0/amp-story-system-layer.js b/extensions/amp-story/1.0/amp-story-system-layer.js index c8ff4e312a06..ab75c1427027 100644 --- a/extensions/amp-story/1.0/amp-story-system-layer.js +++ b/extensions/amp-story/1.0/amp-story-system-layer.js @@ -71,18 +71,12 @@ const MESSAGE_DISPLAY_CLASS = 'i-amphtml-story-messagedisplay'; /** @private @const {string} */ const CURRENT_PAGE_HAS_AUDIO_ATTRIBUTE = 'i-amphtml-current-page-has-audio'; -/** @private @const {string} */ -const HAS_SIDEBAR_ATTRIBUTE = 'i-amphtml-story-has-sidebar'; - /** @private @const {string} */ const SHARE_CLASS = 'i-amphtml-story-share-control'; /** @private @const {string} */ const INFO_CLASS = 'i-amphtml-story-info-control'; -/** @private @const {string} */ -const SIDEBAR_CLASS = 'i-amphtml-story-sidebar-control'; - /** @private @const {string} */ const HAS_NEW_PAGE_ATTRIBUTE = 'i-amphtml-story-has-new-page'; @@ -266,13 +260,6 @@ const TEMPLATE = { }), localizedLabelId: LocalizedStringId.AMP_STORY_SHARE_BUTTON_LABEL, }, - { - tag: 'button', - attrs: dict({ - 'class': SIDEBAR_CLASS + ' i-amphtml-story-button', - }), - localizedLabelId: LocalizedStringId.AMP_STORY_SIDEBAR_BUTTON_LABEL, - }, { tag: 'button', attrs: dict({ @@ -329,7 +316,6 @@ const VIEWER_CONTROL_DEFAULTS = { * - story progress bar * - share button * - domain info button - * - sidebar * - story updated label (for live stories) * - close (for players) * - skip (for players) @@ -524,8 +510,6 @@ export class SystemLayer { this.onShareClick_(event); } else if (matches(target, `.${INFO_CLASS}, .${INFO_CLASS} *`)) { this.onInfoClick_(); - } else if (matches(target, `.${SIDEBAR_CLASS}, .${SIDEBAR_CLASS} *`)) { - this.onSidebarClick_(); } else if ( matches( target, @@ -641,14 +625,6 @@ export class SystemLayer { true /** callToInitialize */ ); - this.storeService_.subscribe( - StateProperty.HAS_SIDEBAR_STATE, - (hasSidebar) => { - this.onHasSidebarStateUpdate_(hasSidebar); - }, - true /** callToInitialize */ - ); - this.storeService_.subscribe( StateProperty.SYSTEM_UI_IS_VISIBLE_STATE, (isVisible) => { @@ -695,20 +671,6 @@ export class SystemLayer { : this.getShadowRoot().removeAttribute(AD_SHOWING_ATTRIBUTE); } - /** - * Checks if the story has a sidebar in order to display the icon representing - * the opening of the sidebar. - * @param {boolean} hasSidebar - * @private - */ - onHasSidebarStateUpdate_(hasSidebar) { - if (hasSidebar) { - this.getShadowRoot().setAttribute(HAS_SIDEBAR_ATTRIBUTE, ''); - } else { - this.getShadowRoot().removeAttribute(HAS_SIDEBAR_ATTRIBUTE); - } - } - /** * Reacts to updates to whether audio UI may be shown, and updates the UI * accordingly. @@ -1012,14 +974,6 @@ export class SystemLayer { this.storeService_.dispatch(Action.TOGGLE_INFO_DIALOG, !isOpen); } - /** - * Handles click events on the sidebar button and toggles the sidebar. - * @private - */ - onSidebarClick_() { - this.storeService_.dispatch(Action.TOGGLE_SIDEBAR, true); - } - /** * Shows the "story updated" label when a new page was added to the story. * @private diff --git a/extensions/amp-story/1.0/test/test-amp-story-system-layer.js b/extensions/amp-story/1.0/test/test-amp-story-system-layer.js index b9aeca19d53f..aabb3e89e4b7 100644 --- a/extensions/amp-story/1.0/test/test-amp-story-system-layer.js +++ b/extensions/amp-story/1.0/test/test-amp-story-system-layer.js @@ -106,14 +106,6 @@ describes.fakeWin('amp-story system layer', {amp: true}, (env) => { ); }); - it('should show the sidebar control only if a sidebar exists', () => { - storeService.dispatch(Action.TOGGLE_HAS_SIDEBAR, true); - systemLayer.build(); - expect(systemLayer.getShadowRoot()).to.have.attribute( - 'i-amphtml-story-has-sidebar' - ); - }); - it('should hide system layer on SYSTEM_UI_IS_VISIBLE_STATE change', () => { systemLayer.build(); storeService.dispatch(Action.TOGGLE_SYSTEM_UI_IS_VISIBLE, false); From 973910d1b52cbecb579c5b15d941926e852717c2 Mon Sep 17 00:00:00 2001 From: Corey Masanto Date: Mon, 27 Sep 2021 16:02:35 -0400 Subject: [PATCH 06/12] Remove amp-sidebar code from amp-story-store-service.js --- .../amp-story/1.0/amp-story-store-service.js | 23 ------------------- 1 file changed, 23 deletions(-) diff --git a/extensions/amp-story/1.0/amp-story-store-service.js b/extensions/amp-story/1.0/amp-story-store-service.js index 1ab1a3d3e718..5e4e176ae079 100644 --- a/extensions/amp-story/1.0/amp-story-store-service.js +++ b/extensions/amp-story/1.0/amp-story-store-service.js @@ -87,7 +87,6 @@ export let InteractiveReactData; * desktopState: boolean, * educationState: boolean, * gyroscopeEnabledState: string, - * hasSidebarState: boolean, * infoDialogState: boolean, * interactiveEmbeddedComponentState: !InteractiveComponentDef, * interactiveReactState: !Map, @@ -100,7 +99,6 @@ export let InteractiveReactData; * previewState: boolean, * rtlState: boolean, * shareMenuState: boolean, - * sidebarState: boolean, * storyHasAudioState: boolean, * storyHasPlaybackUiState: boolean, * storyHasBackgroundAudioState: boolean, @@ -139,7 +137,6 @@ export const StateProperty = { AFFILIATE_LINK_STATE: 'affiliateLinkState', EDUCATION_STATE: 'educationState', GYROSCOPE_PERMISSION_STATE: 'gyroscopePermissionState', - HAS_SIDEBAR_STATE: 'hasSidebarState', INFO_DIALOG_STATE: 'infoDialogState', INTERACTIVE_COMPONENT_STATE: 'interactiveEmbeddedComponentState', // State of interactive components (polls, quizzes) on the story. @@ -154,7 +151,6 @@ export const StateProperty = { PREVIEW_STATE: 'previewState', RTL_STATE: 'rtlState', SHARE_MENU_STATE: 'shareMenuState', - SIDEBAR_STATE: 'sidebarState', SUPPORTED_BROWSER_STATE: 'supportedBrowserState', // Any page has audio, or amp-story has a `background-audio` attribute. STORY_HAS_AUDIO_STATE: 'storyHasAudioState', @@ -190,7 +186,6 @@ export const Action = { TOGGLE_AD: 'toggleAd', TOGGLE_AFFILIATE_LINK: 'toggleAffiliateLink', TOGGLE_EDUCATION: 'toggleEducation', - TOGGLE_HAS_SIDEBAR: 'toggleHasSidebar', TOGGLE_INFO_DIALOG: 'toggleInfoDialog', TOGGLE_INTERACTIVE_COMPONENT: 'toggleInteractiveComponent', TOGGLE_KEYBOARD_ACTIVE_STATE: 'toggleKeyboardActiveState', @@ -201,7 +196,6 @@ export const Action = { TOGGLE_PAUSED: 'togglePaused', TOGGLE_RTL: 'toggleRtl', TOGGLE_SHARE_MENU: 'toggleShareMenu', - TOGGLE_SIDEBAR: 'toggleSidebar', TOGGLE_SUPPORTED_BROWSER: 'toggleSupportedBrowser', TOGGLE_STORY_HAS_AUDIO: 'toggleStoryHasAudio', TOGGLE_STORY_HAS_BACKGROUND_AUDIO: 'toggleStoryHasBackgroundAudio', @@ -381,21 +375,6 @@ const actions = (state, action, data) => { ...state, [StateProperty.KEYBOARD_ACTIVE_STATE]: !!data, }); - case Action.TOGGLE_SIDEBAR: - // Don't change the PAUSED_STATE if SIDEBAR_STATE is not changed. - if (state[StateProperty.SIDEBAR_STATE] === data) { - return state; - } - return /** @type {!State} */ ({ - ...state, - [StateProperty.PAUSED_STATE]: !!data, - [StateProperty.SIDEBAR_STATE]: !!data, - }); - case Action.TOGGLE_HAS_SIDEBAR: - return /** @type {!State} */ ({ - ...state, - [StateProperty.HAS_SIDEBAR_STATE]: !!data, - }); case Action.TOGGLE_SUPPORTED_BROWSER: return /** @type {!State} */ ({ ...state, @@ -573,7 +552,6 @@ export class AmpStoryStoreService { [StateProperty.AFFILIATE_LINK_STATE]: null, [StateProperty.EDUCATION_STATE]: false, [StateProperty.GYROSCOPE_PERMISSION_STATE]: '', - [StateProperty.HAS_SIDEBAR_STATE]: false, [StateProperty.INFO_DIALOG_STATE]: false, [StateProperty.INTERACTIVE_COMPONENT_STATE]: { state: EmbeddedComponentState.HIDDEN, @@ -588,7 +566,6 @@ export class AmpStoryStoreService { [StateProperty.PAUSED_STATE]: false, [StateProperty.RTL_STATE]: false, [StateProperty.SHARE_MENU_STATE]: false, - [StateProperty.SIDEBAR_STATE]: false, [StateProperty.SUPPORTED_BROWSER_STATE]: true, [StateProperty.STORY_HAS_AUDIO_STATE]: false, [StateProperty.STORY_HAS_BACKGROUND_AUDIO_STATE]: false, From 3b00f1a4420fe6a06b08577ba0b8d2f03ecc10c2 Mon Sep 17 00:00:00 2001 From: Corey Masanto Date: Mon, 27 Sep 2021 16:06:45 -0400 Subject: [PATCH 07/12] Remove amp-sidebar storybook JS files --- .../amp-sidebar/0.1/storybook/Basic.amp.js | 76 --- .../amp-sidebar/1.0/storybook/Basic.amp.js | 485 ------------------ extensions/amp-sidebar/1.0/storybook/Basic.js | 377 -------------- 3 files changed, 938 deletions(-) delete mode 100644 extensions/amp-sidebar/0.1/storybook/Basic.amp.js delete mode 100644 extensions/amp-sidebar/1.0/storybook/Basic.amp.js delete mode 100644 extensions/amp-sidebar/1.0/storybook/Basic.js diff --git a/extensions/amp-sidebar/0.1/storybook/Basic.amp.js b/extensions/amp-sidebar/0.1/storybook/Basic.amp.js deleted file mode 100644 index 1a8d36417a16..000000000000 --- a/extensions/amp-sidebar/0.1/storybook/Basic.amp.js +++ /dev/null @@ -1,76 +0,0 @@ -// To do: how to add CSS -//import '!style-loader!css-loader!./Basic-styles.css'; -import * as Preact from '#preact'; -import {withAmp} from '@ampproject/storybook-addon'; -import {withKnobs} from '@storybook/addon-knobs'; - -export default { - title: 'amp-sidebar-0_1', - decorators: [withKnobs, withAmp], - - parameters: { - extensions: [{name: 'amp-sidebar', version: 0.1}], - }, -}; - -export const BasicSidebar = () => { - /* - * Use the buttons below to open / toggle the amp-sidebar. The sidebar - * will be displayed with various navigational elements. - */ - return ( -
-
-

Basic Sidebar

- - -
- -

Sidebar

-
    -
  • Nav Element 1
    • -
  • Nav Element 2
    • -
  • Nav Element 3
    • -
- - - -
- ); -}; - -export const Toolbar = () => { - /* - * The toolbar feature allows elements within the amp-sidebar to be - * displayed within the main body of the article. In this example two - * Navigational Elements from the sidebar will be displayed under the - * Toolbar Target when the width of the page is 500px or more. - */ - const minWidth = 500; - const mediaQuery = `(min-width: ${minWidth}px)`; - return ( -
-
- - -

Toolbar Target

-
-
- -

Sidebar

- -
    -
  • Nav Element 3
    • -
  • Nav Element 4
    • -
- - - -
- ); -}; diff --git a/extensions/amp-sidebar/1.0/storybook/Basic.amp.js b/extensions/amp-sidebar/1.0/storybook/Basic.amp.js deleted file mode 100644 index 46f9cc5a98c8..000000000000 --- a/extensions/amp-sidebar/1.0/storybook/Basic.amp.js +++ /dev/null @@ -1,485 +0,0 @@ -import * as Preact from '#preact'; -import { - boolean, - color, - number, - select, - text, - withKnobs, -} from '@storybook/addon-knobs'; -import {withAmp} from '@ampproject/storybook-addon'; - -export default { - title: 'amp-sidebar-1_0', - decorators: [withKnobs, withAmp], - - parameters: { - extensions: [{name: 'amp-sidebar', version: '1.0'}], - experiments: ['bento'], - }, -}; - -export const _default = () => { - const sideConfigurations = ['left', 'right', undefined]; - const side = select('side', sideConfigurations, sideConfigurations[0]); - const foregroundColor = color('color'); - const backgroundColor = color('background'); - const backdropColor = color('backdrop color'); - - return ( -
- - -
- - Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at - aeque inermis reprehendunt. - -
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
- - - -
- -
- - - -
-
- ); -}; - -export const toolbar = () => { - const sideConfigurations = ['left', 'right', undefined]; - const side = select('side', sideConfigurations, sideConfigurations[0]); - const foregroundColor = color('color'); - const backgroundColor = color('background'); - const backdropColor = color('backdrop color'); - const toolbarMedia = text('toolbar media', '(max-width: 500px)'); - - return ( -
- - - - Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque - inermis reprehendunt. - -
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
- - - - - -
- - - -
-
-
- ); -}; - -export const styles = () => { - const sideConfigurations = ['left', 'right', undefined]; - const side = select('side', sideConfigurations, sideConfigurations[0]); - const foregroundColor = color('color'); - const backgroundColor = color('background'); - const height = text('height', null); - const width = text('width', null); - const padding = text('padding', null); - const border = text('border', null); - const top = text('top', null); - const maxHeight = text('max-height', null); - const maxWidth = text('max-width', null); - const minWidth = text('min-width', null); - const outline = text('outline', null); - const zIndex = number('z-index', 2147483647); - const backdropColor = color('backdrop color'); - - return ( -
- - -
- - Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at - aeque inermis reprehendunt. - -
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
- - - -
- -
- - - -
-
- ); -}; - -export const scroll = () => { - const sideConfigurations = ['left', 'right', undefined]; - const side = select('side', sideConfigurations, sideConfigurations[0]); - const foregroundColor = color('color'); - const backgroundColor = color('background'); - const backdropColor = color('backdrop color'); - const moreBackgroundContent = boolean('more background content', false); - const moreSidebarContent = boolean('more sidebar content', false); - - return ( -
- - -
- - Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at - aeque inermis reprehendunt. - -
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
- - - - {moreSidebarContent && ( - <> -

- Dessert tootsie roll marzipan pastry. Powder powder jelly beans - chocolate bar candy sugar plum. Jelly-o gummi bears jelly icing - cotton candy. Toffee carrot cake ice cream sesame snaps sugar - plum gummies. Gummies marshmallow candy chocolate bar ice cream - ice cream gummies chocolate cake. Candy ice cream pie danish ice - cream cake gingerbread. Muffin cookie marzipan marzipan jelly - beans gummies candy muffin dessert. Soufflé chocolate tart - tootsie roll tootsie roll gingerbread icing powder. Dessert - croissant macaroon candy liquorice. Gingerbread gummi bears - croissant wafer cookie cookie bonbon. Marshmallow fruitcake - lollipop sweet roll danish dragée cupcake. Tootsie roll cotton - candy dragée chocolate bar tootsie roll cheesecake cookie - muffin. Toffee sesame snaps gingerbread wafer cotton candy - bonbon gingerbread toffee. -

- -

- Danish cupcake chocolate candy chocolate bar. Topping brownie - toffee oat cake liquorice marzipan cheesecake chupa chups. - Pastry carrot cake jelly beans chocolate cake liquorice sesame - snaps caramels. Apple pie marshmallow chupa chups lemon drops - pudding cotton candy pie apple pie oat cake. Sugar plum halvah - cotton candy tiramisu sweet dragée cookie pastry. Macaroon - bonbon jujubes. Halvah tiramisu brownie topping donut cookie - tart. Jelly lemon drops soufflé pie chocolate bar donut tootsie - roll bear claw cake. Chocolate cake powder dessert. Pudding - wafer danish chupa chups donut chocolate sweet carrot cake. - Sugar plum cheesecake brownie chocolate sweet tart marzipan oat - cake dessert. Gummi bears sugar plum bonbon chocolate cake. - Croissant marzipan brownie dessert donut cotton candy croissant - powder. Chocolate cake tootsie roll sweet roll gummi bears donut - fruitcake jelly beans carrot cake. -

- -

- Brownie gummies danish lollipop caramels wafer gingerbread - macaroon carrot cake. Brownie powder donut gummi bears pudding - cupcake. Lemon drops croissant apple pie sesame snaps marzipan. - Biscuit chocolate cake jelly-o pie caramels gingerbread caramels - chupa chups donut. Sweet roll oat cake cake. Cheesecake candy - canes candy canes candy canes topping pastry sweet cheesecake. - Jelly-o gummies topping marshmallow dessert tiramisu cake bonbon - chupa chups. Chocolate biscuit danish tart bear claw. Tiramisu - carrot cake jelly-o pie sweet cake. Sesame snaps lollipop cookie - chocolate cake wafer dragée. Powder brownie danish. Pastry - chocolate cake sweet roll halvah cupcake dragée. -

- -

- Cake carrot cake icing danish biscuit carrot cake marzipan - croissant. Cake cake gummi bears fruitcake sweet dessert toffee - chocolate cake. Ice cream carrot cake donut jelly beans. Jelly - wafer sugar plum sweet icing candy canes. Bonbon marshmallow - donut pudding jelly-o tiramisu pastry cake bonbon. Jelly candy - canes liquorice cupcake liquorice dessert halvah toffee. Jelly - chocolate macaroon topping cupcake tootsie roll liquorice - brownie lollipop. Chupa chups wafer cupcake candy cookie oat - cake cookie bear claw. Carrot cake pudding biscuit tiramisu ice - cream sugar plum. Topping lemon drops dragée cake liquorice - apple pie ice cream. Cotton candy lollipop lemon drops apple pie - tootsie roll pie marshmallow chocolate jelly-o. Pastry bonbon - cupcake dragée candy. -

- -

- Ice cream dragée pudding pastry biscuit tart cookie. Oat cake - ice cream apple pie oat cake dessert soufflé caramels apple pie. - Gummies bear claw powder cake icing jelly beans jelly beans - marzipan lollipop. Lollipop brownie jelly beans pudding. Ice - cream jelly biscuit pie tiramisu tootsie roll gummies biscuit. - Cupcake biscuit biscuit chocolate bar liquorice caramels powder - cotton candy muffin. Sesame snaps tiramisu croissant. Soufflé - chocolate jelly-o topping. Lemon drops candy canes sweet carrot - cake chocolate cake tootsie roll wafer marshmallow. Jelly beans - bear claw jelly-o sesame snaps carrot cake. Pudding jelly candy - carrot cake fruitcake carrot cake candy canes sesame snaps. - Marzipan icing caramels chocolate tart powder cookie halvah. - Fruitcake dragée muffin tart. Jelly-o cupcake marshmallow - pudding gummies muffin topping caramels. -

- -

- Liquorice bear claw marshmallow dessert. Bear claw toffee pastry - tiramisu apple pie oat cake. Tiramisu jelly gingerbread cake - cake sweet roll cupcake ice cream jelly. Fruitcake jelly beans - macaroon soufflé jelly beans marzipan caramels candy. Cheesecake - candy canes pudding icing icing. Dragée chocolate bar bear claw - dragée donut brownie cake sweet roll. Wafer bear claw dragée - icing sesame snaps topping. Cake marzipan bear claw dessert bear - claw lollipop halvah wafer halvah. Icing sweet roll toffee sweet - powder sesame snaps gummies tart danish. Ice cream toffee - caramels danish. Jelly-o lollipop lollipop dessert sesame snaps - bear claw gummi bears. Donut sweet roll marzipan fruitcake oat - cake cake icing cotton candy oat cake. Gingerbread carrot cake - sesame snaps gummies candy dragée lollipop soufflé biscuit. - Pudding jujubes chocolate halvah sesame snaps tiramisu sweet - marshmallow chocolate bar. -

- -

- Donut carrot cake apple pie powder marshmallow sesame snaps - tiramisu. Sweet roll powder cookie. Lollipop sugar plum oat - cake. Marshmallow wafer danish wafer gingerbread cake muffin - candy dragée. Candy cotton candy topping cake cotton candy - carrot cake fruitcake brownie. Toffee candy candy canes jelly-o - cotton candy gummies. Bonbon bonbon pie sugar plum. Oat cake - sesame snaps pudding candy canes gummi bears macaroon jelly - beans brownie. Sesame snaps halvah halvah jelly-o dessert. - Jelly-o chocolate sweet roll donut candy. Cotton candy halvah - macaroon tiramisu tart. Jelly toffee candy pie toffee. -

- -

- Powder chupa chups muffin jelly-o soufflé. Lollipop sweet roll - sweet roll brownie pastry tootsie roll. Topping cheesecake pie - jelly. Donut wafer wafer cake candy canes. Topping chocolate bar - cheesecake topping ice cream tiramisu toffee ice cream. Bonbon - halvah marshmallow. Marzipan topping chupa chups dessert - chocolate chocolate cake gummi bears. Gummi bears caramels sugar - plum. Pie donut jelly beans tiramisu soufflé pie powder. Cupcake - cookie topping. Tootsie roll candy canes jujubes croissant - liquorice ice cream brownie. Topping cookie apple pie gummi - bears bear claw jelly-o brownie tart. Marzipan cotton candy - gummi bears. Dragée ice cream gummi bears jelly-o carrot cake - chocolate bar tiramisu jelly cotton candy. -

- - )} -
- -
- - - -
- {moreBackgroundContent && ( -
-

- Dessert tootsie roll marzipan pastry. Powder powder jelly beans - chocolate bar candy sugar plum. Jelly-o gummi bears jelly icing - cotton candy. Toffee carrot cake ice cream sesame snaps sugar plum - gummies. Gummies marshmallow candy chocolate bar ice cream ice cream - gummies chocolate cake. Candy ice cream pie danish ice cream cake - gingerbread. Muffin cookie marzipan marzipan jelly beans gummies - candy muffin dessert. Soufflé chocolate tart tootsie roll tootsie - roll gingerbread icing powder. Dessert croissant macaroon candy - liquorice. Gingerbread gummi bears croissant wafer cookie cookie - bonbon. Marshmallow fruitcake lollipop sweet roll danish dragée - cupcake. Tootsie roll cotton candy dragée chocolate bar tootsie roll - cheesecake cookie muffin. Toffee sesame snaps gingerbread wafer - cotton candy bonbon gingerbread toffee. -

- -

- Danish cupcake chocolate candy chocolate bar. Topping brownie toffee - oat cake liquorice marzipan cheesecake chupa chups. Pastry carrot - cake jelly beans chocolate cake liquorice sesame snaps caramels. - Apple pie marshmallow chupa chups lemon drops pudding cotton candy - pie apple pie oat cake. Sugar plum halvah cotton candy tiramisu - sweet dragée cookie pastry. Macaroon bonbon jujubes. Halvah tiramisu - brownie topping donut cookie tart. Jelly lemon drops soufflé pie - chocolate bar donut tootsie roll bear claw cake. Chocolate cake - powder dessert. Pudding wafer danish chupa chups donut chocolate - sweet carrot cake. Sugar plum cheesecake brownie chocolate sweet - tart marzipan oat cake dessert. Gummi bears sugar plum bonbon - chocolate cake. Croissant marzipan brownie dessert donut cotton - candy croissant powder. Chocolate cake tootsie roll sweet roll gummi - bears donut fruitcake jelly beans carrot cake. -

- -

- Brownie gummies danish lollipop caramels wafer gingerbread macaroon - carrot cake. Brownie powder donut gummi bears pudding cupcake. Lemon - drops croissant apple pie sesame snaps marzipan. Biscuit chocolate - cake jelly-o pie caramels gingerbread caramels chupa chups donut. - Sweet roll oat cake cake. Cheesecake candy canes candy canes candy - canes topping pastry sweet cheesecake. Jelly-o gummies topping - marshmallow dessert tiramisu cake bonbon chupa chups. Chocolate - biscuit danish tart bear claw. Tiramisu carrot cake jelly-o pie - sweet cake. Sesame snaps lollipop cookie chocolate cake wafer - dragée. Powder brownie danish. Pastry chocolate cake sweet roll - halvah cupcake dragée. -

- -

- Cake carrot cake icing danish biscuit carrot cake marzipan - croissant. Cake cake gummi bears fruitcake sweet dessert toffee - chocolate cake. Ice cream carrot cake donut jelly beans. Jelly wafer - sugar plum sweet icing candy canes. Bonbon marshmallow donut pudding - jelly-o tiramisu pastry cake bonbon. Jelly candy canes liquorice - cupcake liquorice dessert halvah toffee. Jelly chocolate macaroon - topping cupcake tootsie roll liquorice brownie lollipop. Chupa chups - wafer cupcake candy cookie oat cake cookie bear claw. Carrot cake - pudding biscuit tiramisu ice cream sugar plum. Topping lemon drops - dragée cake liquorice apple pie ice cream. Cotton candy lollipop - lemon drops apple pie tootsie roll pie marshmallow chocolate - jelly-o. Pastry bonbon cupcake dragée candy. -

- -

- Ice cream dragée pudding pastry biscuit tart cookie. Oat cake ice - cream apple pie oat cake dessert soufflé caramels apple pie. Gummies - bear claw powder cake icing jelly beans jelly beans marzipan - lollipop. Lollipop brownie jelly beans pudding. Ice cream jelly - biscuit pie tiramisu tootsie roll gummies biscuit. Cupcake biscuit - biscuit chocolate bar liquorice caramels powder cotton candy muffin. - Sesame snaps tiramisu croissant. Soufflé chocolate jelly-o topping. - Lemon drops candy canes sweet carrot cake chocolate cake tootsie - roll wafer marshmallow. Jelly beans bear claw jelly-o sesame snaps - carrot cake. Pudding jelly candy carrot cake fruitcake carrot cake - candy canes sesame snaps. Marzipan icing caramels chocolate tart - powder cookie halvah. Fruitcake dragée muffin tart. Jelly-o cupcake - marshmallow pudding gummies muffin topping caramels. -

- -

- Liquorice bear claw marshmallow dessert. Bear claw toffee pastry - tiramisu apple pie oat cake. Tiramisu jelly gingerbread cake cake - sweet roll cupcake ice cream jelly. Fruitcake jelly beans macaroon - soufflé jelly beans marzipan caramels candy. Cheesecake candy canes - pudding icing icing. Dragée chocolate bar bear claw dragée donut - brownie cake sweet roll. Wafer bear claw dragée icing sesame snaps - topping. Cake marzipan bear claw dessert bear claw lollipop halvah - wafer halvah. Icing sweet roll toffee sweet powder sesame snaps - gummies tart danish. Ice cream toffee caramels danish. Jelly-o - lollipop lollipop dessert sesame snaps bear claw gummi bears. Donut - sweet roll marzipan fruitcake oat cake cake icing cotton candy oat - cake. Gingerbread carrot cake sesame snaps gummies candy dragée - lollipop soufflé biscuit. Pudding jujubes chocolate halvah sesame - snaps tiramisu sweet marshmallow chocolate bar. -

- -

- Donut carrot cake apple pie powder marshmallow sesame snaps - tiramisu. Sweet roll powder cookie. Lollipop sugar plum oat cake. - Marshmallow wafer danish wafer gingerbread cake muffin candy dragée. - Candy cotton candy topping cake cotton candy carrot cake fruitcake - brownie. Toffee candy candy canes jelly-o cotton candy gummies. - Bonbon bonbon pie sugar plum. Oat cake sesame snaps pudding candy - canes gummi bears macaroon jelly beans brownie. Sesame snaps halvah - halvah jelly-o dessert. Jelly-o chocolate sweet roll donut candy. - Cotton candy halvah macaroon tiramisu tart. Jelly toffee candy pie - toffee. -

- -

- Powder chupa chups muffin jelly-o soufflé. Lollipop sweet roll sweet - roll brownie pastry tootsie roll. Topping cheesecake pie jelly. - Donut wafer wafer cake candy canes. Topping chocolate bar cheesecake - topping ice cream tiramisu toffee ice cream. Bonbon halvah - marshmallow. Marzipan topping chupa chups dessert chocolate - chocolate cake gummi bears. Gummi bears caramels sugar plum. Pie - donut jelly beans tiramisu soufflé pie powder. Cupcake cookie - topping. Tootsie roll candy canes jujubes croissant liquorice ice - cream brownie. Topping cookie apple pie gummi bears bear claw - jelly-o brownie tart. Marzipan cotton candy gummi bears. Dragée ice - cream gummi bears jelly-o carrot cake chocolate bar tiramisu jelly - cotton candy. -

-
- )} -
- ); -}; diff --git a/extensions/amp-sidebar/1.0/storybook/Basic.js b/extensions/amp-sidebar/1.0/storybook/Basic.js deleted file mode 100644 index 8f0c8174d99c..000000000000 --- a/extensions/amp-sidebar/1.0/storybook/Basic.js +++ /dev/null @@ -1,377 +0,0 @@ -import * as Preact from '#preact'; -import {BentoSidebar, BentoSidebarToolbar} from '../component'; -import {boolean, color, select, text, withKnobs} from '@storybook/addon-knobs'; - -export default { - title: 'Sidebar', - component: BentoSidebar, - decorators: [withKnobs], -}; - -/** - * @param {!Object} props - * @return {*} - */ -function BentoSidebarWithActions(props) { - // TODO(#30447): replace imperative calls with "button" knobs when the - // Storybook 6.1 is released. - const ref = Preact.useRef(); - return ( - <> - -
- - Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at - aeque inermis reprehendunt. - -
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
- - - - {props.children} -
- -
- - - - {props.moreBackgroundContent} -
- - ); -} - -export const _default = () => { - const sideConfigurations = ['left', 'right', undefined]; - const side = select('side', sideConfigurations, sideConfigurations[0]); - const foregroundColor = color('color'); - const backgroundColor = color('background'); - const backdropColor = color('backdrop color'); - - return ( -
- -
- ); -}; - -export const toolbar = () => { - const sideConfigurations = ['left', 'right', undefined]; - const side = select('side', sideConfigurations, sideConfigurations[0]); - const toolbarMedia = text('toolbar media', '(max-width: 500px)'); - const foregroundColor = color('color'); - const backgroundColor = color('background'); - const backdropColor = color('backdrop color'); - - return ( -
- - -
    -
  • Toolbar Item 1
    • -
  • Toolbar Item 2
    • -
- - -
-
- ); -}; - -export const scroll = () => { - const sideConfigurations = ['left', 'right', undefined]; - const side = select('side', sideConfigurations, sideConfigurations[0]); - const foregroundColor = color('color'); - const backgroundColor = color('background'); - const backdropColor = color('backdrop color'); - const moreBackgroundContent = boolean('more background content', false); - const moreBentoSidebarContent = boolean('more sidebar content', false); - - return ( -
- -

- Dessert tootsie roll marzipan pastry. Powder powder jelly beans - chocolate bar candy sugar plum. Jelly-o gummi bears jelly icing - cotton candy. Toffee carrot cake ice cream sesame snaps sugar - plum gummies. Gummies marshmallow candy chocolate bar ice cream - ice cream gummies chocolate cake. Candy ice cream pie danish ice - cream cake gingerbread. Muffin cookie marzipan marzipan jelly - beans gummies candy muffin dessert. Soufflé chocolate tart - tootsie roll tootsie roll gingerbread icing powder. Dessert - croissant macaroon candy liquorice. Gingerbread gummi bears - croissant wafer cookie cookie bonbon. Marshmallow fruitcake - lollipop sweet roll danish dragée cupcake. Tootsie roll cotton - candy dragée chocolate bar tootsie roll cheesecake cookie - muffin. Toffee sesame snaps gingerbread wafer cotton candy - bonbon gingerbread toffee. -

- -

- Danish cupcake chocolate candy chocolate bar. Topping brownie - toffee oat cake liquorice marzipan cheesecake chupa chups. - Pastry carrot cake jelly beans chocolate cake liquorice sesame - snaps caramels. Apple pie marshmallow chupa chups lemon drops - pudding cotton candy pie apple pie oat cake. Sugar plum halvah - cotton candy tiramisu sweet dragée cookie pastry. Macaroon - bonbon jujubes. Halvah tiramisu brownie topping donut cookie - tart. Jelly lemon drops soufflé pie chocolate bar donut tootsie - roll bear claw cake. Chocolate cake powder dessert. Pudding - wafer danish chupa chups donut chocolate sweet carrot cake. - Sugar plum cheesecake brownie chocolate sweet tart marzipan oat - cake dessert. Gummi bears sugar plum bonbon chocolate cake. - Croissant marzipan brownie dessert donut cotton candy croissant - powder. Chocolate cake tootsie roll sweet roll gummi bears donut - fruitcake jelly beans carrot cake. -

- -

- Brownie gummies danish lollipop caramels wafer gingerbread - macaroon carrot cake. Brownie powder donut gummi bears pudding - cupcake. Lemon drops croissant apple pie sesame snaps marzipan. - Biscuit chocolate cake jelly-o pie caramels gingerbread caramels - chupa chups donut. Sweet roll oat cake cake. Cheesecake candy - canes candy canes candy canes topping pastry sweet cheesecake. - Jelly-o gummies topping marshmallow dessert tiramisu cake bonbon - chupa chups. Chocolate biscuit danish tart bear claw. Tiramisu - carrot cake jelly-o pie sweet cake. Sesame snaps lollipop cookie - chocolate cake wafer dragée. Powder brownie danish. Pastry - chocolate cake sweet roll halvah cupcake dragée. -

- -

- Cake carrot cake icing danish biscuit carrot cake marzipan - croissant. Cake cake gummi bears fruitcake sweet dessert toffee - chocolate cake. Ice cream carrot cake donut jelly beans. Jelly - wafer sugar plum sweet icing candy canes. Bonbon marshmallow - donut pudding jelly-o tiramisu pastry cake bonbon. Jelly candy - canes liquorice cupcake liquorice dessert halvah toffee. Jelly - chocolate macaroon topping cupcake tootsie roll liquorice - brownie lollipop. Chupa chups wafer cupcake candy cookie oat - cake cookie bear claw. Carrot cake pudding biscuit tiramisu ice - cream sugar plum. Topping lemon drops dragée cake liquorice - apple pie ice cream. Cotton candy lollipop lemon drops apple pie - tootsie roll pie marshmallow chocolate jelly-o. Pastry bonbon - cupcake dragée candy. -

- -

- Ice cream dragée pudding pastry biscuit tart cookie. Oat cake - ice cream apple pie oat cake dessert soufflé caramels apple pie. - Gummies bear claw powder cake icing jelly beans jelly beans - marzipan lollipop. Lollipop brownie jelly beans pudding. Ice - cream jelly biscuit pie tiramisu tootsie roll gummies biscuit. - Cupcake biscuit biscuit chocolate bar liquorice caramels powder - cotton candy muffin. Sesame snaps tiramisu croissant. Soufflé - chocolate jelly-o topping. Lemon drops candy canes sweet carrot - cake chocolate cake tootsie roll wafer marshmallow. Jelly beans - bear claw jelly-o sesame snaps carrot cake. Pudding jelly candy - carrot cake fruitcake carrot cake candy canes sesame snaps. - Marzipan icing caramels chocolate tart powder cookie halvah. - Fruitcake dragée muffin tart. Jelly-o cupcake marshmallow - pudding gummies muffin topping caramels. -

- -

- Liquorice bear claw marshmallow dessert. Bear claw toffee pastry - tiramisu apple pie oat cake. Tiramisu jelly gingerbread cake - cake sweet roll cupcake ice cream jelly. Fruitcake jelly beans - macaroon soufflé jelly beans marzipan caramels candy. Cheesecake - candy canes pudding icing icing. Dragée chocolate bar bear claw - dragée donut brownie cake sweet roll. Wafer bear claw dragée - icing sesame snaps topping. Cake marzipan bear claw dessert bear - claw lollipop halvah wafer halvah. Icing sweet roll toffee sweet - powder sesame snaps gummies tart danish. Ice cream toffee - caramels danish. Jelly-o lollipop lollipop dessert sesame snaps - bear claw gummi bears. Donut sweet roll marzipan fruitcake oat - cake cake icing cotton candy oat cake. Gingerbread carrot cake - sesame snaps gummies candy dragée lollipop soufflé biscuit. - Pudding jujubes chocolate halvah sesame snaps tiramisu sweet - marshmallow chocolate bar. -

- -

- Donut carrot cake apple pie powder marshmallow sesame snaps - tiramisu. Sweet roll powder cookie. Lollipop sugar plum oat - cake. Marshmallow wafer danish wafer gingerbread cake muffin - candy dragée. Candy cotton candy topping cake cotton candy - carrot cake fruitcake brownie. Toffee candy candy canes jelly-o - cotton candy gummies. Bonbon bonbon pie sugar plum. Oat cake - sesame snaps pudding candy canes gummi bears macaroon jelly - beans brownie. Sesame snaps halvah halvah jelly-o dessert. - Jelly-o chocolate sweet roll donut candy. Cotton candy halvah - macaroon tiramisu tart. Jelly toffee candy pie toffee. -

- -

- Powder chupa chups muffin jelly-o soufflé. Lollipop sweet roll - sweet roll brownie pastry tootsie roll. Topping cheesecake pie - jelly. Donut wafer wafer cake candy canes. Topping chocolate bar - cheesecake topping ice cream tiramisu toffee ice cream. Bonbon - halvah marshmallow. Marzipan topping chupa chups dessert - chocolate chocolate cake gummi bears. Gummi bears caramels sugar - plum. Pie donut jelly beans tiramisu soufflé pie powder. Cupcake - cookie topping. Tootsie roll candy canes jujubes croissant - liquorice ice cream brownie. Topping cookie apple pie gummi - bears bear claw jelly-o brownie tart. Marzipan cotton candy - gummi bears. Dragée ice cream gummi bears jelly-o carrot cake - chocolate bar tiramisu jelly cotton candy. -

- - ) - } - > - {moreBentoSidebarContent && ( - <> -

- Dessert tootsie roll marzipan pastry. Powder powder jelly beans - chocolate bar candy sugar plum. Jelly-o gummi bears jelly icing - cotton candy. Toffee carrot cake ice cream sesame snaps sugar plum - gummies. Gummies marshmallow candy chocolate bar ice cream ice - cream gummies chocolate cake. Candy ice cream pie danish ice cream - cake gingerbread. Muffin cookie marzipan marzipan jelly beans - gummies candy muffin dessert. Soufflé chocolate tart tootsie roll - tootsie roll gingerbread icing powder. Dessert croissant macaroon - candy liquorice. Gingerbread gummi bears croissant wafer cookie - cookie bonbon. Marshmallow fruitcake lollipop sweet roll danish - dragée cupcake. Tootsie roll cotton candy dragée chocolate bar - tootsie roll cheesecake cookie muffin. Toffee sesame snaps - gingerbread wafer cotton candy bonbon gingerbread toffee. -

- -

- Danish cupcake chocolate candy chocolate bar. Topping brownie - toffee oat cake liquorice marzipan cheesecake chupa chups. Pastry - carrot cake jelly beans chocolate cake liquorice sesame snaps - caramels. Apple pie marshmallow chupa chups lemon drops pudding - cotton candy pie apple pie oat cake. Sugar plum halvah cotton - candy tiramisu sweet dragée cookie pastry. Macaroon bonbon - jujubes. Halvah tiramisu brownie topping donut cookie tart. Jelly - lemon drops soufflé pie chocolate bar donut tootsie roll bear claw - cake. Chocolate cake powder dessert. Pudding wafer danish chupa - chups donut chocolate sweet carrot cake. Sugar plum cheesecake - brownie chocolate sweet tart marzipan oat cake dessert. Gummi - bears sugar plum bonbon chocolate cake. Croissant marzipan brownie - dessert donut cotton candy croissant powder. Chocolate cake - tootsie roll sweet roll gummi bears donut fruitcake jelly beans - carrot cake. -

- -

- Brownie gummies danish lollipop caramels wafer gingerbread - macaroon carrot cake. Brownie powder donut gummi bears pudding - cupcake. Lemon drops croissant apple pie sesame snaps marzipan. - Biscuit chocolate cake jelly-o pie caramels gingerbread caramels - chupa chups donut. Sweet roll oat cake cake. Cheesecake candy - canes candy canes candy canes topping pastry sweet cheesecake. - Jelly-o gummies topping marshmallow dessert tiramisu cake bonbon - chupa chups. Chocolate biscuit danish tart bear claw. Tiramisu - carrot cake jelly-o pie sweet cake. Sesame snaps lollipop cookie - chocolate cake wafer dragée. Powder brownie danish. Pastry - chocolate cake sweet roll halvah cupcake dragée. -

- -

- Cake carrot cake icing danish biscuit carrot cake marzipan - croissant. Cake cake gummi bears fruitcake sweet dessert toffee - chocolate cake. Ice cream carrot cake donut jelly beans. Jelly - wafer sugar plum sweet icing candy canes. Bonbon marshmallow donut - pudding jelly-o tiramisu pastry cake bonbon. Jelly candy canes - liquorice cupcake liquorice dessert halvah toffee. Jelly chocolate - macaroon topping cupcake tootsie roll liquorice brownie lollipop. - Chupa chups wafer cupcake candy cookie oat cake cookie bear claw. - Carrot cake pudding biscuit tiramisu ice cream sugar plum. Topping - lemon drops dragée cake liquorice apple pie ice cream. Cotton - candy lollipop lemon drops apple pie tootsie roll pie marshmallow - chocolate jelly-o. Pastry bonbon cupcake dragée candy. -

- -

- Ice cream dragée pudding pastry biscuit tart cookie. Oat cake ice - cream apple pie oat cake dessert soufflé caramels apple pie. - Gummies bear claw powder cake icing jelly beans jelly beans - marzipan lollipop. Lollipop brownie jelly beans pudding. Ice cream - jelly biscuit pie tiramisu tootsie roll gummies biscuit. Cupcake - biscuit biscuit chocolate bar liquorice caramels powder cotton - candy muffin. Sesame snaps tiramisu croissant. Soufflé chocolate - jelly-o topping. Lemon drops candy canes sweet carrot cake - chocolate cake tootsie roll wafer marshmallow. Jelly beans bear - claw jelly-o sesame snaps carrot cake. Pudding jelly candy carrot - cake fruitcake carrot cake candy canes sesame snaps. Marzipan - icing caramels chocolate tart powder cookie halvah. Fruitcake - dragée muffin tart. Jelly-o cupcake marshmallow pudding gummies - muffin topping caramels. -

- -

- Liquorice bear claw marshmallow dessert. Bear claw toffee pastry - tiramisu apple pie oat cake. Tiramisu jelly gingerbread cake cake - sweet roll cupcake ice cream jelly. Fruitcake jelly beans macaroon - soufflé jelly beans marzipan caramels candy. Cheesecake candy - canes pudding icing icing. Dragée chocolate bar bear claw dragée - donut brownie cake sweet roll. Wafer bear claw dragée icing sesame - snaps topping. Cake marzipan bear claw dessert bear claw lollipop - halvah wafer halvah. Icing sweet roll toffee sweet powder sesame - snaps gummies tart danish. Ice cream toffee caramels danish. - Jelly-o lollipop lollipop dessert sesame snaps bear claw gummi - bears. Donut sweet roll marzipan fruitcake oat cake cake icing - cotton candy oat cake. Gingerbread carrot cake sesame snaps - gummies candy dragée lollipop soufflé biscuit. Pudding jujubes - chocolate halvah sesame snaps tiramisu sweet marshmallow chocolate - bar. -

- -

- Donut carrot cake apple pie powder marshmallow sesame snaps - tiramisu. Sweet roll powder cookie. Lollipop sugar plum oat cake. - Marshmallow wafer danish wafer gingerbread cake muffin candy - dragée. Candy cotton candy topping cake cotton candy carrot cake - fruitcake brownie. Toffee candy candy canes jelly-o cotton candy - gummies. Bonbon bonbon pie sugar plum. Oat cake sesame snaps - pudding candy canes gummi bears macaroon jelly beans brownie. - Sesame snaps halvah halvah jelly-o dessert. Jelly-o chocolate - sweet roll donut candy. Cotton candy halvah macaroon tiramisu - tart. Jelly toffee candy pie toffee. -

- -

- Powder chupa chups muffin jelly-o soufflé. Lollipop sweet roll - sweet roll brownie pastry tootsie roll. Topping cheesecake pie - jelly. Donut wafer wafer cake candy canes. Topping chocolate bar - cheesecake topping ice cream tiramisu toffee ice cream. Bonbon - halvah marshmallow. Marzipan topping chupa chups dessert chocolate - chocolate cake gummi bears. Gummi bears caramels sugar plum. Pie - donut jelly beans tiramisu soufflé pie powder. Cupcake cookie - topping. Tootsie roll candy canes jujubes croissant liquorice ice - cream brownie. Topping cookie apple pie gummi bears bear claw - jelly-o brownie tart. Marzipan cotton candy gummi bears. Dragée - ice cream gummi bears jelly-o carrot cake chocolate bar tiramisu - jelly cotton candy. -

- - )} - -
- ); -}; From fc909a0a11b57403f52cb91ea68f49cd2a40f6c6 Mon Sep 17 00:00:00 2001 From: Corey Masanto Date: Mon, 27 Sep 2021 16:20:38 -0400 Subject: [PATCH 08/12] A few missed deletions in test-amp-story and build-system/ caught by linter --- build-system/test-configs/forbidden-terms.js | 3 --- extensions/amp-story/1.0/amp-story.js | 5 +---- extensions/amp-story/1.0/test/test-amp-story.js | 1 - 3 files changed, 1 insertion(+), 8 deletions(-) diff --git a/build-system/test-configs/forbidden-terms.js b/build-system/test-configs/forbidden-terms.js index 11f0282865c0..17de7271949e 100644 --- a/build-system/test-configs/forbidden-terms.js +++ b/build-system/test-configs/forbidden-terms.js @@ -749,9 +749,6 @@ const forbiddenTermsGlobal = { 'extensions/amp-render/1.0/storybook/Basic.js', 'extensions/amp-selector/1.0/storybook/Basic.amp.js', 'extensions/amp-selector/1.0/storybook/Basic.js', - 'extensions/amp-sidebar/0.1/storybook/Basic.amp.js', - 'extensions/amp-sidebar/1.0/storybook/Basic.amp.js', - 'extensions/amp-sidebar/1.0/storybook/Basic.js', 'extensions/amp-soundcloud/1.0/storybook/Basic.amp.js', 'extensions/amp-soundcloud/1.0/storybook/Basic.js', 'extensions/amp-stream-gallery/1.0/storybook/Basic.amp.js', diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js index 0c7e343b0a4a..114b13fd3ba1 100644 --- a/extensions/amp-story/1.0/amp-story.js +++ b/extensions/amp-story/1.0/amp-story.js @@ -290,9 +290,6 @@ export class AmpStory extends AMP.BaseElement { */ this.pausedStateToRestore_ = null; - /** @private {?Element} */ - this.maskElement_ = null; - /** @private {?LiveStoryManager} */ this.liveStoryManager_ = null; @@ -395,7 +392,7 @@ export class AmpStory extends AMP.BaseElement { Action.SET_ADVANCEMENT_MODE, AdvancementMode.GO_TO_PAGE ); - this.switchTo_(args['id'], NavigationDirection.NEXT) + this.switchTo_(args['id'], NavigationDirection.NEXT); }); } if (isExperimentOn(this.win, 'story-load-first-page-only')) { diff --git a/extensions/amp-story/1.0/test/test-amp-story.js b/extensions/amp-story/1.0/test/test-amp-story.js index e37872b90f6c..884c6f4752cf 100644 --- a/extensions/amp-story/1.0/test/test-amp-story.js +++ b/extensions/amp-story/1.0/test/test-amp-story.js @@ -6,7 +6,6 @@ import { StateProperty, UIType, } from '../amp-story-store-service'; -import {ActionTrust} from '#core/constants/action-constants'; import {AdvancementMode} from '../story-analytics'; import {AmpStory} from '../amp-story'; import {AmpStoryConsent} from '../amp-story-consent'; From cad95686c3c1fbd7b17fb7489cfd4bbdaf5195be Mon Sep 17 00:00:00 2001 From: Corey Masanto Date: Wed, 29 Sep 2021 17:54:15 -0400 Subject: [PATCH 09/12] Revert extensions/amp-sidebar/*/storybook removal from forbidden terms --- build-system/test-configs/forbidden-terms.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/build-system/test-configs/forbidden-terms.js b/build-system/test-configs/forbidden-terms.js index 17de7271949e..11f0282865c0 100644 --- a/build-system/test-configs/forbidden-terms.js +++ b/build-system/test-configs/forbidden-terms.js @@ -749,6 +749,9 @@ const forbiddenTermsGlobal = { 'extensions/amp-render/1.0/storybook/Basic.js', 'extensions/amp-selector/1.0/storybook/Basic.amp.js', 'extensions/amp-selector/1.0/storybook/Basic.js', + 'extensions/amp-sidebar/0.1/storybook/Basic.amp.js', + 'extensions/amp-sidebar/1.0/storybook/Basic.amp.js', + 'extensions/amp-sidebar/1.0/storybook/Basic.js', 'extensions/amp-soundcloud/1.0/storybook/Basic.amp.js', 'extensions/amp-soundcloud/1.0/storybook/Basic.js', 'extensions/amp-stream-gallery/1.0/storybook/Basic.amp.js', From 197c365e0489c10602e87e87ec0a85c6ae471909 Mon Sep 17 00:00:00 2001 From: Corey Masanto Date: Wed, 29 Sep 2021 23:32:34 -0400 Subject: [PATCH 10/12] Add back the amp-sidebar storybook files --- .../amp-sidebar/0.1/storybook/Basic.amp.js | 76 +++ .../amp-sidebar/1.0/storybook/Basic.amp.js | 485 ++++++++++++++++++ extensions/amp-sidebar/1.0/storybook/Basic.js | 377 ++++++++++++++ 3 files changed, 938 insertions(+) create mode 100644 extensions/amp-sidebar/0.1/storybook/Basic.amp.js create mode 100644 extensions/amp-sidebar/1.0/storybook/Basic.amp.js create mode 100644 extensions/amp-sidebar/1.0/storybook/Basic.js diff --git a/extensions/amp-sidebar/0.1/storybook/Basic.amp.js b/extensions/amp-sidebar/0.1/storybook/Basic.amp.js new file mode 100644 index 000000000000..6509fa425154 --- /dev/null +++ b/extensions/amp-sidebar/0.1/storybook/Basic.amp.js @@ -0,0 +1,76 @@ +// To do: how to add CSS +//import '!style-loader!css-loader!./Basic-styles.css'; +import * as Preact from '#preact'; +import {withAmp} from '@ampproject/storybook-addon'; +import {withKnobs} from '@storybook/addon-knobs'; + +export default { + title: 'amp-sidebar-0_1', + decorators: [withKnobs, withAmp], + + parameters: { + extensions: [{name: 'amp-sidebar', version: 0.1}], + }, +}; + +export const BasicSidebar = () => { + /* + * Use the buttons below to open / toggle the amp-sidebar. The sidebar + * will be displayed with various navigational elements. + */ + return ( +
+
+

Basic Sidebar

+ + +
+ +

Sidebar

+
    +
  • Nav Element 1
    • +
  • Nav Element 2
    • +
  • Nav Element 3
    • +
+ + + +
+ ); +}; + +export const Toolbar = () => { + /* + * The toolbar feature allows elements within the amp-sidebar to be + * displayed within the main body of the article. In this example two + * Navigational Elements from the sidebar will be displayed under the + * Toolbar Target when the width of the page is 500px or more. + */ + const minWidth = 500; + const mediaQuery = `(min-width: ${minWidth}px)`; + return ( +
+
+ + +

Toolbar Target

+
+
+ +

Sidebar

+ +
    +
  • Nav Element 3
    • +
  • Nav Element 4
    • +
+ + + +
+ ); +}; \ No newline at end of file diff --git a/extensions/amp-sidebar/1.0/storybook/Basic.amp.js b/extensions/amp-sidebar/1.0/storybook/Basic.amp.js new file mode 100644 index 000000000000..0e59211a143b --- /dev/null +++ b/extensions/amp-sidebar/1.0/storybook/Basic.amp.js @@ -0,0 +1,485 @@ +import * as Preact from '#preact'; +import { + boolean, + color, + number, + select, + text, + withKnobs, +} from '@storybook/addon-knobs'; +import {withAmp} from '@ampproject/storybook-addon'; + +export default { + title: 'amp-sidebar-1_0', + decorators: [withKnobs, withAmp], + + parameters: { + extensions: [{name: 'amp-sidebar', version: '1.0'}], + experiments: ['bento'], + }, +}; + +export const _default = () => { + const sideConfigurations = ['left', 'right', undefined]; + const side = select('side', sideConfigurations, sideConfigurations[0]); + const foregroundColor = color('color'); + const backgroundColor = color('background'); + const backdropColor = color('backdrop color'); + + return ( +
+ + +
+ + Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at + aeque inermis reprehendunt. + +
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+ + + +
+ +
+ + + +
+
+ ); +}; + +export const toolbar = () => { + const sideConfigurations = ['left', 'right', undefined]; + const side = select('side', sideConfigurations, sideConfigurations[0]); + const foregroundColor = color('color'); + const backgroundColor = color('background'); + const backdropColor = color('backdrop color'); + const toolbarMedia = text('toolbar media', '(max-width: 500px)'); + + return ( +
+ + + + Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque + inermis reprehendunt. + +
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+ + + + + +
+ + + +
+
+
+ ); +}; + +export const styles = () => { + const sideConfigurations = ['left', 'right', undefined]; + const side = select('side', sideConfigurations, sideConfigurations[0]); + const foregroundColor = color('color'); + const backgroundColor = color('background'); + const height = text('height', null); + const width = text('width', null); + const padding = text('padding', null); + const border = text('border', null); + const top = text('top', null); + const maxHeight = text('max-height', null); + const maxWidth = text('max-width', null); + const minWidth = text('min-width', null); + const outline = text('outline', null); + const zIndex = number('z-index', 2147483647); + const backdropColor = color('backdrop color'); + + return ( +
+ + +
+ + Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at + aeque inermis reprehendunt. + +
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+ + + +
+ +
+ + + +
+
+ ); +}; + +export const scroll = () => { + const sideConfigurations = ['left', 'right', undefined]; + const side = select('side', sideConfigurations, sideConfigurations[0]); + const foregroundColor = color('color'); + const backgroundColor = color('background'); + const backdropColor = color('backdrop color'); + const moreBackgroundContent = boolean('more background content', false); + const moreSidebarContent = boolean('more sidebar content', false); + + return ( +
+ + +
+ + Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at + aeque inermis reprehendunt. + +
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+ + + + {moreSidebarContent && ( + <> +

+ Dessert tootsie roll marzipan pastry. Powder powder jelly beans + chocolate bar candy sugar plum. Jelly-o gummi bears jelly icing + cotton candy. Toffee carrot cake ice cream sesame snaps sugar + plum gummies. Gummies marshmallow candy chocolate bar ice cream + ice cream gummies chocolate cake. Candy ice cream pie danish ice + cream cake gingerbread. Muffin cookie marzipan marzipan jelly + beans gummies candy muffin dessert. Soufflé chocolate tart + tootsie roll tootsie roll gingerbread icing powder. Dessert + croissant macaroon candy liquorice. Gingerbread gummi bears + croissant wafer cookie cookie bonbon. Marshmallow fruitcake + lollipop sweet roll danish dragée cupcake. Tootsie roll cotton + candy dragée chocolate bar tootsie roll cheesecake cookie + muffin. Toffee sesame snaps gingerbread wafer cotton candy + bonbon gingerbread toffee. +

+ +

+ Danish cupcake chocolate candy chocolate bar. Topping brownie + toffee oat cake liquorice marzipan cheesecake chupa chups. + Pastry carrot cake jelly beans chocolate cake liquorice sesame + snaps caramels. Apple pie marshmallow chupa chups lemon drops + pudding cotton candy pie apple pie oat cake. Sugar plum halvah + cotton candy tiramisu sweet dragée cookie pastry. Macaroon + bonbon jujubes. Halvah tiramisu brownie topping donut cookie + tart. Jelly lemon drops soufflé pie chocolate bar donut tootsie + roll bear claw cake. Chocolate cake powder dessert. Pudding + wafer danish chupa chups donut chocolate sweet carrot cake. + Sugar plum cheesecake brownie chocolate sweet tart marzipan oat + cake dessert. Gummi bears sugar plum bonbon chocolate cake. + Croissant marzipan brownie dessert donut cotton candy croissant + powder. Chocolate cake tootsie roll sweet roll gummi bears donut + fruitcake jelly beans carrot cake. +

+ +

+ Brownie gummies danish lollipop caramels wafer gingerbread + macaroon carrot cake. Brownie powder donut gummi bears pudding + cupcake. Lemon drops croissant apple pie sesame snaps marzipan. + Biscuit chocolate cake jelly-o pie caramels gingerbread caramels + chupa chups donut. Sweet roll oat cake cake. Cheesecake candy + canes candy canes candy canes topping pastry sweet cheesecake. + Jelly-o gummies topping marshmallow dessert tiramisu cake bonbon + chupa chups. Chocolate biscuit danish tart bear claw. Tiramisu + carrot cake jelly-o pie sweet cake. Sesame snaps lollipop cookie + chocolate cake wafer dragée. Powder brownie danish. Pastry + chocolate cake sweet roll halvah cupcake dragée. +

+ +

+ Cake carrot cake icing danish biscuit carrot cake marzipan + croissant. Cake cake gummi bears fruitcake sweet dessert toffee + chocolate cake. Ice cream carrot cake donut jelly beans. Jelly + wafer sugar plum sweet icing candy canes. Bonbon marshmallow + donut pudding jelly-o tiramisu pastry cake bonbon. Jelly candy + canes liquorice cupcake liquorice dessert halvah toffee. Jelly + chocolate macaroon topping cupcake tootsie roll liquorice + brownie lollipop. Chupa chups wafer cupcake candy cookie oat + cake cookie bear claw. Carrot cake pudding biscuit tiramisu ice + cream sugar plum. Topping lemon drops dragée cake liquorice + apple pie ice cream. Cotton candy lollipop lemon drops apple pie + tootsie roll pie marshmallow chocolate jelly-o. Pastry bonbon + cupcake dragée candy. +

+ +

+ Ice cream dragée pudding pastry biscuit tart cookie. Oat cake + ice cream apple pie oat cake dessert soufflé caramels apple pie. + Gummies bear claw powder cake icing jelly beans jelly beans + marzipan lollipop. Lollipop brownie jelly beans pudding. Ice + cream jelly biscuit pie tiramisu tootsie roll gummies biscuit. + Cupcake biscuit biscuit chocolate bar liquorice caramels powder + cotton candy muffin. Sesame snaps tiramisu croissant. Soufflé + chocolate jelly-o topping. Lemon drops candy canes sweet carrot + cake chocolate cake tootsie roll wafer marshmallow. Jelly beans + bear claw jelly-o sesame snaps carrot cake. Pudding jelly candy + carrot cake fruitcake carrot cake candy canes sesame snaps. + Marzipan icing caramels chocolate tart powder cookie halvah. + Fruitcake dragée muffin tart. Jelly-o cupcake marshmallow + pudding gummies muffin topping caramels. +

+ +

+ Liquorice bear claw marshmallow dessert. Bear claw toffee pastry + tiramisu apple pie oat cake. Tiramisu jelly gingerbread cake + cake sweet roll cupcake ice cream jelly. Fruitcake jelly beans + macaroon soufflé jelly beans marzipan caramels candy. Cheesecake + candy canes pudding icing icing. Dragée chocolate bar bear claw + dragée donut brownie cake sweet roll. Wafer bear claw dragée + icing sesame snaps topping. Cake marzipan bear claw dessert bear + claw lollipop halvah wafer halvah. Icing sweet roll toffee sweet + powder sesame snaps gummies tart danish. Ice cream toffee + caramels danish. Jelly-o lollipop lollipop dessert sesame snaps + bear claw gummi bears. Donut sweet roll marzipan fruitcake oat + cake cake icing cotton candy oat cake. Gingerbread carrot cake + sesame snaps gummies candy dragée lollipop soufflé biscuit. + Pudding jujubes chocolate halvah sesame snaps tiramisu sweet + marshmallow chocolate bar. +

+ +

+ Donut carrot cake apple pie powder marshmallow sesame snaps + tiramisu. Sweet roll powder cookie. Lollipop sugar plum oat + cake. Marshmallow wafer danish wafer gingerbread cake muffin + candy dragée. Candy cotton candy topping cake cotton candy + carrot cake fruitcake brownie. Toffee candy candy canes jelly-o + cotton candy gummies. Bonbon bonbon pie sugar plum. Oat cake + sesame snaps pudding candy canes gummi bears macaroon jelly + beans brownie. Sesame snaps halvah halvah jelly-o dessert. + Jelly-o chocolate sweet roll donut candy. Cotton candy halvah + macaroon tiramisu tart. Jelly toffee candy pie toffee. +

+ +

+ Powder chupa chups muffin jelly-o soufflé. Lollipop sweet roll + sweet roll brownie pastry tootsie roll. Topping cheesecake pie + jelly. Donut wafer wafer cake candy canes. Topping chocolate bar + cheesecake topping ice cream tiramisu toffee ice cream. Bonbon + halvah marshmallow. Marzipan topping chupa chups dessert + chocolate chocolate cake gummi bears. Gummi bears caramels sugar + plum. Pie donut jelly beans tiramisu soufflé pie powder. Cupcake + cookie topping. Tootsie roll candy canes jujubes croissant + liquorice ice cream brownie. Topping cookie apple pie gummi + bears bear claw jelly-o brownie tart. Marzipan cotton candy + gummi bears. Dragée ice cream gummi bears jelly-o carrot cake + chocolate bar tiramisu jelly cotton candy. +

+ + )} +
+ +
+ + + +
+ {moreBackgroundContent && ( +
+

+ Dessert tootsie roll marzipan pastry. Powder powder jelly beans + chocolate bar candy sugar plum. Jelly-o gummi bears jelly icing + cotton candy. Toffee carrot cake ice cream sesame snaps sugar plum + gummies. Gummies marshmallow candy chocolate bar ice cream ice cream + gummies chocolate cake. Candy ice cream pie danish ice cream cake + gingerbread. Muffin cookie marzipan marzipan jelly beans gummies + candy muffin dessert. Soufflé chocolate tart tootsie roll tootsie + roll gingerbread icing powder. Dessert croissant macaroon candy + liquorice. Gingerbread gummi bears croissant wafer cookie cookie + bonbon. Marshmallow fruitcake lollipop sweet roll danish dragée + cupcake. Tootsie roll cotton candy dragée chocolate bar tootsie roll + cheesecake cookie muffin. Toffee sesame snaps gingerbread wafer + cotton candy bonbon gingerbread toffee. +

+ +

+ Danish cupcake chocolate candy chocolate bar. Topping brownie toffee + oat cake liquorice marzipan cheesecake chupa chups. Pastry carrot + cake jelly beans chocolate cake liquorice sesame snaps caramels. + Apple pie marshmallow chupa chups lemon drops pudding cotton candy + pie apple pie oat cake. Sugar plum halvah cotton candy tiramisu + sweet dragée cookie pastry. Macaroon bonbon jujubes. Halvah tiramisu + brownie topping donut cookie tart. Jelly lemon drops soufflé pie + chocolate bar donut tootsie roll bear claw cake. Chocolate cake + powder dessert. Pudding wafer danish chupa chups donut chocolate + sweet carrot cake. Sugar plum cheesecake brownie chocolate sweet + tart marzipan oat cake dessert. Gummi bears sugar plum bonbon + chocolate cake. Croissant marzipan brownie dessert donut cotton + candy croissant powder. Chocolate cake tootsie roll sweet roll gummi + bears donut fruitcake jelly beans carrot cake. +

+ +

+ Brownie gummies danish lollipop caramels wafer gingerbread macaroon + carrot cake. Brownie powder donut gummi bears pudding cupcake. Lemon + drops croissant apple pie sesame snaps marzipan. Biscuit chocolate + cake jelly-o pie caramels gingerbread caramels chupa chups donut. + Sweet roll oat cake cake. Cheesecake candy canes candy canes candy + canes topping pastry sweet cheesecake. Jelly-o gummies topping + marshmallow dessert tiramisu cake bonbon chupa chups. Chocolate + biscuit danish tart bear claw. Tiramisu carrot cake jelly-o pie + sweet cake. Sesame snaps lollipop cookie chocolate cake wafer + dragée. Powder brownie danish. Pastry chocolate cake sweet roll + halvah cupcake dragée. +

+ +

+ Cake carrot cake icing danish biscuit carrot cake marzipan + croissant. Cake cake gummi bears fruitcake sweet dessert toffee + chocolate cake. Ice cream carrot cake donut jelly beans. Jelly wafer + sugar plum sweet icing candy canes. Bonbon marshmallow donut pudding + jelly-o tiramisu pastry cake bonbon. Jelly candy canes liquorice + cupcake liquorice dessert halvah toffee. Jelly chocolate macaroon + topping cupcake tootsie roll liquorice brownie lollipop. Chupa chups + wafer cupcake candy cookie oat cake cookie bear claw. Carrot cake + pudding biscuit tiramisu ice cream sugar plum. Topping lemon drops + dragée cake liquorice apple pie ice cream. Cotton candy lollipop + lemon drops apple pie tootsie roll pie marshmallow chocolate + jelly-o. Pastry bonbon cupcake dragée candy. +

+ +

+ Ice cream dragée pudding pastry biscuit tart cookie. Oat cake ice + cream apple pie oat cake dessert soufflé caramels apple pie. Gummies + bear claw powder cake icing jelly beans jelly beans marzipan + lollipop. Lollipop brownie jelly beans pudding. Ice cream jelly + biscuit pie tiramisu tootsie roll gummies biscuit. Cupcake biscuit + biscuit chocolate bar liquorice caramels powder cotton candy muffin. + Sesame snaps tiramisu croissant. Soufflé chocolate jelly-o topping. + Lemon drops candy canes sweet carrot cake chocolate cake tootsie + roll wafer marshmallow. Jelly beans bear claw jelly-o sesame snaps + carrot cake. Pudding jelly candy carrot cake fruitcake carrot cake + candy canes sesame snaps. Marzipan icing caramels chocolate tart + powder cookie halvah. Fruitcake dragée muffin tart. Jelly-o cupcake + marshmallow pudding gummies muffin topping caramels. +

+ +

+ Liquorice bear claw marshmallow dessert. Bear claw toffee pastry + tiramisu apple pie oat cake. Tiramisu jelly gingerbread cake cake + sweet roll cupcake ice cream jelly. Fruitcake jelly beans macaroon + soufflé jelly beans marzipan caramels candy. Cheesecake candy canes + pudding icing icing. Dragée chocolate bar bear claw dragée donut + brownie cake sweet roll. Wafer bear claw dragée icing sesame snaps + topping. Cake marzipan bear claw dessert bear claw lollipop halvah + wafer halvah. Icing sweet roll toffee sweet powder sesame snaps + gummies tart danish. Ice cream toffee caramels danish. Jelly-o + lollipop lollipop dessert sesame snaps bear claw gummi bears. Donut + sweet roll marzipan fruitcake oat cake cake icing cotton candy oat + cake. Gingerbread carrot cake sesame snaps gummies candy dragée + lollipop soufflé biscuit. Pudding jujubes chocolate halvah sesame + snaps tiramisu sweet marshmallow chocolate bar. +

+ +

+ Donut carrot cake apple pie powder marshmallow sesame snaps + tiramisu. Sweet roll powder cookie. Lollipop sugar plum oat cake. + Marshmallow wafer danish wafer gingerbread cake muffin candy dragée. + Candy cotton candy topping cake cotton candy carrot cake fruitcake + brownie. Toffee candy candy canes jelly-o cotton candy gummies. + Bonbon bonbon pie sugar plum. Oat cake sesame snaps pudding candy + canes gummi bears macaroon jelly beans brownie. Sesame snaps halvah + halvah jelly-o dessert. Jelly-o chocolate sweet roll donut candy. + Cotton candy halvah macaroon tiramisu tart. Jelly toffee candy pie + toffee. +

+ +

+ Powder chupa chups muffin jelly-o soufflé. Lollipop sweet roll sweet + roll brownie pastry tootsie roll. Topping cheesecake pie jelly. + Donut wafer wafer cake candy canes. Topping chocolate bar cheesecake + topping ice cream tiramisu toffee ice cream. Bonbon halvah + marshmallow. Marzipan topping chupa chups dessert chocolate + chocolate cake gummi bears. Gummi bears caramels sugar plum. Pie + donut jelly beans tiramisu soufflé pie powder. Cupcake cookie + topping. Tootsie roll candy canes jujubes croissant liquorice ice + cream brownie. Topping cookie apple pie gummi bears bear claw + jelly-o brownie tart. Marzipan cotton candy gummi bears. Dragée ice + cream gummi bears jelly-o carrot cake chocolate bar tiramisu jelly + cotton candy. +

+
+ )} +
+ ); +}; \ No newline at end of file diff --git a/extensions/amp-sidebar/1.0/storybook/Basic.js b/extensions/amp-sidebar/1.0/storybook/Basic.js new file mode 100644 index 000000000000..1d36307d8335 --- /dev/null +++ b/extensions/amp-sidebar/1.0/storybook/Basic.js @@ -0,0 +1,377 @@ +import * as Preact from '#preact'; +import {BentoSidebar, BentoSidebarToolbar} from '../component'; +import {boolean, color, select, text, withKnobs} from '@storybook/addon-knobs'; + +export default { + title: 'Sidebar', + component: BentoSidebar, + decorators: [withKnobs], +}; + +/** + * @param {!Object} props + * @return {*} + */ +function BentoSidebarWithActions(props) { + // TODO(#30447): replace imperative calls with "button" knobs when the + // Storybook 6.1 is released. + const ref = Preact.useRef(); + return ( + <> + +
+ + Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at + aeque inermis reprehendunt. + +
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+ + + + {props.children} +
+ +
+ + + + {props.moreBackgroundContent} +
+ + ); +} + +export const _default = () => { + const sideConfigurations = ['left', 'right', undefined]; + const side = select('side', sideConfigurations, sideConfigurations[0]); + const foregroundColor = color('color'); + const backgroundColor = color('background'); + const backdropColor = color('backdrop color'); + + return ( +
+ +
+ ); +}; + +export const toolbar = () => { + const sideConfigurations = ['left', 'right', undefined]; + const side = select('side', sideConfigurations, sideConfigurations[0]); + const toolbarMedia = text('toolbar media', '(max-width: 500px)'); + const foregroundColor = color('color'); + const backgroundColor = color('background'); + const backdropColor = color('backdrop color'); + + return ( +
+ + +
    +
  • Toolbar Item 1
    • +
  • Toolbar Item 2
    • +
+ + +
+
+ ); +}; + +export const scroll = () => { + const sideConfigurations = ['left', 'right', undefined]; + const side = select('side', sideConfigurations, sideConfigurations[0]); + const foregroundColor = color('color'); + const backgroundColor = color('background'); + const backdropColor = color('backdrop color'); + const moreBackgroundContent = boolean('more background content', false); + const moreBentoSidebarContent = boolean('more sidebar content', false); + + return ( +
+ +

+ Dessert tootsie roll marzipan pastry. Powder powder jelly beans + chocolate bar candy sugar plum. Jelly-o gummi bears jelly icing + cotton candy. Toffee carrot cake ice cream sesame snaps sugar + plum gummies. Gummies marshmallow candy chocolate bar ice cream + ice cream gummies chocolate cake. Candy ice cream pie danish ice + cream cake gingerbread. Muffin cookie marzipan marzipan jelly + beans gummies candy muffin dessert. Soufflé chocolate tart + tootsie roll tootsie roll gingerbread icing powder. Dessert + croissant macaroon candy liquorice. Gingerbread gummi bears + croissant wafer cookie cookie bonbon. Marshmallow fruitcake + lollipop sweet roll danish dragée cupcake. Tootsie roll cotton + candy dragée chocolate bar tootsie roll cheesecake cookie + muffin. Toffee sesame snaps gingerbread wafer cotton candy + bonbon gingerbread toffee. +

+ +

+ Danish cupcake chocolate candy chocolate bar. Topping brownie + toffee oat cake liquorice marzipan cheesecake chupa chups. + Pastry carrot cake jelly beans chocolate cake liquorice sesame + snaps caramels. Apple pie marshmallow chupa chups lemon drops + pudding cotton candy pie apple pie oat cake. Sugar plum halvah + cotton candy tiramisu sweet dragée cookie pastry. Macaroon + bonbon jujubes. Halvah tiramisu brownie topping donut cookie + tart. Jelly lemon drops soufflé pie chocolate bar donut tootsie + roll bear claw cake. Chocolate cake powder dessert. Pudding + wafer danish chupa chups donut chocolate sweet carrot cake. + Sugar plum cheesecake brownie chocolate sweet tart marzipan oat + cake dessert. Gummi bears sugar plum bonbon chocolate cake. + Croissant marzipan brownie dessert donut cotton candy croissant + powder. Chocolate cake tootsie roll sweet roll gummi bears donut + fruitcake jelly beans carrot cake. +

+ +

+ Brownie gummies danish lollipop caramels wafer gingerbread + macaroon carrot cake. Brownie powder donut gummi bears pudding + cupcake. Lemon drops croissant apple pie sesame snaps marzipan. + Biscuit chocolate cake jelly-o pie caramels gingerbread caramels + chupa chups donut. Sweet roll oat cake cake. Cheesecake candy + canes candy canes candy canes topping pastry sweet cheesecake. + Jelly-o gummies topping marshmallow dessert tiramisu cake bonbon + chupa chups. Chocolate biscuit danish tart bear claw. Tiramisu + carrot cake jelly-o pie sweet cake. Sesame snaps lollipop cookie + chocolate cake wafer dragée. Powder brownie danish. Pastry + chocolate cake sweet roll halvah cupcake dragée. +

+ +

+ Cake carrot cake icing danish biscuit carrot cake marzipan + croissant. Cake cake gummi bears fruitcake sweet dessert toffee + chocolate cake. Ice cream carrot cake donut jelly beans. Jelly + wafer sugar plum sweet icing candy canes. Bonbon marshmallow + donut pudding jelly-o tiramisu pastry cake bonbon. Jelly candy + canes liquorice cupcake liquorice dessert halvah toffee. Jelly + chocolate macaroon topping cupcake tootsie roll liquorice + brownie lollipop. Chupa chups wafer cupcake candy cookie oat + cake cookie bear claw. Carrot cake pudding biscuit tiramisu ice + cream sugar plum. Topping lemon drops dragée cake liquorice + apple pie ice cream. Cotton candy lollipop lemon drops apple pie + tootsie roll pie marshmallow chocolate jelly-o. Pastry bonbon + cupcake dragée candy. +

+ +

+ Ice cream dragée pudding pastry biscuit tart cookie. Oat cake + ice cream apple pie oat cake dessert soufflé caramels apple pie. + Gummies bear claw powder cake icing jelly beans jelly beans + marzipan lollipop. Lollipop brownie jelly beans pudding. Ice + cream jelly biscuit pie tiramisu tootsie roll gummies biscuit. + Cupcake biscuit biscuit chocolate bar liquorice caramels powder + cotton candy muffin. Sesame snaps tiramisu croissant. Soufflé + chocolate jelly-o topping. Lemon drops candy canes sweet carrot + cake chocolate cake tootsie roll wafer marshmallow. Jelly beans + bear claw jelly-o sesame snaps carrot cake. Pudding jelly candy + carrot cake fruitcake carrot cake candy canes sesame snaps. + Marzipan icing caramels chocolate tart powder cookie halvah. + Fruitcake dragée muffin tart. Jelly-o cupcake marshmallow + pudding gummies muffin topping caramels. +

+ +

+ Liquorice bear claw marshmallow dessert. Bear claw toffee pastry + tiramisu apple pie oat cake. Tiramisu jelly gingerbread cake + cake sweet roll cupcake ice cream jelly. Fruitcake jelly beans + macaroon soufflé jelly beans marzipan caramels candy. Cheesecake + candy canes pudding icing icing. Dragée chocolate bar bear claw + dragée donut brownie cake sweet roll. Wafer bear claw dragée + icing sesame snaps topping. Cake marzipan bear claw dessert bear + claw lollipop halvah wafer halvah. Icing sweet roll toffee sweet + powder sesame snaps gummies tart danish. Ice cream toffee + caramels danish. Jelly-o lollipop lollipop dessert sesame snaps + bear claw gummi bears. Donut sweet roll marzipan fruitcake oat + cake cake icing cotton candy oat cake. Gingerbread carrot cake + sesame snaps gummies candy dragée lollipop soufflé biscuit. + Pudding jujubes chocolate halvah sesame snaps tiramisu sweet + marshmallow chocolate bar. +

+ +

+ Donut carrot cake apple pie powder marshmallow sesame snaps + tiramisu. Sweet roll powder cookie. Lollipop sugar plum oat + cake. Marshmallow wafer danish wafer gingerbread cake muffin + candy dragée. Candy cotton candy topping cake cotton candy + carrot cake fruitcake brownie. Toffee candy candy canes jelly-o + cotton candy gummies. Bonbon bonbon pie sugar plum. Oat cake + sesame snaps pudding candy canes gummi bears macaroon jelly + beans brownie. Sesame snaps halvah halvah jelly-o dessert. + Jelly-o chocolate sweet roll donut candy. Cotton candy halvah + macaroon tiramisu tart. Jelly toffee candy pie toffee. +

+ +

+ Powder chupa chups muffin jelly-o soufflé. Lollipop sweet roll + sweet roll brownie pastry tootsie roll. Topping cheesecake pie + jelly. Donut wafer wafer cake candy canes. Topping chocolate bar + cheesecake topping ice cream tiramisu toffee ice cream. Bonbon + halvah marshmallow. Marzipan topping chupa chups dessert + chocolate chocolate cake gummi bears. Gummi bears caramels sugar + plum. Pie donut jelly beans tiramisu soufflé pie powder. Cupcake + cookie topping. Tootsie roll candy canes jujubes croissant + liquorice ice cream brownie. Topping cookie apple pie gummi + bears bear claw jelly-o brownie tart. Marzipan cotton candy + gummi bears. Dragée ice cream gummi bears jelly-o carrot cake + chocolate bar tiramisu jelly cotton candy. +

+ + ) + } + > + {moreBentoSidebarContent && ( + <> +

+ Dessert tootsie roll marzipan pastry. Powder powder jelly beans + chocolate bar candy sugar plum. Jelly-o gummi bears jelly icing + cotton candy. Toffee carrot cake ice cream sesame snaps sugar plum + gummies. Gummies marshmallow candy chocolate bar ice cream ice + cream gummies chocolate cake. Candy ice cream pie danish ice cream + cake gingerbread. Muffin cookie marzipan marzipan jelly beans + gummies candy muffin dessert. Soufflé chocolate tart tootsie roll + tootsie roll gingerbread icing powder. Dessert croissant macaroon + candy liquorice. Gingerbread gummi bears croissant wafer cookie + cookie bonbon. Marshmallow fruitcake lollipop sweet roll danish + dragée cupcake. Tootsie roll cotton candy dragée chocolate bar + tootsie roll cheesecake cookie muffin. Toffee sesame snaps + gingerbread wafer cotton candy bonbon gingerbread toffee. +

+ +

+ Danish cupcake chocolate candy chocolate bar. Topping brownie + toffee oat cake liquorice marzipan cheesecake chupa chups. Pastry + carrot cake jelly beans chocolate cake liquorice sesame snaps + caramels. Apple pie marshmallow chupa chups lemon drops pudding + cotton candy pie apple pie oat cake. Sugar plum halvah cotton + candy tiramisu sweet dragée cookie pastry. Macaroon bonbon + jujubes. Halvah tiramisu brownie topping donut cookie tart. Jelly + lemon drops soufflé pie chocolate bar donut tootsie roll bear claw + cake. Chocolate cake powder dessert. Pudding wafer danish chupa + chups donut chocolate sweet carrot cake. Sugar plum cheesecake + brownie chocolate sweet tart marzipan oat cake dessert. Gummi + bears sugar plum bonbon chocolate cake. Croissant marzipan brownie + dessert donut cotton candy croissant powder. Chocolate cake + tootsie roll sweet roll gummi bears donut fruitcake jelly beans + carrot cake. +

+ +

+ Brownie gummies danish lollipop caramels wafer gingerbread + macaroon carrot cake. Brownie powder donut gummi bears pudding + cupcake. Lemon drops croissant apple pie sesame snaps marzipan. + Biscuit chocolate cake jelly-o pie caramels gingerbread caramels + chupa chups donut. Sweet roll oat cake cake. Cheesecake candy + canes candy canes candy canes topping pastry sweet cheesecake. + Jelly-o gummies topping marshmallow dessert tiramisu cake bonbon + chupa chups. Chocolate biscuit danish tart bear claw. Tiramisu + carrot cake jelly-o pie sweet cake. Sesame snaps lollipop cookie + chocolate cake wafer dragée. Powder brownie danish. Pastry + chocolate cake sweet roll halvah cupcake dragée. +

+ +

+ Cake carrot cake icing danish biscuit carrot cake marzipan + croissant. Cake cake gummi bears fruitcake sweet dessert toffee + chocolate cake. Ice cream carrot cake donut jelly beans. Jelly + wafer sugar plum sweet icing candy canes. Bonbon marshmallow donut + pudding jelly-o tiramisu pastry cake bonbon. Jelly candy canes + liquorice cupcake liquorice dessert halvah toffee. Jelly chocolate + macaroon topping cupcake tootsie roll liquorice brownie lollipop. + Chupa chups wafer cupcake candy cookie oat cake cookie bear claw. + Carrot cake pudding biscuit tiramisu ice cream sugar plum. Topping + lemon drops dragée cake liquorice apple pie ice cream. Cotton + candy lollipop lemon drops apple pie tootsie roll pie marshmallow + chocolate jelly-o. Pastry bonbon cupcake dragée candy. +

+ +

+ Ice cream dragée pudding pastry biscuit tart cookie. Oat cake ice + cream apple pie oat cake dessert soufflé caramels apple pie. + Gummies bear claw powder cake icing jelly beans jelly beans + marzipan lollipop. Lollipop brownie jelly beans pudding. Ice cream + jelly biscuit pie tiramisu tootsie roll gummies biscuit. Cupcake + biscuit biscuit chocolate bar liquorice caramels powder cotton + candy muffin. Sesame snaps tiramisu croissant. Soufflé chocolate + jelly-o topping. Lemon drops candy canes sweet carrot cake + chocolate cake tootsie roll wafer marshmallow. Jelly beans bear + claw jelly-o sesame snaps carrot cake. Pudding jelly candy carrot + cake fruitcake carrot cake candy canes sesame snaps. Marzipan + icing caramels chocolate tart powder cookie halvah. Fruitcake + dragée muffin tart. Jelly-o cupcake marshmallow pudding gummies + muffin topping caramels. +

+ +

+ Liquorice bear claw marshmallow dessert. Bear claw toffee pastry + tiramisu apple pie oat cake. Tiramisu jelly gingerbread cake cake + sweet roll cupcake ice cream jelly. Fruitcake jelly beans macaroon + soufflé jelly beans marzipan caramels candy. Cheesecake candy + canes pudding icing icing. Dragée chocolate bar bear claw dragée + donut brownie cake sweet roll. Wafer bear claw dragée icing sesame + snaps topping. Cake marzipan bear claw dessert bear claw lollipop + halvah wafer halvah. Icing sweet roll toffee sweet powder sesame + snaps gummies tart danish. Ice cream toffee caramels danish. + Jelly-o lollipop lollipop dessert sesame snaps bear claw gummi + bears. Donut sweet roll marzipan fruitcake oat cake cake icing + cotton candy oat cake. Gingerbread carrot cake sesame snaps + gummies candy dragée lollipop soufflé biscuit. Pudding jujubes + chocolate halvah sesame snaps tiramisu sweet marshmallow chocolate + bar. +

+ +

+ Donut carrot cake apple pie powder marshmallow sesame snaps + tiramisu. Sweet roll powder cookie. Lollipop sugar plum oat cake. + Marshmallow wafer danish wafer gingerbread cake muffin candy + dragée. Candy cotton candy topping cake cotton candy carrot cake + fruitcake brownie. Toffee candy candy canes jelly-o cotton candy + gummies. Bonbon bonbon pie sugar plum. Oat cake sesame snaps + pudding candy canes gummi bears macaroon jelly beans brownie. + Sesame snaps halvah halvah jelly-o dessert. Jelly-o chocolate + sweet roll donut candy. Cotton candy halvah macaroon tiramisu + tart. Jelly toffee candy pie toffee. +

+ +

+ Powder chupa chups muffin jelly-o soufflé. Lollipop sweet roll + sweet roll brownie pastry tootsie roll. Topping cheesecake pie + jelly. Donut wafer wafer cake candy canes. Topping chocolate bar + cheesecake topping ice cream tiramisu toffee ice cream. Bonbon + halvah marshmallow. Marzipan topping chupa chups dessert chocolate + chocolate cake gummi bears. Gummi bears caramels sugar plum. Pie + donut jelly beans tiramisu soufflé pie powder. Cupcake cookie + topping. Tootsie roll candy canes jujubes croissant liquorice ice + cream brownie. Topping cookie apple pie gummi bears bear claw + jelly-o brownie tart. Marzipan cotton candy gummi bears. Dragée + ice cream gummi bears jelly-o carrot cake chocolate bar tiramisu + jelly cotton candy. +

+ + )} + +
+ ); +}; \ No newline at end of file From 307c2014b738cebe2bd61e31dbec439c4934e5be Mon Sep 17 00:00:00 2001 From: Corey Masanto Date: Wed, 29 Sep 2021 23:35:50 -0400 Subject: [PATCH 11/12] Add newline at end of each storybook file --- extensions/amp-sidebar/0.1/storybook/Basic.amp.js | 2 +- extensions/amp-sidebar/1.0/storybook/Basic.amp.js | 2 +- extensions/amp-sidebar/1.0/storybook/Basic.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/extensions/amp-sidebar/0.1/storybook/Basic.amp.js b/extensions/amp-sidebar/0.1/storybook/Basic.amp.js index 6509fa425154..1a8d36417a16 100644 --- a/extensions/amp-sidebar/0.1/storybook/Basic.amp.js +++ b/extensions/amp-sidebar/0.1/storybook/Basic.amp.js @@ -73,4 +73,4 @@ export const Toolbar = () => { ); -}; \ No newline at end of file +}; diff --git a/extensions/amp-sidebar/1.0/storybook/Basic.amp.js b/extensions/amp-sidebar/1.0/storybook/Basic.amp.js index 0e59211a143b..46f9cc5a98c8 100644 --- a/extensions/amp-sidebar/1.0/storybook/Basic.amp.js +++ b/extensions/amp-sidebar/1.0/storybook/Basic.amp.js @@ -482,4 +482,4 @@ export const scroll = () => { )} ); -}; \ No newline at end of file +}; diff --git a/extensions/amp-sidebar/1.0/storybook/Basic.js b/extensions/amp-sidebar/1.0/storybook/Basic.js index 1d36307d8335..8f0c8174d99c 100644 --- a/extensions/amp-sidebar/1.0/storybook/Basic.js +++ b/extensions/amp-sidebar/1.0/storybook/Basic.js @@ -374,4 +374,4 @@ export const scroll = () => { ); -}; \ No newline at end of file +}; From b7d4a6ff05e0361f37b8df9928e6c3f47f77b572 Mon Sep 17 00:00:00 2001 From: Corey Masanto Date: Wed, 29 Sep 2021 23:52:58 -0400 Subject: [PATCH 12/12] Run amp get-zindex --fix --- css/Z_INDEX.md | 1 - 1 file changed, 1 deletion(-) diff --git a/css/Z_INDEX.md b/css/Z_INDEX.md index 055f9a08d997..d90b4b825355 100644 --- a/css/Z_INDEX.md +++ b/css/Z_INDEX.md @@ -40,7 +40,6 @@ | `.i-amphtml-story-toast` | 100004 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css) | | `amp-story-access` | 100003 | [extensions/amp-story/1.0/amp-story-access.css](/extensions/amp-story/1.0/amp-story-access.css) | | `.i-amphtml-story-share-menu` | 100003 | [extensions/amp-story/1.0/amp-story-share-menu.css](/extensions/amp-story/1.0/amp-story-share-menu.css) | -| `.i-amphtml-story-opacity-mask` | 100003 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css) | | `.i-amphtml-story-has-new-page-notification-container` | 100002 | [extensions/amp-story/1.0/amp-story-system-layer.css](/extensions/amp-story/1.0/amp-story-system-layer.css) | | `amp-story[standalone] .i-amphtml-story-developer-log` | 100002 | [extensions/amp-story/1.0/amp-story.css](/extensions/amp-story/1.0/amp-story.css) | | `.i-amphtml-story-button-container` | 100002 | [extensions/amp-story/1.0/pagination-buttons.css](/extensions/amp-story/1.0/pagination-buttons.css) |