feat(guidelines): drop design guidelines content (#960)

* Design Guidelines becomes a simple page redirecting to ODS website * Design Guidelines content has been distributed among components and utilities doc pages, and examples * Update of the home page content regarding design guidelines * Percy now analyses /docs/components and /docs/forms instead of /guidelines Co-authored-by: Isabelle Chanclou <[email protected]> Co-authored-by: Julien Déramond <[email protected]> Co-authored-by: Louis Maxime Piton <[email protected]>
Orange-OpenSource · Dec 14, 2021 · 46b54a8 · 46b54a8
1 parent c6c181e
commit 46b54a8
Show file tree

Hide file tree

Showing 48 changed files with 1,492 additions and 3,126 deletions.
diff --git a/.github/workflows/percy.yml b/.github/workflows/percy.yml
@@ -4,7 +4,8 @@ on:
     paths:
       - 'js/**'
       - 'scss/**'
-      - 'site/content/docs/**/guidelines'
+      - 'site/content/docs/**/components'
+      - 'site/content/docs/**/forms'
     branches:
       - main
       - "!dependabot/**"
@@ -67,7 +68,7 @@ jobs:
         uses: percy/[email protected]
         with:
           build-directory: "_site/"
-          flags: "--snapshot-files ./docs/5.1/guidelines/**/*.html,./docs/5.1/examples/cheatsheet/index.html,./docs/5.1/examples/cheatsheet-rtl/index.html"
+          flags: "--snapshot-files ./docs/**/components/**/*.html,./docs/**/forms/**/*.html"
           verbose: true
         env:
           PERCY_TOKEN: "${{ secrets.PERCY_TOKEN }}"

diff --git a/config.yml b/config.yml
@@ -61,6 +61,8 @@ params:
   twitter:                          "orange"
   icons:                            "https://design.orange.com/icons-libraries/"
   bootstrap:                        "https://getbootstrap.com"
+  ods:
+    web:                            "https://system.design.orange.com/0c1af118d/n/76065f"
 
   download:
     source:                         "https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/archive/v5.1.3.zip"

diff --git a/site/assets/scss/_boosted.scss b/site/assets/scss/_boosted.scss
@@ -146,3 +146,19 @@ small.d-inline-flex.px-2.py-1.font-monospace.text-muted.border.rounded-3 {
   // stylelint-disable-next-line declaration-no-important
   border-color: $light !important;
 }
+
+// Design guidelines
+
+.ods-guidelines {
+  background-color: $gray-300;
+
+  .card a:hover::before {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    content: "";
+    background-color: $accessible-orange;
+  }
+}
diff --git a/site/content/docs/5.1/about/brand.md b/site/content/docs/5.1/about/brand.md
@@ -6,18 +6,118 @@ group: about
 toc: true
 ---
 
-Have a need for Boosted'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 Brand website](https://brand.orange.com/guidelines/).
+{{< callout info >}}
+Boosted is based on [Bootstrap]({{< param bootstrap >}}), which has [its own logo and brand usage guidelines]({{< param bootstrap >}}/docs/{{< param docs_version >}}/about/brand/).
+{{</ callout >}}
 
+Have a need for Boosted'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 >}}).
 
-Please refer to our **Design guidelines** to learn about:
-- [Orange Master logo]({{< docsref "/guidelines/logos" >}})
-- [Orange color palette]({{< docsref "/guidelines/colors" >}})
-- [Orange typography]({{< docsref "/guidelines/typography" >}})
-- etc.
+## Orange logo
 
+<div class="row row-cols-md-2 mt-4 mb-5">
+  <div class="col">
+    <div class="ratio ratio-1x1">
+    <figure class="figure d-flex bg-dark">
+      <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" class="figure-img img-fluid m-auto" width="220" height="220" role="img" alt="Orange" loading="lazy">
+      <figcaption class="figure-caption fw-bold text-body position-absolute">Master logo</figcaption>
+    </figure>
+    </div>
+  </div>
+  <div class="col">
+    <div class="ratio ratio-1x1">
+    <figure class="figure d-flex bg-dark">
+      <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" class="figure-img m-auto" width="30" height="30" role="img" alt="Orange" loading="lazy">
+      <figcaption class="figure-caption fw-bold text-body position-absolute">Small logo</figcaption>
+    </figure>
+    </div>
+  </div>
+</div>
 
-{{< callout info >}}
-## Bootstrap brand guidelines
+### Responsive SVG
 
-Boosted is based on [Bootstrap]({{< param bootstrap >}}), which has [its own logo and brand usage guidelines]({{< param bootstrap >}}/docs/{{< param docs_version >}}/about/brand/).
-{{< /callout >}}
+Boosted 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
+
+<div class="row row-cols-1 row-cols-md-2 gy-5 pt-2 mb-5">
+  <div class="col">
+    <div class="ratio ratio-16x9">
+      <figure class="figure d-flex bg-dark">
+        <div class="figure-img m-auto d-inline-flex align-items-baseline">
+          <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="" aria-hidden="true" loading="lazy">
+          <span class="h5 ms-2 mb-0 align-self-end">
+            <span class="visually-hidden">Orange </span>
+            Business<br>Services
+          </span>
+        </div>
+        <figcaption class="figure-caption fw-bold text-body position-absolute">OBS logo left-aligned with white descriptor</figcaption>
+      </figure>
+    </div>
+  </div>
+  <div class="col">
+    <div class="ratio ratio-16x9">
+      <figure class="figure d-flex border border-1">
+        <div class="figure-img m-auto d-inline-flex align-items-baseline">
+          <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="" aria-hidden="true" loading="lazy">
+          <span class="h5 ms-2 mb-0 align-self-end">
+            <span class="visually-hidden">Orange </span>
+            Business<br>Services
+          </span>
+        </div>
+        <figcaption class="figure-caption fw-bold text-body position-absolute">OBS logo left-aligned with black descriptor</figcaption>
+      </figure>
+    </div>
+  </div>
+  <div class="col">
+    <div class="ratio ratio-16x9">
+      <figure class="figure d-flex bg-dark">
+        <div class="figure-img m-auto d-inline-flex align-items-baseline">
+          <span class="h5 me-2 mb-0 align-self-end text-end">
+            <span class="visually-hidden">Orange </span>
+            Business<br>Services
+          </span>
+          <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="" aria-hidden="true" loading="lazy">
+        </div>
+        <figcaption class="figure-caption fw-bold text-body position-absolute">OBS logo left-aligned with white descriptor</figcaption>
+      </figure>
+    </div>
+  </div>
+  <div class="col">
+    <div class="ratio ratio-16x9">
+      <figure class="figure d-flex border border-1">
+        <div class="figure-img m-auto d-inline-flex align-items-baseline">
+          <span class="h5 me-2 mb-0 align-self-end text-end">
+            <span class="visually-hidden">Orange </span>
+            Business<br>Services
+          </span>
+          <img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="" aria-hidden="true" loading="lazy">
+        </div>
+        <figcaption class="figure-caption fw-bold text-body position-absolute">OBS logo left-aligned with black descriptor</figcaption>
+      </figure>
+    </div>
+  </div>
+</div>
+
+### Using semantic markup
+
+Boosted [flex]({{< docsref "/utilities/flex" >}}) and [spacing]({{< docsref "/utilities/spacing" >}}) utilities allows to use semantic markup to implement Orange Business Services' logo.
+
+{{< example show_preview="false" >}}
+<div class="d-inline-flex align-items-baseline">
+  <img id="obs" src="orange-logo.svg" width="50" height="50" alt="" aria-hidden="true" loading="lazy">
+  <span class="h5 ms-2 mb-0 align-self-end">
+    <span class="visually-hidden">Orange </span>
+    Business<br>Services
+  </span>
+</div>
+{{< /example >}}
+
+A single CSS property is required for proper alignment:
+
+{{< example show_preview="false" lang="scss" >}}
+#obs {
+  margin-bottom: $spacer / 10;
+}
+{{< /example >}}
diff --git a/site/content/docs/5.1/components/alerts.md b/site/content/docs/5.1/components/alerts.md
@@ -93,14 +93,14 @@ Alerts come with a smaller variant: `.alert-sm`.
 
 ### Additional content
 
-Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
+Alerts can also contain additional HTML elements like headings, links and paragraphs.
 
 {{< example >}}
 <div class="alert alert-success" role="alert">
   <span class="alert-icon"><span class="visually-hidden">Success</span></span>
   <div>
-    <h4 class="alert-heading">Success notification text goes here.</h4>
-    <p>Description text goes here.</p>
+    <h4 class="alert-heading">Success notification text with <a href="#">a link</a> goes here.</h4>
+    <p>Description text with <a href="#">a link</a> goes here.</p>
   </div>
 </div>
 {{< /example >}}

diff --git a/site/content/docs/5.1/components/close-button.md b/site/content/docs/5.1/components/close-button.md
@@ -31,6 +31,22 @@ Change the default `.btn-close` to be white with the `.btn-close-white` class.
 <button type="button" class="btn-close btn-close-white" disabled><span class="visually-hidden">Close</span></button>
 {{< /example >}}
 
+## Without specific class
+
+Close buttons can also be created without `.btn-close`.
+
+{{< example >}}
+<button type="button" class="btn btn-icon btn-no-outline">
+  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
+  <span class="visually-hidden">Close</span>
+</button>
+
+<button type="button" class="btn btn-icon btn-no-outline" disabled>
+  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#delete"></use></svg>
+  <span class="visually-hidden">Close</span>
+</button>
+{{< /example >}}
+
 ## Sass
 
 ### Variables

diff --git a/site/content/docs/5.1/components/navs-tabs.md b/site/content/docs/5.1/components/navs-tabs.md
@@ -14,6 +14,8 @@ Navigation available in Boosted share general markup and styles, from the base `
 The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
 
 {{< callout info >}}
+Note that the `.nav-link` can be used out of any context and combined with our [text utilities]({{<docsref "/utilities/text">}}) or with our [inline text elements]({{<docsref "/content/typography#inline-text-elements">}}).
+
 The base `.nav` component does not include any `.active` state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.
 
 To convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for current page, or `true` for the current item in a set.

diff --git a/site/content/docs/5.1/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md
@@ -94,8 +94,31 @@ With an SVG:
       <circle cx="50" cy="50" r="30" fill="#007bff"/>
     </svg>
   </a>
+
+  <button type="button" class="btn btn-link p-0 me-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" focusable="false">
+      <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tooltip"></use>
+    </svg>
+    <span class="visually-hidden">Helper</span>
+  </button>
 </div>
 
+```html
+<a href="#" class="d-inline-block" data-bs-toggle="tooltip" title="Default tooltip">
+  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
+    <rect width="100%" height="100%" fill="#563d7c"/>
+    <circle cx="50" cy="50" r="30" fill="#007bff"/>
+  </svg>
+</a>
+
+<button type="button" class="btn btn-link p-0 me-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
+  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" focusable="false">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tooltip"></use>
+  </svg>
+  <span class="visually-hidden">Helper</span>
+</button>
+```
+
 ## Sass
 
 ### Variables