docs: add version selection to header

.github/workflows/pr.yml

@@ -8,6 +8,7 @@ on:
       - opened
       - reopened
       - synchronize
+      - labeled
 
 concurrency: pr-${{ github.ref }}
 
@@ -104,7 +105,6 @@ jobs:
   merge-core-reports:
       if: failure()
       needs: [visual-testing-core]
-
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v3
@@ -125,6 +125,7 @@ jobs:
           name: core-html-report--attempt-${{ github.run_attempt }}
           path: playwright-report
           retention-days: 2
+
   unit:
     if: ${{ needs.changes.outputs.core == 'true' || needs.changes.outputs.angular == 'true' }}
     needs: [build]

netlify.toml

@@ -0,0 +1,2 @@
+[build]
+  ignore = "GIT_COMMIT_MESSAGE=$(git show -s --format=%s $CACHED_COMMIT_REF) node ./scripts/ignore-netlify.js"

packages/core/.eslintrc.json

@@ -3,7 +3,7 @@
   "parserOptions": {
     "project": "./tsconfig.json"
   },
-  "extends": ["plugin:@stencil-community/recommended", "ix"],
+  "extends": [/* "plugin:@typescript-eslint/recommended", */ "plugin:@stencil-community/recommended", "ix"],
   "rules": {
     "@stencil-community/async-methods": 0,
     "@stencil-community/own-props-must-be-private": 0,
@@ -12,6 +12,7 @@
     "@stencil-community/ban-default-true": ["warn"],
     "react/jsx-no-bind": 0,
     "react/jsx-uses-react": 0,
-    "react/react-in-jsx-scope": 0
+    "react/react-in-jsx-scope": 0,
+    "@typescript-eslint/no-confusing-non-null-assertion": "error"
   }
 }

packages/core/component-doc.json

@@ -2,7 +2,7 @@
   "timestamp": "",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.12.3",
