Skip to content

Commit fcf6019

Browse files
bennypowersbennypowers
committed
feat(footer): href attribute for social links (#2182)
* feat(footer): href attribute * docs(footer): social link slot
1 parent 45a90c3 commit fcf6019

File tree

5 files changed

+161
-8
lines changed

5 files changed

+161
-8
lines changed

‎.changeset/forty-colts-tie.md

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
"@rhds/elements": minor
3+
---
4+
`<rh-footer>`: social link element can now take an `href` attribute instead of a slotted link. The previous behaviour will still work.
5+
6+
Before:
7+
8+
```html
9+
10+
<rh-footer-social-link slot="social-links"
11+
icon="linkedin"><a href="https://www.linkedin.com/company/red-hat"
12+
data-analytics-region="social-links-exit"
13+
data-analytics-category="Footer|social-links"
14+
data-analytics-text="LinkedIn">LinkedIn</a></rh-footer-social-link>
15+
```
16+
17+
After:
18+
```html
19+
<rh-footer-social-link slot="social-links"
20+
icon="linkedin"
21+
href="https://www.linkedin.com/company/red-hat"
22+
data-analytics-region="social-links-exit"
23+
data-analytics-category="Footer|social-links"
24+
data-analytics-text="LinkedIn"
25+
accessible-label="LinkedIn"></rh-footer-social-link>
26+
```

‎elements/rh-footer/demo/rh-footer.html

+28-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,34 @@
22
<a slot="logo" href="https://redhat.com/en" data-analytics-category="Footer" data-analytics-text="Logo">
33
<img alt="Red Hat logo" src="https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo--on-dark.svg" loading="lazy" />
44
</a>
5-
<rh-footer-social-link slot="social-links" icon="linkedin"><a href="https://www.linkedin.com/company/red-hat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="LinkedIn">LinkedIn</a></rh-footer-social-link>
6-
<rh-footer-social-link slot="social-links" icon="youtube"><a href="https://www.youtube.com/user/RedHatVideos" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="YouTube">YouTube</a></rh-footer-social-link>
7-
<rh-footer-social-link slot="social-links" icon="facebook"><a href="https://www.facebook.com/redhatinc" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="Facebook">Facebook</a></rh-footer-social-link>
8-
<rh-footer-social-link slot="social-links" icon="x"><a href="https://twitter.com/RedHat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="Twitter">X/Twitter</a></rh-footer-social-link>
5+
<rh-footer-social-link slot="social-links"
6+
icon="linkedin"
7+
href="https://www.linkedin.com/company/red-hat"
8+
data-analytics-region="social-links-exit"
9+
data-analytics-category="Footer|social-links"
10+
data-analytics-text="LinkedIn"
11+
accessible-label="LinkedIn"></rh-footer-social-link>
12+
<rh-footer-social-link slot="social-links"
13+
icon="youtube"
14+
href="https://www.youtube.com/user/RedHatVideos"
15+
data-analytics-region="social-links-exit"
16+
data-analytics-category="Footer|social-links"
17+
data-analytics-text="YouTube"
18+
accessible-label="YouTube"></rh-footer-social-link>
19+
<rh-footer-social-link slot="social-links"
20+
icon="facebook"
21+
href="https://www.facebook.com/redhatinc"
22+
data-analytics-region="social-links-exit"
23+
data-analytics-category="Footer|social-links"
24+
data-analytics-text="Facebook"
25+
accessible-label="Facebook"></rh-footer-social-link>
26+
<rh-footer-social-link slot="social-links"
27+
icon="x"
28+
href="https://twitter.com/RedHat"
29+
data-analytics-region="social-links-exit"
30+
data-analytics-category="Footer|social-links"
31+
data-analytics-text="Twitter"
32+
accessible-label="X/Twitter"></rh-footer-social-link>
933
<h3 slot="links" data-analytics-text="Products">Products</h3>
1034
<ul slot="links">
1135
<li><a href="https://redhat.com/en/technologies/linux-platforms/enterprise-linux" data-analytics-category="Footer|Products" data-analytics-text="Red Hat Enterprise Linux">Red Hat Enterprise Linux</a></li>

‎elements/rh-footer/demo/slotted-social-links.html

+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<rh-footer data-analytics-region="page-footer">
2+
<a slot="logo" href="https://redhat.com/en" data-analytics-category="Footer" data-analytics-text="Logo">
3+
<img alt="Red Hat logo" src="https://static.redhat.com/libs/redhat/brand-assets/2/corp/logo--on-dark.svg" loading="lazy" />
4+
</a>
5+
<rh-footer-social-link slot="social-links" icon="linkedin"><a href="https://www.linkedin.com/company/red-hat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="LinkedIn">LinkedIn</a></rh-footer-social-link>
6+
<rh-footer-social-link slot="social-links" icon="youtube"><a href="https://www.youtube.com/user/RedHatVideos" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="YouTube">YouTube</a></rh-footer-social-link>
7+
<rh-footer-social-link slot="social-links" icon="facebook"><a href="https://www.facebook.com/redhatinc" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="Facebook">Facebook</a></rh-footer-social-link>
8+
<rh-footer-social-link slot="social-links" icon="x"><a href="https://twitter.com/RedHat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="Twitter">X/Twitter</a></rh-footer-social-link>
9+
<h3 slot="links" data-analytics-text="Products">Products</h3>
10+
<ul slot="links">
11+
<li><a href="https://redhat.com/en/technologies/linux-platforms/enterprise-linux" data-analytics-category="Footer|Products" data-analytics-text="Red Hat Enterprise Linux">Red Hat Enterprise Linux</a></li>
12+
<li><a href="https://redhat.com/en/technologies/cloud-computing/openshift" data-analytics-category="Footer|Products" data-analytics-text="Red Hat OpenShift">Red Hat OpenShift</a></li>
13+
<li><a href="https://redhat.com/en/technologies/management/ansible" data-analytics-category="Footer|Products" data-analytics-text="Red Hat Ansible Automation Platform">Red Hat Ansible Automation Platform</a></li>
14+
<li><a href="https://redhat.com/en/technologies/cloud-computing/openshift/cloud-services" data-analytics-category="Footer|Products" data-analytics-text="Cloud services">Cloud services</a></li>
15+
<li><a href="https://redhat.com/en/technologies/all-products" data-analytics-category="Footer|Products" data-analytics-text="See all products">See all products</a></li>
16+
</ul>
17+
<h3 slot="links" data-analytics-text="Tools">Tools</h3>
18+
<ul slot="links">
19+
<li><a href="https://sso.redhat.com" data-analytics-category="Footer|Tools" data-analytics-text="My account">My account</a></li>
20+
<li><a href="https://redhat.com/en/services/training-and-certification" data-analytics-category="Footer|Tools" data-analytics-text="Training and certification">Training and certification</a></li>
21+
<li><a href="https://access.redhat.com" data-analytics-category="Footer|Tools" data-analytics-text="Customer support">Customer support</a></li>
22+
<li><a href="https://developers.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Developer resources">Developer resources</a></li>
23+
<li><a href="https://learn.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Learning community">Learning community</a></li>
24+
<li><a href="https://connect.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Partner resources">Partner resources</a></li>
25+
<li><a href="https://redhat.com/en/resources" data-analytics-category="Footer|Tools" data-analytics-text="Resource library">Resource library</a></li>
26+
</ul>
27+
<h3 slot="links" data-analytics-text="Try buy sell">Try, buy & sell</h3>
28+
<ul slot="links">
29+
<li><a href="https://redhat.com/en/products/trials" data-analytics-category="Footer|Try buy sell" data-analytics-text="Product trial center">Product trial center</a></li>
30+
<li><a href="https://marketplace.redhat.com" data-analytics-category="Footer|Try buy sell" data-analytics-text="Red Hat Marketplace">Red Hat Marketplace</a></li>
31+
<li><a href="https://catalog.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Red Hat Ecosystem Catalog">Red Hat Ecosystem Catalog</a></li>
32+
<li><a href="http://redhat.force.com/finder/" data-analytics-category="Footer|Try buy sell" data-analytics-text="Find a partner">Find a partner</a></li>
33+
<li><a href="https://www.redhat.com/en/store" data-analytics-category="Footer|Try buy sell" data-analytics-text="Red Hat Store">Red Hat Store</a></li>
34+
<li><a href="https://cloud.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Console">Console</a></li>
35+
</ul>
36+
<h3 slot="links" data-analytics-text="Communicate">Communicate</h3>
37+
<ul slot="links">
38+
<li><a href="https://redhat.com/en/services/consulting-overview#contact-us" data-analytics-category="Footer|Communicate" data-analytics-text="Contact consulting">Contact consulting</a></li>
39+
<li><a href="https://redhat.com/en/contact" data-analytics-category="Footer|Communicate" data-analytics-text="Contact sales">Contact sales</a></li>
40+
<li><a href="https://redhat.com/en/services/training-and-certification/contact-us" data-analytics-category="Footer|Communicate" data-analytics-text="Contact training">Contact training</a></li>
41+
<li><a href="https://redhat.com/en/about/social" data-analytics-category="Footer|Communicate" data-analytics-text="Social">Social</a></li>
42+
</ul>
43+
<rh-footer-block slot="main-secondary">
44+
<h3 slot="header" data-analytics-text="About Red Hat">About Red Hat</h3>
45+
<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>
46+
</rh-footer-block>
47+
<rh-footer-block slot="main-secondary">
48+
<h3 slot="header" data-analytics-text="Subscribe to our newsletter Red Hat Shares">Subscribe to our newsletter, Red Hat Shares</h3>
49+
<rh-cta><a href="https://www.redhat.com/en/email-preferences?newsletter=RH-Shares&intcmp=7016000000154xCAAQ" data-analytics-category="Footer|About Red Hat" data-analytics-text="Sign up now">Sign up now</a></rh-cta>
50+
</rh-footer-block>
51+
52+
<!-- Universal Footer -->
53+
<rh-footer-universal slot="universal">
54+
<h3 slot="links-primary" data-analytics-text="Red Hat legal and privacy links" hidden>Red Hat legal and privacy links</h3>
55+
<ul slot="links-primary" data-analytics-region="page-footer-bottom-primary">
56+
<li><a href="https://redhat.com/en/about/company" data-analytics-category="Footer|Corporate" data-analytics-text="About Red Hat">About Red Hat</a></li>
57+
<li><a href="https://redhat.com/en/jobs" data-analytics-category="Footer|Corporate" data-analytics-text="Jobs">Jobs</a></li>
58+
<li><a href="https://redhat.com/en/events" data-analytics-category="Footer|Corporate" data-analytics-text="Events">Events</a></li>
59+
<li><a href="https://redhat.com/en/about/office-locations" data-analytics-category="Footer|Corporate" data-analytics-text="Locations">Locations</a></li>
60+
<li><a href="https://redhat.com/en/contact" data-analytics-category="Footer|Corporate" data-analytics-text="Contact Red Hat">Contact Red Hat</a></li>
61+
<li><a href="https://redhat.com/en/blog" data-analytics-category="Footer|Corporate" data-analytics-text="Red Hat Blog">Red Hat Blog</a></li>
62+
<li><a href="https://redhat.com/en/about/our-culture/diversity-equity-inclusion" data-analytics-category="Footer|Corporate" data-analytics-text="Diversity equity and inclusion">Diversity, equity, and inclusion</a></li>
63+
<li><a href="https://coolstuff.redhat.com/" data-analytics-category="Footer|Corporate" data-analytics-text="Cool Stuff Store">Cool Stuff Store</a></li>
64+
<li><a href="https://www.redhat.com/en/summit" data-analytics-category="Footer|Corporate" data-analytics-text="Red Hat Summit">Red Hat Summit</a></li>
65+
</ul>
66+
<rh-footer-copyright slot="links-secondary">© 2022 Red Hat, Inc.</rh-footer-copyright>
67+
<h3 slot="links-secondary" data-analytics-text="Red Hat legal and privacy links" hidden>Red Hat legal and privacy links</h3>
68+
<ul slot="links-secondary" data-analytics-region="page-footer-bottom-secondary">
69+
<li><a href="https://redhat.com/en/about/privacy-policy" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="Privacy statement">Privacy statement</a></li>
70+
<li><a href="https://redhat.com/en/about/terms-use" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="Terms of use">Terms of use</a></li>
71+
<li><a href="https://redhat.com/en/about/all-policies-guidelines" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="All policies and guidelines">All policies and guidelines</a></li>
72+
<li><a href="https://redhat.com/en/about/digital-accessibility" data-analytics-category="Footer|Red Hat legal and privacy links" data-analytics-text="Digital accessibility" class="active">Digital accessibility</a></li>
73+
<!-- If your website supports trustarc include this item to add Cookie Preferences to your site. -->
74+
<!-- <li><span id="teconsent"> </span></li> -->
75+
</ul>
76+
</rh-footer-universal>
77+
</rh-footer>
78+
79+
<link rel="stylesheet" href="../rh-footer-lightdom.css">
80+
81+
<script type="module">
82+
import '@rhds/elements/rh-cta/rh-cta.js';
83+
import '@rhds/elements/rh-footer/rh-footer.js';
84+
</script>
85+

‎elements/rh-footer/rh-footer-social-link.css

+2
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@
88
display: none !important;
99
}
1010

