From 8039e4e55a25a5206c0dd08c1f8797e7f2591c9f Mon Sep 17 00:00:00 2001
From: processprocess <philip.hunter.bell@gmail.com>
Date: Mon, 3 May 2021 09:46:04 -0400
Subject: [PATCH 1/3] Validator, component and template.

---
 examples/amp-story/attachment.html            | 32 ++++++-------
 extensions/amp-story/1.0/amp-story-page.js    |  7 +--
 extensions/amp-story/1.0/amp-story.js         |  1 +
 .../amp-story/validator-amp-story.protoascii  | 45 +++++++++++++++++++
 4 files changed, 66 insertions(+), 19 deletions(-)

diff --git a/examples/amp-story/attachment.html b/examples/amp-story/attachment.html
index 39766d1c68d4e..7f6841a4f3852 100644
--- a/examples/amp-story/attachment.html
+++ b/examples/amp-story/attachment.html
@@ -169,11 +169,11 @@
             <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
           </p>
         </amp-story-grid-layer>
-        <amp-story-page-attachment
+        <amp-story-page-outlink
           data-title="Link Description"
           href="https://www.google.com"
           layout="nodisplay">
-        </amp-story-page-attachment>
+        </amp-story-page-outlink>
       </amp-story-page>
 
       <amp-story-page id="outlink-custo-icon-custom-text">
@@ -186,13 +186,13 @@
             <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
           </p>
         </amp-story-grid-layer>
-        <amp-story-page-attachment
+        <amp-story-page-outlink
           data-title="Link Description"
           href="https://www.google.com"
           data-cta-text="Shop at Forbes"
           cta-image="img/logo.jpg"
           layout="nodisplay">
-        </amp-story-page-attachment>
+        </amp-story-page-outlink>
       </amp-story-page>
 
       <amp-story-page id="outlink-no-image">
@@ -205,12 +205,12 @@
             <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
           </p>
         </amp-story-grid-layer>
-        <amp-story-page-attachment
+        <amp-story-page-outlink
           data-title="Link Description"
           href="https://www.google.com"
           cta-image="none"
           layout="nodisplay">
-        </amp-story-page-attachment>
+        </amp-story-page-outlink>
       </amp-story-page>
 
       <amp-story-page id="outlink-dark-theme">
@@ -223,12 +223,12 @@
             <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
           </p>
         </amp-story-grid-layer>
-        <amp-story-page-attachment
+        <amp-story-page-outlink
           data-title="Link Description"
           href="https://www.google.com"
           theme="dark"
           layout="nodisplay">
-        </amp-story-page-attachment>
+        </amp-story-page-outlink>
       </amp-story-page>
 
       <amp-story-page id="outlink-custom-background-color-pink">
@@ -241,14 +241,14 @@
             <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
           </p>
         </amp-story-grid-layer>
-        <amp-story-page-attachment
+        <amp-story-page-outlink
           data-title="Link Description"
           href="https://www.google.com"
           theme="custom"
           cta-accent-color="pink"
           cta-accent-element="background"
           layout="nodisplay">
-        </amp-story-page-attachment>
+        </amp-story-page-outlink>
       </amp-story-page>
 
       <amp-story-page id="outlink-custom-text-color-pink">
@@ -261,14 +261,14 @@
             <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
           </p>
         </amp-story-grid-layer>
-        <amp-story-page-attachment
+        <amp-story-page-outlink
           data-title="Link Description"
           href="https://www.google.com"
           theme="custom"
           cta-accent-color="pink"
           cta-accent-element="text"
           layout="nodisplay">
-        </amp-story-page-attachment>
+        </amp-story-page-outlink>
       </amp-story-page>
 
       <amp-story-page id="outlink-custom-background-color-navy">
@@ -281,14 +281,14 @@
             <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
           </p>
         </amp-story-grid-layer>
-        <amp-story-page-attachment
+        <aamp-story-page-outlink
           data-title="Link Description"
           href="https://www.google.com"
           theme="custom"
           cta-accent-color="navy"
           cta-accent-element="background"
           layout="nodisplay">
-        </amp-story-page-attachment>
+        </aamp-story-page-outlink>
       </amp-story-page>
 
       <amp-story-page id="outlink-custom-text-color-navy">
@@ -301,14 +301,14 @@
             <span data-text-background-color="#00A3AB">Enable experiment by pasting AMP.toggleExperiment('amp-story-page-attachment-ui-v2', true) in console and refreshing.</span>
           </p>
         </amp-story-grid-layer>
