docs(brand): enhance section on how to use logos (#1065)

NOTICE.txt

@@ -35,12 +35,13 @@ and reproducing the content of the NOTICE and DOCUMENTATION files.
 Any use or displaying shall constitute an infringement under intellectual property laws of France and international conventions.
 
 dist/img/orange-logo.svg
-img/orange-logo.svg
 nuget/boosted.png
 site/layouts/partials/icons.html
 site/layouts/partials/icons/download.svg
 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
 site/static/docs/**/assets/brand/orange-social.svg
 site/static/docs/**/assets/img/boosted-cross.svg

package.json

@@ -49,7 +49,6 @@
  "css-prefix-main": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
  "css-prefix-examples": "postcss --config build/postcss.config.js --replace \"site/content/**/*.css\"",
  "fonts": "cross-env mkdir -p dist/fonts && cp -r ./fonts/* dist/fonts/",
- "img": "cross-env mkdir -p dist/img && cp -r ./img/* dist/img/",
  "js": "npm-run-all js-compile js-minify",
  "js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",
  "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
@@ -86,7 +85,7 @@
  "release-version": "node build/change-version.js",
  "release-zip": "cross-env-shell \"rm -rf boosted-$npm_package_version-dist && cp -r dist/ boosted-$npm_package_version-dist && zip -r9 boosted-$npm_package_version-dist.zip boosted-$npm_package_version-dist && rm -rf boosted-$npm_package_version-dist\"",
  "release-zip-examples": "node build/zip-examples.js",
- "dist": "npm-run-all --aggregate-output --parallel css js img fonts",
+ "dist": "npm-run-all --aggregate-output --parallel css js fonts",
  "test": "npm-run-all lint dist js-test docs-build docs-lint",
  "netlify": "cross-env-shell HUGO_BASEURL=$DEPLOY_PRIME_URL npm-run-all dist release-sri storybook-build docs-build",
  "watch": "npm-run-all --parallel watch-*",
@@ -173,7 +172,7 @@
  "vnu-jar": "^22.9.29"
  },
  "files": [
- "dist/{css,js,img,fonts}/*.{css,js,map,svg,woff2}",
+ "dist/{css,js,fonts}/*.{css,js,map,svg,woff2}",
  "js/{src,dist}/**/*.{js,map}",
  "scss/**/*.scss",
  "NOTICE.txt",

site/content/docs/5.2/about/brand.md

@@ -19,15 +19,15 @@ Have a need for Boosted's brand resources? Great! We have only a few guidelines
 <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">
+ <figure class="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">
+ <figure class="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>
@@ -43,83 +43,17 @@ Boosted uses —and recommends to use— **a single SVG file for both logos**, s
 
 ## 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>
+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.
+
+<div class="row row-cols-md-2 mt-4 mb-5">
  <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 class="ratio ratio-1x1">
+ <figure class="d-flex bg-dark">
+  <img src="/docs/{{< param docs_version >}}/assets/brand/OBS-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">Orange Business Services logo</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 >}}
+{{< svg-docs file="OBS-logo" >}}

site/layouts/shortcodes/svg-docs.html

@@ -1,48 +1,24 @@
 {{- /*
- Usage: `svg-docs file="img/orange-logo.svg" downloadable="true"`
+ Usage: `svg-docs file="orange-logo" downloadable="true"`
 
  Prints SVG content.
 
  Optional parameters:
- file: SVG file path - default: `img/orange-logo.svg`
+ file: SVG file path without file extension - default: `orange-logo`
  downloadable: is the file downloadable? - default: `true`
 */ -}}
 
-{{- $file := .Get "file"| default "img/orange-logo.svg" -}}
-{{- $svg := readFile $file -}}
-{{- $code := $svg -}}
+{{- $fileName := .Get "file" | default "orange-logo" -}}
+{{- $file := (print "site/static/docs/" .Site.Params.docs_version "/assets/brand/" $fileName) -}}
+{{- $svgFormatted := readFile (print $file "-formatted.svg") -}}
+{{- $svg := readFile (print $file ".svg") -}}
 {{- $downloadable := .Get "downloadable" | default true -}}
 
-{{- if eq $file "img/orange-logo.svg" -}}
- {{- /* Line feed */ -}}
- {{- $code = replace $code ">" ">\n" -}}
- {{- $code = replace $code "{" " {\n" -}}
- {{- $code = replace $code "}}" "\n\t}\n}" -}}
- {{- $code = replace $code "}@" "}\n@" -}}
- {{- $code = replace $code "}<" "}\n<" -}}
-
- {{- /* Indentation */ -}}
- {{- $code = replace $code "<path" "\t<path" -}}
- {{- $code = replace $code "<defs" "\t<defs" -}}
- {{- $code = replace $code "</defs" "\t</defs" -}}
- {{- $code = replace $code "<style" "\t\t<style" -}}
- {{- $code = replace $code "</style" "\t\t</style" -}}
- {{- $code = replace $code "@" "\t\t\t@" -}}
- {{- $code = replace $code "#b" "\t\t\t\t#b" -}}
- {{- $code = replace $code "#c" "\t\t\t\t#c" -}}
- {{- $code = replace $code "display" "\t\t\t\t\tdisplay" -}}
- {{- $code = replace $code "}" "\t\t\t}" -}}
-
- {{- /* Content */ -}}
- {{- $code = replace $code ":none" ": none" -}}
- {{- $code = replace $code "none" "none;" -}}
-{{- end -}}
-
-{{- highlight $code "html" "" }}
+{{- highlight $svgFormatted "html" "" }}
 
 {{- if eq $downloadable true -}}
  {{- /* Get filename */ -}}
- {{ $output := split $file "/" }}
+ {{ $output := split (print $file ".svg") "/" }}
  {{ $output = last 1 $output }}
 
  {{- /* Get filesize */ -}}