feat(footer): add <rh-global-footer>

* chore: add creds 😎 * moved styles from 'footer' to 'global' monicer * fix: corrected social links tag * feat: remove the connotation of default social links * chore: update proxy demo * fix: remove header boarder on mobile fixes #392 * fix: MatchMediaController not working on first render * fix: remove old dark context CSS statement * feat: a11y, convert px to em values for font-size * chore: update changeset * chore: moving docs for css parts and slots to global-footer * chore: update tests to include global footer * fix: line-height * chore: update README * fix: move all px values to em * fix: removed global prefix from slot and shadowparts * fix: correct nesting font-sizes in footer * chore: add lazy loading to images * chore: fix demo * Update elements/rh-footer/rh-footer.css * docs(footer): update README example * fix(footer): remove pfelement decorator * docs(footer): jsdoc descriptions * fix(footer): social-links-item part -> social-links * feat(footer): --rh-footer-link-header-font-size * refactor(footer): make `is-mobile` private * docs(footer): update changeset * fix(footer): force rhds font-family for headings * fix: corrected private isMobile CSS selectors Co-authored-by: Benny Powers <[email protected]>
RedHat-UX · Jul 5, 2022 · 58831e0 · 58831e0
1 parent 8179e9b
commit 58831e0
Show file tree

Hide file tree

Showing 15 changed files with 706 additions and 413 deletions.
diff --git a/.changeset/rh-global-footer.md b/.changeset/rh-global-footer.md
@@ -0,0 +1,33 @@
+---
+"@rhds/elements": major
+---
+
+Adds `<rh-global-footer>` standalone component
+
+Global footer only
+
+```html
+<rh-global-footer>
+  ...
+</rh-global-footer>
+```
+
+Usage in <rh-footer>
+
+```html
+<rh-footer>
+  ...
+  <rh-global-footer slot="global">...</rh-global-footer>
+</rh-footer>
+```
+
+Adds font-size initial and em values instead of px values for a11y.
+Allow user stylesheet to increase and decrease font-size.
+
+https://github.com/RedHat-UX/red-hat-design-system/issues/312
+
+Fixes double border on mobile.
+
+https://github.com/RedHat-UX/red-hat-design-system/issues/392
+
+Removes `is-mobile` attribute
diff --git a/elements/rh-footer/README.md b/elements/rh-footer/README.md
@@ -11,6 +11,10 @@ npm install @rhds/elements
 import '@rhds/elements/rh-footer/rh-footer.js';
 ```
 
+```html
+<link rel="stylesheet" href="https://unpkg.com/@rhds/elements/elements/rh-footer/rh-footer-lightdom.css" />
+```
+
 Via CDN with import maps (_recommended_):
 ```html
 <!--
