Bento docs for amp-fit-text and amp-date-display (#32248)

* Bento docs for amp-fit-text and amp-date-display * Update extensions/amp-date-display/amp-date-display.md Co-authored-by: Caroline Liu <10456171+caroqliu@users.noreply.github.com> * lints Co-authored-by: Caroline Liu <10456171+caroqliu@users.noreply.github.com>
ampproject · Jan 27, 2021 · b3c7639 · b3c7639
1 parent cc0b974
commit b3c7639
Show file tree

Hide file tree

Showing 2 changed files with 141 additions and 0 deletions.
diff --git a/extensions/amp-date-display/amp-date-display.md b/extensions/amp-date-display/amp-date-display.md
@@ -80,6 +80,83 @@ This table lists the format you can specify in your Mustache template:
 | year           | 0, 1, 2, ..., 1999, 2000, 2001, etc.                          |
 | yearTwoDigit   | 00, 01, 02, ..., 17, 18, 19, ..., 98, 99                      |
 
+### Standalone use outside valid AMP documents
+
+Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide `[Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/)`.
+
+#### Example
+
+The example below demonstrates `amp-date-display` component in standalone use.
+
+[example preview="top-frame" playground="false"]
+
+```
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-date-display-1.0.css">
+  <script async custom-element="amp-date-display" src="https://cdn.ampproject.org/v0/amp-date-display-1.0.js"></script>
+   <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-latest.js"></script>
+  <style>
+    amp-date-display {
+      display: block;
+      height: 20px;
+    }
+  </style>
+</head>
+<amp-date-display
+  id="my-date-display"
+  datetime="2017-08-02T15:05:05.000"
+  locale="en"
+>
+  <template type="amp-mustache">
+    <div>
+      {{dayName}} {{day}} {{monthName}} {{year}}
+      {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}
+    </div>
+  </template>
+</amp-date-display>
+<div class="buttons" style="margin-top: 8px;">
+  <button id="ar-button">Change locale to Arabic</button>
+  <button id="en-button">Change locale to English</button>
+  <button id="now-button">Change time to now</button>
+</div>
+
+<script>
+  (async () => {
+    const dateDisplay = document.querySelector('#my-date-display');
+    await customElements.whenDefined('amp-date-display');
+
+    // set up button actions
+    document.querySelector('#ar-button').onclick = () => dateDisplay.setAttribute('locale', 'ar');
+    document.querySelector('#en-button').onclick = () => dateDisplay.setAttribute('locale', 'en');
+    document.querySelector('#now-button').onclick = () => dateDisplay.setAttribute('datetime', 'now');
+  })();
+</script>
+```
+
+[/example]
+
+#### Layout and style
+
+Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
+
+```
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-date-display-1.0.css">
+```
+
+Fully valid AMP pages use the AMP layout system to infer sizing of elements to create a page structure before downloading any remote resources. However, Bento use imports components into less controlled environments and AMP's layout system is inaccessible.
+
+**Container type**
+
+The `amp-date-display` component has a defined layout size type. To ensure the component renders correctly, apply the following styles:
+
+```css
+amp-date-display {
+  display: block;
+  height: 20px;
+}
+```
+
 ## Attributes
 
 You must specify at least one of these required attributes: `datetime`,

diff --git a/extensions/amp-fit-text/amp-fit-text.md b/extensions/amp-fit-text/amp-fit-text.md
@@ -66,6 +66,70 @@ The following example is similar to the one above, but in this example we specif
 
 Unlike `0.1`, the experimental `1.0` version of `amp-fit-text` does not account for margin and border size as contributing to the total fit-text coverage area.
 
+### Standalone use outside valid AMP documents
+
+Bento AMP allows you to use AMP components in non-AMP pages without needing to commit to fully valid AMP. You can take these components and place them in implementations with frameworks and CMSs that don't support AMP. Read more in our guide `[Use AMP components in non-AMP pages](https://amp.dev/documentation/guides-and-tutorials/start/bento_guide/)`.
+
+#### Example
+
+The example below demonstrates `amp-fit-text` component in standalone use.
+
+[example preview="top-frame" playground="false"]
+
+```
+<head>
+  <script async src="https://cdn.ampproject.org/v0.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-fit-text-1.0.css">
+  <script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-1.0.js"></script>
+  <style>
+    amp-fit-text {
+      aspect-ratio: 4/3;
+    }
+  </style>
+</head>
+<amp-fit-text id="my-fit-text">
+  Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque
+  inermis reprehendunt.
+</amp-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('amp-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>
+```
+
+[/example]
+
+#### Layout and style
+
+Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
+
+```
+<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-fit-text-1.0.css">
+```
+
+Fully valid AMP pages use the AMP layout system to infer sizing of elements to create a page structure before downloading any remote resources. However, Bento use imports components into less controlled environments and AMP's layout system is inaccessible.
+
+**Container type**
+
+The `amp-fit-text` component has a defined layout size type. To ensure the component renders correctly, apply the following styles:
+
+```css
+amp-fit-text {
+  aspect-ratio: 4/3;
+}
+```
+
 ### Overflowing content
 
 If the content of the `amp-fit-text` overflows the available space, even with a