docs(timestamp): update demos

elements/rh-timestamp/demo/custom-format.html

@@ -0,0 +1,13 @@
+<rh-timestamp id="timestamp-custom-format"
+              date="Sat Jan 01 2022 00:00:00 GMT-0500"></rh-timestamp>
+
+<script type="module">
+  import '@rhds/elements/rh-timestamp/rh-timestamp.js';
+  document.getElementById('timestamp-custom-format').customFormat = {
+    year: '2-digit',
+    month: 'short',
+    weekday: 'short',
+    day: 'numeric',
+    hour: 'numeric'
+  };
+</script>

elements/rh-timestamp/demo/fallback.html

@@ -0,0 +1,5 @@
+<rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400">Tue Aug 09 2006 14:57:00 GMT-0400</rh-timestamp>
+
+<script type="module">
+  import '@rhds/elements/rh-timestamp/rh-timestamp.js';
+</script>

elements/rh-timestamp/demo/formats.html

@@ -1,43 +1,25 @@
-<section>
-  <h2>Default</h2>
-  <p><rh-timestamp></rh-timestamp></p>
-</section>
-
-<section>
-  <h2>Basic formats</h2>
-  <p><rh-timestamp date-format="full" time-format="full"></rh-timestamp></p>
-  <p><rh-timestamp date-format="full"></rh-timestamp></p>
-  <p><rh-timestamp time-format="full"></rh-timestamp></p>
-  <p><rh-timestamp date-format="medium" time-format="short" display-suffix="US Eastern"></rh-timestamp></p>
-  <p><rh-timestamp date-format="full" locale="es"></rh-timestamp></p>
-</section>
-
-<section>
-  <h2>Custom format</h2>
-  <p><rh-timestamp id="timestamp-custom-format" date="Sat Jan 01 2022 00:00:00 GMT-0500"></rh-timestamp></p>
-
-  <script>
-  document.getElementById('timestamp-custom-format').customFormat = {
-    year: '2-digit',
-    month: 'short',
-    weekday: 'short',
-    day: 'numeric',
-    hour: 'numeric'
-  };
-  </script>
-</section>
-
-<section>
-  <h2>Relative formats</h2>
-  <p><rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></rh-timestamp></p>
-  <p><rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative></rh-timestamp></p>
-  <p><rh-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></rh-timestamp></p>
-  <p><rh-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative></rh-timestamp></p>
-  <p><rh-timestamp date="Tue Aug 09 2099 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></rh-timestamp></p>
-  <p><rh-timestamp date="Tue Aug 09 2099 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative></rh-timestamp></p>
-</section>
-
-<link rel="stylesheet" href="demo.css">
+<rh-timestamp date-format="full"
+              time-format="full"></rh-timestamp>
+
+<rh-timestamp date-format="full"></rh-timestamp>
+
+
+<rh-timestamp time-format="full"></rh-timestamp>
+
+
+<rh-timestamp date-format="medium"
+              time-format="short"
+              display-suffix="US Eastern"></rh-timestamp>
+
+<rh-timestamp date-format="full"
+              locale="es"></rh-timestamp>
+
 <script type="module">
   import '@rhds/elements/rh-timestamp/rh-timestamp.js';
-</script>
+</script>
+
+<style>
+  rh-timestamp {
+    display: block;
+  }
+</style>

elements/rh-timestamp/demo/relative.html

@@ -0,0 +1,16 @@
+<rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></rh-timestamp>
+<rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative></rh-timestamp>
+<rh-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></rh-timestamp>
+<rh-timestamp date="Tue Aug 09 2022 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative></rh-timestamp>
+<rh-timestamp date="Tue Aug 09 2099 14:57:00 GMT-0400 (Eastern Daylight Time)" relative></rh-timestamp>
+<rh-timestamp date="Tue Aug 09 2099 14:57:00 GMT-0400 (Eastern Daylight Time)" locale="es" relative></rh-timestamp>
+
+<script type="module">
+  import '@rhds/elements/rh-timestamp/rh-timestamp.js';
+</script>
+
+<style>
+  rh-timestamp {
+    display: block;
+  }
+</style>

elements/rh-timestamp/demo/rh-timestamp.html

@@ -1,35 +1,5 @@
-<section>
-  <h2>Basic</h2>
-  <rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400"></rh-timestamp>
-</section>
+<rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400"></rh-timestamp>
 
-<section>
-  <h2>Basic with fallback</h2>
-  <rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400">Tue Aug 09 2006 14:57:00 GMT-0400</rh-timestamp>
-</section>
-
-<section>
-  <h2>Basic formats</h2>
-  <rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400" date-format="medium" time-format="short" display-suffix="US Eastern"></section>
-</section>
-
-<section>
-  <h2>Relative</h2>
-  <rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400" relative></section>
-</section>
-
-<section>
-  <h2>Tooltip</h2>
-  <p>
-    <rh-tooltip>
-      <rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400"></rh-timestamp>
-      <rh-timestamp slot="content" date="Tue Aug 09 2006 14:57:00 GMT-0400" relative></rh-timestamp>
-    </rh-tooltip>
-  </p>
-</section>
-
-<link rel="stylesheet" href="demo.css">
 <script type="module">
-  import '@rhds/elements/rh-tooltip/rh-tooltip.js';
   import '@rhds/elements/rh-timestamp/rh-timestamp.js';
-</script>
+</script>

elements/rh-timestamp/demo/tooltip.html

@@ -46,8 +46,7 @@ <h2>Relative with tooltip</h2>
   </p>
 </section>
 
-<link rel="stylesheet" href="demo.css">
 <script type="module">
   import '@rhds/elements/rh-tooltip/rh-tooltip.js';
   import '@rhds/elements/rh-timestamp/rh-timestamp.js';
-</script>
+</script>