@@ -20,8 +24,8 @@ Via CDN with import maps (_recommended_):
 <script type="importmap">
 {
   "imports": {
-    "@rhds/elements": "https://ga.jspm.io/npm:@rhds/[email protected].5/rhds.min.js",
-    "@rhds/elements/rh-footer/rh-footer.js": "https://ga.jspm.io/npm:@rhds/[email protected].5/elements/rh-footer/rh-footer.js"
+    "@rhds/elements": "https://ga.jspm.io/npm:@rhds/[email protected].9/rhds.min.js",
+    "@rhds/elements/rh-footer/rh-footer.js": "https://ga.jspm.io/npm:@rhds/[email protected].9/elements/rh-footer/rh-footer.js"
   },
   "scopes": {
     "https://ga.jspm.io/": {
@@ -72,7 +76,7 @@ Via CDN with import maps (_recommended_):
 Via Module-transforming CDN:
 ```html
 <script type="module">
-  import 'https://jspm.dev/@rhds/[email protected].5/rh-footer/rh-footer.js';
+  import 'https://jspm.dev/@rhds/[email protected].9/rh-footer/rh-footer.js';
   await customElements.whenDefined('rh-footer');
   console.log('Footer is now available and upgraded');
 </script>
@@ -87,83 +91,147 @@ Please [open a discussion thread](https://github.com/orgs/RedHat-UX/discussions/
 ```html
 <rh-footer>
   <a slot="logo" href="/en">
-    <img src="https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo--on-dark.svg"
-         alt="Red Hat logo"
-         loading="lazy" />
+    <img src="https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo--on-dark.svg" alt="Red Hat logo"
+      loading="lazy" />
   </a>
+  <rh-footer-social-link slot="social-links" icon="web-icon-linkedin">
+    <a href="http://www.linkedin.com/company/red-hat">LinkedIn</a>
+  </rh-footer-social-link>
+  <rh-footer-social-link slot="social-links" icon="web-icon-youtube">
+    <a href="http://www.youtube.com/user/RedHatVideos">Youtube</a>
+  </rh-footer-social-link>
+  <rh-footer-social-link slot="social-links" icon="web-icon-facebook">
+    <a href="https://www.facebook.com/redhatinc">Facebook</a>
+  </rh-footer-social-link>
+  <rh-footer-social-link slot="social-links" icon="web-icon-twitter">
+    <a href="https://twitter.com/RedHat">Twitter</a>
+  </rh-footer-social-link>
   <h3 slot="links">Products</h3>
   <ul slot="links">
-    <li><a href="https://www.redhat.com/en/technologies/management/ansible">Red Hat Ansible Automation Platform</a></li>
-    <li><a href="https://www.redhat.com/en/technologies/linux-platforms/enterprise-linux">Red Hat Enterprise Linux</a></li>
-    <li><a href="https://www.redhat.com/en/technologies/cloud-computing/openshift">Red Hat OpenShift</a></li>
-    <li><a href="https://www.redhat.com/en/technologies/cloud-computing/openshift-data-foundation">Red Hat OpenShift Data Foundation</a></li>
-    <li><a href="https://www.redhat.com/en/technologies/linux-platforms/openstack-platform">Red Hat OpenStack Platform</a></li>
-    <li><a href="https://www.redhat.com/en/technologies/all-products">See all products</a></li>
+    <li><a href="#">Red Hat Ansible Automation Platform</a></li>
+    <li><a href="#">Red Hat Enterprise Linux</a></li>
+    <li><a href="#">Red Hat OpenShift</a></li>
+    <li><a href="#">Red Hat OpenShift Container Storage</a></li>
+    <li><a href="#">Red Hat OpenStack Platform</a></li>
+    <li><a href="#">See all products</a></li>
   </ul>
   <h3 slot="links">Tools</h3>
   <ul slot="links">
-    <li><a href="https://sso.redhat.com/">My account</a></li>
-    <li><a href="https://access.redhat.com/">Customer support</a></li>
-    <li><a href="https://connect.redhat.com/">Partner resources</a></li>
-    <li><a href="https://developers.redhat.com/">Developer resources</a></li>
-    <li><a href="https://www.redhat.com/en/services/training-and-certification">Training and certification</a></li>
-    <li><a href="https://learn.redhat.com/">Learning community</a></li>
-    <li><a href="https://catalog.redhat.com/">Red Hat Ecosystem Catalog</a></li>
-    <li><a href="https://www.redhat.com/en/resources">Resource library</a></li>
+    <li><a href="#">My account</a></li>
+    <li><a href="#">Customer support</a></li>
+    <li><a href="#">Red Hat OpenShift</a></li>
+    <li><a href="#">Contact training</a></li>
+    <li><a href="#">Red Hat OpenStack Platform</a></li>
+    <li><a href="#">See all products</a></li>
   </ul>
   <h3 slot="links">Try, buy, sell</h3>
   <ul slot="links">
-    <li><a href="https://www.redhat.com/en/products/trials">Product trial center</a></li>
-    <li><a href="https://www.redhat.com/en/store">Red Hat Store</a></li>
-    <li><a href="https://marketplace.redhat.com/">Red Hat Marketplace</a></li>
-    <li><a href="https://www.redhat.com/en/about/japan-buy">Buy online (Japan)</a></li>
-    <li><a href="http://redhat.force.com/finder/">Find a partner</a></li>
-    <li><a href="https://www.redhat.com/en/contact">Contact sales</a></li>
-    <li><a href="https://www.redhat.com/en/services/training-and-certification/contact-us">Contact training</a></li>
-    <li><a href="https://www.redhat.com/en/services/consulting-overview#contact-us">Contact consulting</a></li>
+    <li><a href="#">Red Hat Store</a></li>
+    <li><a href="#">Red Hat Enterprise Linux</a></li>
+    <li><a href="#">Red Hat OpenShift</a></li>
+    <li><a href="#">Contact training</a></li>
+    <li><a href="#">Red Hat OpenStack Platform</a></li>
+    <li><a href="#">See all products</a></li>
   </ul>
   <h3 id="communicate" slot="links">Communicate</h3>
   <ul slot="links">
-    <li><a href="https://www.redhat.com/en/contact">Contact us</a></li>
-    <li><a href="https://www.redhat.com/en/about/feedback">Feedback</a></li>
-    <li><a href="https://www.redhat.com/en/about/social">Social</a></li>
-    <li><a href="https://engage.redhat.com/Global-Preference-Center?newsletter=RH-Shares&intcmp=7016000000154xCAAQ">Red Hat newsletter</a></li>
+    <li><a href="#">Contact us</a></li>
+    <li><a href="#">Feedback</a></li>
+    <li><a href="#">Social</a></li>
+    <li><a href="#">Red Hat newsletter</a></li>
+    <li><a href="#">Email preferences</a></li>
   </ul>
   <rh-footer-block slot="main-secondary">
     <h3 slot="header">About Red Hat</h3>
-    <p>We’re the world’s leading provider of enterprise open source solutions, using a community-powered approach to deliver high-performing Linux, cloud, container, and Kubernetes technologies. We help you standardize across environments, develop cloud-native applications, and integrate, automate, secure, and manage complex environments with award-winning support, training, and consulting services.</p>
+    <p>We’re the world’s leading provider of enterprise open source solutions―including Linux, cloud, container,
+      and
+      Kubernetes. We deliver hardened solutions that make it easier for enterprises to work across platforms and
+      environments, from the core datacenter to the network edge.
+    </p>
+    <p>Duis nulla esse ad id anim ipsum et magna amet laborum ex consectetur nulla. Est non ex ea ut ex laborum
+      id
+      aute eiusmod eu quis qui. <a href="#">Consequat consequat tempor elit nostrud non</a>.</p>
   </rh-footer-block>
   <rh-footer-block slot="main-secondary">
     <h3 slot="header">Subscribe to our free newsletter, Red Hat Shares</h3>
     <pfe-cta><a href="#blocks">Sign up now</a></pfe-cta>
   </rh-footer-block>
-  <h3 slot="footer-links-primary" hidden>Red Hat legal and privacy links</h3>
-  <ul slot="footer-links-primary">
-    <li><a href="https://www.redhat.com/en/about/company">About Red Hat</a></li>
-    <li><a href="https://www.redhat.com/en/jobs-overview">Jobs</a></li>
-    <li><a href="https://www.redhat.com/en/events">Events</a></li>
-    <li><a href="https://www.redhat.com/en/about/office-locations">Locations</a></li>
-    <li><a href="https://www.redhat.com/en/blog">Red Hat Blog</a></li>
-    <li><a href="https://coolstuff.redhat.com/">Cool Stuff Store</a></li>
-    <li><a href="https://www.redhat.com/en/about/our-culture/diversity-equity-inclusion/statement">Diversity, equity, and inclusion</a></li>
+  <rh-footer-block slot="main-secondary">
+    <h3 slot="header">Select a language</h3>
+    <p>insert language switcher here...</p>
+  </rh-footer-block>
+  <rh-global-footer slot="global">
+    <h3 slot="links-primary" hidden>Red Hat legal and privacy links</h3>
+    <ul slot="links-primary">
+      <li><a href="#">About Red Hat</a></li>
+      <li><a href="#">Jobs</a></li>
+      <li><a href="#">Events</a></li>
+      <li><a href="#">Locations</a></li>
+      <li><a href="#">Contact Red Hat</a></li>
+      <li><a href="#">Red Hat Blog</a></li>
+      <li><a href="#">Cool Stuff Store</a></li>
+      <li><a href="#">Diversity, equity, and inclusion</a></li>
+    </ul>
+    <rh-footer-copyright slot="links-secondary"></rh-footer-copyright>
+    <h3 slot="links-secondary" hidden>Red Hat legal and privacy links</h3>
+    <ul slot="links-secondary">
+      <li><a href="#">Privacy statement</a></li>
+      <li><a href="#">Terms of use</a></li>
+      <li><a href="#">All policies and guidelines</a></li>
+      <li><a href="#">Digital accessibility</a></li>
+      <li><a href="#">Cookie preferences</a></li>
+    </ul>
+    <div slot="secondary-end">
+      <a href="#">*We’ve updated our privacy statement effective December 30, 202X.</a>
+    </div>
+    <a href="https://www.redhat.com/en/summit" slot="tertiary">
+      <img src="https://access.redhat.com/chrome_themes/nimbus/img/rh-summit-red-a.svg" alt="Red Hat Summit"
+        width="73px" loading="lazy">
+    </a>
+  </rh-global-footer>
+</rh-footer>
+```
+## Global Footer
+
+Pages which do not require the full footer, but do require the about links, copyright, legal info,
+or privacy policy may use the `<rh-global-footer>`. Those pages can import the global footer separately
+from the `<rh-footer>` to improve page loading performance.
+
+```js
+import '@rhds/[email protected]/rh-footer/rh-global-footer.js';
+```
+```html
+<link rel="stylesheet" href="https://unpkg.com/@rhds/[email protected]/elements/rh-footer/rh-footer-lightdom.css" />
+```
+
+```html
+<rh-global-footer>
+  <h3 slot="links-primary" hidden>Red Hat legal and privacy links</h3>
+  <ul slot="links-primary">
+    <li><a href="#">About Red Hat</a></li>
+    <li><a href="#">Jobs</a></li>
+    <li><a href="#">Events</a></li>
+    <li><a href="#">Locations</a></li>
+    <li><a href="#">Contact Red Hat</a></li>
+    <li><a href="#">Red Hat Blog</a></li>
+    <li><a href="#">Cool Stuff Store</a></li>
+    <li><a href="#">Diversity, equity, and inclusion</a></li>
   </ul>
-  <rh-footer-copyright slot="footer-links-secondary"></rh-footer-copyright>
-  <h3 slot="footer-links-secondary" hidden>Red Hat legal and privacy links</h3>
-  <ul slot="footer-links-secondary">
-    <li><a href="https://www.redhat.com/en/about/privacy-policy">Privacy statement</a></li>
-    <li><a href="https://www.redhat.com/en/about/terms-use">Terms of use</a></li>
-    <li><a href="https://www.redhat.com/en/about/all-policies-guidelines">All policies and guidelines</a></li>
-    <li><a href="https://www.redhat.com/en/about/digital-accessibility">Digital accessibility</a></li>
+  <rh-footer-copyright slot="links-secondary"></rh-footer-copyright>
+  <h3 slot="links-secondary" hidden>Red Hat legal and privacy links</h3>
+  <ul slot="links-secondary">
+    <li><a href="#">Privacy statement</a></li>
+    <li><a href="#">Terms of use</a></li>
+    <li><a href="#">All policies and guidelines</a></li>
+    <li><a href="#">Digital accessibility</a></li>
     <li><a href="#">Cookie preferences</a></li>
   </ul>
-  <div slot="footer-secondary-end">
+  <div slot="secondary-end">
     <a href="#">*We’ve updated our privacy statement effective December 30, 202X.</a>
   </div>
-  <a href="https://www.redhat.com/en/summit" slot="footer-tertiary">
-    <img src="https://access.redhat.com/chrome_themes/nimbus/img/rh-summit-red-a.svg"
-         alt="Red Hat Summit"
-         loading="lazy"
-         width="73px" />
+  <a href="https://www.redhat.com/en/summit" slot="tertiary">
+    <img src="https://access.redhat.com/chrome_themes/nimbus/img/rh-summit-red-a.svg" alt="Red Hat Summit"
+      width="73px">
   </a>
-</rh-footer>
+</rh-global-footer>
 ```