Merge pull request #965 from Orange-OpenSource/main-jd-replace-design…

…-guidelines-content-lmp Some drops on guidelines
Orange-OpenSource · Dec 9, 2021 · aba759e · aba759e
2 parents c747184 + 30d335b
commit aba759e
Show file tree

Hide file tree

Showing 35 changed files with 701 additions and 2,530 deletions.
diff --git a/site/content/docs/5.1/components/alerts.md b/site/content/docs/5.1/components/alerts.md
@@ -82,7 +82,7 @@ Alerts come with a smaller variant: `.alert-sm`.
 </div>
 <div class="alert alert-warning alert-sm" role="alert">
   <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
-  <p>Warning notification text goes here.</p>
+  <p>Warning notification text goes here. <a href="#" aria-label="Action description" title="Action description">Action</a></p>
 </div>
 <div class="alert alert-danger alert-sm" role="alert">
   <span class="alert-icon"><span class="visually-hidden">Error</span></span>
@@ -93,13 +93,13 @@ 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, actions, paragraphs and dividers.
 
 {{< 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>
+    <h4 class="alert-heading">Success notification text goes here. <a href="#" aria-label="Action description" title="Action description">Action</a></h4>
     <p>Description text goes here.</p>
   </div>
 </div>

diff --git a/site/content/docs/5.1/components/card.md b/site/content/docs/5.1/components/card.md
@@ -10,19 +10,78 @@ toc: true
 
 A **card** is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you're familiar with Boosted 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
 
-## Example
+## Examples
 
 Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Boosted components. They have no `margin` by default, so use [spacing utilities]({{< docsref "/utilities/spacing" >}}) as needed.
 
-Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing).
+Below are some examples of basic cards. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various [sizing options](#sizing).
 
-{{< example >}}
-<div class="card" style="width: 18rem;">
-  {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
-  <div class="card-body">
-    <h5 class="card-title">Card title</h5>
-    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-    <a href="#" class="btn btn-primary">Go somewhere</a>
+{{< example class="row row-cols-1 row-cols-md-2 row-cols-lg-3 gy-3 gy-md-5" >}}
+<div class="col m-0">
+  <div class="card border-0">
+    {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
+    <div class="card-body px-0">
+      <h5 class="card-title">Title</h5>
+      <p class="card-text fw-bold">Caption</p>
+    </div>
+    <div class="card-footer px-0 pt-2">
+      <a class="btn btn-secondary" aria-label="Button description" title="Button description">Button</a>
+    </div>
+  </div>
+</div>
+<div class="col m-0"> <!-- to replace -->
+  <div class="card">
+    {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
+    <div class="card-body">
+      <h5 class="card-title">Title</h5>
+      <p class="card-text fw-bold">Caption</p>
+    </div>
+    <div class="card-footer">
+      <p class="card-text">Meta data</p>
+    </div>
+  </div>
+</div>
+<div class="col m-0">
+  <div class="card border-0">
+    {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
+    <div class="card-body bg-dark">
+      <h5 class="card-title">Title</h5>
+      <p class="card-text fw-bold">Caption</p>
+    </div>
+    <div class="card-footer bg-dark text-light">
+      <p class="card-text">Meta data</p>
+    </div>
+  </div>
+</div>
+{{< /example >}}
+
+{{< example class="row row-cols-1 row-cols-md-2 row-cols-lg-3 gy-3 gy-md-5 bg-dark" >}}
+<div class="col m-0">
+  <div class="card border-0 p-0 bg-dark">
+    {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}}
+    <div class="card-body px-0">
+      <h5 class="card-title">Title</h5>
+    </div>
+  </div>
+</div>
+<div class="col m-0">
+  <div class="card border-dark">
+    {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}}
+    <div class="card-body bg-dark">
+      <h5 class="card-title">Title</h5>
+    </div>
+    <div class="card-footer bg-dark">
+      <p class="card-text text-light">Meta data</p>
+    </div>
+  </div>
+</div>
+<div class="col m-0">
+  <div class="card border-0 bg-body">
+    {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}}
+    <div class="card-body">
+      <h5 class="card-title">Title</h5>
+      <p class="card-text fw-bold">Caption</p>
+    </div>
   </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
@@ -6,14 +6,44 @@ group: components
 toc: true
 ---
 
-## Example
+{{< callout warning >}}
+This section might change in the future with [#521]({{<param repo>}}/issues/521). The class **`.btn-close` might be removed**.
+{{< /callout >}}
+
+## Examples
 
 Provide an option to dismiss or close a component with `.btn-close`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `mask-image`. **Be sure to include text for screen readers**, as we've done with `<span class="visually-hidden">`.
 
 {{< example >}}
 <button type="button" class="btn-close"><span class="visually-hidden">Close</span></button>
 {{< /example >}}
 
+{{< callout info >}}
+The **following examples** are branded and won't change for now. The white variant of these buttons will come with [#917]({{<param repo>}}/issues/917).
+{{< /callout >}}
+
+{{< 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-secondary">
+  <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>
+
+<button type="button" class="btn btn-icon btn-secondary" 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 >}}
+
 ## Disabled state
 
 Disabled close buttons change their `color`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.

diff --git a/site/content/docs/5.1/components/navs-tabs.md b/site/content/docs/5.1/components/navs-tabs.md
@@ -14,12 +14,19 @@ 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.
+
 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.
 {{< /callout >}}
 
 {{< example >}}
+<a class="nav-link" aria-current="page" href="#" aria-label="Link description" title="Link description">Link</a>
+<a class="nav-link small" aria-current="page" href="#" aria-label="Link description" title="Link description">Link</a>
+
+<div class="mt-3"></div>
+
 <ul class="nav">
   <li class="nav-item">
     <a class="nav-link active" aria-current="page" href="#">Active</a>

diff --git a/site/content/docs/5.1/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md
@@ -88,14 +88,71 @@ And with custom HTML added:
 With an SVG:
 
 <div class="bd-example tooltip-demo">
-  <a href="#" class="d-inline-block" data-bs-toggle="tooltip" title="Default tooltip">
+  <button type="button" class="btn btn-link p-0 me-3" 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>
+
+  <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" role="img" focusable="false">
+        <use xlink:href="/docs/{{<param docs_version>}}/assets/img/boosted-sprite.svg#tooltip"></use>
+    </svg>
+  </button>
+
+  <button type="button" class="btn btn-link p-0 me-3" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" focusable="false">
+        <use xlink:href="/docs/{{<param docs_version>}}/assets/img/boosted-sprite.svg#tooltip"></use>
+    </svg>
+  </button>
+
+  <button type="button" class="btn btn-link p-0 me-3" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" focusable="false">
+        <use xlink:href="/docs/{{<param docs_version>}}/assets/img/boosted-sprite.svg#tooltip"></use>
+    </svg>
+  </button>
+
+  <button type="button" class="btn btn-link p-0" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" focusable="false">
+        <use xlink:href="/docs/{{<param docs_version>}}/assets/img/boosted-sprite.svg#tooltip"></use>
+    </svg>
+  </button>
 </div>
 
+```html
+<button type="button" class="btn btn-link p-0 me-3" 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>
+</button>
+
+<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" role="img" focusable="false">
+      <use xlink:href="/docs/{{<param docs_version>}}/assets/img/boosted-sprite.svg#tooltip"></use>
+  </svg>
+</button>
+
+<button type="button" class="btn btn-link p-0 me-3" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
+  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" focusable="false">
+      <use xlink:href="/docs/{{<param docs_version>}}/assets/img/boosted-sprite.svg#tooltip"></use>
+  </svg>
+</button>
+
+<button type="button" class="btn btn-link p-0 me-3" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
+  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" focusable="false">
+      <use xlink:href="/docs/{{<param docs_version>}}/assets/img/boosted-sprite.svg#tooltip"></use>
+  </svg>
+</button>
+
+<button type="button" class="btn btn-link p-0" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
+  <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" role="img" focusable="false">
+      <use xlink:href="/docs/{{<param docs_version>}}/assets/img/boosted-sprite.svg#tooltip"></use>
+  </svg>
+</button>
+```
+
 ## Sass
 
 ### Variables