Skip to content

Commit

Permalink
Merge branch 'main' into staging/cubone
Browse files Browse the repository at this point in the history
  • Loading branch information
bennypowers authored Feb 26, 2025
2 parents a0ccd69 + d883971 commit dd899cd
Show file tree
Hide file tree
Showing 32 changed files with 380 additions and 131 deletions.
26 changes: 26 additions & 0 deletions .changeset/forty-colts-tie.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
---
"@rhds/elements": minor
---
`<rh-footer>`: social link element can now take an `href` attribute instead of a slotted link. The previous behaviour will still work.

Before:

```html

<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>
```

After:
```html
<rh-footer-social-link slot="social-links"
icon="linkedin"
href="https://www.linkedin.com/company/red-hat"
data-analytics-region="social-links-exit"
data-analytics-category="Footer|social-links"
data-analytics-text="LinkedIn"
accessible-label="LinkedIn"></rh-footer-social-link>
```
4 changes: 4 additions & 0 deletions .changeset/rich-adults-move.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
"@rhds/elements": patch
---
`<rh-footer>`: show content after 5 seconds if javascript fails
1 change: 0 additions & 1 deletion docs/patterns/tabs/patterns/code-tabs.html
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@
border: var(--rh-border-width-sm) solid var(--rh-color-border-subtle);
border-radius: var(--rh-border-radius-default);
max-width: 56rem; /* warning: magic number */
overflow: hidden;

& rh-tab-panel {
padding: 0;
Expand Down
4 changes: 4 additions & 0 deletions docs/styles/demo/dev-server.css
Original file line number Diff line number Diff line change
Expand Up @@ -59,3 +59,7 @@
#source-control {
margin-inline-start: unset;
}

html[unresolved] {
opacity: 1;
}
32 changes: 28 additions & 4 deletions elements/rh-footer/demo/rh-footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,34 @@
<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" />
</a>
<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>
<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>
<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>
<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>
<rh-footer-social-link slot="social-links"
icon="linkedin"
href="https://www.linkedin.com/company/red-hat"
data-analytics-region="social-links-exit"
data-analytics-category="Footer|social-links"
data-analytics-text="LinkedIn"
accessible-label="LinkedIn"></rh-footer-social-link>
<rh-footer-social-link slot="social-links"
icon="youtube"
href="https://www.youtube.com/user/RedHatVideos"
data-analytics-region="social-links-exit"
data-analytics-category="Footer|social-links"
data-analytics-text="YouTube"
accessible-label="YouTube"></rh-footer-social-link>
<rh-footer-social-link slot="social-links"
icon="facebook"
href="https://www.facebook.com/redhatinc"
data-analytics-region="social-links-exit"
data-analytics-category="Footer|social-links"
data-analytics-text="Facebook"
accessible-label="Facebook"></rh-footer-social-link>
<rh-footer-social-link slot="social-links"
icon="x"
href="https://twitter.com/RedHat"
data-analytics-region="social-links-exit"
data-analytics-category="Footer|social-links"
data-analytics-text="Twitter"
accessible-label="X/Twitter"></rh-footer-social-link>
<h3 slot="links" data-analytics-text="Products">Products</h3>
<ul slot="links">
<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>
Expand Down
85 changes: 85 additions & 0 deletions elements/rh-footer/demo/slotted-social-links.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<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" />
</a>
<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>
<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>
<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>
<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>
<h3 slot="links" data-analytics-text="Products">Products</h3>
<ul slot="links">
<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>
<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>
<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>
<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>
<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>
</ul>
<h3 slot="links" data-analytics-text="Tools">Tools</h3>
<ul slot="links">
<li><a href="https://sso.redhat.com" data-analytics-category="Footer|Tools" data-analytics-text="My account">My account</a></li>
<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>
<li><a href="https://access.redhat.com" data-analytics-category="Footer|Tools" data-analytics-text="Customer support">Customer support</a></li>
<li><a href="https://developers.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Developer resources">Developer resources</a></li>
<li><a href="https://learn.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Learning community">Learning community</a></li>
<li><a href="https://connect.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Partner resources">Partner resources</a></li>
<li><a href="https://redhat.com/en/resources" data-analytics-category="Footer|Tools" data-analytics-text="Resource library">Resource library</a></li>
</ul>
<h3 slot="links" data-analytics-text="Try buy sell">Try, buy & sell</h3>
<ul slot="links">
<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>
<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>
<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>
<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>
<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>
<li><a href="https://cloud.redhat.com/" data-analytics-category="Footer|Tools" data-analytics-text="Console">Console</a></li>
</ul>
<h3 slot="links" data-analytics-text="Communicate">Communicate</h3>
<ul slot="links">
<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>
<li><a href="https://redhat.com/en/contact" data-analytics-category="Footer|Communicate" data-analytics-text="Contact sales">Contact sales</a></li>
<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>
<li><a href="https://redhat.com/en/about/social" data-analytics-category="Footer|Communicate" data-analytics-text="Social">Social</a></li>
</ul>
<rh-footer-block slot="main-secondary">
<h3 slot="header" data-analytics-text="About Red Hat">About Red Hat</h3>
<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>
</rh-footer-block>
<rh-footer-block slot="main-secondary">
<h3 slot="header" data-analytics-text="Subscribe to our newsletter Red Hat Shares">Subscribe to our newsletter, Red Hat Shares</h3>
<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>
</rh-footer-block>

