docs(footer): update demos

RedHat-UX · Oct 22, 2023 · 548dbc3 · 548dbc3
1 parent cf3ac6b
commit 548dbc3
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 52 deletions.
diff --git a/elements/rh-footer/demo/footer-universal.css b/elements/rh-footer/demo/footer-universal.css
diff --git a/elements/rh-footer/demo/footer-universal.html b/elements/rh-footer/demo/footer-universal.html
@@ -1,10 +1,3 @@
-<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-font/4/webfonts/red-hat-font.min.css">
-<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-theme/6/advanced-theme.css">
-
-<link rel="stylesheet" href="footer-universal.css">
-<link rel="stylesheet" href="../rh-footer-lightdom.css">
-
-<script type="module" src="rh-footer-universal.js"></script>
 <rh-footer-universal>
   <h3 slot="links-primary" data-analytics-text="Red Hat legal and privacy links" hidden>Red Hat legal and privacy links</h3>
   <ul slot="links-primary" data-analytics-region="page-footer-bottom-primary">
@@ -30,3 +23,19 @@ <h3 slot="links-secondary" data-analytics-text="Red Hat legal and privacy links"
   </ul>
 </rh-footer-universal>
 
+<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-font/4/webfonts/red-hat-font.min.css">
+<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-theme/6/advanced-theme.css">
+
+<link rel="stylesheet" href="../rh-footer-lightdom.css">
+
+<script type="module">
+  import '@rhds/elements/rh-footer/rh-footer-universal.js';
+</script>
+
+<style>
+  [data-demo="rh-footer"] {
+    margin: 0;
+    padding: 0;
+  }
+</style>
+
diff --git a/elements/rh-footer/demo/proxy.html b/elements/rh-footer/demo/proxy.html
@@ -1,23 +1,5 @@
-<link href="/elements/rh-footer/rh-footer-lightdom.css" rel="stylesheet">
-</link>
-<style>
-  :root {
-    --rh-font-size-text-xl: 1.125em;
-    --rh-line-height-body-text: 150%;
-    --rh-font-size-body-text-xs: 0.75em;
-    --rh-font-size-body-text-sm: 0.875em;
-    --rh-font-size-code-xs: 0.75em;
-    --rh-footer-link-header-mobile-font-size: 0.875em;
-  }
-  rh-footer::part(links-accordion-header) {
-    --rh-footer-link-header-font-size: 0.875em;
-  }
-</style>
-<script type="module">
-  import '@rhds/elements/rh-cta/rh-cta.js';
-</script>
 <template id="rh-footer-spandx-template">
-    <rh-footer>
+  <rh-footer>
     <a slot="logo" href="/">
       <img src="https://via.placeholder.com/170x40" alt="Red Hat logo" loading="lazy" />
     </a>
@@ -141,10 +123,28 @@ <h3 slot="links-secondary" hidden>Lorem ipsum</h3>
   </rh-footer-universal>
 </template>
 
+<link href="../rh-footer-lightdom.css" rel="stylesheet">
+
+<style>
+  :root {
+    --rh-font-size-text-xl: 1.125em;
+    --rh-line-height-body-text: 150%;
+    --rh-font-size-body-text-xs: 0.75em;
+    --rh-font-size-body-text-sm: 0.875em;
+    --rh-font-size-code-xs: 0.75em;
+    --rh-footer-link-header-mobile-font-size: 0.875em;
+  }
+  rh-footer::part(links-accordion-header) {
+    --rh-footer-link-header-font-size: 0.875em;
+  }
+</style>
+
 <script type="module">
+  import '@rhds/elements/rh-cta/rh-cta.js';
   import '@rhds/elements/rh-footer/rh-footer.js';
   const tpl = document.getElementById('rh-footer-spandx-template');
   const footer = tpl.content.cloneNode(true);
   document.querySelector('.page > footer').remove();
   document.querySelector('body').appendChild(footer);
 </script>
+
diff --git a/elements/rh-footer/demo/rh-footer-universal.js b/elements/rh-footer/demo/rh-footer-universal.js
diff --git a/elements/rh-footer/demo/rh-footer.html b/elements/rh-footer/demo/rh-footer.html
@@ -1,21 +1,3 @@
-<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-font/4/webfonts/red-hat-font.min.css">
-<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-theme/6/advanced-theme.css">
-
-<link rel="stylesheet" href="../rh-footer-lightdom.css">
-<script type="module" src="rh-footer.js"></script>
-
-<style>
-  body {
-    padding: 0;
-    margin: 0;
-  }
-
-  *, *:before, *:after {
-    box-sizing: border-box;
-  }
-</style>
-
-
 <rh-footer data-analytics-region="page-footer">
   <a slot="logo" href="https://redhat.com/en" data-analytics-category="Footer" data-analytics-text="Logo">
     <img alt="Red Hat logo" src="https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo--on-dark.svg" loading="lazy" />
@@ -93,3 +75,27 @@ <h3 slot="links-secondary" data-analytics-text="Red Hat legal and privacy links"
     </ul>
   </rh-footer-universal>
 </rh-footer>
+
+<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-font/4/webfonts/red-hat-font.min.css">
+<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-theme/6/advanced-theme.css">
+<link rel="stylesheet" href="../rh-footer-lightdom.css">
+
+<script type="module">
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-footer/rh-footer.js';
+</script>
+
+<style>
+  [data-demo="rh-footer"] {
+    padding: 0;
+    margin: 0;
+  }
+
+  [data-demo="rh-footer"] *,
+  [data-demo="rh-footer"] *:before,
+  [data-demo="rh-footer"] *:after {
+    box-sizing: border-box;
+  }
+</style>
+
+
diff --git a/elements/rh-footer/demo/rh-footer.js b/elements/rh-footer/demo/rh-footer.js