docs: enhance Extend > Icons page to reflect our latest recommendation (

#2075) Co-authored-by: Julien Déramond <julien.deramond@orange.com> Co-authored-by: louismaxime.piton <louismaxime.piton@orange.com>
Orange-OpenSource · Feb 23, 2024 · 1ec6baf · 1ec6baf
1 parent cce0830
commit 1ec6baf
Show file tree

Hide file tree

Showing 16 changed files with 405 additions and 342 deletions.
diff --git a/NOTICE.txt b/NOTICE.txt
@@ -57,10 +57,10 @@ 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
 site/static/docs/**/assets/brand/orange-social.svg
-site/static/docs/**/assets/img/boosted-cross.svg
 site/static/docs/**/assets/img/boosted-guidelines.png
 site/static/docs/**/assets/img/boosted-guidelines@2x.png
 site/static/docs/**/assets/img/boosted-sprite.svg
+site/static/docs/**/assets/img/boosted-warning.svg
 site/static/docs/**/assets/img/favicons/android-chrome-192x192.png
 site/static/docs/**/assets/img/favicons/android-chrome-512x512.png
 site/static/docs/**/assets/img/favicons/apple-touch-icon.png

diff --git a/hugo.yml b/hugo.yml
@@ -71,6 +71,9 @@ params:
  twitter: "getbootstrap"
  blog: "https://blog.getbootstrap.com/"
  icons: "https://oran.ge/icons"
+ icons_develop: "https://design.orange.com/0c1af118d/p/12bc75-develop"
+ icons_license: "https://design.orange.com/0c1af118d/p/92bb17-usage/t/63532c"
+ icons_usage: "https://design.orange.com/0c1af118d/p/92bb17-usage"
  bootstrap: "https://getbootstrap.com"
  ods:
  web: "https://oran.ge/dsweb"

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -467,4 +467,29 @@
  white-space: nowrap;
  }
 }
+
+// scss-docs-start icon-home
+.icon-home::before {
+ display: inline-block;
+ width: 2rem;
+ height: 2rem;
+ vertical-align: bottom;
+ content: "";
+ background-color: var(--bs-body-color);
+ background-size: contain;
+ mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path d='M553.478 147.416v.017a74.956 74.956 0 0 0-107.08.13v-.021L100 500h150v300a75 75 0 0 0 75 75h350a75 75 0 0 0 75-75V500h150ZM580 537.52V755H362.5a37.5 37.5 0 0 1-37.5-37.5V500h217.5a37.5 37.5 0 0 1 37.5 37.5v.02Z'/></svg>");
+}
+// scss-docs-end icon-home
+
+// scss-docs-start icon-warning
+.icon-warning::after {
+ display: inline-block;
+ width: 2rem;
+ height: 2rem;
+ vertical-align: bottom;
+ content: "";
+ background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path fill='%23fc0' d='M500.497 125a93.94 93.94 0 0 1 81.09 46.517l328.62 562.5-.008.005a93.709 93.709 0 0 1-81.09 140.983H171.887a93.71 93.71 0 0 1-81.09-140.983l.765-1.326.036-.062 327.8-561.117C436.254 142.707 467.122 125 500.497 125Z'/><path d='M501.507 680.005c-26.233-.002-47.5 21.262-47.502 47.495s21.26 47.5 47.493 47.505a47.5 47.5 0 0 0 47.507-47.5c0-26.233-21.265-47.5-47.498-47.5m-.01-380.007c-26.238 0-47.507 21.27-47.507 47.507 0 .967.037 1.918.094 2.867l15.74 258.716.004.52c.288 17.092 14.355 23.53 31.667 23.53 17.486 0 31.662-6.568 31.67-24.05l15.7-258.121.057-.86a44 44 0 0 0 .082-2.602c0-26.238-21.27-47.507-47.507-47.507' fill='%23000'/></svg>");
+ background-size: contain;
+}
+// scss-docs-end icon-warning
 // End mod
diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md
@@ -70,19 +70,19 @@ The recommended way of using an icon in a button is [an embedded SVG]({{< docsre
 {{< example >}}
 <button type="button" class="btn btn-primary btn-sm">
  <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible">
- <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+ <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  Primary
 </button>
 <button type="button" class="btn btn-primary">
  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1">
- <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+ <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  Primary
 </button>
 <button type="button" class="btn btn-primary btn-lg">
  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="me-1 overflow-visible">
- <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+ <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  Primary
 </button>
@@ -95,19 +95,19 @@ Add `.btn-icon` to get a squared button, meant to only contain an icon. Make sur
 {{< example >}}
 <button type="button" class="btn btn-icon btn-outline-secondary btn-sm">
  <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
- <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+ <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  <span class="visually-hidden">Secondary</span>
 </button>
 <button type="button" class="btn btn-icon btn-outline-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#success"/>
+ <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  <span class="visually-hidden">Secondary</span>
 </button>
 <button type="button" class="btn btn-icon btn-outline-secondary btn-lg">
  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
- <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+ <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  <span class="visually-hidden">Secondary</span>
 </button>
@@ -120,19 +120,19 @@ Use `.btn-no-outline` to get a borderless button as default state, and a consist
 {{< example >}}
 <button type="button" class="btn btn-icon btn-no-outline btn-sm">
  <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
- <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+ <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  <span class="visually-hidden">No outline</span>
 </button>
 <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#success"/>
+ <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  <span class="visually-hidden">No outline</span>
 </button>
 <button type="button" class="btn btn-icon btn-no-outline btn-lg">
  <svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
- <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#success"/>
+ <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#tick-confirmation"/>
  </svg>
  <span class="visually-hidden">No outline</span>
 </button>

diff --git a/site/content/docs/5.3/components/title-bars.md b/site/content/docs/5.3/components/title-bars.md
@@ -83,7 +83,7 @@ We **strongly recommend** to use `srcset` attribute as it is [well supported](ht
 <div class="bg-supporting-purple title-bar" data-bs-theme="light">
  <div class="container-xxl">
  <h1 class="display-1">Title</h1>
- <svg aria-hidden="true" focusable="false" width="1.8em"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#document"/></svg>
+ <svg aria-hidden="true" focusable="false" width="1.8em"><use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#file-document"/></svg>
  </div>
 </div>
 {{</ example >}}

diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md
@@ -127,14 +127,14 @@ With an SVG:
 
 <div class="bd-example tooltip-demo">
  <a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Default tooltip">
- <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" focusable="false" aria-hidden="true">
+ <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true" focusable="false">
   <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" data-bs-title="Tooltip on top">
- <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" focusable="false" aria-hidden="true">
+ <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" class="text-info" aria-hidden="true" focusable="false">
   <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#assistance"></use>
  </svg>
  <span class="visually-hidden">Helper</span>
@@ -143,14 +143,14 @@ With an SVG:
 
 ```html
 <a href="#" class="d-inline-block" data-bs-toggle="tooltip" data-bs-title="Default tooltip" aria-label="Default tooltip">
- <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" focusable="false" aria-hidden="true">
+ <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100" aria-hidden="true" focusable="false">
  <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" data-bs-title="Tooltip on top">
- <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" focusable="false" aria-hidden="true">
+ <svg xmlns="http://www.w3.org/2000/svg" width="1.25rem" height="1.25rem" class="text-info" aria-hidden="true" focusable="false">
  <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#assistance"></use>
  </svg>
  <span class="visually-hidden">Helper</span>