ampproject · ychsieh · Aug 1, 2023 · Mar 17, 2023 · Mar 17, 2023 · Mar 17, 2023
diff --git a/examples/amp-story/amp-story-audio-sticker.html b/examples/amp-story/amp-story-audio-sticker.html
@@ -7,7 +7,6 @@
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <title>Key Highlights of AMP Conf 2018</title>
 
-  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
   <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
   <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
   <script async custom-element="amp-story-audio-sticker" src="https://cdn.ampproject.org/v0/amp-story-audio-sticker-0.1.js"></script>
@@ -127,7 +126,7 @@
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
           <amp-story-audio-sticker sticker="audio-cloud"></amp-story-audio-sticker>
         </amp-story-grid-layer>>
       </amp-story-page>
@@ -147,7 +146,7 @@ <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
           <amp-story-audio-sticker size="large" sticker="cat-sticker"></amp-story-audio-sticker>
         </amp-story-grid-layer>>
       </amp-story-page>
@@ -167,9 +166,9 @@ <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
           <amp-story-audio-sticker sticker="loud-speaker"></amp-story-audio-sticker>
-        </amp-story-grid-layer>>
+        </amp-story-grid-layer>
       </amp-story-page>
 
       <amp-story-page id="page-4" title="Lorem ipsum dolor sit amet">
@@ -187,9 +186,9 @@ <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
           <amp-story-audio-sticker size="large" sticker="tape-player"></amp-story-audio-sticker>
-        </amp-story-grid-layer>>
+        </amp-story-grid-layer>
       </amp-story-page>
 
       <amp-story-page id="page-5" title="Lorem ipsum dolor sit amet">
@@ -207,7 +206,7 @@ <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
           <amp-story-audio-sticker sticker-style="outline">
             <amp-story-audio-sticker-pretap>
               <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
@@ -234,7 +233,7 @@ <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <h1 class="bold">Key Highlights of AMP Conf 2018</h1>
           <p class="byline">By The AMP team</p>
         </amp-story-grid-layer>
-        <amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
           <amp-story-audio-sticker size="large" sticker-style="dropshadow">
             <amp-story-audio-sticker-pretap>
               <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>

