From ead9f41fb18084808cfd5d2d411faf7a851a5fa2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 10 Jul 2024 13:24:28 +0200 Subject: [PATCH] docs: empty pages content --- NOTICE.txt | 22 - package.json | 1 - site/assets/scss/_ouds-web.scss | 23 +- site/content/docs/0.0/about/brand.md | 50 +- site/content/docs/0.0/about/license.md | 2 +- site/content/docs/0.0/about/overview.md | 45 +- site/content/docs/0.0/components/accordion.md | 219 +- site/content/docs/0.0/components/alerts.md | 220 +- .../docs/0.0/components/back-to-top.md | 129 +- site/content/docs/0.0/components/badge.md | 114 +- .../content/docs/0.0/components/breadcrumb.md | 111 +- .../docs/0.0/components/button-group.md | 258 +- site/content/docs/0.0/components/buttons.md | 402 +- site/content/docs/0.0/components/card.md | 737 +- site/content/docs/0.0/components/carousel.md | 519 +- .../docs/0.0/components/close-button.md | 64 +- site/content/docs/0.0/components/collapse.md | 195 +- site/content/docs/0.0/components/dropdowns.md | 1138 +- site/content/docs/0.0/components/footer.md | 183 +- .../content/docs/0.0/components/list-group.md | 522 +- .../docs/0.0/components/local-navigation.md | 42 +- site/content/docs/0.0/components/modal.md | 927 +- site/content/docs/0.0/components/navbar.md | 780 +- site/content/docs/0.0/components/navs-tabs.md | 762 +- site/content/docs/0.0/components/offcanvas.md | 343 +- .../docs/0.0/components/orange-navbar.md | 548 +- .../content/docs/0.0/components/pagination.md | 160 +- .../docs/0.0/components/placeholders.md | 137 +- site/content/docs/0.0/components/popovers.md | 273 +- site/content/docs/0.0/components/progress.md | 240 +- site/content/docs/0.0/components/scrollspy.md | 426 +- site/content/docs/0.0/components/spinners.md | 210 +- .../docs/0.0/components/stepped-process.md | 53 +- site/content/docs/0.0/components/sticker.md | 103 +- site/content/docs/0.0/components/tags.md | 184 +- .../content/docs/0.0/components/title-bars.md | 113 +- site/content/docs/0.0/components/toasts.md | 391 +- site/content/docs/0.0/components/tooltips.md | 316 +- site/content/docs/0.0/dark-mode.md | 9477 ----------------- .../docs/0.0/examples/cards-rtl/index.html | 75 - .../docs/0.0/examples/cards/index.html | 74 - .../examples/download-app/download-app.css | 253 - .../0.0/examples/download-app/download-app.js | 39 - .../download-app/img/Banner_image.png | Bin 270882 -> 0 bytes .../0.0/examples/download-app/img/Buttons.png | Bin 29020 -> 0 bytes .../download-app/img/Buttons_dark.png | Bin 31216 -> 0 bytes .../0.0/examples/download-app/img/Card.png | Bin 31603 -> 0 bytes .../examples/download-app/img/Card_dark.png | Bin 30991 -> 0 bytes .../examples/download-app/img/Components.png | Bin 18309 -> 0 bytes .../download-app/img/Components_dark.png | Bin 26993 -> 0 bytes .../examples/download-app/img/Emphasis.png | Bin 15840 -> 0 bytes .../download-app/img/Emphasis_dark.png | Bin 17050 -> 0 bytes .../0.0/examples/download-app/img/Input.png | Bin 26515 -> 0 bytes .../examples/download-app/img/Input_dark.png | Bin 25217 -> 0 bytes .../0.0/examples/download-app/img/List.png | Bin 21774 -> 0 bytes .../examples/download-app/img/List_dark.png | Bin 27410 -> 0 bytes .../docs/0.0/examples/download-app/index.html | 402 - .../docs/0.0/examples/footers/index.html | 38 - site/content/docs/0.0/examples/form/form.js | 25 - .../content/docs/0.0/examples/form/index.html | 263 - site/content/docs/0.0/examples/grid/grid.css | 17 - .../content/docs/0.0/examples/grid/index.html | 191 - .../docs/0.0/examples/masonry/index.html | 107 - .../examples/navbar-mode-selector/index.html | 24 - .../0.0/examples/navbar-sticky/index.html | 29 - .../examples/navbar-sticky/navbar-sticky.css | 19 - .../examples/navbar-sticky/navbar-sticky.js | 14 - .../docs/0.0/examples/navbars/index.html | 86 - .../docs/0.0/examples/stickers/index.html | 260 - .../docs/0.0/examples/stickers/stickers.css | 43 - .../content/docs/0.0/examples/tags/index.html | 115 - .../docs/0.0/examples/title-bars/index.html | 56 - .../0.0/examples/title-bars/title-bars.css | 30 - site/content/docs/0.0/guidelines/_index.md | 28 - site/content/docs/0.0/layout/columns.md | 2 - site/content/docs/0.0/layout/containers.md | 2 - site/data/core-team.yml | 10 +- site/data/design-guidelines.yml | 19 - site/data/examples.yml | 54 - site/data/sidebar.yml | 111 + site/layouts/_default/home.html | 2 - site/layouts/partials/docs-navbar.html | 6 - site/layouts/partials/docs-sidebar.html | 3 +- site/layouts/partials/examples/main.html | 3 +- site/layouts/partials/footer.html | 5 - .../partials/home/components-utilities.html | 88 - site/layouts/partials/home/get-started.html | 19 - site/layouts/partials/home/plugins.html | 66 - site/layouts/shortcodes/callout-soon.html | 9 + site/layouts/shortcodes/card.html | 61 - site/layouts/shortcodes/orange-footer.html | 183 - .../shortcodes/orange-global-headers.html | 198 - site/layouts/shortcodes/orange-supra.html | 62 - .../0.0/assets/brand/OBS-logo-formatted.svg | 6 - .../static/docs/0.0/assets/brand/OBS-logo.svg | 1 - .../docs/0.0/assets/img/ouds-web-sprite.svg | 59 - 96 files changed, 165 insertions(+), 23431 deletions(-) delete mode 100644 site/content/docs/0.0/dark-mode.md delete mode 100644 site/content/docs/0.0/examples/cards-rtl/index.html delete mode 100644 site/content/docs/0.0/examples/cards/index.html delete mode 100644 site/content/docs/0.0/examples/download-app/download-app.css delete mode 100644 site/content/docs/0.0/examples/download-app/download-app.js delete mode 100644 site/content/docs/0.0/examples/download-app/img/Banner_image.png delete mode 100644 site/content/docs/0.0/examples/download-app/img/Buttons.png delete mode 100644 site/content/docs/0.0/examples/download-app/img/Buttons_dark.png delete mode 100644 site/content/docs/0.0/examples/download-app/img/Card.png delete mode 100644 site/content/docs/0.0/examples/download-app/img/Card_dark.png delete mode 100644 site/content/docs/0.0/examples/download-app/img/Components.png delete mode 100644 site/content/docs/0.0/examples/download-app/img/Components_dark.png delete mode 100644 site/content/docs/0.0/examples/download-app/img/Emphasis.png delete mode 100644 site/content/docs/0.0/examples/download-app/img/Emphasis_dark.png delete mode 100644 site/content/docs/0.0/examples/download-app/img/Input.png delete mode 100644 site/content/docs/0.0/examples/download-app/img/Input_dark.png delete mode 100644 site/content/docs/0.0/examples/download-app/img/List.png delete mode 100644 site/content/docs/0.0/examples/download-app/img/List_dark.png delete mode 100644 site/content/docs/0.0/examples/download-app/index.html delete mode 100644 site/content/docs/0.0/examples/footers/index.html delete mode 100644 site/content/docs/0.0/examples/form/form.js delete mode 100644 site/content/docs/0.0/examples/form/index.html delete mode 100644 site/content/docs/0.0/examples/grid/grid.css delete mode 100644 site/content/docs/0.0/examples/grid/index.html delete mode 100644 site/content/docs/0.0/examples/masonry/index.html delete mode 100644 site/content/docs/0.0/examples/navbar-mode-selector/index.html delete mode 100644 site/content/docs/0.0/examples/navbar-sticky/index.html delete mode 100644 site/content/docs/0.0/examples/navbar-sticky/navbar-sticky.css delete mode 100644 site/content/docs/0.0/examples/navbar-sticky/navbar-sticky.js delete mode 100644 site/content/docs/0.0/examples/navbars/index.html delete mode 100644 site/content/docs/0.0/examples/stickers/index.html delete mode 100644 site/content/docs/0.0/examples/stickers/stickers.css delete mode 100644 site/content/docs/0.0/examples/tags/index.html delete mode 100644 site/content/docs/0.0/examples/title-bars/index.html delete mode 100644 site/content/docs/0.0/examples/title-bars/title-bars.css delete mode 100644 site/content/docs/0.0/guidelines/_index.md delete mode 100644 site/data/design-guidelines.yml delete mode 100644 site/layouts/partials/home/components-utilities.html delete mode 100644 site/layouts/partials/home/plugins.html create mode 100644 site/layouts/shortcodes/callout-soon.html delete mode 100644 site/layouts/shortcodes/card.html delete mode 100644 site/layouts/shortcodes/orange-footer.html delete mode 100644 site/layouts/shortcodes/orange-global-headers.html delete mode 100644 site/layouts/shortcodes/orange-supra.html delete mode 100644 site/static/docs/0.0/assets/brand/OBS-logo-formatted.svg delete mode 100644 site/static/docs/0.0/assets/brand/OBS-logo.svg diff --git a/NOTICE.txt b/NOTICE.txt index 157197350f..8a15516ac3 100644 --- a/NOTICE.txt +++ b/NOTICE.txt @@ -10,22 +10,7 @@ Any use or displaying shall constitute an infringement under intellectual proper dist/img/orange-logo.svg nuget/ouds-web.png -site/content/docs/**/examples/download-app/img/Banner_image.png -site/content/docs/**/examples/download-app/img/Buttons.png -site/content/docs/**/examples/download-app/img/Buttons_dark.png -site/content/docs/**/examples/download-app/img/Card.png -site/content/docs/**/examples/download-app/img/Card_dark.png -site/content/docs/**/examples/download-app/img/Components.png -site/content/docs/**/examples/download-app/img/Components_dark.png -site/content/docs/**/examples/download-app/img/Emphasis.png -site/content/docs/**/examples/download-app/img/Emphasis_dark.png -site/content/docs/**/examples/download-app/img/Input.png -site/content/docs/**/examples/download-app/img/Input_dark.png -site/content/docs/**/examples/download-app/img/List.png -site/content/docs/**/examples/download-app/img/List_dark.png site/layouts/partials/icons.html -site/static/docs/**/assets/brand/OBS-logo.svg -site/static/docs/**/assets/brand/OBS-logo-formatted.svg site/static/docs/**/assets/brand/orange-logo.svg site/static/docs/**/assets/brand/orange-logo-formatted.svg site/static/docs/**/assets/brand/orange-social.png @@ -43,18 +28,11 @@ site/static/docs/**/assets/img/favicons/mstile-310x150.png site/static/docs/**/assets/img/favicons/mstile-310x310.png site/static/docs/**/assets/img/favicons/mstile-70x70.png site/static/docs/**/assets/img/favicons/safari-pinned-tab.svg -site/static/docs/**/assets/img/navbar-contact.png site/static/docs/**/assets/img/ouds-web-sprite.svg site/static/docs/**/assets/img/ouds-web-warning.svg site/static/docs/**/assets/img/platforms/android.png site/static/docs/**/assets/img/platforms/conversational.png site/static/docs/**/assets/img/platforms/extended-reality.png site/static/docs/**/assets/img/platforms/iOS.png -site/static/docs/**/assets/img/title-bars-illustrations/illustration-1024.png -site/static/docs/**/assets/img/title-bars-illustrations/illustration-1280.png -site/static/docs/**/assets/img/title-bars-illustrations/illustration-1440.png -site/static/docs/**/assets/img/title-bars-illustrations/illustration-320.png -site/static/docs/**/assets/img/title-bars-illustrations/illustration-480.png -site/static/docs/**/assets/img/title-bars-illustrations/illustration-768.png End of the parts list under Orange SA Copyright diff --git a/package.json b/package.json index 7253f9a58a..c5e385a7b0 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,6 @@ "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"", "css-prefix": "npm-run-all --aggregate-output --parallel css-prefix-*", "css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"", - "css-prefix-examples": "postcss --config build/postcss.config.mjs --replace \"site/content/**/*.css\"", "css-test": "jasmine --config=scss/tests/jasmine.js", "js": "npm-run-all js-compile js-minify", "js-compile": "npm-run-all --aggregate-output --parallel js-compile-*", diff --git a/site/assets/scss/_ouds-web.scss b/site/assets/scss/_ouds-web.scss index 1486c2e04c..b3ec661888 100644 --- a/site/assets/scss/_ouds-web.scss +++ b/site/assets/scss/_ouds-web.scss @@ -36,25 +36,6 @@ body { } } -// Design guidelines - -.ods-guidelines { - background-color: var(--bs-secondary-bg); - - .card a{ - &::before { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 0; - content: ""; - background-color: var(--bs-primary); - @include transition(height ease-out .2s); - } - - &:hover::before { - height: 4px; - } - } +.bd-links-link.text-decoration-line-through { + text-decoration-thickness: .1rem !important; // stylelint-disable-line declaration-no-important } diff --git a/site/content/docs/0.0/about/brand.md b/site/content/docs/0.0/about/brand.md index a5ef720b23..b18c1c6fe2 100644 --- a/site/content/docs/0.0/about/brand.md +++ b/site/content/docs/0.0/about/brand.md @@ -8,52 +8,4 @@ aliases: toc: true --- -{{< callout info >}} -OUDS Web is based on [Bootstrap]({{< param bootstrap >}}), which has [its own logo and brand usage guidelines]({{< param bootstrap >}}/docs/{{< param docs_version >}}/about/brand/). -{{}} - -Have a need for OUDS Web's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were published by Orange SA on the [Orange Design System website]({{< param ods.web >}}). - -## Orange logo - -
-
-
-
- Orange -
Master logo
-
-
-
-
-
-
- Orange -
Small logo
-
-
-
-
- -### Responsive SVG - -OUDS Web uses —and recommends to use— **a single SVG file for both logos**, since it's lightweight and easily made responsive. Here is the unminified SVG content: - -{{< svg-docs >}} - -## Orange Business Services logo - -Orange Business Services has its own logo that contains the Orange logo and the "Business Services" text. This set is a logo by itself, must be considered as a single SVG file and must not be built manually by assembling an image and some texts. - -
-
-
-
- Orange -
Orange Business Services logo
-
-
-
-
- -{{< svg-docs file="OBS-logo" >}} +{{< callout-soon "page" >}} diff --git a/site/content/docs/0.0/about/license.md b/site/content/docs/0.0/about/license.md index 69a73e2afb..8a5be45218 100644 --- a/site/content/docs/0.0/about/license.md +++ b/site/content/docs/0.0/about/license.md @@ -35,4 +35,4 @@ OUDS Web is released under the MIT license and is copyright {{< year >}} Orange - Include the source of OUDS Web nor Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it - Submit changes that you make to OUDS Web or Bootstrap back to their respective project (though such feedback is encouraged) -For more information, the full OUDS Web license is located [in the project repository]({{< param repo >}}/blob/v{{< param current_version >}}/LICENSE), and Bootstrap license is located [in the project repository](https://github.com/twbs/bootstrap/blob/v{{< param current_version >}}/LICENSE). +For more information, the full OUDS Web license is located [in the project repository]({{< param repo >}}/blob/v{{< param current_version >}}/LICENSE), and Bootstrap license is located [in the project repository](https://github.com/twbs/bootstrap/blob/main/LICENSE). diff --git a/site/content/docs/0.0/about/overview.md b/site/content/docs/0.0/about/overview.md index efe9be3826..2e48db674c 100644 --- a/site/content/docs/0.0/about/overview.md +++ b/site/content/docs/0.0/about/overview.md @@ -10,47 +10,4 @@ aliases: - "/docs/about/overview/" --- -## OUDS Web history - -OUDS Web is an Orange-branded version of Bootstrap framework. - -In addition to the Orange brand recommendations compliance, **OUDS Web aims at bringing accessibility improvements** as well as some Orange-specific components and user interactions while complying with the framework standards. The components and samples included in OUDS Web are regularly enhanced with real-life projects feedbacks and components. - -Using a common core leverages **a unique brand experience** for our customers in all their interactions. - -OUDS Web can be used for all **responsive web projects** for Orange group — but other developers may also take advantage of the proposed accessibility improvements and additional components. - -### Custom components - -OUDS Web ships with custom accessible components to suit specific needs: - -- [Back to top]({{< docsref "/components/back-to-top" >}}) -- [Footer]({{< docsref "/components/footer" >}}) -- [Local navigation]({{< docsref "/components/local-navigation" >}}) -- [Orange navbar]({{< docsref "/components/orange-navbar" >}}) -- [Quantity selector]({{< docsref "/forms/quantity-selector" >}}) -- [Star rating]({{< docsref "/forms/checks-radios#star-rating" >}}) -- [Stepped process]({{< docsref "/components/stepped-process" >}}) -- [Sticker]({{< docsref "/components/sticker" >}}) -- [Tags]({{< docsref "/components/tags" >}}) -- [Title bars]({{< docsref "/components/title-bars" >}}) - -## Bootstrap Team - -Bootstrap is maintained by a [small team of developers](https://github.com/orgs/twbs/people) on GitHub. They're actively looking to grow this team and would love to hear from you if you're excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code. - -## Bootstrap History - -Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world. - -Bootstrap was created at Twitter in mid-2010 by [@mdo](https://twitter.com/mdo) and [@fat](https://twitter.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.twitter.com/engineering/en_us/a/2010/hack-week) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today. - -Originally [released](https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter) on , they've since had over [twenty releases](https://github.com/twbs/bootstrap/releases), including two major rewrites with v2 and v3. With Bootstrap 2, they added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, they rewrote the library once more to make it responsive by default with a mobile first approach. - -With Bootstrap 4, they once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS's flexbox. Their intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers. - -Their latest release, Bootstrap 5, focuses on improving v4's codebase with as few major breaking changes as possible. They improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of their tooling. - -## Get involved in Bootstrap - -Get involved with Bootstrap development by [opening an issue](https://github.com/twbs/bootstrap/issues/new/choose) or submitting a pull request. Read their [contributing guidelines](https://github.com/twbs/bootstrap/blob/v{{< param current_version >}}/.github/CONTRIBUTING.md) for information on how they develop. +{{< callout-soon "page" >}} diff --git a/site/content/docs/0.0/components/accordion.md b/site/content/docs/0.0/components/accordion.md index 7f427c6c7c..9d402147da 100644 --- a/site/content/docs/0.0/components/accordion.md +++ b/site/content/docs/0.0/components/accordion.md @@ -11,221 +11,4 @@ aliases: toc: true --- -## How it works - -The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible. - -{{< callout info >}} -{{< partial "callouts/info-prefersreducedmotion.md" >}} -{{< /callout >}} - -## Example - -Click the accordions below to expand/collapse the accordion content. - -To render an accordion that's expanded by default: -- add the `.show` class on the `.accordion-collapse` element. -- drop the `.collapsed` class from the `.accordion-button` element and set its `aria-expanded` attribute to `true`. - -{{< example >}} -
-
-

- -

-
-
- This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
-
-
-
-

- -

-
-
- This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
-
-
-
-

- -

-
-
- This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
-
-
-
-{{< /example >}} - - - -### Sizes - -Add `.accordion-lg` or `.accordion-sm` for additional sizes. - -{{< example >}} -
-
-
-
-

- -

-
-
- This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
-
-
-
-

- -

-
-
- This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
-
-
-
-

- -

-
-
- This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
-
-
-
-
-
-
-
-

- -

-
-
- This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
-
-
-
-

- -

-
-
- This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
-
-
-
-

- -

-
-
- This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
-
-
-
-
-
-{{< /example >}} - -### Always open - -Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accordion items stay open when another item is opened. - -{{< example >}} -
-
-

- -

-
-
- This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
-
-
-
-

- -

-
-
- This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
-
-
-
-

- -

-
-
- This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
-
-
-
-{{< /example >}} - -## Dark variant - -{{< callout-deprecated-dark-variants "accordion" >}} - -## Accessibility - -Please read the [collapse accessibility section]({{< docsref "/components/collapse#accessibility" >}}) for more information. - -## CSS - -### Variables - -As part of OUDS Web's evolving CSS variables approach, accordions now use local CSS variables on `.accordion` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. - -{{< scss-docs name="accordion-css-vars" file="scss/_accordion.scss" >}} - -Small and large accordion modifier classes are used to update the value of these CSS variables as needed: - -{{< scss-docs name="accordion-sm-css-vars" file="scss/_accordion.scss" >}} - -{{< scss-docs name="accordion-lg-css-vars" file="scss/_accordion.scss" >}} - -### Sass variables - -{{< scss-docs name="accordion-variables" file="scss/_variables.scss" >}} +{{< callout-soon >}} diff --git a/site/content/docs/0.0/components/alerts.md b/site/content/docs/0.0/components/alerts.md index 9d19d6ec98..a58c5c76cc 100644 --- a/site/content/docs/0.0/components/alerts.md +++ b/site/content/docs/0.0/components/alerts.md @@ -8,222 +8,4 @@ aliases: toc: true --- -## Examples - -Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing). - -OUDS Web also adds a dedicated icon for each contextual class using `.alert-icon`, matching [functional colors in palette]({{}}): -- success, -- info, -- warning, -- danger. - -{{< callout info >}} -**Heads up!** The `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [a Sass loop](#sass-loops). -{{< /callout >}} - -{{< example >}} - - - - -{{< /example >}} - -{{< callout info >}} -{{< partial "callouts/warning-color-assistive-technologies.md" >}} -{{< /callout >}} - -### Live example - -Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button. - -{{< example stackblitz_add_js="true" >}} -
- -{{< /example >}} - -We use the following JavaScript to trigger our live alert demo: - -{{< js-docs name="live-alert" file="site/assets/js/partials/snippets.js" >}} - - - - -### Sizes - -Alerts come with a smaller variant: `.alert-sm`. - -{{< example >}} - - - - -{{< /example >}} - - -### Additional content - -Alerts can also contain additional HTML elements like headings, links and paragraphs. - -As of OUDS Web, it's recommended to wrap your additional content in a `
` to ensure proper alignment and, for headings, to always use the .alert-heading class. - -{{< example >}} - -{{< /example >}} - - - -### Dismissing - -Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how: - -- Be sure you've loaded the alert plugin, or the compiled OUDS Web JavaScript. -- Add a [close button]({{< docsref "/components/close-button" >}}) and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the close button. -- On the close button, add the `data-bs-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the ` -
-{{< /example >}} - -{{< callout warning >}} -When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element. -{{< /callout >}} - -{{% enable-btn-close-tooltip 4 alerts %}} - -## Dark variant - -{{< callout-deprecated-dark-variants "alert" >}} - -## CSS - -### Variables - -As part of OUDS Web's evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. - -{{< scss-docs name="alert-css-vars" file="scss/_alert.scss" >}} - -Customization through CSS variables can be seen on the `.alert-sm` class where we override specific values without adding duplicate CSS selectors. - -{{< scss-docs name="alert-sm-css-vars" file="scss/_alert.scss" >}} - -### Sass variables - -{{< scss-docs name="alert-variables" file="scss/_variables.scss" >}} - -### Sass mixins - -{{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}} - -### Sass loops - -Loop that generates the modifier classes with an overriding of CSS variables. - -{{< scss-docs name="alert-modifiers" file="scss/_alert.scss" >}} - -## JavaScript behavior - -### Initialize - -Initialize elements as alerts - -```js -const alertList = document.querySelectorAll('.alert') -const alerts = [...alertList].map(element => new boosted.Alert(element)) -``` - -{{< callout info >}} -For the sole purpose of dismissing an alert, it isn't necessary to initialize the component manually via the JS API. By making use of `data-bs-dismiss="alert"`, the component will be initialized automatically and properly dismissed. - -See the [triggers](#triggers) section for more details. -{{< /callout >}} - -### Triggers - -{{% js-dismiss "alert" %}} - -**Note that closing an alert will remove it from the DOM.** - -### Methods - -You can create an alert instance with the alert constructor, for example: - -```js -const bsAlert = new boosted.Alert('#myAlert') -``` - -This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api’s auto-initialization.) - -{{< bs-table >}} -| Method | Description | -| --- | --- | -| `close` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. | -| `dispose` | Destroys an element's alert. (Removes stored data on the DOM element) | -| `getInstance` | Static method which allows you to get the alert instance associated to a DOM element. For example: `boosted.Alert.getInstance(alert)`. | -| `getOrCreateInstance` | Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `boosted.Alert.getOrCreateInstance(element)`. | -{{< /bs-table >}} - -Basic usage: - -```js -const alert = boosted.Alert.getOrCreateInstance('#myAlert') -alert.close() -``` - -### Events - -OUDS Web's alert plugin exposes a few events for hooking into alert functionality. - -{{< bs-table >}} -| Event | Description | -| --- | --- | -| `close.bs.alert` | Fires immediately when the `close` instance method is called. | -| `closed.bs.alert` | Fired when the alert has been closed and CSS transitions have completed. | -{{< /bs-table >}} - -```js -const myAlert = document.getElementById('myAlert') -myAlert.addEventListener('closed.bs.alert', event => { - // do something, for instance, explicitly move focus to the most appropriate element, - // so it doesn't get lost/reset to the start of the page - // document.getElementById('...').focus() -}) -``` +{{< callout-soon >}} diff --git a/site/content/docs/0.0/components/back-to-top.md b/site/content/docs/0.0/components/back-to-top.md index ad0531cd90..386f53a169 100644 --- a/site/content/docs/0.0/components/back-to-top.md +++ b/site/content/docs/0.0/components/back-to-top.md @@ -8,131 +8,4 @@ aliases: toc: true --- -## Overview - -OUDS Web "back to top" provides a way to get back to the top of the page using a simple link. It's built only with HTML and CSS, meaning you don't need any JavaScript. It only requires a `.back-to-top` wrapper and a `.back-to-top-link`, at the end of your `body`— just before your scripts. - -For accessibility purposes, back-to-top link contains a `.visually-hidden` text content and a `data-bs-label` attribute— whose **value should match hidden text content** to make sure it's usable with speech recognition software. The `data-bs-label` attribute content is displayed in a `::before` pseudo-element thanks to the `attr()` CSS function. - -We also recommend using a `nav` wrapper —alongside an accurate `aria-label`— to ease discoverability through landmarks. - -Make sure you leave enough space between the back-to-top link and the bottom of the viewport to: -- prevent the component being overlapped by bottom navigation bar on mobile and notification tooltips for Windows users, -- avoid proximity with system interactive areas, which could lead to accidentally activating an adjacent target. - - -{{< callout >}} -### Smooth scroll - -Smooth scrolling does not depend on this component. It's turned on only when the user has **not** explicitly signaled that they’d prefer reduced motion (i.e. where `prefers-reduced-motion: no-preference`) through the `scroll-behavior` property. [Read more about `prefers-reduced-motion` in our accessibility page]({{< docsref "/getting-started/accessibility#reduced-motion" >}}). -{{< /callout >}} - -## Example - -
- -
-{{< example show_preview="false" >}} - -{{< /example >}} - -{{< callout warning >}} -### Define a target - -Since we're using a link, **you need a valid target**. We recommend adding an anchor link at the beginning of your markup, like so: ``. -You may use another `id`, but if you're using a fixed header you'll need to override our `$back-to-top-target-id` variable to ensure it won't overlap content after scrolling up. -{{< /callout >}} - -### Always visible - -Add `.position-fixed` utility to your `.back-to-top-link` to make your back-to-top link persistent. - -{{< example show_preview="false" >}} - -{{< /example >}} - -### Icon only - -Use a `title` attribute instead of `data-bs-label` to ensure a visible label is still provided on demand for sighted users. - -
- -
-{{< example show_preview="false" >}} - -{{< /example >}} - -## CSS - -### Variables - -As part of OUDS Web's evolving CSS variables approach, Back to tops now use local CSS variables on `.back-to-top` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. - -{{< scss-docs name="back-to-top-css-vars" file="scss/_back-to-top.scss" >}} - -As it is a responsive component, here is the overridden variables in `xl` breakpoint: - -{{< scss-docs name="back-to-top-xl-css-vars" file="scss/_back-to-top.scss" >}} - -### Sass options - -Back to top link can be customized in a few ways: either making it appear after more or less vertical scrolling, modify its offset from the bottom right corner, etc. - - - - - - - - - - - - - - - - - - - - - - - - - - -
VariableDescriptionDefault
$back-to-top-display-threshold - Defines the vertical threshold at which "back to top" link appears. - 100vh
$back-to-top-target-id - Target's id, used to apply scroll-margin-top when anchor is active. - "top"
$back-to-top-offset - Base offset, used to place "back to top" link in the bottom right corner of the page. - $spacer * 1.5
- -### Sass variables - -For more details, please have a look at the exhaustive list of available variables: - -{{< scss-docs name="back-to-top" file="scss/_variables.scss" >}} +{{< callout-soon >}} diff --git a/site/content/docs/0.0/components/badge.md b/site/content/docs/0.0/components/badge.md index 0bce2f89da..2f689635db 100644 --- a/site/content/docs/0.0/components/badge.md +++ b/site/content/docs/0.0/components/badge.md @@ -8,116 +8,4 @@ aliases: toc: true --- -## Examples - -Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. As of v5, badges no longer have focus or hover styles for links. - -### Headings - -{{< design-callout-alert >}} -This component variant should not be used because it does not exist in the Orange Design System specifications. -{{< /design-callout-alert >}} - -{{< example >}} -

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-
Example heading New
-
Example heading New
-{{< /example >}} - -### Buttons - -Badges can be used as part of links or buttons to provide a counter. - -{{< design-callout-alert >}} -This component should not be used because it does not exist in the Orange Design System specifications. -{{< /design-callout-alert >}} - -{{< example >}} - -{{< /example >}} - -Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button. - -Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text. - -### Positioned - - - -Use utilities to modify a `.badge` and position it in the corner of a link with an icon. - -{{< design-callout-alert >}} -This component variant should be used **only** inside a header component. - -Please refer to our OUDS Web [Navbars]({{< docsref "/examples/navbars" >}}) examples. You can also refer to the [Global headers](https://system.design.orange.com/0c1af118d/p/37609b-global-headers/b/366c91) guidelines on the Orange Design System website. -{{< /design-callout-alert >}} - -{{< example >}} - - - - - 99+ - - - -{{< /example >}} - - - - - -## Background colors - -{{< design-callout-alert >}} -These component variants should not be used because they do not exist in the Orange Design System specifications. -{{< /design-callout-alert >}} - -Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer. - -{{< example >}} -{{< badge.inline >}} -{{- range (index $.Site.Data "theme-colors") }} -{{ .name | title }}{{- end -}} -{{< /badge.inline >}} -{{< /example >}} - -{{< callout info >}} -{{< partial "callouts/warning-color-assistive-technologies.md" >}} -{{< /callout >}} - -## Pill badges - -Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`. - -{{< design-callout-alert >}} -This component should not be used because it does not exist in the Orange Design System specifications. - -Instead, consider using our OUDS Web [Tags]({{< docsref "/components/tags" >}}). You can also refer to the [Tags](https://system.design.orange.com/0c1af118d/p/975c09-tags/b/24dde8) guidelines on the Orange Design System website. -{{< /design-callout-alert >}} - -{{< example >}} -{{< badge.inline >}} -{{- range (index $.Site.Data "theme-colors") }} -{{ .name | title }}{{- end -}} -{{< /badge.inline >}} -{{< /example >}} - -## CSS - -### Variables - -As part of OUDS Web's evolving CSS variables approach, badges now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. - -{{< scss-docs name="badge-css-vars" file="scss/_badge.scss" >}} - -### Sass variables - -{{< scss-docs name="badge-variables" file="scss/_variables.scss" >}} +{{< callout-soon >}} diff --git a/site/content/docs/0.0/components/breadcrumb.md b/site/content/docs/0.0/components/breadcrumb.md index ae11fd9154..7ae50244b2 100644 --- a/site/content/docs/0.0/components/breadcrumb.md +++ b/site/content/docs/0.0/components/breadcrumb.md @@ -8,113 +8,4 @@ aliases: toc: true --- -## Example - -Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired. - -{{< example >}} - - - - - -{{< /example >}} - -## Dividers - -Dividers are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content). They can be changed by modifying a local CSS custom property `--bs-breadcrumb-divider`, or through the `$breadcrumb-divider` Sass variable — and `$breadcrumb-divider-flipped` for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time. - -{{< example >}} - -{{< /example >}} - -When modifying via Sass, the [quote](https://sass-lang.com/documentation/modules/string/#quote) function is required to generate the quotes around a string. For example, using `>` as the divider, you can use this: - -```scss -$breadcrumb-divider: quote(">"); -``` - -It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable. - -{{< callout info >}} -**Inlined SVG requires properly escaped characters.** Some reserved characters, such as `<`, `>` and `#`, must be URL-encoded or escaped. We do this with the `$breadcrumb-divider` variable using our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When customizing the CSS variable, you must handle this yourself. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for more info. -{{< /callout >}} - -{{< example >}} - -{{< /example >}} - -```scss -$breadcrumb-divider: url("data:image/svg+xml,"); -``` - -You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`. - -{{< design-callout-alert >}} -This variant **without the breadcrumb dividers** should not be used because it does not respect the Orange Design System specifications. - -Please refer to the [Local Headers/Breadcrumb](https://system.design.orange.com/0c1af118d/p/774477-local-headers/b/743cd0/i/66611057) guidelines on the Orange Design System website. -{{< /design-callout-alert >}} - -{{< example >}} - -{{< /example >}} - - -```scss -$breadcrumb-divider: none; -``` - - -## Dark variant - -{{< callout-deprecated-dark-variants "breadcrumb" >}} - - -## Accessibility - -Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the ` -{{< /example >}} - -## Dark variant - -{{< callout-deprecated-dark-variants "local-nav" >}} - -## CSS - -### Variables - -Values for the CSS variables are set via Sass, so Sass customization is still supported, too. - -{{< scss-docs name="local-nav-css-vars" file="scss/_local-navigation.scss" >}} - -### Sass variables - -{{< scss-docs name="local-nav-variables" file="scss/_variables.scss" >}} +{{< callout-soon >}} diff --git a/site/content/docs/0.0/components/modal.md b/site/content/docs/0.0/components/modal.md index 6df84986c9..ae15460452 100644 --- a/site/content/docs/0.0/components/modal.md +++ b/site/content/docs/0.0/components/modal.md @@ -8,929 +8,4 @@ aliases: toc: true --- -## How it works - -Before getting started with OUDS Web's modal component, be sure to read the following as our menu options have recently changed. - -- Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the `` so that modal content scrolls instead. -- Clicking on the modal "backdrop" will automatically close the modal. -- OUDS Web only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences. -- Modals use `position: fixed`, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element. -- Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{< docsref "/getting-started/browsers-devices#modals-and-dropdowns-on-mobile" >}}) for details. -- Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) has no effect in OUDS modals. To achieve the same effect, use some custom JavaScript: - -```js -const myModal = document.getElementById('myModal') -const myInput = document.getElementById('myInput') - -myModal.addEventListener('shown.bs.modal', () => { - myInput.focus() -}) -``` - -{{< callout info >}} -{{< partial "callouts/info-prefersreducedmotion.md" >}} -{{< /callout >}} - -Keep reading for demos and usage guidelines. - -## Examples - -### Modal components - -Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action. - -
-
-
-
-
-
Modal title
- -
-
-

Modal body text goes here.

-
-
- - -
-
-
-
-
- -```html -
-
-
-
-
Modal title
- -
-
-

Modal body text goes here.

-
-
- - -
-
-
-
-``` - - -#### With image - -Modals may start with a picture. Add `.modal-img` to your `` or `` tag—being `.modal-content`'s first child— and you're done! - -
-
-
-
- {{< placeholder width="100%" height="260" class="modal-img" text="icon" >}} -
-
Modal title
- -
-
-

Modal body text goes here.

-
-
- - -
-
-
-
-
- -```html -
-
-
- ... -
-
Modal title
- -
-
-

Modal body text goes here.

-
-
- - -
-
-
-
-``` - - -{{< callout info >}} -In the above static example, we use `
`, to avoid issues with the heading hierarchy in the documentation page. Structurally, however, a modal dialog represents its own separate document/context, so the `.modal-title` should ideally be an `

`. If necessary, you can use the [font size utilities]({{< docsref "/utilities/text#font-size" >}}) to control the heading's appearance. All the following live examples use this approach. -{{< /callout >}} - -### Live demo - -Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page. - - - -
- -
- -```html - - - - - -``` - -### Static backdrop - -When backdrop is set to static, the modal will not close when clicking outside of it. Click the button below to try it. - - - -
- -
- -```html - - - - - -``` - -### Scrolling long content - -When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean. - - - -
- -
- -You can also create a scrollable modal that allows scrolling the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`. - - - -
- -
- -```html - -
- ... -
-``` - -### Vertically centered - -Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. - - - - - -
- - -
- -```html - -
- ... -
- - -
- ... -
-``` - -### Tooltips and popovers - -[Tooltips]({{< docsref "/components/tooltips" >}}) and [popovers]({{< docsref "/components/popovers" >}}) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed. - - - -
- -
- -```html -
-

Popover in a modal

-

This triggers a popover on click.

-
-

Tooltips in a modal

-

This link and that link have tooltips on hover.

-
-``` - -### Using the grid - -Utilize the OUDS Web grid system within a modal by nesting `.container-fluid` within the `.modal-body`. Then, use the normal grid system classes as you would anywhere else. - - - -
- -
- -```html -
-
-
-
.col-md-4
-
.col-md-4 .ms-auto
-
-
-
.col-md-3 .ms-auto
-
.col-md-2 .ms-auto
-
-
-
.col-md-6 .ms-auto
-
-
-
- Level 1: .col-sm-9 -
-
- Level 2: .col-8 .col-sm-6 -
-
- Level 2: .col-4 .col-sm-6 -
-
-
-
-
-
-``` - -### Varying modal content - -Have a bunch of buttons that all trigger the same modal with slightly different contents? Use `event.relatedTarget` and [HTML `data-bs-*` attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) to vary the contents of the modal depending on which button was clicked. - -Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`. - -{{< example stackblitz_add_js="true" >}} - - - - - -{{< /example >}} - -{{< js-docs name="varying-modal-content" file="site/assets/js/partials/snippets.js" >}} - -### Toggle between modals - -Toggle between multiple modals with some clever placement of the `data-bs-target` and `data-bs-toggle` attributes. For example, you could toggle a password reset modal from within an already open sign in modal. **Please note multiple modals cannot be open at the same time**—this method simply toggles between two separate modals. - -{{< design-callout-alert >}} -This toggle behavior between multiple modals should not be used because it does not respect the Orange Design System specifications. It is not recommended for usability reasons. - -Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3-modals/b/774d3d) guidelines on the Orange Design System website. -{{< /design-callout-alert >}} - - -{{< example stackblitz_add_js="true" >}} - - - -{{< /example >}} - -### Change animation - -The `$modal-fade-transform` variable determines the transform state of `.modal-dialog` before the modal fade-in animation, the `$modal-show-transform` variable determines the transform of `.modal-dialog` at the end of the modal fade-in animation. - -If you want for example a zoom-in animation, you can set `$modal-fade-transform: scale(.8)`. - -### Remove animation - -For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup. - -```html - -``` - -### Dynamic heights - -If the height of a modal changes while it is open, you should call `myModal.handleUpdate()` to readjust the modal's position in case a scrollbar appears. - -### Accessibility - -Be sure to add `aria-labelledby="..."`, referencing the modal title, to `.modal`. Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`. Note that you don't need to add `role="dialog"` since we already add it via JavaScript. - -### Embedding YouTube videos - -Embedding YouTube videos in modals requires additional JavaScript not in OUDS Web to automatically stop playback and more. [See this helpful Stack Overflow post](https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal) for more information. - -## Optional sizes - -Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. - -{{< bs-table "table" >}} -| Size | Class | Modal max-width -| --- | --- | --- | -| Small | `.modal-sm` | `300px` | -| Default | None | `460px` | -| Large | `.modal-lg` | `700px` | -| Extra large | `.modal-xl` | `940px` | -{{< /bs-table >}} - -Our default modal without modifier class constitutes the "medium" size modal. - -
- - - -
- -```html -
...
-
...
-
...
-``` - - - - - - - -## Fullscreen Modal - -Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`. - -{{< bs-table >}} -| Class | Availability | -| --- | --- | -| `.modal-fullscreen` | Always | -| `.modal-fullscreen-sm-down` | `480px` | -| `.modal-fullscreen-md-down` | `768px` | -| `.modal-fullscreen-lg-down` | `1024px` | -| `.modal-fullscreen-xl-down` | `1280px` | -| `.modal-fullscreen-xxl-down` | `1440px` | -{{< /bs-table >}} - -{{< design-callout-alert >}} -These **full screen** variants should not be used because they do not respect the Orange Design System specifications. Indeed, modals should always be placed in the center of a page and not be full screen. - -Please refer to the [Modals](https://system.design.orange.com/0c1af118d/p/16d9f3-modals/b/774d3d) guidelines on the Orange Design System website. -{{< /design-callout-alert >}} - -
- - - - - - -
- -```html - -
- ... -
-``` - - - - - - - - - - - - - -## CSS - -### Variables - -As part of OUDS Web's evolving CSS variables approach, modals now use local CSS variables on `.modal`, `.modal-dialog-scrollable` and `.modal-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. - -{{< scss-docs name="modal-css-vars" file="scss/_modal.scss" >}} - -{{< scss-docs name="modal-scrollable-css-vars" file="scss/_modal.scss" >}} - -{{< scss-docs name="modal-backdrop-css-vars" file="scss/_modal.scss" >}} - -### Sass variables - -{{< scss-docs name="modal-variables" file="scss/_variables.scss" >}} - -### Sass loops - -[Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`. - -{{< scss-docs name="modal-fullscreen-loop" file="scss/_modal.scss" >}} - -## Usage - -The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also overrides default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal. - -### Via data attributes - -#### Toggle - -Activate a modal without writing JavaScript. Set `data-bs-toggle="modal"` on a controller element, like a button, along with a `data-bs-target="#foo"` or `href="#foo"` to target a specific modal to toggle. - -```html - -``` - -#### Dismiss - -{{% js-dismiss "modal" %}} - -{{< callout warning >}} -While both ways to dismiss a modal are supported, keep in mind that dismissing from outside a modal does not match the [ARIA Authoring Practices Guide dialog (modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/). Do this at your own risk. -{{< /callout >}} - -### Via JavaScript - -Create a modal with a single line of JavaScript: - -```js -const myModal = new boosted.Modal(document.getElementById('myModal'), options) -// or -const myModalAlternative = new boosted.Modal('#myModal', options) -``` - -{{% enable-btn-close-tooltip 3 modals %}} - -### Options - -{{< markdown >}} -{{< partial "js-data-attributes.md" >}} -{{< /markdown >}} - -{{< bs-table "table" >}} -| Name | Type | Default | Description | -| --- | --- | --- | --- | -| `backdrop` | boolean, `'static'` | `true` | Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close the modal when clicked. | -| `focus` | boolean | `true` | Puts the focus on the modal when initialized. | -| `keyboard` | boolean | `true` | Closes the modal when escape key is pressed. | -{{< /bs-table >}} - -### Methods - -{{< callout danger >}} -{{< partial "callouts/danger-async-methods.md" >}} -{{< /callout >}} - -#### Passing options - -Activates your content as a modal. Accepts an optional options `object`. - -```js -const myModal = new boosted.Modal('#myModal', { - keyboard: false -}) -``` - -{{< bs-table "table" >}} -| Method | Description | -| --- | --- | -| `dispose` | Destroys an element's modal. (Removes stored data on the DOM element) | -| `handleUpdate` | Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). | -| `getInstance` | _Static_ method which allows you to get the modal instance associated with a DOM element. | -| `getOrCreateInstance` | _Static_ method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialized. | -| `hide` | Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). | -| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`. | -| `toggle` | Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). | -{{< /bs-table >}} - -### Events - -OUDS Web's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `
`). - -{{< bs-table >}} -| Event | Description | -| --- | --- | -| `hidden.bs.modal` | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). | -| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. | -| `hidePrevented.bs.modal` | This event is fired when the modal is shown, its backdrop is `static` and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. | -| `show.bs.modal` | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event. | -| `shown.bs.modal` | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event. | -{{< /bs-table >}} - -```js -const myModalEl = document.getElementById('myModal') -myModalEl.addEventListener('hidden.bs.modal', event => { - // do something... -}) -``` +{{< callout-soon >}} diff --git a/site/content/docs/0.0/components/navbar.md b/site/content/docs/0.0/components/navbar.md index a50e61a86e..f3bac304f7 100644 --- a/site/content/docs/0.0/components/navbar.md +++ b/site/content/docs/0.0/components/navbar.md @@ -8,782 +8,4 @@ aliases: toc: true --- -{{< design-callout-alert >}} -This component explains the basic behavior, structure and concepts of navbars from a Bootstrap point of view. Some discrepancies exist with OUDS Web due to a different HTML structure. Moreover, Orange navbars have the same rendering in light and dark mode. - -In order to build an Orange navbar please refer to [Orange navbar]({{< docsref "/components/orange-navbar" >}}). -{{< /design-callout-alert >}} - -## How it works - -Here's what you need to know before getting started with the navbar: - -- Navbars require a wrapping `.navbar` with `.navbar-expand{-sm|-md|-lg|-xl|-xxl}` for responsive collapsing and [color scheme](#color-schemes) classes. -- Navbars and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways. -- Use our [spacing]({{< docsref "/utilities/spacing" >}}) and [flex]({{< docsref "/utilities/flex" >}}) utility classes for controlling spacing and alignment within navbars. -- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin. -- Ensure accessibility by using a ` - -``` - -### With custom logo - -Even though you should use the Master or Small logo, you can still replace it by an other one depending on your needs. - -{{< callout warning >}} -You should consider having a **responsive SVG logo**. In order to do so, you may set up a responsive rendering into your SVG, [as we do with the Master logo]({{< docsref "/about/brand#orange-logo" >}}). - -If you do not intend to use your own SVG, you should explore the DOM solution and therefore do as if you had a [title on one or two lines]({{< ref "#global-header-with-title" >}}). -{{< /callout >}} - -
-
- {{< orange-global-headers id="global-header-2" mode="actions" responsive_logo=true labels_end=true demo=true aria_label="Global navigation - With custom logo example">}} - {{< /orange-global-headers >}} -
-
- -```html -
- -
-``` - -### With title - -Next to the brand logo, you can add a title that can be displayed on one or two lines. - -
- -
- {{< orange-global-headers id="global-header-3" mode="actions" title=true demo=true aria_label="Global navigation - With one line title example">}} - {{< /orange-global-headers >}} -
-
- -```html -
- -
-``` - -
- -
- {{< orange-global-headers id="global-header-4" mode="actions" title=true title_2=true labels=true demo=true aria_label="Global navigation - With two lines title example">}} - {{< /orange-global-headers >}} -
-
- -```html -
- -
-``` - -### With search box - -You can add a search input into your Global header. - -
-
- {{< orange-global-headers id="global-header-5" mode="search" demo=true aria_label="Global navigation - With search box example">}} - {{< /orange-global-headers >}} -
-
- -```html -
- -
-``` - -### With mode selector - -You can add a mode selector control into your Global header. - -{{< callout info >}} -In this section, the dropdown menu items are not functional because the JavaScript is linked to the documentation mode selector; the active state and the tick icon are not rendered correctly. But don't worry, it'll work perfectly in your project. - -Don't forget to import the [corresponding color modes JavaScript]({{< docsref "/customize/color-modes#javascript" >}}) in your project. - -To easily integrate it in your project, you can start from our [Navbar mode selector example]({{< docsref "/examples/navbar-mode-selector" >}}). -{{< /callout >}} - -
-
-
- {{< orange-global-headers id="global-header-6" mode="theme" demo=true aria_label="Global navigation - With mode selector example">}} - {{< /orange-global-headers >}} -
-
-
- -```html - - - - - - - - - - - - - - - -
- -
-``` - -### Minimizing behavior - -When scrolling the page, for breakpoints from `md` to `xxl`, the Global header's height decreases when `.sticky-top` is used on `
`. - -You can see a full example of the minimizing Orange navbar behavior in action [here]({{}}). - -The minimized global header will **always** use the small [Master logo]({{}}). - -{{< callout warning >}} -Be careful when using **`.fixed-top`**, the collapsed content should be escapable easily. -{{< /callout >}} - -{{< callout info >}} -If you don't use the sticky top version you can optimize your JavaScript by not importing this component. -Refer to [Lean JavaScript]({{< docsref "/customize/optimize#lean-javascript" >}}) for more information. -{{< /callout >}} - -## Navigation under - -A Navigation under bar is a simple navigation bar, different than a Supra bar. It can be used as a last part of an Orange navbar whenever your header may have too many items to stand on one line. - -It should be visible only for the larger screens (`lg` to `xxl` breakpoints) using `.navbar-expand-*`. - -
-
- {{< orange-global-headers id="global-header-7" mode="actions" title=true title_2=true labels=true navigation=true aria_label="Global navigation - Standard example with nav-under">}} - {{< /orange-global-headers >}} -
-
- -```html -
- - - -
-``` - -## CSS - -### Variables - -As part of OUDS Web's evolving CSS variables approach, orange navbars now use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. - -{{< scss-docs name="navbar-css-vars" file="scss/_navbar.scss" >}} - -For orange navbars, we added a responsive behavior on medium breakpoints and over. - -{{< scss-docs name="orange-navbar-css-vars" file="scss/_navbar.scss" >}} - -Supra bars just override some variables. - -{{< scss-docs name="supra-navbar-css-vars" file="scss/_orange-navbar.scss" >}} - -Minimized bars just override some variables. - -{{< scss-docs name="minimized-navbar-css-vars" file="scss/_orange-navbar.scss" >}} - -### Sass variables - -For more details, please have a look at the exhaustive list of available variables: - -{{< scss-docs name="orange-navbar-variables" file="scss/_variables.scss" >}} +{{< callout-soon >}} diff --git a/site/content/docs/0.0/components/pagination.md b/site/content/docs/0.0/components/pagination.md index 7b95c7f629..d1f71f90c7 100644 --- a/site/content/docs/0.0/components/pagination.md +++ b/site/content/docs/0.0/components/pagination.md @@ -8,162 +8,4 @@ aliases: toc: true --- -## Overview - -We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping `
@@ -35,9 +33,6 @@

Include via CDN

{{ highlight (printf (``) .Site.Params.cdn.css (.Site.Params.cdn.css_hash | safeHTMLAttr)) "html" "" }} {{ highlight (printf (``) .Site.Params.cdn.js_bundle (.Site.Params.cdn.js_bundle_hash | safeHTMLAttr)) "html" "" }} - -
-

Read our getting started guides

-

Get a jump on including OUDS Web's source files in a new project with our official guides.

-
- - - Webpack - - - - Parcel - - - - Vite - -
-
diff --git a/site/layouts/partials/home/plugins.html b/site/layouts/partials/home/plugins.html deleted file mode 100644 index b9da8e0fb2..0000000000 --- a/site/layouts/partials/home/plugins.html +++ /dev/null @@ -1,66 +0,0 @@ -
-
-
- -
-

Powerful JavaScript plugins without jQuery

-

- Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. OUDS Web's JavaScript is HTML-first, meaning most plugins are added with data attributes in your HTML. Need more control? Include individual plugins programmatically. -

-

- - Learn more about OUDS Web JavaScript - - -

-
-
-
-

Data attribute API

-

Why write more JavaScript when you can write HTML? Nearly all of Bootstrap's JavaScript plugins feature a first-class data API, allowing you to use JavaScript just by adding data attributes.

-
-
- -
    -
    • -
    • -
    • -
-
-
- - {{ highlight (printf `
- -
    -
    • -
    • -
    • -
-
-`) "html" "" }} -

Learn more about our JavaScript as modules and using the programmatic API.

-
-
-

Comprehensive set of plugins

-

OUDS Web features a dozen plugins from Bootstrap that you can drop into any project. Other are specific to OUDS Web. Drop them in all at once, or choose just the ones you need.

-
-
- {{- range $plugin := .Site.Data.plugins -}} - {{- /* TODO we should use urls.JoinPath here too, but the links include `#` which gets escaped */ -}} - {{- $href := printf "/docs/%s/%s" $.Site.Params.docs_version $plugin.link }} -
- -

{{ $plugin.name }}

- {{ $plugin.description }} - -
- {{- end }} -
-
-
- -
diff --git a/site/layouts/shortcodes/callout-soon.html b/site/layouts/shortcodes/callout-soon.html new file mode 100644 index 0000000000..49cd07d2a9 --- /dev/null +++ b/site/layouts/shortcodes/callout-soon.html @@ -0,0 +1,9 @@ +{{- /* + Usage: `callout-soon "type"`, where `type` is a string (default: "component") representing the type of element to be available soon. +*/ -}} + +{{- $type := .Get 0 | default "component" -}} +
+

This {{ $type }} is not yet available.

+

Please check back soon.

+
diff --git a/site/layouts/shortcodes/card.html b/site/layouts/shortcodes/card.html deleted file mode 100644 index 5e0a12eb83..0000000000 --- a/site/layouts/shortcodes/card.html +++ /dev/null @@ -1,61 +0,0 @@ -{{- /* - Usage: `card args` - - `args` are all optional and can be one of the following: - * action: Display action button - default = false - * borders: Add some borders to the card - default = false - * buttons: Display share and favorite buttons - default = false - * caption: Display caption - default = false - * metadata: Display nav - default = false - * open: Define whether the card need some padding x or not - default = false - * rtl: Display the arabic version - default = false -*/ -}} - -{{- $action := .Get "action" | default false -}} -{{- $borders := .Get "borders" | default false -}} -{{- $buttons := .Get "buttons" | default false -}} -{{- $caption := .Get "caption" | default false -}} -{{- $metadata := .Get "metadata" | default false -}} -{{- $open := .Get "open" | default false -}} -{{- $rtl := .Get "rtl" | default false -}} - -
- - - - -
-

{{ if $rtl }}عنوان{{ else }}Title{{ end }}

- {{- if $caption -}} -

{{ if $rtl }}شرح{{ else }}Caption{{ end }}

- {{- end -}} - {{- if $metadata -}} -

{{ if $rtl }}البيانات الوصفية{{ else }}Meta data{{ end }}

- {{- end -}} - {{- if $buttons -}} -
    -
  • - -
    • -
  • - -
    • -
- {{- end -}} - {{- if $action -}} - {{ if $rtl }}وصلة{{ else }}Link{{ end }} - {{- end -}} -
-
diff --git a/site/layouts/shortcodes/orange-footer.html b/site/layouts/shortcodes/orange-footer.html deleted file mode 100644 index 27856352e1..0000000000 --- a/site/layouts/shortcodes/orange-footer.html +++ /dev/null @@ -1,183 +0,0 @@ -{{- /* - Usage: `orange-footer args` - - `args` are all optional and can be one of the following: - * title_content: Display a title with content - default = false - * follow: Display follow content - default = false - * nav: Display nav content - default = false - * service: Display service content - default = false - * mandatory: Display mandatory content - default = false - * extra_social: Add extra social links - default = false - * show_active_link: Display active link in footer - default = false - * id: Set an id for accordions and the footer itself -*/ -}} - -{{- $title_content := .Get "title_content" | default false -}} -{{- $follow := .Get "follow" | default false -}} -{{- $nav := .Get "nav" | default false -}} -{{- $service := .Get "service" | default false -}} -{{- $mandatory := .Get "mandatory" | default false -}} -{{- $extra_social := .Get "extra_social" | default false -}} -{{- $show_active_link := .Get "show_active_link" | default false -}} -{{- $id := .Get "id" -}} -{{- $input := .Inner -}} - - diff --git a/site/layouts/shortcodes/orange-global-headers.html b/site/layouts/shortcodes/orange-global-headers.html deleted file mode 100644 index 1512df7ec8..0000000000 --- a/site/layouts/shortcodes/orange-global-headers.html +++ /dev/null @@ -1,198 +0,0 @@ -{{- /* - Usage: `orange-global-headers args` - - `args` are all optional and can be one of the following: - * id: set an id to avoid duplicate ids in a same page (default: "global-header") - * responsive_logo: display a responsive logo (default: false) - * title: add a title if defined - * title_2: add a second title line if defined - * mode: mode used to display specific content if defined (choose one among ["actions", "search"]) - * demo: if the global shortcode is called from the documentation (default: false) - * labels: use generic labels instead of real-life labels (default: false) - * labels_end: justify labels at the end (default: false) - * navigation: add a navigation bar under the global header (default: false) - * supra: if the global header is used with a supra bar (default: false) - * aria_label: set the aria-label for the current global header -*/ -}} - -{{- $id := .Get "id" | default "global-header"}} -{{- $responsive_logo := .Get "responsive_logo" | default false -}} -{{- $title := .Get "title" | default false -}} -{{- $title_2 := .Get "title_2" | default false -}} -{{- $mode := .Get "mode" -}} -{{- $demo := .Get "demo" | default false -}} -{{- $labels := .Get "labels" | default false -}} -{{- $labels_end := .Get "labels_end" | default false -}} -{{- $navigation := .Get "navigation" | default false -}} -{{- $supra := .Get "supra" | default false -}} -{{- $aria_label := .Get "aria_label"}} -{{- $input := .Inner -}} - - -{{- if $navigation }} - -{{- end }} diff --git a/site/layouts/shortcodes/orange-supra.html b/site/layouts/shortcodes/orange-supra.html deleted file mode 100644 index b209281f3d..0000000000 --- a/site/layouts/shortcodes/orange-supra.html +++ /dev/null @@ -1,62 +0,0 @@ -{{- /* - Usage: `orange-supra args` - - `args` are all optional and can be one of the following: - * aria_label: set the aria-label for the current supra bar - * mode: mode used to display specific content if defined (choose one among ["languages", "actions"]) - * theme_dark: set the `data-bs-theme="dark"` for the current supra bar (default: false) -*/ -}} - -{{- $aria_label := .Get "aria_label" -}} -{{- $mode := .Get "mode" -}} -{{- $theme_dark := .Get "theme_dark" | default false -}} - -{{- $input := .Inner -}} - - diff --git a/site/static/docs/0.0/assets/brand/OBS-logo-formatted.svg b/site/static/docs/0.0/assets/brand/OBS-logo-formatted.svg deleted file mode 100644 index 6d2241dac4..0000000000 --- a/site/static/docs/0.0/assets/brand/OBS-logo-formatted.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/site/static/docs/0.0/assets/brand/OBS-logo.svg b/site/static/docs/0.0/assets/brand/OBS-logo.svg deleted file mode 100644 index fa6cb09dbc..0000000000 --- a/site/static/docs/0.0/assets/brand/OBS-logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/site/static/docs/0.0/assets/img/ouds-web-sprite.svg b/site/static/docs/0.0/assets/img/ouds-web-sprite.svg index 7cac5ba532..e0af766e8f 100644 --- a/site/static/docs/0.0/assets/img/ouds-web-sprite.svg +++ b/site/static/docs/0.0/assets/img/ouds-web-sprite.svg @@ -1,61 +1,2 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -