diff --git a/.changeset/breezy-gifts-report.md b/.changeset/breezy-gifts-report.md new file mode 100644 index 0000000000..ecb5149178 --- /dev/null +++ b/.changeset/breezy-gifts-report.md @@ -0,0 +1,6 @@ +--- +"@rhds/elements": minor +--- + +``: adds support for `` + \ No newline at end of file diff --git a/.changeset/busy-donuts-beam.md b/.changeset/busy-donuts-beam.md new file mode 100644 index 0000000000..4e4666d0c5 --- /dev/null +++ b/.changeset/busy-donuts-beam.md @@ -0,0 +1,11 @@ +--- +"@rhds/elements": minor +--- + +``: added a variant that adds a subtle border around the avatar image + +```html + +``` diff --git a/.changeset/dark-papayas-attack.md b/.changeset/dark-papayas-attack.md new file mode 100644 index 0000000000..4855799370 --- /dev/null +++ b/.changeset/dark-papayas-attack.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: fix axe accessibility error flagged in ``. diff --git a/.changeset/dark-poets-type.md b/.changeset/dark-poets-type.md new file mode 100644 index 0000000000..3bd5754f42 --- /dev/null +++ b/.changeset/dark-poets-type.md @@ -0,0 +1,6 @@ +--- +"@rhds/elements": patch +--- + +``: corrected layout when contained in a flex parent + \ No newline at end of file diff --git a/.changeset/famous-gifts-sip.md b/.changeset/famous-gifts-sip.md new file mode 100644 index 0000000000..04935e60bb --- /dev/null +++ b/.changeset/famous-gifts-sip.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: updated the background color of inactive box variant tabs diff --git a/.changeset/fresh-eggs-know.md b/.changeset/fresh-eggs-know.md new file mode 100644 index 0000000000..6c0320101e --- /dev/null +++ b/.changeset/fresh-eggs-know.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: corrected text wrap for long links; allow wrapping to a new line diff --git a/.changeset/heavy-poets-slide.md b/.changeset/heavy-poets-slide.md new file mode 100644 index 0000000000..f403856580 --- /dev/null +++ b/.changeset/heavy-poets-slide.md @@ -0,0 +1,12 @@ +--- +"@rhds/elements": minor +--- + +``: add CSS APIs for `text-underline-offset` and `text-decoration` on focus. + +```css +rh-cta.custom-cta { + --rh-cta-focus-text-underline-offset: 5px; + --rh-cta-focus-text-decoration: underline; +} +``` diff --git a/.changeset/lazy-clubs-run.md b/.changeset/lazy-clubs-run.md new file mode 100644 index 0000000000..44adf0970b --- /dev/null +++ b/.changeset/lazy-clubs-run.md @@ -0,0 +1,23 @@ +--- +"@rhds/elements": minor +--- + +``: add the `borderless` and `compact` variants. + +When the `variant="compact"` attribute is present, disclosures will have less padding around the trigger and disclosure content: + +```html + +

Lorem ipsum dolor sit amet.

+ +``` + +When the `variant="borderless"` attribute is present, disclosures will not have borders and will have a gray background when expanded: + +```html + +

Lorem ipsum dolor sit amet.

+ +``` + +Additionally, all disclosures now have subtle rounded borders. diff --git a/.changeset/light-feet-enter.md b/.changeset/light-feet-enter.md new file mode 100644 index 0000000000..549c0ee4d9 --- /dev/null +++ b/.changeset/light-feet-enter.md @@ -0,0 +1,15 @@ +--- +"@rhds/elements": minor +--- + +✨ Added ``. + +A styled link that is used as a slotted child of navigation elements. Can be used in the primary, secondary, subnav, and vertical navigation elements. + +```html + + Home + About + Contact + +``` diff --git a/.changeset/lucky-coins-refuse.md b/.changeset/lucky-coins-refuse.md new file mode 100644 index 0000000000..e48bc88c56 --- /dev/null +++ b/.changeset/lucky-coins-refuse.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: reduce CLS before component upgrades or if JavaScript fails to load. diff --git a/.changeset/neat-ducks-stick.md b/.changeset/neat-ducks-stick.md new file mode 100644 index 0000000000..c5d1b9031b --- /dev/null +++ b/.changeset/neat-ducks-stick.md @@ -0,0 +1,6 @@ +--- +"@rhds/elements": minor +--- + +``: adds support for `` + \ No newline at end of file diff --git a/.changeset/olive-toes-film.md b/.changeset/olive-toes-film.md new file mode 100644 index 0000000000..a74d439a25 --- /dev/null +++ b/.changeset/olive-toes-film.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: update light scheme background colors diff --git a/.changeset/orange-bats-serve.md b/.changeset/orange-bats-serve.md new file mode 100644 index 0000000000..d1fb4240e5 --- /dev/null +++ b/.changeset/orange-bats-serve.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: add a customizable token for disabled stepper icon color diff --git a/.changeset/public-ideas-try.md b/.changeset/public-ideas-try.md new file mode 100644 index 0000000000..e9828717a0 --- /dev/null +++ b/.changeset/public-ideas-try.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: update colors and background colors on dark color schemes diff --git a/.changeset/shy-turkeys-sniff.md b/.changeset/shy-turkeys-sniff.md new file mode 100644 index 0000000000..5c276b9397 --- /dev/null +++ b/.changeset/shy-turkeys-sniff.md @@ -0,0 +1,6 @@ +--- +"@rhds/elements": patch +--- + +``: improved accessibility when slots are empty + \ No newline at end of file diff --git a/.changeset/silent-readers-run.md b/.changeset/silent-readers-run.md new file mode 100644 index 0000000000..b8b9b77824 --- /dev/null +++ b/.changeset/silent-readers-run.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: better responsiveness when inside non-full width containers diff --git a/.changeset/silent-turtles-float.md b/.changeset/silent-turtles-float.md new file mode 100644 index 0000000000..3c7a00b8da --- /dev/null +++ b/.changeset/silent-turtles-float.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: add dark color scheme support diff --git a/.changeset/social-rocks-decide.md b/.changeset/social-rocks-decide.md new file mode 100644 index 0000000000..2f7774bdde --- /dev/null +++ b/.changeset/social-rocks-decide.md @@ -0,0 +1,6 @@ +--- +"@rhds/elements": patch +--- + +``: corrects missing fallback styles + \ No newline at end of file diff --git a/.changeset/thin-cloths-cry.md b/.changeset/thin-cloths-cry.md new file mode 100644 index 0000000000..5d964456ea --- /dev/null +++ b/.changeset/thin-cloths-cry.md @@ -0,0 +1,6 @@ +--- +"@rhds/elements": patch +--- + +``: fixed regression in overflow arrow display + \ No newline at end of file diff --git a/.changeset/tough-cows-hide.md b/.changeset/tough-cows-hide.md new file mode 100644 index 0000000000..0616d964fe --- /dev/null +++ b/.changeset/tough-cows-hide.md @@ -0,0 +1,6 @@ +--- +"@rhds/elements": patch +--- + +``: corrected behavior using `aria-current="page"` attributes or fragment identifier URLs + \ No newline at end of file diff --git a/.changeset/twelve-jokes-spend.md b/.changeset/twelve-jokes-spend.md new file mode 100644 index 0000000000..2d036c18fa --- /dev/null +++ b/.changeset/twelve-jokes-spend.md @@ -0,0 +1,6 @@ +--- +"@rhds/elements": patch +--- + +``: improves accessibility of navigation label for screen readers + \ No newline at end of file diff --git a/.changeset/twelve-wings-go.md b/.changeset/twelve-wings-go.md new file mode 100644 index 0000000000..1c3bcda993 --- /dev/null +++ b/.changeset/twelve-wings-go.md @@ -0,0 +1,6 @@ +--- +"@rhds/elements": patch +--- + +``: corrected content menus opening during command/ctrl + F searches + \ No newline at end of file diff --git a/.changeset/twenty-deer-create.md b/.changeset/twenty-deer-create.md new file mode 100644 index 0000000000..5e05ce82da --- /dev/null +++ b/.changeset/twenty-deer-create.md @@ -0,0 +1,48 @@ +--- +"@rhds/elements": major +--- + +Updating @rhds/icons to version 2.0 + +#### ⛔️ Breaking changes with `` + +Removed `auto-light-dark-mode-fill` UI icon. Please use `auto-light-dark-mode` instead. + + **Before** + + ```html + + ``` + + **After** + + ```html + + ``` + + #### ⚠️ Potentially breaking changes with `` + + ##### ✨ AI Experiences + + The `new` and `new-fill` UI icons have been updated and are no longer using the "sparkle" metaphor. Therefore, this may potentially break implementations and/or uses of `new` or `new-fill` to symbolize AI experiences. + + Where `new` or `new-fill` are used to symbolize AI experiences, please use one of our new AI Experience icon instead: + + - ai-experience + - ai-experience-fill + + **Before** + + ```html + + + ``` + + **After** + + ```html + + + ``` + +Please see [Red Hat Icons version 2.0 release notes](https://github.com/RedHat-UX/red-hat-icons/releases/tag/v2.0.0) for more information about the @rhds/icons version 2.0 update. diff --git a/.changeset/wicked-fans-train.md b/.changeset/wicked-fans-train.md new file mode 100644 index 0000000000..a52c28a8e9 --- /dev/null +++ b/.changeset/wicked-fans-train.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: use status tokens for border, background, and text colors diff --git a/.changeset/witty-toys-sell.md b/.changeset/witty-toys-sell.md new file mode 100644 index 0000000000..738ce02975 --- /dev/null +++ b/.changeset/witty-toys-sell.md @@ -0,0 +1,6 @@ +--- +"@rhds/elements": minor +--- + +``: allows tile to accept all six color palettes + diff --git a/.changeset/yellow-kiwis-enjoy.md b/.changeset/yellow-kiwis-enjoy.md new file mode 100644 index 0000000000..7121be9d80 --- /dev/null +++ b/.changeset/yellow-kiwis-enjoy.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +``: update dark scheme disabled button background color diff --git a/.changeset/yummy-banks-hug.md b/.changeset/yummy-banks-hug.md new file mode 100644 index 0000000000..6ccf1d88b4 --- /dev/null +++ b/.changeset/yummy-banks-hug.md @@ -0,0 +1,6 @@ +--- +"@rhds/elements": minor +--- + +``: adds support for `` + \ No newline at end of file diff --git a/.nvmrc b/.nvmrc index 8464d1d7d0..564e92d084 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v23.9.0 +v24.4.1 diff --git a/docs/patterns/call-to-action/cta-style-variants-desaturated.svg b/docs/patterns/call-to-action/cta-style-variants-desaturated.svg new file mode 100644 index 0000000000..5563e73368 --- /dev/null +++ b/docs/patterns/call-to-action/cta-style-variants-desaturated.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/patterns/call-to-action/examples.md b/docs/patterns/call-to-action/examples.md new file mode 100644 index 0000000000..fb213614f4 --- /dev/null +++ b/docs/patterns/call-to-action/examples.md @@ -0,0 +1,19 @@ +--- +title: Examples +heading: Call to Action +sidenavTitle: Call to Action +layout: layouts/pages/pattern.njk +tags: + - ctaPatterns +subnav: + collection: ctaPatterns + order: 2 +--- + + +

Desaturated Calls to Action

+ + + +

Desaturated Calls to Action on Themed containers

+ diff --git a/docs/patterns/call-to-action/index.md b/docs/patterns/call-to-action/index.md new file mode 100644 index 0000000000..c46dcc5dfe --- /dev/null +++ b/docs/patterns/call-to-action/index.md @@ -0,0 +1,35 @@ +--- +title: Overview +heading: Call to Action +sidenavTitle: Call to Action +layout: layouts/pages/pattern.njk +order: 10 +tags: + - pattern + - ctaPatterns +subnav: + collection: ctaPatterns + order: 1 +--- + + + +## Desaturated + +Design system consumers can theme `` to create desaturated CTAs. + + + A primary and tertiary CTA. The primary has black text and a white background. The tertiary is reversed. + + +See the [examples](/patterns/call-to-action/examples/) page for code and implementation details. Our +CTA docs have [style guidelines](/elements/call-to-action/style/#desaturated) for desaturated CTAs. diff --git a/docs/patterns/call-to-action/patterns/desaturated-cta-themed.html b/docs/patterns/call-to-action/patterns/desaturated-cta-themed.html new file mode 100644 index 0000000000..4988edeab1 --- /dev/null +++ b/docs/patterns/call-to-action/patterns/desaturated-cta-themed.html @@ -0,0 +1,122 @@ + +

About the show

+ +

+ Do you want to stay on top of tech, but without the time spend? + Compiler presents perspectives, topics, and insights from the industry + free from jargon and judgment. We want to discover where technology is + headed beyond the headlines, and create a place for new IT professionals + to learn, grow, and thrive. +

+ + Default + Default Video +
+ Primary + Video +
+ Secondary +
+ Brick + + + + + diff --git a/docs/patterns/call-to-action/patterns/desaturated-cta.html b/docs/patterns/call-to-action/patterns/desaturated-cta.html new file mode 100644 index 0000000000..a2ad0165e7 --- /dev/null +++ b/docs/patterns/call-to-action/patterns/desaturated-cta.html @@ -0,0 +1,125 @@ + +

Desaturated Calls to Action

+

Desaturated is a theme (i.e. a pattern) applied to dark schemed CTAs

+ Default + Default Video +
+ Primary + Video +
+ Secondary +
+ Brick + + + + + diff --git a/docs/styles/styles.css b/docs/styles/styles.css index 2dd2463a7a..f8fca065a7 100644 --- a/docs/styles/styles.css +++ b/docs/styles/styles.css @@ -233,10 +233,14 @@ margin-block: var(--rh-space-lg); } - uxdot-example + figcaption ol { + uxdot-example + figcaption ol, + uxdot-example + figcaption p { color: var(--rh-color-text-secondary); font-size: var(--rh-font-size-body-text-sm, 0.875rem); line-height: var(--rh-line-height-body-text, 1.5); + } + + uxdot-example + figcaption ol { list-style-position: inside; } diff --git a/elements/rh-accordion/rh-accordion-header.ts b/elements/rh-accordion/rh-accordion-header.ts index 9718e015cc..b17c6806e7 100644 --- a/elements/rh-accordion/rh-accordion-header.ts +++ b/elements/rh-accordion/rh-accordion-header.ts @@ -70,8 +70,11 @@ export class RhAccordionHeader extends LitElement { this.#internals.ariaLevel = heading.localName.replace('h', ''); heading.replaceWith(this); } else { - this.#internals.ariaLevel = Math.max(2, this.#heading.level).toString(); + if (!this.#internals.ariaLevel) { + this.#internals.ariaLevel = Math.max(2, this.#heading.level).toString(); + } } + this.removeAttribute('role'); } } diff --git a/elements/rh-audio-player/rh-audio-player-subscribe.css b/elements/rh-audio-player/rh-audio-player-subscribe.css index bb785b2e7f..cc2dfce500 100644 --- a/elements/rh-audio-player/rh-audio-player-subscribe.css +++ b/elements/rh-audio-player/rh-audio-player-subscribe.css @@ -7,7 +7,7 @@ display: block; } -@media (min-width: 576px) { +@container (min-width: 576px) { slot[part='links'] { display: flex; align-items: stretch; diff --git a/elements/rh-audio-player/rh-audio-player.css b/elements/rh-audio-player/rh-audio-player.css index 455053f554..30a54e408e 100644 --- a/elements/rh-audio-player/rh-audio-player.css +++ b/elements/rh-audio-player/rh-audio-player.css @@ -5,6 +5,11 @@ font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', Helvetica, Arial, sans-serif); } +#query-context { + container-type: inline-size; + width: 100%; +} + [hidden] { display: none !important; border-radius: var(--rh-border-radius-default, 3px); @@ -25,7 +30,7 @@ button { color: var(--_text-color); background-color: transparent; border-radius: var(--rh-border-radius-default, 3px); - width: var(--_player-width, 304px); + width: min(100%, var(--_player-width, 304px)); --_player-width: 328px; --_poster-size: 40px; @@ -471,7 +476,7 @@ rh-menu > button:focus { } } -@media (min-width: 360px) { +@container (min-width: 360px) { #container { --_player-width: 360px; --_time-slider-base: 191px; @@ -482,7 +487,7 @@ rh-menu > button:focus { } } -@media (min-width: 576px) { +@container (min-width: 576px) { #container { --_player-width: 503px; --_time-slider-base: 334px; @@ -671,7 +676,7 @@ rh-menu > button:focus { } } -@media (min-width: 768px) { +@container (min-width: 768px) { #container { &:is(.compact,.compact-wide) #volume-tooltip, &.full:not(.expanded) #volume-tooltip { diff --git a/elements/rh-audio-player/rh-audio-player.ts b/elements/rh-audio-player/rh-audio-player.ts index 0545cb5977..ddef9250e7 100644 --- a/elements/rh-audio-player/rh-audio-player.ts +++ b/elements/rh-audio-player/rh-audio-player.ts @@ -352,16 +352,17 @@ export class RhAudioPlayer extends LitElement { const accentColor = !!this.#styles?.getPropertyValue('--rh-audio-player-background-color'); return html` -
+
+
@@ -592,6 +593,7 @@ export class RhAudioPlayer extends LitElement {
+
`; } diff --git a/elements/rh-audio-player/test/rh-audio-player.spec.ts b/elements/rh-audio-player/test/rh-audio-player.spec.ts index 633e43de7d..4a28b9803b 100644 --- a/elements/rh-audio-player/test/rh-audio-player.spec.ts +++ b/elements/rh-audio-player/test/rh-audio-player.spec.ts @@ -387,6 +387,7 @@ describe('', function() { }); }); + describe('clicking rate stepdown', function() { beforeEach(waitForCanplaythrough); beforeEach(async function() { diff --git a/elements/rh-avatar/demo/variants.html b/elements/rh-avatar/demo/variants.html new file mode 100644 index 0000000000..64f5ddb740 --- /dev/null +++ b/elements/rh-avatar/demo/variants.html @@ -0,0 +1,22 @@ +
+ + +
+ + + + + diff --git a/elements/rh-avatar/docs/10-style.md b/elements/rh-avatar/docs/10-style.md index 4b2d62f739..c79a3362a9 100644 --- a/elements/rh-avatar/docs/10-style.md +++ b/elements/rh-avatar/docs/10-style.md @@ -1,22 +1,19 @@ ## Style -An avatar is a placeholder graphic, custom photo, or generated image. It can -be used by itself, but it is often paired with detailed text about the user -including their full name, job title, and company. - -### Anatomy +An avatar is a placeholder graphic, custom photo, or generated image. It can be used by itself, but +it is often paired with text about the user like their full name, job title, company, etc.
- - Anatomy of an avatar group with numbered annotations + + Anatomy of an avatar group with numbered annotations. The first number points to the image, the second points to the avatar's text description.
    -
  1. Thumbnail
    2. -
  2. Job details text
    3. +
  3. Avatar
    4. +
  4. Attribution text
@@ -29,210 +26,94 @@ If they choose not to, a colored pattern will be generated instead based on their name. A specific name is linked to the same pattern, so thumbnails can stay static without storing lots of generated images. - - Image of all avatar groups including default, photo, green squares, purple squares, and blue triangles + + Three avatars. One with a gray placeholder generic icon, one with a generated pattern, and one with a profile image of a person, each with descriptions. ### Plain The avatar thumbnail can be used on its own in places like -[accordions](https://ux.redhat.com/elements/accordion/), -[cards](https://ux.redhat.com/elements/card/), navigations, tables, and more. +[accordions](/elements/accordion/), [cards](/elements/card/), +[navigations](/elements/navigation-primary/), tables, and more. - - Image of a row of only avatar thumbnails + A row of three avatar images without accompanying descriptions -### Link +### Border -Links can be applied to full name or job details text. +An avatar may also include a border for extra visual prominence or if it is used on non-white backgrounds. - -

Warning

-

Do not apply links to full name and job details text at the same time.

- + + A row of three avatar images with borders on a gray background without accompanying descriptions + - - Image of two avatar groups; one has the full name linked and the other has the company name linked + Two avatar groups; one has the full name linked and the other has the company name linked ## Color scheme - All avatar variants are available for both light and dark color schemes. -### Light and dark themes +### Light scheme - - Image of a light theme avatar group + A light scheme avatar group with three avatars and accompanying descriptions. - - Image of a dark theme avatar group + A dark scheme avatar group with three avatars and accompanying descriptions. - - -| Element | Light theme | Dark theme | -|--------------------------|-------------|------------| -| Color - job details text | \#4D4D4D | \#C7C7C7 | - - - ## Configuration -The default size of the avatar thumbnail is `64px x 64px` and the avatar -thumbnail and job details text are horizontally centered. To see alignment -examples, go to the -[Guidelines](https://ux.redhat.com/elements/avatar/guidelines/) page. - - - Image of two avatar groups showing specs like height, width, and centering/alignment - - -### Job details text - -Job details text has specific styles applied to it. - - - Image of two avatar groups showing only job details text left justified and center justified - +If you choose to include text near an avatar, there are specific styles. -| Property | Current Value | -|------------------------------------------|---------------| -| Font weight - full name | Medium | -| Font weight - job title and company name | Regular | -| Font style - company name | Italic | +| Property | Token or Style | +|------------------------------------------|--------------------------------------| +| Font weight - full name | `--rh-font-weight-body-text-medium` | +| Font weight - job title | `--rh-font-weight-body-text-regular` | +| Font style - company name | Italic | ## Space -Space values are the same for all variants and on all breakpoints. - - - Image of all avatar groups with spacing values in between + + Avatars have 16 pixels of space between the image and the description text. - - ## Interaction states -Interaction states are visual representations used to communicate the status of an element or pattern. - -### Hover - - - Image of light theme avatar group hover states - - - - Image of dark theme avatar group hover states - - - - -| Property | Light theme | Dark theme | -|----------------------------------|-------------|------------| -| Color - full name text | \#004080 | \#BEE1FA | -| Text decoration - full name text | Underline | Underline | - - - -### Focus - - - -| Property | Light theme | Dark theme | -|--------------------|-------------|------------| -| Color - focus ring | \#0066CC | \#73BCF7 | - - - - - - Image of light theme avatar group focus states - - - - Image of dark theme avatar group focus states - - - - -| Property | Light theme | Dark theme | -|--------------------|-------------|------------| -| Color - focus ring | \#0066CC | \#73BCF7 | - - - - -### Active - - -

Helpful tip

-

The Active state has the same styles as the Hover state.

- - - - Image of light theme avatar group active states - - - - Image of dark theme avatar group active states - - - - -| Property | Light theme | Dark theme | -|----------------------------------|-------------|------------| -| Color - full name text | \#004080 | \#BEE1FA | -| Text decoration - full name text | Underline | Underline | - - - - +Go to the [Interactions](/foundations/interactions/links/#inline-links) section to learn about +inline link interaction states. diff --git a/elements/rh-avatar/docs/20-guidelines.md b/elements/rh-avatar/docs/20-guidelines.md index 570677da85..75c4c2c040 100644 --- a/elements/rh-avatar/docs/20-guidelines.md +++ b/elements/rh-avatar/docs/20-guidelines.md @@ -9,32 +9,22 @@ room for customization. The avatar thumbnail can be used at different sizes based on our design tokens. The default size is 64px. - - Image of all avatar thumbnail sizes and their pixel values underneath + + Nine different avatar thumbnail sizes ranging from very small to large. - - -| Variation and range | Use case | -|----------------------|-----------------------------------------------------------| -| Small (16px - 32px) | Use these sizes in accordions, data lists, or tables | -| Medium (40px - 80px) | Use these sizes in layouts, bands, or cards | -| Large (96px - 128px) | Use these sizes in profile displays or account interfaces | - - - ## Writing content Separate each part of the job title and company name with a comma. - - Image of three job details text, ranging from short to long + + Three avatars with profile images and description text ranging from short to long. ## Layout @@ -44,55 +34,42 @@ Separate each part of the job title and company name with a comma. The avatar thumbnail and job details text can be horizontally or vertically centered. - - Image of two avatar groups; one is horizontally centered and the other is vertically centered - - - -### Stacking - -There should be a spacing of `--rh-space-3xl` between avatar groups that are stacked vertically. - - - Image of three avatar groups stacked vertically + + Two avatar groups; one is horizontally centered and the other is vertically centered ## Responsive design -### Large breakpoints +### Large screens - - Image of two avatar groups used on large breakpoints; one is aligned left and the other is aligned in the center + Two avatar groups used on large breakpoints; one is aligned left and the other is aligned in the center ### Small breakpoints - - Image of four avatar groups used on small breakpoints; two are aligned left and the other two are aligned in the center + + Two avatars on small breakpoints; One is left aligned and one is center aligned (image and description). ### Line breaks -As breakpoints or containers get smaller, regardless if job details text will -break to more lines, it is still anchored at the top. +As screens or containers get smaller, text is still anchored to the top. - - Image of two avatar groups with specs on top; one has two lines and the other has five lines + + Two avatar groups with design specs overlayed; one has two lines and the other has five lines ## Best practices @@ -101,7 +78,7 @@ break to more lines, it is still anchored at the top.
- + Default avatar thumbnail in a circle next to 'Ada Lovelace, Computer programmer' text - + Default avatar thumbnail in a square next to 'Ada Lovelace, Computer programmer' text + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-avatar/docs/avatar-guidelines-line-breaks.svg b/elements/rh-avatar/docs/avatar-guidelines-line-breaks.svg new file mode 100644 index 0000000000..60e847c970 --- /dev/null +++ b/elements/rh-avatar/docs/avatar-guidelines-line-breaks.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-avatar/docs/avatar-guidelines-responsive-design-large.svg b/elements/rh-avatar/docs/avatar-guidelines-responsive-design-large.svg new file mode 100644 index 0000000000..a37b9d4363 --- /dev/null +++ b/elements/rh-avatar/docs/avatar-guidelines-responsive-design-large.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-avatar/docs/avatar-guidelines-responsive-design-small.svg b/elements/rh-avatar/docs/avatar-guidelines-responsive-design-small.svg new file mode 100644 index 0000000000..7681b53d9a --- /dev/null +++ b/elements/rh-avatar/docs/avatar-guidelines-responsive-design-small.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-avatar/docs/avatar-guidelines-sizes.svg b/elements/rh-avatar/docs/avatar-guidelines-sizes.svg new file mode 100644 index 0000000000..20335f7a92 --- /dev/null +++ b/elements/rh-avatar/docs/avatar-guidelines-sizes.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-avatar/docs/avatar-guidelines-writing-content.svg b/elements/rh-avatar/docs/avatar-guidelines-writing-content.svg new file mode 100644 index 0000000000..628a645a48 --- /dev/null +++ b/elements/rh-avatar/docs/avatar-guidelines-writing-content.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-avatar/docs/avatar-interaction-state-active-theme-dark.svg b/elements/rh-avatar/docs/avatar-interaction-state-active-theme-dark.svg deleted file mode 100644 index 565262aa71..0000000000 --- a/elements/rh-avatar/docs/avatar-interaction-state-active-theme-dark.svg +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-avatar/docs/avatar-interaction-state-active-theme-light.svg b/elements/rh-avatar/docs/avatar-interaction-state-active-theme-light.svg deleted file mode 100644 index 423e56be54..0000000000 --- a/elements/rh-avatar/docs/avatar-interaction-state-active-theme-light.svg +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-avatar/docs/avatar-interaction-state-focus-theme-dark.svg b/elements/rh-avatar/docs/avatar-interaction-state-focus-theme-dark.svg deleted file mode 100644 index 5ae7e032ba..0000000000 --- a/elements/rh-avatar/docs/avatar-interaction-state-focus-theme-dark.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-avatar/docs/avatar-interaction-state-focus-theme-light.svg b/elements/rh-avatar/docs/avatar-interaction-state-focus-theme-light.svg deleted file mode 100644 index 7ea59ca58c..0000000000 --- a/elements/rh-avatar/docs/avatar-interaction-state-focus-theme-light.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-avatar/docs/avatar-interaction-state-hover-theme-dark.svg b/elements/rh-avatar/docs/avatar-interaction-state-hover-theme-dark.svg deleted file mode 100644 index 2c7a71a05f..0000000000 --- a/elements/rh-avatar/docs/avatar-interaction-state-hover-theme-dark.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-avatar/docs/avatar-interaction-state-hover-theme-light.svg b/elements/rh-avatar/docs/avatar-interaction-state-hover-theme-light.svg deleted file mode 100644 index a3f4619088..0000000000 --- a/elements/rh-avatar/docs/avatar-interaction-state-hover-theme-light.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-avatar/docs/avatar-job-details-text.png b/elements/rh-avatar/docs/avatar-job-details-text.png deleted file mode 100755 index f4c3886356..0000000000 Binary files a/elements/rh-avatar/docs/avatar-job-details-text.png and /dev/null differ diff --git a/elements/rh-avatar/docs/avatar-line-breaks.png b/elements/rh-avatar/docs/avatar-line-breaks.png deleted file mode 100755 index ef4c8ef646..0000000000 Binary files a/elements/rh-avatar/docs/avatar-line-breaks.png and /dev/null differ diff --git a/elements/rh-avatar/docs/avatar-plain.png b/elements/rh-avatar/docs/avatar-plain.png deleted file mode 100755 index d10957d146..0000000000 Binary files a/elements/rh-avatar/docs/avatar-plain.png and /dev/null differ diff --git a/elements/rh-avatar/docs/avatar-style-anatomy.svg b/elements/rh-avatar/docs/avatar-style-anatomy.svg new file mode 100644 index 0000000000..429a52d76b --- /dev/null +++ b/elements/rh-avatar/docs/avatar-style-anatomy.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-avatar/docs/avatar-style-scheme-dark.svg b/elements/rh-avatar/docs/avatar-style-scheme-dark.svg new file mode 100644 index 0000000000..12a92380c5 --- /dev/null +++ b/elements/rh-avatar/docs/avatar-style-scheme-dark.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-avatar/docs/avatar-style-scheme-light.svg b/elements/rh-avatar/docs/avatar-style-scheme-light.svg new file mode 100644 index 0000000000..eeeba78154 --- /dev/null +++ b/elements/rh-avatar/docs/avatar-style-scheme-light.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-avatar/docs/avatar-style-space.svg b/elements/rh-avatar/docs/avatar-style-space.svg new file mode 100644 index 0000000000..faa5310958 --- /dev/null +++ b/elements/rh-avatar/docs/avatar-style-space.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-avatar/docs/avatar-style-variants-border.svg b/elements/rh-avatar/docs/avatar-style-variants-border.svg new file mode 100644 index 0000000000..0a9e723eb4 --- /dev/null +++ b/elements/rh-avatar/docs/avatar-style-variants-border.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-avatar/docs/avatar-style-variants-link.svg b/elements/rh-avatar/docs/avatar-style-variants-link.svg new file mode 100644 index 0000000000..13c5538dc8 --- /dev/null +++ b/elements/rh-avatar/docs/avatar-style-variants-link.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-avatar/docs/avatar-style-variants-plain.svg b/elements/rh-avatar/docs/avatar-style-variants-plain.svg new file mode 100644 index 0000000000..3b9a5ded40 --- /dev/null +++ b/elements/rh-avatar/docs/avatar-style-variants-plain.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-avatar/docs/avatar-style-variants.svg b/elements/rh-avatar/docs/avatar-style-variants.svg new file mode 100644 index 0000000000..086bb6856a --- /dev/null +++ b/elements/rh-avatar/docs/avatar-style-variants.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-avatar/docs/avatar-usage-alignment.png b/elements/rh-avatar/docs/avatar-usage-alignment.png deleted file mode 100755 index 0e9631686e..0000000000 Binary files a/elements/rh-avatar/docs/avatar-usage-alignment.png and /dev/null differ diff --git a/elements/rh-avatar/docs/avatar-usage-sizes.png b/elements/rh-avatar/docs/avatar-usage-sizes.png deleted file mode 100755 index 91057c38a1..0000000000 Binary files a/elements/rh-avatar/docs/avatar-usage-sizes.png and /dev/null differ diff --git a/elements/rh-avatar/docs/avatar-usage-stacking.png b/elements/rh-avatar/docs/avatar-usage-stacking.png deleted file mode 100755 index 5f355e7c3f..0000000000 Binary files a/elements/rh-avatar/docs/avatar-usage-stacking.png and /dev/null differ diff --git a/elements/rh-avatar/docs/avatar-variations.png b/elements/rh-avatar/docs/avatar-variations.png deleted file mode 100755 index ab1a8903ab..0000000000 Binary files a/elements/rh-avatar/docs/avatar-variations.png and /dev/null differ diff --git a/elements/rh-avatar/docs/avatar-writing-content.png b/elements/rh-avatar/docs/avatar-writing-content.png deleted file mode 100755 index 9ae4d5ec01..0000000000 Binary files a/elements/rh-avatar/docs/avatar-writing-content.png and /dev/null differ diff --git a/elements/rh-avatar/rh-avatar.css b/elements/rh-avatar/rh-avatar.css index f836f49a53..9e0975b4c6 100644 --- a/elements/rh-avatar/rh-avatar.css +++ b/elements/rh-avatar/rh-avatar.css @@ -105,6 +105,10 @@ svg { border-radius: var(--rh-border-radius-pill, 64px); } +:host([variant='bordered']) :is(canvas, img, svg) { + border: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle); +} + :host([plain]) slot { /* .visually-hidden */ position: absolute; diff --git a/elements/rh-avatar/rh-avatar.ts b/elements/rh-avatar/rh-avatar.ts index 71cd62c548..c8426b1941 100644 --- a/elements/rh-avatar/rh-avatar.ts +++ b/elements/rh-avatar/rh-avatar.ts @@ -39,7 +39,7 @@ export class RhAvatar extends LitElement { /** The auxiliary information about the user, e.g. job title */ @property({ reflect: true }) subtitle?: string; - /** The type of pattern to display. */ + /** Places avatar on the left or on top of the text. */ @property({ reflect: true }) layout?: 'inline' | 'block'; /** The type of pattern to display. */ @@ -48,6 +48,9 @@ export class RhAvatar extends LitElement { /** When true, hides the title and subtitle */ @property({ reflect: true, type: Boolean }) plain = false; + /** Adds a subtle border to the avatar image */ + @property({ reflect: true }) variant?: 'bordered'; + #style?: CSSStyleDeclaration; #pattern?: RandomPatternController; @@ -80,8 +83,11 @@ export class RhAvatar extends LitElement { const { mobile } = this.#screen; return html`
${this.pattern ? html` + ` : this.src ? html` + ` : html` + diff --git a/elements/rh-back-to-top/demo/color-context.html b/elements/rh-back-to-top/demo/color-context.html index 17081cf0cd..5133538842 100644 --- a/elements/rh-back-to-top/demo/color-context.html +++ b/elements/rh-back-to-top/demo/color-context.html @@ -4,9 +4,10 @@

Scroll down or press tab to see the back to top button

Go to top
+ + Back to top -Back to top + ## Style A call to action is text in a container or paired with an icon that directs users to new pages. Depending on the link, content, and hierarchy, a call to action can be used on its own or grouped with other calls to action. @@ -5,11 +11,11 @@ A call to action is text in a container or paired with an icon that directs user ### Anatomy
- + Anatomy image showing calls to action with three annotation numbers denoting the parts below + width="432" + height="70">
    @@ -21,25 +27,24 @@ A call to action is text in a container or paired with an icon that directs user
## Color scheme - Calls to action are available in both light and dark color schemes. ### Light scheme - + Light scheme Primary, Secondary, and Tertiary CTA's. ### Dark scheme - + Dark scheme Primary, Secondary, and Tertiary CTA's. @@ -60,21 +65,28 @@ The Brick variant may display an icon positioned to the left or on top of text. Calls to action may include a video icon. - + Primary, Secondary, and Default variants with video icons to the right of text ### Desaturated -Desaturated calls to action are white and are only available in the dark scheme. Secondary is not included because it looks exactly the same. +Desaturated calls to action are white and should only be used on dark or very saturated surfaces where color contrast might be an issue. The desaturated variant is a [pattern](/patterns/call-to-action/#desaturated) and can be implemented through [theming](/theming/). - - A primary and tertiary CTA. The primary has black text and a white background. The tertiary is reversed. + Four desaturated CTAs on a dark background: primary, secondary, default and brick. + + + + Four desaturated white CTAs on a purple background: primary, secondary, default, and brick. @@ -82,25 +94,13 @@ Desaturated calls to action are white and are only available in the dark scheme. Space values in calls to action do not change even if viewport sizes change. To see space values when calls to action are grouped, go to the [Guidelines](/elements/call-to-action/guidelines/) page. - - Primary, Secondary, and a Tertiary CTA. Each has 32px inline padding and 16px block padding. There's 8px gap between the text and optional arrow. + Primary, Secondary, and a Default CTA. Each has 32px inline padding and 16px block padding. There's 8px gap between the text and optional arrow. ## Interaction states To see live interaction states, go to the [Demos](/elements/call-to-action/demos/) page. - -### Hover - -Call to action styles change slightly on hover. - -- **Primary** - only the background color changes -- **Secondary** - the border disappears and the text and background colors invert -- **Tertiary** - both the text and icon color change - -### Focus and active - -Focus and Active state styles are the same. diff --git a/elements/rh-cta/docs/20-guidelines.md b/elements/rh-cta/docs/20-guidelines.md index fd5656aa61..313d39cf3a 100644 --- a/elements/rh-cta/docs/20-guidelines.md +++ b/elements/rh-cta/docs/20-guidelines.md @@ -22,7 +22,7 @@ Here is guidance on when to use a call to action vs. button. | Element | Intended action | Frequency | -|----------------|--------------------------------------------|-------------------------| +|----------------|--------------------------------------------|------------------------| | Call to action | Direct users to another page when selected | Always | | Button | Perform an action when selected | Depending on the action, users may or may not be directed to another page as the result of the action | @@ -38,9 +38,9 @@ Some calls to action can be used more than once per page depending on their mess |------------------|------------------------------------------------------------------| | Primary | Try to use only once per page for the most important link | | Secondary | Use several times on the same page for important links | -| Tertiary | Use several times on the same page for less important links | +| Default | Use several times on the same page for less important links | | Brick | Use to group several links together in a grid | -| Video | Use to trigger a video within a [dialog](/elements/dialog/) | +| Video | Use to trigger a video within a [dialog](/elements/dialog/) | | Desaturated | Use only in the dark scheme if other styles are duplicative or violate accessibility guidelines | @@ -103,17 +103,17 @@ Most users do not want to spend more time reading than necessary, so keep text a ### Placement -Calls to action can be placed in just about any layout or interface. For normal environments, using any style is acceptable. For small environments, use the Tertiary style. +Calls to action can be placed in just about any layout or interface. For normal environments, using any style is acceptable. For small environments, use the Default style. ### Hierarchy Calls to action follow a hierarchy with the Primary style being the most important. - + Use Primary CTA's once or twice per page. Secondary CTA's can be used several times. Tertiary and Brick can be used many times. + alt="Use Primary CTA's once or twice per page. Secondary CTA's can be used several times. Default and Brick can be used many times." + width="890" + height="236"> ### Bricks @@ -135,7 +135,7 @@ Calls to action are grouped by hierarchy with the Primary style always being fir Four sets of CTAs. In each, the hierarchy cascades from most important to least important, left to right. + height="226"> ### Space when grouped @@ -151,11 +151,11 @@ Spacing between Brick variants is flexible and should be the same as [grid gutte height="264"> - + Four tertiary CTAs with 32px of margin between each one. + alt="Four Default CTAs with 32px of margin between each one." + width="400" + height="88"> diff --git a/elements/rh-cta/docs/40-accessibility.md b/elements/rh-cta/docs/40-accessibility.md index 469e67647f..475f96120c 100644 --- a/elements/rh-cta/docs/40-accessibility.md +++ b/elements/rh-cta/docs/40-accessibility.md @@ -10,10 +10,10 @@ Every call to action style and variant must be able to receive focus and be navigated with a keyboard. - + The four different CTAs, each showing a blue focus ring around it and the words 'Tab' underneath. @@ -42,10 +42,10 @@ A logical focus order helps keyboard users operate our websites. Elements need t The large containers and large text size make calls to action easy to select. - + Groups of variants with touch targets centered on top of each diff --git a/elements/rh-cta/docs/cta-a11y-keyboard-interactions.svg b/elements/rh-cta/docs/cta-a11y-keyboard-interactions.svg index ee5fcfbeca..d0fd2271b5 100644 --- a/elements/rh-cta/docs/cta-a11y-keyboard-interactions.svg +++ b/elements/rh-cta/docs/cta-a11y-keyboard-interactions.svg @@ -1,30 +1,49 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + - - + + + + + + - - + + diff --git a/elements/rh-cta/docs/cta-a11y-touch-targets.svg b/elements/rh-cta/docs/cta-a11y-touch-targets.svg index 59576417ff..ef2119f8a7 100644 --- a/elements/rh-cta/docs/cta-a11y-touch-targets.svg +++ b/elements/rh-cta/docs/cta-a11y-touch-targets.svg @@ -1,21 +1,27 @@ - - - - - - - - + + + + + + + + + + - - - - + + + + + + + + - - + + diff --git a/elements/rh-cta/docs/cta-guidelines-layout-grouping.svg b/elements/rh-cta/docs/cta-guidelines-layout-grouping.svg index 122742de89..815a27cafa 100644 --- a/elements/rh-cta/docs/cta-guidelines-layout-grouping.svg +++ b/elements/rh-cta/docs/cta-guidelines-layout-grouping.svg @@ -1,49 +1,64 @@ - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + - - - - + + + + + + + - - - + + + - - - - + + + + - + + + + - - + + - - + + - - + + diff --git a/elements/rh-cta/docs/cta-guidelines-layout-hierarchy.svg b/elements/rh-cta/docs/cta-guidelines-layout-hierarchy.svg index 10168dceea..a0f6292668 100644 --- a/elements/rh-cta/docs/cta-guidelines-layout-hierarchy.svg +++ b/elements/rh-cta/docs/cta-guidelines-layout-hierarchy.svg @@ -1,35 +1,53 @@ - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + + + + - + - - + + diff --git a/elements/rh-cta/docs/cta-guidelines-layout-space-b.svg b/elements/rh-cta/docs/cta-guidelines-layout-space-b.svg index 429b02214f..152fd261dd 100644 --- a/elements/rh-cta/docs/cta-guidelines-layout-space-b.svg +++ b/elements/rh-cta/docs/cta-guidelines-layout-space-b.svg @@ -1,40 +1,40 @@ - - - - + + + + - - - - - + + + + + + - - - - - + + + + - - - - - + + + + + + - - + - - + + - - + + - - + + - - + + diff --git a/elements/rh-cta/docs/cta-style-anatomy.svg b/elements/rh-cta/docs/cta-style-anatomy.svg index c5b2b24f2d..a6b4d0c492 100644 --- a/elements/rh-cta/docs/cta-style-anatomy.svg +++ b/elements/rh-cta/docs/cta-style-anatomy.svg @@ -1,21 +1,24 @@ - - - - - - - - + + + + - - - - + + + + + + + + + + + - - + + diff --git a/elements/rh-cta/docs/cta-style-scheme-dark.svg b/elements/rh-cta/docs/cta-style-scheme-dark.svg index 5227a7ff95..df066179b6 100644 --- a/elements/rh-cta/docs/cta-style-scheme-dark.svg +++ b/elements/rh-cta/docs/cta-style-scheme-dark.svg @@ -1,15 +1,18 @@ - - + + - + + + + - - - + + + - - + + diff --git a/elements/rh-cta/docs/cta-style-scheme-light.svg b/elements/rh-cta/docs/cta-style-scheme-light.svg index a7a43bf6e5..8dba279a19 100644 --- a/elements/rh-cta/docs/cta-style-scheme-light.svg +++ b/elements/rh-cta/docs/cta-style-scheme-light.svg @@ -1,15 +1,18 @@ - - + + - + + + + - - - + + + - - + + diff --git a/elements/rh-cta/docs/cta-style-space.svg b/elements/rh-cta/docs/cta-style-space.svg index e808eb05f9..10ae7f021f 100644 --- a/elements/rh-cta/docs/cta-style-space.svg +++ b/elements/rh-cta/docs/cta-style-space.svg @@ -1,16 +1,19 @@ - - + + - + + + + - - - + + + - - - - + + + + @@ -30,8 +33,8 @@ - - + + diff --git a/elements/rh-cta/docs/cta-style-variants-bricks.svg b/elements/rh-cta/docs/cta-style-variants-bricks.svg index 39711156c1..a79f3bfe03 100644 --- a/elements/rh-cta/docs/cta-style-variants-bricks.svg +++ b/elements/rh-cta/docs/cta-style-variants-bricks.svg @@ -1,27 +1,34 @@ - + + + + - - - - - - + + + + + + + + - - - - - - + + + + + + + + - + - + - + diff --git a/elements/rh-cta/docs/cta-style-variants-desaturated-2.svg b/elements/rh-cta/docs/cta-style-variants-desaturated-2.svg new file mode 100644 index 0000000000..c2f2f466fb --- /dev/null +++ b/elements/rh-cta/docs/cta-style-variants-desaturated-2.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-cta/docs/cta-style-variants-desaturated.svg b/elements/rh-cta/docs/cta-style-variants-desaturated.svg index b82af2f585..5563e73368 100644 --- a/elements/rh-cta/docs/cta-style-variants-desaturated.svg +++ b/elements/rh-cta/docs/cta-style-variants-desaturated.svg @@ -1,13 +1,23 @@ - - + + - - - + + + + + + + + + + + + + - - + + diff --git a/elements/rh-cta/docs/cta-style-variants-video.svg b/elements/rh-cta/docs/cta-style-variants-video.svg index e144ebf212..c59cb864e0 100644 --- a/elements/rh-cta/docs/cta-style-variants-video.svg +++ b/elements/rh-cta/docs/cta-style-variants-video.svg @@ -1,30 +1,33 @@ - - + + - + - + + + + - + - - - - + + + + - + - + - - + + diff --git a/elements/rh-cta/rh-cta.css b/elements/rh-cta/rh-cta.css index 84ee01f914..d6c0699b38 100644 --- a/elements/rh-cta/rh-cta.css +++ b/elements/rh-cta/rh-cta.css @@ -19,6 +19,7 @@ a, /** Sets the cta text decoration */ text-decoration: var(--_text-decoration) !important; + text-underline-offset: var(--_text-underline-offset) !important; z-index: 2 !important; } @@ -121,6 +122,10 @@ a:focus-within, /** Sets the cta text decoration on focus */ --_text-decoration: var(--_focus-text-decoration); + --_text-underline-offset: + /* Sets the `text-underline-offset` for the cta text on focus */ + var(--rh-cta-focus-text-underline-offset, + var(--rh-cta-hover-text-underline-offset)); border-color: var(--_focus-border-color); background-color: @@ -150,6 +155,9 @@ a:focus-within, /** Sets the cta text decoration on hover */ --_text-decoration: var(--rh-cta-hover-text-decoration, var(--_hover-text-decoration)); + + /* Sets the `text-underline-offset` for the cta text on hover */ + --_text-underline-offset: var(--rh-cta-hover-text-underline-offset); } :host(:hover) #container rh-icon { @@ -312,6 +320,7 @@ a:focus-within, --_focus-inner-border-color: var(--rh-cta-focus-inner-border-color, var(--rh-color-text-primary-on-dark, #ffffff)); + --_focus-text-decoration: var(--rh-cta-focus-text-decoration, none); /** Sets the cta background color on active */ --_active-background-color: @@ -349,6 +358,7 @@ a:focus-within, --_focus-inner-border-color: var(--rh-cta-focus-inner-border-color, var(--rh-color-border-strong)); + --_focus-text-decoration: var(--rh-cta-focus-text-decoration, none); --_active-color: /** Sets the cta color on active. Applicable only for secondary variant */ var(--rh-cta-active-color, var(--rh-color-text-primary)); --_active-background-color: diff --git a/elements/rh-disclosure/demo/variants.html b/elements/rh-disclosure/demo/variants.html new file mode 100644 index 0000000000..e7896a6a75 --- /dev/null +++ b/elements/rh-disclosure/demo/variants.html @@ -0,0 +1,27 @@ +
+ +

Lorem ipsum dolor sit amet consectetur adipisicing, elit. Velit distinctio, nesciunt nobis sit, a dolor, non numquam rerum recusandae, deserunt enim assumenda quidem. Id impedit necessitatibus obcaecati ratione reprehenderit laborum?

+ + + +

Lorem ipsum dolor sit amet consectetur adipisicing, elit. Velit distinctio, nesciunt nobis sit, a dolor, non numquam rerum recusandae, deserunt enim assumenda quidem. Id impedit necessitatibus obcaecati ratione reprehenderit laborum?

+ + + +

Lorem ipsum dolor sit amet consectetur adipisicing, elit. Velit distinctio, nesciunt nobis sit, a dolor, non numquam rerum recusandae, deserunt enim assumenda quidem. Id impedit necessitatibus obcaecati ratione reprehenderit laborum?

+ +
+ + + + diff --git a/elements/rh-disclosure/docs/10-style.md b/elements/rh-disclosure/docs/10-style.md index 28e8e3c0f9..0cef2f13e8 100644 --- a/elements/rh-disclosure/docs/10-style.md +++ b/elements/rh-disclosure/docs/10-style.md @@ -22,6 +22,54 @@ A disclosure is a container that includes a caret icon and a text label, similar +## Variants + +### Box + +The box variant, which is the default style, shows a border around the entire disclosure in all states. A thicker accent border appears on the left when it’s expanded. + + + Two box variant disclosures. One closed, one open on a light color scheme. + + +### Borderless + +The borderless disclosure omits the border and uses `--rh-color-interactive-primary-default` for the title text for improved interactive affordance. + + + Two borderless variant disclosures. One closed, one open on a light color scheme. + + +## Sizes + +The style variants come in both sizes. + +### Default + + + Two default-sized disclosures. The first is the box variant and the second is the borderless variant on a light color scheme. + + +### Compact + +The compact size reduces the font size of the title text and amount of padding around it. + + + Two compact disclosures. The first is the box variant and the second is the borderless variant on a light color scheme. + + ## Color scheme ### Light scheme @@ -59,19 +107,50 @@ Only one additional disclosure can be nested to help organize content better. If Two open disclosures, each with a nested disclosure. The top nested disclosure is closed while the bottom is open. ## Space - - Three disclosures. The top one is closed, the middle one is open, and the bottom one is open with a nested disclosure. There's 16px on the top and bottom of the trigger, 24px on the left and right. There's 24px padding on the open disclosure content. - +A disclosure’s spacing is affected by whether they are the default or compact size. A box and a borderless disclosure used at the same size have the same spacing. + +
+ + A closed default-sized and a closed compact disclosure, each showing the spacing tokens within the disclosure element. The default-sized has 24px spacing on the left and right side and 16px on the top and bottom. The compact version has 16px and 8px respectively. + +
+

Spacing when disclosures are collapsed

+
+
+ +
+ + An open default-sized and an open compact disclosure, each showing the spacing tokens inside the disclosure panel. The default-sized has 24px spacing on the left, right and bottom with 16px between the summary and the panel. The compact version has 16px on the left, right and top, but keeps the 24px on the bottom. + +
+

Spacing when disclosures are expanded

+
+
+ +
+ + An open default-sized and an open compact disclosure, each showing the spacing tokens around the nested disclosure inside the panel. The default-sized has 24px on the left, right and bottom. The compact has 16px on the left and right with 24px on the bottom. + +
+

Spacing when disclosures are nested

+
+
## Interaction states @@ -93,14 +172,6 @@ The entire trigger button surface changes color on hover. height="315"> - - -| Property | Light Scheme | Dark Scheme | -|------------------------------|------------------------------|---------------------------| -| Trigger button surface color | `--rh-color-surface-lighter` | `--rh-color-surface-dark` | - - - ### Focus and Active A focus ring wraps around the entire trigger button in both focus and active states. diff --git a/elements/rh-disclosure/docs/20-guidelines.md b/elements/rh-disclosure/docs/20-guidelines.md index 4b78b88835..6eb9b2de2d 100644 --- a/elements/rh-disclosure/docs/20-guidelines.md +++ b/elements/rh-disclosure/docs/20-guidelines.md @@ -1,8 +1,8 @@ ## Guidelines -Use a disclosure to reveal more information or details about an element or content on a page. +In general, use a disclosure to reveal more information or details about an element or content on a page. -### Disclosure vs. Accordion +### Disclosure vs. accordion Use a disclosure to organize information that is either not critical for users to read or no longer fits on the page due to small screens. A disclosure displays a single section of content whereas an [Accordion](/elements/accordion/) displays multiple sections that can be expanded simultaneously. @@ -13,6 +13,16 @@ Use a disclosure to organize information that is either not critical for users t height="690"> +## Sizes and style variants + +### Sizes + +While the [default size](/elements/disclosure/style/#default) works well in most contexts, the [compact size](/elements/disclosure/style/#compact) can be used for areas with more densely packed content. The compact disclosure can be used in sections where the body copy also uses a font size smaller than `--rh-font-size-body-text-md`. + +### Box vs. borderless + +The [box variant](/elements/disclosure/style/#box), which is the default, should be used when there needs to be clear visual separation from surrounding content. Use the [borderless variant](/elements/disclosure/style/#borderless) where a cleaner, less visually disruptive style is preferred. + ## Writing content ### Title text @@ -31,7 +41,7 @@ Title text should be simple so users know what to expect when they expand a disc ### Panel content -When a disclosure is expanded, content appears below the title text and caret icon. Try and limit panel content to text and simple components only like calls to action. +When a disclosure is expanded, content appears below the title text and caret icon. Try and limit panel content to text and simple elements only like calls to action. ## Behavior @@ -54,8 +64,11 @@ If there is a nested disclosure, it is always collapsed by default until a user A disclosure can be used to organize interactive elements that do not fit on small screens like jump links. - - {% include "./disclosure-guidelines-behavior-jump-links.svg" %} + + An example of how a disclosure can be used to toggle the Jump Links element open and closed. ## Responsive design @@ -65,7 +78,7 @@ A disclosure does not change much as screens get smaller. Four disclosures at various viewports, mobile to desktop. @@ -91,7 +104,7 @@ A disclosure does not change much as screens get smaller. width="418" height="232"> -

Do not stack disclosures, use an [Accordion](/elements/accordion/) instead if more than one section is needed.

+

Do not stack disclosures, use an Accordion instead if more than one section is needed.

@@ -117,7 +130,7 @@ A disclosure does not change much as screens get smaller.

Do not allow the max width of body text to exceed 789px otherwise it is hard to read.

-### Nesting components +### Nesting elements @@ -126,7 +139,7 @@ A disclosure does not change much as screens get smaller. width="1012" height="203"> -

Only a disclosure and other simple components like calls to action can be nested within a disclosure.

+

Only a disclosure and other simple elements, like calls to action, can be nested within a disclosure.

 @@ -136,5 +149,5 @@ A disclosure does not change much as screens get smaller. width="1012" height="203"> -

Do not embed other complex components in a disclosure.

+

Do not embed other complex elements in a disclosure.

 diff --git a/elements/rh-disclosure/docs/40-accessibility.md b/elements/rh-disclosure/docs/40-accessibility.md index 3c9bb4db1e..bb5ed92aa4 100644 --- a/elements/rh-disclosure/docs/40-accessibility.md +++ b/elements/rh-disclosure/docs/40-accessibility.md @@ -2,8 +2,11 @@ The disclosure trigger button and content within the panel can be navigated with a keyboard. - - {% include './disclosure-a11y-keyboard-interactions.svg' %} + + An open disclosure with a CTA and a closed nested disclosure highlighting the three focusable areas. @@ -50,16 +53,22 @@ The disclosure trigger button and content within the panel can be navigated with A logical focus order helps keyboard users operate our websites. Elements need to receive focus in an order that preserves meaning, therefore the focus order should make sense and not jump around randomly. - - {% include './disclosure-a11y-focus-order.svg' %} + + A diagram of an open disclosure (1) with a CTA (2) and a closed nested disclosure (3) highlighting the three focusable areas. ## Touch targets The large disclosure trigger buttons make them easy to select. - - {% include './disclosure-a11y-touch-targets.svg' %} + + A diagram of an open disclosure with a CTA and a closed nested disclosure highlighting the three available touch targets. {% include 'partials/accessibility/ariaguide.md' %} diff --git a/elements/rh-disclosure/docs/disclosure-accessibility-focus-order.svg b/elements/rh-disclosure/docs/disclosure-accessibility-focus-order.svg new file mode 100644 index 0000000000..c0ec5199f6 --- /dev/null +++ b/elements/rh-disclosure/docs/disclosure-accessibility-focus-order.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-accessibility-keyboard-interactions.svg b/elements/rh-disclosure/docs/disclosure-accessibility-keyboard-interactions.svg new file mode 100644 index 0000000000..6a8c609570 --- /dev/null +++ b/elements/rh-disclosure/docs/disclosure-accessibility-keyboard-interactions.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-accessibility-touch-targets.svg b/elements/rh-disclosure/docs/disclosure-accessibility-touch-targets.svg new file mode 100644 index 0000000000..0aaac70b9f --- /dev/null +++ b/elements/rh-disclosure/docs/disclosure-accessibility-touch-targets.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-guidelines-behavior-jump-links.svg b/elements/rh-disclosure/docs/disclosure-guidelines-behavior-jump-links.svg index 5551993b09..30ea2e0f5c 100644 --- a/elements/rh-disclosure/docs/disclosure-guidelines-behavior-jump-links.svg +++ b/elements/rh-disclosure/docs/disclosure-guidelines-behavior-jump-links.svg @@ -1,122 +1,50 @@ - - A closed and open disclosure with jump links in the panel content. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-guidelines-behavior-nested-disclosure.svg b/elements/rh-disclosure/docs/disclosure-guidelines-behavior-nested-disclosure.svg index 3bcd2d90cb..f6855fb947 100644 --- a/elements/rh-disclosure/docs/disclosure-guidelines-behavior-nested-disclosure.svg +++ b/elements/rh-disclosure/docs/disclosure-guidelines-behavior-nested-disclosure.svg @@ -1,47 +1,56 @@ - - - - - - + + + + + + + + + + + + + - - - - - + + + + + + + + + - - - - + + + + + + + - + - + - - - - - - - + + - - + + - - + + - - + + diff --git a/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-1-do.svg b/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-1-do.svg index 20b0324216..ffece6b8e3 100644 --- a/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-1-do.svg +++ b/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-1-do.svg @@ -1,13 +1,16 @@ - - - - - + + + + + + + + - + - - + + diff --git a/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-1-dont.svg b/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-1-dont.svg index 12cbf6a881..9ac8946ad4 100644 --- a/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-1-dont.svg +++ b/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-1-dont.svg @@ -1,31 +1,40 @@ - - - - - + + + + + + + + - - - - - + + + + + + + + - - - - - + + + + + + + + - + - - + + - - + + - - + + diff --git a/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-2-do.svg b/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-2-do.svg index 4aa739b23e..177544ef3e 100644 --- a/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-2-do.svg +++ b/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-2-do.svg @@ -1,39 +1,45 @@ - - - - - - + + + + + + + + + + + + + - - - - - + + + + + + + + + - + - + - - - - - - - + + - - + + - - + + diff --git a/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-2-dont.svg b/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-2-dont.svg index a179779593..cc89f08c3d 100644 --- a/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-2-dont.svg +++ b/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-2-dont.svg @@ -1,40 +1,46 @@ - - - - - - + + + + + + + + + + + + + - - - - - + + + + + + + + + - - + + - + - - - - - - - + + - - + + - - + + diff --git a/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-3-do.svg b/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-3-do.svg index d7edb71ca4..818124a7d7 100644 --- a/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-3-do.svg +++ b/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-3-do.svg @@ -1,47 +1,56 @@ - - - - - - + + + + + + + + + + + + + - - - - - + + + + + + + + + - - - - + + + + + + + - + - + - - - - - - - + + - - + + - - + + - - + + diff --git a/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-3-dont.svg b/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-3-dont.svg index 2d257f7b5d..ba2f038c1a 100644 --- a/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-3-dont.svg +++ b/elements/rh-disclosure/docs/disclosure-guidelines-best-practice-3-dont.svg @@ -1,64 +1,70 @@ - - - - - - + + + + + + + + + + + + + - - - - + + + - - - - + + + + + + + + + - - + + - - - - + + + + - - + + - - - - + + + + - + - - - - - - - + + - - + + - - + + - - + + - - + + diff --git a/elements/rh-disclosure/docs/disclosure-guidelines-disclosure-vs-accordion.svg b/elements/rh-disclosure/docs/disclosure-guidelines-disclosure-vs-accordion.svg index 32a666a9b1..82711a1344 100644 --- a/elements/rh-disclosure/docs/disclosure-guidelines-disclosure-vs-accordion.svg +++ b/elements/rh-disclosure/docs/disclosure-guidelines-disclosure-vs-accordion.svg @@ -1,113 +1,125 @@ - - - - + + + + - - - - + + + + - - + + - - - - + + + + - - + + - - - - + + + + - - + + - - - - + + + + - - - - - - + + + + + + + + + + + + + - - + + + + + + - - - - - - - + + + + + + + + + + + + + + - - - - - + + + + + + + + + - + - - - - - - - + + - + - - - - - - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + diff --git a/elements/rh-disclosure/docs/disclosure-guidelines-responsive-design-1124px-328px.svg b/elements/rh-disclosure/docs/disclosure-guidelines-responsive-design-1124px-328px.svg new file mode 100644 index 0000000000..ae8fd195c9 --- /dev/null +++ b/elements/rh-disclosure/docs/disclosure-guidelines-responsive-design-1124px-328px.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-guidelines-responsive-design-1124px.svg b/elements/rh-disclosure/docs/disclosure-guidelines-responsive-design-1124px.svg new file mode 100644 index 0000000000..decad8f799 --- /dev/null +++ b/elements/rh-disclosure/docs/disclosure-guidelines-responsive-design-1124px.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-guidelines-responsive-design-544px.svg b/elements/rh-disclosure/docs/disclosure-guidelines-responsive-design-544px.svg new file mode 100644 index 0000000000..5f4fdacc71 --- /dev/null +++ b/elements/rh-disclosure/docs/disclosure-guidelines-responsive-design-544px.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-guidelines-responsive-design-768px.svg b/elements/rh-disclosure/docs/disclosure-guidelines-responsive-design-768px.svg new file mode 100644 index 0000000000..c2d08344f8 --- /dev/null +++ b/elements/rh-disclosure/docs/disclosure-guidelines-responsive-design-768px.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-guidelines-responsive-design.svg b/elements/rh-disclosure/docs/disclosure-guidelines-responsive-design.svg index 3da7db68b0..a4ad08a97b 100644 --- a/elements/rh-disclosure/docs/disclosure-guidelines-responsive-design.svg +++ b/elements/rh-disclosure/docs/disclosure-guidelines-responsive-design.svg @@ -1,140 +1,164 @@ - - - - - - + + + + + + + + + + + + + - - - - - + + + + + + + + + - - - - - + + + + + + + + + + + + - - - - - + + + + + + + + + - - - - - + + + + + + + + + + + + - - - - - + + + + + + + + + - - - - - + + + + + + + + + + + + - - - - - + + + + + + + + + - + - - - - - - - + + - + - - - - - - - + + - + - - - - - - - + + - + - - - - - - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + diff --git a/elements/rh-disclosure/docs/disclosure-style-anatomy.svg b/elements/rh-disclosure/docs/disclosure-style-anatomy.svg index da3d93647e..6cc84b872b 100644 --- a/elements/rh-disclosure/docs/disclosure-style-anatomy.svg +++ b/elements/rh-disclosure/docs/disclosure-style-anatomy.svg @@ -1,57 +1,66 @@ - - - - - - + + + + + + + + + + + + + - - - - - + + + + + + + + + - - - - - - - - + + + + + + + + + + + - - - - - - - + + + + + + + - + - - - - - - - + + - - + + - - + + - - + + diff --git a/elements/rh-disclosure/docs/disclosure-style-configuration-nested-disclosure.svg b/elements/rh-disclosure/docs/disclosure-style-configuration-nested-disclosure.svg deleted file mode 100644 index bf7a5b8b5b..0000000000 --- a/elements/rh-disclosure/docs/disclosure-style-configuration-nested-disclosure.svg +++ /dev/null @@ -1,115 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/elements/rh-disclosure/docs/disclosure-style-configuration-nested.svg b/elements/rh-disclosure/docs/disclosure-style-configuration-nested.svg new file mode 100644 index 0000000000..7669e8fdb7 --- /dev/null +++ b/elements/rh-disclosure/docs/disclosure-style-configuration-nested.svg @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-style-configuration.svg b/elements/rh-disclosure/docs/disclosure-style-configuration.svg index 955a0fe4a2..e9ed1befd0 100644 --- a/elements/rh-disclosure/docs/disclosure-style-configuration.svg +++ b/elements/rh-disclosure/docs/disclosure-style-configuration.svg @@ -1,86 +1,97 @@ - - - - + + + + - - - - + + + + + - - + + - - - - + + + + + - - - - - + + + + + + + + + + + + - - - - - + + + + + + + + + - - - - - - + + + + + + + + + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - + - - - - - - - + + - - + + - - + + - - + + - - + + - - + + diff --git a/elements/rh-disclosure/docs/disclosure-style-interaction-states-focus-active-scheme-dark.svg b/elements/rh-disclosure/docs/disclosure-style-interaction-states-focus-active-scheme-dark.svg index eeda145c4e..c5c45b6638 100644 --- a/elements/rh-disclosure/docs/disclosure-style-interaction-states-focus-active-scheme-dark.svg +++ b/elements/rh-disclosure/docs/disclosure-style-interaction-states-focus-active-scheme-dark.svg @@ -1,51 +1,86 @@ - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - + - - + + - - + + - - + + - - + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-style-interaction-states-focus-active-scheme-light.svg b/elements/rh-disclosure/docs/disclosure-style-interaction-states-focus-active-scheme-light.svg index 573f079c05..a17c822a66 100644 --- a/elements/rh-disclosure/docs/disclosure-style-interaction-states-focus-active-scheme-light.svg +++ b/elements/rh-disclosure/docs/disclosure-style-interaction-states-focus-active-scheme-light.svg @@ -1,57 +1,109 @@ - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - - - - + + - - + + - - + + - - + + - - + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-style-interaction-states-hover-scheme-dark.svg b/elements/rh-disclosure/docs/disclosure-style-interaction-states-hover-scheme-dark.svg index 4d1cefb8c8..0056e6473f 100644 --- a/elements/rh-disclosure/docs/disclosure-style-interaction-states-hover-scheme-dark.svg +++ b/elements/rh-disclosure/docs/disclosure-style-interaction-states-hover-scheme-dark.svg @@ -1,77 +1,145 @@ - - - - - - + + + + + + + + - - - - - + + + + + + + + + + + + + + + + - - - + + + + + + + + + - - - - - - - - + + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + + + - + - - + + - + - - + + - - + + + + + + + + + + + - - + + - - + + - - + + diff --git a/elements/rh-disclosure/docs/disclosure-style-interaction-states-hover-scheme-light.svg b/elements/rh-disclosure/docs/disclosure-style-interaction-states-hover-scheme-light.svg index dd7a4a0480..998a0754ab 100644 --- a/elements/rh-disclosure/docs/disclosure-style-interaction-states-hover-scheme-light.svg +++ b/elements/rh-disclosure/docs/disclosure-style-interaction-states-hover-scheme-light.svg @@ -1,83 +1,145 @@ - - - - - - + + + + + + + + - - - - - + + + + + + + + + + + + + + + + - - - + + + + + + + + + - - - - - - - - + + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - + + + + + - - - - + + + + + + + + + + + + + + + + - + - - + + - + - - + + - - + + - - + + - - + + - - + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-style-scheme-dark.svg b/elements/rh-disclosure/docs/disclosure-style-scheme-dark.svg index 4877b05348..110cea7a15 100644 --- a/elements/rh-disclosure/docs/disclosure-style-scheme-dark.svg +++ b/elements/rh-disclosure/docs/disclosure-style-scheme-dark.svg @@ -1,41 +1,80 @@ - - - - - - + + + + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + + + + + + + + + + + + - + - - - - - + + + + + + - - + + + + + + + + + + + - - + + - - + + diff --git a/elements/rh-disclosure/docs/disclosure-style-scheme-light.svg b/elements/rh-disclosure/docs/disclosure-style-scheme-light.svg index 6a3b7999b2..03c2bda32d 100644 --- a/elements/rh-disclosure/docs/disclosure-style-scheme-light.svg +++ b/elements/rh-disclosure/docs/disclosure-style-scheme-light.svg @@ -1,47 +1,80 @@ - - - - - - + + + + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + - - - - - + + + + + + + + + + + + + + + - + - - - - - - - + + - - + + + + + + + + + + + - - + + - - + + diff --git a/elements/rh-disclosure/docs/disclosure-style-sizes-compact.svg b/elements/rh-disclosure/docs/disclosure-style-sizes-compact.svg new file mode 100644 index 0000000000..9f6cd744c2 --- /dev/null +++ b/elements/rh-disclosure/docs/disclosure-style-sizes-compact.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-style-sizes-default.svg b/elements/rh-disclosure/docs/disclosure-style-sizes-default.svg new file mode 100644 index 0000000000..614742ca3b --- /dev/null +++ b/elements/rh-disclosure/docs/disclosure-style-sizes-default.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-style-space-collapsed.svg b/elements/rh-disclosure/docs/disclosure-style-space-collapsed.svg new file mode 100644 index 0000000000..d4d4e7859e --- /dev/null +++ b/elements/rh-disclosure/docs/disclosure-style-space-collapsed.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-style-space-expanded.svg b/elements/rh-disclosure/docs/disclosure-style-space-expanded.svg new file mode 100644 index 0000000000..b82bffad29 --- /dev/null +++ b/elements/rh-disclosure/docs/disclosure-style-space-expanded.svg @@ -0,0 +1,110 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-style-space-nested.svg b/elements/rh-disclosure/docs/disclosure-style-space-nested.svg new file mode 100644 index 0000000000..5ab1de34f0 --- /dev/null +++ b/elements/rh-disclosure/docs/disclosure-style-space-nested.svg @@ -0,0 +1,176 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-style-variants-borderless.svg b/elements/rh-disclosure/docs/disclosure-style-variants-borderless.svg new file mode 100644 index 0000000000..47a0100f79 --- /dev/null +++ b/elements/rh-disclosure/docs/disclosure-style-variants-borderless.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-disclosure/docs/disclosure-style-variants-box.svg b/elements/rh-disclosure/docs/disclosure-style-variants-box.svg new file mode 100644 index 0000000000..0427b40a1a --- /dev/null +++ b/elements/rh-disclosure/docs/disclosure-style-variants-box.svg @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/elements/rh-disclosure/rh-disclosure-lightdom-shim.css b/elements/rh-disclosure/rh-disclosure-lightdom-shim.css index d9af54b2fa..cfdfe1345a 100644 --- a/elements/rh-disclosure/rh-disclosure-lightdom-shim.css +++ b/elements/rh-disclosure/rh-disclosure-lightdom-shim.css @@ -25,3 +25,22 @@ rh-disclosure:not(:defined) { padding-block-end: var(--rh-space-2xl, 32px); } } + +/* Variants */ +rh-disclosure[variant~='compact']:not(:defined) { + padding: var(--rh-space-md, 8px) var(--rh-space-lg, 16px); +} + +rh-disclosure[variant~='borderless']:not(:defined) { + background-color: + light-dark( + var(--rh-color-surface-lighter, #f2f2f2), + var(--rh-color-surface-darker, #1f1f1f) + ); + border: 0; + box-shadow: none; + + &:before { + border-inline-start: 0; + } +} diff --git a/elements/rh-disclosure/rh-disclosure.css b/elements/rh-disclosure/rh-disclosure.css index 573fd9041c..01ca59648f 100644 --- a/elements/rh-disclosure/rh-disclosure.css +++ b/elements/rh-disclosure/rh-disclosure.css @@ -1,11 +1,13 @@ :host { border: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle); + border-radius: var(--rh-border-radius-default, 3px); display: block; font-family: var(--rh-font-family-body-text); } summary { background-color: var(--rh-color-surface); + border-radius: var(--rh-border-radius-default, 3px); color: var(--rh-color-text-primary); cursor: pointer; font-size: var(--rh-font-size-body-text-md, 1rem); @@ -59,6 +61,7 @@ summary { #details-content { background-color: var(--rh-color-surface); + border-radius: var(--rh-border-radius-default, 3px); color: var(--rh-color-text-primary); font-size: var(--rh-font-size-body-text-md, 1rem); line-height: var(--rh-line-height-body-text, 1.5); @@ -85,6 +88,8 @@ details[open] { &:before { content: ''; border-inline-start: 3px solid var(--rh-color-brand-red); + border-start-start-radius: var(--rh-border-radius-default, 3px); + border-end-start-radius: var(--rh-border-radius-default, 3px); position: absolute; z-index: 1; inset-inline-start: -1px; @@ -95,3 +100,76 @@ details[open] { border-inline-start-color: transparent; } } + +/***************************************************************************** + * COMPACT VARIANT + *****************************************************************************/ +:host([variant~='compact']) { + summary { + font-size: var(--rh-font-size-body-text-sm, 0.875rem); + padding: var(--rh-space-md, 8px) var(--rh-space-lg, 16px); + + rh-icon { + --rh-icon-size: 14px; + } + } + + #details-content { + padding-inline: var(--rh-space-lg, 16px); + } +} + +/***************************************************************************** + * BORDERLESS VARIANT + *****************************************************************************/ +:host([variant~='borderless']) { + --_hover-background-color: + light-dark( + var(--rh-color-surface-lighter, #f2f2f2), + var(--rh-color-surface-darker, #1f1f1f) + ); + --_open-background-color: var(--_hover-background-color); + + border: 0; + + summary { + color: var(--rh-color-interactive-primary-default); + + &:hover, + &:focus { + background-color: var(--_hover-background-color); + color: var(--rh-color-interactive-primary-hover); + } + + &:focus { + outline-offset: var(--rh-length-3xs, 2px); + } + } + + details[open] { + background-color: var(--_open-background-color); + border-radius: var(--rh-border-radius-default, 3px); + box-shadow: none; + + &:before { + border-inline-start: 0; + } + + summary { + background-color: var(--_open-background-color); + + &:hover, + &:focus { + background-color: + light-dark( + var(--rh-color-surface-light, #e0e0e0), + var(--rh-color-surface-dark, #383838) + ); + } + } + + #details-content { + background-color: transparent; + } + } +} diff --git a/elements/rh-disclosure/rh-disclosure.ts b/elements/rh-disclosure/rh-disclosure.ts index 19bef66a70..487acf70b8 100644 --- a/elements/rh-disclosure/rh-disclosure.ts +++ b/elements/rh-disclosure/rh-disclosure.ts @@ -68,10 +68,16 @@ export class RhDisclosure extends LitElement { @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette; /** - * Sets the disclosure to be in its open state + * Sets the disclosure to be in its open (expanded) state */ @property({ type: Boolean, reflect: true }) open = false; + /** Borderless: Removes the outer and left border from the disclosure. + * The background is `surface-light`/`surface-dark` when expanded. + * Compact: decreases disclosure padding. + */ + @property({ reflect: true }) variant?: 'borderless' | 'compact'; + /** * Sets the disclosure title via an attribute */ diff --git a/elements/rh-footer/rh-footer-lightdom-shim.css b/elements/rh-footer/rh-footer-lightdom-shim.css new file mode 100644 index 0000000000..f38a80fe6a --- /dev/null +++ b/elements/rh-footer/rh-footer-lightdom-shim.css @@ -0,0 +1,247 @@ +/** + * No JS Experience + */ +rh-footer:not(:defined) { + --_section-side-gap: var(--rh-space-lg, 16px); + + background-color: var(--rh-color-surface-darker, #1f1f1f); + width: 100%; + display: grid; + grid-template-areas: + 'footer' + 'global'; + grid-template-rows: 1fr auto; + + /** @deprecated target `rh-footer:not(:defined) directly */ + min-height: var(--rh-footer-nojs-min-height); + + & > *:not(rh-footer-universal) { + padding-inline: var(--_section-side-gap); + } + + a[slot='logo'] { + padding-block: var(--rh-space-2xl, 32px); + } + + ul[slot='links'] { + display: flex; + flex-direction: column; + gap: var(--rh-footer-links-gap, var(--rh-space-md, 8px)); + margin-block-end: var(--rh-space-3xl, 48px); + } + + [slot='links'] a { + font-size: var(--rh-footer-link-font-size, var(--rh-font-size-body-text-sm, 0.875rem)); + } +} + +rh-footer-social-link:not(:defined), +rh-footer:not(:defined) [slot='social-links'] { + display: none; /* Hide footer-social-link before/sans JS */ +} + +:is(rh-footer, rh-footer-universal):not(:defined) { + p { + color: var(--rh-color-text-secondary-on-dark, #c7c7c7); + } + + & :is(h1, h2, h3, h4, h5, h6) { + &[slot='links'], + &[slot='header'] { + font-size: var(--rh-footer-link-header-font-size, var(--rh-font-size-body-text-sm, 0.875rem)); + font-weight: var(--rh-font-weight-heading-medium, 500); + } + } +} + +rh-footer-universal:not(:defined) { + background-color: var(--rh-color-surface-darkest, #151515); + display: block; + width: 100%; + padding: var(--rh-space-2xl, 32px) var(--rh-space-lg, 16px); + + &:before { + grid-area: global; + } + + & [slot='links-primary'], + & [slot='links-secondary'] { + display: flex; + flex-flow: column wrap; + gap: var(--rh-space-md, 8px); + font-size: var(--rh-font-size-body-text-xs, 0.75rem); + margin: 0; + padding: 0; + } + + /* No JS + DSD: */ + &[ssr-hint-has-slotted] :is(h2, h3, h4)[hidden] { + border: 0; + clip: rect(0, 0, 0, 0); + block-size: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + inline-size: 1px; + } + + & rh-footer-copyright:not(:defined) { + grid-column: -1/1; + padding-block: var(--rh-space-2xl, 32px) var(--rh-space-md, 8px); + font-size: var(--rh-font-size-body-text-xs, 0.75rem); + color: var(--rh-color-text-secondary-on-dark, #c7c7c7); + } +} + +rh-footer-block:not(:defined) { + :is(h1, h2, h3, h4, h5, h6) { + font-size: var(--rh-footer-link-header-font-size, var(--rh-font-size-body-text-sm, 0.875rem)); + font-weight: var(--rh-font-weight-heading-medium, 500); + margin-block-end: var(--rh-space-lg, 16px); + + &:not(:first-of-type) { + margin-block-start: var(--rh-space-lg, 16px); + } + } + + &:not(:first-of-type) { + margin-block-start: var(--rh-space-2xl, 32px); + } +} + +rh-footer:not(:defined) rh-footer-universal:not(:defined) { + /* Only apply space when universal footer is inside rh-footer */ + margin-block-start: var(--rh-space-2xl, 32px); +} + +/* (min-width: --rh-breakpoint-sm) */ +@media screen and (min-width: 768px) { + rh-footer:not(:defined) { + --_section-side-gap: var(--rh-space-2xl, 32px); + } +} + +/* (min-width: --rh-breakpoint-md) */ +@media screen and (min-width: 992px) { + rh-footer:not(:defined) { + gap: var(--rh-space-lg, 16px) var(--rh-space-2xl, 32px); + grid-template-columns: repeat(12, minmax(0, 1fr)); + + a[slot='logo'] { + position: relative; + + &:before { + background-color: var(--rh-color-border-subtle-on-dark, #707070); + block-size: var(--rh-length-4xs, 1px); + content: ''; + inline-size: calc(100% - var(--_section-side-gap) * 2); + inset-block-end: 0; + position: absolute; + } + } + + & > *:not(rh-footer-universal) { + padding: 0; + } + + a[slot='logo'], + :is(h2, h3)[slot='links']:first-of-type, + ul[slot='links']:first-of-type { + padding-inline-start: var(--_section-side-gap); + } + + :is(h2, h3)[slot='links'] { + grid-row-start: 2; + } + + :is(h2, h3)[slot='links'], + ul[slot='links'] { + grid-column-start: span 2; + } + + ul[slot='links'] { + gap: var(--rh-footer-links-gap, var(--rh-space-lg, 16px)); + grid-row: 3 / span 2; + margin: 0; + } + } + + rh-footer:not(:defined) a[slot='logo'], + rh-footer-universal:not(:defined) { + grid-column-start: span 12; + } + + rh-footer-block:not(:defined) { + grid-column: 9 / span 4; + grid-row: 2 / 4; + + &:not(:first-of-type) { + margin-block-start: 0; + } + + &[slot='main-secondary'] { + padding-inline-end: var(--_section-side-gap); + } + + &:nth-of-type(2) { + --_grid-row-max: 5; + + grid-row: 4 / 5; + } + + &:nth-of-type(3) { + --_grid-row-max: 7; + + grid-row: 6 / 7; + } + + &:nth-of-type(4) { + --_grid-row-max: 8; + + grid-row: 7 / 8; + } + } + + rh-footer:not(:defined) :is(h2, h3)[slot='links'], + rh-footer-block:not(:defined):first-of-type { + margin-block-start: var(--rh-space-lg, 16px); + } + + rh-footer-universal:not(:defined) { + padding-block: var(--rh-space-2xl, 32px); + padding-inline: var(--rh-space-7xl, 128px) var(--rh-space-4xl, 64px); + + &[ssr-hint-has-slotted] { + padding-inline: 0; + } + + & ul[slot='links-primary'], + & ul[slot='links-secondary'] { + flex-direction: row; + gap: var(--rh-space-md, 8px) var(--rh-space-xl, 24px); + } + + & ul[slot='links-primary'] { + margin-block-end: var(--rh-space-xl, 24px); + } + + & rh-footer-copyright:not(:defined) { + padding-block: var(--rh-space-md, 8px); + } + } + + rh-footer:not(:defined) rh-footer-universal:not(:defined) { + --_grid-row-max: 8; + + grid-row: var(--_grid-row-max) / var(--_grid-row-max); + } +} + +/* (min-width: --rh-breakpoint-xl) */ +@media screen and (min-width: 1440px) { + rh-footer:not(:defined) { + --_section-side-gap: var(--rh-space-4xl, 64px); + } +} diff --git a/elements/rh-footer/rh-footer-lightdom.css b/elements/rh-footer/rh-footer-lightdom.css index 729270992c..5444990626 100644 --- a/elements/rh-footer/rh-footer-lightdom.css +++ b/elements/rh-footer/rh-footer-lightdom.css @@ -104,14 +104,6 @@ rh-footer [slot='links']:is(h1, h2, h3, h4, h5):nth-of-type(n+5) { color-scheme: only dark; overflow-y: auto; - - & > :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) */ @@ -127,52 +119,3 @@ rh-footer [slot='links']:is(h1, h2, h3, h4, h5):nth-of-type(n+5) { --rh-footer-section-side-gap: var(--rh-space-4xl, 64px); } } - -/** - * No JS Experience - */ -rh-footer:not(:defined) { - background-color: var(--rh-color-surface-darker, #1f1f1f); - width: 100%; - display: grid; - grid-template-areas: - 'footer' - 'global'; - grid-template-rows: 1fr auto; - min-height: var(--rh-footer-nojs-min-height, 750px); -} - -:is(rh-footer, rh-footer-universal):not(:defined) { - p { - color: var(--rh-color-text-secondary-on-dark, #c7c7c7); - } - - & :is(h1, h2, h3, h4, h5, h6) { - &[slot='links'], - &[slot='header'] { - font-size: var(--rh-footer-link-header-font-size, var(--rh-font-size-body-text-sm, 0.875rem)); - font-weight: var(--rh-font-weight-heading-medium, 500); - } - } -} - -@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 { - grid-column: -1/1; -} diff --git a/elements/rh-footer/rh-footer.css b/elements/rh-footer/rh-footer.css index 560d0d4109..3ec2d15242 100644 --- a/elements/rh-footer/rh-footer.css +++ b/elements/rh-footer/rh-footer.css @@ -13,8 +13,9 @@ /* Should only be applied if scripting is disabled */ @media (scripting: none) { :host { - /** Minimum height for the footer when JavaScript is disabled */ - min-height: var(--rh-footer-nojs-min-height, 750px); + /** Minimum height for the footer when JavaScript is disabled + * @deprecated target `rh-footer:not(:defined) directly */ + min-height: var(--rh-footer-nojs-min-height); } } diff --git a/elements/rh-health-index/rh-health-index.css b/elements/rh-health-index/rh-health-index.css index 30c545e8fa..39c14bd4b5 100644 --- a/elements/rh-health-index/rh-health-index.css +++ b/elements/rh-health-index/rh-health-index.css @@ -11,75 +11,75 @@ } .a { - --_bs: var(--rh-color-green-60, #3d7317); - --_bm: light-dark(var(--rh-color-green-70, #204d00), var(--rh-color-green-40, #87bb62)); - --_bl: var(--_bm); - --_fs: var(--rh-color-green-20, #d1f1bb); - --_fm: var(--rh-color-green-60, #3d7317); - --_fl: var(--rh-color-green-20, #d1f1bb); - --_ts: var(--rh-color-green-70, #204d00); - --_tl: light-dark(var(--rh-color-green-70, #204d00), var(--rh-color-green-10, #e9f7df)); - --_accent: var(--rh-color-green-60, #3d7317); + --_border-sm: var(--rh-color-status-success); + --_border-md: transparent; + --_border-lg: var(--rh-color-status-success); + --_fill-sm: var(--rh-color-surface-status-success); + --_fill-md: var(--rh-color-status-success); + --_fill-lg: var(--rh-color-surface-status-success); + --_text-sm: var(--rh-color-text-primary); + --_text-lg: var(--rh-color-text-primary); + --_accent: var(--rh-color-status-success); } .b { - --_bs: var(--rh-color-green-40, #87bb62); - --_bm: light-dark(var(--rh-color-green-60, #3d7317), var(--rh-color-green-30, #afdc8f)); - --_bl: light-dark(var(--rh-color-green-70, #204d00), var(--rh-color-green-20, #d1f1bb)); - --_fs: var(--rh-color-green-10, #e9f7df); - --_fm: var(--rh-color-green-40, #87bb62); - --_fl: var(--rh-color-green-10, #e9f7df); - --_ts: var(--rh-color-green-70, #204d00); - --_tl: light-dark(var(--rh-color-green-70, #204d00), var(--rh-color-green-10, #e9f7df)); - --_accent: var(--rh-color-green-40, #87bb62); + --_border-sm: var(--rh-color-status-success); + --_border-md: transparent; + --_border-lg: var(--rh-color-status-success); + --_fill-sm: var(--rh-color-surface-status-success); + --_fill-md: var(--rh-color-status-success); + --_fill-lg: var(--rh-color-surface-status-success); + --_text-sm: var(--rh-color-text-primary); + --_text-lg: var(--rh-color-text-primary); + --_accent: var(--rh-color-status-success); } .c { - --_bs: var(--rh-color-yellow-30, #ffcc17); - --_bm: light-dark(var(--rh-color-yellow-50, #b98412), var(--rh-color-yellow-10, #fff4cc)); - --_bl: light-dark(var(--rh-color-yellow-70, #73480b), var(--rh-color-yellow-10, #fff4cc)); - --_fs: var(--rh-color-yellow-10, #fff4cc); - --_fm: var(--rh-color-yellow-30, #ffcc17); - --_fl: var(--rh-color-yellow-10, #fff4cc); - --_ts: var(--rh-color-yellow-70, #73480b); - --_tl: var(--_bl); - --_accent: var(--rh-color-yellow-30, #ffcc17); + --_border-sm: var(--rh-color-status-warning); + --_border-md: transparent; + --_border-lg: var(--rh-color-status-warning); + --_fill-sm: var(--rh-color-surface-status-warning); + --_fill-md: var(--rh-color-status-warning); + --_fill-lg: var(--rh-color-surface-status-warning); + --_text-sm: var(--rh-color-text-primary); + --_text-lg: var(--rh-color-text-primary); + --_accent: var(--rh-color-status-warning); } .d { - --_bs: var(--rh-color-orange-40, #f5921b); - --_bm: light-dark(var(--rh-color-orange-60, #9e4a06), var(--rh-color-orange-20, #fccb8f)); - --_bl: light-dark(var(--rh-color-orange-70, #732e00), var(--rh-color-orange-20, #fccb8f)); - --_fs: var(--rh-color-orange-10, #ffe8cc); - --_fm: var(--rh-color-orange-40, #f5921b); - --_fl: var(--rh-color-orange-10, #ffe8cc); - --_ts: var(--rh-color-orange-70, #732e00); - --_tl: light-dark(var(--rh-color-orange-70, #732e00), var(--rh-color-orange-10, #ffe8cc)); - --_accent: var(--rh-color-orange-40, #f5921b); + --_border-sm: var(--rh-color-status-caution); + --_border-md: transparent; + --_border-lg: var(--rh-color-status-caution); + --_fill-sm: var(--rh-color-surface-status-caution); + --_fill-md: var(--rh-color-status-caution); + --_fill-lg: var(--rh-color-surface-status-caution); + --_text-sm: var(--rh-color-text-primary); + --_text-lg: var(--rh-color-text-primary); + --_accent: var(--rh-color-status-caution); } .e { - --_bs: light-dark(var(--rh-color-red-orange-60, #b1380b), var(--rh-color-red-orange-50, #f0561d)); - --_bm: light-dark(var(--rh-color-red-orange-70, #731f00), var(--rh-color-red-orange-30, #f89b78)); - --_bl: var(--_bm); - --_fs: var(--rh-color-red-orange-10, #ffe3d9); - --_fm: var(--_bs); - --_fl: var(--rh-color-red-orange-10, #ffe3d9); - --_ts: var(--rh-color-red-orange-70, #731f00); - --_tl: light-dark(var(--rh-color-red-orange-70, #731f00), var(--rh-color-red-orange-10, #ffe3d9)); - --_accent: var(--_bs); + --_border-sm: var(--rh-color-status-danger); + --_border-md: transparent; + --_border-lg: var(--rh-color-status-danger); + --_fill-sm: var(--rh-color-surface-status-danger); + --_fill-md: var(--rh-color-status-danger); + --_fill-lg: var(--rh-color-surface-status-danger); + --_text-sm: var(--rh-color-text-primary); + --_text-lg: var(--rh-color-text-primary); + --_accent: var(--rh-color-status-danger); } .f { - --_bs: light-dark(var(--rh-color-red-70, #5f0000), var(--rh-color-red-60, #a60000)); - --_bm: light-dark(var(--rh-color-red-70, #5f0000), var(--rh-color-red-40, #f56e6e)); - --_bl: var(--_bm); - --_fs: var(--rh-color-red-10, #fce3e3); - --_fm: var(--rh-color-red-70, #5f0000); - --_fl: var(--rh-color-red-10, #fce3e3); - --_ts: var(--rh-color-red-70, #5f0000); - --_tl: light-dark(var(--rh-color-red-70, #5f0000), var(--rh-color-red-10, #fce3e3)); - --_accent: var(--_bs); + --_border-sm: var(--rh-color-status-danger); + --_border-md: transparent; + --_border-lg: var(--rh-color-status-danger); + --_fill-sm: var(--rh-color-surface-status-danger); + --_fill-md: var(--rh-color-status-danger); + --_fill-lg: var(--rh-color-surface-status-danger); + --_text-sm: var(--rh-color-text-primary); + --_text-lg: var(--rh-color-text-primary); + --_accent: var(--rh-color-status-danger); } #container { @@ -141,9 +141,9 @@ } &.sm { - color: light-dark(var(--_ts), var(--rh-color-text-primary)); - border-color: var(--_bs); - background-color: light-dark(var(--_fs), var(--rh-color-surface-darkest, #151515)); + color: light-dark(var(--_text-sm), var(--rh-color-text-primary)); + border-color: var(--_border-sm); + background-color: light-dark(var(--_fill-sm), var(--rh-color-surface-darkest, #151515)); } &.md { @@ -156,8 +156,8 @@ height: 100%; &.active { - border-color: var(--_bm); - background-color: var(--_fm); + border-color: var(--_border-md); + background-color: var(--_fill-md); } } @@ -170,7 +170,7 @@ width: var(--_box-size); text-align: center; padding-inline: 2px; - color: var(--_tl); + color: var(--_text-lg); &:after { display: block; @@ -192,8 +192,8 @@ inset: -2px -1px; z-index: -1; position: absolute; - background-color: light-dark(var(--_fl), var(--rh-color-surface-darkest, #151515)); - border: var(--rh-border-width-sm, 1px) solid var(--_bl); + background-color: light-dark(var(--_fill-lg), var(--rh-color-surface-darkest, #151515)); + border: var(--rh-border-width-sm, 1px) solid var(--_border-lg); } } } diff --git a/elements/rh-jump-links/rh-jump-link.css b/elements/rh-jump-links/rh-jump-link.css index 7fde0fbf16..88257d40fc 100644 --- a/elements/rh-jump-links/rh-jump-link.css +++ b/elements/rh-jump-links/rh-jump-link.css @@ -1,7 +1,7 @@ :host { display: block; position: relative; - width: max-content; + width: 100%; } a { diff --git a/elements/rh-navigation-link/README.md b/elements/rh-navigation-link/README.md new file mode 100644 index 0000000000..d6ad424824 --- /dev/null +++ b/elements/rh-navigation-link/README.md @@ -0,0 +1,45 @@ +# Navigation Link +A styled link that can be used as a child of navigation elements. + +## Usage + +### Primary navigation + +```html + + Home + About + Contact + +``` + +### Secondary navigation +```html + +
    +
  • Home
    • +
  • About
    • +
  • Contact
    • +
+ +``` + +### Subnav navigation + +```html + + Home + About + Contact + +``` + +### Vertical navigation + +```html + + Home + About + Contact + +``` \ No newline at end of file diff --git a/elements/rh-navigation-link/demo/in-nav-primary.html b/elements/rh-navigation-link/demo/in-nav-primary.html new file mode 100644 index 0000000000..4399e108d0 --- /dev/null +++ b/elements/rh-navigation-link/demo/in-nav-primary.html @@ -0,0 +1,427 @@ + + + AI +

AI Content

+
+
+ +
+
+ +
+
+ +
+
+ + + + Hybrid Cloud +

Hybrid Cloud Content

+
+
+ +
+
+ +
+
+ +
+
+ + + + Products +

Products Content

+
+
+ +
+
+ +
+
+ +
+
+ + + + Top Level + + + Top Level + Top Level 2 + + + + + Red Hat Summit logo + + + + + + + + + + + + + + + + + + Console + Docs + Support + + + + Search +
+ + +
+ + + + + For you +

Recommendations for you

+

As you browse redhat.com, we'll recommend resources you may like. For now, try these.

+ + + + + + My Red Hat + +
+
+
+ + +
+
Login: jdoe@redhat.com
+
Account number: 0123456
+
jdoe+alias@redhat.com
+
+
+ + +
+
+ Log out +
+
+
+
+
    +
  • + Account details +

    Edit your contact info, password, location preferences, and errata notifications.

    +
    • +
  • + Community profile +

    Fill out your public profile and control what content you follow.

    +
    • +
  • + My Red Hat +

    Get a customized view of resources to help you use our products, solutions, and services.

    +
    • +
  • + Training & certification +

    Access your Red Hat Learning Subscription, courses, and exams.

    +
    • +
+
+
+ +
+
+ + + + +
+

Mock Page content Link outside

+
+ + + + + + diff --git a/elements/rh-navigation-link/demo/in-nav-secondary.html b/elements/rh-navigation-link/demo/in-nav-secondary.html new file mode 100644 index 0000000000..337131a21c --- /dev/null +++ b/elements/rh-navigation-link/demo/in-nav-secondary.html @@ -0,0 +1,18 @@ + +
    +
  • AI
    • +
  • Hybrid Cloud
    • +
  • Products
    • +
  • Learn
    • +
  • Link
    • +
+ Call to Action + + + + + diff --git a/elements/rh-navigation-link/demo/in-subnav.html b/elements/rh-navigation-link/demo/in-subnav.html new file mode 100644 index 0000000000..834c8b3cf0 --- /dev/null +++ b/elements/rh-navigation-link/demo/in-subnav.html @@ -0,0 +1,16 @@ + + Users + Containers + Databases + Servers + System + Network + Cloud + + + + + diff --git a/elements/rh-navigation-link/demo/index.html b/elements/rh-navigation-link/demo/index.html new file mode 100644 index 0000000000..29d66b204c --- /dev/null +++ b/elements/rh-navigation-link/demo/index.html @@ -0,0 +1,6 @@ +Link +Slotted a href Link +Containers + diff --git a/elements/rh-navigation-link/docs/00-overview.md b/elements/rh-navigation-link/docs/00-overview.md new file mode 100644 index 0000000000..89de12facb --- /dev/null +++ b/elements/rh-navigation-link/docs/00-overview.md @@ -0,0 +1,3 @@ +## When to use + +- When you need to add a link as part of a navigation element, such as the primary, secondary, subnav, or vertical navigation elements. \ No newline at end of file diff --git a/elements/rh-navigation-link/docs/data.yaml b/elements/rh-navigation-link/docs/data.yaml new file mode 100644 index 0000000000..8f535d32ef --- /dev/null +++ b/elements/rh-navigation-link/docs/data.yaml @@ -0,0 +1,15 @@ +$schema: ../../../docs/schemas/element-data.schema.json +tagName: rh-navigation-link +name: Navigation Link +type: element +overallStatus: ready +libraries: + figma: ready + rhds: ready + shared: planned + docs: planned +relatedItems: + - rh-navigation-primary + - rh-navigation-secondary + - rh-navigation-vertical + - rh-subnav \ No newline at end of file diff --git a/elements/rh-navigation-link/rh-navigation-link.css b/elements/rh-navigation-link/rh-navigation-link.css new file mode 100644 index 0000000000..1af6a8f30f --- /dev/null +++ b/elements/rh-navigation-link/rh-navigation-link.css @@ -0,0 +1,74 @@ +/** +Requirements: +- The link should be able to restyle itself based off the container (.compact) mode, +this is needed so that the link can be used in a hamburger menu if included in the +navigation's main content region. +- The link style should be able to be customized when used in a secondary content region. +**/ + +:host { + display: contents; +} + +#container { + display: var(--_navigation-link-container-display, block); + inline-size: var(--_navigation-link-container-inline-size, fit-content); + block-size: var(--_navigation-link-container-block-size, auto); + padding: var(--_navigation-link-container-padding, initial); + align-items: var(--_navigation-link-container-align-items, initial); + position: var(--_navigation-link-container-position, initial); +} + +a, +::slotted(a) { + position: relative; + display: var(--_navigation-link-display, inline); + color: var(--_navigation-link-color, var(--rh-color-text-primary)) !important; + font-size: var(--_navigation-link-font-size, 1rem) !important; + font-weight: var(--_navigation-link-font-weight, initial) !important; + block-size: var(--_navigation-link-block-size, auto); + inline-size: var(--_navigation-link-inline-size, auto); + align-items: var(--_navigation-link-align-items, initial); + align-content: var(--_navigation-link-align-content, initial); + padding: var(--_navigation-link-padding, 0); + text-decoration: var(--_navigation-link-text-decoration, none) !important; + gap: var(--_navigation-link-gap, initial); + background-color: var(--_navigation-link-background-color, transparent); +} + +a:before, +::slotted(a):before { + content: ''; + position: absolute; + inset: 0; + border-inline-start: + var(--_navigation-link-before-border-inline-start-width, 0) + solid + var(--_navigation-link-before-border-inline-start-color, transparent); +} + +a:is(:hover, :hover:focus-visible, :focus-visible, :active), +::slotted(:is(a:hover, a:hover:focus-visible, :focus-visible, :active)) { + --_navigation-link-background-color: + var(--_navigation-link-hover-background-color, + light-dark(transparent, transparent)) !important; + --_navigation-link-color: + var(--_navigation-link-color-hover, + var(--rh-color-interactive-primary-hover)) !important; + + text-underline-offset: var(--_navigation-link-text-underline-offset, 4px) !important; + text-decoration-color: + var(--_navigation-link-text-decoration-color, + light-dark(var(--rh-color-gray-50, #707070), + var(--rh-color-gray-40, #a3a3a3))) !important; + text-decoration-line: var(--_navigation-link-text-decoration-line, underline) !important; + text-decoration-style: var(--_navigation-link-text-decoration-style, dashed) !important; + text-decoration-skip-ink: auto !important; +} + +a:is(:focus-visible, :hover:focus-visible, :focus-visible, :active), +::slotted(a:is(:focus-visible, :hover:focus-visible, :focus-visible, :active)) { + outline-offset: var(--_navigation-link-focus-outline-offset, 0); + outline: var(--rh-border-width-md, 2px) solid var(--rh-color-interactive-primary-default); + border-radius: var(--rh-border-radius-default, 3px); +} diff --git a/elements/rh-navigation-link/rh-navigation-link.ts b/elements/rh-navigation-link/rh-navigation-link.ts new file mode 100644 index 0000000000..b4fd6e7921 --- /dev/null +++ b/elements/rh-navigation-link/rh-navigation-link.ts @@ -0,0 +1,89 @@ +import type { IconNameFor, IconSetName } from '@rhds/icons'; + +import { LitElement, html, type TemplateResult } from 'lit'; +import { customElement } from 'lit/decorators/custom-element.js'; +import { property } from 'lit/decorators/property.js'; +import { ifDefined } from 'lit-html/directives/if-defined.js'; + +import { themable } from '@rhds/elements/lib/themable.js'; + +import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js'; + +import styles from './rh-navigation-link.css'; + +/** + * Navigation Link is a link that is used as a child of the primary, secondary, subnav, and vertical navigation elements. + * The link is intrinsically an list item and should not be used outside of navigation elements that define the parent + * list element. + * + * @summary A link that can be used as a child of navigation elements. + * @alias navigation-link + */ +@customElement('rh-navigation-link') +@themable +export class RhNavigationLink extends LitElement { + static readonly styles: CSSStyleSheet[] = [styles]; + + static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; + + // eslint-disable-next-line no-unused-private-class-members + #internals = InternalsController.of(this, { role: 'listitem' }); + + /** Shorthand for the `icon` slot, the value is icon name */ + @property() icon?: IconNameFor; + + /** Icon set for the `icon` property - 'ui' by default */ + @property({ attribute: 'icon-set' }) iconSet?: IconSetName; + + /** The URL to navigate to when the link is clicked */ + @property({ reflect: true }) href?: string; + + /** + * Indicates that this link refers to the current page for accessibility; used with the `href` attribute. + * Sets the `aria-current` attribute to 'page' on the anchor element internally in the shadow DOM. + */ + @property({ attribute: 'current-page', type: Boolean }) currentPage? = false; + + override async scheduleUpdate() { + if (this.icon) { + await import('@rhds/elements/rh-icon/rh-icon.js'); + } + super.scheduleUpdate(); + } + + render(): TemplateResult<1> { + const isCurrentPage = this.currentPage ? 'page' : undefined; + + return html` +
+ ${this.href ? html` + + + + ${!this.icon ? html`` + : html`` + } + + + + ` + : html`` + } +
+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'rh-navigation-link': RhNavigationLink; + } +} diff --git a/elements/rh-navigation-link/test/rh-navigation-link.e2e.ts b/elements/rh-navigation-link/test/rh-navigation-link.e2e.ts new file mode 100644 index 0000000000..904c83741f --- /dev/null +++ b/elements/rh-navigation-link/test/rh-navigation-link.e2e.ts @@ -0,0 +1,25 @@ +import { test } from '@playwright/test'; +import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js'; +import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js'; + +const tagName = 'rh-navigation-link'; + +test.describe(tagName, () => { + test('snapshot', async ({ page }) => { + const componentPage = new PfeDemoPage(page, tagName); + await componentPage.navigate(); + await componentPage.snapshot(); + }); + + test('ssr', async ({ browser }) => { + const fixture = new SSRPage({ + tagName, + browser, + demoDir: new URL('../demo/', import.meta.url), + importSpecifiers: [ + `@rhds/elements/${tagName}/${tagName}.js`, + ], + }); + await fixture.snapshots(); + }); +}); diff --git a/elements/rh-navigation-link/test/rh-navigation-link.spec.ts b/elements/rh-navigation-link/test/rh-navigation-link.spec.ts new file mode 100644 index 0000000000..b02547f6a8 --- /dev/null +++ b/elements/rh-navigation-link/test/rh-navigation-link.spec.ts @@ -0,0 +1,66 @@ +import { expect, fixture } from '@open-wc/testing'; +import { html, LitElement } from 'lit'; +import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js'; + +import { RhNavigationLink } from '@rhds/elements/rh-navigation-link/rh-navigation-link.js'; + +class MockNav extends LitElement { + render() { + return ` +
+ +
+ `; + } +} +customElements.define('mock-nav', MockNav); + +let element: RhNavigationLink; +let list: MockNav; + +describe('', function() { + describe('simply instantiating', function() { + it('imperatively instantiates', function() { + expect(document.createElement('rh-navigation-link')).to.be.an.instanceof(RhNavigationLink); + }); + + it('should upgrade', async function() { + element = await fixture(`Link`); + const klass = customElements.get('rh-navigation-link'); + expect(element) + .to.be.an.instanceOf(klass) + .and + .to.be.an.instanceOf(RhNavigationLink); + }); + }); + + describe('accessibility', function() { + beforeEach(async function() { + element = await fixture(`Link`); + list = await fixture(`${element}`); + }); + beforeEach(async () => { + await list.updateComplete; + await element.updateComplete; + }); + + it('is accessible', async function() { + /* we ignore the aria-allowed-role as the rh-navigation-link applies listitem role in element internals */ + await Promise.resolve(expect(element).to.be.accessible({ + ignoredRules: ['aria-allowed-role'], + })); + }); + + describe('adding the current-page attribute', function() { + beforeEach(async function() { + element.currentPage = true; + await element.updateComplete; + }); + + it('should set the aria-current attribute to page on the anchor element', async function() { + const currentpage = element.shadowRoot?.querySelector('a')?.getAttribute('aria-current'); + expect(currentpage).to.equal('page'); + }); + }); + }); +}); diff --git a/elements/rh-navigation-primary/demo/links-as-top-level.html b/elements/rh-navigation-primary/demo/links-as-top-level.html index fd31a67fdd..4ac3cbad3c 100644 --- a/elements/rh-navigation-primary/demo/links-as-top-level.html +++ b/elements/rh-navigation-primary/demo/links-as-top-level.html @@ -1,4 +1,4 @@ - + AI diff --git a/elements/rh-navigation-primary/demo/no-secondary-items.html b/elements/rh-navigation-primary/demo/no-secondary-items.html new file mode 100644 index 0000000000..152f97f154 --- /dev/null +++ b/elements/rh-navigation-primary/demo/no-secondary-items.html @@ -0,0 +1,308 @@ + + + AI +

AI Content

+
+
+ +
+
+ +
+
+ +
+
+ + + + Hybrid Cloud +

Hybrid Cloud Content

+
+
+ +
+
+ +
+
+ +
+
+ + + + Products +

Products Content

+
+
+ +
+
+ +
+
+ +
+
+ + + + Learn + Learn Content + + + + Partners + Partners Content + + + +
+

Mock Page content Link outside

+
+ + + + + + diff --git a/elements/rh-navigation-primary/demo/not-defined.html b/elements/rh-navigation-primary/demo/not-defined.html index 69bb902d40..7fd7ef6d42 100644 --- a/elements/rh-navigation-primary/demo/not-defined.html +++ b/elements/rh-navigation-primary/demo/not-defined.html @@ -1,4 +1,4 @@ - + AI
AI Content
diff --git a/elements/rh-navigation-primary/demo/translation.html b/elements/rh-navigation-primary/demo/translation.html index daab753523..46cbcc8d45 100644 --- a/elements/rh-navigation-primary/demo/translation.html +++ b/elements/rh-navigation-primary/demo/translation.html @@ -1,4 +1,4 @@ - + KI AI Content diff --git a/elements/rh-navigation-primary/rh-navigation-primary-item.css b/elements/rh-navigation-primary/rh-navigation-primary-item.css index 82257487c6..57d9b44f6f 100644 --- a/elements/rh-navigation-primary/rh-navigation-primary-item.css +++ b/elements/rh-navigation-primary/rh-navigation-primary-item.css @@ -122,6 +122,13 @@ } } } + + &:not([open]) { + & #details-content { + /* ensures the content is not visible to cmd+f unless the details are open */ + visibility: hidden; + } + } } /* Variant States */ diff --git a/elements/rh-navigation-primary/rh-navigation-primary-lightdom.css b/elements/rh-navigation-primary/rh-navigation-primary-lightdom.css index b6fa0b7ff8..35a25c87f8 100644 --- a/elements/rh-navigation-primary/rh-navigation-primary-lightdom.css +++ b/elements/rh-navigation-primary/rh-navigation-primary-lightdom.css @@ -1,5 +1,5 @@ rh-navigation-primary { - & rh-navigation-primary-item { + & :is(rh-navigation-primary-item, rh-navigation-link) { color: var(--rh-color-text-primary) !important; & a { @@ -34,16 +34,18 @@ rh-navigation-primary { height: 30px; } - &:nth-child(1 of rh-navigation-primary-item[slot='links']) { + &:nth-child(1 of :is(rh-navigation-primary-item, rh-navigation-link)[slot='links']) { --_padding-inline-start: 0; + --_navigation-link-container-padding: 0 8px 0 0; & a { margin-inline-start: 0; } } - &:nth-last-child(1 of rh-navigation-primary-item[slot='links']) { + &:nth-last-child(1 of :is(rh-navigation-primary-item, rh-navigation-link)[slot='links']) { --_padding-inline-end: 0; + --_navigation-link-container-padding: 0 0 0 8px; &:after { border-inline-end-color: transparent; @@ -55,4 +57,34 @@ rh-navigation-primary { } } } + + & rh-navigation-link { + &:not([slot]) { + --_navigation-link-container-inline-size: 100%; + --_navigation-link-inline-size: 100%; + + display: flex; + block-size: 100%; + inline-size: 100%; + border-block-start: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle); + + @container (min-width: 1200px) { + --_navigation-link-container-inline-size: fit-content; + --_navigation-link-container-display: inline-block; + --_navigation-link-inline-size: fit-content; + + display: block; + inline-size: fit-content; + border-block-start: none; + } + } + + &:nth-last-child(1 of rh-navigation-link:not([slot])) { + border-block-end: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle); + + @container (min-width: 1200px) { + border-block-end: none; + } + } + } } diff --git a/elements/rh-navigation-primary/rh-navigation-primary.css b/elements/rh-navigation-primary/rh-navigation-primary.css index 60f90a546e..a975c5e0a7 100644 --- a/elements/rh-navigation-primary/rh-navigation-primary.css +++ b/elements/rh-navigation-primary/rh-navigation-primary.css @@ -42,6 +42,23 @@ color-scheme: only dark; } +[hidden] { + display: none !important; +} + +.visually-hidden { + position: absolute !important; + block-size: 1px; + inline-size: 1px; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + white-space: nowrap; + border: 0; + padding: 0 !important; + margin: -1px !important; +} + #bar { position: relative; display: grid; @@ -238,6 +255,22 @@ & #details-content { display: none; } + + &:not([open]) { + & #details-content { + /* ensures the content is not visible to cmd+f unless the details are open */ + visibility: hidden; + } + } + + & ::slotted(rh-navigation-link) { + --_navigation-link-container-align-items: start; + --_navigation-link-container-display: flex; + --_navigation-link-container-block-size: 100%; + --_navigation-link-padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px); + --_navigation-link-display: flex; + --_navigation-link-inline-size: 100%; + } } #secondary { @@ -268,6 +301,11 @@ @container navigation-primary (min-width: 1440px) { display: flex; flex-direction: row; + + & ::slotted(rh-navigation-link) { + --_navigation-link-padding: var(--rh-space-md, 8px); + --_navigation-link-font-size: var(--rh-font-size-body-text-sm, 0.875rem); + } } } @@ -308,6 +346,28 @@ box-sizing: border-box; } } + + & ::slotted(rh-navigation-link) { + --_navigation-link-container-align-items: center; + --_navigation-link-container-display: flex; + --_navigation-link-container-block-size: 100%; + --_navigation-link-container-position: relative; + --_navigation-link-align-items: center; + --_navigation-link-block-size: 100%; + --_navigation-link-inline-size: fit-content; + + /* something weird happens here editor isn't satisfied + * with the line breaks and value of the token + */ + /* stylelint-disable-next-line rhds/token-values */ + --_navigation-link-color-hover: + var(--rh-color-text-primary, + light-dark( + var(--rh-color-text-primary-on-light, #151515), + var(--rh-color-text-primary-on-dark, #ffffff)) + ); + --_navigation-link-padding: 0 var(--rh-space-lg, 16px); + } } #details-content { diff --git a/elements/rh-navigation-primary/rh-navigation-primary.ts b/elements/rh-navigation-primary/rh-navigation-primary.ts index d7fed1a0ca..1a9b76921f 100644 --- a/elements/rh-navigation-primary/rh-navigation-primary.ts +++ b/elements/rh-navigation-primary/rh-navigation-primary.ts @@ -54,6 +54,7 @@ export class RhNavigationPrimary extends LitElement { #slots = new SlotController(this, 'logo', 'summary', + 'event', 'links', 'dropdowns', null, @@ -80,6 +81,10 @@ export class RhNavigationPrimary extends LitElement { @query('summary') private _hamburgerSummary!: HTMLElement; + @query('#title') + private _title!: HTMLHeadingElement; + + /** * Sets the mobile toggle (hamburger) text, used for translations, defaults to 'Menu' */ @@ -89,21 +94,11 @@ export class RhNavigationPrimary extends LitElement { @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: NavigationPrimaryPalette; /** - * Customize the default `aria-label` on the `