diff --git a/site/assets/scss/_alerts.scss b/site/assets/scss/_alerts.scss new file mode 100644 index 0000000000..2b4076ceb0 --- /dev/null +++ b/site/assets/scss/_alerts.scss @@ -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; + } + } +} diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index 90cb769c60..d4f9ab3cf1 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -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"; diff --git a/site/content/docs/5.1/components/scrollspy.md b/site/content/docs/5.1/components/scrollspy.md index c178a15127..37c76b949a 100644 --- a/site/content/docs/5.1/components/scrollspy.md +++ b/site/content/docs/5.1/components/scrollspy.md @@ -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: @@ -44,7 +50,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
  • Third
  • Fourth
    • -
  • three
    • +
  • Fifth
    • @@ -106,8 +112,8 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
    -
    -
    -
    +

    Item 1

    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.

    @@ -148,40 +154,45 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
    ```html -
    ``` diff --git a/site/layouts/shortcodes/ods-incompatibility-alert.html b/site/layouts/shortcodes/ods-incompatibility-alert.html new file mode 100644 index 0000000000..b46875c086 --- /dev/null +++ b/site/layouts/shortcodes/ods-incompatibility-alert.html @@ -0,0 +1,11 @@ +{{- /* + Usage: `ods-incompatibility-alert` +*/ -}} + +