diff --git a/extensions/amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker.html b/extensions/amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html ⚡ lang="en">
+<head>
+  <meta charset="utf-8">
+  <link rel="canonical" href="ampconf.html">
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <title>Key Highlights of AMP Conf 2018</title>
+
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+  <script async custom-element="amp-story-audio-sticker" src="https://cdn.ampproject.org/v0/amp-story-audio-sticker-0.1.js"></script>
+
+  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+</head>
+  <body>
+    <amp-story standalone id="cats"
+        title="Key Highlights of AMP Conf 2018" publisher="The AMP team"
+        publisher-logo-src="./img/amplogo.png"
+        poster-portrait-src="./img/overview.jpg">
+
+      <amp-story-page id="page-1" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker sticker="audio-cloud"></amp-story-audio-sticker>
+        </amp-story-grid-layer>>
+      </amp-story-page>
+
+      <amp-story-page id="page-2" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker size="large" sticker="cat-sticker"></amp-story-audio-sticker>
+        </amp-story-grid-layer>>
+      </amp-story-page>
+
+      <amp-story-page id="page-3" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker sticker="loud-speaker"></amp-story-audio-sticker>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-4" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker size="large" sticker="tape-player"></amp-story-audio-sticker>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-5" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker sticker-style="outline">
+            <amp-story-audio-sticker-pretap>
+              <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+            </amp-story-audio-sticker-pretap>
+            <amp-story-audio-sticker-posttap>
+              <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+            </amp-story-audio-sticker-posttap>
+          </amp-story-audio-sticker>
+        </amp-story-grid-layer>
+      </amp-story-page>
+
+      <amp-story-page id="page-6" title="Lorem ipsum dolor sit amet">
+        <amp-story-grid-layer template="vertical">
+          <amp-story-audio-sticker size="large" sticker-style="dropshadow">
+            <amp-story-audio-sticker-pretap>
+              <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+            </amp-story-audio-sticker-pretap>
+            <amp-story-audio-sticker-posttap>
+              <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+            </amp-story-audio-sticker-posttap>
+          </amp-story-audio-sticker>
+        </amp-story-grid-layer>
+      </amp-story-page>
+    </amp-story>
+  </body>
+</html>
diff --git a/extensions/amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker.out b/extensions/amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker.out
@@ -0,0 +1,74 @@
+PASS
+|  <!doctype html>
+|  <html ⚡ lang="en">
+|  <head>
+|    <meta charset="utf-8">
+|    <link rel="canonical" href="ampconf.html">
+|    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+|    <script async src="https://cdn.ampproject.org/v0.js"></script>
+|    <title>Key Highlights of AMP Conf 2018</title>
+|
+|    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+|    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+|    <script async custom-element="amp-story-audio-sticker" src="https://cdn.ampproject.org/v0/amp-story-audio-sticker-0.1.js"></script>
+|
+|    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
+|  </head>
+|    <body>
+|      <amp-story standalone id="cats"
+|          title="Key Highlights of AMP Conf 2018" publisher="The AMP team"
+|          publisher-logo-src="./img/amplogo.png"
+|          poster-portrait-src="./img/overview.jpg">
+|
+|        <amp-story-page id="page-1" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker sticker="audio-cloud"></amp-story-audio-sticker>
+|          </amp-story-grid-layer>>
+|        </amp-story-page>
+|
+|        <amp-story-page id="page-2" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker size="large" sticker="cat-sticker"></amp-story-audio-sticker>
+|          </amp-story-grid-layer>>
+|        </amp-story-page>
+|
+|        <amp-story-page id="page-3" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker sticker="loud-speaker"></amp-story-audio-sticker>
+|          </amp-story-grid-layer>
+|        </amp-story-page>
+|
+|        <amp-story-page id="page-4" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker size="large" sticker="tape-player"></amp-story-audio-sticker>
+|          </amp-story-grid-layer>
+|        </amp-story-page>
+|
+|        <amp-story-page id="page-5" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker sticker-style="outline">
+|              <amp-story-audio-sticker-pretap>
+|                <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+|              </amp-story-audio-sticker-pretap>
+|              <amp-story-audio-sticker-posttap>
+|                <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+|              </amp-story-audio-sticker-posttap>
+|            </amp-story-audio-sticker>
+|          </amp-story-grid-layer>
+|        </amp-story-page>
+|
+|        <amp-story-page id="page-6" title="Lorem ipsum dolor sit amet">
+|          <amp-story-grid-layer template="vertical">
+|            <amp-story-audio-sticker size="large" sticker-style="dropshadow">
+|              <amp-story-audio-sticker-pretap>
+|                <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+|              </amp-story-audio-sticker-pretap>
+|              <amp-story-audio-sticker-posttap>
+|                <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+|              </amp-story-audio-sticker-posttap>
+|            </amp-story-audio-sticker>
+|          </amp-story-grid-layer>
+|        </amp-story-page>
+|      </amp-story>
+|    </body>
+|  </html>
diff --git a/extensions/amp-story-audio-sticker/amp-story-audio-sticker.md b/extensions/amp-story-audio-sticker/amp-story-audio-sticker.md
@@ -4,8 +4,112 @@ formats:
   - stories
 teaser:
   text: A sticker for users to click and unmute the story. 
+tags:
+  - audio
+  - sticker
+author: ychsieh
+$title: amp-story-audio-sticker
+version: '0.1'
+versions:
+  - '0.1'
+latest_version: '0.1'
+$path: /documentation/components/amp-story-audio-sticker.html
+$scripts:
+  - >-
+    <script async custom-element="amp-story" 
+    src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+    <script async custom-element="amp-story-audio-sticker" src="https://cdn.ampproject.org/v0/amp-story-audio-sticker-0.1.js"></script>
 ---
 
+# amp-story-audio-sticker
+
+<amp-video autoplay loop
+            width="400"
+            height="750"
+            layout="fill">
+
+<source src="https://github-production-user-asset-6210df.s3.amazonaws.com/1697814/245924556-e953c54a-0a09-4f15-8134-be6a0ac758ab.mp4" type="video/mp4">
+</amp-video>
+
 # Summary
 
 An audio sticker component for publishers to put anywhere on their story for users to click to unmute the story.
