diff --git a/.changeset/breezy-gifts-report.md b/.changeset/breezy-gifts-report.md new file mode 100644 index 00000000000..ecb51491785 --- /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 00000000000..4e4666d0c51 --- /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 00000000000..48557993705 --- /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 00000000000..3bd5754f427 --- /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 00000000000..04935e60bbd --- /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 00000000000..6c0320101e6 --- /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 00000000000..f403856580f --- /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 00000000000..44adf0970b4 --- /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 00000000000..549c0ee4d96 --- /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 00000000000..e48bc88c565 --- /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 00000000000..c5d1b9031be --- /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 00000000000..a74d439a256 --- /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 00000000000..d1fb4240e5b --- /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 00000000000..e9828717a0c --- /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 00000000000..5c276b9397d --- /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 00000000000..b8b9b778243 --- /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 00000000000..3c7a00b8da6 --- /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 00000000000..2f7774bdde8 --- /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 00000000000..5d964456ea1 --- /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 00000000000..0616d964fec --- /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 00000000000..2d036c18fa9 --- /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 00000000000..1c3bcda993c --- /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 00000000000..5e05ce82da5 --- /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 00000000000..a52c28a8e9b --- /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 00000000000..738ce02975d --- /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 00000000000..7121be9d802 --- /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 00000000000..6ccf1d88b43 --- /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 8464d1d7d0c..564e92d0847 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 00000000000..5563e73368a --- /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 00000000000..fb213614f4a --- /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 00000000000..c46dcc5dfe0 --- /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 00000000000..4988edeab1b --- /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 00000000000..a2ad0165e72 --- /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 2dd2463a7ae..f8fca065a74 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 9718e015cca..b17c6806e7d 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 bb785b2e7fc..cc2dfce500f 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 455053f5544..30a54e408e2 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 0545cb59774..ddef9250e73 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 633e43de7d2..4a28b9803bc 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 00000000000..64f5ddb7405 --- /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 4b2d62f739e..c79a3362a90 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 570677da850..75c4c2c0407 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 00000000000..60e847c9707 --- /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 00000000000..a37b9d4363d --- /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 00000000000..7681b53d9a5 --- /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 00000000000..20335f7a922 --- /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 00000000000..628a645a48c --- /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 565262aa71e..00000000000 --- 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 423e56be54d..00000000000 --- 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 5ae7e032ba7..00000000000 --- 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 7ea59ca58cd..00000000000 --- 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 2c7a71a05f9..00000000000 --- 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 a3f46190887..00000000000 --- 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 f4c3886356b..00000000000 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 ef4c8ef6469..00000000000 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 d10957d1462..00000000000 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 00000000000..429a52d76b7 --- /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 00000000000..12a92380c5e --- /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 00000000000..eeeba781548 --- /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 00000000000..faa53109581 --- /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 00000000000..0a9e723eb4d --- /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 00000000000..13c5538dc84 --- /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 00000000000..3b9a5ded403 --- /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 00000000000..086bb6856ac --- /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 0e9631686e6..00000000000 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 91057c38a12..00000000000 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 5f355e7c3fa..00000000000 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 ab1a8903abc..00000000000 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 9ae4d5ec017..00000000000 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 f836f49a53b..9e0975b4c6a 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 71cd62c5483..c8426b19410 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 17081cf0cd9..5133538842d 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 fd5656aa61b..313d39cf3a6 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 469e67647f2..475f96120cf 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 ee5fcfbecab..d0fd2271b5a 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 59576417ff5..ef2119f8a76 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 122742de89d..815a27cafa7 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 10168dceea2..a0f62926684 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 429b02214fa..152fd261ddc 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 c5b2b24f2db..a6b4d0c492c 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 5227a7ff959..df066179b63 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 a7a43bf6e5e..8dba279a197 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 e808eb05f9c..10ae7f021fa 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 39711156c1f..a79f3bfe031 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 00000000000..c2f2f466fb6 --- /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 b82af2f5856..5563e73368a 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 e144ebf2126..c59cb864e06 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 84ee01f9148..d6c0699b38d 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 00000000000..e7896a6a759 --- /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 28e8e3c0f9f..0cef2f13e87 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 4b78b888359..6eb9b2de2db 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 3c9bb4db1e8..bb5ed92aa41 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 00000000000..c0ec5199f60 --- /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 00000000000..6a8c609570c --- /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 00000000000..0aaac70b9fb --- /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 5551993b097..30ea2e0f5c0 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 3bcd2d90cbd..f6855fb9471 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 20b03242162..ffece6b8e38 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 12cbf6a881c..9ac8946ad4f 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 4aa739b23e4..177544ef3e2 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 a179779593c..cc89f08c3d8 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 d7edb71ca4e..818124a7d78 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 2d257f7b5dc..ba2f038c1a3 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 32a666a9b13..82711a13449 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 00000000000..ae8fd195c91 --- /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 00000000000..decad8f799b --- /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 00000000000..5f4fdacc711 --- /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 00000000000..c2d08344f8c --- /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 3da7db68b0a..a4ad08a97b0 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 da3d93647e3..6cc84b872ba 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 bf7a5b8b5bc..00000000000 --- 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 00000000000..7669e8fdb7f --- /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 955a0fe4a2d..e9ed1befd05 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 eeda145c4e1..c5c45b66386 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 573f079c053..a17c822a668 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 4d1cefb8c8a..0056e6473f9 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 dd7a4a04802..998a0754abd 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 4877b053489..110cea7a15b 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 6a3b7999b2e..03c2bda32de 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 00000000000..9f6cd744c2c --- /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 00000000000..614742ca3bb --- /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 00000000000..d4d4e7859eb --- /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 00000000000..b82bffad29b --- /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 00000000000..5ab1de34f0f --- /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 00000000000..47a0100f79e --- /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 00000000000..0427b40a1a8 --- /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 d9af54b2fa9..cfdfe1345aa 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 573fd9041c7..01ca59648f4 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 19bef66a70b..487acf70b8d 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 00000000000..f38a80fe6aa --- /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 729270992ce..5444990626e 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 560d0d41093..3ec2d15242c 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 30c545e8fa7..39c14bd4b52 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 7fde0fbf16b..88257d40fc4 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 00000000000..d6ad424824b --- /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 00000000000..4399e108d01 --- /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 00000000000..337131a21c4 --- /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 00000000000..834c8b3cf05 --- /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 00000000000..29d66b204c6 --- /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 00000000000..89de12facbb --- /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 00000000000..8f535d32efc --- /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 00000000000..1af6a8f30fb --- /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 00000000000..b4fd6e79219 --- /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 00000000000..904c83741f1 --- /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 00000000000..b02547f6a87 --- /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 fd31a67fdd6..4ac3cbad3c9 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 00000000000..152f97f1547 --- /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 69bb902d409..7fd7ef6d42a 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 daab7535234..46cbcc8d454 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 82257487c69..57d9b44f6f3 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 b6fa0b7ff81..35a25c87f8c 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 60f90a546ea..a975c5e0a75 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 d7fed1a0ca7..1a9b76921f7 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 `