doc: Add Brands section to documentation

site/data/sidebar-foundation.yml

@@ -8,6 +8,7 @@
       coming_soon: true
     - title: Colors
     - title: Color modes
+    - title: Themes
     - title: CSS variables
     - title: Reboot
     - title: Typography

site/src/components/shortcodes/SvgDocs.astro

@@ -19,16 +19,20 @@ interface Props {
    * @default true
    */
   downloadable?: boolean
+
   /**
    * Defines label to complete 'Copy SVG to clipboard' button aria-label.
    */
   buttonLabel?: string
+
+  brand?: string
 }
+const { brand = 'orange' } = Astro.props
 
-const { file = `${getConfig().brand}-logo`, downloadable = true, buttonLabel } = Astro.props
+const { file = `${brand}-logo`, downloadable = true, buttonLabel } = Astro.props
 
-const filePath = `site/${getConfig().brand}/static/docs/[version]/assets/brand/${file}`
-const svgFormattedPath = `${filePath}-formatted.svg`
+const filePath = `site/static/[brand]/docs/[version]/assets/brand/${file}`
+const svgFormattedPath = `${filePath}.svg`
 const svgPath = `${filePath}.svg`
 
 const svg = fs.readFileSync(svgPath, 'utf8')
@@ -37,7 +41,7 @@ const size = fs.statSync(svgPath).size
 const clipboardLabel = buttonLabel
   ? `Copy ${buttonLabel} SVG to clipboard`
   : file
-    ? `Copy ${file}.svg file to clipboard`
+    ? `Copy ${file}.svg content to clipboard`
     : 'Copy SVG to clipboard'
 ---
 

site/src/components/shortcodes/ThemeDemo.astro