<!-- Universal Footer -->
<rh-footer-universal slot="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">
<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>
<li><a href="https://redhat.com/en/jobs" data-analytics-category="Footer|Corporate" data-analytics-text="Jobs">Jobs</a></li>
<li><a href="https://redhat.com/en/events" data-analytics-category="Footer|Corporate" data-analytics-text="Events">Events</a></li>
<li><a href="https://redhat.com/en/about/office-locations" data-analytics-category="Footer|Corporate" data-analytics-text="Locations">Locations</a></li>
<li><a href="https://redhat.com/en/contact" data-analytics-category="Footer|Corporate" data-analytics-text="Contact Red Hat">Contact Red Hat</a></li>
<li><a href="https://redhat.com/en/blog" data-analytics-category="Footer|Corporate" data-analytics-text="Red Hat Blog">Red Hat Blog</a></li>
<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>
<li><a href="https://coolstuff.redhat.com/" data-analytics-category="Footer|Corporate" data-analytics-text="Cool Stuff Store">Cool Stuff Store</a></li>
<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>
</ul>
<rh-footer-copyright slot="links-secondary">© 2022 Red Hat, Inc.</rh-footer-copyright>
<h3 slot="links-secondary" data-analytics-text="Red Hat legal and privacy links" hidden>Red Hat legal and privacy links</h3>
<ul slot="links-secondary" data-analytics-region="page-footer-bottom-secondary">
<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>
<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>
<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>
<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>
<!-- If your website supports trustarc include this item to add Cookie Preferences to your site. -->
<!-- <li><span id="teconsent"> </span></li> -->
</ul>
</rh-footer-universal>
</rh-footer>

<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>

39 changes: 19 additions & 20 deletions elements/rh-footer/rh-footer-lightdom.css
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
}

