feat: use brand-theme optional in core and docs

packages/core/package.json

@@ -79,6 +79,9 @@
     "@popperjs/core": "^2.11.0",
     "bootstrap": "~5.2.0"
   },
+  "optionalDependencies": {
+    "@siemens/ix-brand-theme": "~1.0.0-beta.0"
+  },
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"

packages/core/playwright.config.ts

@@ -16,12 +16,17 @@ import { devices } from '@playwright/test';
  */
 // require('dotenv').config();
 
-const THEMES = [
-  'theme-brand-dark',
-  'theme-brand-light',
-  'theme-classic-light',
-  'theme-classic-dark',
-];
+let THEMES = ['theme-classic-light', 'theme-classic-dark'];
+
+try {
+  const moduleName = '@siemens/ix-brand-theme';
+  require.resolve(moduleName);
+  THEMES = ['theme-brand-dark', 'theme-brand-light', ...THEMES];
+} catch (e) {
+  console.warn(
+    'optionalDependency @siemens/ix-brand-theme not found for visual-regression'
+  );
+}
 
 function buildProjectsWithThemes() {
   return THEMES.flatMap((theme) => {
@@ -35,25 +40,6 @@ function buildProjectsWithThemes() {
           theme,
         },
       },
-      // Currently deactivated to speedup regression test
-      // {
-      //   name: `firefox - ${theme}`,
-      //   use: {
-      //     ...devices['Desktop Firefox'],
-      //   },
-      //   metadata: {
-      //     theme,
-      //   },
-      // },
-      // {
-      //   name: `webkit - ${theme}`,
-      //   use: {
-      //     ...devices['Desktop Safari'],
-      //   },
-      //   metadata: {
-      //     theme,
-      //   },
-      // },
     ];
   });
 }

packages/core/stencil.config.ts

@@ -15,6 +15,27 @@ import { reactOutputTarget } from '@stencil/react-output-target';
 import { sass } from '@stencil/sass';
 import autoprefixer from 'autoprefixer';
 import fs from 'fs';
+
+const copyAssets = [
+  {
+    src: './../../../node_modules/@siemens/ix-icons/dist',
+    dest: 'build/ix-icons',
+  },
+];
+
+try {
+  const moduleName = '@siemens/ix-brand-theme';
+  require.resolve(moduleName);
+  copyAssets.push({
+    src: './../../../node_modules/@siemens/ix-brand-theme/dist/ix-brand-theme',
+    dest: 'build/ix-brand-theme',
+  });
+} catch (e) {
+  console.warn(
+    'optionalDependency @siemens/ix-brand-theme not found for visual-regression'
+  );
+}
+
 export const config: Config = {
   bundles: [
     {
@@ -179,17 +200,7 @@ export const config: Config = {
     {
       type: 'www',
       serviceWorker: null, // disable service workers
-      copy: [
-        {
-          src: './../../../node_modules/@siemens/ix-icons/dist',
-          dest: 'build/ix-icons',
-        },
-        {
-          // Temporary workaround until the brand theme is part of ix core
-          src: './../../../node_modules/@siemens/ix-brand-theme/dist/ix-brand-theme',
-          dest: 'build/ix-brand-theme',
-        },
-      ],
+      copy: copyAssets,
     },
   ],
 };

packages/documentation/docs/icon-library/icons.md

@@ -2,7 +2,6 @@
 sidebar_position: 3
 ---
 
-import LivePreview from '@site/src/components/LivePreview';
 import Icons from '@site/src/components/Icons';
 
 # Icons

packages/documentation/docs/theming/colors.md

@@ -1,4 +1,3 @@
-import LivePreview from '@site/src/components/LivePreview';
 import Color from '@site/src/components/Color';
 
 # Colors

packages/documentation/docs/theming/theming-and-styling.md

@@ -2,15 +2,13 @@
 sidebar_position: 1
 ---
 
-import HTMLPreview from '@site/src/components/HTMLPreview';
 import {Card, CardList} from '@site/src/components/Card';
 
 # Theming and Styling
 
 <CardList>
   <Card label="Theme overview" isPrimary={true} link="theme"/>
   <Card label="Animation" link="animation"/>
-  <Card label="Border" link="border"/>
   <Card label="Colors" link="colors" />
   <Card label="Fonts" link="fonts" />
 </CardList>

packages/documentation/docusaurus.config.js

@@ -10,6 +10,30 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
+let withBrandTheme = false;
+
+const libCss = [
+  require.resolve('@siemens/ix/dist/siemens-ix/siemens-ix.css'),
+  require.resolve('@siemens/ix-icons/dist/css/ix-icons.css'),
+];
+
+try {
+  const path = require.resolve(
+    '@siemens/ix-brand-theme/dist/ix-brand-theme/ix-brand-theme.css'
+  );
+  console.log('Found optionalDependency @siemens/ix-brand-theme.');
+  libCss.push(path);
+  withBrandTheme = true;
+} catch (e) {
+  console.warn('optionalDependency @siemens/ix-brand-theme not found!');
+}
+
+const customCss = [
+  ...libCss,
+  require.resolve('./src/css/custom.css'),
+  require.resolve('./src/css/search.css'),
+];
+
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'Siemens iX',
@@ -34,18 +58,14 @@ const config = {
             'https://www.github.com/siemens/ix/edit/main/packages/documentation/',
         },
         theme: {
-          customCss: [
-            require.resolve('@siemens/ix/dist/siemens-ix/siemens-ix.css'),
-            // Insert additional theme (DO NOT REMOVE THIS LINE)
-            require.resolve('@siemens/ix-icons/dist/css/ix-icons.css'),
-            require.resolve('./src/css/custom.css'),
-            require.resolve('./src/css/search.css'),
-          ],
+          customCss,
         },
       }),
     ],
   ],