@@ -0,0 +1,225 @@
+---
+import {getDocsPublicFsPath, getVersionedDocsPath} from "@libs/path.ts";
+import {getConfig} from "@libs/config.ts";
+
+interface Props {
+  /**
+   * The theme to use for display. One of `orange`, `orange-compact`, or `sosh`.
+   * @default 'orange'
+   */
+  theme?: 'orange' | 'orange-compact' | 'sosh'
+
+}
+
+const { theme = 'orange' } = Astro.props
+
+---
+
+<link rel="preload" href=`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg` as="image" type="image/svg+xml" />
+
+
+<div data-bs-brand={theme} id={`theme-demo-${theme}`}>
+  <div class="row mb-medium">
+    <div class="col-12 sm:col-6 md:col-4">
+      <div class="alert alert-message alert-negative mb-medium">
+        <div class="alert-icon"></div>
+        <div class="alert-container">
+          <div class="alert-text-container">
+            <p class="alert-label">Error</p>
+          </div>
+        </div>
+      </div>
+      <div class="alert alert-message alert-positive mb-medium">
+        <div class="alert-icon"></div>
+        <div class="alert-container">
+          <div class="alert-text-container">
+            <p class="alert-label">Success</p>
+          </div>
+        </div>
+      </div>
+      <div class="alert alert-message alert-info mb-medium">
+        <div class="alert-icon"></div>
+        <div class="alert-container">
+          <div class="alert-text-container">
+            <p class="alert-label">Info</p>
+          </div>
+        </div>
+      </div>
+      <div class="alert alert-message alert-warning">
+        <div class="alert-icon"></div>
+        <div class="alert-container">
+          <div class="alert-text-container">
+            <p class="alert-label">Warning</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-12 sm:col-6 md:col-4">
+      <div class="d-flex gap-xsmall flex-wrap my-small">
+        <button type="button" class="btn btn-default">Default</button>
+        <button type="button" class="btn btn-next btn-strong">Next</button>
+        <button type="button" class="btn btn-brand">
+          <svg aria-hidden="true">
+            <!--/orange/docs/1.2/assets/img/ouds-web-sprite.svg-->
+            <use xlink:href=`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#heart-empty` />
+            <!--<use xlink:href={getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#heart-empty')} />-->
+          </svg>
+          Brand
+        </button>
+        <button type="button" class="btn btn-minimal">Minimal</button>
+        <button type="button" class="btn btn-negative">Negative</button>
+      </div>
+      <div class="d-flex gap-xsmall flex-wrap">
+        <button type="button" class="btn btn-icon btn-default">
+          <svg aria-hidden="true">
+            <use xlink:href=`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#heart-empty` />
+          </svg>
+          <span class="visually-hidden">Default</span>
+        </button>
+        <a class="btn btn-next btn-icon btn-strong" href="#"><span class="visually-hidden">Next</span></a>
+        <button type="button" class="btn btn-icon btn-brand">
+          <svg aria-hidden="true">
+            <use xlink:href=`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#heart-empty` />
+          </svg>
+          <span class="visually-hidden">Brand</span>
+        </button>
+        <a class="btn btn-previous btn-icon btn-minimal" href="#"><span class="visually-hidden">Previous</span></a>
+        <button type="button" class="btn btn-icon btn-negative">
+          <svg aria-hidden="true">
+            <use xlink:href=`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#heart-empty` />
+          </svg>
+          <span class="visually-hidden">Negative</span>
+        </button>
+      </div>
+    </div>
+    <div class="col-12 sm:col-6 md:col-4">
+      <div class="checkbox-item">
+        <div class="control-item-assets-container">
+          <input checked class="control-item-indicator" type="checkbox" value="" id={`cb-${theme}`} />
+        </div>
+        <div class="control-item-text-container">
+          <label class="control-item-label" for={`cb-${theme}`}>Checkbox</label>
+        </div>
+      </div>
+      <div class="radio-button-item">
+        <div class="control-item-assets-container">
+          <input checked class="control-item-indicator" type="radio" value="" id={`rb-${theme}`} name={`radio-${theme}`} />
+        </div>
+        <div class="control-item-text-container">
+          <label class="control-item-label" for={`rb-${theme}`}>Radio button</label>
+        </div>
+      </div>
+      <div class="switch-item control-item-reverse">
+        <div class="control-item-assets-container">
+          <input checked class="control-item-indicator" type="checkbox" role="switch" value="" id={`sw-${theme}`} />
+        </div>
+        <div class="control-item-text-container">
+          <label class="control-item-label" for={`sw-${theme}`}>Switch</label>
+        </div>
+      </div>
+    </div>
+    <div class="col-12 sm:col-6 md:col-4">
+      <div class="d-flex gap-large my-small">
+        <p class="badge badge-positive"><span class="visually-hidden">Success</span></p>
+        <p class="badge badge-info"><span class="visually-hidden">Info</span></p>
+        <p class="badge badge-warning"><span class="visually-hidden">Warning</span></p>
+        <p class="badge"><span class="visually-hidden">Beware</span></p>
+      </div>
+      <div class="d-flex gap-large my-small">
+        <p class="badge badge-neutral badge-count badge-large">0<span class="visually-hidden">notification</span></p>
+        <p class="badge badge-accent badge-count badge-large">1<span class="visually-hidden">notification</span></p>
+        <p class="badge badge-positive badge-large">
+          <span class="badge-status-icon"></span>
+          <span class="visually-hidden">Success</span>
+        </p>
+        <p class="badge badge-info badge-large">
+          <span class="badge-status-icon"></span>
+          <span class="visually-hidden">Info</span>
+        </p>
+      </div>
+      <ul class="list-unstyled d-flex flex-wrap column-gap-xsmall row-gap-medium" aria-label="Keywords">
+        <li class="tag">One</li>
+        <li class="tag">Two</li>
+        <li class="tag">Three</li>
+      </ul>
+      <ul class="list-unstyled d-flex flex-wrap column-gap-xsmall row-gap-medium" aria-label="Statuses">
+        <li class="tag tag-positive">Positive</li>
+        <li class="tag tag-info">Info</li>
+        <li class="tag tag-warning tag-muted">Warning</li>
+        <li class="tag tag-negative tag-muted">Negative</li>
+      </ul>
+    </div>
+    <div class="col-12 sm:col-6 md:col-4">
+      <div><a class="link link-chevron" href="#">Link with chevron</a></div>
+      <nav aria-label="basic breadcrumb">
+        <ol class="breadcrumb my-small">
+          <li class="breadcrumb-item"><a href="#" title="Home">Home</a></li>
+          <li class="breadcrumb-item active" aria-current="page"><span title="Library">Library</span></li>
+        </ol>
+      </nav>
+      <ul class="chips-container flex-wrap column-gap-xsmall row-gap-medium" aria-label="Filter by number">
+        <li class="chip chip-filter">
+          <input type="checkbox" id={`fc1-${theme}`} checked />
+          <label class="chip-interactive" for={`fc1-${theme}`}>
+            One
+          </label>
+        </li>
+        <li class="chip chip-filter">
+          <input type="checkbox" id={`fc2-${theme}`} />
+          <label class="chip-interactive" for={`fc2-${theme}`}>
+            Two
+          </label>
+        </li>
+        <li class="chip chip-filter">
+          <input type="checkbox" id={`fc3-${theme}`} />
+          <label class="chip-interactive" for={`fc3-${theme}`}>
+            Three
+          </label>
+        </li>
+      </ul>
+      <ul class="chips-container flex-wrap column-gap-xsmall row-gap-medium" aria-label="Start with">
+        <li class="chip chip-suggestion">
+          <button class="chip-interactive" type="button">
+            Hi
+          </button>
+        </li>
+        <li class="chip chip-suggestion">
+          <button class="chip-interactive" type="button">
+            Hello
+          </button>
+        </li>
+        <li class="chip chip-suggestion">
+          <button class="chip-interactive" type="button">
+            Good morning
+          </button>
+        </li>
+      </ul>
+    </div>
+    <div class="col-12 sm:col-6 md:col-4">
+      <div class="text-input mb-medium">
+        <div class="text-input-container">
+          <label for={`ti-${theme}`}>Firstname</label>
+          <input type="text" class="text-input-field" id={`ti-${theme}`} placeholder=" ">
+        </div>
+      </div>
+      <div class="text-input mb-medium">
+        <div class="text-input-container">
+          <label for={`pwd-${theme}`}>Password</label>
+          <input type="password" id={`pwd-${theme}`} class="text-input-field" placeholder=" ">
+          <button class="btn btn-minimal btn-icon" aria-pressed="false" type="button">
+            <svg aria-hidden="true">
+              <use xlink:href=`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#accessibility-vision` />
+            </svg>
+            <span class="visually-hidden">Show password</span>
+          </button>
+        </div>
+      </div>
+      <div class="text-area">
+        <div class="text-area-container">
+          <label for={`ta-${theme}`}>Additional comments</label>
+          <textarea class="text-area-field" id={`ta-${theme}`} placeholder="Enter your comment here"></textarea>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

site/src/components/shortcodes/ThemeDemoStyles.astro

@@ -0,0 +1,29 @@
+---
+
+
+// Dynamic imports to avoid build-time processing
+
+import Stylesheet from "@components/head/Stylesheet.astro";
+import {getVersionedDocsPath} from "@libs/path.ts";
+const Scss = import.meta.env.PROD ? null : await import('@components/head/Scss.astro')
+const ScssProd = import.meta.env.PROD ? await import('@components/head/ScssProd.astro') : null
+
+---
+
+<style is:global lang="scss">
+  div#theme-demo-orange > * {
+    background-color: orange !important;
+    @import '../../../../packages/orange/scss/ouds-web-bootstrap.scss';
+    @import '../../../static/orange/docs/[version]/assets/fonts/solaris-icons';
+  }
+  div#theme-demo-orange-compact > * {
+    background-color: orangered !important;
+    @import '../../../../packages/orange-compact/scss/ouds-web-bootstrap.scss';
+    @import '../../../static/orange-compact/docs/[version]/assets/fonts/solaris-icons';
+  }
+  div#theme-demo-sosh > * {
+    background-color: teal !important;
+    @import '../../../../packages/sosh/scss/ouds-web-bootstrap.scss';
+    @import '../../../static/sosh/docs/[version]/assets/fonts/solaris-icons';
+  }
+</style>

