✨ [bento][amp-date-countdown] Change attribute name of count-up (#32201)

* Change attribute name of count-up

* Add doc updates for date-countdown

* Add quotes to count up in docs

* Update extensions/amp-date-countdown/amp-date-countdown.md

Co-authored-by: CrystalOnScript <crystallambert@google.com>

Co-authored-by: CrystalOnScript <crystallambert@google.com>

extensions/amp-date-countdown/1.0/amp-date-countdown.js

@@ -120,7 +120,7 @@ AmpDateCountdown['props'] = {
   'whenEnded': {attr: 'when-ended', type: 'string'},
   'locale': {attr: 'locale', type: 'string'},
   'biggestUnit': {attr: 'biggest-unit', type: 'string'},
-  'countUp': {attr: 'data-count-up', type: 'boolean'},
+  'countUp': {attr: 'count-up', type: 'boolean'},
 };
 
 /**

extensions/amp-date-countdown/1.0/storybook/Basic.amp.js

@@ -99,7 +99,7 @@ export const Default = () => {
     BIGGEST_UNIT_CONFIGURATIONS,
     BIGGEST_UNIT_CONFIGURATIONS[0]
   );
-  const countUp = boolean('data-count-up', false);
+  const countUp = boolean('count-up', false);
 
   return (
     <amp-date-countdown
@@ -113,7 +113,7 @@ export const Default = () => {
       locale={locale}
       when-ended={whenEnded}
       biggest-unit={biggestUnit}
-      data-count-up={countUp}
+      count-up={countUp}
       layout="fixed-height"
       height="100"
     >
@@ -166,7 +166,7 @@ export const DefaultRenderer = () => {
     BIGGEST_UNIT_CONFIGURATIONS,
     BIGGEST_UNIT_CONFIGURATIONS[0]
   );
-  const countUp = boolean('data-count-up', false);
+  const countUp = boolean('count-up', false);
 
   return (
     <amp-date-countdown
@@ -180,7 +180,7 @@ export const DefaultRenderer = () => {
       locale={locale}
       when-ended={whenEnded}
       biggest-unit={biggestUnit}
-      data-count-up={countUp}
+      count-up={countUp}
       layout="fixed-height"
       height="100"
     ></amp-date-countdown>
@@ -222,7 +222,7 @@ export const ExternalTemplate = () => {
     BIGGEST_UNIT_CONFIGURATIONS,
     BIGGEST_UNIT_CONFIGURATIONS[0]
   );
-  const countUp = boolean('data-count-up', false);
+  const countUp = boolean('count-up', false);
 
   return (
     <div>
@@ -251,7 +251,7 @@ export const ExternalTemplate = () => {
         locale={locale}
         when-ended={whenEnded}
         biggest-unit={biggestUnit}
-        data-count-up={countUp}
+        count-up={countUp}
         template={template}
         layout="fixed-height"
         height="100"

extensions/amp-date-countdown/amp-date-countdown.md

@@ -95,7 +95,7 @@ This table provides examples of formatted values specified in a Mustache templat
 
 ### Migrating from 0.1
 
-The experimental `1.0` version of `amp-date-countdown` does not support the `data-count-up` attribute. This means the `1.0` component is unable to count in the opposite direction.
+The experimental `1.0` version of `amp-date-countdown` uses the attribute name `count-up` instead of `data-count-up` as in `0.1` to support the "count up" feature. See the `count-up` section under `Attributes` below for more details.
 
 ## Attributes
 
@@ -169,10 +169,14 @@ on the specified `biggest-unit` value. For example, assume there are `50 days 10
 -   Supported values: `days`, `hours`, `minutes`, `seconds`
 -   Default: `days`
 
-### data-count-up (optional)
+### count-up (optional)
 
 Include this attribute to reverse the direction of the countdown to count up instead. This is useful to display the time elapsed since a target date in the past. To continue the countdown when the target date is in the past, be sure to include the `when-ended` attribute with the `continue` value. If the target date is in the future, `amp-date-countdown` will display a decrementing (toward 0) negative value.
 
+[tip type="important"]
+Please note that the attribute name is different than `0.1` which uses the `data-count-up` attribute to toggle this feature. The behavior of the feature is otherwise identical to `0.1`.
+[/tip]
+
 ## Events
 
 The `amp-date-countdown` component exposes the following event that you can use