-        <amp-story-page-attachment
+        <amp-story-page-outlink
           data-title="Link Description"
           href="https://www.google.com/search?q=why+do+cats+purr+so+loud"
           theme="custom"
           cta-accent-color="navy"
           cta-accent-element="text"
           layout="nodisplay">
-        </amp-story-page-attachment>
+        </amp-story-page-outlink>
       </amp-story-page>
 
       <amp-story-page id="last-page-no-cta">
diff --git a/extensions/amp-story/1.0/amp-story-page.js b/extensions/amp-story/1.0/amp-story-page.js
index c4134eb8a9d52..aa33e337c9ad1 100644
--- a/extensions/amp-story/1.0/amp-story-page.js
+++ b/extensions/amp-story/1.0/amp-story-page.js
@@ -1737,9 +1737,10 @@ export class AmpStoryPage extends AMP.BaseElement {
    * @private
    */
   renderOpenAttachmentUI_() {
-    const attachmentEl = this.element.querySelector(
-      'amp-story-page-attachment'
-    );
+    // AttachmentEl can be either amp-story-page-attachment or amp-story-page-outlink
+    const attachmentEl = this.element.querySelectorAll(
+      'amp-story-page-attachment, amp-story-page-outlink'
+    )[0];
     if (!attachmentEl) {
       return;
     }
diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js
index afd0104dfbab4..14fa3abe5a83b 100644
--- a/extensions/amp-story/1.0/amp-story.js
+++ b/extensions/amp-story/1.0/amp-story.js
@@ -2985,5 +2985,6 @@ AMP.extension('amp-story', '1.0', (AMP) => {
   AMP.registerElement('amp-story-grid-layer', AmpStoryGridLayer);
   AMP.registerElement('amp-story-page', AmpStoryPage);
   AMP.registerElement('amp-story-page-attachment', AmpStoryPageAttachment);
+  AMP.registerElement('amp-story-page-outlink', AmpStoryPageAttachment);
   AMP.registerServiceForDoc('amp-story-render', AmpStoryRenderService);
 });
diff --git a/extensions/amp-story/validator-amp-story.protoascii b/extensions/amp-story/validator-amp-story.protoascii
index c5e96bc68ace4..bb162e011ec45 100644
--- a/extensions/amp-story/validator-amp-story.protoascii
+++ b/extensions/amp-story/validator-amp-story.protoascii
@@ -921,6 +921,51 @@ tags: {  # <amp-story-page-attachment> with no href
     value: "light"
   }
 }
+tags: {  # Same code as `<amp-story-page-attachment> with href`
+  html_format: AMP
+  tag_name: "AMP-STORY-PAGE-OUTLINK"
+  spec_name: "amp-story-page-outlink"
+  mandatory_ancestor: "AMP-STORY-PAGE"
+  mandatory_last_child: true
+  attrs: {
+    name: "layout"
+    mandatory: true
+    value: "nodisplay"
+  }
+  attrs: {
+    name: "theme"
+    value: "custom"
+    value: "dark"
+    value: "light"
+  }
+  attrs: {
+    name: "cta-accent-color"
+  }
+  attrs: {
+    name: "cta-accent-element"
+    value: "background"
+    value: "text"
+  }
+  attrs: {
+    name: "href"
+    mandatory: true
+    value_url: {
+      protocol: "http"
+      protocol: "https"
+    }
+  }
+  attrs: {
+    name: "cta-image"
+    value_url: {
+      # protocol: "http"  # TODO(honeybaderdontcare): readd once transformers in prod
+      protocol: "https"
+      allow_relative: false  # TODO(honeybaderdontcare): remove once transformers in prod
+    }
+  }
+  child_tags: {
+    mandatory_num_child_tags: 0
+  }
+}
 tags: {  # <amp-story-animation> <script>
   html_format: AMP
   tag_name: "SCRIPT"

From cd961d7aa4fb136cc35b93a4523c38f8a35ce0fe Mon Sep 17 00:00:00 2001
From: processprocess <philip.hunter.bell@gmail.com>
Date: Mon, 3 May 2021 09:55:06 -0400
Subject: [PATCH 2/3] Advancement, test and comment.

---
 extensions/amp-story/1.0/amp-story.js             |  2 +-
 extensions/amp-story/1.0/page-advancement.js      | 10 +++++++---
 .../amp-story/1.0/test/test-amp-story-page.js     | 15 +++++++++++++++
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js
index 14fa3abe5a83b..e0b156deb1282 100644
--- a/extensions/amp-story/1.0/amp-story.js
+++ b/extensions/amp-story/1.0/amp-story.js
@@ -2985,6 +2985,6 @@ AMP.extension('amp-story', '1.0', (AMP) => {
   AMP.registerElement('amp-story-grid-layer', AmpStoryGridLayer);
   AMP.registerElement('amp-story-page', AmpStoryPage);
   AMP.registerElement('amp-story-page-attachment', AmpStoryPageAttachment);
-  AMP.registerElement('amp-story-page-outlink', AmpStoryPageAttachment);
+  AMP.registerElement('amp-story-page-outlink', AmpStoryPageAttachment); // Shares codepath with amp-story-page-attachment.
   AMP.registerServiceForDoc('amp-story-render', AmpStoryRenderService);
 });
diff --git a/extensions/amp-story/1.0/page-advancement.js b/extensions/amp-story/1.0/page-advancement.js
index 59bea3eeffa14..1f541af1ffc6d 100644
--- a/extensions/amp-story/1.0/page-advancement.js
+++ b/extensions/amp-story/1.0/page-advancement.js
@@ -474,7 +474,10 @@ export class ManualAdvancement extends AdvancementConfig {
       (el) => {
         tagName = el.tagName.toLowerCase();
 
-        if (tagName === 'amp-story-page-attachment') {
+        if (
+          tagName === 'amp-story-page-attachment' ||
+          tagName === 'amp-story-page-outlink'
+        ) {
           shouldHandleEvent = false;
           return true;
         }
@@ -502,7 +505,7 @@ export class ManualAdvancement extends AdvancementConfig {
 
   /**
    * For an element to trigger a tooltip it has to be descendant of
-   * amp-story-page but not of amp-story-cta-layer or amp-story-page-attachment.
+   * amp-story-page but not of amp-story-cta-layer, amp-story-page-attachment or amp-story-page-outlink.
    * @param {!Event} event
    * @param {!ClientRect} pageRect
    * @return {boolean}
@@ -542,7 +545,8 @@ export class ManualAdvancement extends AdvancementConfig {
 
         if (
           tagName === 'amp-story-cta-layer' ||
-          tagName === 'amp-story-page-attachment'
+          tagName === 'amp-story-page-attachment' ||
+          tagName === 'amp-story-page-outlink'
         ) {
           valid = false;
           return false;
diff --git a/extensions/amp-story/1.0/test/test-amp-story-page.js b/extensions/amp-story/1.0/test/test-amp-story-page.js
index 352385c20ff4e..d270c2c0d5104 100644
--- a/extensions/amp-story/1.0/test/test-amp-story-page.js
+++ b/extensions/amp-story/1.0/test/test-amp-story-page.js
@@ -693,6 +693,21 @@ describes.realWin('amp-story-page', {amp: {extensions}}, (env) => {
     expect(openAttachmentEl.getAttribute('target')).to.eql('_top');
   });
 
+  it('should build the open outlink UI with same codepath as page attachment', async () => {
+    const outlinkEl = win.document.createElement('amp-story-page-outlink');
+    outlinkEl.setAttribute('layout', 'nodisplay');
+    element.appendChild(outlinkEl);
+
+    page.buildCallback();
+    await page.layoutCallback();
+    page.setState(PageState.PLAYING);
+
+    const openoutlinkEl = element.querySelector(
+      '.i-amphtml-story-page-open-attachment'
+    );
+    expect(openoutlinkEl).to.exist;
+  });
+
   it('should build the inline page attachment UI with one image', async () => {
     toggleExperiment(win, 'amp-story-page-attachment-ui-v2', true);
 

From 65930b9942590182f68c4a26e1d06f4e144c769a Mon Sep 17 00:00:00 2001
From: processprocess <philip.hunter.bell@gmail.com>
Date: Mon, 3 May 2021 13:03:56 -0400
Subject: [PATCH 3/3] querySelector

---
 extensions/amp-story/1.0/amp-story-page.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/extensions/amp-story/1.0/amp-story-page.js b/extensions/amp-story/1.0/amp-story-page.js
index aa33e337c9ad1..4c7a3a1fb8176 100644
--- a/extensions/amp-story/1.0/amp-story-page.js
+++ b/extensions/amp-story/1.0/amp-story-page.js
@@ -1738,9 +1738,9 @@ export class AmpStoryPage extends AMP.BaseElement {
    */
   renderOpenAttachmentUI_() {
     // AttachmentEl can be either amp-story-page-attachment or amp-story-page-outlink
-    const attachmentEl = this.element.querySelectorAll(
+    const attachmentEl = this.element.querySelector(
       'amp-story-page-attachment, amp-story-page-outlink'
-    )[0];
+    );
     if (!attachmentEl) {
       return;
     }