+
+Developers can choose to either choose one of the 4 default stickers or provide custom stickers. The sticker should be put inside an `<amp-story-grid-layer>`.
+
+# Attributes
+
+### `size` {string} optional
+
+Size of the sticker. Accepted values:
+
+-   “large”: 180 x 180 px
+-   “small”: 120 x 120 px
+
+Default value: “small”, which would be used if the input value is invalid or is not provided.
+
+### `sticker` {string} optional
+
+Default value: “cat-sticker”, which would be used if the input value is invalid or is not provided.
+
+A list of premade stickers to use:
+
+| Accepted Value | Pre-tap Image                                                                                   | Post-tap Image                                                                                    |
+| -------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| “cat-sticker”  | ![Cat Pre-tap](https://www.gstatic.com/amphtml/stamp/audio-sticker/cat-sticker-pretap.png)      | ![Cat Post-tap](https://www.gstatic.com/amphtml/stamp/audio-sticker/cat-sticker-posttap.gif)      |
+| “tape-player”  | ![Player Pre-tap](https://www.gstatic.com/amphtml/stamp/audio-sticker/tape-player-pretap.png)   | ![Player Post-tap](https://www.gstatic.com/amphtml/stamp/audio-sticker/tape-player-posttap.gif)   |
+| “loud-speaker” | ![Speaker Pre-tap](https://www.gstatic.com/amphtml/stamp/audio-sticker/loud-speaker-pretap.png) | ![Speaker Post-tap](https://www.gstatic.com/amphtml/stamp/audio-sticker/loud-speaker-posttap.png) |
+| “audio-cloud”  | ![Cloud Pre-tap](https://www.gstatic.com/amphtml/stamp/audio-sticker/audio-cloud-pretap.png)    | ![Cloud Post-tap](https://www.gstatic.com/amphtml/stamp/audio-sticker/audio-cloud-posttap.png)    |
+
+### `sticker-style` {string} optional
+
+Default value: none
+
+Extra premade styles of the sticker to use:
+
+| Accepted Value | Description                                                             | Header 3                                                                                              |
+| -------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| “outline”      | Adds a border around the provided sticker image.                        | ![Image 2](https://github.com/ampproject/amphtml/assets/1697814/c7996424-c810-40d3-a28f-09e7c76742d1) |
+| “dropshadow”   | Adds a dropshadow around the opaque part of the provided sticker image. | ![Image 4](https://github.com/ampproject/amphtml/assets/1697814/2f5b6c5d-ea86-4345-80b8-3b2c20c92e58) |
+
+#### Customize Sticker Style via CSS Variables
+
+-   `--story-audio-sticker-outline-color`: Color of the sticker outline.
+-   `--story-audio-sticker-dropshadow-color`: Color of the sticker drop shadow.
+
+If the CSS variables are set on story level, the color would be applied to all stickers in the story. If the CSS variables are set on story page or sticker level, it would only be applied to the sticker on specific story page or the specific sticker.
+
+If not set, the color of either style would be white.
+
+# Children Nodes
+
+### `<amp-story-audio-sticker-pretap>` optional
+
+Sticker shown before a user tap. Takes any html code that can be rendered as a sticker, e.g. `<amp-img>`, `<svg>`, general elements with CSS animation, etc.
+
+### `<amp-story-audio-sticker-posttap>` optional
+
+Sticker shown after a user tap. Takes any html code that can be rendered as a sticker, e.g. `<amp-img>`, `<svg>`, general elements with CSS animation, etc.
+
+# Example: Premade Stickers
+
+```html
+<amp-story-grid-layer>
+  <amp-story-audio-sticker size="large" sticker="tape-player"></amp-story-audio-sticker>
+</amp-story-grid-layer>
+```
+
+# Example: Custom Stickers
+
+```html
+<amp-story-grid-layer>
+  <amp-story-audio-sticker size="large" sticker-style="dropshadow">
+    <amp-story-audio-sticker-pretap>
+      <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+    </amp-story-audio-sticker-pretap>
+    <amp-story-audio-sticker-posttap>
+      <amp-img width="100" height="100" layout="responsive" src="https://d1k5j68ob7clqb.cloudfront.net/thumb/480/processed/thumb/5zK5d91jK0gLkv1AMa.png"></amp-img>
+    </amp-story-audio-sticker-posttap>
+  </amp-story-audio-sticker>
+</amp-story-grid-layer>
+```