📔 Bento: split code samples into static and dynamic version (#37046)

This is to keep the first example simple.
ampproject · Nov 24, 2021 · 31cf6fd · 31cf6fd
1 parent bc73ec3
commit 31cf6fd
Show file tree

Hide file tree

Showing 18 changed files with 847 additions and 197 deletions.
diff --git a/...tensions/amp-__component_name_hyphenated__/amp-__component_name_hyphenated__.md b/...tensions/amp-__component_name_hyphenated__/amp-__component_name_hyphenated__.md
@@ -92,7 +92,7 @@ The example below demonstrates `amp-__component_name_hyphenated__` component in
 
 #### Interactivity and API usage
 
-Bento enabled components in standalone use are highly interactive through their API. In Bento standalone use, the element's API replaces AMP Actions and events and [`amp-bind`](https://amp.dev/documentation/components/amp-bind/?format=websites).
+Bento components are highly interactive through their API. In Bento standalone use, the element's API replaces AMP Actions and events and [`amp-bind`](https://amp.dev/documentation/components/amp-bind/?format=websites).
 
 The `amp-__component_name_hyphenated__` component API is accessible by including the following script tag in your document:
 

diff --git a/extensions/amp-accordion/1.0/README.md b/extensions/amp-accordion/1.0/README.md
@@ -39,6 +39,65 @@ defineBentoAccordion();
 
 <!--% example %-->
 
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/bento.mjs"
+    ></script>
+    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/v0/bento-accordion-1.0.mjs"
+    ></script>
+    <script
+      nomodule
+      async
+      src="https://cdn.ampproject.org/v0/bento-accordion-1.0.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.ampproject.org/v0/bento-accordion-1.0.css"
+    />
+  </head>
+  <body>
+    <bento-accordion id="my-accordion">
+      <section>
+        <h2>Section 1</h2>
+        <div>Content in section 1.</div>
+      </section>
+      <section>
+        <h2>Section 2</h2>
+        <div>Content in section 2.</div>
+      </section>
+       <!-- Expanded on page load due to attribute: -->
+      <section expanded>
+        <h2>Section 3</h2>
+        <div>Content in section 3.</div>
+      </section>
+    </bento-accordion>
+  </body>
+</html>
+```
+
+### Interactivity and API usage
+
+Bento components are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:
+
+```javascript
+await customElements.whenDefined('bento-accordion');
+const api = await accordion.getApi();
+```
+
+#### API Example
+
+<!--% example %-->
+
 ```html
 <!DOCTYPE html>
 <html>
@@ -97,15 +156,6 @@ defineBentoAccordion();
 </html>
 ```
 
-### Interactivity and API usage
-
-Bento enabled components in standalone use are highly interactive through their API. The `bento-accordion` component API is accessible by including the following script tag in your document:
-
-```javascript
-await customElements.whenDefined('bento-accordion');
-const api = await accordion.getApi();
-```
-
 #### Actions
 
 ##### toggle()

diff --git a/extensions/amp-base-carousel/1.0/README.md b/extensions/amp-base-carousel/1.0/README.md
@@ -31,6 +31,63 @@ defineBentoBaseCarousel();
 
 <!--% example %-->
 
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/bento.mjs"
+    ></script>
+    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.css"
+    />
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.mjs"
+    ></script>
+    <script
+      nomodule
+      async
+      src="https://cdn.ampproject.org/v0/bento-base-carousel-1.0.js"
+    ></script>
+    <style>
+      bento-base-carousel,
+      bento-base-carousel > div {
+        aspect-ratio: 4/1;
+      }
+      .red {
+        background: darkred;
+      }
+      .blue {
+        background: steelblue;
+      }
+      .green {
+        background: seagreen;
+      }
+    </style>
+  </head>
+  <body>
+    <bento-base-carousel id="my-carousel">
+      <div class="red"></div>
+      <div class="blue"></div>
+      <div class="green"></div>
+    </bento-base-carousel>
+  </body>
+</html>
+```
+
+### Interactivity and API usage
+
+Bento components are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:
+
+<!--% example %-->
+
 ```html
 <!DOCTYPE html>
 <html>
@@ -104,10 +161,6 @@ defineBentoBaseCarousel();
 </html>
 ```
 
-### Interactivity and API usage
-
-Bento enabled components used as a standalone web component are highly interactive through their API. The `bento-base-carousel` component API is accessible by including the following script tag in your document:
-
 ```javascript
 await customElements.whenDefined('bento-base-carousel');
 const api = await carousel.getApi();

diff --git a/extensions/amp-embedly-card/1.0/README.md b/extensions/amp-embedly-card/1.0/README.md
@@ -83,25 +83,6 @@ defineBentoEmbedlyCard();
       data-url="https://www.youtube.com/watch?v=LZcKdHinUhE"
     >
     </bento-embedly-card>
-
-    <div class="buttons" style="margin-top: 8px">
-      <button id="change-url">Change embed</button>
-    </div>
-
-    <script>
-      (async () => {
-        const embedlyCard = document.querySelector('#my-url');
-        await customElements.whenDefined('bento-embedly-card');
-
-        // set up button actions
-        document.querySelector('#change-url').onclick = () => {
-          embedlyCard.setAttribute(
-            'data-url',
-            'https://www.youtube.com/watch?v=wcJSHR0US80'
-          );
-        };
-      })();
-    </script>
   </body>
 </html>
 ```
@@ -189,6 +170,83 @@ Allows settings the `dark` theme which changes the background color of the main
 
 Define a `title` attribute for the component to propagate to the underlying `<iframe>` element. The default value is `"Embedly card"`.
 
+#### API Example
+
+Programmatically changing any of the attribute values, will automatically update the element. For example, by changing the `data-url` value, you can switch to a different embed:
+
+<!--% example %-->
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/bento.mjs"
+    ></script>
+    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.css"
+    />
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.mjs"
+    ></script>
+    <script
+      nomodule
+      async
+      src="https://cdn.ampproject.org/v0/bento-embedly-card-1.0.js"
+    ></script>
+    <style>
+      bento-embedly-card {
+        width: 375px;
+        height: 472px;
+      }
+    </style>
+  </head>
+  <body>
+    <bento-embedly-key value="12af2e3543ee432ca35ac30a4b4f656a">
+    </bento-embedly-key>
+
+    <bento-embedly-card
+      data-url="https://twitter.com/AMPhtml/status/986750295077040128"
+      data-card-theme="dark"
+      data-card-controls="0"
+    >
+    </bento-embedly-card>
+
+    <bento-embedly-card
+      id="my-url"
+      data-url="https://www.youtube.com/watch?v=LZcKdHinUhE"
+    >
+    </bento-embedly-card>
+
+    <div class="buttons" style="margin-top: 8px">
+      <button id="change-url">Change embed</button>
+    </div>
+
+    <script>
+      (async () => {
+        const embedlyCard = document.querySelector('#my-url');
+        await customElements.whenDefined('bento-embedly-card');
+
+        // set up button actions
+        document.querySelector('#change-url').onclick = () => {
+          embedlyCard.setAttribute(
+            'data-url',
+            'https://www.youtube.com/watch?v=wcJSHR0US80'
+          );
+        };
+      })();
+    </script>
+  </body>
+</html>
+```
+
 ---
 
 ## Preact/React Component

diff --git a/extensions/amp-fit-text/1.0/README.md b/extensions/amp-fit-text/1.0/README.md
@@ -64,23 +64,6 @@ defineBentoFitText();
       Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
       inermis reprehendunt.
     </bento-fit-text>
-    <div class="buttons" style="margin-top: 8px">
-      <button id="font-button">Change max-font-size</button>
-      <button id="content-button">Change content</button>
-    </div>
-
-    <script>
-      (async () => {
-        const fitText = document.querySelector('#my-fit-text');
-        await customElements.whenDefined('bento-fit-text');
-
-        // set up button actions
-        document.querySelector('#font-button').onclick = () =>
-          fitText.setAttribute('max-font-size', '40');
-        document.querySelector('#content-button').onclick = () =>
-          (fitText.textContent = 'new content');
-      })();
-    </script>
   </body>
 </html>
 ```
@@ -154,6 +137,64 @@ Specifies the minimum font size in pixels as an integer that the `bento-fit-text
 
 Specifies the maximum font size in pixels as an integer that the `bento-fit-text` can use.
 
+#### API Example
+
+Programmatically changing an attribute value will automatically update the element.
+
+<!--% example %-->
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/bento.mjs"
+    ></script>
+    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
+    <script
+      type="module"
+      async
+      src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.mjs"
+    ></script>
+    <script
+      nomodule
+      async
+      src="https://cdn.ampproject.org/v0/bento-fit-text-1.0.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.ampproject.org/v0/bento-fit-text-1.0.css"
+    />
+  </head>
+  <body>
+    <bento-fit-text id="my-fit-text">
+      Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
+      inermis reprehendunt.
+    </bento-fit-text>
+    <div class="buttons" style="margin-top: 8px">
+      <button id="font-button">Change max-font-size</button>
+      <button id="content-button">Change content</button>
+    </div>
+
+    <script>
+      (async () => {
+        const fitText = document.querySelector('#my-fit-text');
+        await customElements.whenDefined('bento-fit-text');
+
+        // set up button actions
+        document.querySelector('#font-button').onclick = () =>
+          fitText.setAttribute('max-font-size', '40');
+        document.querySelector('#content-button').onclick = () =>
+          (fitText.textContent = 'new content');
+      })();
+    </script>
+  </body>
+</html>
+```
+
 ---
 
 ## Preact/React Component