Skip to content

Commit

Permalink
Merge pull request #2190 from uswds/al-changelog-5387
Browse files Browse the repository at this point in the history
USWDS-Site - Changelog: Update documentation and add entry for in-page nav custom content [USWDS#5387]
  • Loading branch information
thisisdano committed Aug 18, 2023
2 parents 373195f + 3714649 commit 364bc64
Show file tree
Hide file tree
Showing 4 changed files with 26 additions and 18 deletions.
10 changes: 6 additions & 4 deletions _components/in-page-navigation/guidance/implementation.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,14 @@ Implementing the in-page navigation component requires a few additions and adjus
</div>
```

{:.usa-content-list }
- **Root margin.** The root margin property (`data-root-margin`) is a string that allows you to define the observable area. This set of values grows or shrinks the observable area from each side of the root element's bounding box before computing intersections. It can accept values similar to the CSS margin property, and can be percentages. By default, the in-page navigation component is set to `0px 0px 0px 0px`.
- **Initialization properties.** You can customize how the component builds during initialization by adding any of the following properties to the `usa-in-page-nav` element. These properties must be set _before_ the component is initialized.
- **Custom main content region.** The main content selector property (`data-main-content-selector`) allows you to define which element the component will look in to pull its list of headers. Set the property's value to the `class` or `id` of your page's main content region (for example, `data-main-content-selector=".main-content"` or `data-main-content-selector="#main-content"`). By default, the component will pull headers from the `<main>` element.
- **Root margin.** The root margin property (`data-root-margin`) is a string that allows you to define the observable area. This set of values grows or shrinks the observable area from each side of the root element's bounding box before computing intersections. It can accept values similar to the CSS margin property, and can be percentages. By default, the in-page navigation component is set to `0px 0px 0px 0px`.
- **Threshold.** The threshold property (`data-threshold`) determines how much of the observable section must be present in the observed area before the nav's item is set to current. The default is `1`, which means 100% of the observables must be in the observed section. You can set `data-threshold` to any integer between 0 and 1.
- **Initialization properties.** The following properties update the component during initialization. These properties must be set before the component is initialized in order to have an effect.

#### In-page navigation initialization properties
{% include settings-table-flex.html
content=page.implementation.initProps
cols="flex-2, flex-1, flex-2, flex-1"
cols="flex-2, flex-3, flex-1"
section="initialization properties"
%}
16 changes: 7 additions & 9 deletions _components/in-page-navigation/in-page-navigation.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,24 +40,22 @@ tags:
- nav
implementation:
initProps:
- property: "`data-main-content-selector`"
description: The element the component pulls headers from.
default: '`<main>`'
- property: "`data-title-heading-level`"
element: usa-in-page-nav
description: The heading level of the navigation title header.
default: "h4"
default: '`h4`'
- property: "`data-title-text`"
element: usa-in-page-nav
description: The text of the navigation title header.
default: "On this page"
default: '"On this page"'
- property: "`data-scroll-offset`"
element: usa-in-page-nav
description: Number of pixels scroll should offset from the top of the parent element.
default: "0"
- property: "`data-root-margin`"
element: usa-in-page-nav
- property: '`data-root-margin`'
description: Observable margin around the observed root used for calculating the current active section. Use values similar to CSS margin.
default: "0px 0px 0px 0px"
default: '`0px 0px 0px 0px`'
- property: "`data-threshold`"
element: usa-in-page-nav
description: Percentage of the scrolling section that must be in the observed area before the current section is triggered. Use a value between 0 and 1.
default: "1"
title: In-page navigation
Expand Down
6 changes: 6 additions & 0 deletions _data/changelogs/component-in-page-navigation.yml
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@ title: In-page navigation
type: component
changelogURL:
items:
- date: NNNN-NN-NN
summary: Added the optional `data-main-content-selector` attribute.
affectsJavascript: true
githubRepo: uswds
githubPr: 5387
versionUswds: N.N.N
- date: 2023-06-09
summary: Fixed a bug that prevented links that start with a number from scrolling when clicked.
summaryAdditional:
Expand Down
12 changes: 7 additions & 5 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 364bc64

Please sign in to comment.