@aurodesignsystem-dev/auro-datetime 0.0.0-pr111.0 → 0.0.0-pr112.0

package/demo/index.md

@@ -1,6 +1,6 @@
 <!--
  THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
- ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE. THE BASIC EXAMPLE IS USUALLY ENOUGH.
  ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
 -->
 
@@ -8,53 +8,52 @@
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
 <!-- The below content is automatically added from ./../docs/partials/description.md -->
-The `<auro-datetime>` custom element makes it really easy to add dates to your web app with a simple HTML API.
+The `<auro-datetime>` element shows a date or time as text, formatted for a language and region you choose and, optionally, a specific time zone. Set `type` to choose the full date, the time, a numeric date, or a single part, such as the weekday.
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Use Cases
+## Use cases
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
-The `<auro-datetime>` element should be used in situations where users may:
+Use `<auro-datetime>` to:
 
-* A date and/or time is required
+* Show a date or time, such as a departure date or arrival time.
+* Show a time in a specific time zone, such as a flight's local time at its airport.
+* Format a date for a language and region, such as `de-DE` or `ja-JP`.
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Basic Date
+## Examples
+
+### Basic
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
-  <auro-datetime type="date"></auro-datetime>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic.html -->
+<auro-datetime type="date"></auro-datetime>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
-```html
-<auro-datetime type="date"></auro-datetime>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datetime type="date"&gt;&lt;/auro-datetime&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
-## Basic Time
+### Time
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-time.html) -->
-  <!-- The below content is automatically added from ./../apiExamples/basic-time.html -->
-  <auro-datetime type="time"></auro-datetime>
-  <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-time.html) -->
+<!-- The below content is automatically added from ./../apiExamples/basic-time.html -->
+<auro-datetime type="time"></auro-datetime>
+<!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-  <span slot="trigger">See code</span>
+<span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-time.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/basic-time.html -->
 
-```html
-<auro-datetime type="time"></auro-datetime>
-```
+<pre class="language-html"><code class="language-html">&lt;auro-datetime type="time"&gt;&lt;/auro-datetime&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
- 
+</auro-accordion>