11+
a,
1112
::slotted(a) {
1213
color: var(--_icon-color) !important;
1314
}
1415

16+
a:is(:hover, :focus-within),
1517
::slotted(a:is(:hover, :focus-within)) {
1618
color: var(--_icon-color-hover) !important;
1719
}

‎elements/rh-footer/rh-footer-social-link.ts

+20-4
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
11
import type { IconNameFor } from '@rhds/icons';
22

3-
import { LitElement, html } from 'lit';
3+
import { LitElement, html, isServer } from 'lit';
44
import { customElement } from 'lit/decorators/custom-element.js';
55
import { property } from 'lit/decorators/property.js';
66

77
import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
88

99
import style from './rh-footer-social-link.css';
1010

11+
/**
12+
* Social media links for Red Hat Footer
13+
* @slot - Optional icon for social link. Use only when suitable icon is unavailable with `<rh-icon>`
14+
*/
1115
@customElement('rh-footer-social-link')
1216
export class RhFooterSocialLink extends LitElement {
1317
static readonly styles = style;
1418

1519
/** Icon for this social link e.g. `'facebook'` */
1620
@property() icon?: IconNameFor<'social'>;
1721

22+
/** Social link address */
23+
@property() href?: string;
24+
25+
/** Textual label for the social link e.g. "Instagram" */
26+
@property({ attribute: 'accessible-label' }) accessibleLabel?: string;
27+
1828
#logger = new Logger(this);
1929

2030
connectedCallback() {
@@ -23,12 +33,18 @@ export class RhFooterSocialLink extends LitElement {
2333
}
2434

2535
render() {
26-
return html`<slot></slot>`;
36+
return html`
37+
<a href="${this.href}" aria-label="${this.accessibleLabel}">
38+
<slot>
39+
<rh-icon set="social" icon="${this.icon}"></rh-icon>
40+
</slot>
41+
</a>
42+
`;
2743
}
2844

2945
updated() {
30-
const oldDiv = this.querySelector('a');
31-
if (oldDiv) {
46+
let oldDiv;
47+
if (!isServer && (oldDiv = this.querySelector('a'))) {
3248
const newDiv = oldDiv.cloneNode(true) as Element;
3349
// remove the _rendered content
3450
newDiv.querySelectorAll('[_rendered]').forEach(i => i.remove());

0 commit comments

Comments
 (0)