Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix (scrollspy): Replace navbar and nested nav examples #923

Merged
merged 8 commits into from
Dec 10, 2021
Merged

Fix (scrollspy): Replace navbar and nested nav examples #923

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5c70b1a
Fix (scrollspy): Replace navbar and nested nav examples
isabellechanclou Nov 19, 2021
d79d468
Fix spelling
isabellechanclou Nov 19, 2021
35e6dfd
Delete unecessary accessibility role
isabellechanclou Nov 19, 2021
6452ff1
Back to navbar and nested nav examples with only enlargment of nested…
isabellechanclou Nov 25, 2021
934e65b
Add Orange Design System uncompatibility alert message
isabellechanclou Dec 9, 2021
e09804a
Fix new alert message links
isabellechanclou Dec 9, 2021
5b15430
Review and proposal to enhance code
julien-deramond Dec 9, 2021
3b0be91
Merge branch 'main' into main-isabellechanclou-scrollspy
julien-deramond Dec 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions site/assets/scss/_alerts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.bd-ods-incompatibility-alert {
.alert-heading ~ p {
&:not(:first-of-type) {
margin-top: map-get($spacers, 1);
}

> a {
font-weight: 700;
}
}
}
1 change: 1 addition & 0 deletions site/assets/scss/docs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
@import "algolia";

// Boosted mod
@import "alerts";
@import "mixins";
@import "boosted";
@import "tarteaucitron";
85 changes: 48 additions & 37 deletions site/content/docs/5.1/components/scrollspy.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@ group: components
toc: true
---

{{< ods-incompatibility-alert >}}
This component gathers technical utilities linked to the Navbar component and most of those examples are not compatible with the Orange Design System.

Refer to [Orange navbar]({{< docsref "/components/orange-navbar" >}}) and [Nav & tabs]({{< docsref "/components/navs-tabs" >}}).
{{< /ods-incompatibility-alert >}}

## How it works

Scrollspy has a few requirements to function properly:
Expand Down Expand Up @@ -44,7 +50,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
<li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#three">three</a></li>
<li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
</ul>
</li>
</ul>
Expand Down Expand Up @@ -106,8 +112,8 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p

<div class="bd-example">
<div class="row">
<div class="col-4 col-lg-2">
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<div class="col-4 col-lg-3">
<nav id="navbar-example3" class="navbar navbar-light flex-column align-items-stretch">
<a class="navbar-brand align-self-start" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" role="img" alt="Boosted" loading="lazy">
</a>
Expand All @@ -126,7 +132,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
</nav>
</nav>
</div>
<div class="col-8 col-lg-10">
<div class="col-8 col-lg-9">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2" tabindex="0">
<h4 id="item-1">Item 1</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
Expand All @@ -148,40 +154,45 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
</div>

```html
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<a class="navbar-brand align-self-start" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" role="img" alt="Boosted" loading="lazy">
</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
<div class="row">
<div class="col-4 col-lg-3">
<nav id="navbar-example3" class="navbar navbar-light flex-column align-items-stretch">
<a class="navbar-brand align-self-start" href="#">
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" role="img" alt="Boosted" loading="lazy">
</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Item 2</a>
<a class="nav-link" href="#item-3">Item 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
<a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
</nav>
</nav>
</nav>
</nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>...</p>
<h4 id="item-2">Item 2</h4>
<p>...</p>
<h4 id="item-3">Item 3</h4>
<p>...</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>
<div class="col-8 col-lg-9">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2" tabindex="0">
<h4 id="item-1">Item 1</h4>
<p>...</p>
<h5 id="item-1-1">Item 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Item 1-2</h5>
<p>...</p>
<h4 id="item-2">Item 2</h4>
<p>...</p>
<h4 id="item-3">Item 3</h4>
<p>...</p>
<h5 id="item-3-1">Item 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Item 3-2</h5>
<p>...</p>
</div>
</div>
</div>
```

Expand Down
11 changes: 11 additions & 0 deletions site/layouts/shortcodes/ods-incompatibility-alert.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{{- /*
Usage: `ods-incompatibility-alert`
*/ -}}

<div class="bd-ods-incompatibility-alert alert alert-danger" role="alert">
<span class="alert-icon"><span class="visually-hidden">Danger</span></span>
<div>
<h4 class="alert-heading mb-1">Incompatibility with Orange Design System</h4>
{{ .Inner | markdownify }}
</div>
</div>