From df8dd2388c959083a03873419f44bcd010a69f32 Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Mon, 12 May 2025 15:29:59 -0400 Subject: [PATCH 1/2] docs(jump links): Updates images for v6. --- .../jump-link/img/jump-links-elements.svg | 35 +++ .../jump-link/img/jump-links-horizontal.svg | 139 +++++++++++ .../jump-link/img/jump-links-mobile.svg | 233 ++++++++++++++++++ .../img/jump-links-placement-left.svg | 163 ++++++++++++ .../img/jump-links-placement-right.svg | 163 ++++++++++++ .../jump-link/img/jump-links-subsections.svg | 150 +++++++++++ .../jump-link/img/jump-links-vertical.svg | 140 +++++++++++ .../components/jump-link/jump-link.md | 31 ++- 8 files changed, 1046 insertions(+), 8 deletions(-) create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-elements.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-horizontal.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-mobile.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-placement-left.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-placement-right.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-subsections.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-vertical.svg diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-elements.svg new file mode 100644 index 0000000000..d4c28fb1ab --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-elements.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-horizontal.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-horizontal.svg new file mode 100644 index 0000000000..644bbaa80c --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-horizontal.svg @@ -0,0 +1,139 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-mobile.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-mobile.svg new file mode 100644 index 0000000000..838aa5bd84 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-mobile.svg @@ -0,0 +1,233 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-placement-left.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-placement-left.svg new file mode 100644 index 0000000000..c61ca4d05f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-placement-left.svg @@ -0,0 +1,163 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-placement-right.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-placement-right.svg new file mode 100644 index 0000000000..76700c49ee --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-placement-right.svg @@ -0,0 +1,163 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-subsections.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-subsections.svg new file mode 100644 index 0000000000..23c3615e3f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-subsections.svg @@ -0,0 +1,150 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-vertical.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-vertical.svg new file mode 100644 index 0000000000..405a07d680 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-vertical.svg @@ -0,0 +1,140 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/jump-link.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/jump-link.md index c4665d7852..b89e37313b 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/jump-link.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/jump-link.md @@ -3,9 +3,13 @@ id: Jump links section: components --- +import '../components.css'; + ## Elements -Elements of a jump link +
+![Elements of a jump link.](./img/jump-links-elements.svg) +
1. **Active section:** current section of the page the user is on. @@ -17,13 +21,19 @@ Jump links provide a way to navigate through section headings on a page without ### Placement Vertical jump links can be placed either to the left or the right of the content on the page. It is recommended to place the jump links on the left side of the content and remain consistent with the application you are working on. Only use jump links on the right when space allows and when there is an extensive nav on the left; otherwise, consider reverting to the left of the page. In both placements, the visual system is identical, including jump links with subsections. So use either according to your application’s needs. -Example of jump links with subsections -Example of jump links with subsections +
+![Example of jump links placed on the left of the page.](./img/jump-links-placement-left.svg) +
+
+![Example of jump links placed on the right of the page.](./img/jump-links-placement-right.svg) +
### Jump links on mobile On smaller screen sizes, jump links collapse into an expandable component that is shown above the content. This component can be expanded to display the jump links. -Example jump link in a mobile format +
+![Example of expandable jump links on mobile.](./img/jump-links-mobile.svg) +
## Variations Jump links can be displayed either horizontally or vertically. They can include optional subsections. @@ -31,18 +41,23 @@ Jump links can be displayed either horizontally or vertically. They can include ### Vertical jump links As the user scrolls down the page, the active sections are highlighted from top to bottom. This is the recommended variation. -Example of vertical jump link +
+![Example of vertical jump links.](./img/jump-links-vertical.svg) +
### Horizontal jump links As the user scrolls down the page, the active sections are highlighted from left to right. A jump link can be displayed left aligned or center aligned and with an optional label. -Example of horizontal jump link - +
+![Example of horizontal jump links.](./img/jump-links-horizontal.svg) +
### Jump links with subsections If the page has subsections, they are shown as indented jump links under the parent section. Subsections can be individually selected. -Example of jump links with subsections +
+![Example of jump links with subsections.](./img/jump-links-subsections.svg) +
## Accessibility For information regarding accessibility, visit the [jump links accessibility](/components/jump-links/accessibility) tab. From addbd53362d955fc825f07631c12c8ff5967e1f7 Mon Sep 17 00:00:00 2001 From: Bekah Stephens Date: Wed, 14 May 2025 10:34:48 -0400 Subject: [PATCH 2/2] Updating annotation and associated content (Elements section). --- .../jump-link/img/jump-links-elements.svg | 15 +++++++++------ .../components/jump-link/jump-link.md | 6 ++++-- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-elements.svg index d4c28fb1ab..34b84126df 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-elements.svg +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/img/jump-links-elements.svg @@ -26,10 +26,13 @@ - - - - - - + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/jump-link.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/jump-link.md index b89e37313b..729b172c6d 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/jump-link.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/jump-link.md @@ -11,9 +11,11 @@ import '../components.css'; ![Elements of a jump link.](./img/jump-links-elements.svg) -1. **Active section:** current section of the page the user is on. +1. **Label (optional):** A descriptive header for a list of jump links. -2. **Inactive section:** other sections of the page that the user is not currently on. Clicking on an inactive section will bring the user to the selected section and make the section active. +2. **Active section:** current section of the page the user is on. + +3. **Inactive section:** other sections of the page that the user is not currently on. Clicking on an inactive section will bring the user to the selected section and make the section active. ## Usage Jump links provide a way to navigate through section headings on a page without scrolling. The highlighted active section changes as the user scrolls to the next section.