-
+  customFields: {
+    withBrandTheme,
+  },
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({

packages/documentation/package.json

@@ -25,7 +25,6 @@
     "@mdx-js/react": "^1.6.22",
     "@siemens/ix-icons": "1.0.0-beta.1",
     "@siemens/ix": "~1.0.0-beta.0",
-    "@siemens/ix-brand-theme": "~1.0.0-beta.0",
     "@siemens/ix-react": "~1.0.0-beta.0",
     "@stencil/postcss": "^2.1.0",
     "clsx": "^1.2.1",
@@ -43,6 +42,9 @@
     "rimraf": "^3.0.2",
     "typescript": "^4.7.4"
   },
+  "optionalDependencies": {
+    "@siemens/ix-brand-theme": "~1.0.0-beta.0"
+  },
   "browserslist": {
     "production": [
       ">0.5%",

packages/documentation/scripts/copy-webcomponents.mjs

@@ -50,9 +50,11 @@ function filter(fileName) {
     fsExtra.copy(ix_path, ix_dest_path, { filter }),
     fsExtra.copy(ix_aggrid_path, ix_aggrid_dest_path, { filter }),
     fsExtra.copy(icon_path, icon_dest_path),
-    fsExtra.copy(ix_brand_theme_path, ix_brand_theme_dest_path, {
-      filter: (path) => !path.includes('ix-brand-theme/node_modules'),
-    }),
+    fsExtra.pathExistsSync(ix_brand_theme_path)
+      ? fsExtra.copy(ix_brand_theme_path, ix_brand_theme_dest_path, {
+          filter: (path) => !path.includes('ix-brand-theme/node_modules'),
+        })
+      : Promise.resolve(),
   ]);
   console.log('Copy finished!');
 })();

packages/documentation/sidebars.js

@@ -79,17 +79,7 @@ const sidebars = {
     },
     {
       type: 'category',
-      label: 'Controls (Core UI)',
-      items: [
-        {
-          type: 'autogenerated',
-          dirName: 'components',
-        },
-      ],
-    },
-    {
-      type: 'category',
-      label: 'Controls (iX development)',
+      label: 'Controls',
       items: [
         {
           type: 'category',