+    "version": "4.12.6",
     "typescriptVersion": "5.3.3"
   },
   "components": [

packages/core/package.json

@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.5.1",
-    "@stencil/core": "^4.12.3",
+    "@stencil/core": "^4.12.6",
     "@types/luxon": "^3.3.7",
     "animejs": "~3.2.1",
     "hyperlist": "^1.0.0",

packages/documentation/docs/controls/_panes_styleguide.md

@@ -53,6 +53,6 @@ Panes have two states: collapsed and expanded. The appearance of the states vari
 
 ## Related patterns
 
-[Drawers](./drawers.md)
+[Drawers](./drawer.md)
 [Header](../controls/application-frame/application-header.md)
 [Menu](../controls/application-frame/application-menu.md)

packages/documentation/docs/introduction.md

@@ -15,9 +15,9 @@ import BlazorIcon from '@site/static/img/blazor.svg';
 
 # Welcome to Siemens Industrial Experience
 
-<p className="text-l-title">
+<span className="text-l-title">
 Siemens Industrial Experience is an open-source design system for designers and developers to consistently create the perfect digital experience for partners and customers within industrial contexts. Siemens Industrial Experience gives you access to a broad range of UI patterns, web-based code implementations, design tools, resources and content guidelines to accelerate collaboration between designers, developers and writers, helping to build efficient and consistent products.
-</p>
+</span>
 
 ## Guiding principles
 
@@ -39,7 +39,7 @@ Siemens Industrial Experience provides and maintains a Figma design kit containi
   <Card link="installation/react"><ReactIcon className="Card_Icon" />React</Card>
   <Card link="installation/javascript"><WebComponentsIcon className="Card_Icon" />Web Components</Card>
   <Card link="installation/vue"><VueIcon className="Card_Icon" />Vue&nbsp;<span style={{fontSize: '0.8rem'}}>(experimental)</span></Card>
-  <Card link="installation/blazor"><BlazorIcon class="Card_Icon" />Blazor&nbsp;<span style={{fontSize: '0.8rem'}}>(experimental)</span></Card>
+  <Card link="installation/blazor"><BlazorIcon className="Card_Icon" />Blazor&nbsp;<span style={{fontSize: '0.8rem'}}>(experimental)</span></Card>
 </CardList>
 
 ## Contribute

packages/documentation/docusaurus.config.ts

@@ -7,11 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import type * as Preset from '@docusaurus/preset-classic';
-import type { Config } from '@docusaurus/types';
+import type { Config, PluginConfig } from '@docusaurus/types';
 import { themes as prismThemes } from 'prism-react-renderer';
 import figmaPlugin from 'figma-plugin';
 import path from 'path';
 import fs from 'fs';
+import versionDeployment from './version-deployment.json' with { type: 'json '};
 
 let withBrandTheme = false;
 
@@ -21,6 +22,73 @@ const libCss = [
   require.resolve('@siemens/ix/dist/siemens-ix/theme/legacy-classic-light.css'),
 ];
 
+const useFastStart = !!process.env.FAST_START;
+
+const isDeployPreview = process.env.CONTEXT === 'deploy-preview';
+const isDevPreview = process.env.CONTEXT === 'dev';
+
+const plugins: PluginConfig[] = [
+  'docusaurus-plugin-sass',
+]
+
+if (useFastStart) {
+  console.warn('🚧 🚧 🚧 🚧 🚧 🚧');
+  console.warn('🚧 🚧 🚧 🚧 🚧 🚧');
+  console.warn('Fast start enabled');
+  console.warn('No figma plugin enabled');
+  console.warn('No search plugin enabled');
+  console.warn('🚧 🚧 🚧 🚧 🚧 🚧');
+  console.warn('🚧 🚧 🚧 🚧 🚧 🚧');
+}
+
+if (!useFastStart) {
+  plugins.push([
+    require.resolve('docusaurus-lunr-search'),
+    {
+      languages: ['en'],
+      excludeRoutes: ['**/installation/CHANGELOG', '**/auto-generated/**/*'],
+    },
+  ],)
+}
+
+function getAnnouncementBarConfig() {
+
+  const latestVersion = versionDeployment.versions.find(version => version.id === versionDeployment.currentVersion);
+
+  if (versionDeployment.currentVersion !== versionDeployment.latestVersion) {
+    return {
+      announcementBar: {
+        content:
+          `<span style="font-size: 1rem">You are looking at an different version ${latestVersion?.label} then the latest supported version. Visit <a style="font-weight: bold;" href="https://ix.siemens.io">https://ix.siemens.io</a> for the latest version.</span>`,
+        isCloseable: false,
+        backgroundColor: 'var(--theme-color-warning)',
+      },
+    };
+  }
+
+  if (isDevPreview) {
+    return {
+      announcementBar: {
+        content:
+          '<span style="font-size: 1rem">This is the development documentation for Siemens Industrial Experience. Visit <a style="font-weight: bold;" href="https://ix.siemens.io">https://ix.siemens.io</a> for the latest version.</span>',
+        isCloseable: false,
+        backgroundColor: 'var(--theme-color-warning)',
+      },
+    };
+  }
+
+  if (isDeployPreview) {
+    return {
+      announcementBar: {
+        content:
+          '<span style="font-size: 1rem">This is the preview documentation for Siemens Industrial Experience. Visit <a style="font-weight: bold;" href="https://ix.siemens.io">https://ix.siemens.io</a> for the latest version.</span>',
+        isCloseable: false,
+        backgroundColor: 'var(--theme-color-warning)',
+      },
+    };
+  }
+}
+
 if (!process.env.CI) {
   try {
     // Check if theme is existing inside node_modes
@@ -70,7 +138,7 @@ const config: Config = {
   url: 'https://ix.siemens.io',
   baseUrl: baseUrl,
   onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
+  onBrokenMarkdownLinks: 'throw',
   favicon: 'img/favicon.ico',
   organizationName: 'Siemens AG',
   projectName: 'ix',
@@ -85,7 +153,7 @@ const config: Config = {
           // Please change this to your repo.
           editUrl:
             'https://www.github.com/siemens/ix/edit/main/packages/documentation/',
-          remarkPlugins: [
+          remarkPlugins: useFastStart ? [] : [
             figmaPlugin({
               baseUrl: `${baseUrl}figma`,
               figmaFolder: `${path.join(__dirname, 'static', 'figma')}`,
@@ -103,8 +171,10 @@ const config: Config = {
   ],
   customFields: {
     withBrandTheme,
+    versionDeployment
   },
   themeConfig: {
+    ...getAnnouncementBarConfig(),
     metadata: [
       {
         name: 'keywords',
@@ -126,13 +196,7 @@ const config: Config = {
         alt: 'Siemens AG',
         src: 'img/logo.svg',
       },
-      items: [
-        // Remove docs version until library needs to publish an major release
-        // {
-        //   type: 'docsVersionDropdown',
-        //   position: 'right',
-        // },
-      ],
+      items: [],
     },
     footer: {
       copyright: `© Siemens 1996 - ${new Date().getFullYear()}`,
@@ -201,16 +265,7 @@ const config: Config = {
       darkTheme: prismThemes.dracula,
     },
   } satisfies Preset.ThemeConfig,
-  plugins: [
-    'docusaurus-plugin-sass',
-    [
-      require.resolve('docusaurus-lunr-search'),
-      {
-        languages: ['en'],
-        excludeRoutes: ['**/installation/CHANGELOG', '**/auto-generated/**/*'],
-      },
-    ],
-  ],
+  plugins: plugins,
 };
 
 module.exports = config;

packages/documentation/src/components/SwitchTheme.tsx

@@ -33,7 +33,12 @@ function ThemeEntry(props: {
     </div>
   );
 }
-export function SwitchTheme(props: { icon: string; label: string }) {
+
+export function SwitchTheme(props: {
+  icon: string;
+  label: string;
+  isMobile: boolean;
+}) {
   const context = useDocusaurusContext();
 
   const [open, setOpen] = useState(false);
@@ -104,7 +109,11 @@ export function SwitchTheme(props: { icon: string; label: string }) {
   }
 
   return (
-    <IxDropdownButton outline icon={props.icon} label={getLabel(theme)}>
+    <IxDropdownButton
+      outline
+      icon={props.icon}
+      label={props.isMobile ? getLabel(theme) : null}
+    >
       {registeredThemes.map(({ id, label, color }) => {
         return (
           <IxDropdownItem key={id} checked={id === theme}>

packages/documentation/src/components/VersionRedirect/index.tsx

@@ -0,0 +1,40 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { IxDropdownButton, IxDropdownItem } from '@siemens/ix-react';
+
+export default function VersionRedirect() {
+  const context = useDocusaurusContext();
+  const versionDeployment = context.siteConfig.customFields
+    .versionDeployment as any;
+
+  const { currentVersion } = versionDeployment;
+  const selected = versionDeployment.versions.find(
+    (version) => version.id === currentVersion
+  );
+
+  function routeToVersion(link: string) {
+    if (typeof window !== 'undefined') {
+      window.location.href = link;
+    }
+  }
+
+  return (
+    <IxDropdownButton style={{ marginRight: '1rem' }} label={selected.label}>
+      {versionDeployment.versions.map((version) => (
+        <IxDropdownItem
+          key={version.id}
+          label={version.label}
+          checked={version.id === currentVersion}
+          onClick={() => routeToVersion(version.href)}
+        ></IxDropdownItem>
+      ))}
+    </IxDropdownButton>
+  );
+}

packages/documentation/src/css/custom.scss

@@ -170,7 +170,10 @@ aside {
 }
 
 .dropdown__link {
+  display: inline-flex;
+  align-items: center;
   text-decoration: auto;
+  width: 100%;
 }
 
 .menu__link {

packages/documentation/src/theme/Navbar/Content/index.tsx

@@ -13,6 +13,7 @@ import NavbarSearch from '@theme/Navbar/Search';
 import { SwitchTheme } from '@site/src/components/SwitchTheme';
 
 import styles from './styles.module.css';
+import VersionRedirect from '@site/src/components/VersionRedirect';
 
 function useNavbarItems() {
   // TODO temporary casting until ThemeConfig type is improved
@@ -90,16 +91,15 @@ export default function NavbarContent(): JSX.Element {
         // Ask the user to add the respective navbar items => more flexible
         <>
           <NavbarItems items={rightItems} />
-          <NavbarColorModeToggle className={styles.colorModeToggle} />
-
           {isDocs() ? null : (
             <>
-              {!searchBarItem && (
-                <NavbarSearch>
-                  <SearchBar />
-                </NavbarSearch>
-              )}
-              <SwitchTheme icon="image" label="Theme"></SwitchTheme>
+              <SearchBar />
+              <VersionRedirect />
+              <SwitchTheme
+                isMobile={mobileSidebar.disabled}
+                icon="image"
+                label="Theme"
+              ></SwitchTheme>
             </>
           )}
         </>

packages/documentation/version-deployment.json

@@ -0,0 +1,16 @@
+{
+  "latestVersion": "v2",
+  "currentVersion": "v3-preview",
+  "versions": [
+    {
+      "id": "v3-preview",
+      "href": "https://v3-preview.ix.siemens.io",
+      "label": "V3 (Preview)"
+    },
+    {
+      "id": "v2",
+      "href": "https://ix.siemens.io",
+      "label": "V2 (Active)"
+    }
+  ]
+}

packages/eslint-config-ix/index.js

@@ -11,7 +11,7 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
   extends: ['turbo', 'prettier'],
-  plugins: ['prettier'],
+  plugins: ['prettier', '@typescript-eslint'],
   rules: {
     'prettier/prettier': 'error',
     quotes: [