:is(rh-footer, rh-footer-universal) :is(h1, h2, h3, h4, h5, h6) {
color: var(--rh-color-text-primary-on-dark, #ffffff);
font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif);
line-height: var(--rh-line-height-heading, 1.3);
}
Expand Down Expand Up @@ -65,6 +66,16 @@ rh-footer-universal [slot^='links'] a {
*/
:is(rh-footer, rh-footer-universal) {
--rh-footer-section-side-gap: var(--rh-space-lg, 16px);

overflow-y: scroll;

& > :not([slot='logo'], rh-footer-universal) {
animation-name: var(--_fallback-animation, deopacitize-footer);
animation-duration: 5s;
animation-timing-function: ease;
animation-delay: 0s;
opacity: var(--_fallback-opacity);
}
}

/* (min-width: --rh-breakpoint-sm) */
Expand Down Expand Up @@ -95,33 +106,21 @@ rh-footer:not(:defined) {
min-height: var(--rh-footer-nojs-min-height, 750px);
}

rh-footer-universal:not(:defined):before {
grid-area: global;
}

/* Adding styles to logo */
rh-footer:not(:defined) > [slot='logo'] {
padding: var(--rh-space-2xl, 32px) var(--_section-side-gap);
}

/* A11y hide child components */
rh-footer:not(:defined) > :not([slot='logo'], rh-footer-universal),
rh-footer-universal:not(:defined) > * {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
@keyframes deopacitize-footer {
0% { --_fallback-opacity: 0; }
99% { --_fallback-opacity: 0; }
100% { --_fallback-opacity: 1; }
}

rh-footer-universal:not(:defined) {
background-color: var(--rh-color-surface-darkest, #151515);
display: block;
width: 100%;
min-height: 176px;

&:before {
grid-area: global;
}
}

rh-footer-universal rh-footer-copyright {
Expand Down
2 changes: 2 additions & 0 deletions elements/rh-footer/rh-footer-social-link.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@
display: none !important;
}

a,
::slotted(a) {
color: var(--_icon-color) !important;
}

a:is(:hover, :focus-within),
::slotted(a:is(:hover, :focus-within)) {
color: var(--_icon-color-hover) !important;
}
24 changes: 20 additions & 4 deletions elements/rh-footer/rh-footer-social-link.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,30 @@
import type { IconNameFor } from '@rhds/icons';

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

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

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

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

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

/** Social link address */
@property() href?: string;

/** Textual label for the social link e.g. "Instagram" */
@property({ attribute: 'accessible-label' }) accessibleLabel?: string;

#logger = new Logger(this);

connectedCallback() {
Expand All @@ -23,12 +33,18 @@ export class RhFooterSocialLink extends LitElement {
}

render() {
return html`<slot></slot>`;
return html`
<a href="${this.href}" aria-label="${this.accessibleLabel}">
<slot>
<rh-icon set="social" icon="${this.icon}"></rh-icon>
</slot>
</a>
`;
}

updated() {
const oldDiv = this.querySelector('a');
if (oldDiv) {
let oldDiv;
if (!isServer && (oldDiv = this.querySelector('a'))) {
const newDiv = oldDiv.cloneNode(true) as Element;
// remove the _rendered content
newDiv.querySelectorAll('[_rendered]').forEach(i => i.remove());
Expand Down
8 changes: 8 additions & 0 deletions elements/rh-footer/rh-footer.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,14 @@
flex-direction: column;
}

:host,
::slotted(rh-footer-universal) {
--_fallback-animation: nothing-doing !important;
--_fallback-opacity: 1 !important;

overflow-y: initial;
}

footer,
.global-base {
--_icon-color: var(--rh-footer-icon-color, var(--rh-color-gray-40, #a3a3a3));
Expand Down
4 changes: 3 additions & 1 deletion elements/rh-video-embed/docs/10-style.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ The video embed element consists of a semitransparent play button with a video t

## Theme

The video embed element is available in both light and dark themes. It can include either a light or a dark play button, depending on the thumbnail image underneath. If an image is lighter, use a dark play button for accessibility and vice versa.
The video embed element is available in both light and dark themes. It can include either a light or a dark play button, depending on the thumbnail image underneath.

The user is currently responsible for setting the play button color and preventing color contrast issues between the button and the video thumbnail. If an image is on a light color palette or if its video thumbnail image uses mostly light colors, use a light theme play button for accessibility and vice versa.

<div class="grid xs-two-columns">
<uxdot-example width-adjustment="420px">
Expand Down
Loading

0 comments on commit dd899cd

Please sign in to comment.