✨ 📖 [AMP Story Audio Sticker] Documentation and validator tests #39184
Conversation
… story and hide the element
….css Co-authored-by: Matias Szylkowski <mszylkowski@google.com>
…n to get default sticker
extensions/amp-story-audio-sticker/validator-amp-story-audio-sticker.protoascii
Outdated
Show resolved
Hide resolved
|
@erwinmombay @mszylkowski when do you expect the widget to be compliant ? |
| } | ||
| attrs: { | ||
| name: "sticker" | ||
| value: "cat-sticker" |
There was a problem hiding this comment.
This value looks like it duplicates the "sticker" naming twice, in the attr and value. Should this be just "cat"? The other values don't say sticker at the end
There was a problem hiding this comment.
I dig a bit deeper into the UX mock. You are right the real name is headphone-cat : ) Apologies to the cat 🐱
| # Allowlisting as many components as possible, unless they could result in a | ||
| # bad UX. | ||
| name: "amp-story-audio-sticker-allowed-descendants" | ||
| tag: "A" |
There was a problem hiding this comment.
This list is way too permissive. We should only allow amp-img, anything else?
I'm worried if people add links or interactive components here, as the behavior is not desired.
There was a problem hiding this comment.
Sure we can make it less permissive. Let's also add div and span for CSS-only implementation(no extra network requests) of the sticker. Anything you want to add from that perspective?
extensions/amp-story-audio-sticker/0.1/test/validator-amp-story-audio-sticker.out
Show resolved
Hide resolved
|
@ychsieh Curious, when is the validator going to be updated accordingly? I don't see this yet at https://cdn.ampproject.org/v0/validator.json |
|
It's in progress and will be out in this or next week. |
|
@ychsieh Another question, as we're now looking into adding support for this to the Google Web Stories WordPress editor. What's the reason |
…roject#39184) * Audio sticker skeleton code: clicking on the element would unmute the story and hide the element * Remove validator test and spaces in css file * Add dependency * Update z-index * Update extensions/amp-story-audio-sticker/0.1/amp-story-audio-sticker.css Co-authored-by: Matias Szylkowski <mszylkowski@google.com> * Cleaning up extension and css code * fix * Remove unnecessary CSS and update the example. * Fix z-index * Remove validator * Add the sticker container and tap hint * Fix whitespace * lint * String concat in jsx * Default stickers and switching between different states * Remove duplicate buildCallback * Use CSS to execute animation delay instead. Have a new helper function to get default sticker * Change default size to small * Fix lint * Fix unit test * refactors * Move amp-img src setting to buildcallback * Fixes * Fix * Update extensions/amp-story-audio-sticker/0.1/amp-story-audio-sticker.js Co-authored-by: Matias Szylkowski <mszylkowski@google.com> * lint * Add animation and styles to sticker * Rename css variable * Replace borders with box-shadow. Use sticker-style instead. Replace mouse and touch events with platform-agnostic events: pointerdown and pointerup * Fix unit test and merge with main. * Replace unnecessary classes and event listeners with CSS selectors. Remove RGB color checks. * Allow developers to set the CSS variables directly, instead of taking it as element attributes and do the checks * Replace box-shadow with filter drop-shadow This is to create a dropshadow that conforms to the shape. * Ensure transitions work on both scaling down and up. * minor fixes * Make color variables global. Combine two animations into one. * Remove comment * Use inset: 0 instead. * Highlight mute button only when the sticker is clicked * unit test * Get system UI in the click handler instead of layout callback to prevent system UI from not built yet. Remove SYSTEM_UI_IS_BUILT state from store service * Trivial simplification * Update extensions/amp-story/1.0/amp-story-system-layer.css Co-authored-by: Matias Szylkowski <mszylkowski@google.com> * Update extensions/amp-story-audio-sticker/0.1/amp-story-audio-sticker.js Co-authored-by: Matias Szylkowski <mszylkowski@google.com> * Fix lint * Sticker documentation and validator * Try validator * Update with validator-generated .out file. * Manually fix validator * Simplify validators Show premade effects as tables in documentation * Remove player tags * Fix validator rules * Change sticker name and disallow most child tags * Fix unit test * Add validator test case for not in grid layer --------- Co-authored-by: Matias Szylkowski <mszylkowski@google.com>
No description provided.