site/src/components/shortcodes/ThemeDemoStylesImport.astro

@@ -0,0 +1,17 @@
+---
+// Dynamic imports to avoid build-time processing
+
+import ThemeDemoStylesProd from "@shortcodes/ThemeDemoStylesProd.astro";
+import ThemeDemoStyles from "@shortcodes/ThemeDemoStyles.astro";
+import {getVersionedDocsPath} from "@libs/path.ts";
+const Scss = import.meta.env.PROD ? null : await import('@components/head/Scss.astro')
+const ScssProd = import.meta.env.PROD ? await import('@components/head/ScssProd.astro') : null
+---
+
+{import.meta.env.PROD && ScssProd && (
+  <ThemeDemoStylesProd />
+)}
+
+{!import.meta.env.PROD && Scss && (
+  <ThemeDemoStyles />
+)}

site/src/components/shortcodes/ThemeDemoStylesProd.astro

@@ -0,0 +1,18 @@
+---
+
+---
+
+<style is:global lang="scss">
+  div#theme-demo-orange > * {
+    @import '../../../../packages/orange/scss/tokens';
+    @import '../../../static/orange/docs/[version]/assets/fonts/solaris-icons';
+  }
+  div#theme-demo-orange-compact > * {
+    @import '../../../../packages/orange-compact/scss/tokens';
+    @import '../../../static/orange-compact/docs/[version]/assets/fonts/solaris-icons';
+  }
+  div#theme-demo-sosh > * {
+    @import '../../../../packages/sosh/scss/tokens';
+    @import '../../../static/sosh/docs/[version]/assets/fonts/solaris-icons';
+  }
+</style>